label:after{content:""; clear:both;}

/* input's initial css */
input[type=email], input[type=number], input[type=password], input[type=tel], input[type=text], input[type=time], input[type=date], input[type=month], input[type=search], input[type=week] {height:35px; border-radius: 5px; border:1px solid #dedede; text-indent:7px;}
input[type=checkbox], input[type=radio] {vertical-align: middle; width:20px; height:20px; margin: auto 3px auto auto;}
input[type=checkbox] + a {vertical-align:middle; margin-left: 3px;margin-top: auto;margin-bottom: auto; font-weight: normal;}
input[type=checkbox] + label, input[type=radio] + label {vertical-align:middle; margin-left: 3px;margin-top: auto;margin-bottom: auto; font-weight: normal;/*min-width: 70px;*/}
input[type=email], input[type=number], input[type=password], input[type=text] { padding: 0; width:100%; }
input[type=number] { text-align: right; padding-right: 7px; }
input[type=time], input[type=date], input[type=month], input[type=week], input[type=tel] { padding: 0; width:120px; }
input:focus { border: 1px solid black; }
select { height: 35px; padding: 0; border:1px solid #dedede; border-radius: .25rem; text-indent:7px; width:100%; }
textarea { padding: .375rem .3rem;border:1px solid #dedede; width:100%; }
a {color: blue;}
a:hover, a:visited {text-decoration: none;}
div {vertical-align: middle;}
:disabled { background-color: lightgray;}

div.guidedInputBox { position: relative; }
div.guidedInputBox input { width: 100%; border: 0; border-radius: 5px; outline: none; color: black; font-size: 1em; transition: 0.5s; }
div.guidedInputBox span { position: absolute; left: 0; padding: 10px; pointer-events: none; font-size: 1em; color: rgba(0,0,0,0.5); text-transform: uppercase; }
div.guidedInputBox input:valid ~ span, div.guidedInputBox input:focus ~ span { color: white; transform: translateX(10px) translateY(-4px); font-size: 0.65em; padding: 0 10px; background: darkslategray; border-left: 1px solid white; border-right: 1px solid white; letter-spacing: 0.2em; }
div.guidedInputBox input:valid, div.guidedInputBox input:focus { border: 1px solid white; }

/* Table */
table.ex_table01 { border-top: 2px solid darkblue; border-bottom: 1px solid darkblue; }
table.ex_table01 > tbody > tr > th { background-color: lightgray; padding:7px 10px; font-size: medium; font-weight: normal; }
table.ex_table01 > tbody > tr > td { background-color: white; padding:7px 10px; font-size: medium; font-weight: normal; }

table.ex-table101 > thead > tr > th, table.ex-table101 > tbody > tr > th { padding-left: 5px; }

/* Tab */
.tab_block { display: flex; flex-wrap: wrap;}
.tab_each { display: none; order: 1; width: 100%;}
.tab_block > label {background-color: #f0f0f0; color: black; padding: 17px 10px; width: auto; text-align: center; cursor: pointer; border-right: 1px solid #eee; border-bottom: 1px solid #eee; transition: all 600ms ease-in-out; border-top-left-radius: 10px; border-top-right-radius: 10px;}
.tab_block > input[type="radio"] {display: none;}
.tab_block > input[type="radio"] + label:hover {background-color: lightgray;}
.tab_block > input[type="radio"]:checked + label {background: dodgerblue; color: white; border-right: 1px solid transparent; border-bottom: 1px solid transparent; }
.tab_block > input[type="radio"]:checked + label + .tab_each {display: block;}

/* Tab (old version) */
.tab {padding:0; background-color: #f1f1f1; border-top-left-radius: 10px; border-top-right-radius: 10px; display:inline-block;}
.tab li {background-color: inherit;float: left;border: none;outline: none;cursor: pointer;padding: 14px 16px;transition: 0.3s;font-size: 17px; border-top-left-radius: 10px; border-top-right-radius: 10px;}
.tab li:hover {background-color: #ddd;}
.tab li.active {background-color: #4285f4;color: white;}
.tabcontent {display: none;/*padding: 6px 0;*/border-top: none;}

/* Hide Number Arrow */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Chrome, Safari, Edge, Opera */
input[type=number] {-moz-appearance: textfield;} /* Firefox */

/* Top Menu */
ul.top-menu {position: absolute; right: 66px; top: 64px;}
ul.top-menu > li {float: left; margin-left: 5px;}
ul.top-menu > li.has-submenu {position: relative; }
ul.top-menu > li > a {color: white; padding: 6px 25px; border: 1px solid white; border-radius:5px;}
ul.top-menu > li > a:hover {background-color: darkcyan; color: white !important; }
ul.top-menu > li.has-submenu > ul.submenu {display: none; list-style-type: none; position: absolute; padding: 0; width: max-content; right: 0; background-color: darkcyan; border: solid 1px #f0f0f0; z-index: 100;top: 20px;}
ul.top-menu > li.has-submenu:hover > ul.submenu {display: block; color: white !important;}
ul.top-menu > li.has-submenu > ul.submenu> li {float:none;min-width: 110px;}
ul.top-menu > li.has-submenu > ul.submenu> li:hover {background-color: dodgerblue;}
ul.top-menu > li.has-submenu > ul.submenu> li > a { color: white;font-weight: normal;font-size: 13px;padding: 3px 10px;line-height: 30px;width: 200px; display: block;}
ul.top-menu > li.has-submenu > ul.submenu> li:hover > a { color: white;}

/* File Upload */
label.myUpload {display: inline-block;}
label.myUpload > input[type="file"] {position: fixed;top: -1000px;}
label.myUpload > span {cursor: pointer;}

/* buttons */
.ex_btn{display: inline-block; padding:3px 10px; color:white !important; font:11px/11px Tahoma,arial,sans-serif,'Fontawesome'; border-radius:3px; background-color:dodgerblue; border: 0; text-decoration: none;}
.ex_btnS{display: inline-block; padding:5px 10px; color:white !important; font:12px/14px Tahoma,arial,sans-serif,'Fontawesome'; border-radius:3px; background-color:dodgerblue; border: 0; text-decoration: none;}
.ex_btnM{display: inline-block; padding:7px 15px; color:white !important; font:14px/14px Tahoma,arial,sans-serif,'Fontawesome'; border-radius:3px; background-color:dodgerblue; border: 0; text-decoration: none;}
.ex_btnL{display: inline-block; padding:8px 20px; color:white !important; font:17px/17px Tahoma,arial,sans-serif,'Fontawesome'; border-radius:3px; background-color:dodgerblue; border: 0; text-decoration: none;}
.ex_btn:hover, .ex_btnS:hover, .ex_btnM:hover, .ex_btnL:hover {color:beige;}
.ex_btn.medium, .ex_btnS.medium, .ex_btnM.medium, .ex_btnL.medium {padding:8px 20px; font-size:12px;}
.ex_btn.blue, .ex_btnS.blue, .ex_btnM.blue, .ex_btnL.blue {background-color:dodgerblue;}
.ex_btn.darkblue, .ex_btnS.darkblue, .ex_btnM.darkblue, .ex_btnL.darkblue {background-color:darkblue;}
.ex_btn.darkgreen, .ex_btnS.darkgreen, .ex_btnM.darkgreen, .ex_btnL.darkgreen {background-color:darkgreen;}
.ex_btn.darkred, .ex_btnS.darkred, .ex_btnM.darkred, .ex_btnL.darkred {background-color:darkred;}
.ex_btn.gray, .ex_btnS.gray, .ex_btnM.gray, .ex_btnL.gray {background-color:#666;}
.ex_btn.green, .ex_btnS.green, .ex_btnM.green, .ex_btnL.green {background-color:green;}
.ex_btn.lightgray, .ex_btnS.lightgray, .ex_btnM.lightgray, .ex_btnL.lightgray {background-color:lightgray;}
.ex_btn.red, .ex_btnS.red, .ex_btnM.red, .ex_btnL.red {background-color:red;}

.ex_infobtn{display: inline-block; padding:3px 10px; color:black !important; font:11px/11px Tahoma,arial,sans-serif,'Fontawesome'; border-radius:3px; background-color:white; border: 0; text-decoration: none; border: 2px solid black;}
.ex_infobtnS{display: inline-block; padding:5px 10px; color:black !important; font:12px/14px Tahoma,arial,sans-serif,'Fontawesome'; border-radius:3px; background-color:white; border: 0; text-decoration: none; border: 2px solid black;}
.ex_infobtnM{display: inline-block; padding:7px 15px; color:black !important; font:14px/14px Tahoma,arial,sans-serif,'Fontawesome'; border-radius:3px; background-color:white; border: 0; text-decoration: none; border: 2px solid black;}
.ex_infobtnL{display: inline-block; padding:8px 20px; color:black !important; font:17px/17px Tahoma,arial,sans-serif,'Fontawesome'; border-radius:3px; background-color:white; border: 0; text-decoration: none; border: 2px solid black;}
.ex_infobtn:hover, .ex_infobtnS:hover, .ex_infobtnM:hover, .ex_infobtnL:hover {color:beige;}
.ex_infobtn.blue, .ex_infobtnS.blue, .ex_infobtnM.blue, .ex_infobtnL.blue {color:dodgerblue; border-color: dodgerblue;}
.ex_infobtn.darkblue, .ex_infobtnS.darkblue, .ex_infobtnM.darkblue, .ex_infobtnL.darkblue {color:darkblue; border-color:darkblue;}
.ex_infobtn.darkgreen, .ex_infobtnS.darkgreen, .ex_infobtnM.darkgreen, .ex_infobtnL.darkgreen {color:darkgreen; border-color:darkgreen;}
.ex_infobtn.darkred, .ex_infobtnS.darkred, .ex_infobtnM.darkred, .ex_infobtnL.darkred {color:darkred; border-color:darkred;}
.ex_infobtn.gray, .ex_infobtnS.gray, .ex_infobtnM.gray, .ex_infobtnL.gray {color:#666; border-color:#666;}
.ex_infobtn.lightgray, .ex_infobtnS.lightgray, .ex_infobtnM.lightgray, .ex_infobtnL.lightgray {color:lightgray; border-color:lightgray;}
.ex_infobtn.green, .ex_infobtnS.green, .ex_infobtnM.green, .ex_infobtnL.green {color:green; border-color:green;}
.ex_infobtn.red, .ex_infobtnS.red, .ex_infobtnM.red, .ex_infobtnL.red {color:red; border-color:red;}

.ex_sup { position: relative; top: -5px; text-decoration: none; color: dodgerblue; }
.content_block {margin-top: 10px;background: white;padding: 10px;border-radius: 20px;box-shadow: 3px 3px lightgrey;}

/* Print */
@media print {
    @page {
        size: auto; /* auto is the initial value */
        margin: 5mm 5mm; /* this affects the margin in the printer settings */
        text-align: center;
    }
}

/* datagrid related */
.exPopup .ex-datagrid-wrap .ex-datagrid>tbody>tr>td {padding:8px 3px;}

/* secondary button */
.btn-secondary.active, .btn-secondary:active, .show > .btn-secondary.dropdown-toggle {color: #fff;background-color: #2764e3;border-color: darkblue;}
.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle {color: #fff;background-color: #2764e3;border-color: darkblue;}

.solo_link_list:before { content: "\f054"; font-family: FontAwesome; padding-right: 5px; }
.solo_link_list:hover{color:#0060be;}

/* special effect */
/* 1. Shining Text */
.shining_text { position: relative; font-family: sans-serif; text-transform: uppercase; font-size: 2em; letter-spacing: 4px; overflow: hidden; background: linear-gradient(90deg, #000, #fff, #000); background-repeat: no-repeat; background-size: 80%; animation: shining 3s linear infinite; -webkit-text-fill-color:transparent; }
@keyframes shining { 0% { background-position: -500%; } 100% { background-position: 500%; } }

/* 2. Ticker */
.ticker { position: relative; width: 100%; overflow: hidden; }
.ticker > .scroll { width: 100%; display: flex; }
.ticker > .scroll > div { color: #000; font-size: 2em; background: #fff; white-space: nowrap; font-weight: 900; animation: ticker 10s linear infinite; animation-delay: -10s; }
@keyframes ticker { 0% { transform: translateX(200%); } 100% { transform: translateX(-100%); } }

/* 3. Animated Check Box */
.ex-checkbox { position: relative; width: 120px !important; height: 30px !important; -webkit-appearance: none; background: linear-gradient(0deg, #333, #000); outline: none; border-radius: 20px; box-shadow: 0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 10px rgba(0,0,0,1), 0 5px 20px rgba(0,0,0,.5), inset 0 0 15px rgba(0,0,0,.2);}
.ex-checkbox:before { content: ''; position: absolute; top:0; left:0; width: 80px; height: 30px; background: linear-gradient(0deg, #000, #6b6b6b); border-radius: 20px; box-shadow: 0 0 0 1px #232323; transform: scale(.98, .96); transition: .5s; }
.ex-checkbox:checked:before { left: 40px; }
.ex-checkbox:after { content: ''; position: absolute; top: calc(50% - 2px); left:60px; width: 4px; height: 4px; background: linear-gradient(0deg, #6b6b6b, #000); border-radius: 50%; transition: .5s; }
.ex-checkbox:checked { background: linear-gradient(0deg, #6dd1ff, #20b7ff); box-shadow: 0 0 2px #6dd1ff, 0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 10px rgba(0,0,0,1), 0 5px 20px rgba(0,0,0,.5), inset 0 0 15px rgba(0,0,0,.2); }
.ex-checkbox:checked:after { background: #63cdff; left: 100px; box-shadow: 0 0 5px #13b3ff, 0 0 15px #13b3ff; } /* 100px = 60px + 40px */

/* 4. Flip Button 3d */
/* <a href="#" class="ex-flip-button"> <span class="front">Click</span> <span class="center"></span> <span class="back">Here</span> </a> */
a.ex-flip-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 60px; text-align: center; transform-style: preserve-3d; perspective: 1000px; transform-origin: center center; }
a.ex-flip-button > span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-align: center; line-height: 60px; font-size: 24px; background: rgba(255, 255, 255, .05); transform-style: preserve-3d; backface-visibility: hidden; border-radius: 30px; text-transform: uppercase; color: #fff; transition: 1s; }
a.ex-flip-button > span.front { transform: rotateX(0deg) translateZ(20px); }
a.ex-flip-button:hover span.front { transform: rotateX(-180deg) translateZ(20px); }
a.ex-flip-button > span.back { transform: rotateX(180deg) translateZ(20px); }
a.ex-flip-button:hover span.back { transform: rotateX(0deg) translateZ(20px); }
a.ex-flip-button > span.center { background: linear-gradient(to left, #c31a5b, #7129bd); }
a.ex-flip-button > span.center:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to left, #ffdd1f, #c31a5b); border-radius: 30px; transform: translateZ(-1px); }
a.ex-flip-button:hover span.center { transform: rotateX(-180deg); }

/* 5. Reveal Text (hide -> rising animation) */
p.reveal { display: inline-block; border-bottom: 5px solid #fff; overflow: hidden; box-shadow: 0px 1px 0px rgba(0, 0, 0, .5); animation: reveal 2s linear forwards; }
@keyframes reveal { 0% { width: 0px; height: 0px; } 30% { width: 100%; height: 0px; } 60% { width: 100%; height: 80px; } 80% { width: 100%; height: 80px; box-shadow: 0px 1px 0px rgba(0, 0, 0, .5); } 100% { width: 100%; height: 80px; box-shadow: 0px 5px 0px rgba(0, 0, 0, .5);} }

/* 6. Vertical Menu */
.vmenu { position: fixed; inset: 10px; background: #287bff; width: 66px; border-left: 10px solid #287bff; overflow: hidden; border-radius: 50px; box-shadow: 15px 15px 25px rgba(0, 0, 0, 0.05); transition: 0.5s; box-sizing: initial; z-index: 10; }
.vmenu.active { width: 300px; border-radius: 20px; }
.vmenu > .toggle { position: absolute; bottom: 15px; right: 15px; width: 50px; height: 50px; background: #fff; border-radius: 50%; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15); cursor: pointer; display: flex; justify-content: center; align-items: center; }
.vmenu > .toggle::before { content: ''; position: absolute; width: 26px; height: 3px; border-radius: 3px; background: #365fa1; transform: translateY(-5px); transition: 1s; }
.vmenu > .toggle::after { content: ''; position: absolute; width: 26px; height: 3px; border-radius: 3px; background: #365fa1; transform: translateY(5px); transition: 1s; }
.vmenu.active .toggle::before { transform: translateY(0px) rotate(-405deg); }
.vmenu.active .toggle::after { transform: translateY(0px) rotate(225deg); }
.vmenu ul { position: absolute; top: 0; left: 0; width: 100%; padding: 0; }
.vmenu ul li { position: relative; list-style: none; width: 100%; border-top-left-radius: 30px; border-bottom-left-radius: 30px; }
.vmenu ul li:hover { background: #fff;  }
.vmenu ul li:nth-child(1) { top: 20px; margin-bottom: 40px; background: none;}
.vmenu ul li:not(:first-child):hover::before { content: ''; position: absolute; top: -20px; right: 0; width: 20px; height: 20px; background: transparent; border-bottom-right-radius: 20px; box-shadow: 7.5px 7.5px 7.5px #fff; }
.vmenu ul li:not(:first-child):hover::after { content: ''; position: absolute; bottom: -20px; right: 0; width: 20px; height: 20px; background: transparent; border-top-right-radius: 20px; box-shadow: 7.5px -7.5px 7.5px #fff; }
.vmenu ul li a { position: relative; display: flex; width: 100%; text-decoration: none; color: #fff; }
.vmenu ul li:hover:not(:first-child) a { color: #365fa1; }
.vmenu ul li a .icon { position: relative; display: block; min-width: 60px; height: 60px; line-height: 60px; text-align: center; }
.vmenu ul li a .icon { font-size: 1.75em; }
.vmenu ul li a .title { position: relative; display: block; padding: 0 10px; height: 60px; line-height: 60px; text-align: start; white-space: nowrap; font-family: arial; }

/* 7. Chat Area */
.ex_chat1 { position: relative; width: 80%; margin-left: 11px; padding: 5px 14px; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, .7); background-color: gold; }
.ex_chat1:after { position: absolute; content: ""; width: 0; height: 0; top: 5px; border-top: 15px solid gold; left: -15px; border-left: 15px solid transparent; }
.ex_chat1 + p {margin: 5px 25px; width: 80%;}

.ex_chat2 { position: relative; width: 80%;  margin-left: calc(20% - 11px); margin-right: 10px; padding: 5px 14px; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, .7); background-color: lightgray; }
.ex_chat2:after { position: absolute; content: ""; width: 0; height: 0; top: 5px; border-top: 15px solid lightgray; right: -15px; border-right: 15px solid transparent; }
.ex_chat2 + p {margin: 5px calc(20% - 11px); width: 80%;}

.ex_chat1w { position: relative; width: 80%; margin-left: 11px; padding: 5px 14px; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, .7);background-color: greenyellow; }
.ex_chat1w:after { position: absolute; content: ""; width: 0; height: 0; top: 5px; border-top: 15px solid greenyellow; left: -15px; border-left: 15px solid transparent; }

.ex_chat1w + p { margin: 5px 25px; width: 80%; }

/* 8. Hidden Checkbox, Radiobutton */
.ex_hidden_button {position: absolute;clip: rect(0,0,0,0);pointer-events: none;}
.ex_hidden_button + label {padding:7px 5px; background-color: #6c757d; color: white; margin-left: 0 !important; margin-right: 0;}
.ex_hidden_button:checked + label {padding:7px 5px; background-color: #2764e3; color: white; margin-left: 0 !important; margin-right: 0;}

/* 9. blink */
.ex_blink { animation: ex_blinker 3s linear infinite; }
@keyframes ex_blinker { 50% { opacity: 0; } }