:root{
    --theme-font-color-bright: #FFFFFF;
    --theme-font-color-light: #c4c8d6;
    --theme-font-color: #656873;
    --theme-font-color-deep: #3c3f4a;
    --theme-font-color-dark: #171921;
    --theme-font-family: "Noto Sans SC", "Microsoft JhengHei","微軟正黑體","Microsoft YaHei","微软雅黑体",PMingLiU,"新細明體",'宋体',simsun, Helvetica,Arial,sans-serif;
    --theme-font-size-mini: 14px;
    --theme-font-size-small: 16px;
    --theme-font-size: 18px;
    --theme-font-size-large: 24px;
    --theme-font-size-huge: 36px;

    --theme-radius-mini: 4px;
    --theme-radius-small: 6px;
    --theme-radius-main: 8px;
    --theme-radius-large: 12px;
    --theme-radius-huge: 16px;
        
    --theme-color-bright: #b5c1fd;
    --theme-color-light: #558ce9;
    --theme-color-main: #164eaf;
    --theme-color-deep: #313883;
    --theme-color-dark: #003275;
    
	--theme-page-bg: #FFFFFF;

    --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: #ff83a5;
    --theme-red: #c64d5a;
    --theme-orange: #a6671c ;
    --theme-yellow: #ffdd10;
    --theme-green: #adcd60;
    --theme-teal: #55cad3;
    --theme-cyan: #307897;
    --theme-blue: #61bdff;
    --theme-indigo: #1A6CEF;
    --theme-purple: #9b70f4;
  
    --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;
}

html{font-size: var(--theme-font-size);}
/* base style*/
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:focus, .btn-primary:not(:disabled):not(.disabled):active:hover, .btn-primary:not(:disabled):not(.disabled):focus, .btn-primary:not(:disabled):not(.disabled):focus:hover, .btn-primary:not(:disabled):not(.disabled):hover, .btn-theme:not(:disabled):not(.disabled):active, .btn-theme:not(:disabled):not(.disabled):active:focus, .btn-theme:not(:disabled):not(.disabled):active:hover, .btn-theme:not(:disabled):not(.disabled):focus, .btn-theme:not(:disabled):not(.disabled):focus:hover, .btn-theme:not(:disabled):not(.disabled):hover, .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;
}

.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; }
.text-bg-info, .bg-info{background-color: var(--theme-cyan) !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; }
.text-bg-light, .bg-light{ background-color: var(--theme-font-color) !important;}
.text-bg-dark, .bg-dark{background-color: var(--theme-gray-dark) !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; }
.text-bg-orange, .bg-orange{background-color: var(--theme-orange) !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; }
.text-bg-teal, .bg-teal{background-color: var(--theme-teal) !important; }
.text-bg-blue, .bg-blue{background-color: var(--theme-blue) !important; }
.text-bg-indigo, .bg-indigo{background-color: var(--theme-indigo) !important; }
.text-bg-purple, .bg-purple{background-color: var(--theme-purple) !important; }

/*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: var(--theme-font-family);
  font-optical-sizing: auto;
  font-size: var(--theme-font-size);
  font-weight: 400;
  font-style: normal;
}
h1, h2, h3, h4, h5, h6 { font-family: inherit; color: var(--theme-color-deep); font-weight: 500;}
h1{ font-size: var(--theme-font-size-huge);}
h2{ font-size: var(--theme-font-size-large); }
h3{ font-size: 1.5rem; }
h4, h5, h6{ font-size: var(--theme-font-size); }

table, .table{color:var(--theme-font-color);}
a, a>img, .btn, button, .trans-effect, .hover-effect,  .trans-effect a, .hover-effect a, .trans-effect img, .hover-effect img{
transition:0.5s background-color, 0.5s color, 0.5s border, 0.5s padding, 0.5s margin, 0.5s top, 0.5s bottom, 0.5s right, 0.5s left, 0.5s opacity;
-webkit-transition:0.5s background-color, 0.5s color, 0.5s border, 0.5s padding, 0.5s margin, 0.5s top, 0.5s bottom, 0.5s right, 0.5s left, 0.5s opacity;
-moz-transition:0.5s background-color, 0.5s color, 0.5s border, 0.5s padding, 0.5s margin, 0.5s top, 0.5s bottom, 0.5s right, 0.5s left, 0.5s opacity;
-o-transition:0.5s background-color, 0.5s color, 0.5s border, 0.5s padding, 0.5s margin, 0.5s top, 0.5s bottom, 0.5s right, 0.5s left, 0.5s opacity;
-ms-transition:0.5s background-color, 0.5s color, 0.5s border, 0.5s padding, 0.5s margin, 0.5s top, 0.5s bottom, 0.5s right, 0.5s left, 0.5s opacity;
}
/*a.anchor{display:block !important; width: 100%; height: 1px; overflow: hidden; background-color: #F00;}*/
pre.nl2br{line-height: 1.85;}

.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: var(--theme-font-color-bright);}
.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; }
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}
input::placeholder, .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--theme-font-color-light) !important;
  opacity: 1; /* Firefox */
}
input:-ms-input-placeholder, .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--theme-font-color-light) !important;
}
input::-ms-input-placeholder, .form-control::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--theme-font-color-light) !important;
}
.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%; }
.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-main)}
a:not(.btn):hover, a:not(.btn):focus{ color:var(--theme-blue-light); }
a.link{color:var(--theme-colo-rmain);}
a.link:hover, a.link:focus{ color:var(--theme-blue-deep);}
a:not(.btn):not(.dashboard-card):focus{ box-shadow:none !important;}
.form-control.readonly,.form-control[readonly]{ background-color: #f3f3f3; color:#6e6e6e; cursor: text; border-color:#f3f3f3}
.custom-select{ background-color: #FFF;}
[class*=" ti-"], [class^=ti-]{line-height: inherit;}

.btn-rounded{ border-radius: 3em;}

h2, .widget_heading>h2{position: relative; padding-bottom: 0.66em; margin-bottom: 0.66em; }
h2::after, .widget_heading>h2::after{content: ""; display: block; width: 2.5em; height: 0.16em; position: absolute; bottom:0; left:0; background-color: #7292c9; border-radius: var(--theme-radius-mini);}

/*styles*/
#page_body{ color:var(--theme-font-color) !important;}
/*header*/
header .container, footer .container{ width: calc(100% - 60px) !important;}
.widget_page_header{padding-top:136px;}
.sticky-wrapper{top:0;}
.site-navbar{height:136px;}
.site-navbar .site-navbar-middle, .site-navbar .site-navbar-before, .site-navbar .site-navbar-after{padding:1rem 0;}
.site-navbar .logo-wrapper img{ max-height: 100px;}
.lang-switchs-wrapper{margin-bottom: 1rem;}
.lang-switchs-wrapper>a.lang-switch{ border: 2px var(--theme-color-main) solid; font-size:var(--theme-font-size-small) !important; padding:0.5em 1em; line-height:1; margin-left:0; color:var(--theme-color-main) !important;}
.lang-switchs-wrapper>a.lang-switch:first-child{border-radius:2rem 0 0 2rem; padding-left:1.25em;}
.lang-switchs-wrapper>a.lang-switch:last-child{border-radius:0 2rem 2rem 0; padding-right:1.25em;}
.lang-switchs-wrapper>a.lang-switch.lang-active{ background-color:var(--theme-color-main); color:var(--theme-font-color-bright) !important;}
.lang-switchs-wrapper>a.lang-switchs-wrapper>a{margin-left: 0;}
.site-navbar .site-navbar-wrapper{-ms-flex-align: end; align-items: flex-end;}
.site-navbar .site-navigation a{ color:var(--theme-font-color) !important;}
.site-navbar .site-navigation li.level-1>a{ font-size:var(--theme-font-size-large); }
.site-navbar .site-navigation a:hover, .site-navbar .site-navigation a:focus{ color:var(--theme-color-main) !important;background-color:#FFF; }
.site-navigation>ul .has-children .dropdown-menu{min-width: 100%;}
.site-navigation>ul .has-children .dropdown-menu>li>a{ text-align: center;}
.nav-extra{ margin-bottom: 0 !important;}

/*slideshow*/
.tns-nav{display:none;}
.core-carousels .item-title{ display:none;}
.home-banner-slideshow{}
.home-banner-slideshow .widget_image_slideshow{position: relative; }
.home-banner-slideshow .widget_image_slideshow::after{ content: ""; display:block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='145' viewBox='0 0 1920 145.714'%3E%3Cpath d='M960 134.714C523.059 134.714 149.678 78.845 0 0v145.714h1920V0c-149.678 78.845-523.059 134.714-960 134.714z' fill='%23FFF'/%3E%3C/svg%3E"); background-size: cover; background-repeat: no-repeat; background-position: center bottom; pointer-events: none; position: absolute; right:0; bottom:3.32rem; left:0; max-height: 145px; height: 10vw; }
.home-banner-slideshow .tns-outer{padding-bottom: 3.35rem !important;}
.home-banner-slideshow .tns-nav{display: block !important; height: 3.35rem;}
.home-banner-slideshow .tns-nav>button{ display:inline-block !important;}
.home-banner-slideshow .tns-nav > [aria-controls]{ width: 1rem; height: 1rem; background-color: #CCC;}
.home-banner-slideshow .tns-nav > .tns-nav-active{ background-color: var(--theme-color-main);}
.home-banner-slideshow .tns-csm-tools{ display: none !important;}
.home-banner-slideshow .tns-item{position: relative;}
.home-banner-slideshow .item-intro{position: absolute; top:0; right:0; bottom:0; left:0; margin: auto; }
.home-banner-slideshow .item-intro .container{position: absolute; top:0; right:0; bottom:0; left:0; margin: auto;}
.home-banner-slideshow .slide-intro-box{ position: absolute; top:0; bottom:0; left:0; margin: auto; max-width: 33%; 
    display: -ms-flex; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content:center; -ms-flex-pack:end; justify-content:flex-end; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.home-banner-slideshow .slide-intro-box>div{ -ms-flex:0 0 auto; flex:0 0 auto; max-width: 100%; max-width: 400px; text-align: left;}
.home-banner-slideshow .slide-intro-box>div:not(.item-title){ background-color: rgba(255,255,255,0.8); -webkit-backdrop-filter: blur(4px);  backdrop-filter: blur(4px);  padding: 1.55rem; border-radius: var(--theme-radius-large); box-shadow: 6px 6px 16px 0px rgba(45, 54, 75, 0.15); margin: 1rem 0; line-height: 1.85; max-width: 350px; }
.home-banner-slideshow .item-title{ display:block; font-size: 3.34rem; font-weight: bold; color:var(--theme-color-main); }
html[lang=en-GB] .home-banner-slideshow .item-title{font-size: 2rem; }
html[lang=en-GB] .home-banner-slideshow .slide-intro-box>div:not(.item-title){ line-height: 1.2}
.home-showcase img{ border-radius: var(--theme-radius-huge);}
.home-activities{}
.home-activities.item-list .item{ position: relative; display:block; padding: 0 60px 60px; background-color: transparent;}
.home-activities.item-list .item>.item-thumb{position: relative; top:auto; right:auto; bottom:auto; left: auto; margin: auto; padding-top: 80%;}
.home-activities.item-list .item>.item-thumb>a{position: absolute; top:0; right:0; bottom:0; left:0; margin: auto;}
.home-activities.item-list.image-back .item>.item-thumb a{-ms-flex-align: center; align-items: center;-ms-flex-line-pack: center; align-content: center;}
.home-activities.item-list.image-back .item>.item-thumb a>img{max-width:100%; height:auto; -ms-flex: 1 1 100%; flex: 1 1 100%;}
.home-activities.item-list .item>.item-intro{ position: absolute; top:auto; right:auto; bottom:0; left:0; margin: auto; max-width: 480px; background-color: rgba(32, 70, 116,0.9) !important; box-shadow: 0px 4px 16px 0px rgba(22, 69, 113, 0.35); color:#FFF; padding: 1rem; border-radius: var(--theme-radius-mini); }
.home-activities.item-list .item>.item-intro a{color:#FFF !important;}
.home-activities.item-list .item-date{font-size: 1rem; padding: 0; background-color: transparent; margin-left: 0; margin-right: auto; border: none;}
.home-activities.item-list .item-title{font-size: 1.55rem; color:#FFF;  text-align: left; font-weight: 400; padding-left: 0; padding-right: 0; }
.home-activities.item-list .text-right{ margin-right: 0; margin-left: auto; text-align: right; color:#FFF !important; padding-left: 0; padding-right: 0;}

.home-news-list{}
.home-news-list.item-list .grid_col{margin: 0.8rem 0;}
.home-news-list.item-list .item{ padding: 0.75em 2em 0.75em 1em; background-color: #FFF; box-shadow: 0px 4px 8px 0px rgba(114, 134, 197, 0.25); border-radius: var(--theme-radius-large);  overflow:hidden; position: relative;
    -ms-flex-align: start;align-items: flex-start;-ms-flex-line-pack: start; align-content: flex-start;
}
.home-news-list.item-list .item::after{ content:"\f054"; font-family: "Font Awesome 5 Free"; font-weight: bold; font-size:var(--theme-font-size-large); color:#FFF; position: absolute; top:0; right:0; bottom:0; width: 1.5em; background-color: var(--theme-color-bright); display: -ms-flex; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content:center; -ms-flex-pack:center; justify-content:center;}
.home-news-list.item-list .item>.item-thumb{ -ms-flex: 0 0 auto; flex: 0 0 auto; width: 128px; height: 128px; overflow: hidden;}
/*.home-news-list.item-list .item>.item-thumb>a{position: absolute; top:0; right:0; bottom:0; right:0; margin: auto; overflow: hidden}*/
.home-news-list.item-list .item>.item-thumb a {display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; width: 100%; height: 100%; /*position: absolute; top: 0; right: 0; bottom: 0; right: 0; margin: auto; */}
.home-news-list.item-list .item>.item-thumb img{max-width: 100%; -ms-flex: 1 1 auto;flex: 1 1 auto;}
.home-news-list.item-list .item>.item-intro{ padding-top: 0;}
.home-news-list.item-list .item-date{ padding: 0.5em 0.75em; background-color:var(--theme-color-light);}
.home-news-list.item-list .item-title{ font-size: var(--theme-font-size-large); font-weight: normal; color: var(--theme-font-color); padding: 0; line-height: 1.5; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
.home-news-list.item-list .item-title>a:hover, .home-news-list.item-list .item-title>a:not(.btn):focus{color: var(--theme-color-main);}

.ajax-products-cate-wrap-home{}
.ajax-products-cate-home{ border:none; font-size:var(--theme-font-size-large); padding: 0.5em; border-radius: 16px 16px 0 0; background-color: #FFF; color:var(--theme-color-main); margin-left: 0.5em; }
.ajax-products-cate-home:first-child(){margin-left: 0;}
.ajax-products-cate-home.active{ background-color:var(--theme-color-main); color:#FFF; }
.ajax-products-cate-wrap{ max-width: 300px;}
.ajax-products-cate{ display: block; background-color: #c4e1ff; color:var(--theme-color-main); padding: 1em 2em 1em 1em; margin-top: 0.2em; position: relative; border-radius: 4px 2rem 2rem 4px; margin-right: 1em;}
.ajax-products-cate::after{ content:"\f054"; font-family: "Font Awesome 5 Free"; font-weight: bold; /*font-size:var(--theme-font-size-large);*/ color: currentColor; position: absolute; top:0; right:1em; bottom:0; width: 1em; display: -ms-flex; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content:center; -ms-flex-pack:center; justify-content:center}
.ajax-products-cate:not(.active):hover, .ajax-products-cate:not(.active):focus{color:var(--theme-color-main); margin-right: 0;}
.ajax-products-cate.active{ background-color:var(--theme-color-main); color:#FFF;  margin-right: 0;}
.products-group.item-list{}
.products-group.item-list .item{ background-color: #FFF; box-shadow: 0px 10px 20px 0px rgba(22, 78, 175, 0.35); }
.products-group.item-list .item-thumb{ padding-top: 100%; position: relative;}
.products-group.item-list .item-thumb>a{ display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: stretch; align-items: stretch; -ms-flex-line-pack: stretch; align-content: stretch; position: absolute; top:0; right:0; bottom:0; right:0; margin: auto; overflow: hidden; }
.products-group.item-list .item-thumb img{/*max-width: none; -ms-flex: 1 1 auto;flex: 1 1 auto;*/
  max-width: 100%; -ms-flex: 0 0 auto; flex: 0 0 auto; height: auto !important; max-height: none !important;
}
.products-group.item-list .item-title{ text-align: center !important; font-size: var(--theme-font-size); font-weight: normal;}
.products-group.item-list .item-title>a{ color: var(--theme-font-color); }
.products-group.item-list .item-title>a:hover, .products-group.item-list .item-title>a:not(.btn):focus{ color: var(--theme-color-main); }
.products-page h2::after{ left:0; right:0; margin: auto;}
.product-photo-wrap{max-width: 580px; margin: 0 auto;}
.product-photo-wrap .item-thumb img{display:block;}
.product-info{}
table.product-info tr, table.product-info th, table.product-info td{ border: none !important;}
.info-label{ display:inline-block; min-width: 120px; border: 2px currentColor solid; border-radius: var(--theme-radius-large); color: var(--theme-color-main); padding: 0.2em 0.5em; text-align: center; margin-right: 1rem; margin-bottom: 0.5rem; }
html[lang=en-GB] .info-label{min-width: 150px;}
table.product-info th{padding-left: 0;}
table.product-info td{padding-right: 0;}

.about-button-group{}
.about-button-group img{border-radius:var(--theme-radius-large); }

.coming-soon-box, .blog-list .list-no-results{ font-size: var(--theme-font-size-huge); color: var(--theme-color-light); text-align: center; background-color: #e1f6ff; padding: 1em 0.5em; }

.blog-side-mini{}
.blog-side-mini.item-list .item{-ms-flex-wrap: nowrap; flex-wrap: nowrap;}
.blog-side-mini.item-list .item>.item-thumb{ -ms-flex: 0 0 auto; flex: 0 0 auto; width: 64px; height: 64px; overflow: hidden;}
.blog-side-mini.item-list .item>.item-thumb a {display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; width: 100%; height: 100%;}
.blog-side-mini.item-list .item>.item-thumb img{max-width: 100%; -ms-flex: 1 1 auto;flex: 1 1 auto;}
.blog-side-mini.item-list .item-date{ background-color: transparent; padding: 0; color: var(--theme-color-main); border: none; line-height: 1; margin-bottom: 0.4rem; }
.blog-side-mini.item-list .item-title{ font-size: var(--theme-font-size-smsall); font-weight: normal; color: var(--theme-font-color); padding: 0; line-height: 1.25; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
.blog-side-mini.item-list .item-title>a:hover, .blog-side-mini.item-list .item-title>a:not(.btn):focus{color: var(--theme-color-main);}

.blog-side-mini .list-no-results{ text-align: center; background-color: #f5f5f5; padding: 0.5em;}



/*footer*/
.layout_row.footer{font-size:var(--theme-font-size-small); }
.layout_row.footer .container>.row, .layout_row.footer .container>.row-flex{margin-left: -15px; margin-right: -15px;}
.layout_row.footer .footer-upper{ padding: 1.5rem 0 3rem;background-image:url(../../images/footer_bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center bottom;}
.footer-logo{ max-height: 4.5rem;}
ul.footer-address{padding-left: 1.3rem; list-style: none; line-height: 1.5; padding-top: 0.8em;}
ul.footer-address li{ margin-top: 1em; display: -ms-flex; display: flex; -ms-flex-align: start; align-items: flex-start;-ms-flex-pack:start; justify-content:flex-start; -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
ul.footer-address em{ display:inline-block; width: 5em; font-style: normal; -ms-flex: 0 0 auto; flex: 0 0 auto; margin-top: -0.45em;}
ul.footer-address em .color-fa{ display:inline-block; width: 1em; text-align: center; color:var(--theme-color-main); }

html[lang=en-GB] ul.footer-address em{ width: 7em;}

#footer_menu_wrapper, #footer_menu_wrapper ul{ padding:0; list-style:none; }
#footer_menu_wrapper{ display: -ms-flex; display: flex; -ms-flex-align: start; align-items: flex-start;-ms-flex-pack:end; justify-content:flex-end; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 2.7rem; margin-bottom: 0;}
#footer_menu_wrapper>li{ -ms-flex: 0 1 15%; flex: 0 1 15%; }
#footer_menu_wrapper a{ color:var(--theme-font-color); line-height: 1.85; font-weight: 500; }
#footer_menu_wrapper>li.level-1>a{ font-size:var(--theme-font-size-large); color:var(--theme-color-main) !important; }
#footer_menu_0_0{ display:none;}
.footer-copyright{ background-color: var(--theme-color-main); color:var(--theme-font-color-bright); font-size: var(--theme-font-size-small); padding: 1rem 0;text-align: right;}
.footer-copyright a{color:var(--theme-font-color-bright);}

html[lang=en-GB] #footer_menu_wrapper>li.level-1>a{ font-size: 1rem; }


/*dide menu for mobile*/
.mob-menu-toggle{color:var(--theme-color-main);}
.side-vert-menu .side-vert-menu-header, .side-vert-menu .side-vert-menu-header .mob-menu-toggle{ background-color: var(--theme-color-main); color:var(--theme-font-color-bright);}
.side-vert-menu .side-vert-menu-header{background-image:url(../../../filedata/upload/website/logo/logo_white.png); background-repeat: no-repeat; background-size: auto 48px; background-position: 15px 7px;}
html[lang=en-GB] .side-vert-menu .side-vert-menu-header{background-image:url(../../../filedata/upload/website/logo/logo_white_eng.png);}

.text-group-block{display:inline-block;}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition(height .35s ease);
}

/*res*/
@media (max-width: 1279px) {
    #footer_menu_wrapper>li {
    -ms-flex: 1 1 15%;
    flex: 1 1 15%;
    }
}

@media (max-width: 1216px) {
html[lang=en-GB] .ajax-products-cate-home{ font-size: var(--theme-font-size); }
}

@media (min-width: 1200px) {
    .container{
        width: 95%;
        max-width: 1600px;
    }
    .container-fluid{
       width: 100%;
       max-width: none; 
    }
    .container .container, .container .container-fluid, .container-fluid .container-fluid, .container-fluid .container{width: 100%;}
}

@media (max-width: 1199px) {
    .site-navbar .logo-wrapper img { height: 4rem; }
    /*.home-banner-slideshow .slide-intro-box{max-width: 260px;}*/
    .home-banner-slideshow .slide-intro-box>div{max-width: 260px;}
    .home-banner-slideshow .item-title{ font-size: 2rem; max-width: 260px;}
    html[lang=en-GB] .home-banner-slideshow .item-title{ font-size: 1.5rem !important;}
    .home-banner-slideshow .slide-intro-box>div:not(.item-title){line-height: 1.5; padding: 1rem; max-width: 260px}
    html[lang=en-GB] .home-banner-slideshow .slide-intro-box>div:not(.item-title){ font-size: 0.9rem !important;}
}

@media (max-width: 1170px) {
    .site-navbar .logo-wrapper img { height: 4rem; }
    .footer-logo{ max-height:3rem;}
    ul.footer-address{ padding-left: 0.7rem;}
    #footer_menu_wrapper>li.level-1>a { font-size: var(--theme-font-size);}
}
@media (min-width: 1024px) {
    .site-navbar .site-navigation li.level-1>a{font-size: var(--theme-font-size); }
    html[lang=en-GB] .site-navbar .site-navigation li.level-1>a{font-size: var(--theme-font-size-small); }
}
@media (max-width: 1023px) {
    .site-navbar{height: auto;}
    .widget_page_header{padding-top: 92px;}
    .site-navbar .site-navbar-middle, .site-navbar .site-navbar-before, .site-navbar .site-navbar-after{padding: 10px 0;}
    .side-menu-wrapper{padding-bottom: 1rem;}
    #footer_menu_wrapper{-ms-flex-pack:start; justify-content:flex-start; padding-top: 1.5em; margin-top: 1em;}
    #footer_menu_wrapper>li {
        -ms-flex: 1 1 50%;
        flex: 1 1 50%;
        margin-bottom: 1em;
    }
    .footer-copyright{text-align: center;}
}

@media (max-width: 991px) {
    .home-banner-slideshow .slide-intro-box>div{max-width: 13rem; font-size: 16px;}
    .home-banner-slideshow .item-title{ font-size: 34px !important; max-width: 100%; }
    .home-banner-slideshow .slide-intro-box>div:not(.item-title){line-height: 1.25; padding: 1em; max-width: 100%; margin-top: 0.5em; margin-bottom: 0.5em; }
    html[lang=en-GB] .home-banner-slideshow .item-title{ font-size: 1.2rem !important;}
    html[lang=en-GB] .home-banner-slideshow .slide-intro-box>div:not(.item-title){ font-size: 0.8rem !important;}
    
    #layout_column_Ti1JU0F5hw, #layout_column_jKiFukhtxi, #layout_column_su6RPgKYNl,#layout_column_lxMgmiNq7E, #layout_column_Fegs1qKMZG{ width: 100% !important;}
    html[lang=en-GB] .ajax-products-cate-home{ width: calc(50% - 12px); margin-bottom: 1rem; border-radius: 16px; }
    #dynamic_list_x4mft2FwaM, #dynamic_list_x4mft2FwaM{padding-left: 0 !important;}
    .ajax-products-cate-wrap{ max-width: 100%;}
    .ajax-products-cate{ width: 100%;}
}

@media (max-width: 767px) {
    
    header .container, footer .container{ width: 100% !important;}
    .item-list .item-title, .item-list .item-text{ padding-left: 0; padding-right: 0;}
    
    .home-banner-slideshow .item-intro, .home-banner-slideshow .item-intro .container, .home-banner-slideshow .slide-intro-box{ position: relative; top:auto; right:auto; bottom:auto; left: auto; margin: auto;}
    .home-banner-slideshow .item-intro{ background-color: var(--theme-teal-bright);}
    .home-banner-slideshow .slide-intro-box{ max-width: 100%; padding: 1em 1.75em; -ms-flex-pack: center; justify-content: center;}
  
     .home-news-list.item-list .item>.item-thumb{display:block; !important}
     .home-news-list.item-list .item>.item-thumb img{-ms-flex:0 0 auto; flex:0 0 auto; height:auto !important; max-height:none !important;}
  
    .home-activities.item-list .item{ padding: 0; box-shadow: 0px 4px 16px 0px rgba(114, 134, 197, 0.25);}
    .home-activities.item-list .item>.item-intro{ position: relative; top:auto; right:auto; bottom:auto; left: auto; margin: auto; max-width: none; width: 100%; border-radius: 0 !important; box-shadow: none; padding: 1.25em !important;}
    .home-news-list.item-list .item{ padding: 0.75em 1em 2em; box-shadow: 0px 4px 16px 0px rgba(22, 69, 113, 0.35); }
    .home-news-list.item-list .item::after{ top:auto; left:0; content: "\f078"; width: 100%; height: 1.5em; }
    .home-news-list.item-list .item>.item-thumb{ width: 100%; padding-top:100%; position: relative; display:block;}
    .home-news-list.item-list .item>.item-thumb a{ position: absolute; top:0; right:0; bottom:0; left:0; margin: auto;}
    .home-news-list.item-list .item>.item-intro{ padding: 1em 0 !important;}
    
    .ajax-products-cate-home{ width: calc(50% - 12px); margin-bottom: 1rem; border-radius: 16px; }
    
    .blog-side-mini.item-list .item{ -ms-flex-direction: row !important; flex-direction: row !important;}
    .blog-side-mini.item-list .item>.item-thumb{ width: 64px !important;}
    
    #footer_menu_wrapper{ border-top: 1px var(--theme-font-color-light) solid; }
    #footer_menu_wrapper>li {
        -ms-flex: 0 1 33%;
        flex: 0 1 33%;
    }
}

 @media (max-width: 575px) {
    .container, .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .container>.row, .container-fluid>.row{
        margin-left: -1rem !important;
        margin-right: -1rem !important;
    }
     
     html[lang=en-GB] .ajax-products-cate-home{width: 100%;  margin-left: 0;} 
     
    #footer_menu_wrapper>li {
        -ms-flex: 1 1 100%;
        flex: 1 1 100%;
    } 
     .footer-nav-item.level-1{ display: -ms-flex; display: flex; -ms-flex-align: start; align-items: flex-start;-ms-flex-pack:end; justify-content:flex-end; -ms-flex-wrap: nowrap; flex-wrap: nowrap;}
     #footer_menu_wrapper>li.level-1>a{ font-size: var(--theme-font-size); -ms-flex: 0 0 6em;flex: 0 0 5em;}
     #footer_menu_wrapper>li.level-1>ul.footer-nav-subgroup{ -ms-flex: 0 0 calc(100% - 6em);flex: 0 0 calc(100% - 6em);}
     #footer_menu_wrapper>li.level-1>ul>li{ display:inline-block; margin-left: 1em;}
}

 @media (max-width: 425px) {
     .ajax-products-cate-home{ width: 100%; margin-left: 0; }
     }

/*cms design*/
.design-web .site-navbar{ position:relative;}
.design-web .site-navigation>ul{ height:45px; overflow-y:hidden;}
.design-web .lang-switchs-wrapper>a.lang-switch:first-child{background-color:var(--theme-color-main); color:var(--theme-font-color-bright) !important; background-repeat: no-repeat; text-align: center; color:#1ca3db}
.design-web.editor-desktop{}
.design-web .product-photo-wrap{ padding-top: calc(100% - 1.5em); background-image: url(../../../images/placeholder/scale_1w1h.png); background-size: 100%;}

.design-web.editor-mobile .site-navbar-middle{display:none;}
.design-web.editor-mobile .site-navbar{ background-image:url(../../images/mobile_header_preview.png); background-repeat:no-repeat; background-size:cover; height:78px;}
.design-web.editor-mobile .row, .design-web.editor-mobile .row-flex{}
.design-web.editor-mobile .col-xs-12, .design-web.editor-mobile .col-sm-12{ -ms-flex: 0 0 100% !important; flex: 0 0 100% !important; max-width: 100% !important;}