@use 'variables' as *;
@use 'mixins' as *;

$zwssgrsetting: ".zwssgr";

#{$zwssgrsetting} {
    &-disconnect-wrapper {
        display: flex;
        align-items: center;
        margin: 20px 0 0 0;
        @include respond-below('md') {
            flex-direction: column-reverse;
        }
    }

    &-section-wrap {
        #{$zwssgrsetting} {
            &-input-text {
                padding: 10px 16px;
                border: 1px solid var(--gray-color-300);
                background: var(--white-color-200);
                height: 48px;
                box-shadow: none;
                color: var(--charcoal-gray);
                border-radius: var(--border-radius-large);
                font-weight: var(--font-weight-400);
                font-size: var(--font-size-body);
                font-family: var(--font-primary);
                line-height: 1;
                width: 100%;
                max-width: 500px;
            }
        
            &-input-select {
                line-height: 1.3;
                background: var(--white-color-200) url(../../images/down-arrow.png) no-repeat right 7px top 55%;
                background-size: 16px 10px;
            }

            &-textarea {
                padding: 10px 16px;
                border: 1px solid var(--gray-color-300);
                background: var(--white-color-200);
                height: 200px;
                box-shadow: none;
                color: var(--charcoal-gray);
                border-radius: var(--border-radius-large);
                font-weight: var(--font-weight-400);
                font-size: var(--font-size-body);
                font-family: var(--font-primary);
                line-height: 1;
                width: 100%;
            }
        }
    }

    &-notification-field {
        display: flex;
        flex-wrap: wrap;
        margin: 20px 0;
        #{$zwssgrsetting} {
            &-th-label {
                width: 200px;
            }
            &-field{
                width: 100%;
                 max-width: 400px;
            }
        }
    }
}