/*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-dark-rgb: 30, 41, 59;
    
    --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);
    
    --theme-nav-dark-bg: #0f172a;
    
}
/*
.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: #14161a;
    
    --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: #d7edff;
    --theme-color-light: #8dcafc;
    --theme-color-main: #016dd8;
    --theme-color-deep: #004884;
    --theme-color-dark: #1c3e51;
    
	--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, .dt-buttons .dt-button, 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: 0.6em;
    --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: 0.6em;
    --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: 0.6em;
    --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: 0.6em;
    --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;}

*[class*="btn-outline-"]{ background-color: var(--theme-white); border: 1px currentColor solid;}

.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-ghost{
    --theme-btn-color: var(--theme-gray-bright);
    --theme-btn-bg: transparent;
    --theme-btn-border-color: var(--theme-gray-bright);
    --theme-btn-hover-color: var(--theme-white);
    --theme-btn-hover-bg: transparent;
    --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-white);
    --theme-btn-active-border-color: var(--theme-white);
    --theme-btn-active-shadow: var(--theme-white);
    --theme-btn-disabled-color: var(--theme-gray);
    --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;
}

.bg-dark{background-color: var(--theme-nav-dark-bg) !important;}


.navbar.fixed-top+div{margin-top: 75px; }

.navbar-brand-text{display:none;}
.inner-head{ background-color: var(--theme-color-light); background-image: url("../image/wesite_images/mg_005.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; }
.navbar-brand-front{ height: 4.6875rem; width: 100%; max-width: 15.625rem; padding: 0.75rem 1.5rem 0.75rem 0;}
.navbar-brand-front .logo-img { display: inline-block; max-width: 100%; margin-right: 10px;}
.hero-sction-homepage{ background-color: var(--theme-color-deep); background-image: url("../image/wesite_images/home_banner_01b.jpg"); background-size: 100% auto; background-position: 84% top; background-repeat: no-repeat; background-attachment: fixed; color:#FFF !important; padding: 10rem 3rem; }
.hero-sction-homepage h1{color:#FFF;}


.backdrop-full{ background-color: transparent; background-image: url("../image/wesite_images/member_fullscreen_bg01.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; }
.backdrop-full>div{ min-height: 85vh; padding-top: 3rem; padding-bottom: 3rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;}
.backdrop-full>div>div{-ms-flex: 0 0 auto;flex: 0 0 auto;}


/*.backdrop-full system-membership*/
.system-membership{  background-color: #012b55; background-image: url("../image/wesite_images/member_fullscreen_bg01.jpg");}
/*
.backdrop-full system-membership>div{ min-height: 85vh; padding-top: 3rem; padding-bottom: 3rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;}
.backdrop-full system-membership>div>div{-ms-flex: 0 0 auto;flex: 0 0 auto;}
*/
.system-404{background-color: #012b55; background-image: url("../image/wesite_images/member_fullscreen_bg01_dark.jpg");}


@media(max-width:1024px){
    .hero-sction-homepage{ padding: 5rem 3rem; background-size: unset;}
}