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

input::placeholder { color: #6e7482 !important; }

/*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: var(--theme-blue);
    --bs-link-hover-color: var(--theme-blue-dark);
}
/*
.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: #717682;
    --theme-font-color-light: #606a7d;
    --theme-font-color: #384666;
    --theme-font-color-deep: #2b364e;
    --theme-font-color-dark: #0b1a3c;
    
    --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: 20px;
    --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: #cff4f8;
    --theme-color-light: #9fe4e9;
    --theme-color-main: #3c7b7f;
    --theme-color-deep: #007790;
    --theme-color-dark: #0c5273;
    
	--theme-page-bg: #eef3fa;

    --theme-pink: #ff83a5;
    --theme-red: #c64d5a ; /* #e95c6a /*#dc3545;*/
    --theme-orange: #a6671c ;
    --theme-yellow: #ffdd10;
    --theme-green: #adcd60; /*#c6e200;*/
    --theme-teal: #55cad3;
    --theme-cyan: #307897;
    --theme-blue: #61bdff;
    --theme-indigo: #1A6CEF;
    --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: #384910;
    --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: #eaeef2;
    --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 2px var(--theme-color-main), 0 0 0 2px var(--theme-color-main);

}
.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), button.dt-button:focus:not(.disabled), div.dt-button:focus:not(.disabled), a.dt-button:focus:not(.disabled), input.dt-button:focus:not(.disabled) {
	box-shadow: 0 0 0 2px var(--theme-color-main), 0 0 0 2px var(--theme-color-main);
}

.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-main);
    --theme-btn-border-color: var(--theme-color-main);
    --theme-btn-hover-color: var(--theme-white);
    --theme-btn-hover-bg: var(--theme-color-deep);
    --theme-btn-hover-border-color: var(--theme-color-deep);
    /*--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-outline-primary.not-group{ border-left: 1px var(--theme-btn-border-color) solid !important; border-radius: var(--theme-radius-main) !important; }

.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);
}


.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 {
	background-color: var(--bs-btn-hover-bg) !important;
    border-color: var(--bs-btn-hover-border-color) !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 { 
	background-color: var(--theme-color-deep) !important;
    border-color: var(--theme-color-dark) !important;
}

.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{background-color: var(--theme-color-bright) !important; color: var(--theme-color) !important;}
.text-bg-primary, .bg-primary, .text-bg-themecolor, .bg-themecolor{background-color: var(--theme-color-main) !important; color: var(--theme-white) !important;}
.text-bg-info, .bg-info{background-color: var(--theme-cyan) !important; color: var(--theme-white) !important;}
.text-bg-warning, .bg-warning{background-color: var(--theme-yellow) !important; color: var(--theme-yellow-dark) !important;}
.text-bg-success, .bg-success{background-color: var(--theme-green) !important; color: var(--theme-green-dark) !important;}
.text-bg-danger, .bg-danger{background-color: var(--theme-red) !important; color: var(--theme-white) !important;}
.text-bg-light, .bg-light{background-color: var(--theme-white) !important; color: var(--theme-font-color) !important;}
.text-bg-dark, .bg-dark{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;
}

@media(max-width:767px){
body.show-sidebar{ overflow: hidden;}    
body.show-sidebar .page-wrapper::after{content: ""; display:block; position: absolute; top:0; right:0; bottom:0; left:0; background-color:rgba(0,0,0,0.5); margin: auto}
}

h1, h2, h3, h4, h5, h6 { font-family: inherit;color: var(--theme-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 #bdc8d7;}
.card .progress{background-color: #d6dbe7; margin: 5px 0; }
.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, .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple{ border-color: #000033;}
.form-label, .form-control-label{ color: var(--theme-color-deep); margin-bottom: 0.35em}
.form-material .form-control, .form-material .form-control{ color: #6e6e6e;}
.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-control:focus { box-shadow: 0 0 0 .25rem var(--theme-color-main); }

.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;}

input[type=checkbox].invalid-feedback, input[type=radio].invalid-feedback{ display: inline-block !important; width: auto !important;}


.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:#6e6e6e;}
a:not(.btn){color:var(--theme-color-deep)}
a:not(.btn):hover, a:not(.btn):focus{ color:var(--theme-blue-deep); }
a:not(.btn):not(.dashboard-card):focus { box-shadow: 0 0 0 2px var(--theme-color-main), 0 0 0 2px var(--theme-color-main);}
a.link{color:var(--theme-color-deep);}
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:#6e6e6e; cursor: text; border-color:#f3f3f3;}
#general_wrpper .form-control.readonly,#general_wrpper .form-control[readonly]{ background-color: #808080; color:#F3F3F3; cursor: text; border-color:#808080}
.custom-select{ background-color: #FFF;}

[class*=" ti-"], [class^=ti-]{line-height: inherit;}

.topbar a:not(.btn):focus { box-shadow: 0 0 0 2px #000; }
/*******************
/*Top bar
*******************/
.topbar {
	background: var(--theme-color-main);
}
.topbar .navbar-header {
	background: var(--theme-color-main);
}
.topbar .top-navbar { height: 100%; }
.topbar .top-navbar .navbar-header { -ms-flex-align: normal; align-items: normal; padding-left: 0; }
.topbar .top-navbar .navbar-header .navbar-brand, .topbar .top-navbar .navbar-header .navbar-brand img { max-height: 100%; display: block; }
.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); height: 100%;
}
.topbar .navbar-light .navbar-nav .nav-item > a.nav-link {
	color: #ffffff !important; 
}
.topbar .navbar-light .navbar-nav .nav-item > a.nav-link:hover, .topbar .navbar-light .navbar-nav .nav-item > a.nav-link:focus {
	color: rgba(255, 255, 255, 0.8) !important;
}
.topbar .top-navbar .navbar-header, .topbar .profile-pic{border-left:none; border-right: 1px solid var(--theme-color-main); }
.hdr-nav-bar .navbar .navbar-nav > li.active > a {
	border-color: var(--theme-color-deep);
}


.topbar .top-navbar .navbar-header .navbar-brand>b{
    display:none !important;
}
.topbar .top-navbar .navbar-header .navbar-brand>b+span{
    display:block !important;
    /*width: 240px;*/
    /*width: 210px;*/
}

@media (min-width: 768px) {
    .navbar-header {
        width: auto;
    }
}


.top-navbar .navbar-header{ width: auto !important; height: 100%;}
.topbar .top-navbar .navbar-header .navbar-brand img { max-width: initial; }

.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 {
	color: var(--theme-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:#FEFEFF; color:#939baf; 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: #FEFEFF;}
.sidebar-nav ul li{color: var(--theme-font-color-light); line-height: 1;}
.sidebar-nav>ul>li{ margin-top: 2px; margin-bottom: 2px;}
.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-bright); line-height: 1;  padding-left: 15px;}
.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 {
	color: var(--theme-color-deep); border-left-color: var(--theme-color-deep); background-color: #FEFEFF; text-decoration: none;
							
}
.sidebar-nav ul li>a{color:currentColor; text-decoration: none; position: relative;}
.sidebar-nav > ul > li > a> i { color: currentColor !important; vertical-align: sub; }
.sidebar-nav>ul>li>ul{ background-color: var(--theme-page-bg);}

.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;}

@media (min-width: 768px) {
	.mini-sidebar .sidebar-nav>ul>li>a .label { position: absolute; top: 0; right: 0; }
}
@media (max-width: 1169px) {
	.sidebar-nav>ul>li>a .label { position: relative; padding: 3px 10px; top: 0;}
}

.nav-small-cap hr {
	line-height: 5px;
	margin-top: 0.1rem;
	margin-bottom: 0;
}
.sidebar-nav .has-arrow::after{ top:50%; right:1em;}

/* 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: 12px;
}

/*.preloader{ background-color: #F5F5F6; }*/
.preloader { position: fixed; top: 0; right: 0; bottom:0; left: 0; margin: auto; background-color: #8f9295; 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);}
#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_bk.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); /*border: 1px var(--theme-color-main) solid; border-left: 3px var(--theme-color-main) 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); 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-deep);
	color: #FFF; font-weight: 500;
}
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: 1;}

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: 1; color: var(--theme-yellow); }

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{ right:0; }
.qr-search-btn{ margin-left: auto;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-dark); color:var(--theme-color-bright);}

.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: #208636 !important;
	border: 1px solid #208636 !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: #1978c4 !important;
	border: 1px solid #1978c4 !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-color-deep); 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-white); 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-color-dark); background-color: var(--theme-color-light); border: 1px var(--theme-color-main) 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; font-weight: bold; border-radius: 0 0.5em 0.5em; margin: 1.5em 0; min-height: 145px; 
    box-shadow: 0 5px 8px 0 #d6dbe7;}
.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-header{background-color: transparent; border: none; padding: 0;}
.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:#4fb3fd;}
.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: #4fb3fd;}
.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:#6ac5d3;  }
.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: #6ac5d3;}
.counter-card.bg-themecolor{color:var(--theme-color-main);}
.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-color-main); }
.counter-card .dropdown.pull-left{position: absolute; top:-1.5em; left:0;}

.card.dashboard-c { padding: 1.2rem 0; }
.card.dashboard .card-title, .card.dashboard-c .card-subtitle { font-size: var(--theme-font-size-large); color: var(--theme-color-deep); }
/*******************
/* paginate
*******************/
.dataTables_wrapper .dataTables_paginate .paginate_button, .dataTables_wrapper .dataTables_paginate>span{ background:#FFFFFF !important; color:var(--theme-color-dark) !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:#FFFFFF !important; border-color:var(--theme-color-main)}
.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-main) !important;
	color:var(--theme-white) !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; }
.footer-logo{ max-height: 50px; width: auto;}
.footer .txt-eng{padding-left: 0.25em;}
.footer .logo-wrapper{ margin-right: 1em; white-space: nowrap;}

@media (max-width: 1023px) {
    .footer .d-flex {
        display: flex !important;
		flex-wrap: wrap !important;
        justify-content: flex-start !important;
    }
	.footer .copyright-in-card, .footer .footer-logo { margin-bottom: 20px; }
}

.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: #c4e5dc; background-size: 400px auto; background-repeat: repeat-x; background-position: center bottom;}
.login-register>.card{ max-height: 750px; overflow-y: auto;}
.login-register .form-group{margin-bottom: 0.75rem;}
#area__header_cht, #area__header2_cht{display:none !important;}
.login-register .login-box .block-wrapper img { width: 100%; }

@media (max-width: 1023px) {
	.login-register .login-box .row .logo-wrapper { margin: 15px 0 !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, .checkin_personal_card .card, .checkin_log .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, .checkin_personal_card .card-body, .checkin_log .card-body{background-color: var(--theme-white); position: relative; padding-top: 76px; }
.checkin_person_card .card-body::before, .checkin_personal_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, .checkin_personal_card .card-subtitle{ font-size: var(--theme-font-size-large); text-align: center;}
.checkin_person_card .card-body .table, .checkin_personal_card .card-body .table{width: auto; min-width: 244px; margin: 1em auto 2em;}
.checkin_person_card .th-label, .checkin_personal_card .th-label, .checkin_log .th-label{ font-weight: 600; color: var(--theme-color-main);}

.checkin-panel .info-panel { margin-bottom: 35px; }
.checkin-panel .info-panel h3 { font-size: 32px; line-height: 1.4; }
.checkin-panel .info-panel h5 {font-size: 24px; line-height: 1;}
.checkin_log .card {padding-top: 10px;}
.checkin_log .card-body { padding-top: 30px; }

.checkin-panel .action-buttons button{ margin: 15px 20px; width: calc(50% - 42px); }

.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; padding: 3px 6px; }
.mini-lang-switch a.active, .mini-lang-switch a:focus {color:var(--theme-color-deep); text-decoration: underline;}
.mini-lang-switch a:focus { box-shadow: 0 0 0 2px var(--theme-color-main), 0 0 0 2px var(--theme-color-main); }

.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: wrap; flex-wrap: wrap; line-height: 1;}
.session-info>.session-left{-ms-flex: 0 0 auto;flex: 0 0 auto; padding-right: 2em; max-width: 200px;}
.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; max-width: calc(100% - 200px);}
/*.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-left>.session-other{margin-top: 0.5em;}
.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; min-height: 1.25em;}
.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_form{ -webkit-user-select: none; -ms-user-select: none;  user-select: none; }

.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; }

.form-locked{ pointer-events: none !important}

.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;}

.form-check-label-displayonly{
  position: relative;
  z-index: 1;
  margin-bottom: 0;
  cursor: pointer;
  font-weight: normal;
  text-align: left;
  min-width: 0;
  display: inline-block;
  padding-left: 1.75em;
  padding: 1em 1em 1em 3em;
  border: 1px #ced4da solid;
  border-radius: 0.5em;
  background-color: #FFF;
  outline: 2px transparent solid;
  line-height: 1.5;
  margin-bottom: 0.5em;  
}

.form-check-label-displayonly::before{
content: "";
font-family: Arial, Helvetica, sans-serif;    
background-size: 1em 1em;
background-repeat: no-repeat;
background-position: center;
display: block;
text-align: center;
vertical-align: middle;
color: #FFF;
background-color: #FFF;
border: 1px #ced4da solid;
border-radius: 2px;
visibility: visible;
cursor: pointer;
position: absolute;
width: 1.5em;
height: 1.5em;
line-height: 1.5;
top: 1em;
left: 1em;
border-radius: 50%;
}
.form-check-label-displayonly.unable{padding-left: 1em; cursor: not-allowed;}
.form-check-label-displayonly.unable::before{ content: none !important;}

.form-check-label-displayonly.active{
border-color: var(--s-color);
  outline: 2px var(--s-color) solid;
}

.form-check-label-displayonly.active::before{
  content: "";
  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='M173.9 439.4L7.5 273c-10-10-10-26.2 0-36.2l36.2-36.2c10-10 26.2-10 36.2 0L192 312.7 432.1 72.6c10-10 26.2-10 36.2 0l36.2 36.2c10 10 10 26.2 0 36.2L210.1 439.4c-10 10-26.2 10-36.2 0z'/%3E%3C/svg%3E");
  background-color: var(--s-color);
  border-color: var(--s-color);
}


.dataTables_filter{ display: -ms-flex; display: flex; -ms-flex-align: stretch; align-items:stretch; -ms-flex-wrap: nowrap; flex-wrap: nowrap;  }
.dataTables_filter>label{ -ms-flex: 1 1 auto; flex: 1 1 auto; width: calc(100% - 77px);}
.dataTables_filter>label>input{ max-width: calc(100% - 55px); }
.dataTables_filter>button{ -ms-flex: 0 0 auto; flex: 0 0 auto; width: 36px; height: 36px; padding: 0 !important; text-align: center;}

@media (max-width: 1440px) and (min-width: 1200px) {
    .session-info>.session-left, .session-info>.session-right{ max-width: 100%; width: 100%;}
    .session-info>.session-right{ margin-top: 0.5em;}
}


@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:800px){
    .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;}
}

@media (max-width: 575px) {
	.checkin-panel .action-buttons button { margin: 15px 0; width: 100%; }
}


/* Other General */
.label-warning { background-color: var(--theme-orange); }
.has-warning .col-form-label, .has-warning .custom-control, .has-warning .form-check-label, .has-warning .form-control-feedback, .has-warning .form-control-label { color: var(--bs-form-invalid-color); }
.has-warning .form-control { border-color: var(--bs-form-invalid-color);}

/* Profile - QR Code Modal */
.profile_qrcode { text-align: center; }
.profile_qrcode img { margin-bottom: 35px; }
@media (max-width: 767px) {
	.modal-open #main-wrapper>aside+div.page-wrapper{z-index: auto;}
}

/* First Time Login */
.login-register .countdown-bar { display: none; }

.text-muted { color: #6e7482 !important; font-weight: normal; }
.text-warning { color: #8d6a00 !important; }
#frm__loginform .form-group button:focus { box-shadow: 0 0 0 .25rem var(--theme-color-main); border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0; }
#frm__loginform .form-group input:not(#login):not(#pwd):focus { box-shadow: 0 0 0 .25rem var(--theme-color-main); }

/* Focus Effect */
a:focus .counter-card .card-body { box-shadow: 0 0 0 2px var(--theme-color-main); border-radius: 0.5em; z-index: 1; }

/* Mobile Mini Sidebar Menu*/
.fix-sidebar:not(.mini-sidebar) .left-sidebar:before { content: ""; display: block; background-color: rgba(0,0,0,0.75); position: absolute; top: 0; left: 0; }

#main-wrapper>header { z-index: 60; }

@media (max-width: 520px) {
	.card.d-countdown .card-inner { display: block; }
	.card.d-countdown .countdown { margin-bottom: 20px; justify-content: center; }
	.card.d-countdown .countdown:after { content: none; }
	.card.d-countdown .post-text { margin-left: 0; }
}

/* Mobile Overlay When Call Menu */
.behind-overlay { pointer-events: none; }

@media (max-width: 767px) {
	#main-wrapper>aside { z-index: 5; box-shadow: 0 0 13px 0px var(--theme-color-main); }
	.footer { position: relative; }
}

/* Input Field */
.form-group label.form-control-label { font-weight: bold; }

/* Calendar */
.fc .fc-toolbar-title { font-family: inherit; color: var(--theme-color-deep); font-weight: 600; }
.fc .fc-day-other .fc-daygrid-day-top { opacity: 0.78; }
.fc .fc-day-other .fc-daygrid-day-frame { background-color: #fafafa; }

a:not(.btn):not(.dashboard-card).pop-event-item:focus, button.mfp-close:focus { box-shadow: 0 0 0 2px var(--theme-color-dark), 0 0 0 2px var(--theme-color-dark); }

.fc .mm_txt{ padding: 2px !important;}

.fc.mini-block .fc-day:not(.fc-col-header-cell){height: 94px;}

@media (max-width: 767px) {
    .fc .fc-day:not(.fc-col-header-cell){height: 94px;}
}

/*.mm_txt:focus{background-color: #F00;}*/

/* Overall Layout */
.page-wrapper { display: flex; flex-direction: column; padding-bottom: 0; }
.container-fluid { margin-bottom: auto; }
.footer { position: relative; }

@media (max-width: 767px) {
	.pull-right { text-align: center; }
}


/* Modal Confirmation */
button.swal2-confirm { background-color: #99331E !important; }
button.swal2-cancel { background-color: #50595E !important; }

/* Topbar */
.topbar .top-navbar .navbar-nav>.nav-item>.nav-link .langswitcher { font-size: 18px; }
#language-menu { min-width: auto; }


/* Checkbox */
.form-check-input[type=checkbox] { background-color: #000033; }
.form-check-input:focus { box-shadow: 0 0 0 .25rem rgba(13, 110, 253, 1); }

/* Close Button */
.btn-close { opacity: 1; }
.btn-close:focus { box-shadow: 0 0 0 .25rem rgba(13, 110, 253, 1); }