@import "../../../../../assets/styles/index.scss";

.createCustomer {

    &-header {
        @include rem("padding", 20px 55px);
        background-color: #f8f8f8;
        border-bottom: 1px solid #eeeeee;
        label {
            display: block;
            margin-bottom: 0;
        }
        .back__btn {
            background-image: linear-gradient($color-dark-gray1, $color-dark-gray4);
            color: $color-white;
            cursor: pointer;
            @include rem("padding", 5px 15px);
            @include rem("margin-right", 10px);
            @include border('all', 0, null , null);
            @include border-radius(3px);
        }
    }

    &-unsavedheader {
        @include rem("padding", 20px 55px);
        background-color: $color-blue-light;
        border-bottom: 1px solid $color-blue-light2;

        .row:first-child {
            @include rem("margin-bottom", 15px);
        }

        .row div:first-child {
            button {
                margin-left: 0;
            }
        }
        .row div:first-child {
            button {
                margin-right: 0;
            }
        }

        button {
            @include rem("padding", 8px 20px);
        }
    }

    &-form {
        @include rem("padding", 20px 55px);

        form .row {
            @include rem("margin-bottom", 25px);
        }
    }

    div.col {
        text-align: left;

        label {
            display: block;
        }

        .mandatory {
            color: $color-red1;
        }

        .error-msg {
            @include rem("font-size", 14px);
            display: block;
            color: $color-red1;
          }
    }

    select {
        display: inline-block !important;
        @include rem("padding", 15px 10px);
        @include rem("font-size", 14px);
        width: 100%;
        border: none;
        @include border-radius(0);
        background-color: $color-white;
        border: 1px solid $color-dark-gray1;
        overflow-y: auto;
    }
    select[disabled] > option {
        color: $color-dark-gray1;
    }

    input {
        @include rem("padding", 24px 10px);
        width: 100%;
        border: none;
        color: $color-dark-gray1;
        @include border-radius(0);
        background-color: $color-white;
        border: 1px solid $color-dark-gray1;
        overflow-y: auto;

    }

    input[type="radio"]:not(:checked), input[type="radio"]:checked {
        opacity: 100;
        float: left;
    }

    &-checkbox {
        @include rem("padding-top", 13px);
    }

    &-mobile {
        &_country, &_city, &_area, &_number {
            width: 85px !important;
            float: left;
        }
        &_hypen {
            display: inline-block;
            float: left;
            text-align: center;
            color: $color-dark-gray1;
            font-weight: bold;
            @include rem("padding-top", 13px);
            @include rem("width", 28px);
        }
    }

    &-phoneContainer {
        margin-bottom: 0 !important;
    }

    &-btncontainer {
        text-align: right !important;
        @include rem("padding-top", 15px);

        button i {
            @include rem("margin-right", 5px);
        }
    }
}