:root {
    --default-font: Quicksand,helvetica,tahoma,verdana,sans-serif;
    --default-font-size: 13px;

    --primary-color: #FFFFFF;
    --secondary-color: #FAFAFA;
    --third-color: #EEEEEE;
    --fourth-color: #DDDDDD;

    --primary-text-color: #222222;
    --secondary-text-color: #666666;
    --third-text-color: #999999;
    --fourth-text-color: #CCCCCC;
    --bright-text-color: #EEEEEE;
    --dark-text-color: #222222;

    --link-text-color: #0081fc;

    --default-border-color: #DDDDDD;
    --default-border-color-secondary: #EEEEEE;
    --default-border-radius: 5px;
    --default-border-width: 1px;

    --default-btn-bgcolor: #EEEEEE;
    --default-btn-bgcolor-over: #DDDDDD;
    --default-btn-font-color: #222222;

    --color-opacity-bright:#BCC5E133;
    --color-opacity-dark:#20283422;
    --color-opacity: var(--color-opacity-dark);

    --accent-color: #e9f4fc;
    --accent-second-color: #d3e9fc;

    --color-black: #000000; --color-black-second: #222222;
    --color-white: #FFFFFF; --color-white-second: #EEEEEE;
    --color-blue: #187ecb; --color-blue-second: #0869af;
    --color-red: #d0092c; --color-red-second: #b6081a;
    --color-green: #089813; --color-green-second: #238003;
    --color-orange: #fd7708; --color-orange-second: #e1660d;
    --color-pink: #d30982; --color-pink-second: #c0066f;
    --color-purple: #8e12e0; --color-purple-second: #7606b4;
    --color-gray: #646479; --color-gray-second: #555564;

    --color-transparent: #00000000;

    --icon-arrow-drop-up: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="%23999999" viewBox="0 0 16 16"> <path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/> </svg> ');
    --icon-arrow-drop-right: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="%23999999" viewBox="0 0 16 16"> <path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/> </svg> ');
    --icon-arrow-drop-down: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="%23999999" viewBox="0 0 16 16"> <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/> </svg> ');
    --icon-arrow-drop-left: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="%23999999" viewBox="0 0 16 16"> <path d="m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"/> </svg> ');
    --icon-chevron-up: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23999999" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z"/></svg>');
    --icon-chevron-right: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23999999" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/> </svg>');
    --icon-chevron-down: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23999999" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/> </svg> ');
    --icon-chevron-left: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23999999" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/> </svg> ');
    --icon-close: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23999999" class="bi bi-x-lg" viewBox="0 0 16 16"><path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"/></svg> ');
    --icon-search: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23999999" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/></svg>');
    --icon-calendar: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23999999" viewBox="0 0 16 16"><path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2M1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857z"/><path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2"/></svg>');
    --icon-clock: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23999999" viewBox="0 0 16 16"><path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z"/><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0"/></svg>');
    --icon-switch-off: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%23999999" viewBox="0 0 16 16"><path d="M11 4a4 4 0 0 1 0 8H8a5 5 0 0 0 2-4 5 5 0 0 0-2-4zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8M0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5"/></svg>');
    --icon-switch-on: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%23999999" viewBox="0 0 16 16"><path d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8"/></svg>');
    --icon-maximize-restore: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%23999999" viewBox="0 0 16 16">  <path d="M0 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2H2a2 2 0 0 1-2-2zm5 10v2a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2v5a2 2 0 0 1-2 2zm6-8V2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2V6a2 2 0 0 1 2-2z"/></svg> ');
    --icon-maximize: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%23999999" viewBox="0 0 16 16"><path d="M11 2a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3zM5 1a4 4 0 0 0-4 4v6a4 4 0 0 0 4 4h6a4 4 0 0 0 4-4V5a4 4 0 0 0-4-4z"/></svg> ');
    --icon-error: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="white" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/> <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/> </svg>');
    --icon-warning: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="white" viewBox="0 0 16 16"><path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z"/><path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/></svg>');
    --icon-info: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="white" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/><path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/></svg>');
    --icon-success: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="white" viewBox="0 0 16 16"><path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0"/><path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0z"/></svg>');

    /* CUSTOM BOOTSTRAP */
    --bs-border-color: var(--default-border-color)
}

* {scrollbar-width: thin; scrollbar-color: var(--fourth-color) transparent;}
::-webkit-scrollbar {width: 5px; height: 2px;}
::-webkit-scrollbar-track {background: transparent;}
::-webkit-scrollbar-thumb {background-color: var(--secondary-color);}

body{
    background-color: var(--primary-color);
}

body, table{
    font-family: var(--default-font);
    color: var(--primary-text-color);
    font-size: var(--default-font-size);
}
table{border-spacing: 0; border-collapse: collapse; width: 100%}

.hidden{display: none;}

.modal-overlay{
    background: #00000099 !important;
    z-index: 1001;
}
.modal-overlay .block-container{
    background: var(--primary-color);
    padding: 10px 10px 5px;
    display: inline-block;
    border-radius: 5px;
    border: 1px solid var(--default-border-color);
    color: var(--secondary-text-color);
}

/* BOOTSTRAP STYLE CUSTOM */
.btn {
    --bs-btn-font-size: var(--default-font-size);
    --bs-btn-font-weight: 600;
}
.btn-close {
    background: var(--icon-close) no-repeat;
}

.btn-primary{background: var(--color-blue); color: var(--bright-text-color); border-color: var(--color-blue-second);}
.btn-danger{background: var(--color-red); color: var(--bright-text-color); border-color: var(--color-red-second);}
.btn-success{background: var(--color-green); color: var(--bright-text-color); border-color: var(--color-green-second);}
.btn-secondary{background: var(--color-gray); color: var(--bright-text-color); border-color: var(--color-gray-second);}

.popover{z-index: 20000}
.popover {
    --bs-popover-bg: var(--secondary-color);
    --bs-popover-border-color: #555562;
    --bs-popover-header-bg: green;
    --bs-popover-header-color: blue;
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: .5rem;
}

.navbar-brand{color: var(--primary-text-color)}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: var(--primary-text-color);
    border-bottom: 3px solid #e0078b;
}
.navbar {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-nav {
    --bs-nav-link-color: var(--secondary-text-color);
    --bs-nav-link-hover-color: var(--primary-text-color);
    --bs-nav-link-disabled-color: #FFFFFF33;
    font-size: 15px;
    font-weight: 600;
}
.navbar-toggler {
    padding: 0;
    line-height: 1;
    border: none;
    font-size: 16px;
    margin-right: 20px;
}
.navbar-toggler:focus {
    box-shadow: 0 0 0 0;
}

/* BOX COLOR */
.boxcolor{display: inline-block; padding: 2px 5px; border-radius: 2px; font-size: 10px; text-align: center;}

/* TOAST MESSAGING */
.jq-toast-wrap { width: auto; max-width: 400px; min-width: 300px; z-index: 90000 !important;}
.jq-toast-single { padding: 15px 20px; font-family: unset; font-size: 13px;}
.jq-toast-single h2 { font-family: unset; font-size: 15px; font-weight: 600; margin: 0 0 5px;}
.jq-has-icon { padding: 10px 20px 10px 60px; background-repeat: no-repeat; background-position: 15px center; }
.jq-icon-info{background-image: var(--icon-info);}
.jq-icon-success{background-image: var(--icon-success);}
.jq-icon-warning{background-image: var(--icon-warning);}
.jq-icon-error{background-image: var(--icon-error);}

/* BOOTSTRAP MODAL */
.modal {
    --bs-modal-width: 450px;
    background: #191A23BA;
}
.modal-content {
    color: var(--primary-text-color);
    background-color: var(--primary-color);
    border: 0 solid var(--default-border-color);
    border-radius: var(--default-border-radius);
    margin: 2rem;
}

.modal-header {
    padding: 12px 1rem;
    font-size: 14px;
    border-bottom: 0px solid var(--default-border-color);
    border-top-left-radius: var(--default-border-radius);
    border-top-right-radius: var(--default-border-radius);
}
.modal-body {
    background-color: var(--third-color);

}
.modal-footer {
    padding: 2px 5px;
    background-color: var(--secondary-color);
    border-top: 0px solid var(--default-border-color);
    border-bottom-right-radius: var(--bs-modal-inner-border-radius);
    border-bottom-left-radius: var(--bs-modal-inner-border-radius);
}

/* CIRCLE PHOTO IMAGE */
.photo-circle{
    --size: 35px;
    --textSize: 16px;
    --textWeight: bold;
    --textColor: var(--primary-text-color);
    --borderColor: var(--default-border-color);
    border-radius: 50%;
    border: 1px solid var(--borderColor);
    width: var(--size);
    height: var(--size);
    position: relative;
    text-align: center;
    background-color: #FFFFFF11;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.photo-circle img{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}
.photo-circle .alias{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1px;
    color: var(--textColor);
    font-size: var(--textSize);
    font-weight: var(--textWeight);
    width: 100%;
}

/* INPUT */
.form-text{color: var(--secondary-text-color)}
.field{margin: 10px 0 20px 0;}
label{
    display: block;
    font-size: 12px;
    color: var(--secondary-text-color);
    margin-bottom: 3px; padding: 0;
}
input[type=text],input[type=email], input[type=password], textarea, select{
    width: 100%;
    background: transparent;
    border: 1px solid var(--default-border-color);
    color: var(--primary-text-color);
    font-size: 14px;
    border-radius: var(--default-border-radius);
    padding: 7px 10px;
}
input.readonly, textarea.readonly {color: var(--fourth-text-color);}
.input-group {display: flex !important;}
textarea{height: 100px;}
label{
    color: var(--secondary-text-color);
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 7px;
}
select:focus{
    background-color: var(--third-color);
}

.form-control, .form-control:focus, .form-select, .form-select:focus{
    font-size: 14px;
    background-color: transparent;
    outline: 0;
    color: var(--primary-text-color);
    border: 1px solid var(--default-border-color);
    box-shadow: none;
}
.form-control::placeholder{color: var(--primary-text-color); opacity: 0.3;}
.form-select{
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23999'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
}
.form-select:focus{
    background-color: var(--third-color);
    font-size: 14px;
}
input.invalid, textarea.invalid, select.invalid{
    border-color: #e1556fc2 !important;
}

/* CODEMIRROR */
.CodeMirror, .CodeMirror pre{
    font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace !important; font-size: 13px;
}
.CodeMirror {
    height: 100% !important;

}
.CodeMirror-scroll{
    background-color: var(--ext-panel-body-bgcolor) !important;
}
.cm-s-dracula .CodeMirror-gutters, .cm-s-dracula.CodeMirror{
    background-color: var(--ext-panel-body-bgcolor) !important;
}

/* DATETIME DATE TIME PICKER */
input.datepicker, input.datetimepicker{
    background-image: var(--icon-calendar);
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
    padding-right: 30px;
}

input.timepicker{
    background-image: var(--icon-clock);
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
    padding-right: 30px;
}

.xdsoft_datetimepicker{
    background-color: var(--third-color);
    border: 1px solid var(--default-border-color);
    color: var(--third-text-color);
    font-family: var(--fontFamily);
    z-index: 20000;
}
.xdsoft_datetimepicker .xdsoft_datepicker{width: 240px;}
.xdsoft_datetimepicker .xdsoft_calendar th {
    font-weight: 600;
    text-align: center;
    color: var(--primary-text-color);
    background: var(--primary-color);
    border: 1px solid var(--default-border-color);
}
.xdsoft_datetimepicker .xdsoft_calendar td > div {
    padding-right: 0;
}
.xdsoft_datetimepicker .xdsoft_calendar td {
    font-weight: 600;
    text-align: center;
    color: var(--secondary-text-color);
    background: var(--secondary-color);
    border: 1px solid var(--default-border-color);
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
    border: 1px solid var(--default-border-color);
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div {
    background: var(--secondary-color);
    color: var(--secondary-text-color);
    border: 1px solid var(--default-border-color);
}
.xdsoft_datetimepicker .xdsoft_label{
    background-color: transparent;
}
.xdsoft_datetimepicker .xdsoft_label span{
    background-color: transparent;
    display: inline-block;
    margin-right: 5px;
}
.xdsoft_datetimepicker .xdsoft_year {
    width: auto;
    margin-left: 5px;
}
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover {
    color: var(--secondary-text-color);
    background: var(--accent-color);
}
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select{
    background-color: var(--third-color);
    color: var(--secondary-text-color);
}
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option {
    padding: 3px 15px 3px 15px;
    text-decoration: none !important;
}
.xdsoft_datetimepicker .xdsoft_today_button{
    background-image: var(--icon-search);
    background-position: 0;
}
.xdsoft_datetimepicker .xdsoft_prev{
    background-image: var(--icon-chevron-left);
    background-position: 0;
}
.xdsoft_datetimepicker .xdsoft_next{
    background-image: var(--icon-chevron-right);
    background-position: 0;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev{
    background-image: var(--icon-chevron-up);
    background-position: 0;
    margin: 0 10px 9px 19px;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next{
    background-image: var(--icon-chevron-down);
    background-position: 0;
    margin: 7px 0 0 19px;
}
.xdsoft_datetimepicker .xdsoft_label i{
    background-image: var(--icon-arrow-drop-down);
    background-position: 0;
    background-repeat: no-repeat;
    width: 12px;
}

.card{
    --bs-card-bg: var(--secondary-color);
    --bs-card-color: var(--primary-text-color);
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-title-spacer-y: 0px;
    font-size: 13px;
}
.card-title{
    font-weight: 600;
    font-size: 21px;
    line-height: 26px;
}
.card-subtitle{
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
}
.card a, .card a:link, .card a:visited {
    color: var(--link-text-color);
    text-decoration: none;
}

.list-group {
    --bs-list-group-color: var(--primary-text-color);
    --bs-list-group-bg: var(--primary-color);
    --bs-list-group-border-color: var(--default-border-color);
    --bs-list-group-border-width: var(--default-border-width);
    --bs-list-group-border-radius: var(--default-border-radius);
    --bs-list-group-item-padding-x: 1rem;
    --bs-list-group-item-padding-y: 0.5rem;
    --bs-list-group-action-color: var(--secondary-color);
    --bs-list-group-action-hover-color: var(--fourth-color);
    --bs-list-group-action-hover-bg: var(--third-color);
    --bs-list-group-action-active-color: var(--primary-color);
    --bs-list-group-action-active-bg: var(--secondary-color);
    --bs-list-group-disabled-color: var(--secondary-color);
    --bs-list-group-disabled-bg: var(--primary-color);
    --bs-list-group-active-color: #fff;
    --bs-list-group-active-bg: #0d6efd;
    --bs-list-group-active-border-color: #0d6efd;
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    border-radius: var(--bs-list-group-border-radius);
}

@keyframes shake-3x {
    0% { transform: rotate(0deg); }
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-15deg); }
    60% { transform: rotate(10deg); }
    80% { transform: rotate(-10deg); }
    100% { transform: rotate(0deg); }
}
.shake-3x {animation: shake-3x 0.6s ease;}