.primary_input {
    .input-group {
        .input-group-prepend {
            .input-group-text {
                border-radius: 30px 0 0 30px;
                background: #ECEEF3;
                border: 0;
                color: #fff;
                text-transform: uppercase;
                padding-left: 27px;
                padding-right: 27px;
                font-size: 14px;
                font-weight: 500;
            }
        }
    }

    .primary_input_field {}

    .form-control:focus {
        box-shadow: none !important;
        border-color: #ECEEF4;
    }
}

.menu_edit_field {
    background: #F5F7FB;
    padding: 25px;
    border-radius: 23px;
}

.primary_datepicker_input .primary_input_field.primary_input_field_auto:focus {
    border: 0 !important;
}

.primary_input_field {
    border: 1px solid #ECEEF4;
    font-size: 14px;
    color: #008FD4;
    padding-left: 20px;
    height: 46px;
    border-radius: 30px;
    width: 100%;
    padding-right: 15px;

    &.primary_input_field_auto {
        padding: 0;
        padding-top: 0px;
        padding-bottom: 0px;
        height: auto;
        border: 0;
        font-size: 13px;
        text-transform: none;

        &:focus {
            border: 0 !important;
        }

        &::placeholder {
            text-transform: none;
        }
    }

    &::-webkit-input-placeholder {
        color: #828bb2;
    }

    &::-moz-placeholder {
        color: #828bb2;
    }

    &:-ms-input-placeholder {
        color: #828bb2;
    }

    &::-ms-input-placeholder {
        color: #828bb2;
    }

    &::placeholder {
        color: #828bb2;
    }

    &.white_input {
        background: #fff;
    }
}
.primary_textarea {
    border: 1px solid #ECEEF4;
    font-size: 14px;
    color: #008FD4;
    padding: 20px;
    border-radius: 23px;
    width: 100%;
    height: 192px;
    resize: none;

    &.height_128 {
        height: 128px;
    }

    &.height_120 {
        height: 120px;
    }

    &.height_104 {
        height: 104px;
    }

    &.height_112 {
        height: 112px;
        padding-top: 13px;
    }

    &.height_78 {
        height: 78px;
        padding: 7px 15px;
    }

    &::-webkit-input-placeholder {
        color: #008FD4;
    }

    &::-moz-placeholder {
        color: #008FD4;
    }

    &:-ms-input-placeholder {
        color: #008FD4;
    }

    &::-ms-input-placeholder {
        color: #008FD4;
    }

    &::placeholder {
        color: #008FD4;
    }
}

.primary_search_field {
    .Search_icon {
        background: transparent;
        height: 46px;

        span {
            background: transparent;
            color: #008FD4;
            font-size: 13px;
            font-weight: 900;
            padding: 0 15px 0 20px;
            border: 1px solid #ECEEF4;
            border-right: 0;
            border-radius: 30px;
        }
    }

    input {
        border: 1px solid #ECEEF4;
        font-size: 14px;
        color: #008FD4;
        height: 46px;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        border-left: 0;
        border-right: 0;
        width: 1%;

        &::-webkit-input-placeholder {
            color: #008FD4;
        }

        &::-moz-placeholder {
            color: #008FD4;
        }

        &:-ms-input-placeholder {
            color: #008FD4;
        }

        &::-ms-input-placeholder {
            color: #008FD4;
        }

        &::placeholder {
            color: #008FD4;
        }
    }

}
.primary_input_label {
    font-size: 12px;
    text-transform: uppercase;
    color: $text_color_5;
    margin-bottom: 0;
    display: block;
    margin-bottom: 6px;
    font-weight: 400;
}

.green_input_label a {
    color: #54DA8A;
    white-space: nowrap;

    i {
        margin-left: 2px;
    }
}

.primary_select {
    width: 100%;
    border: 1px solid #ECEEF4;
    border-radius: 3px;
    height: 46px;
    line-height: 44px;
    font-size: 13px;
    color: #008FD4;
    padding: 0px 25px;
    padding-left: 20px;
    font-weight: 300;
    border-radius: 30px;

    &::placeholder {
        color: #008FD4;
        font-weight: 300;
        opacity: 1;
    }

    &:after {
        border-bottom: 0;
        border-right: 0;
        content: '';
        display: block;
        height: 10px;
        margin-top: 0;
        pointer-events: none;
        position: absolute;
        right: 14px;
        top: 10%;
        -webkit-transition: all 0.15s ease-in-out;
        transition: all 0.15s ease-in-out;
        width: auto;
        right: 25px;
        content: "\f0d7";
        border: 0;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        color: #828BB2;
        font-size: 14px;
        transform: translateY(-58%) rotate(0deg);

    }

    &.open::after {
        content: "\f0d8";
        transform: translateY(-58%) rotate(0deg);
        margin: 0;
    }

    &:active,
    &.open,
    &:focus,
    &:hover {
        border-color: #ECEEF4;
    }

    .list {
        width: 100%;
        background-color: #fff;
        overflow: auto !important;
        border-radius: 0px 0px 10px 10px;
        margin-top: 1px;
        z-index: 9999 !important;
        box-shadow: var(--box_shadow);

        .option {
            color: $base_color;

            &:hover {
                background-color: #f6f6f6;
                color: #008FD4;
            }

            &.selected {
                font-weight: 400 !important;
            }
        }
    }
}

.primary_file_uploader {
    position: relative;

    button {
        position: absolute;
        right: 0;
        border: 0;
        top: 7px;
        right: 7px;
        padding: 0;
        background: transparent;
        z-index: 99;

        label {
            margin-bottom: 0;
        }
    }

    input {
        border: 1px solid #ECEEF4 !important;
        font-size: 14px;
        color: #008FD4;
        padding-left: 20px;
        height: 46px;
        border-radius: 30px;
        width: 100%;
        padding-right: 15px;
        padding-bottom: 4px;

        &::-webkit-input-placeholder {
            color: #008FD4;
        }

        &::-moz-placeholder {
            color: #008FD4;
        }

        &:-ms-input-placeholder {
            color: #008FD4;
        }

        &::-ms-input-placeholder {
            color: #008FD4;
        }

        &::placeholder {
            color: #008FD4;
        }

        &:focus {
            border: 1px solid #ECEEF4 !important;
        }
    }
}

.primary_datepicker_input {
    position: relative;

    button {
        position: absolute;
        color: #828BB2;
        font-size: 14px;
        font-weight: 400;
        right: 0;
        background: transparent;
        border: 0;
        cursor: pointer;
        z-index: 999;
        top: 50%;
        transform: translateY(-50%);
        right: 14px;

        i {
            top: 0;
            cursor: pointer;
            z-index: 9;
        }
    }

    .primary_input_field {
        padding-top: 0;
        padding-bottom: 0;

        &:focus {
            border: 1px solid #ECEEF4 !important;
        }
    }
}

// only modal style ::::

.modal-content {
    border: 0;
    border-radius: 16px;

    // overflow: hidden;
    .modal-body {
        padding: 40px 30px;
        background-image: url(../img/popup_menu_bg.png);
        background-size: cover;
        background-position: bottom;
        border-radius: 0px 0px 15px 15px;
        background-repeat: no-repeat;
    }

    .modal-header {
        border-radius: 15px 15px 0px 0px;

        .close {
            background: #fff;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            flex: 32px 0 0;

            i {
                color: #008FD4;
                font-size: 14px;
                line-height: 32px;
                text-shadow: 0px 5px 10px rgba(108, 39, 255, 0.25)
            }
        }
    }
}

.modal_800px {
    @media #{'(min-width: 992px)'} {
        max-width: 811px;
    }

}

.modal-open .modal {
    z-index: 99999999999;
}