@import url('https://fonts.googleapis.com/css2?family=Chocolate+Classical+Sans&family=Noto+Sans+SC:wght@100..900&display=swap');

/*bootstrap Setting*/
:root{
    --bs-border-width: 1px;
    --bs-border-radius: 0.5em;
    --bs-blue: var(--theme-blue);
    --bs-indigo: var(--theme-indigo);
    --bs-purple: var(--theme-purple);
    --bs-pink: var(--theme-pink);
    --bs-red: var(--theme-red);
    --bs-orange: var(--theme-orange);
    --bs-yellow: var(--theme-yellow);
    --bs-green: var(--theme-green);
    --bs-teal: var(--theme-teal);
    --bs-cyan: var(--theme-cyan);
    --bs-black: var(--theme-black);
    --bs-white: var(--theme-white);
    --bs-gray: var(--theme-gray);
    --bs-primary: var(--theme-blue);
    --bs-secondary: var(--theme-gray);
    --bs-success: var(--theme-green);
    --bs-info: var(--theme-cyan);
    --bs-warning: var(--theme-yellow);
    --bs-danger: var(--theme-red);
    --bs-light: var(--theme-white);
    --bs-dark: var(--theme-black);
    
    --bs-primary-text-emphasis: var(--theme-blue-dark);
    --bs-secondary-text-emphasis: var(--theme-gray-dark);
    --bs-success-text-emphasis: var(--theme-green-dark);
    --bs-info-text-emphasis: var(--theme-cyan-dark);
    --bs-warning-text-emphasis: var(--theme-yellow-dark);
    --bs-danger-text-emphasis: var(--theme-red-dark);
    --bs-light-text-emphasis: var(--theme-gray);
    --bs-dark-text-emphasis: var(--theme-gray-dark);
    
    --bs-primary-bg-subtle: var(--theme-blue-bright);
    --bs-secondary-bg-subtle: var(--theme-gary-bright);
    --bs-success-bg-subtle: var(--theme-green-bright);
    --bs-info-bg-subtle: var(--theme-cyan-bright);
    --bs-warning-bg-subtle: var(--theme-yellow-bright);
    --bs-danger-bg-subtle: var(--theme-red-bright);
    --bs-light-bg-subtle: var(--theme-gray-bright);
    --bs-dark-bg-subtle: var(--theme-gray);
        
    --bs-primary-border-subtle: var(--theme-blue-light);
    --bs-secondary-border-subtle: var(--theme-gray-light);
    --bs-success-border-subtle: var(--theme-green-light);
    --bs-info-border-subtle: var(--theme-cyan-light);
    --bs-warning-border-subtle: var(--theme-yellow-light);
    --bs-danger-border-subtle: var(--theme-red-light);
    --bs-light-border-subtle: var(--theme-gray-light);
    --bs-dark-border-subtle: var(--theme-gray);

    --bs-link-color: #28a745;
    --bs-link-hover-color: #4cda6d;
}
/*
.btn{
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-family: ;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-color: inherit;
    --bs-btn-bg: transparent;
    --bs-btn-border-width: var(--bs-border-width);
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: var(--bs-border-radius);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
}
*/



.pagination{
    --bs-pagination-active-bg: var(--theme-color-main);
    --bs-pagination-active-border-color: var(--theme-color-main);
}

/*Theme Setting*/
:root{
        
    /*--theme-font-color-bright: #f2f0e3;
    --theme-font-color-light: #ecdfc7;
    --theme-font-color: #6b6a58;
    --theme-font-color-deep: #8b837b;
    --theme-font-color-dark: #33312b;*/
    --theme-font-color-dark: #485d08;
    --theme-font-color-deep: #445422;
    --theme-font-color: #4C5141;
    --theme-font-color-light: #f1e6b1;
    --theme-font-color-bright: #FFF;
    
    --theme-font-family: "Noto Sans SC", "Microsoft JhengHei","微軟正黑體","Microsoft YaHei","微软雅黑体",PMingLiU,"新細明體",'宋体',simsun, Helvetica,Arial,sans-serif;
    --theme-font-size-mini: 12px;
    --theme-font-size-small: 14px;
    --theme-font-size: 16px;
    --theme-font-size-large: 24px;
    --theme-font-size-huge: 36px;

    --theme-radius-mini: 2px;
    --theme-radius-small: 3px;
    --theme-radius-main: 4px;
    --theme-radius-large: 12px;
    --theme-radius-huge: 16px;
        
    /*--theme-color-bright: #FFF;
    --theme-color-light: #fff7ee;
    --theme-color-main: #ebded2;
    --theme-color-deep: #938579;
    --theme-color-dark: #3b3a39;*/
    --theme-color-dark: #6E8149;
    --theme-color-deep: #949D42;
    --theme-color-main: #a0b86f;
    --theme-color-light: #CED9B9;
    --theme-color-bright: #f0ffdc;
    
	--theme-page-bg: #f6f8f1; /*#f5f0e8*/

    --theme-pink: #ff83a5;
    --theme-red: #cc6d76; /*#e95c6a*/
    --theme-orange: #e59c44; /*#ffa02f*/
    --theme-yellow: #f8e052; /*#ffdd10*/
    --theme-green: #a4bd6a; /*#adcd60*/
    --theme-teal: #5cc4cc; /*#55cad3*/
    --theme-cyan: #75aec5; /*#49b0db*/
    --theme-blue: #61bdff;
    --theme-indigo: #71a3f5;
    --theme-purple: #9b70f4;
    
    --theme-pink-bright: #ffdddd;
    --theme-red-bright: #ffdddd;
    --theme-orange-bright: #fff6d9;
    --theme-yellow-bright: #fff3cd;
    --theme-green-bright: #f6ffe0;
    --theme-teal-bright: #d1fcff;
    --theme-cyan-bright: #d1f1ff;
    --theme-blue-bright: #d2f4ff;
    --theme-indigo-bright: #e3eeff;
    --theme-purple-bright: #ece3ff;
    
    --theme-pink-light: #ffc3c3;
    --theme-red-light: #ffc3c3;
    --theme-orange-light: #ffc675;
    --theme-yellow-light: #ffe69c;
    --theme-green-light: #cde09f;
    --theme-teal-light: #5adce6;
    --theme-cyan-light: #5abbe6;
    --theme-blue-light: #7fe1ff;
    --theme-indigo-light: #a3c3f7;
    --theme-purple-light: #bfa3f7;
    
    --theme-pink-deep: #b4304f;
    --theme-red-deep: #851c1c;
    --theme-orange-deep: #c07924;
    --theme-yellow-deep: #816d01;
    --theme-green-deep: #5d9600;
    --theme-teal-deep: #009da8;
    --theme-cyan-deep: #0076a8;
    --theme-blue-deep: #2875ac;
    --theme-indigo-deep: #0076a8;
    --theme-purple-deep: #662cdb;
    
    --theme-pink-dark: #731f33;
    --theme-red-dark: #58151c;
    --theme-orange-dark: #623f15;
    --theme-yellow-dark: #664d03;
    --theme-green-dark: #576e22;
    --theme-teal-dark: #016970;
    --theme-cyan-dark: #014f70;
    --theme-blue-dark: #0d4369;
    --theme-indigo-dark: #22519c;
    --theme-purple-dark: #4b229c;
    
    --theme-white: #fff;
    --theme-gray-bright: #e2e3e5;
    --theme-gray-light: #c4c8cb;
    --theme-gray: #ced4da;
    --theme-gray-deep: #34455e;
    --theme-gray-dark: #111416;
    --theme-black: #000;
    
    --theme-form-selected-color: #007bff;
}


button.dt-button, div.dt-button, a.dt-button, input.dt-button{ background: none;text-shadow:none !important;  }
.btn, button.dt-button, div.dt-button, a.dt-button, input.dt-button{
    color: var(--bs-btn-color);
    /*font-size: var(--theme-font-size);*/
    background: none;
    background-color:var(--theme-btn-bg);
    border-color: var(--bs-btn-border-color);
    border-radius:var(--theme-radius-main);
}

.btn:hover, button.dt-button:hover:not(.disabled), div.dt-button:hover:not(.disabled), a.dt-button:hover:not(.disabled), input.dt-button:hover:not(.disabled), button.dt-button:focus:not(.disabled), div.dt-button:focus:not(.disabled), a.dt-button:focus:not(.disabled), input.dt-button:focus:not(.disabled){
    color: var(--bs-btn-hover-color);
    background: none;
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    box-shadow: 0 0 0.5em 0 var(--theme-color-deep), 0 0 0.5em 0 var(--theme-color-deep);
}
.btn:focus, button.dt-button:focus:not(.disabled), div.dt-button:focus:not(.disabled), a.dt-button:focus:not(.disabled), input.dt-button:focus:not(.disabled){
  color: var(--bs-btn-hover-color);
    background: none;
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    box-shadow: 0 0 0.5em 0 var(--theme-color-deep), 0 0 0.5em 0 var(--theme-color-deep);
}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle, .btn-primary.disabled, .btn:active,.btn.active, button.dt-button:active:not(.disabled), div.dt-button:active:not(.disabled), a.dt-button:active:not(.disabled), input.dt-button:active:not(.disabled), button.dt-button.active:not(.disabled), div.dt-button.active:not(.disabled), a.dt-button.active:not(.disabled), input.dt-button.active:not(.disabled),button.dt-button:active:not(.disabled):hover:not(.disabled), div.dt-button:active:not(.disabled):hover:not(.disabled), a.dt-button:active:not(.disabled):hover:not(.disabled), input.dt-button:active:not(.disabled):hover:not(.disabled){
    color: var(--bs-btn-active-color);
    background: none;
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
/*button.dt-button, div.dt-button, a.dt-button, input.dt-button*/
.btn, .dt-button{
    --bs-btn-padding-x: 1em;
    --bs-btn-padding-y: 0.8em;
    --bs-btn-font-family: var(--theme-font-family);
    --bs-btn-font-size: 1em;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1;    
    --bs-btn-color: var(--theme-btn-color);
    --bs-btn-bg: var(--theme-btn-bg);
    --bs-btn-border-color: var(--theme-btn-border-color);
    --bs-btn-hover-color: var(--theme-btn-hover-color);
    --bs-btn-hover-bg: var(--theme-btn-hover-bg);
    --bs-btn-hover-border-color: var(--theme-btn-hover-border-color);
    --bs-btn-focus-shadow-rgb: var(--theme-btn-focus-shadow-rgb);
    --bs-btn-active-color: var(--theme-btn-active-color);
    --bs-btn-active-bg: var(--theme-btn-active-bg);
    --bs-btn-active-border-color: var(--theme-btn-active-border-color);
    --bs-btn-active-shadow: var(--theme-btn-active-shadow);
    --bs-btn-disabled-color: var(--theme-btn-disabled-color);
    --bs-btn-disabled-bg: var(--theme-btn-disabled-bg);
    --bs-btn-disabled-border-color: var(--theme-btn-disabled-border-color);
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    border-radius: var(--theme-radius-main);
}

.btn-xs, .btn-xs:active, .btn-xs.active, .btn-xs:disabled, .btn-xs.disabled, .btn-xs:active:hover, .btn-xs:focus, .btn-xs:hover{  
    --bs-btn-padding-x: 1em;
    --bs-btn-padding-y: 0.5em;
    font-size: var(--theme-font-size-mini);
}
.btn-sm, .btn-sm:active, .btn-sm.active, .btn-sm:disabled, .btn-sm.disabled, .btn-sm:active:hover, .btn-sm:focus, .btn-sm:hover{  
    --bs-btn-padding-x: 1em;
    --bs-btn-padding-y: 0.5em;
    font-size: var(--theme-font-size-small);
}
.btn-lg, .btn-lg:active, .btn-lg.active, .btn-lg:disabled, .btn-lg.disabled, .btn-lg:active:hover, .btn-lg:focus, .btn-lg:hover{  
    --bs-btn-padding-x: 1em;
    --bs-btn-padding-y: 0.5em;
    font-size: var(--theme-font-size-large);    
}
.btn-xl, .btn-xl:active, .btn-xl.active, .btn-xl:disabled, .btn-xl.disabled, .btn-xl:active:hover, .btn-xl:focus, .btn-xl:hover{  
    --bs-btn-padding-x: 1em;
    --bs-btn-padding-y: 0.5em;
    font-size: var(--theme-font-size-huge);    
}
.btn-w, .btn-w:active, .btn-w.active, .btn-w:disabled, .btn-w.disabled, .btn-w:active:hover, .btn-w:focus, .btn-w:hover{ --bs-btn-padding-x: 2em; min-width: 120px; }
.btn-r, .btn-r:active, .btn-r.active, .btn-r:disabled, .btn-r.disabled, .btn-r:active:hover, .btn-r:focus, .btn-r:hover{ border-radius: 3em !important; }
.btn-block, .btn-block:active, .btn-block.active, .btn-block:disabled, .btn-block.disabled, .btn-block:active:hover, .btn-block:focus, .btn-block:hover{ width: 100%; display:block;}

.btn-dark{
   --theme-btn-color: var(--theme-gray-light);
   --theme-btn-bg: var(--theme-gray-dark);
   --theme-btn-border-color: var(--theme-gray-dark);
   --theme-btn-hover-color: var(--theme-gray-light);
   --theme-btn-hover-bg: var(--theme-gray-deep);
   --theme-btn-hover-border-color: var(--theme-gray-deep);
   /*--theme-btn-focus-shadow-rgb: 34,166,194;*/
   --theme-btn-active-color: var(--theme-gray-bright);
   --theme-btn-active-bg: var(--theme-gray-deep);
   --theme-btn-active-border-color: var(--theme-gray-dark);
   --theme-btn-active-shadow: var(--theme-gray);
   --theme-btn-disabled-color: var(--theme-gray);
   --theme-btn-disabled-bg: var(--theme-gray-light);
   --theme-btn-disabled-border-color: var(--theme-gray-light); 
}

.btn-secondary{
    --theme-btn-color: var(--theme-color-dark);
    --theme-btn-bg: var(--theme-color-bright);
    --theme-btn-border-color: var(--theme-color-main);
    --theme-btn-hover-color: var(--theme-color-dark);
    --theme-btn-hover-bg: var(--theme-color-light);
    --theme-btn-hover-border-color: var(--theme-color-deep);
    /*--theme-btn-focus-shadow-rgb: 34,166,194;*/
    --theme-btn-active-color: var(--theme-color-dark);
    --theme-btn-active-bg: var(--theme-color-deep);
    --theme-btn-active-border-color: var(--theme-color-deep);
    --theme-btn-active-shadow: var(--theme-color-deep);
    --theme-btn-disabled-color: var(--theme-gray-dark);
    --theme-btn-disabled-bg: var(--theme-gray);
    --theme-btn-disabled-border-color: var(--theme-gray);
}
/*button.dt-button, div.dt-button, a.dt-button, input.dt-button*/
.btn-primary, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .btn-themecolor, .dt-button{
    --theme-btn-color: var(--theme-white);
    --theme-btn-bg: var(--theme-color-deep);
    --theme-btn-border-color: var(--theme-color-deep);
    --theme-btn-hover-color: var(--theme-white);
    --theme-btn-hover-bg: var(--theme-color-dark);
    --theme-btn-hover-border-color: var(--theme-color-dark);
    /*--theme-btn-focus-shadow-rgb: 34,166,194;*/
    --theme-btn-active-color: var(--theme-white);
    --theme-btn-active-bg: var(--theme-color-dark);
    --theme-btn-active-border-color: var(--theme-color-dark);
    --theme-btn-active-shadow: var(--theme-color-deep);
    --theme-btn-disabled-color: var(--theme-gray-dark);
    --theme-btn-disabled-bg: var(--theme-gray);
    --theme-btn-disabled-border-color: var(--theme-gray);
}
.btn-outline-primary{
    --theme-btn-color: var(--theme-color-deep);
    --theme-btn-bg: var(--theme-white);
    --theme-btn-border-color: var(--theme-color-deep);
    --theme-btn-hover-color: var(--theme-color-dark);
    --theme-btn-hover-bg: var(--theme-color-bright);
    --theme-btn-hover-border-color: var(--theme-color-dark);
    /*--theme-btn-focus-shadow-rgb: 34,166,194;*/
    --theme-btn-active-color: var(--theme-color-dark);
    --theme-btn-active-bg: var(--theme-color-bright);
    --theme-btn-active-border-color: var(--theme-color-dark);
    --theme-btn-active-shadow: var(--theme-color-deep);
    --theme-btn-disabled-color: var(--theme-gray-dark);
    --theme-btn-disabled-bg: var(--theme-gray);
    --theme-btn-disabled-border-color: var(--theme-gray);
}

.btn-info, .btn-cyan{
    --theme-btn-color: var(--theme-white);
    --theme-btn-bg: var(--theme-cyan);
    --theme-btn-border-color: var(--theme-cyan);
    --theme-btn-hover-color: var(--theme-white);
    --theme-btn-hover-bg: var(--theme-cyan-deep);
    --theme-btn-hover-border-color: var(--theme-cyan-deep);
    /*--theme-btn-focus-shadow-rgb: 34,166,194;*/
    --theme-btn-active-color: var(--theme-white);
    --theme-btn-active-bg: var(--theme-cyan-dark);
    --theme-btn-active-border-color: var(--theme-cyan-drak);
    --theme-btn-active-shadow: var(--theme-cyan);
    --theme-btn-disabled-color: var(--theme-gray-dark);
    --theme-btn-disabled-bg: var(--theme-gray);
    --theme-btn-disabled-border-color: var(--theme-gray);
}
.btn-outline-info{
    --theme-btn-color: var(--theme-cyan);
    --theme-btn-bg: var(--theme-white);
    --theme-btn-border-color: var(--theme-cyan);
    --theme-btn-hover-color: var(--theme-cyan);
    --theme-btn-hover-bg: var(--theme-cyan-bright);
    --theme-btn-hover-border-color: var(--theme-cyan);
    /*--theme-btn-focus-shadow-rgb: 34,166,194;*/
    --theme-btn-active-color: var(--theme-cyan);
    --theme-btn-active-bg: var(--theme-cyan-bright);
    --theme-btn-active-border-color: var(--theme-cyan);
    --theme-btn-active-shadow: var(--theme-cyan-light);
    --theme-btn-disabled-color: var(--theme-gray-dark);
    --theme-btn-disabled-bg: var(--theme-gray);
    --theme-btn-disabled-border-color: var(--theme-gray);
}

.btn-warning, .btn-yellow{
    --theme-btn-color: var(--theme-yellow-deep);
    --theme-btn-bg: var(--theme-yellow);
    --theme-btn-border-color: var(--theme-yellow);
    --theme-btn-hover-color: var(--theme-white);
    --theme-btn-hover-bg: var(--theme-orange);
    --theme-btn-hover-border-color: var(--theme-white);
    /*--theme-btn-focus-shadow-rgb: 34,166,194;*/
    --theme-btn-active-color: var(--theme-white);
    --theme-btn-active-bg: var(--theme-orange);
    --theme-btn-active-border-color: var(--theme-orange);
    --theme-btn-active-shadow: var(--theme-yellow);
    --theme-btn-disabled-color: var(--theme-gray-dark);
    --theme-btn-disabled-bg: var(--theme-gray);
    --theme-btn-disabled-border-color: var(--theme-gray);
}
.btn-outline-warning{
    --theme-btn-color: var(--theme-yellow-deep);
    --theme-btn-bg: var(--theme-white);
    --theme-btn-border-color: var(--theme-yellow-deep);
    --theme-btn-hover-color: var(--theme-yellow-dark);
    --theme-btn-hover-bg: var(--theme-yellow-bright);
    --theme-btn-hover-border-color: var(--theme-yellow-deep);
    /*--theme-btn-focus-shadow-rgb: 34,166,194;*/
    --theme-btn-active-color: var(--theme-yellow-dark);
    --theme-btn-active-bg: var(--theme-yellow-bright);
    --theme-btn-active-border-color: var(--theme-orange);
    --theme-btn-active-shadow: var(--theme-yellow-deep);
    --theme-btn-disabled-color: var(--theme-gray-dark);
    --theme-btn-disabled-bg: var(--theme-gray);
    --theme-btn-disabled-border-color: var(--theme-gray);
}

.btn-success, .btn-green{
    --theme-btn-color: var(--theme-white);
    --theme-btn-bg: var(--theme-green);
    --theme-btn-border-color: var(--theme-green);
    --theme-btn-hover-color: var(--theme-white);
    --theme-btn-hover-bg: var(--theme-green-deep);
    --theme-btn-hover-border-color: var(--theme-green-deep);
    /*--theme-btn-focus-shadow-rgb: 34,166,194;*/
    --theme-btn-active-color: var(--theme-white);
    --theme-btn-active-bg: var(--theme-green-dark);
    --theme-btn-active-border-color: var(--theme-green-drak);
    --theme-btn-active-shadow: var(--theme-color-deep);
    --theme-btn-disabled-color: var(--theme-gray-dark);
    --theme-btn-disabled-bg: var(--theme-gray);
    --theme-btn-disabled-border-color: var(--theme-gray);
}    
.btn-outline-success{
    --theme-btn-color: var(--theme-green-deep);
    --theme-btn-bg: var(--theme-white);
    --theme-btn-border-color: var(--theme-green-deep);
    --theme-btn-hover-color: var(--theme-green-deep);
    --theme-btn-hover-bg: var(--theme-green-bright);
    --theme-btn-hover-border-color: var(--theme-green-deep);
    /*--theme-btn-focus-shadow-rgb: 34,166,194;*/
    --theme-btn-active-color: var(--theme-green-deep);
    --theme-btn-active-bg: var(--theme-green-bright);
    --theme-btn-active-border-color: var(--theme-green-drak);
    --theme-btn-active-shadow: var(--theme-green);
    --theme-btn-disabled-color: var(--theme-gray-dark);
    --theme-btn-disabled-bg: var(--theme-gray);
    --theme-btn-disabled-border-color: var(--theme-gray);
}   

.btn-danger, .btn-red{
    --theme-btn-color: var(--theme-white);
    --theme-btn-bg: var(--theme-red);
    --theme-btn-border-color: var(--theme-red);
    --theme-btn-hover-color: var(--theme-white);
    --theme-btn-hover-bg: var(--theme-red-deep);
    --theme-btn-hover-border-color: var(--theme-red-deep);
    /*--theme-btn-focus-shadow-rgb: 34,166,194;*/
    --theme-btn-active-color: var(--theme-white);
    --theme-btn-active-bg: var(--theme-red-dark);
    --theme-btn-active-border-color: var(--theme-red-drak);
    --theme-btn-active-shadow: var(--theme-color-deep);
    --theme-btn-disabled-color: var(--theme-gray-dark);
    --theme-btn-disabled-bg: var(--theme-gray);
    --theme-btn-disabled-border-color: var(--theme-gray);
}
.btn-outline-danger{
    --theme-btn-color: var(--theme-red);
    --theme-btn-bg: var(--theme-ehite);
    --theme-btn-border-color: var(--theme-red);
    --theme-btn-hover-color: var(--theme-red-deep);
    --theme-btn-hover-bg: var(--theme-red-bright);
    --theme-btn-hover-border-color: var(--theme-red-deep);
    /*--theme-btn-focus-shadow-rgb: 34,166,194;*/
    --theme-btn-active-color: var(--theme-red-deep);
    --theme-btn-active-bg: var(--theme-red-bright);
    --theme-btn-active-border-color: var(--theme-red-deep);
    --theme-btn-active-shadow: var(--theme-red);
    --theme-btn-disabled-color: var(--theme-gray-dark);
    --theme-btn-disabled-bg: var(--theme-gray);
    --theme-btn-disabled-border-color: var(--theme-gray);
}


.btn.disabled, .btn:disabled, button.dt-button:disabled, div.dt-button:disabled, a.dt-button:disabled, input.dt-button:disabled, button.dt-button.disabled, div.dt-button.disabled, a.dt-button.disabled, input.dt-button.disabled{
    color: var(--bs-btn-disabled-color);
    background-color:var(--bs-btn-disabled-bg);
    border-color: var(--bs-btn-disabled-border-color);
}

.select2-container{ width: 100% !important}
.select2-container--default .select2-selection--multiple .select2-selection__choice{ padding-left: 1.75em; background: none; background-color: var(--theme-color-deep); border-color: var(--theme-color-deep);  }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{ margin-left: 0; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover, .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus{ background-color: rgba(0,0,0,0.3)}
.select2-dropdown{color:var(--theme-font-color);}
.select2-results__option--selectable{ padding-left: 1.5em; position: relative;}
.select2-container--default .select2-results__option--selected{background-color:var(--theme-color-bright);}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{background-color:var(--theme-color-main); }
.select2-container--default .select2-results__option--selected::before{ content: "\002714"; display:block; width: 1em; height: 1em; position: absolute; top:0; bottom:0; left:0.5em; margin: auto; pointer-events: none; line-height: 1; }
select[multiple]~.select2-container--default .select2-results__option--selected::before{ content: "×"; font-weight: bold; left:0.25em;}

.badge, .label{ font-size: 1em;}

.text-bg-secondary, .bg-secondary:not(.counter-card){background-color: var(--theme-color-bright) !important; color: var(--theme-color) !important;}
.text-bg-primary, .bg-primary:not(.counter-card), .text-bg-themecolor, .bg-themecolor:not(.counter-card){background-color: var(--theme-color-main) !important; color: var(--theme-white) !important;}
.text-bg-info, .bg-info:not(.counter-card){background-color: var(--theme-cyan) !important; color: var(--theme-white) !important;}
.text-bg-warning, .bg-warning:not(.counter-card){background-color: var(--theme-yellow) !important; color: var(--theme-yellow-dark) !important;}
.text-bg-success, .bg-success:not(.counter-card){background-color: var(--theme-green) !important; color: var(--theme-green-dark) !important;}
.text-bg-danger, .bg-danger:not(.counter-card){background-color: var(--theme-red) !important; color: var(--theme-white) !important;}
.text-bg-light, .bg-light:not(.counter-card){background-color: var(--theme-white) !important; color: var(--theme-font-color) !important;}
.text-bg-dark, .bg-dark:not(.counter-card){background-color: var(--theme-gray-dark) !important; color: var(--theme-white) !important;}

.text-bg-pink, .bg-pink{background-color: var(--theme-pink) !important; color: var(--theme-pink-dark) !important;}
.text-bg-red, .bg-red{background-color: var(--theme-red) !important; color: var(--theme-white) !important;}
.text-bg-orange, .bg-orange{background-color: var(--theme-orange) !important; color: var(--theme-white) !important;}
.text-bg-yellow, .bg-yellow{background-color: var(--theme-yellow) !important; color: var(--theme-yellow-dark) !important;}
.text-bg-green, .bg-green{background-color: var(--theme-green) !important; color: var(--theme-green-dark) !important;}
.text-bg-cyan, .bg-cyan{background-color: var(--theme-cyan) !important; color: var(--theme-white) !important;}
.text-bg-teal, .bg-teal{background-color: var(--theme-teal) !important; color: var(--theme-white) !important;}
.text-bg-blue, .bg-blue{background-color: var(--theme-blue) !important; color: var(--theme-white) !important;}
.text-bg-indigo, .bg-indigo{background-color: var(--theme-indigo) !important; color: var(--theme-white) !important;}
.text-bg-purple, .bg-purple{background-color: var(--theme-purple) !important; color: var(--theme-white) !important;}



/*Extra Variable*/

/*******************
/*Common Elements
*******************/
html{background-color:var(--theme-page-bg); font-size: var(--theme-font-size);}
body{ color:var(--theme-font-color); background-color:var(--theme-page-bg); }
body {
  font-family: "Noto Sans SC", "Microsoft JhengHei","微軟正黑體","Microsoft YaHei","微软雅黑体",PMingLiU,"新細明體",'宋体',simsun, Helvetica,Arial,sans-serif;
  font-optical-sizing: auto;
  font-size: var(--theme-font-size);
  font-weight: 300;
  font-style: normal;
}

h1, h2, h3, h4, h5, h6 { font-family: inherit;color: var(--theme-font-color-deep); font-weight: 600;}
h1{ font-size: var(--theme-font-size-huge);}
h2{ font-size: var(--theme-font-size-large); }
h3{ font-size: 1.125em; }
h4, h5, h6{ font-size: var(--theme-font-size); }
.page-wrapper{ background: none;}
.row{min-width: 100%}
.card{ background-color: var(--theme-white); border: none; box-shadow: 0 0 0.625rem #ddd5cd;}
.card .progress{background-color: #d6dbe7; }
.card .card-title{ font-size: var(--theme-font-size-large); color: var(--theme-color-main);}
.card .card-subtitle{ font-size: var(--theme-font-size); color: var(--theme-color-deep); font-weight: 600}
input, textarea, select, .form-control{ border-color: #d2d3d7;}
.form-label, .form-control-label{ color: var(--theme-color-deep); margin-bottom: 0.35em}
.form-material .form-control, .form-material .form-control{ color: #999;}
.form-material .form-control.focus, .form-material .form-control:focus{ color: #666;}
.form-material .form-control, .form-material .form-control.focus, .form-material .form-control:focus {
    background-image: -webkit-gradient(linear, left top, left bottom, from(var(--theme-color-deep)), to(var(--theme-color-deep))), -webkit-gradient(linear, left top, left bottom, from(#DDDDDD), to(#DDDDDD));
    background-image: -webkit-linear-gradient(var(--theme-color-deep), var(--theme-color-deep)), -webkit-linear-gradient(#DDDDDD, #DDDDDD);
    background-image: -o-linear-gradient(var(--theme-color-deep), var(--theme-color-deep)), -o-linear-gradient(#DDDDDD, #DDDDDD);
    background-image: linear-gradient(var(--theme-color-deep), var(--theme-color-deep)), linear-gradient(#DDDDDD, #DDDDDD);
}

.input-group .input-group-prepend .input-group-text:last-child{border-top-right-radius: 0; border-bottom-right-radius: 0; }
/*.input-group .input-group-prepend .input-group-text:last-child{border-top-right-radius: 0; border-bottom-right-radius: 0; }*/

select.form-control{ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-position: right .75rem center; background-repeat: no-repeat; background-size: 1em 0.75em;}

.badge { font-size: 1em}
.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #BBB;
  opacity: 1; /* Firefox */
}

.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #BBB;
}

.form-control::-ms-input-placeholder { /* Microsoft Edge */
  color: #BBB;
}

.form-row{ display: -ms-flex; display: flex; -ms-flex-align: stretch; align-items: stretch; -ms-flex-wrap: wrap; flex-wrap: wrap;  }
.form-row>.form-control-label{ -ms-flex: 0 1 40%; flex: 0 1 40%; max-width: 6rem; padding-right: 1rem; line-height: 1.1;}
.form-row>.form-control-label+div, .form-row>.form-control-label+input{-ms-flex: 1 1 60%; flex: 1 1 60%; }

/*input[type=password]{ letter-spacing: -0.5em;}*/
.invalid-feedback, .valid-feedback{ padding-left: 1.2em;}

.preview_pic{display:inline-block;}
.preview_pic>img{max-height: 250px; width: auto; max-width:100%;}

option{color:var(--theme-font-color)}
option:selected{background-color: var(--theme-color-deep); color:#FFF;}
option:selected:disabled, option:disabled{ background-color: #CCC; color:#999;}
a:not(.btn){color:var(--bs-link-color)}
a:not(.btn):hover, a:not(.btn):focus{ color:var(--bs-link-hover-color)}
a.link{color:var(--bs-link-color);}

a.link:hover, a.link:focus{ color:var(--theme-blue-deep);}
/*.form-control{background-color: #797e8d; color:#FFF; border: none; }*/
.form-control.readonly,.form-control[readonly]{ background-color: #f3f3f3; color:#999; cursor: text; border-color:#f3f3f3}
.custom-select{ background-color: #FFF;}

[class*=" ti-"], [class^=ti-]{line-height: inherit;}
/*******************
/*Top bar
*******************/
.topbar {
	background: var(--theme-color-main);
}
.topbar .navbar-header {
	background: var(--theme-color-dark);
}
.topbar .top-navbar .navbar-header .navbar-brand{height:73px;}
.topbar .top-navbar .navbar-header .navbar-brand .dark-logo {
	display: none;
	color: rgba(255, 255, 255, 0.8);
}
.topbar .top-navbar .navbar-header .navbar-brand .light-logo{
	display: inline-block;
	color: rgba(255, 255, 255, 0.8);
}
.topbar .navbar-light .navbar-nav .nav-item > a.nav-link {
	color: var(--theme-font-color-deep); !important;
}
.topbar .navbar-light .navbar-nav .nav-item > a.nav-link:hover, .topbar .navbar-light .navbar-nav .nav-item > a.nav-link:focus {
	color: var(--theme-font-color-dark) !important;
}
.topbar .top-navbar .navbar-header, .topbar .profile-pic{border-left:none; border-right: 1px solid var(--theme-color-dark);border:none !important; }
.topbar .top-navbar .navbar-nav>.nav-item>.nav-link{font-size:var(--theme-font-size); font-weight:400; }
.hdr-nav-bar .navbar .navbar-nav > li.active > a {
	border-color: var(--theme-color-deep); 
}

.text-dark{ color:#222 !important; }
a.text-dark:focus, a.text-dark:hover {
    color: #000!important;
}

/*******************
/*General Elements
*******************/
.lstick {
	background: var(--theme-color-deep);
}
a.link:hover, a.link:focus {
	color: var(--theme-color-deep) !important;
}
.bg-secondary{background-color:#FFFFFE !important;}
.bg-theme {
	background-color: var(--theme-color-deep) !important;
}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
	background-color: var(--theme-color-deep);
	border-color: var(--theme-color-deep);
}
.right-sidebar .rpanel-title {
	background: var(--theme-color-deep);
}
.stylish-table tbody tr:hover, .stylish-table tbody tr.active {
	border-left: 4px solid var(--theme-color-deep);
}
.text-themecolor:not(.main-title) {
	color: var(--theme-color-dark) !important;
}
.main-title{font-size:1.5rem; font-weight:400;}
.main-title.text-themecolor{color: var(--theme-font-color-dark) !important;}
.bg-themecolor{
	background-color: var(--theme-color-deep) !important;
}
.profile-tab li a.nav-link.active, .customtab li a.nav-link.active {
	border-bottom: 2px solid var(--theme-color-deep);
	color: var(--theme-color-deep);
}
.profile-tab li a.nav-link:hover, .customtab li a.nav-link:hover {
	color: var(--theme-color-deep);
}

/*******************
/*Buttons
*******************/
/*
.btn-themecolor{
	background: var(--theme-color-deep);
	color: #ffffff;
	border-color: var(--theme-color-deep);
}
.btn-themecolor:hover{
	background: var(--theme-color-dark);
	color: #ffffff;
	opacity: 1;
	border-color: #FFF;
}
.btn-group .btn-themecolor{border-width: 0 1px !important; border-color:#FFFFFE !important}
.btn-themecolor.active, .btn-themecolor:focus, .btn-themecolor.disabled.active, .btn-themecolor.disabled:focus {
	background: var(--theme-color-dark);
	color: #ffffff;
}
.btn-themecolor.disabled, .btn-themecolor.disabled:hover{
	background-color: #666; color:#ddd; border-color:#666 #FFF; cursor: not-allowed;
}

.btn-green{
	background: #4caf50;
	color: #ffffff;
	border-color: #4caf50;
}
.btn-green:hover{
	background: #009688;
	color: #ffffff;
	opacity: 1;
	border-color: #009688;
}
.btn-group .btn-green{border-width: 0 1px !important; border-color:#FFFFFE !important}
.btn-green.active, .btn-green:focus, .btn-green.disabled.active, .btn-green.disabled:focus {
	background: #009688;
	color: #ffffff;
}
.btn-green.disabled, .btn-green.disabled:hover{
	background-color: #608b6f; color:#ddd; border-color:#608b6f #FFF; cursor: not-allowed;
}
*/

.btn-group input[type=radio]:checked+label{ background-color: var(--bs-btn-active-bg);}
.btn-group>:not(.btn-check:first-child)+.btn{ border-left-color: var(--theme-white);}

.dt-paging-button{ display: -ms-flex;display: flex; -ms-flex-align: stretch !important; align-items: stretch}
.dt-paging-button>*{-ms-flex 1 1 auto;flex 1 1 auto;}
/*******************
/*sidebar navigation
*******************/
.left-sidebar{background-color:var(--theme-color-dark); color:var(--theme-color-liig);; border-right:none; }
.label-themecolor{ background: var(--theme-color-deep); color: #FFF !important; border-left-color: #FFcc00 !important; }
.label-themecolor.has-arrow::after{border-color: currentColor;}
.sidebar-nav{ background-color: var(--theme-color-dark);}
.sidebar-nav ul li{color: currentColor; line-height: 1;}
.sidebar-nav>ul{ color: var(--theme-font-color-light); }
.sidebar-nav>ul>li{ margin-top: 1px; margin-bottom: 0;}
.sidebar-nav ul li.active{color: var(--theme-color-main); line-height: 1;}
.sidebar-nav ul li.nav-small-cap{color: var(--theme-font-color-light); line-height: 1;}
.nav-small-cap hr {line-height: 5px;margin-top: 0.1rem;margin-bottom: 0; border-color:currentcolor; opacity:0.5}
.sidebar-nav ul li a{ font-size: var(--theme-font-size); font-weight: 500; line-height: 1; padding: 1em 2.25em 1em 1em}
.sidebar-nav ul li a.active, .sidebar-nav ul li a:hover, .sidebar-nav ul li.active > a, .sidebar-nav ul li.active > a+ul {
	color: var(--theme-font-color-dark); border-left-color: var(--theme-font-color-dark); background-color: var(--theme-page-bg); text-decoration: none;
}
.sidebar-nav ul li>a{color:currentColor; text-decoration: none;}
.sidebar-nav > ul > li > a> i { color: currentColor !important; vertical-align: sub; }
.sidebar-nav>ul>li>ul{ background-color: var(--theme-page-bg); margin-left:3px; padding-left:2.25em;}
.sidebar-nav>ul>li a.active, .sidebar-nav>ul>li a:hover, .sidebar-nav>ul>li.active > a{background-color: var(--theme-page-bg);}
.sidebar-nav li>ul.collapse{ padding-bottom: 10px;}

.sidebar-nav .has-arrow::after{ top:50%; right:1em; border-color:currentcolor;}

/* breadcrumb-item */
.bc-colored .breadcrumb-item, .bc-colored .breadcrumb-item a {
	margin-top: 5px;
	margin-bottom: 5px;
	color: #ffffff;
}
.bc-colored .breadcrumb-item.active, .bc-colored .breadcrumb-item a.active {
	opacity: 0.7;
	color: #ffc168;
	font-weight: 500;
}
.bc-colored .breadcrumb-item + .breadcrumb-item::before {
	content: "\e649";
	font-family: themify;
	color: rgba(255, 255, 255, 0.4);
	font-size: 11px;
}
.breadcrumb {
	padding: 0px;
	margin-bottom: 0px;
	background: transparent;
	font-size: 14px; font-weight: 500;
}

/*.preloader{ background-color: #F5F5F6; }*/
.preloader { position: fixed; top: 0; right: 0; bottom:0; left: 0; margin: auto; background-color: var(--theme-color-deep); display: flex; justify-content: center; align-items: center; z-index: 30002;}

.preloader .spinner-icon {
  font-size: 3rem;
  color: #007bff;
}

.loader__figure{ border-color:var(--theme-color-deep); display:none;}
.loader__label{ display:none;}
#jquery-loader-background{background-color: #000;}
#jquery-loader.start_load, .preloader>.loader{ background-color: transparent; border: none; padding: 0; background-image: url(../../images/loader_dot.gif); background-position: center; background-repeat: no-repeat;  width: 60px; height: 60px; }


.mini-sidebar .sidebar-nav #sidebarnav>li:hover>a, .mini-sidebar .sidebar-nav #sidebarnav>li>ul,.mini-sidebar .sidebar-nav #sidebarnav>li:hover>a, .mini-sidebar .sidebar-nav #sidebarnav>li>ul{
    background-color: var(--theme-white); color: var(--theme-font-color-dark); border: 1px currentcolor solid; border-left: 3px currentcolor solid;
}

/*******************
/* themecolor-table
*******************/
.table>:not(caption)>*>*{ color: inherit; background:none; background-color: transparent; box-shadow:none !important;}
.table td, .table th{ border-color: #dee2e6; font-size: var(--theme-font-size-small); font-weight: 400;}
.table-sm td, .table-sm th{font-size: var(--theme-font-size-small);}
.table.themecolor-table th{ font-weight: 300;}
.themecolor-table{ background-color: #FFFFFE; color:var(--theme-font-color);}
.color-table.themecolor-table thead th, .color-table.themecolor-table thead td {
	background-color: var(--theme-color-main);
	color: var(--theme-font-color-bright); font-weight: 400;
}
table.dataTable tbody th, table.dataTable tbody td{padding: 0.5em 0.635em;}
.dataTables_filter{margin-bottom: 15px;}
.dataTables_filter .qr-search-btn{margin-right: 0.5rem;}
table.dataTable thead>tr>th.dt-orderable-asc:hover, table.dataTable thead>tr>th.dt-orderable-desc:hover, table.dataTable thead>tr>td.dt-orderable-asc:hover, table.dataTable thead>tr>td.dt-orderable-desc:hover{
    background-color: var(--theme-color-deep);
}
table.dataTable thead th,table.dataTable tfoot th {
    font-weight: 500;
}
table.dataTable td>div.min-w{ margin-left: -0.635em; margin-right: -0.635em;}

table.dataTable thead>tr>th.sorting::before, table.dataTable thead>tr>th.sorting::after, thead>tr>th.sorting_asc_disabled::before, table.dataTable thead>tr>th.sorting_asc_disabled::after, table.dataTable thead>tr>th.sorting_desc_disabled::before, table.dataTable thead>tr>th.sorting_desc_disabled::after,table.dataTable thead>tr>td.sorting_asc_disabled::before, table.dataTable thead>tr>td.sorting_asc_disabled::after, table.dataTable thead>tr>td.sorting_desc_disabled::before, table.dataTable thead>tr>td.sorting_desc_disabled::after, table.dataTable thead>tr>th.sorting_desc::before,table.dataTable thead>tr>th.sorting_asc::after, table.dataTable table.dataTable thead>tr>td.sorting::before, table.dataTable thead>tr>td.sorting::after, table.dataTable thead>tr>td.sorting_asc::after, table.dataTable thead>tr>td.sorting_desc::before{opacity: 0.35;}

table.dataTable thead>tr>th.sorting_asc::before, table.dataTable thead>tr>th.sorting_desc::after, table.dataTable thead>tr>td.sorting_asc::before,table.dataTable thead>tr>td.sorting_desc::after{ opacity: 0.8;}

table.dataTable thead>tr>th.sorting::after, table.dataTable thead>tr>th.sorting_asc::after, table.dataTable thead>tr>th.sorting_desc::after, table.dataTable thead>tr>th.sorting_asc_disabled::after, table.dataTable thead>tr>th.sorting_desc_disabled::after, table.dataTable thead>tr>td.sorting::after, table.dataTable thead>tr>td.sorting_asc::after, table.dataTable thead>tr>td.sorting_desc::after, table.dataTable thead>tr>td.sorting_asc_disabled::after, table.dataTable thead>tr>td.sorting_desc_disabled::after {
    top:auto;
    bottom:25%;
    content: "" !important;
    border-width: 0.625em 0.5em 0 0.5em;
    /*opacity: .8;*/
}
table.dataTable thead>tr>th.sorting::before, table.dataTable thead>tr>th.sorting_asc::before, table.dataTable thead>tr>th.sorting_desc::before, table.dataTable thead>tr>th.sorting_asc_disabled::before, table.dataTable thead>tr>th.sorting_desc_disabled::before, table.dataTable thead>tr>td.sorting::before, table.dataTable thead>tr>td.sorting_asc::before, table.dataTable thead>tr>td.sorting_desc::before, table.dataTable thead>tr>td.sorting_asc_disabled::before, table.dataTable thead>tr>td.sorting_desc_disabled::before {
    top:25%;
    bottom:auto;
    content: "" !important;
    border-width: 0 0.5em 0.625em 0.5em;
    /*opacity: .8;*/
}

.qr-search-wrapper{ position: absolute; right:0;}
.qr-search-btn{ background-color: var(--theme-indigo-deep); padding: 1em; color: var(--theme-white) !important; text-decoration: none; padding-top: 64px; display: block; font-size: var(--theme-font-size-small); border-radius: var(--theme-radius-large); background-image: url(../../images/qr_scan.png); background-repeat: no-repeat; background-position: center 1em; max-width: 120px;}

#dtcheckin_list_wrapper .dtsb-searchBuilder{ margin-right: 135px;}

.full-color-table.full-themecolor-table, .full-color-table.full-themecolor-table {
	background-color: #f1f5fb;
	color: #222;
}
.full-color-table.full-themecolor-table thead th, .full-color-table.full-themecolor-table thead td {
	background-color: var(--theme-color-main);
	border: 0;
	color: #FFF;
}
.full-color-table.full-themecolor-table tbody th, .full-color-table.full-themecolor-table tbody td {
	border: 0;
	border-bottom: 1px #dee2e6 solid;
}

.full-color-table.full-themecolor-table a {
	color: #ff460c;
}
/*.themecolor-table.table-hover tbody tr:hover{background-color:#f1f5fb; color:var(--theme-color-bright)}*/
.themecolor-table.table-hover tbody tr:hover{background-color:var(--theme-color-bright); color:var(--theme-font-color-dark);}

.dataTables_scroll .dataTables_scrollHeadInner>table>thead>tr>th>input[type=checkbox], .dataTables_scroll .dataTables_scrollHeadInner>table>thead>tr>th>input[type=checkbox]{ margin-top: 0.25em}
table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order::before,table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order::before,table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order::before,table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order::before,table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order::before,table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order::before,table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order::before,table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order::before,table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order::after,table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order::after,table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order::after,table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order::after,table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order::after,table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order::after,table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order::after,table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order::after{opacity: 0.6;}

table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order::before,table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order::before,table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order::before,table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order::before,table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order::before,table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order::before,table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order::before,table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order::before{ margin-bottom: 2px;}

table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order::after, table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order::after, table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order::after, table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order::after, table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order::after, table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order::after, table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order::after, table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order::after{ margin-top: 2px;}

table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after, table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before, table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after{ opacity: 1;}


.table-striped tbody tr:nth-of-type(odd), .table-striped tbody tr.odd { background-color: #f5f9fa;}
.table-striped>tbody>tr:nth-of-type(odd)>*, .table-striped>tbody>tr:nth-of-type(even)>*, .table-striped>tbody>tr.odd>*, .table-striped>tbody>tr.even>*{ --bs-table-bg-type: transparent; background: none; border-bottom: none;}
.table-striped thead+tbody tr:nth-of-type(odd), .table-striped thead+tbody tr.odd{ background-color: transparent;}
.table-striped thead+tbody tr:nth-of-type(even), .table-striped thead+tbody tr.even{ background-color: #f5f9fa; }

/*
.btn-secondary{
    color: #67757c;
    background-color: #ffffff;
    border-color: #cccccc;    
}

.btn-secondary:hover, .btn-secondary.disabled:hover,
.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, 
.btn-secondary:not(:disabled):not(.disabled):focus, .btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled):hover{
    color: #67757c;
    background-color: #ffffff;
    border-color: #cccccc;
}

.dt-buttons .dt-button, .btn-primary {
	color: #fff;
	background: var(--theme-color-deep);
	border: 1px solid var(--theme-color-deep);
}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle, .btn-primary.disabled{
	color: #fff;
	background: var(--theme-color-deep);
	border: 1px solid var(--theme-color-deep);
}
*/

/*
.btn-success, .show>.btn-success.dropdown-toggle{
	color: #fff !important;
	background: #28a745 !important;
	border: 1px solid #28a745 !important;
	text-shadow: none !important;
}
.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, 
.btn-success:not(:disabled):not(.disabled):focus, .btn-success:not(:disabled):not(.disabled):active:focus,
.btn-success:not(:disabled):not(.disabled):hover{
	color: #fff !important;
	background: #30cb36 !important;
	border: 1px solid #30cb36 !important;
	opacity: 1 !important;
}

.btn-danger, .show>.btn-danger.dropdown-toggle{
	color: #fff !important;
	background: #bd2130 !important;
	border: 1px solid #bd2130 !important;
	text-shadow: none !important;
}
.btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, 
.btn-danger:not(:disabled):not(.disabled):focus, .btn-danger:not(:disabled):not(.disabled):active:focus,
.btn-danger:not(:disabled):not(.disabled):hover{
	color: #fff !important;
	background: #ff1a1a !important;
	border: 1px solid #ff1a1a !important;
	opacity: 1 !important;
}

.btn-warning, .show>.btn-warning.dropdown-toggle {
	color: #000 !important;
	background: #ffc107 !important;
	border: 1px solid #ffc107 !important;
	text-shadow: none !important;
}
.btn-warning:not(:disabled):not(.disabled).active, .btn-warning:not(:disabled):not(.disabled):active, 
.btn-warning:not(:disabled):not(.disabled):focus, .btn-warning:not(:disabled):not(.disabled):active:focus,
.btn-warning:not(:disabled):not(.disabled):hover{
	color: var(--theme-font-color) !important;
	background: #ffea31 !important;
	border: 1px solid #ffea31 !important;
	opacity: 1 !important;
}

.btn-info, .show>.btn-info.dropdown-toggle {
	color: #fff !important;
	background: #2196f3 !important;
	border: 1px solid #2196f3 !important;
	text-shadow: none !important;
}
.btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, 
.btn-info:not(:disabled):not(.disabled):focus, .btn-info:not(:disabled):not(.disabled):active:focus,
.btn-info:not(:disabled):not(.disabled):hover{
	color: #fff !important;
	background: #21baff !important;
	border: 1px solid #21baff !important;
	opacity: 1 !important;
}

.dt-buttons .dt-button:active, .btn-primary:active, button.dt-button:active:not(.disabled), div.dt-button:active:not(.disabled), a.dt-button:active:not(.disabled), input.dt-button:active:not(.disabled),
.dt-buttons .dt-button:focus, .btn-primary:focus, button.dt-button:focus:not(.disabled), div.dt-button:focus:not(.disabled), a.dt-button:focus:not(.disabled), input.dt-button:focus:not(.disabled),
.dt-buttons .dt-button:active:focus, .btn-primary:active:focus, button.dt-button:active:focus:not(.disabled), div.dt-button:active:focus:not(.disabled), a.dt-button:active:focus:not(.disabled), input.dt-button:active:focus:not(.disabled),
.dt-buttons .dt-button:hover, .btn-primary:hover, button.dt-button:hover:not(.disabled), div.dt-button:hover:not(.disabled), a.dt-button:hover:not(.disabled), input.dt-button:hover:not(.disabled),
.dt-buttons .dt-button:active:hover, .btn-primary:active:hover, button.dt-button:active:hover:not(.disabled), div.dt-button:active:hover:not(.disabled), a.dt-button:active:hover:not(.disabled), input.dt-button:active:hover:not(.disabled),
button.dt-button:active:not(.disabled):hover:not(.disabled), div.dt-button:active:not(.disabled):hover:not(.disabled), a.dt-button:active:not(.disabled):hover:not(.disabled), input.dt-button:active:not(.disabled):hover:not(.disabled)
{
	background: var(--theme-color-deep);
	border: 1px solid var(--theme-color-deep);
}
*/

table.dataTable.themecolor-table tbody tr.selected>*{ box-shadow: inset 0 0 0 9999px rgb(64 70 90 / 75%); color: currentColor;} 
table.dataTable.full-themecolor-table tbody tr.selected>*{ box-shadow: inset 0 0 0 9999px #ffefb5; color: currentColor;}

/*vtabs*/
.vtabs .tabs-vertical{border-right-color: var(--theme-color-main);}
.vtabs .tabs-vertical li .nav-link{ 
    color: var(--theme-font-color-main); background-color: var(--theme-white); border: 1px var(--theme-color-main) solid; font-weight: 400; border-right-color: var(--theme-white); position: relative;
}
.vtabs .tabs-vertical li .nav-link.active, .vtabs .tabs-vertical li .nav-link:active{
    color: var(--theme-font-color-bright); background-color: var(--theme-color-deep); border: 1px var(--theme-color-deep) solid; border-width: 1px; /*border-width: 1px 2px 1px 1px; border-right-color: var(--theme-color-dark);*/
}
.vtabs .tabs-vertical li .nav-link:hover, .vtabs .tabs-vertical li .nav-link:focus{
    color: var(--theme-font-color-bright); background-color: var(--theme-color-main); border: 1px var(--theme-color-deep) solid; border-width: 1px;
}
.vtabs .tabs-vertical li .nav-link::after{content: ""; display:block; position: absolute; top:0; bottom:0; left:-1px; margin: auto; pointer-events: none;
  width: 0;
  height: 0;
  border: 0 transparent solid;
  border-width: 0.75em 0 0.75em 0.5em;
  border-left-color: var(--theme-color-deep);
}

.vtabs .tabs-vertical li .nav-link.active::after, .vtabs .tabs-vertical li .nav-link:active::after{
  border-left-color: var(--theme-green);  
}
.vtabs .tabs-vertical li .nav-link:hover::after, .vtabs .tabs-vertical li .nav-link:focus::after{
  border-left-color: var(--theme-color-deep);
}

.vtabs .tab-content{ background-color: #FFFFFF; border-color:#dfdfde;}
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate{color:inherit}
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select{color:#666 !important;}
.dataTables_filter input:focus, .dataTables_length select:focus{
	background-image: -webkit-gradient(linear, left top, left bottom, from(var(--theme-color-deep)), to(var(--theme-color-deep))), -webkit-gradient(linear, left top, left bottom, from(#b1b8bb), to(#b1b8bb));
 background-image: -webkit-linear-gradient(var(--theme-color-deep), var(--theme-color-deep)), -webkit-linear-gradient(#b1b8bb, #b1b8bb);
 background-image: -o-linear-gradient(var(--theme-color-deep), var(--theme-color-deep)), -o-linear-gradient(#b1b8bb, #b1b8bb);
 background-image: linear-gradient(var(--theme-color-deep), var(--theme-color-deep)), linear-gradient(#b1b8bb, #b1b8bb);
}
div.dataTables_processing>div:last-child>div{background-color:var(--theme-color-dark);}

.vtabs+.form-actions{ padding-left: 150px;}

/*******************
/* dashboard
*******************/
.counter-card{position: relative; color: #FFFFFE; background-color: currentColor !important; font-size: 1rem; border-radius: 0 0.5em 0.5em; margin: 1.5em 0; min-height: 145px; 
    box-shadow: 0 5px 8px 0 #ddd5cd;}
.counter-card::after, .counter-card::before{ content: '';display: block;position: absolute;}
.counter-card::before { top: -1.45em; left: 0; width: 35%; height: 1.5em; border-radius: 0.5em 0 0; background-color: currentColor;}
.counter-card::after { top: -2.95em; left: calc(35% - 1.5em); border: 1.5em solid transparent; border-bottom-color: currentColor; }

.counter-card .card-heeader, .counter-card .card-body, .counter-card .card-footer{padding:1em; position: relative;}
.counter-card .card-heeader, .counter-card .card-body, .counter-card .card-footer, .counter-card a{color: #ddd}
.counter-card a:hover{color:#FFF;}
.counter-card .dropdown a{ color:var(--theme-font-color) !important; }
.counter-card .card-footer{text-align: right; padding: 0.25em 1em; background-color: #FCFCFC;}
.counter-card .card-footer a{ display: inline-block; margin-left: 1em; padding-left: 1em; position: relative; opacity: 0.8 }
.counter-card .card-footer a:hover{opacity: 1;}
.counter-card .card-footer a::before{content: ""; display:block; width: 0.5em; height: 0.5em; border: 1px currentColor solid; border-width: 0 1px 1px 0; transform: rotate(-45deg); position: absolute; top:0.5em; left:0; }
.counter-card .card-body{ display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-direction: row-reverse; flex-direction: row-reverse; padding: 0.5em 1em; min-height: 0; }
.counter-card.card-icon-left .card-body{ -ms-flex-direction: row; flex-direction: row;}
.counter-card .card-body>.card-icon{-ms-flex:0 0 auto; flex:0 0 auto;
/*position: absolute; top:0; right:0; bottom:0; z-index: 0; padding-right: 0.2em;*/ 
height: 6rem; min-width: 6rem; line-height: 1;  margin: auto; font-size: 5rem; opacity: 0.4;
display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center;
}
.counter-card .card-icon>i, .counter-card .card-icon>img{ -ms-flex:0 0 auto; flex:0 0 auto;}
.counter-card .card-icon img{max-width: 100%; display:block;}
.counter-card .card-chart{ -ms-flex: 1 0 auto; flex: 1 0 auto; width: 50%; overflow: visible; min-height: 0; padding: 0 15px;}
.counter-card .card-chart>canvas{max-width: 100%;}
.counter-card .card-body>.card-text{-ms-flex:1 1 auto; flex:1 1 auto; padding-right: 1em;}
.counter-card.card-icon-left .card-body>.card-text{padding-left: 1em; padding-right: 0;}

.counter-card .card-title, .counter-card .card-text{ position: relative; z-index: 1;}
.counter-card .card-title{font-size: 1.5em; font-weight: bold; color:#FFF; line-height: 1.1; margin-bottom: 0.25em}
/*.counter-card .dropdown~.card-title{margin-left: 1.5em;}*/
.counter-card .count-num{padding: 0 0.25em; font-weight: bold;}
.counter-card .item-num .count-num{font-size: 3em; padding: 0.1em; line-height: 1;}

.counter-card.bg-primary{color: var(--theme-blue);}
.counter-card.bg-primary .card-header, .counter-card.bg-primary .card-body, .counter-card.bg-primary .card-footer, .counter-card.bg-primary a{ color:#FFFFFE;}
.counter-card.bg-primary .card-footer{background-color: var(--theme-blue);}
.counter-card.bg-success{color:#4caf50;  }
.counter-card.bg-success .card-header, .counter-card.bg-success .card-body, .counter-card.bg-success .card-footer, .counter-card.bg-success a{ color:#e9ffe2;}
.counter-card.bg-success .card-footer{background-color:#4caf50;}
.counter-card.bg-danger{color:#F24C4C; }
.counter-card.bg-danger .card-header, .counter-card.bg-danger .card-body, .counter-card.bg-danger .card-footer, .counter-card.bg-danger a{ color:#ffecec;}
.counter-card.bg-danger .card-footer{background-color:#F24C4C; }
.counter-card.bg-warning{color:#EC9B3B; }
.counter-card.bg-warning .card-header, .counter-card.bg-warning .card-body, .counter-card.bg-warning .card-footer, .counter-card.bg-warning a{ color:#ffffe2;}
.counter-card.bg-warning .card-footer{background-color:#EC9B3B; }
.counter-card.bg-info{color: var(--theme-teal);  }
.counter-card.bg-info .card-header, .counter-card.bg-info .card-body, .counter-card.bg-info .card-footer, .counter-card.bg-info a{ color:#e2ffff;}
.counter-card.bg-info .card-footer{background-color: var(--theme-teal);}
.counter-card.bg-themecolor{color:var(--theme-orange);}
.counter-card.bg-themecolor .card-header, .counter-card.bg-themecolor .card-body, .counter-card.bg-themecolor .card-footer, .counter-card.bg-themecolor a{ color:#ffffe2;}
.counter-card .card-body>div{ -ms-flex: 1 1 100%;flex: 1 1 100%; }
.counter-card.bg-themecolor .card-footer{background-color:var(--theme-orange); }
.counter-card .dropdown.pull-left{position: absolute; top:-1.5em; left:0;}
/*******************
/* paginate
*******************/
.dataTables_wrapper .dataTables_paginate .paginate_button, .dataTables_wrapper .dataTables_paginate>span{ background:#FFFFFF !important; color:var(--theme-font-color-deep) !important; border-color: currentColor; margin: 0; line-height: 1.3; display: inline-block;}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{ background: var(--theme-color-main) !important; color: var(--theme-font-color-bright) !important; border-color:var(--theme-color-deep)}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
	background:var(--theme-color-main) !important;
	border-color: var(--theme-color-deep) !important;
	color:var(--theme-font-color-bright) !important;;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active{
	background:#e1e2ef !important; color:#939baf !important;
	border-color: #e1e2ef !important;
}


/*******************
/* search Builder
*******************/

div.dtsb-searchBuilder div.dtsb-group{ font-size: 0.825em;}

div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input{ 
	background-color: #FFF;
}

div.dtsb-searchBuilder button,div.dtsb-searchBuilder select,div.dtsb-searchBuilder input{
	background-color: #FFF;
}

div.dtsb-searchBuilder button.dtsb-button{
    background: none;
    background-color: var(--theme-color-deep);
    border-color: var(--theme-color-deep);
    color: #FFF;
    font-size: var(--theme-font-size-small);
}

div.dtsb-searchBuilder button.dtsb-button:hover{
	background-color: var(--theme-color-main) !important;
	border-color:var(--theme-color-main) !important;
}

div.dtsb-searchBuilder div.dtsb-logicContainer{
	background: none;
	background-color: #FFF;
	color:inherit;
}

div.dtsb-searchBuilder div.dtsb-logicContainer button{
background: none;

background-color: var(--theme-color-dark);
	color:#FFF;
}
div.dtsb-searchBuilder div.dtsb-logicContainer button:hover{
	background-color: var(--theme-color-main) !important;
}

div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-condition option.dtsb-option,div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-data option.dtsb-option,div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-value option.dtsb-option{
	background-color: #FFF;
}

div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria{ padding: 0.5em; border: 1px dashed #CCC; background-color: #f0f2ff; margin-bottom: 2px;}

.dtsb-add::before{ content: "\f067"; display:inline-block; margin-right: 0.5em;
font-family: "Font Awesome 5 Free";
font-weight: bold;
}

.dtsb-clearAll::before{
	content: "\f2ed"; display:inline-block; margin-right: 0.5em;
font-family: "Font Awesome 5 Free";
font-weight: bold;
}
.dtsb-delete{position: relative}

.dtsb-delete::before{
content: "\f00d"; display:block;
font-family: "Font Awesome 5 Free";
font-weight: bold; font-size: 1rem;
position: absolute; top:0; right:0; bottom:0; left:0; margin: auto; width: 1.5em; height: 1.5em; line-height: 1.5; background-color: var(--theme-color-deep);
}
.dtsb-delete:hover::before{ background-color: var(--theme-color-dark);}


.dtsb-searchBuilder .dtsb-right, .dtsb-searchBuilder .dtsb-left{ position: relative;}
.dtsb-searchBuilder .dtsb-right::before, .dtsb-searchBuilder .dtsb-left::before{ display:block;
content: "\f1e0"; font-family: "Font Awesome 5 Free";
font-weight: bold; font-size: 0.8rem;
position: absolute; top:1px; right:0; bottom:0; left:1px; margin: auto; width: 1em; height: 1em; line-height: 1; background-color: var(--theme-color-deep);
}

.dtsb-searchBuilder .dtsb-right::before{ transform: scaleX(-1);}
.dtsb-searchBuilder .dtsb-left::before{/*transform: rotate(-90deg)*/ }
.dtsb-searchBuilder .dtsb-right:hover::before, .dtsb-searchBuilder .dtsb-left:hover::before{background-color: var(--theme-color-dark);}

.dt-container>.bottom{ display: -ms-flex;display: flex;}
.dt-container>.bottom .dt-paging{ margin-right: 0; margin-left: auto}

.footer{ background-color: var(--theme-page-bg); color:var(--theme-font-color);border-top: none; }



.switch-off-after span, .edit-switch-on span{ display:inline; position: relative;}
.switch-off-after span::after{ content: ""; display: inline-block; width: 2.4em; height: 1.2em; background-color: #FFF; border: 1px #797e93 solid; border-radius: 0.6em; vertical-align: middle;
-webkit-box-shadow: inset -1.2em 0px 0px 0px #797e93;
box-shadow: inset -1.2em 0px 0px 0px #797e93;
}
.switch-on-after span::after{ content: ""; display: inline-block; width: 2.4em; height: 1.2em; background-color: #FFF; border: 1px #6ac5d3 solid; border-radius: 0.6em; vertical-align: middle;
-webkit-box-shadow: inset 1.2em 0px 0px 0px #6ac5d3; 
box-shadow: inset 1.2em 0px 0px 0px #6ac5d3;
}

.left-sidebar .ps__rail-y{ right: auto !important; left: 0 !important;}

div[data-toggle="buttons"]>label{opacity: 1}
div[data-toggle="buttons"]>label.active{opacity: 1;}
.btn-group .btn-themecolor{ border-color: var(--theme-color-main) !important;}

.btn-choice>.btn:first-of-type{border-top-left-radius: var(--theme-radius-main); border-bottom-left-radius: var(--theme-radius-main);}
select.mob-tabnav{ background-color: var(--theme-color-main); color: var(--theme-white);}
select.mob-tabnav:focus {
    color: var(--theme-white);
    background-color: var(--theme-color-light);
    border-color: var(--theme-color-main);
    outline: 0;
    box-shadow: none;
}

select.mob-tabnav::after{ content: ""; display:block; position: absolute; right:1em; width: 1em; height: 1em; background-color: #FFF;}

/*
.btn-group>.btn-group:not(:last-child)>.btn, .btn-group>.btn.dropdown-toggle-split:last-child, .btn-group>.btn:last-child:not(.dropdown-toggle){ border-top-left-radius: 0; border-bottom-left-radius: 0; }
.btn-group>.btn-group:not(:first-child)>.btn, .btn-group>.btn:nth-child(n+3), .btn-group>:not(.btn-check)+.btn{ border-radius: 0.5rem;}
*/

.login-sidebar .login-box{background-color:var(--theme-page-bg);}
.login-logo-light{display:none;}
.login-logo-dark{display:block;}
.login-logo{max-width:60px; margin-bottom:5px;}
.login-logo-text{max-width:170px;}

.login-register{ background-color: var(--theme-color-deep); background-size: cover; background-repeat: no-repeat; background-position: center bottom;}
.login-register>.card{ overflow-y: auto;}
.login-register .form-group{margin-bottom: 0.75rem;}
#area__header_cht, #area__header2_cht{display:none !important;}
#btnlogo{border:none; box-shadow: none !important;}

.inter-content{}
.modal-body{}
.inter-content .mainTitle{display:none;}
.inter-content .block-wrapper{ margin: 0; padding: 0;}
.inter-content .card{ box-shadow: none;}
.inter-content .card-body{ padding: 0; margin: 0;}

.fa.bg-plus, .far.bg-plus, .fas.bg-plus, .fab.bg-plus{background-color: #FFF; }
.rounded-icon{border-radius: 50%; overflow: hidden;}
/*******************
/* Single Blocks
*******************/
.checkin_person_card{ width: 96%; max-width: 680px;}
.checkin_person_card{}
.checkin_person_card .card{background-color: var(--theme-color-bright); background-image: url("../../images/background/art_bg.png"); background-repeat: no-repeat; background-size: 100% auto; padding-top: 160px; }
.checkin_person_card .card-body{background-color: var(--theme-white); position: relative; padding-top: 76px; }
.checkin_person_card .card-body::before{ content: ""; display: block; width: 96px; height: 96px; border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23FFF' d='M136.6 138.8a64 64 0 0 0-43.3 41.4L0 460l14.7 14.7 150.1-150.1c-3-6.3-4.8-13.2-4.8-20.6 0-26.5 21.5-48 48-48s48 21.5 48 48-21.5 48-48 48c-7.4 0-14.3-1.8-20.6-4.8L37.3 497.3 52 512l279.9-93.3a64 64 0 0 0 41.4-43.3L416 224 288 96l-151.4 42.8zm361.3-64.6l-60.1-60.1c-18.8-18.8-49.2-18.8-67.9 0l-56.6 56.6 128 128 56.6-56.6c18.8-18.8 18.8-49.2 0-67.9z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 82%; background-position: right top; background-color: var(--theme-color-deep); box-shadow: 0 0 10px var(--theme-color-main); border:0.25em var(--theme-white) solid; position: absolute; top:-48px; right:0; left:0; margin: auto;}
.checkin_person_card .card-subtitle{ font-size: var(--theme-font-size-large); text-align: center;}
.checkin_person_card .card-body .table{width: auto; min-width: 244px; margin: 1em auto 2em;}
.checkin_person_card .th-label{ font-weight: 600; color: var(--theme-color-main);}

.item-title>a, a.item-title{ color: inherit !important;}

.v-code-wrapper .form-group{margin-bottom: 0.25em;}

.alert h3{margin-bottom: 0;}
.mini-lang-switch{ text-align: right;}
.mini-lang-switch a{ text-decoration: none; color:inherit}
.mini-lang-switch a.active{color:var(--theme-color-deep);}

.login-register .igt-main-edit-button{ position: absolute; top:1rem; left:1rem}

.reg-from-style{}
.reg-from-style .form-title{ color:var(--theme-color-deep);}
.reg-from-style .form-title+.form-subtitle{ color:var(--theme-gray-deep);}

.session-info{ display: -ms-flex; display: flex; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: nowrap; flex-wrap: nowrap; line-height: 1;}
.session-info>.session-left{-ms-flex: 0 0 auto;flex: 0 0 auto; padding-right: 2em}
.session-info .session-title{font-size: 1.5rem; font-weight: bold; color:var(--theme-color-deep); }
.session-info>.session-right{-ms-flex: 1 1 auto;flex: 1 1 auto; display: -ms-flex; display: flex; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; line-height: 1.5}
/*.session-info>.session-datetime{ display: -ms-flex; display: flex; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap;}*/
.session-right>.session-date, .session-right>.session-time{ -ms-flex:0 1 auto; flex:0 1 auto; width: 10em; padding-right: 1em; margin-bottom: 0.25em}
.session-right>.session-value{ -ms-flex:1 1 auto; flex:1 1 auto; width: 100%; margin-bottom: 0.25em}

.session-right>.session-date, .session-right>.session-time, .session-right>.session-value{ position: relative; padding-left: 1.2em}
.session-right>.session-date>.icon, .session-right>.session-time>.icon, .session-right>.session-value>.icon{ position: absolute; left:0; color:var(--theme-color-deep);}
.session-right  strong{color:var(--theme-color-deep);}
.session-right>.session-other{-ms-flex:0 1 auto; flex:0 1 auto; padding-right: 1em;}

.quiz-item{margin-bottom: 3rem;}
.quiz-question{ font-size: 1.25rem; margin-bottom: 0.5em;}
.quiz-question{display: -ms-flex; display: flex; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
.quiz-question .question-num{ font-size: 1.25em; width: 1.5em; height: 1.5em; line-height: 0.8; border-radius: 50%; overflow: hidden; text-align: center; padding: 0.25em; text-align: center; background-color: var(--theme-color-main); color:var(--theme-white); margin-right: 0.5em}
.quiz-question .question-text{font-size: 1.25em; font-weight: 600; }

.not-correct .question-num{ background-color: var(--theme-red);}
.not-correct .question-text{color: var(--theme-red-deep);}
.not-correct .form-check-box input[type=checkbox]:checked+label, .not-correct .form-check-box input[type=radio]:checked+label, .not-correct .form-check-box-lg input[type=checkbox]:checked+label, .not-correct .form-check-box-lg input[type=radio]:checked+label{ border-color: var(--theme-red); outline: 2px var(--theme-red) solid; background-color: var(--theme-red-bright); color:var(--theme-red-deep); }

.not-correct .form-check-box input[type=checkbox]:checked+label::before, .not-correct .form-check-box input[type=radio]:checked+label::before, .not-correct .form-check-box-lg input[type=checkbox]:checked+label::before, .not-correct .form-check-box-lg input[type=radio]:checked+label::before{ background-color:var(--theme-red-deep); border-color:var(--theme-red-deep); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 352 512'%3E%3Cpath fill='%23fff' d='M242.7 256l100.1-100.1c12.3-12.3 12.3-32.2 0-44.5l-22.2-22.2c-12.3-12.3-32.2-12.3-44.5 0L176 189.3 75.9 89.2c-12.3-12.3-32.2-12.3-44.5 0L9.2 111.5c-12.3 12.3-12.3 32.2 0 44.5l100.1 100L9.2 356.1c-12.3 12.3-12.3 32.2 0 44.5l22.2 22.2c12.3 12.3 32.2 12.3 44.5 0L176 322.7l100.1 100.1c12.3 12.3 32.2 12.3 44.5 0l22.2-22.2c12.3-12.3 12.3-32.2 0-44.5L242.7 256z'/%3E%3C/svg%3E");}

.text-bold{ font-weight: 600;}

@media (min-width: 992px) {
#warning_msg, #warning_msg ul{ margin-bottom: 0;}
}

@media (min-width: 768px) {
    .mini-sidebar .sidebar-nav #sidebarnav>li>ul { top: calc(100% - 1px); padding-bottom: 0; }
    .mini-sidebar .sidebar-nav #sidebarnav>li>a{ border: 1px transparent solid; border-left-width: 3px;}
}

@media (max-width:768px){
    .vtabs+.form-actions{ padding-left: 0;}
}

@media (max-width:767px){
.dt-ex-case-top{ float: none;}   
.qr-search-wrapper{ position: relative; right:auto;}
#dtcheckin_list_wrapper .dtsb-searchBuilder{ margin-right: 0;}
}

@media (max-height:720px){
    .login-register{ display: block !important;}
    .login-register>div{ margin-right: auto; margin-left: auto; }
    .login-register>.card{ max-height:none;}
    .mini-lang-switch{ order:0;}
}

.form.p-t-20{padding-top:0}
.tab-content{padding-top:0.75em !important;}