/* theme form style start */
.uc-themeform{
    fieldset{
        border: 0;
        padding: 0;
        margin: -8px;
    }
    &__wrap{@extend %flex;}   
    &__btn{margin-top: 10px;}
}
.form-group-wrap{@extend %flex;}
.form-group{
	position:relative;
    width: 100%;
    padding: 8px;
    &:first-child{
        .uc-form__section{
            margin-top: -5px;
            padding: 0;
        }
    }
    &:last-child{margin-bottom: 0;}
}
.form-group-half{width: 50%;}
.form-group-3half{width: calc(100% / 3);}
.form-control,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
select,
.uneditable-input{
    width: 100%;
    height: 40px;
    outline: none;
    padding: 0 12px;
    background: $formbg;
    border-radius: $radius; 
    @extend %transition;
    background-clip: unset;
    color: $body-font-color;
    caret-color: $body-font-color;
    border: 1px solid transparent ;
    font: 400 rem(14)/em(20,14) $body-font-family;
    &:hover{
        background: $clr-white;
        border-color: $border-color;
        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    }
    &:focus{
        background: $clr-white;
        border-color: $theme-color;
        box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
    }
    &::placeholder{color: rgba($body-font-color, 0.6) ;}
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="date"]{
    &::-webkit-calendar-picker-indicator {
        display: none;
    }
    -moz-appearance: none; /* Hide the default date picker icon in Firefox */
    
}
input[type=number] {
  -moz-appearance:textfield;
}
.uc-invalid{
    .uc-select select,
    .select2-container--default .select2-selection,
    .form-control{
        background: $clr-white;
        border-color: #F04438;
        box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
    }
    .uc-uploadfile,
    .uc-custom-editor{
        background: $clr-white;
        border:1px solid #F04438;
        box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
        .note-editor.note-frame .note-toolbar{
            background: $clr-white;
        }
    }
}
.form-control{
    &_wrap{
        width: 100%;
    }
}
.uc-error-msg{
    display: block;
    color: #F04438;
    margin-top: 4px;
    font: 400 rem(12)/em(18,12) $heading-font-family;
}
textarea.form-control{
	resize: none;
    height: 250px;
    padding-top: 14px;
}
.select select:focus {
	color: $body-font-color;
	border-color: $lighter; 
	-webkit-box-shadow:none !important;
    box-shadow:none !important;
}
.uc-select{
    @extend %flex;
    align-items: center;
    position:relative;
    width: 100%;
    &:before {
        z-index: 1;
        right: 12px;
        width: 16px;
        height: 16px;
        content: '';
        position: absolute;
        pointer-events: none;
        color: $text-light;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg opacity='0.6'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23585858' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
    }
    & select{
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none; 
        padding-right:40px;
        padding-left: 12px;
        width: 100%;
        color: rgba($color: $body-font-color, $alpha: 0.6);
        &:focus{
            outline: 0;
        }
        &:hover{
            color: $body-font-color;
        }
    }
    .form-control{padding-right: 50px;}
}
.uc-calendar{
    @extend .uc-select;
}
.uc-inputicon{
    position: relative;
    width: 100%;
    @extend %flex;
    align-items: center;
    .form-control{padding-right: 40px;}
    & a{
        right: 12px;
        font-size: 14px; 
        color: $text-light;
        position: absolute;
        line-height: 1;
    }
    i{
        font-size: 20px
    }
}
.uc-input{
    @extend %flex;
    position: relative;
    flex-wrap: nowrap;
    input{padding: 0 44px 0 20px;}
    a{
        background: transparent;
        border: 0;
        position: absolute;
        right: 0;
        color: $theme-color;
        font-size: 12px;
    }
}
.uc-label,
label{
    display: block;
	margin-bottom: 4px;
    font: 500 rem(14)/em(20,14) $heading-font-family;
}
.uc-labeltitle{
    margin: 0;
    padding: 10px 0;
}
.uc-important{
    gap: 6px;
    display: flex;
    color: $clr-white;
    align-items: center;
    align-self: flex-start;
    &:after{
        content: '';
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='8' viewBox='0 0 6 8' fill='none'%3E%3Cpath d='M5.21875 6.07422L3.34375 4.76953L3.53906 7.01953H2.28906L2.48438 4.76172L0.609375 6.07422L0 4.95703L2.0625 4.01172L0 3.05859L0.609375 1.92578L2.48438 3.26953L2.28906 0.980469H3.53906L3.34375 3.26953L5.21875 1.92578L5.82812 3.05859L3.77344 4.01172L5.82812 4.95703L5.21875 6.07422Z' fill='%23D92D20'/%3E%3C/svg%3E");
        width: 6px;
        height: 8px;
        background-repeat: no-repeat;
        background-size: contain;
    }
}
.form-group-two{
    &-wrap{
        gap: 20px;
        flex: auto;
        display: flex;
        > div{
            width: 100%;
        }
    }
}

form p span i {
	top: 13px;
	left: 16px;
	color: #474747;
	position: absolute;
}
.form-control:disabled,
.form-control[readonly]{
    background-color:#f7f7f7;
}
.uc-locationtag{
    position:relative;
    .form-control{padding-right: 130px;}
    & a{
        bottom: 0;
        right: 20px;
        height: 100%;
        display: flex;
        position:absolute;
        align-items: center;
        font-size: rem(12px);
        color: $body-font-color;
        line-height: em(20px,12px);
        & i{margin-right: 5px;}
    }
}
/* Theme Custom CheckBox Radio */
.uc-checkbox{
    input[type=checkbox]{
        display:none;
        &:checked {
            + label{
                color: $body-font-color;
                &::before{
                    background-color: $theme-color;
                    border-color: $theme-color;
                }
            }
            
        }
    }
    & label{
        margin:0;
        width: 100%;
        cursor:pointer;
        display:block;
        position: relative;
        padding: 0 0 0 30px;
        font: 400 rem(14)/em(20,14) $body-font-family;
        color: rgba( $body-font-color, 0.7);
        & span{
            font-size: 14px;
            line-height: 20px;
            color: $body-font-color;
        }
        &:after{
            top: 50%;
            left: 3px;
            opacity: 0;
            width: 14px;
            content: "";
            height: 14px;
            display: block;
            mask-size: 100%;
            visibility: hidden;
            position: absolute;
            mask-repeat: no-repeat;
            -webkit-mask-size: 100%;
            transform: translateY(-50%);
            background-color: $clr-white; 
            -webkit-mask-repeat: no-repeat;
            mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"%3E%3Cpath d="M11.6663 3.5L5.24967 9.91667L2.33301 7" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
            -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"%3E%3Cpath d="M11.6663 3.5L5.24967 9.91667L2.33301 7" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
        
        }
        &:before{
            top: 0;
            left: 0;
            content: '';
            width: 20px;
            height: 20px;
            position: absolute;
            border-radius: 6px;
            @extend %transition;
            border: 1px solid $border-color;
        }
    }
}
.uc-radio{
    input[type=radio]{
        display:none;
        &:checked {
            + label{
                color: $body-font-color;
            }
        }
    }
    input[type=checkbox]{display:none;}
    & label{
        margin:0;
        width: 100%;
        cursor:pointer;
        display:block;
        position: relative;
        padding: 0 0 0 30px;
        font: 500 rem(14)/em(20,14) $body-font-family;
        color: rgba( $body-font-color, 0.7);
        &:before {
            top: 0;
            left: 0;
            color: $lighter;
            content:'\f0c8';
            position: absolute;
            font-weight: 400;
            font-size: rem(14px);
            font-family: 'Font Awesome 5 Free';
        }
        &:after{
            top: 0;
            left: 0;
            opacity: 0;
            color: $theme-color;
            line-height: 16px;
            position: absolute;
            text-align: center;
            visibility: hidden;
            font-size: rem(14px);
            font-family: "Font Awesome 5 Free";
        }
    }
}

.uc-radio input[type=radio] + label:before,
.uc-radio input[type=radio]:checked + label:before{ content:'';}
.uc-checkbox input[type=checkbox]:checked + label:after,
.uc-radio input[type=radio]:checked + label:after {
    opacity: 1;
    visibility: visible;
}

.uc-radio{
    input[type=radio]{display: none;}
    label{
        &:after{
            top: 6px;
            left: 6px;
            width: 8px;
            height: 8px;
            content: '';
            opacity: 0;
            visibility: hidden;
            border-radius: 50px;
            background: $clr-white;
        }
        &:before{
            height: 20px;
            width: 20px;
            border-radius: 50%;
            @extend %transition;
            border: 1px solid $border-color;
        }
    }
}
.uc-radio input[type=radio]:checked + label:before{
    background-color: $theme-color;
    border-color: $theme-color;
}

.uc-searchntn{
    width: 50px;
    display: block;
    line-height:50px;
    color: $theme-color;
    text-align: center;
    font-size: rem(18px);
    border-radius:$radius;
    background: $theme-color;
    &:hover,
    &:focus{color: $theme-color;}
}
.uc-righticon{
    position: relative;
    @extend %flex;
    align-items: center;
    width: 100%;
    .form-control{padding-right: 80px;}
    > a{
        position: absolute;
        right: 20px;
        font-size: 12px;
        color: $body-font-color;
        + a{right: 49px;}
    }
}
// SELECT2 SIMPLE START
.select2-container--open .select2-dropdown--below,
.select2-dropdown{
    border: 0;
    z-index: 9999;
    border-radius:$radius;
    background: $clr-white;
}
.select2-search--dropdown{
    padding: 0;
    margin: 0 0 10px;
}

.select2-container--default .select2-search--dropdown .select2-search__field{
    border-radius:$radius;
    border:1px solid transparent;
    background-color: $formbg;
    outline: none; 
    height: 40px;
    padding: 0 12px;
    &:hover{
        background-color: $clr-white;
        border-color: $border-color;
    }
    &:focus{
        background-color: $clr-white;
        border-color: $theme-color;
    }

} 

.select2-container--default .select2-results>.select2-results__options{
    max-height: 235px;
    overflow-y: auto;
    &::-webkit-scrollbar{
        display: none;
    }
    &:hover{
        &::-webkit-scrollbar{
            width: 5px;
            display: block;
            background-color: transparent;
        }
        &::-webkit-scrollbar-thumb{
            width: 5px;
            border-radius: 30px;
            background:  rgba($color: $text-light, $alpha: 0.3);
        }
    }
    
    .select2-results__group{
        gap: 6px;
        padding: 0;
        display: flex;
        font-size: 12px;
        padding: 0 10px;
        font-weight: 600;
        line-height: 18px;
        margin-bottom: 4px;
        font-style: normal;
        position: relative;
        align-items: center;
        font-family: $heading-font-family;
        color: rgba($color: $heading-color, $alpha: 0.4);
        &::after{
            content: "";
            width: 100%;
            height: 1px;
            display: block;
            flex: 1;
            background-color: $border-color;
        }
    }
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single{
    border-radius: 10px;
}

.select2-container.select2-container--open .select2-selection{
    border-radius: 10px;
    border-color: $border-color;
    background-color: $clr-white;
    box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
}
.select2-container--open .select2-dropdown--below{
    padding:8px;
    margin-top: 5px;
    border-radius: 10px;
    max-height: 160px;
    background: $clr-white;
    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
}
.select2-container--default .select2-results__option[aria-selected=true]{
    background:transparent;
    @extend %transition;
}
.select2-results__option[aria-selected]{
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px; 
    border-radius:$radius;
    color: $body-font-color;
    font-family: $heading-font-family;
}
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected=true]{
    background: rgba($dark_black, 0.03);
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
    color: $body-font-color;
    background-color: #f7f7f7;
    // &:after{
    //     content: "\f00c";
    //     position: absolute;
    //     right: 20px;
    //     color: #3cd594;
    //     margin-left: 10px; 
    //     font-weight: 900;
    //     font-size: 10px;
    //     font-family: "Font Awesome 5 Free";
    // }
}
.select2-selection__arrow{
    display: none;
}
.select2-container--default .select2-selection{
    height: auto;
    border: 1px solid transparent;
    border-radius:$radius;
    background: $formbg;
    cursor: pointer;
    @extend %transition;
    &:hover{
        outline: 0;
        border-color: $border-color;
        background-color: $clr-white;
        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
        .select2-selection__rendered{
            color: $body-font-color;
        }
    }
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
    color: $text-light;
    line-height: 40px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder{
    color: rgba($body-font-color, 0.6);
}
.select2-container{height: 40px;}
.select2-container .select2-selection--single .select2-selection__rendered{
    padding: 10px 30px 10px 12px;
    color:  $body-font-color;
    font-family: $heading-font-family;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    @extend %transition;
}
.select2-container--default .select2-selection--single .select2-selection__clear{display: none;}

.select2-dropdown--above{
    -webkit-box-shadow: 0 10px 30px 0 rgba(18, 54, 82, 0.2);
    box-shadow: 0 10px 30px 0 rgba(18, 54, 82, 0.2);
    border: 0;
    background: $clr-white;
    border-radius: 6px;
    margin-top: -10px;
    padding: 10px;
}
.select2-results__option{list-style: none;}
// SELECT2 SIMPLE END
// SELECT2 MULTIPLE START
.select2-container--default .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--multiple{
    @extend %flex;
    border-color: $border-color;
    min-height: 44px;
    border-radius: 4px;
    padding-bottom: 5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered{
    position: relative;
    @extend %flex;
    padding: 0 20px;
    height: inherit;
    &:after{
        content: "\e64b";
        position: absolute;
        right: 20px;
        top: 0;
        font-size: 14px;
        line-height: 36px;
        font-family: themify;
        color: #999;
    }
}
.select2-container--default .select2-search--inline .select2-search__field{
    caret-color: $theme-color;
    width: 100% !important;
    font-size: rem(15);
    font-weight: 400;
    font-family: $body-font-family;
    color: $theme-color;
    &::placeholder{
        color: $theme-color;
        opacity: 1;
    }
}
.select2-container--default .select2-selection--multiple .select2-selection__clear{
    color: $theme-color; 
    position: absolute;
    right: 35px;
    top: 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
    @extend %flex;
    border-color: $border-color;
    padding: 0 10px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
    color: $theme-color;
    margin-left: 9px;
    order: 2;
}
.select2-container,
.select2-container .select2-search--inline{flex: auto;}
.select2-container--default .select2-results__option[aria-disabled=true]{display: none;}
// Bootstrap Select
.bootstrap-select .dropdown-menu li{list-style: none;}
.uc-actionselect{
    display: flex;
    align-items: center;
    .select2-container{height: 44px;}
    .select2-container--default .select2-selection--single .select2-selection__rendered{
        font-size: 14px;
        color: #999;
        line-height: 44px;
    }
    > span{ 
        flex: none;   
        font-weight: 600;
        font-size: rem(14);
        padding-right: 10px;
        color: rgba($heading-color,0.7);
    }
    .form-control{
        height: 44px;
        font-size: 14px;
        color: $body-font-color;
    }
}
.uc-radiolist {
    width: 100%;
    display: flex;
    position: relative;
    align-items: center;
    label {
        margin:0;
        display: block;
        position: relative;
        font: 400 rem(13)/em(15, 13) $heading-font-family;
        cursor: pointer;
        color: $body-font-color;
        -webkit-transition: all 0.25s linear;
        transition: all 0.25s linear;
    }
    input[type=radio] {
        display: none;
    }
}
.form-vertical{
    flex-direction: column;
    margin: 0;
    align-items: initial;
    .uc-titleinput{align-self: initial;}
    &:first-child{
        .uc-titleinput{
            padding-top: 0;
            margin-top: -3px;
        }
    }
    &.form-group-half,
    &.form-group-3half{
        .uc-titleinput{
            padding-top: 7px;
            margin-top: 0;
        }
    }
    .uc-titleinput{
        flex: none;
        margin: 0 0 5px;
        padding-top: 7px;
    }
}
// lightPick
.lightpick__day.is-end-date.is-in-range.is-flipped,
.lightpick__day.is-start-date.is-in-range,
.lightpick__day.is-end-date.is-in-range,
.lightpick__day.is-start-date.is-in-range.is-flipped{background-color: $theme-color;}
.lightpick__day.is-in-range,
.lightpick__day.is-today{
    position: relative;
    z-index: 0;
    &:before{
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background-color: $theme-color;
        visibility: hidden;
        z-index: -1;
    }
    &:hover{
        background-image: none;
        color: #fff;
        &:before{visibility: visible;}
    }
}
.lightpick__day.is-today{color: #ff7062;}
.lightpick__day.is-in-range{
    background-color: rgba($color: $theme-color, $alpha: 0.1);
    width: 48px;
    height: 48px;
    font-weight: 700;

}
.lightpick__day-of-the-week{
    font-family: $heading-font-family;
    color: rgba($heading-color,0.7);
}
.lightpick__month-title>.lightpick__select{
    height: auto;
    padding: 0;
    font-family: $heading-font-family;
    color: rgba($heading-color,0.7);
}
.lightpick__days-of-the-week {
    margin: 0 0 15px;
}
.lightpick__month {
    padding: 14px 14px 0;
    width: 382px;
    background-color: $clr-white;
}
.lightpick__month-title-bar {
    display: flex;
    margin-bottom: 53px;
}
.lightpick__day.is-end-date.is-in-range, .lightpick__day.is-start-date.is-in-range{
    width: 48px;
    height: 48px;
    color: $clr-white;
    border-radius: 50%;
}
.lightpick__days {
    padding: 10px;
    border-top: 1px solid #eee;
}
.lightpick__day{
    width: 48px;
    height: 48px;
    font-size: rem(15);
    font-weight: 600;
    font-family: $heading-font-family;
}
.lightpick__day.is-end-date,
.lightpick__day.is-end-date:hover,
.lightpick__day.is-start-date,
.lightpick__day.is-start-date:hover{
    background-image: none;
    background-color: $theme-color;
    border-radius: 50%;
}
.is-previous-month{
    color: #A0A0A0;
}
.lightpick__month-title{
    position: absolute;
    left: 88px;
    top: 30px;
    padding: 0;
    margin: 0;
}
.lightpick__toolbar{
    position: absolute;
    width: 100%;
    .lightpick__previous-action, .lightpick__next-action{
        width: 48px;
        height: 48px;
    }
    .lightpick__previous-action {
        left: 0;
        top: 0;
        margin: 0;
        background: transparent;
        border: 1px solid $border-color;
        position: absolute;
        &::after{
            position: absolute;
            font-family: themify;
            content: "\e64a";
            font-size: 14px;
            background: $clr-white;
        }
    }
    .lightpick__next-action{
        top: 0;
        margin: 0;
        right: 38px;
        background: transparent;
        border: 1px solid #eee;
        position: absolute;
        &::after{
            position: absolute;
            font-family: themify;
            content: "\e649";
            font-size: 14px;
            background: $clr-white;
        }
    }
}
// tinymce
.uc-tinymceeditor{
    width: 100%;
    .mce-panel{
        border-color: $border-color;
        border-radius: $radius;
        background-color: $clr-white;
    }
    .mce-btn{background-color: $clr-white;}
}



/* theme form style end */

.uc-form-groupradio{
    @extend %flex;
    gap: 10px 20px;
}
.uc-lost-password{display: flex;}
.uc-login-form .form-group > a.uc-password-clr_light{
    margin-left: auto;
    color: rgba($color: $text-light, $alpha: 0.7);
}

.uc-inputfield{
    position: relative;
    &_icon{
        top: 50%;
        right: 12px;
        cursor: pointer;
        position: absolute;
        transform: translateY(-50%);
        color: rgba($text-light, 0.6);
    }
}