.form-container {
    border-radius: var(--table-radius)!important;
    margin: 20px 0;
}
.form-header {
    border-top-left-radius: var(--border-radius)!important;
    border-top-right-radius: var(--border-radius)!important;
    background: var(--kb-purple);
    padding: 10px;
}
    .form-header h4{
        color: white;
    }
    .form-content {
    }

        .form-content .client-logo-upload .image-upload-container .image-upload {
            background-color: #fff;
            background-size: 100% 100%!important;
            background-position: top!important;
            width: 100px !important;
            height: 100px !important;
            margin-left: 0px!important;
            margin: 10px 0!important;
            border-radius: 50% !important;
        }

            .form-content .client-logo-upload .image-upload-container .image-upload .btn-file {
                height: 100px!important;
                line-height: 100px!important;
            }

        .form-content .client-logo-upload label.avatartext {
            top: 50%;
            position: absolute;
            font-size: 12px;
            font-family: var(--font-inter);
            margin-left: 20px;
            left: 100px;
        }

        .form-content #NotesPopup {
            margin-top: 40px;
            position: absolute;
            width: 25%;
            min-width: fit-content;
            right: 0;
        }

        .form-content .form-border-bottom{
            border-bottom: 1px solid var(--grey);
            margin-bottom: 20px;
        }

        .form-content .client-details-col,
        .form-content .billing-address-col {
        }

        .form-content h4{
            font-weight: 500;
            font-size: 16px;
            margin-bottom: 15px;
            color: var(--kb-purple);
        }

.form-content .form-group{
    /*outline: 1px solid purple;*/
}
        .form-content .form-group label{
            width: 100%;
            font-size: 14px;
            font-family: var(--font-inter);
            margin-bottom: 5px;
        }
        .form-content .controls,
        .form-content .controls.col-sx-9 {
            width: 90%;
            border-radius: var(--border-radius) !important;
        }
        .form-content .form-control{
            border: 1.5px solid var(--kb-warm-biscuit);
            border-radius: var(--border-radius)!important;
            font-family: var(--font-inter);
            height: 36px;
        }
            .form-content .form-control:focus {
                border: 1.5px solid var(--kb-purple);
                border-radius: var(--border-radius) !important;
            }
        .form-content .controls .select-container.form-control{
            border: 0;
        }

.unchangable {
    display: block;
    width: 100%;
    height: 36px;
    padding: 6px 8px;
    margin-bottom: 10px;
    border: 0;
    color: #555555;
    vertical-align: middle;
    background-color: #f7f7f7;
    border-radius: var(--border-radius)!important;
}
#kendocombobox {
    border-radius: var(--border-radius) !important;
}
#kendocombobox .k-widget.k-combobox.k-header {
    border-radius: var(--border-radius) !important;
}

 #kendocombobox .k-widget.k-combobox.k-header .k-dropdown-wrap.k-state-default {
    border-radius: var(--border-radius) !important;
    height: 36px;
font-size: 14px;
line-height: 36px;
}
    #kendocombobox .k-widget.k-combobox.k-header .k-dropdown-wrap.k-state-default input{
        font-size: 14px;
    }
   form .select-container {
    padding: 0px !important;
    overflow: hidden;
    width: 100%;
    height: 36px;
/*    background: #ffffff 96% center url("/images/form-dropdown-arrow.png") no-repeat;
    background-size: 16px auto;*/
}

.lt-ie9 form .select-container {
    background: #ffffff 98% center url("/images/form-dropdown-arrow-ie8.png") no-repeat;
}

form .select-container select {
    font-family: var(--font-inter), helvetica, arial, serif;
    font-weight: normal;
    width: 100%;
    border: none;
    outline: none;
    background: none;
    font-size: 14px !important;
    box-shadow: none;
    padding: 6px; 
}

form .select-container select:focus{
   border: none!important;
}

form .checkbox-row input,
form .checkbox-row label{
    display: inline-block;
    width: auto!important;
}
form input[type=checkbox]{
    margin-right: 5px;
}
input[type=checkbox] + label {
}

input[type=checkbox]:checked,
input[type=checkbox]:focus {
    -webkit-appearance: checkbox!important;
}

.form-content .slider-row{
    display: inline-block;
    width: 100%;
    margin-bottom: 15px;

}
.form-content .slider-row label{
    margin-top: 6px;
}
.form-content .slider-row .bootstrap-switch {
    margin-top: 0px;
}

.select-custom-group i {
    font-size: 20px;
    line-height: 36px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    color: white;
    cursor: pointer;
    background: var(--kb-aqua);
    border-radius: var(--border-radius);
    transition: var(--hover-transition);
}
.select-custom-group:hover i {
    background: var(--kb-aqua-hover);
}
    
.width-minus-icon{
    width: calc(95% - 32px);
    font-size: 13px;
}
.select-custom-group.icon-btn {
    width: auto;
    line-height: 36px;
    float: left;
    display: inline-block;
    padding: 0 10px;
}
.select-custom-group.icon-btn i{
    font-size: 20px;
    line-height: 36px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    color: #45cebc;
    cursor: pointer;
}

.form-content .form-select {
    appearance: menulist;
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
}

.form-content .flat-input {
    background: white;
    font-family: var(--font-inter), helvetica, arial, serif;
    font-weight: normal;
    width: 100%;
    border: none;
    outline: none;
    font-size: 13px;
    box-shadow: none;
    padding: 6px 12px;
    display: block;
    width: 100%;
    line-height: 24px;
    height: 36px;
}


/*#ClientDetails .form-group {*/
    /*background:#fff;*/
/*}

    #ClientDetails .form-group input,
    #ClientDetails .form-group .select-container {*/
        /*border:1px solid #e1e1e1;*/
        /*border:1px solid #f4f4f4;*/
        /*border-left:4px solid #f4f4f4;*/
        /*font-size:inherit;*/
        /*background-color:transparent;*/
        /*box-shadow: none;
        padding-left: 10px;
    }

    #ClientDetails .form-group .select-container {
        background-image: none;
        padding-right: 5px !important;
        padding-left: 0 !important;
    }

#ClientDetails select.form-control {
    width: 100%;
    padding-left: 10px;
    font-size: 13px !important;
    color: grey;
    font-family: var(--font-inter) !important;
}

#ClientDetails .form-group input:hover,
#ClientDetails .form-group .select-container:hover {
    font-size: inherit;
    background-color: #e1e1e1;
}


#ClientDetails .form-group input.changed,
#ClientDetails .form-group .select-container.changed {
    border-left: 4px solid #04EBFF;
    background-color: #fff;
}

#ClientDetails .form-group label {
    font-family: var(--font-inter);
    font-weight: normal;
    line-height: 20px;
    font-size: 14px;
    clear: both;
}*/





  /* IN-FORM MAPS */
  /* Clients edit */
#ClientDetailsMap #map {
    width: 90%;
    margin: 0;
    margin-bottom: 25px;
    margin-top: 20px;
    border-radius: var(--border-radius) !important;
}

#ClientDetailsMap #mapCover {
    width: 100%;
    position: absolute;
    top: 0px;
    border-radius: var(--border-radius) !important;
    background: rgba(250,250,250,0.4);
}


.chosen-search-input{
    border-radius: var(--border-radius)!important;   
}




/* DATE PICKER*/
.k-widget.k-datetimepicker,
.k-widget.k-datepicker,
.k-widget.k-timepicker {
    background: none;
    line-height: 36px;
    border-radius: var(--border-radius) !important;
    height: 36px;
    /*border-left-width: 1px !important;*/
    width: 100%;
}

    .k-widget.k-datetimepicker .k-picker-wrap.k-state-default,
    .k-widget.k-datetimepicker .k-picker-wrap.k-state-disabled,
    .k-widget.k-datepicker .k-picker-wrap.k-state-default,
    .k-widget.k-datepicker .k-picker-wrap.k-state-disabled,
    .k-widget.k-timepicker .k-picker-wrap.k-state-disabled,
    .k-widget.k-timepicker .k-picker-wrap.k-state-default {
        border-radius: var(--border-radius) !important;
        line-height: 34px;
        height: 34px;
        border: 1px solid var(--kb-warm-biscuit);
        border-left-width: 1px !important;
    }
 .k-picker-wrap.k-state-default.k-state-focused{
        border: 1px solid var(--kb-purple)!important;
        border-radius: var(--border-radius)!important;
    }


.k-picker-wrap.k-state-default.k-state-hover {
    border-radius: var(--border-radius) !important;

}

.k-picker-wrap.k-state-disabled .k-select,
.k-picker-wrap.k-state-default .k-select {
    border-top-right-radius: var(--border-radius) !important;
    border-bottom-right-radius: var(--border-radius) !important;
    line-height: 33px;
    min-height: 34px;
    background: #f4effb;
    background: var(--kb-purple);
    /*width: 40px;*/
}
.k-picker-wrap.k-state-default.k-state-hover .k-select {
    /*background: #f4effb;*/
}

.k-widget.k-datetimepicker .k-input {
    height: 33px;
    padding: 0;
    font-size: 13px;
    text-indent: 10px;
    border: 0 !important;
}

.k-widget.k-datetimepicker .k-input {
    height: 33px;
    padding: 0;
    font-size: 13px;
    text-indent: 10px;
    border: 0 !important;
    border-top-right-radius: 0!important; 
    border-bottom-right-radius: 0!important; 
}


.modal-as-drawer .k-timepicker .k-input {
    height: 34px;
    padding: 0;
    font-size: 13px;
    text-indent: 5px;
    border: 0 !important;
}



#DateDueTime {
    border-radius: var(--border-radius) !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}


/* datetime picker */

.k-widget.k-datetimepicker.datetimepicker.k-state-border-down input.datetimepicker {
    /*outline: 1px solid red !important;*/
    border-top-right-radius: 0!important;
    border-bottom-right-radius: 0!important;
    margin-top: 0.5px;
    border: 0!important;
    margin-left: 0.5px;
}
    .k-widget.k-datetimepicker.datetimepicker .k-picker-wrap.k-state-default {
        border-top-right-radius: var(--border-radius)!important;
        border-bottom-right-radius: var(--border-radius)!important;
    }

        .k-widget.k-datetimepicker.datetimepicker .k-picker-wrap.k-state-default span.k-select {
/*            outline: 1px solid #F4EFFA;
            outline: 1px solid var(--kb-purple);
            border-radius: 4px!!important;*/
            border: 0;
            height: 34.5px;
            min-height: 34.5px;
            line-height: 32px;
            border-top-right-radius: var(--border-radius) !important;
            border-bottom-right-radius: var(--border-radius) !important;
            box-sizing: content-box;
            /*margin-top: 0.5px;*/
            margin-right: -0.5px;
        }
            .k-widget.k-datetimepicker.datetimepicker .k-picker-wrap.k-state-default span.k-select .k-icon.k-i-calendar,
            .k-widget.k-datetimepicker.datetimepicker .k-picker-wrap.k-state-disabled span.k-select .k-icon.k-i-calendar,
            .k-widget.k-datetimepicker .k-picker-wrap.k-state-disabled span.k-select .k-icon.k-i-calendar,
            .k-widget.k-datetimepicker .k-picker-wrap.k-state-default span.k-select .k-icon.k-i-calendar{
                background-position: -48px -176px!important;
            }
            .k-widget.k-datetimepicker.datetimepicker .k-picker-wrap.k-state-default span.k-select .k-icon.k-i-clock,
            .k-widget.k-datetimepicker.datetimepicker .k-picker-wrap.k-state-disabled span.k-select .k-icon.k-i-clock,
            .k-widget.k-datetimepicker .k-picker-wrap.k-state-disabled span.k-select .k-icon.k-i-clock,
            .k-widget.k-datetimepicker .k-picker-wrap.k-state-default span.k-select .k-icon.k-i-clock{
                background-position: -48px -192px !important;
            }

.k-widget.k-datetimepicker.datetimepicker.k-state-border-down span.k-select {
    background: var(--kb-purple) !important;
    outline: 0 !important;
}

.k-widget.k-datetimepicker.datetimepicker .k-picker-wrap.k-state-default.k-select-focused .k-select {
    background: var(--kb-purple) !important;
    outline: 0 !important;
}
}
.k-widget.k-datetimepicker.datetimepicker .k-picker-wrap.k-state-default.k-select-active span.k-select {
    background: var(--kb-purple) !important;
    outline: 0 !important;
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    cursor: not-allowed;
    background-color: #e1e1e1!important;
    background-color: var(--kb-light-purple)!important;
}

/* styles for additional input actions - quick add - quick edit*/
/*.hide-extra-actions .dd-actions{
    display: none!important;
}*/
/*.hide-extra-actions .form-group.extra-dd-actions .controls{
    width: 100%;
}*/
/*.hide-extra-actions .form-group.extra-dd-actions .controls .chosen-container.chosen-container-single {
    width: 100% !important;
}*/

.show-dd-actions .form-group.extra-dd-actions .dd-actions {
    display: inline-block;
}

.form-group.extra-dd-actions .controls{
    /*outline: 1px solid blue;*/
    border: 1.5px solid white;
    display: inline-block;
    background: white;
}

#static-new-job-header .form-content .form-group.extra-dd-actions .form-control,
#new-job-tab-content .form-content .form-group.extra-dd-actions .form-control,
#static-post-scheduler .form-content .form-group.extra-dd-actions .form-control {
    border: 0;
}

#static-new-job-header .form-content .form-group.extra-dd-actions .form-control:hover,
#static-new-job-header .form-content .form-group.extra-dd-actions .form-control:active,
#static-new-job-header .form-content .form-group.extra-dd-actions .form-control:focus {
    border: 0;
}
.form-group.extra-dd-actions .controls:active,
.form-group.extra-dd-actions .controls:focus,
.form-group.extra-dd-actions .controls:focus-within,
.form-group.extra-dd-actions .controls:hover{
    border: 1.5px solid var(--kb-purple) !important;
}



.form-group.extra-dd-actions .controls .form-control{
    /*outl`e: 1px solid green;*/
    width: calc(100% - 90px);
    float: left;
    border: 0;
}
/*.form-group.extra-dd-actions.no-edit .controls .form-control{*/
    /*outl`e: 1px solid green;*/
    /*width: calc(100% - 45px);
    float: left;
    border: 0;
}*/
.form-group.extra-dd-actions .controls .chosen-container.chosen-container-single {
    width: calc(100% - 80px) !important;
    border: none!important;
}
.form-group.extra-dd-actions.no-edit .controls .chosen-container.chosen-container-single {
    width: calc(100% - 45px) !important;
    border: none!important;
}
.form-group .controls .chosen-container.chosen-container-single {
    width: 100% !important;
    border: none !important;
}

.form-group .controls .chosen-container.chosen-container-single {
    width: 100% !important;
    border: none !important;
}
.form-group.extra-dd-actions .dd-actions {
    display: inline-block;
    width: 80px;
    float: right;
    padding-right: 5px;
    text-align: right;
    border-left: 1px solid #e1e1e1;
    height: 36px;
    line-height: 45px;
}
/*.form-group.extra-dd-actions.no-edit .dd-actions {
    display: inline-block;
    width: 45px;
    float: right;
    padding-right: 5px;
    text-align: right;
    border-left: 1px solid #e1e1e1;
}*/
    .form-group.extra-dd-actions .dd-actions .dd-edit.dd-disabled,
    .form-group.extra-dd-actions .dd-actions .dd-create.dd-disabled {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: none;
    }
.form-group.extra-dd-actions .dd-actions .dd-create, .form-group.extra-dd-actions .dd-actions .dd-edit{
    display: inline-block;
    border-radius: 50%;
    width: 28px;
    text-align: center;
    line-height: 28px;
    height: 28px;
}
    .form-group.extra-dd-actions .dd-actions .dd-create a {
        background-image: url(/Images/icons/add-icon-cropped.svg);
        background-size: 28px 28px;
        background-position: center;
        height: 28px;
        width: 28px;
        display: block;
        background-repeat: no-repeat;
    }
    .form-group.extra-dd-actions .dd-actions .dd-edit a {
        background-image: url(/Images/icons/edit-icon-cropped.svg);
        background-size: 20px 20px;
        background-position: center;
        height: 28px;
        width: 28px;
        display: block;
        background-repeat: no-repeat;
    }




    .form-group.extra-dd-actions .dd-actions .dd-create {
        background-color: #554DF3;
        margin-left: 5px;
        vertical-align: sub;
    }
        .form-group.extra-dd-actions .dd-actions .dd-create:focus,
        .form-group.extra-dd-actions .dd-actions .dd-edit:focus,
        .form-group.extra-dd-actions .dd-actions .dd-create:hover,
        .form-group.extra-dd-actions .dd-actions .dd-edit:hover,
        .form-group.extra-dd-actions .dd-actions .dd-create:active,
        .form-group.extra-dd-actions .dd-actions .dd-edit:active {
            filter: brightness(75%);
            cursor: pointer;
        }
            .form-group.extra-dd-actions .dd-actions .dd-edit {
    background-color: var(--kb-aqua);
    margin-left: 5px;
    vertical-align: sub;
}

svg.dd-icon{
    width: 28px;
    height: 28px;
}


/*  CODE TO HIDE QUICK ADDS FROM 4 STEP NEW JOB PAGES - RR*/
.old-many-paged-new-job .Tasks .k-widget k-datetimepicker.k-header.full-width,
.old-many-paged-new-job .Tasks-Create .k-widget k-datetimepicker.k-header.full-width,
.old-many-paged-new-job .Tasks-Edit .k-widget k-datetimepicker.k-header.full-width,
.old-many-paged-new-job .Tasks.Create .k-widget k-datetimepicker.k-header.full-width,
.old-many-paged-new-job .Tasks.Edit .k-widget k-datetimepicker.k-header.full-width,
.old-many-paged-new-job .k-widget.k-datetimepicker.k-header{
border-left-width: 0!important;
}
.old-many-paged-new-job .Tasks-Create .form-group.extra-dd-actions .dd-actions,
.old-many-paged-new-job .Tasks-Edit .form-group.extra-dd-actions .dd-actions {
    display: none !important;
}
.old-many-paged-new-job .Tasks-Create .form-group.extra-dd-actions .controls .form-control,
.old-many-paged-new-job .Tasks-Edit .form-group.extra-dd-actions .controls .form-control,
.old-many-paged-new-job .Tasks-Create .form-group.extra-dd-actions .controls .chosen-container.chosen-container-single,
.old-many-paged-new-job .Tasks-Edit .form-group.extra-dd-actions .controls .chosen-container.chosen-container-single {
    width: 100% !important;
}

.old-many-paged-new-job .Tasks.Edit .form-group .controls.col-sx-12,
.old-many-paged-new-job .Tasks.Edit .form-content .controls {
    width: 100% !important;
}



.k-animation-container #Categories-list #Categories_listbox .k-item.k-state-selected,
.k-animation-container #Categories-list #Categories_listbox .k-item.k-state-focused{

    background: var(--kb-light-purple)!important;
    border-color: var(--kb-purple)!important;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 0;
    color: var(--kb-purple);
}
    .k-animation-container #Categories-list #Categories_listbox .k-item.k-state-selected::after {
        font-family: FontAwesome;
        content: "\f00c";
        float: right;
        text-align: right;
        color: var(--kb-purple);
        font-size: 12px;
    }


.k-datepicker .k-select .k-link .k-icon,
.k-timepicker .k-select .k-link .k-icon,
.k-datetimepicker .k-select .k-link .k-icon {
    background-image: none;
    opacity: 1;
}

.k-datepicker .k-select .k-link,
.k-timepicker .k-select .k-link,
.k-datetimepicker .k-select .k-link {
    background-image: none;
    opacity: 1;
}

.k-picker-wrap .k-icon{
    background-image:none;
    opacity: 1;
}
.k-icon:before {
    opacity: 1;
    color: white;
}

.k-datepicker input{
    min-height: 33px!important;
    height: 33px!important;
    padding: 0!important;
    font-size: 13px!important;
}