* {
  box-sizing: border-box;
  font-family: system-ui,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, roboto, oxygen, ubuntu, cantarell, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
}

@charset "UTF-8";

@font-face {
  font-family: Carattere;
  src: url('/fonts/Carattere/Carattere-Regular.ttf') format('truetype');
}

@font-face {
  font-family: Nunito;
  src: url('/fonts/Nunito/Nunito-Regular.ttf') format('truetype');
}

@font-face {
  font-family: Schoolbook;
  src: url('/fonts/Schoolbook/CENSCBK.TTF') format('truetype');
}

@font-face {
  font-family: Receipt;
  src: url('/fonts/FAKERECE.ttf') format('truetype');
}

@font-face {
  font-family: RobotoMono;
  src: url('/fonts/roboto-mono/RobotoMono-Regular.ttf') format('truetype');
}

html, body {
  height:100%;
}

html {font-size:14pt;}

body {
  font-size:100%;
  margin: 0;
  color:#1a1a1a;
  line-height:1.5;
}

body,h1,h2,h3,h4,h5,h6 { font-family: Nunito, sans-serif; }

h1,h2,h3,h4,h5,h6,b,strong { font-weight:600; }
h1{ font-size: 2em; margin: .67em 0 }
h2{ font-size: 1.5em; margin: .75em 0 }
h3{ font-size: 1.17em; margin: .83em 0 }
h5{ font-size: .83em; margin: 1.5em 0 }
h6{ font-size: .75em; margin: 1.67em 0 }

button {
  font-size:initial;
  border:0;
  padding:3pt 8pt;
  cursor:pointer;
}

label {
  cursor: pointer; /* Changes cursor to pointer */
  padding: 0.5em 0;
  display: block;
}

input[type="radio"] {
  cursor: pointer;
  display:inline-block;
  float:left;
  margin:7px 1em 7px 0;
}

#myNavbar {}

#myNavbar a:link, 
#myNavbar a:hover {
  color:linen;
  text-decoration:none;
}

#myNavbar a:last-of-type {float:right;}

#content {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top:43px;
  width:100%;
  min-height: 95vh;
  border-bottom: 4px solid #483D8B;
  border-top: 4px solid #483D8B;
}

#box {
  position:relative;
  width:inherit;
  max-width:1280px;
  margin:0 auto;
  padding-bottom: 4px;
}

#footer {
  position:relative;
  width:inherit;
  min-height:5vh;
}

#move-it {
  background-color: cornsilk;
  border: 1px solid black;
  animation: mymove 4s 1;
}

@keyframes mymove {
  20% {text-indent: 150px;}
}

a {
  color:#775385; /* INTENSE LILAC */
  text-decoration:none;
}

a:hover {
  color:#96C; /* AMETHYST */
  text-decoration:none;
}

a.link {text-decoration:underline;}

.w3-theme-l5 {color:#000 !important; background-color:#f9f6fa !important}
.w3-theme-l4 {color:#000 !important; background-color:#ebe2ed !important}
.w3-theme-l3 {color:#000 !important; background-color:#d8c5db !important}
.w3-theme-l2 {color:#000 !important; background-color:#c4a8ca !important}
.w3-theme-l1 {color:#fff !important; background-color:#b08bb8 !important}
.w3-theme-d1 {color:#fff !important; background-color:#905e9a !important}
.w3-theme-d2 {color:#fff !important; background-color:#805489 !important}
.w3-theme-d3 {color:#fff !important; background-color:#704978 !important}
.w3-theme-d4 {color:#fff !important; background-color:#603f66 !important}
.w3-theme-d5 {color:#fff !important; background-color:#503455 !important}

.w3-theme-light {color:#000 !important; background-color:#f9f6fa !important}
.w3-theme-dark {color:#fff !important; background-color:#503455 !important}
.w3-theme-action {color:#fff !important; background-color:#503455 !important}

.w3-theme {color:#fff !important; background-color:#9c6da5 !important}
.w3-text-theme {color:#9c6da5 !important}
.w3-border-theme {border-color:#9c6da5 !important}

.w3-hover-theme:hover {color:#fff !important; background-color:#9c6da5 !important}
.w3-hover-text-theme:hover {color:#9c6da5 !important}
.w3-hover-border-theme:hover {border-color:#9c6da5 !important}

.mid-ctr {
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  min-width:400px;
  width:auto;
  max-width:800px;
}

.mid-ctr ~ img {
  height:20%;
  width:auto;
  margin:0;
}

.alert-box {
  box-shadow:0 0 1px #333, 0 0 2px #f33;
  padding:2pt 4pt 3pt 4pt;
}

.serif {font-family:Schoolbook, Georgia, serif;}

.mono {font-family: RobotoMono, monospace;}

.receipt {font-family:Receipt;}

.posh {
  font-family: Carattere, Nunito, sans-serif;
  font-size-adjust:from-font;
  font-weight: normal;
  font-style: normal;
}

.big-font {font-size: clamp(2.25rem, 3vw, 4.5rem);}

.h0 {font-size:clamp(3rem,3vw,4rem);}

.lilac {background-color:#C8A2C8}
.lilac-hover:hover{background-color:#EAD6E5}
.glow {color:linen}
.tint {background-color: rgba(153,153,153,0.1)}
.dark {background-color: rgba(0,0,0,0.9); color:linen}
.b-shadow {box-shadow: 0 5px 4px -3px rgb(128,128,128)}
.t-shadow {text-shadow: 0px 1px 2px rgba(77,77,77,0.77)}
.t-shadow-dark {text-shadow: 0px 1px 2px rgba(26,26,26,0.85)}

.hover-shade:hover {
  box-shadow: 0 2px 3px -1px #333;
  text-shadow:0px 1px 2px #000;
}

.hover:hover {
  box-shadow: 0 2px 3px -1px #101010;
  text-decoration:none;
  text-shadow:none;
}

.error {
  font-family: RobotoMono, monospace;
  font-weight:normal;
  font-size:smaller;
}

.warning { color:#c00;}

.warning-icon::before {
  content:"\26A0";
  line-height:inherit;
  vertical-align:baseline;
  font-size:inherit;
  height:initial;
  max-height:inherit;
  padding:0 0.25em;
  background-color:#fcc; 
  text-shadow: 0 0 1px yellow, 0 1px 3px silver;
  text-indent:7pt;
}

.good2go {color:forestgreen;}

.result { background-color:cornsilk; }

.sm-sq {
  height:1em;
  width:auto;
  line-height:1em;
  padding:2px;
  border-radius:4px;
  display:inline-block;
}

.collapsible {
  cursor: pointer;
  padding:6px 4px;
  width: 100%;
  outline: none;
  font-size: inherit;
}

.collapsible:hover, .collapsible.active {
  background-color:Thistle;
  color:initial;
}

.contents {
  background-color: linen;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.my-table tr td {vertical-align:top;}

.my-table-style {
    margin-bottom:1em;
}

.my-table-style td:nth-of-type(odd) {
  text-align:right;
  font-weight:600;
  border-right:2px solid gray;
}

.text-normal-size {
  font-size:medium;
}

.reset-text {
  font-size:initial;
  color:#000;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 14em;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  vertical-align:middle;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: gainsboro;
  box-shadow: 0 0 2px DimGray inset;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  box-shadow:0 1px 2px #666;
  background-color: whitesmoke;
  -webkit-transition: .4s;
  transition: .4s;
}

/* Rounded sliders */
.slider.round {border-radius: 24px;}

.slider.round:before {border-radius: 50%;}

input:checked + .slider {
  background-color: limegreen;
  box-shadow: 0 0 2px Green inset;
}

input:checked + .slider:before {
  -webkit-transform: translateX(18px);
  -ms-transform: translateX(18px);
  transform: translateX(18px);
}

input[contenteditable="true"]:focus {
  outline: none;
}

.clearfix::after {
  content: "";
  clear: both;
  display: block;
}

.top-rad {
  border-top-left-radius:20px;
  border-top-right-radius:20px;
}

.checkbox-custom:checked ~ .input-box {
  display:none;
  opacity: 0;
}

.desc {
  padding: 15px;
  text-align: center;
}