body {
    --bs-body-color: rgba(19, 1, 96, 1);
    color: rgba(19, 1, 96, 1);
}

.color1 {
    color: rgba(13, 1, 64, 1)
}

.color2 {
    color: rgba(82, 75, 107, 1) !important;
}



.color3 {
    color: rgba(170, 166, 185, 1)
}

.color4 {
    color: rgba(105, 117, 134, 1)
}

.color5 {
    color: rgba(33, 33, 33, 1)
}

.color6 {
    color: rgba(255, 146, 40, 1)
}

.color7 {
    color: rgba(158, 158, 158, 1)
}

.color8 {
    color: rgba(255, 193, 7, 1);
}

.color9 {
    color: rgba(33, 150, 243, 1);
}

.color10 {
    color: rgba(252, 70, 70, 1);
}

.color11, .urgent_color {
    color: rgba(117, 81, 255, 1);
}


.color12 {
    color: rgba(216, 67, 21, 1)
}

.cbg11 {
    background-color: rgba(231, 230, 239, 1) !important
}


.bg_1 {
   background-color: rgba(248, 250, 253, 1);
}

.border_color_1 {
    border: 1px solid rgba(227, 242, 253, 1);
    border-radius:12px;
}

.lh-24px{
    line-height:24px;
}



.fs-10{
    font-size:10px;
}

.fs-8{
    font-size:8px;
}

/*position add*/
.start-25 {
    left: 25% !important;
}

.start-33_3 {
    left: 33.333333333333333% !important;
}

.start-66_6 {
    left: 66.666666666666666% !important;
}

.start-75 {
    left: 75% !important;
}

/*position add*/


.toggle {
    --width: 14px;
    --height: 14px;
    --border-radius: calc(var(--height) / 2);
    display: inline-block;
    cursor: pointer;
}



.toggle__fill {
    position: relative;
    width: 40px;
    height: var(--height);
    border-radius: var(--border-radius);
    background: #dddddd;
    transition: background 0.2s;
    margin: 3px 0;
}

    .toggle__fill::after {
        content: "";
        position: absolute;
        top: -4px;
        left: 0;
        height: 20px;
        width: 20px;
        background: #ffffff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
        border-radius: 50%;
        transition: transform 0.2s;
    }

.toggle__input:checked ~ .toggle__fill {
    background: rgba(227, 242, 253, 1);
}

    .toggle__input:checked ~ .toggle__fill::after {
        transform: translateX(26px);
        background: rgba(144, 202, 249, 1);
    }

    .toggle__input:checked ~ .toggle__fill.darker {
        background: rgba(144, 202, 249, 1);
    }

        .toggle__input:checked ~ .toggle__fill.darker::after {
            background: rgba(33, 150, 243, 1);
        }

.toggle .toggle__input {
    display: none;
}






.pc-sidebar .pc-link {
    color: rgba(82, 75, 107, 1)
}

.k-grid-toolbar {
    padding: 10px;
}

    .k-grid-toolbar .k-grid-search {
        margin-left: auto;
        margin-right: 0;
    }

    .k-grid-toolbar .k-display-flex {
        display: flex;
    }



.datepicker-kendo-fix {
    max-width: 100%;
}

    .datepicker-kendo-fix .k-datepicker, .datepicker-kendo-fix .k-timepicker {
        width: 100% !important;
        display: inline-flex !important;
    }

        .datepicker-kendo-fix .k-datepicker .k-picker-wrap, .datepicker-kendo-fix .k-timepicker .k-picker-wrap {
            flex-wrap: wrap;
            border-radius: 6px;
            border-color: #c2c2c2;
            display: flex !important;
        }

            .datepicker-kendo-fix .k-datepicker .k-picker-wrap.k-state-focused, .datepicker-kendo-fix .k-timepicker .k-picker-wrap.k-state-focused {
                box-shadow: none !important;
                border-color:
            }

            .datepicker-kendo-fix .k-datepicker .k-picker-wrap .k-input, .datepicker-kendo-fix .k-timepicker .k-picker-wrap .k-input {
                border-color: transparent !important;
                width: 100% !important;
                flex: 11;
                height: 44px !important;
            }

            .datepicker-kendo-fix .k-datepicker .k-picker-wrap .k-select, .datepicker-kendo-fix .k-timepicker .k-picker-wrap .k-select {
                display: flex !important;
                flex: 1;
                border-color: transparent;
                background-color: transparent;
            }

                .datepicker-kendo-fix .k-datepicker .k-picker-wrap .k-select .k-icon, .datepicker-kendo-fix .k-timepicker .k-picker-wrap .k-select .k-icon {
                    display: inline-flex;
                }


.k-widget.k-dropdown {
    width: 100%;
}


    .k-widget.k-dropdown .k-dropdown-wrap.k-state-default, .k-multiselect .k-multiselect-wrap {
        width: 100%;
        padding: 4px;
        background-color: transparent;
        border: 1px solid #C2C2C2;
        border-radius: 8px;
    }


.datatable-table.dataTable[class*=table-] thead th, .table.dataTable[class*=table-] thead th {
    background-color: #fff;
    padding: 0.9rem 0.75rem;
}

.form-group textarea, .form-group .choices__inner, .form-group .choices__inner input {
    background-color: #F8FAFC;
    border-color: #EEE;
}

    .form-group textarea.form-control {
        padding-top: 25px;
    }

.form-group.customlabel {
    position: relative;
}

    .form-group.customlabel label {
        position: absolute;
        top: -7px;
        left: 8px;
        background: transparent;
        width: auto;
        padding: 0 5px;
        color: rgba(158, 158, 158, 1);
        font-weight: 400;
        font-size: 10px;
        z-index: 2;
    }

    .form-group.customlabel input, .form-group.customlabel select, .form-group.customlabel textarea {
        height: 52px;
        /* margin-bottom: 30px; */
        border-radius: 12px;
        font-size: 12px;
        font-weight: 400;
        color: #121926;
        background-color: #F8FAFC;
        border-color: #EEE;
    }

    .form-group.customlabel .select2-container, .form-group .select2-container {
        max-width: 100%;
        min-width: 100%;
    }

.form-group .select2-container--default .select2-selection--single {
    padding-top: 12px;
}



.form-group.customlabel .select2-container--default .select2-selection--multiple, .form-group.customlabel .select2-container--default .select2-selection--single, .form-group .select2-container--default .select2-selection--single {
    height: 52px;
    border-radius: 12px;
    max-width: 100%;
    background-color: #F8FAFC;
    border-color: #EEE;
}

.form-group.customlabel .select2-container--default .select2-selection--single {
    padding-top: 15px;
}

    .form-group.customlabel .select2-container--default .select2-selection--single .select2-selection__arrow, .form-group .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 12px;
    }


.form-group .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: rgba(227, 242, 253, 1);
    border: rgba(227, 242, 253, 1);
    color: rgba(33, 150, 243, 1);
}

.form-group .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(33, 150, 243, 1);
}

::placeholder {
    opacity: 0.5; /* Firefox */
}

input::-webkit-input-placeholder {
    opacity: 0.5; /*Change the opacity between 0 and 1*/
}

label .mandatory-indicator {
    color: #D84315;
}

.datepicker-kendo-fix {
    max-width: 368px;
}

    .datepicker-kendo-fix .k-datepicker {
        width: 100% !important;
    }

        .datepicker-kendo-fix .k-datepicker .k-picker-wrap {
            flex-wrap: wrap;
            border-radius: 6px;
            border-color: #c2c2c2;
        }

            .datepicker-kendo-fix .k-datepicker .k-picker-wrap.k-state-focused {
                box-shadow: none !important;
                border-color:
            }

            .datepicker-kendo-fix .k-datepicker .k-picker-wrap .k-input {
                border-color: transparent !important;
                width: 100% !important;
                flex: 11;
                height: 44px !important;
            }

            .datepicker-kendo-fix .k-datepicker .k-picker-wrap .k-select {
                flex: 1;
                border-color: transparent;
                background-color: transparent;
            }

        .datepicker-kendo-fix .k-datepicker .k-icon.k-i-warning {
            display: none;
        }

/*datatable style adjustment*/

.dt-length .dt-input[name=grid_length], .dt-length .dt-input[name=grid_2_length] {
    border-radius: 4px;
    margin-right: 10px;
}


.button_container {
    position: relative;
}

    .button_container .buttons_action_container {
        display: none;
        position: absolute;
        right: 0;
    }

    .button_container.active .buttons_action_container {
        display: block;
        background-color: #ffff;
        z-index: 1;
        border: 1px solid #e3e3e3;
        border-radius: 25px;
        padding: 6px;
    }


/*datatable style adjustment*/

.btn-warning.templatecustom {
    background-color: rgba(255, 146, 40, 1);
    border-color: rgba(255, 146, 40, 1);
}

.btn-secondary.templatecustom {
    background-color: rgba(19, 1, 96, 1);
    border-color: rgba(19, 1, 96, 1);
}

.btn-dark.templatecustom {
    background-color: rgba(218, 218, 218, 1);
    border-color: rgba(218, 218, 218, 1);
    color: rgba(82, 75, 107, 1);
}

.slct2mult {
    position: relative;
}

    .slct2mult .iconloose, .singular.iconloose {
        right: 15px;
        width: 23px;
        border-radius: 50%;
        line-height: 21px;
        height: 23px;
        border: 2px solid rgba(19, 1, 96, 1);
        color: rgba(19, 1, 96, 1);
        text-align: center;
        top: 14px;
    }

.singular.iconloose {
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
}


/*.slct2mult:after {
        position: absolute;
        right: 0;*/
/*font-family: 'Font Awesome 5 Free';
        content: "\f067";*/
/*content:
        border-radius: 50%;
        width: 20px;
        height: 20px;
        border: 2px solid rgba(19, 1, 96, 1);
         padding: 5px; 
        color: rgba(19, 1, 96, 1);
        font-size: 20px;
        font: var(--fa-font-solid);
      
    }*/
@media(max-width:1024px) {
    .dt-layout-row.dt-layout-table {
        width: 100%;
        overflow: scroll;
    }
}


/*.form-group.customlabel input{

    }*/