*, *:before, *:after { margin:0; padding:0; box-sizing:border-box; text-decoration:none;}
html, body { margin:0; width:100%; height:100%; }
body * { font-size: calc(12px + (16 - 14) * ((100vw - 300px) / (1600 - 300))); }
*  {  font-family: Roboto, Arial, sans-serif; } 
body { user-select:znone; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; }
 
textarea#leaktxt { font-size: 1.2rem; background:#BCD5F4;color:teal;font-weight:700;line-height:3rem;}
i.icon.question.circle { margin-top:5px; color:white; font-size:20px; } 
span.atten { font-size:150%; }
div#wd-top span:nth-child(n+5) { color:orange; font-size:36px; cursor:pointer; }
div[class^="wall"] { width:410px; height:90px; display:flex; flex-flow:row wrap; font-size:0.5rem; font-weight:900; }
#flesh * { padding-top:1rem;color:white; cursor:pointer;font-size:1.2rem; }
#flesh *:hover { font-size:1.4rem; text-decoration: underline;color:yellow !important; }
.formlinkk { font-size:18px; }
#btnOk { color:yellow; float:right; padding:0.5rem; background:blue; }
#btnCancel { margin-right:1rem; color:yellow; float:right; padding:0.5rem; background:blue; }
.text.txt2 { font-size:90%; color:red; }
.text.txt { font-size:90%; color:blue; }

#add, #mailadd {cursor:pointer; }
#add:hover, #mailadd:hover {color:orange; }
.optcon { display:none; }
u { text-decoration: underline; }

.estarpop { padding:20px;position:absolute;top:10%;left:0;width:200px;height:250px;margin-top:0;margin-left:10px;display:none;border:3px solid blue;background-color:white;box-shadow:10px 10px; }

.codepop{position:absolute; top:15%; left:-40px; width:400px; height:480px; margin-top:40px; margin-left:10px; display:none; border:3px solid blue; background-color:white; padding:1%; box-shadow:10px 10px;}

.errm, .comperrm { color: red; animation: blink 2s infinite; }
@keyframes blink { 0% { opacity:1;} 50% { opacity:0;} 100% { opacity:1;} }
.grid_nav .grouped.fields { margin:40px 20px; }
.grid_nav .grouped.fields .field{ margin-bottom:20px; }
.grid_nav .grouped.fields .field input[type=checkbox] + label { cursor:pointer; color:white; } 
.grid_nav .grouped.fields label:hover  { color:yellow; }
.grid_nav .grouped.fields .field input[type=checkbox]:checked + label { color:white; } 

.ui .fields .field  { padding-bottom:1rem; }
.ui .fields.nonbott .field { padding-bottom: 0; }
.ui .fields .field input { line-height: 1.3em;color: green; font-weight:700; font-family:Tahoma, sans-serif; border:0.3px solid rgba(34, 36, 38, 0.1); border:1px solid #ccc; border-radius:3px;}
.ui .fields .field input:focus { }
.ui.form .disabled.field { opacity:0.8; }
.ui.form .disabled.field label { opacity:0.8; }
.ui .fields .field input[name*=model] { text-transform:uppercase; }

.ui .fields .field label { font-family:'Trebuchet MS', sans-serif; font-style:italic;}
.ui .fields .field input:read-only { color:blue; }
.ui .fields .field input:disabled { color:black; opacity:0.8; }
.ui .fields .field .selection.dropdown { line-height: 1.9em;font-family: Tahoma, sans-serif;  border:0.3px solid rgba(34, 36, 38, 0.15);}
.ui .fields .field .selection.dropdown .text {font-family:Tahoma,sans-serif; }

#alertmodal .modal-content { line-height:1.5rem;position:relative; background-color:white; margin:0 auto; padding:5rem;
  border:1px solid #888; width:40rem;height:30rem;overflow:scroll; -webkit-box-shadow: 27px 25px 5px -5px rgba(8,14,49,0.88); 
box-shadow: 27px 25px 5px -5px rgba(8,14,49,0.88); }

span.atten { text-align:center ;text-decoraion:underline; font-weight:900; color:teal; }
  
.ui.segment { padding:1.2% 1.2% 0 1.5%; margin:0; background:#FFFFFF;}

.ui.toggle.checkbox label:after { -webkit-transition:background 1s ease, left 1s ease;
  transition:background 1s ease, left 1s ease;}
.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ .coloring.teal:before { background:teal !important; }

.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ .coloring.red:before { background:red !important; }

.cntr  { float:center; text-align:center;}
.left  { float:left; text-align:left;}
.right { float:right; text-align:right;}

.dt-length label {margin-left:0.5rem;}
input#dt-search-0 { width: 20em }

div.dt-container div.dt-layout-row {outline:none; border:none; }
th {outline:none; border:none;  }
table.dataTable > tbody tr td { line-height:2.5em;vertical-align:middle;}
table.dataTable.stripe>tbody>tr.selected>* {color:white;box-shadow: none;background:black}
table.dataTable.stripe>tbody>tr.selected:nth-child(odd)>* {color:white;box-shadow: none;background:black}

.dt-layout-row.ui-helper-clearfix.dt-layout-table{margin-top:2rem;}
table.dataTable.stripe>tbody>tr:nth-child(even) { background-color: #EDEEF6; }
table.dataTable.stripe>tbody>tr:nth-child(odd) { background-color: white; }

div.dt-container .dt-paging .fg-button { border: 1px solid grey; }
div.dt-container .dt-paging .fg-button { margin-left: 5px; }
div.dt-container .dt-paging .fg-button.ui-state-disabled {border:2px solid teal;}
div.dt-container .dt-paging .fg-button:first-child { border-top-left-radius:13px; border-bottom-left-radius: 13px; background:grey; color:yellow;}
div.dt-container .dt-paging .fg-button:last-child { border-top-right-radius:13px; border-bottom-right-radius:13px; background:grey;color:yellow;}

#pre-loader {
  position:absolute; top:0; left:0; width:100%; height:100%; z-index:66666; background-image:url('../img/loader2.gif'); 
  background-repeat:no-repeat; background-color:black;  background-position:center;}

/*  TAB   */
.regtab .ui.menu { margin-top:6px; background:white; box-shadow:0 3px 10px rgb(0 0 0 / 0.9);}
.regtab .ui.menu .tabkey { text-align:center; }
.regtab .tabpage { margin-top:30px; display:none; }
 
.navpage, .inavpage { background:white; width:100%; height:89.6vh; overflow-y:scroll; overflow-x:hidden; padding:1.5%; padding-bottom:3rem;border:3px solid;}

/*  Signature Pad   */
canvas { touch-action:none; }
.mysketch { touch-action:none; }
.a-body .mysketch { background-color:white; margin:0px auto; }
#f-body .mysketch { background-color:white; border:1px solid black;}
#m-body .mysketch { background-color:white; border:1px solid black;}
#r-body .mysketch { background-color:white; border:1px solid black;}

.sketchbutt img, .sketchbuttmob img { cursor:pointer; transition: all 0.1s ease; border:1px solid; border-radius:3.5px; }
.sketchbutt img:hover, .sketchbuttmob img:hover  { border:1px solid red; }
#d-body .sketchbutt img { background:white;padding:3.8px; margin-left:3px;width:36px;height:36px; }

#f-body .sketchbutt button { width:30px;height:30px; }
#f-body .sketchbutt button { width:30px;height:30px; }
#r-body .sketchbutt button { width:30px;height:30px; }
#s-body .sketchbutt button { width:30px;height:30px; }
#m-body .sketchbuttmob button { width:30px;height:30px; }




.notfound { background-image:url('../img/usernotfound.jpg'); width:100%; height:100%; background-position:center;
  background-repeat:no-repeat; background-size:contain; }
.thankyou { background-image:url('../img/thankyou.jpg'); width:100%; height:100%; background-position:center;
  background-repeat:no-repeat; background-size:cover; }

.alphaclass { padding:3px; background:blue; }
#alphaclass { padding:8px; background:blue; }
.alphaclass button { width:34px; height:34px; background:#F7EDBFFF; text-align:center; border:none; cursor:pointer; font-weight:900; margin:2px; }
#alphaclass button { width:34px; height:34px; background:#F7EDBFFF; text-align:center; border:none; cursor:pointer; font-weight:900; margin:2px; }
.alphaclass button:hover { border:3px solid yellow; }
#alphaclass button:hover { border:3px solid yellow; }

.alphaclassmob { padding:1px; background:lightblue; }
.alphaclassmob button { width:22px; height:22px; background:yellow; text-align:center; border:none; cursor:pointer; font-weight:500; margin:1px; }
.alphaclassmob button:hover { border:2px solid yellow; }
.sktrash, .sktrashmob { background:url('../img/sktrash.png') no-repeat center center white; }
/*  Signature Pad   */

#f-body h3 { margin:0; letter-spacing:2px; word-spacing:4px; text-shadow:0px 4px 10px #0AF49BFF; font-weight:700; text-decoration:blink; animation:blinker 4s step-start infinite;}
#f-body hr { opacity:0.2; }
#f-body .thistext { letter-spacing:1px; text-decoration:blue underline; margin:0 20px; font-style:italic; font-weight:700; }
#f-body .sptext { letter-spacing:1px; margin:0 4px; font-style:italic; font-weight:700; color:teal;    border-bottom:0.5px solid #DBDBDBF3;}
#f-body .spacer { margin-bottom:30px }
#f-body .greenbold { color:green; font-weight:700; }
#f-body ul.tick { list-style:none; padding-left:10px; }
#f-body ul.tick * { line-height: 16px; }
#f-body ul.tick li:before { content:'✓ '; }
#f-body p { line-height:16px; }

div.checknav .checknavitems label { padding:4px 0px 10px 40px; cursor:pointer; }
div.checknav .checknavitems .field * { text-decoration:underline; }
div.radionav .radionavitems label { padding:0px 0px 20px 40px; cursor:pointer; }
div.radionav .radionavitems { box-shadow:0 6px 10px rgb(0 0 0 / 0.2); }
div.radionav .radionavflds { box-shadow:0 3px 10px rgb(0 0 0 / 0.1); }

div.checknav .checknavitems { box-shadow:0 6px 10px rgb(0 0 0 / 0.2); }
div.checknav .checknavflds { box-shadow:0 3px 10px rgb(0 0 0 / 0.1); }

div.checknav .checknavpage { display:none; }
div.radionav .radionavflds#fontfields .fields { margin:auto; }
/***************** CUBE     ///////////////////////////////////  */
.circc { display:block; position:absolute; padding:1.5rem; border:none; }
.circc a { padding:0.6rem; position:absolute; width:2.5rem; height:2.5rem; border:1px solid;border-radius:50%;;color:black;background:white; cursor:pointer;}
.circc a:hover {color:black; background:yellow;}
/***************** CUBE     ///////////////////////////////////  */
 
/*  GRID   */
.grid_body { display:grid; 
  grid-template-areas:"header header" "nav main";
  grid-template-rows:12fr; grid-template-columns:2fr 10fr;
  grid-column-gap:0.5px; grid-row-gap:1px; }
.grid_header { color:white; grid-area:header; padding:1.2rem; background-image: linear-gradient(to left, #051937, #002737, #123030, #2e3731, #3f3f3e); }
.grid_header * { color:white; margin-right:1.2rem; cursor:pointer; }
.grid_header *:hover { color:orange; }
.grid_main { grid-area:main;padding:5px; }
.grid_nav { grid-area:nav; color:white; background:black;padding:5px; }
.grid_nav a { border:0.5px solid grey; border-radius:5px; width:95%;display:block;color:white; margin:3px 0px;padding:5px; background:rgb(120,120,120,0.6)}
.grid_nav a:hover { cursor:pointer;background:teal; }

.cgrid_body { display:grid; 
  grid-template-areas:"header" "main";
  grid-template-rows:12fr; grid-template-columns:12fr;
  grid-column-gap:0.5px; grid-row-gap:1px; }
.grid_header { color:white; grid-area:header; padding:1.2rem; background-image: linear-gradient(to left, #051937, #002737, #123030, #2e3731, #3f3f3e); }
.grid_header * { color:white; margin-right:1.2rem; cursor:pointer; }
.grid_header *:hover { color:orange; }
.grid_main { grid-area:main;padding:5px; }

.mgrid_body { display:grid; 
  grid-template-areas:"header" "main";
  grid-template-rows:1fr 11fr; grid-template-columns:100%;
  grid-column-gap:0.5px; grid-row-gap:0,5px; }
.mgrid_header { grid-area:header; padding:1.2rem;background-image: linear-gradient(to right top, #49052c, #450936, #3f103f, #361648, #291c50, #1c2050, #0e234e, #00254b, #00243f, #002131, #001d22, #011817); }
.mgrid_header * { color:white; margin-right:1.2rem; }
.mgrid_main { grid-area:main; padding:0.5px; }

#roofwrapper { display:grid; grid-gap:2px; grid-template-columns:100px 150px 100px; grid-template-rows:127px 127px 126px; padding:4px;}
#roofwrapper { background:url('../img/roof.png') repeat center center;}
#roofwrapper > * { cursor:pointer; align-self:stretch; }
#rx2 { grid-area:1 / 2 / 2 / 3; } 
#rx4 { grid-area:2 / 1 / 2 / 2; }
#rx6 { grid-area:2 / 3 / 2 / 5; }
#rx8 { grid-area:3 / 2 / 4 / 3; }

.wrapper { display:grid; grid-gap:1px; grid-template-columns:100px 30px 454px 30px 122px; grid-template-rows:20px 304px 20px; padding:4px;}
.x2   { grid-area:2 / 1 / 3 / 2; background:teal; padding-left:4px;}
.x5   { grid-area:2 / 2 / 3 / 3; place-self:center end; padding-right:2px; }
.x7   { grid-area:1 / 3 / 2 / 4; place-self:end center; }
.x8   { grid-area:2 / 3 / 3 / 4; box-shadow:0 3px 10px rgb(0 0 0 / 0.4); }
.x9   { grid-area:3 / 3 / 4 / 4; place-self:center center; }
.x11  { grid-area:2 / 4 / 3 / 5; place-self:center start; padding-left:3px; }
.x13  { grid-area:2 / 5 / 3 / 6; place-self:top start; padding-left:3px; }

div#wd-top { cursor:pointer; color:white; background:none; border: none; margin-bottom:45px; }
div#wd-top span { float:left; margin-right:40px; }
div#wd-top span:hover:nth-child(1) { color:yellow; }
div#wd-top span:hover:nth-child(7) { color:yellow; }
div#wd-top span:nth-child(2) { margin-left:205px; cursor:default; }
div#wd-top span:nth-child(3) { color:yellow; float:right; }
div#wd-top span:nth-child(4) { cursor:default; float:right; }
div#wd-top span:nth-child(n+5) { color:orange; cursor:pointer; }
div#wd-top span:nth-child(-n+4) { display:none; }

.signwrapper { display:grid; grid-gap:5px; grid-template-columns:330px 25px 1fr 330px 25px; grid-template-rows:22px 98px; padding:4px;}
.sx1  { grid-area:1/1 / 2/2;}
.sx2  { grid-area:2/1 / 3/2;}
.sx4  { grid-area:2/2 / 3/3; place-self:end; }
.sx7  { grid-area:1/4 / 2/5; }
.sx8  { grid-area:2/4 / 3/5; }
.sx10 { grid-area:2/5 / 3/6; place-self:end; }

.initwrapper { display:grid; grid-gap:1px; grid-template-columns:85px 36px; grid-template-rows:22px 52px; padding:4px;}
.ix1  { grid-area:1/1 / 2/3;}
.ix2  { grid-area:2/1 / 3/2; }
.ix4  { grid-area:2/2 / 3/3; place-self:end }
/*  GRID   */


.help-icon { display:inline-block; width:20px; height:20px; line-height: 20px;text-align: center;border-radius:50%; background-color:red; color:white; font-weight:bold; cursor: pointer; user-select:none; position:relative; left:5px; top:-5px;}

/*  Index & Register  */
table.hover.stripe tbody tr { height:42px; }
div .dataTables_wrapper.no-footer .dataTables_scrollBody {border-bottom:none; }
/*  Index   */

/*  eeeeee   */
.thisdisabled  { opacity:0.5; cursor:not-allowed; pointer-events:none; text-decoration:none;}
.thisdisabled2  { font-style:oblique; opacity:0.9; cursor:not-allowed; pointer-events:none; text-decoration:none;}
/*  eeeeee   */

/*  MISC    */
.shine { letter-spacing:4px; ; font-family:'Merriweather', serif;
  -webkit-mask-image:linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
  -webkit-mask-size:200%;  animation:shine 2s linear infinite; }
@keyframes shine { from { -webkit-mask-position:150%; } to { -webkit-mask-position:-50%; } }
/*  MISC    */ 

.wrapD3Cube { margin: auto; background-color:none;}
.D3Cube { width: 410px; height:410px; top:30px; transform-style: preserve-3d; transform: rotateX(-10deg) rotateY(-10deg) rotateZ(0deg); margin: auto;  position: relative; transition:all 0.5s ease-in-out;}
.D3Cube > div { position: absolute; transition: all 0.5s ease-in-out; width: 410px; height:410px; float: left; overflow: hidden; opacity: 0.98;}
.D3Cube .side1 { transform: rotateX(90deg) translateX(0px) translateY(0px) translateZ(205px); background:url('../img/roof.png') repeat center center; }
.D3Cube .sideL { transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(205px);
    background-color:#8B4004; }
.D3Cube .sideF { transform: translateX(0px) translateY(0px) translateZ(205px);
    background-color:#8B4004; }
.D3Cube .sideR { transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(205px);
    background-color: #8B4004; }
.D3Cube .sideB { transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(205px);
    background-color: #8B4004; }
.D3Cube .side6 { transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(205px); background-color: #8B4004; }

.wrapD3Cube .D3Cube p {height:17px; color:white; text-align:center; font-weight:900;}
div[class^="wall"] { width:410px; height:90px; display:flex; flex-flow:row wrap; font-weight:900; }
div[class^="wall"] > div { margin:1px; padding:1px; }
div[class^="wall3"], div[class^="wall2"],div[class^="wall1"] { background:url('../img/wallmain.png') repeat center center; margin-bottom:5px;}
div[class^='wall0'] { background:url('../img/wallbase.png') repeat center center; }

#kolview #flesh {  position:fixed; width: max-content; background:transparent; }
#flesh * { padding-top:1rem;color:white; cursor:pointer; }
#flesh *:hover { text-decoration: underline;color:yellow !important; }

.vava:hover { zoom:1.5; color:brown; }

#overlay { display:none;position:fixed; width:100%; height:100%;top:0; left:0; right:0; bottom:0;background-color:rgba(10,10,10,0.5); z-index:98;}

.a-body .navpage .regtab .tabpage:nth-child(-n+4) { padding-bottom:40px; }
.a-body .navpage#flor { padding:0px 20px; } 
.a-body .navpage#flor .regtab .tabpage { padding:0px 20px; margin: 0px} 
.a-body .navpage#flor .regtab .tabpage .wrapper{ padding:0px; margin:0px; } 

.formlinkk { display: block; width:150px; height:100px; margin-bottom:100px; background:teal; color:white;}

.modal { display:none; position:fixed; z-index:1; padding-top:10px; left:0; top:0; width:100%;
  height:100%; overflow: auto; background-color: rgba(0,0,0,0.1); }

.modal-content { font-weight:900;position:relative; padding:10%; margin:auto; margin-top:10%;width:70%;height:70%; Background:grey;font-weight:900;  -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; }
@-webkit-keyframes animatetop {  from {top:-300px; opacity:0}  to {top:0; opacity:1} }
@keyframes animatetop {from {top:-300px;opacity:0} to {top:0;opacity:1}}


.uploadpng { cursor:pointer; background:url('../img/upload.png') no-repeat; border:none;}

div.dataTables_length {display:none;}

#d_remarks { position:fixed;bottom:5px;left:3px;margin:0px; padding:0px; }
#d_remarkss {line-height:1.3rem; box-shadow: -1px -1px 1px 1px teal; padding:8px;margin:0px;background:#373737;color:yellow; height:14vh; width:15vw;}
#d_remarkss2 {line-height:1.5rem; box-shadow: -1px -1px 1px 1px teal; padding:8px;margin:0px;background:#373737;color:yellow; height:14vh; width:15vw;}

#xd_remarks2{ position:fixed;bottom:5px;left:3px;line-height:1.3rem;margin:0; padding:5px; height:14vh; width:15vw; box-shadow: -1px -1px 1px 1px white; background:#373737;color:yellow; }

trt { line-height:2rem; margin-left:20px; font-weight:900; color:red; }
 


.grid_nav a.active:after{ font-weight:bold; padding:2px; color:yellow;content:"\2713"; margin-left:3em; }
.grid_main { background:#F2F2F2FF; }

/*////////////// Full Calendar /////////////*/
.fc *{ font-size: 14px; }
.fc-day-grid-event > .fc-content { white-space: normal;   }
.fc-event-title { margin:1px; padding:1px; white-space:normal;}
.fc-event-time { margin:1px; padding:1px; white-space:normal !important;
  font-size:0.4em; width:3em;}
.other-month-background { background-color:red; }
.fc-head { height:2rem; }
.fc-head-container * { padding:1rem; }
.fc-head-container { padding-top:1rem; }
.fc-day-grid-event * { padding:0.25rem } 
.fc-day-grid-event   { font-size:0.5em;margin:1rem;} 
.fc-day-number { color:blue; font-weight:700}
div .fc-center h2 { padding-top:10px; color:teal; font-weight:700}
div .fc-row.fc-week.fc-widget-content { background:#F1EFEF; min-height:6rem;}
td .fc-widget-content { border-style:solid; border-width:3px; border-color:white; }

/*////////////// Full Calendar /////////////*/
@media (min-width:481px) and (max-width:1024px) {
#sptog, #mkdir, #mkcsv, #descspan { display:none !important; }
.xwrapD3Cube { zoom:50%; }
#d_remarks { position:fixed;bottom:5px;left:3px;line-height:1.3rem;margin:0; padding:5px; height:14vh; width:15vw; box-shadow: -1px -1px 1px 1px white; background:#373737;color:yellow; }
#d_remarks2{ position:fixed;bottom:5px;left:3px;line-height:1.3rem;margin:0; padding:5px; height:14vh; width:15vw; box-shadow: -1px -1px 1px 1px white; background:#373737;color:yellow; }
#xxd_remarks { padding:2px; width:15vw; height:20vh; box-shadow:none; }
#xxd_remarks2 { padding:2px; width:15vw; height:20vh; box-shadow:none; }
table.dataTable > tbody tr td { line-height:2.0em;vertical-align:middle;}
ZZbody { font-size:0.8rem;
#d-body .sketchbutt img { background:white;padding:1.2px; margin-left:1px;width:30px;height:30px; }

}

@media (min-width:320px) and (max-width:575px) {
#sptog, #mkdir, #mkcsv, #descspan { display:none !important; }
.grid_header { padding:0px; }
.ZZgrid_header * { font-size:1.1rem; }
.grid_body { grid-template-columns:3fr 10fr; }
#descspan { display:none !important; }
#showid { display:none !important; }
.wrapD3Cube { zoom:50%; }
#kolview #flesh p { display:none; }
#d_remarks { display:none; }
table.dataTable > tbody tr td { font-size:0.7rem;line-height:1rem;vertical-align:middle; }
}