.custom-template {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    right: -325px;
    width: 325px;
    height: max-content;
    display: block;
    z-index: 1;
    background: #ffffff;
    transition: all .3s;
    z-index: 1003;
    box-shadow: -1px 1px 20px rgba(69, 65, 78, 0.15);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    transition: all .5s;
}

.custom-template.open {
    right: 0px;
}

.custom-template .custom-toggle {
    position: absolute;
    width: 45px;
    height: 45px;
    background: rgb(88, 103, 221);
    top: 50%;
    left: -45px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-right: 1px solid #177dff;
    cursor: pointer;
    color: #ffffff;
    box-shadow: -5px 5px 20px rgba(69, 65, 78, 0.21);
}

.custom-template .custom-toggle i {
    font-size: 20px;
    animation: 1.3s spin linear infinite;
}

.custom-template .title {
    padding: 15px;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    border-top-left-radius: 5px;
    border-bottom: 1px solid #ebedf2;
    background: #5867dd;
}

.custom-template .custom-content {
    padding: 20px 15px;
    max-height: calc(100vh - 90px);
    overflow: auto;
}

.custom-template .switcher {
    padding: 5px 0;
}

.custom-template .switch-block h4 {
    font-size: 13px;
    font-weight: 600;
    color: #444;
    line-height: 1.3;
    margin-bottom: 0;
    text-transform: uppercase;
}

.custom-template .btnSwitch {
    margin-top: 20px;
    margin-bottom: 25px;
}

.custom-template .btnSwitch button {
    border: 0px;
    height: 20px;
    width: 20px;
    outline: 0;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    border: 2px solid #eee;
    position: relative;
    transition: all .2s;
}

.custom-template .btnSwitch button:hover {
    border-color: #0bf;
}

.custom-template .btnSwitch button.selected {
    border-color: #0bf;
}

.custom-template .img-pick {
    padding: 4px;
    min-height: 100px;
    border-radius: 5px;
    cursor: pointer;
}

.custom-template .img-pick img {
    height: 100%;
    height: 100px;
    width: 100%;
    border-radius: 5px;
    border: 2px solid transparent;
}

.custom-template .img-pick:hover img, .custom-template .img-pick.active img {
    border-color: #177dff;
}

.demo .btn, .demo .progress {
    margin-bottom: 15px !important;
}

.demo .form-check-label, .demo .form-radio-label {
    margin-right: 15px;
}

.demo .toggle, .demo .btn-group {
    margin-right: 15px;
}

.demo #slider {
    margin-bottom: 15px;
}

.table-typo tbody > tr > td {
    border-color: #fafafa;
}

.table-typo tbody > tr > td:first-child {
    min-width: 200px;
    vertical-align: bottom;
}

.table-typo tbody > tr > td:first-child p {
    font-size: 14px;
    color: #333;
}

.demo-icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
    padding: 10px;
    transition: all .2s;
}

.demo-icon:hover {
    background-color: #f4f5f8;
    border-radius: 3px;
}

.demo-icon .icon-preview {
    font-size: 1.8rem;
    margin-right: 10px;
    line-height: 1;
    color: #333439;
}

body[data-background-color="dark"] .demo-icon .icon-preview {
    color: #969696;
}

.demo-icon .icon-class {
    font-weight: 300;
    font-size: 13px;
    color: #777;
}

body[data-background-color="dark"] .demo-icon .icon-class {
    color: #a9a8a8;
}

.form-show-notify .form-control {
    margin-bottom: 15px;
}

.form-show-notify label {
    padding-top: 0.65rem;
}

.map-demo {
    height: 300px;
}

#instructions li {
    padding: 5px 0;
}

.row-demo-grid {
    margin-bottom: 15px;
}

.row-demo-grid [class^="col"] {
    text-align: center;
}

.row-demo-grid [class^="col"] .card-body {
    background: #ddd;
}

.btnSwitch button[data-color="white"] {
    background-color: #fff;
}

.btnSwitch button[data-color="grey"] {
    background-color: #f1f1f1;
}

.btnSwitch button[data-color="black"] {
    background-color: #191919;
}

.btnSwitch button[data-color="dark"] {
    background-color: #1a2035;
}

.btnSwitch button[data-color="blue"] {
    background-color: #1572E8;
}

.btnSwitch button[data-color="purple"] {
    background-color: #6861CE;
}

.btnSwitch button[data-color="light-blue"] {
    background-color: #48ABF7;
}

.btnSwitch button[data-color="green"] {
    background-color: #31CE36;
}

.btnSwitch button[data-color="orange"] {
    background-color: #FFAD46;
}

.btnSwitch button[data-color="red"] {
    background-color: #F25961;
}

.btnSwitch button[data-color="dark2"] {
    background-color: #1f283e;
}

.btnSwitch button[data-color="blue2"] {
    background-color: #1269DB;
}

.btnSwitch button[data-color="purple2"] {
    background-color: #5C55BF;
}

.btnSwitch button[data-color="light-blue2"] {
    background-color: #3697E1;
}

.btnSwitch button[data-color="green2"] {
    background-color: #2BB930;
}

.btnSwitch button[data-color="orange2"] {
    background-color: #FF9E27;
}

.btnSwitch button[data-color="red2"] {
    background-color: #EA4d56;
}

.btnSwitch button[data-color="bg1"] {
    background-color: #fafafa;
}

.btnSwitch button[data-color="bg2"] {
    background-color: #fff;
}

.btnSwitch button[data-color="bg3"] {
    background-color: #f1f1f1;
}

@media screen and (max-width: 550px) {
    .table-typo tr td {
        display: flex;
        align-items: center;
        word-break: break-word;
    }

    .table-typo tr td:first-child p {
        margin-bottom: 0px;
    }
}

@media screen and (max-width: 576px) {
    .custom-template .custom-content {
        overflow: auto;
    }

    .form-show-notify > .text-right, .form-show-validation > .text-right {
        text-align: left !important;
    }
}

@media screen and (max-width: 400px) {
    .custom-template {
        width: 85% !important;
        right: -85%;
    }
}

.alias {
    cursor: alias;
}

.all-scroll {
    cursor: all-scroll;
}

.auto {
    cursor: auto;
}

.cell {
    cursor: cell;
}

.context-menu {
    cursor: context-menu;
}

.col-resize {
    cursor: col-resize;
}

.copy {
    cursor: copy;
}

.crosshair {
    cursor: crosshair;
}

.default {
    cursor: default;
}

.e-resize {
    cursor: e-resize;
}

.ew-resize {
    cursor: ew-resize;
}

.grab {
    cursor: grab;
}

.grabbing {
    cursor: grabbing;
}

.help {
    cursor: help;
}

.move {
    cursor: move;
}

.n-resize {
    cursor: n-resize;
}

.ne-resize {
    cursor: ne-resize;
}

.nesw-resize {
    cursor: nesw-resize;
}

.ns-resize {
    cursor: ns-resize;
}

.nw-resize {
    cursor: nw-resize;
}

.nwse-resize {
    cursor: nwse-resize;
}

.no-drop {
    cursor: no-drop;
}

.none {
    cursor: none;
}

.not-allowed {
    cursor: not-allowed;
}

.pointer {
    cursor: pointer;
}

.progress {
    cursor: progress;
}

.row-resize {
    cursor: row-resize;
}

.s-resize {
    cursor: s-resize;
}

.se-resize {
    cursor: se-resize;
}

.sw-resize {
    cursor: sw-resize;
}

.text {
    cursor: text;
}

.url {
    cursor: url(myBall.cur), auto;
}

.w-resize {
    cursor: w-resize;
}

.wait {
    cursor: wait;
}

.zoom-in {
    cursor: zoom-in;
}

.zoom-out {
    cursor: zoom-out;
}

.right {
    float: right;
}

svg.w-5.h-5 {
    height: 10px;
}

nav[role=navigation] div {
    /* display:none; */
}

span.relative.inline-flex.items-center.px-4.py-2.text-sm.font-medium.text-gray-500.bg-white.border.border-gray-300.cursor-default.leading-5.rounded-md {
    display: none;
}

a.relative.inline-flex.items-center.px-4.py-2.ml-3.text-sm.font-medium.text-gray-700.bg-white.border.border-gray-300.leading-5.rounded-md.hover\:text-gray-500.focus\:outline-none.focus\:ring.ring-gray-300.focus\:border-blue-300.active\:bg-gray-100.active\:text-gray-700.transition.ease-in-out.duration-150 {
    display: none;
}

a.relative.inline-flex.items-center.px-4.py-2.text-sm.font-medium.text-gray-700.bg-white.border.border-gray-300.leading-5.rounded-md.hover\:text-gray-500.focus\:outline-none.focus\:ring.ring-gray-300.focus\:border-blue-300.active\:bg-gray-100.active\:text-gray-700.transition.ease-in-out.duration-150 {
    display: none;
}

.list-icon {
    font-size: 25px;
    display: flex;
}

.icon {
    margin: 0px 3px;
}

.pointer {
    cursor: pointer;
}

.float-left {
    float: left;
}

.badge-num {
    position: absolute;
    right: 0px;
    top: -10px;
    font-size: 10px;
}

.position-relative {
    position: relative;
}

@font-face {
    font-family: cadt;
    font-style: normal;
    font-weight: bold;
    src: URL("../fonts/cadt/CADTMonoDisplay-Regular.ttf") format('truetype');
    unicode-range: U+1780-17FF, U+200B-200C, U+25CC;
}

@font-face {
    font-family: Niradei;
    font-style: normal;
    src: URL("../fonts/cadt/Niradei-Regular.ttf") format('truetype');
    unicode-range: U+1780-17FF, U+200B-200C, U+25CC;
}

p, span, label, :not(i) {
    font-family: arial, Niradei !important;
}

.th-action {
    width: 100px !important;
}

.custom-pd-act-icon {
    padding: 10px;
}

.clear-form-control {
    border: none;
    padding: 0px;
}

.selectize-input {
    padding: 0.6rem 1rem !important;
}

.table.table-striped td, .table.table-striped th {
    height: 30px !important;
}

.card .card-body, .card-light .card-body,
.card .card-header, .card-light .card-header {
    /*padding: 0.2rem 1rem;*/
}

thead tr th {
    text-align: left !important;
}

.grid-center-ceneter {
    display: grid;
    justify-items: center;
    align-items: center;
}

.small-input input, .small-input select {
    width: 100px;
}

.sub-sub-item:before {
    content: "- ";
}

.login .wrapper.wrapper-login .container-login {
    width: 600px !important;
}

.bg-drop {
    border: 1px solid white !important;
    background: #dad6d6 !important;
}

.x-small {
    font-size: 10px !important;
}

.left-m30 {
    margin-left: -30px;
}

.lect-cycle {
    width: 50px;
    height: 50px;
    border-radius: 100%;
}

.w-100 {
    width: 100px;
}

.modal {
    background: rgba(10, 90, 151, 0.58);
}

thead tr th {
    text-align: center !important;
}

.table td, .table th, .form-group {
    padding: 5px !important;
    margin: 0 !important;
}

.form-control-sm .selectize-input {
    padding: 5px ! IMPORTANT;
    position: relative;
    top: 3px;
    margin: 0px !important;
}

label {
    color: #0a53be !important;
}

ul.subsubnav li {
    list-style: none;
}

.bg-grey1 {
    background: #eaeaea !important;
}

li.active > a {
    color: #0a53be !important;
}

#myInput {
    padding: 20px;
    margin-top: -6px;
    border: 0;
    border-radius: 0;
    background: #f1f1f1;
}

.dropdown-menu li a {
    padding: 5px;
    width: 100%;
    text-align: center;
}

.dropdown-menu li button {
    padding: 5px;
    width: 100%;
    text-align: center;
}

.bg-grey1 {
    background: #eaeaea !important;
}

.text-center {
    justify-content: center;
    align-items: center;
}

.dropdown {
    margin: 0 auto; /* Ensures the dropdown button is horizontally centered */
}

.dropdown-menu {
    min-width: 5rem;
}

.emp_anniversary {
    height: 350px !important;
    overflow: auto;
}

.text-date {
    position: relative;
    left: 50px;
    top: 19px;
    color: red;
}

.label-required:after {
    content: " *";
    color: red;
}

.h400-overflow {
    height: 400px !important;
    overflow: auto;
}

.dropdown-menu {
    font-size: small;
}

.alert-close {
    position: absolute;
    top: -11px !important;
}

.alert-cus {
    position: fixed;
    z-index: 10;
    right: 10px !important;
    bottom: 10px !important;
}

.position-as-rb-10 {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.position-as-lb-10 {
    position: absolute;
    left: 10px;
    bottom: 10px;
}

@media screen and (min-width: 768px) {
    .w-250px {
        width: 280px;
    }
}

.bg-image-profile {
    background-repeat: no-repeat;
    height: 200px;
    width: 100%;
    background-position: top;
    background-size: cover;
}

.input-label {
    width: 100%;
    text-align: center;
    background: transparent;
    border: navajowhite;
    color: #0062b3;
    font-weight: bold;
}

.editable-after::after {
    content: "✎";
    width: 10px;
    /*margin-left: 5px;*/
    color: #555; /* Optional: change color */
    position: absolute;
    top: 0rem;
    font-size: 1.2rem;
    top: 1rem;
}

.editable-before::before {
    content: "✎";
    width: 10px;
    /*margin-left: 5px;*/
    color: #555; /* Optional: change color */
    position: absolute;
    font-size: 1.2rem;
    top: 1rem;
}

.minus-after::after {
    content: "⊖";
    width: 10px;
    /*margin-left: 5px;*/
    color: #555; /* Optional: change color */
    position: absolute;
    font-size: 2.2rem;
    top: 0rem;
}

.minus-before::before {
    content: "⊖";
    width: 10px;
    /*margin-left: 5px;*/
    color: #555; /* Optional: change color */
    position: absolute;
    font-size: 1.2rem;
    top: 0rem;
}

.zoom-in:hover img {
    display: block !important;
    transform: scale(10);
    position: fixed;
    right: 100px;
    bottom: 200px;
    z-index: 20;
}

/*.zoom-in:hover {*/
/*    display: block !important;*/
/*    transform: scale(10);*/
/*    position: fixed;*/
/*    right: 100px;*/
/*    bottom: 200px;*/
/*    z-index: 20;*/
/*}*/

.tr-highlight:hover {
    background: #f1f1f1 !important;
}

.the-chart {
    min-width: 200px;
    max-width: fit-content;
}

.the-chart-img {
    min-width: 200px;
    width: fit-content;
}


*[data-background-color="cadt-IDT"], *[data-background-color="cadt-institute"] {
    background-image: linear-gradient(45deg, #13284C 50%, #F88D2A 50%) !important;
}

*[data-background-color="cadt-SYSTEM"] {
    background-image: linear-gradient(45deg, #13284C 50%, #980442 50%) !important;
}

*[data-background-color="cadt-ADMIN"] {
    background-image: linear-gradient(45deg, #13284C 50%, #671d85 50%) !important;
}

*[data-background-color="cadt-GENERAL"],*[data-background-color="cadt-"] {
    background-image: linear-gradient(45deg, #13284C 50%, #0c5d8f 50%) !important;
}

*[data-background-color="cadt-CRM"] {
    background-image: linear-gradient(45deg, #13284C 50%, #007691 50%) !important;
}

*[data-background-color="cadt-REPORT"] {
    background-image: linear-gradient(45deg, #13284C 50%, #005a3a 50%) !important;
}

*[data-background-color="cadt-UMS"] {
    background-image: linear-gradient(45deg, #13284C 50%, #13284C 50%) !important;
}

*[data-background-color="cadt-DASHBOARD"], .bg-CADT {
    background-image: linear-gradient(45deg, #13284C 50%, #13284C 50%) !important;
}

*[data-background-color="IDT"], *[data-background-color="institute"], .bg-IDT, .bg-institute {
    background: #F88D2A !important;
}

*[data-background-color="ADMIN"], .bg-admin {
    background: #671d85 !important;
}

*[data-background-color="IDG"], .bg-IDG {
    background: #F88D2A !important;
}

*[data-background-color="GENERAL"], .bg-general, .navbar{
    background: #0c5d8f;
}

*[data-background-color="REPORT"], .bg-report {
    background: #005a3a !important;
}

*[data-background-color="UMS"], .bg-ums, *[data-background-color="DASHBOARD"], .bg-dashboard {
    background: #13284C !important;
}

*[data-background-color="CRM"], .bg-CRM {
    background: #007691 !important;
}

*[data-background-color="SYSTEM"], .bg-system {
    background: #980442 !important;
}

.sidebar.sidebar-style-2 .nav.nav-primary > .nav-item.active > a {
    background: #13284C !important;
}

.bg-primary-gradient {
    background: linear-gradient(-45deg, #13294d, #1572E8) !important;
}

.bg-idt {
    background: #F88D2A !important;
}

.bg-cadt {
    background: #13294d !important;
}

.text-cadt {
    color: #13294d !important;
}

.bg-finance {
    color: #117000 !important;
}

.quick-actions .quick-actions-item {
    margin: 0px !important;
}

.main-container {
    position: relative;
    top: 60px;
}

.bg-y1 {
    background: #ffc9df;
}

.bg-y2 {
    background: #ff9898;
    opacity: 0.7
}

.bg-y3 {
    background: #ffc9df;
    opacity: 0.8
}

.bg-y4 {
    background: #ffa1a1;
    opacity: 0.9
}

.bg-total {
    background: #ffc9df;
}

.table.amount td, .table.amount th {
    height: 40px;
}

.text-decoration-underline {
    text-decoration: underline !important;
}

ul.nav li {
    text-transform: uppercase !important;
}

.bg-1 {
    background: #0a5a97;
}

.bg-2 {
    background: #aa5a97;
}

.bg-3 {
    background: #68e64b;
}

.bg-5 {
    background: #fb9e4c;
}

.bg-5 {
    background: #ff0000;
}

.full-screen {
    float: right;
}

table .calendar, table .calendar tr td {
    width: 100% !important;
}

table .calendar tr {
    border: 1px solid white !important;
}

table tr td {
    height: 3vh !important;
}

.badge-0 {
    background-color: #339665;
    color: #fff;

}

.badge-1 {
    background-color: #9d8b71;
    color: #fff;
}

.badge-2 {
    background-color: #709d87;
    color: #fff;
}

.badge-3 {
    background-color: #979d71;
    color: #fff;
}

.badge-4 {
    background-color: #71759d;
    color: #fff;
}

.bg-holiday {
    background: #d57474 !important;
}

.nav-collapse .subnav li a, .subsubnav li a {
    padding-left: 10px !important;
}
.bg-approved{
    background: #117000 !important;
}
.bg-failed{
    background: #ff0000 !important;
}
.bg-pending{
    background: #ff9800 !important;
}