@font-face {
  font-family: "Creato Display";
  src: local(Creato Display),
       url("/assets/CreatoDisplay-Light.otf");
  font-weight: 300;
}
@font-face {
  font-family: "Creato Display";
  src: local(Creato Display),
       url("/assets/CreatoDisplay-LightItalic.otf");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Creato Display";
  src: local(Creato Display),
       url("/assets/CreatoDisplay-Regular.otf");
}
@font-face {
  font-family: "Creato Display";
  src: local(Creato Display),
       url("/assets/CreatoDisplay-RegularItalic.otf");
  font-style: italic;
}
@font-face {
  font-family: "Creato Display";
  src: local(Creato Display),
       url("/assets/CreatoDisplay-Bold.otf");
  font-weight: bold;
}
@font-face {
  font-family: "Creato Display";
  src: local(Creato Display),
       url("/assets/CreatoDisplay-BoldItalic.otf");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "Creato Display";
  src: local(Creato Display),
       url("/assets/CreatoDisplay-Black.otf");
  font-weight: 900;
}
@font-face {
  font-family: "Creato Display";
  src: local(Creato Display),
       url("/assets/CreatoDisplay-Black.otf");
  font-weight: 900;
  font-style: italic;
}

html {
  scroll-behavior: smooth;
}

body, td, input, select, option {
  font-family: Creato Display, Sans;
  font-weight: 300;
  font-size: 3cqmin;
}

body, td
  background: #ffffff;
  color: #003333;
}

body {
  width: 100dvw;
  height: 100dvh;

  top: 0;
  bottom: 0;
  margin: 0;
}

.head {
  font-size: 6cqmin;
  font-weight: 900;  
}

a {
  text-decoration: none;
  font-weight: bold;
  color: #336666;
}

a:hover {
  text-decoration: underline;
}

.menu {
  padding-left: 2dvh;
  text-align: center;
}

.container {
  display: flex;
  flex-wrap: wrap;
  padding-left: 8dvw;
  padding-right: 8dvw;
  width: 84dvw;
  gap: 64px 128px;
  background: #ffffff;
  padding-bottom: 4dvh;
}

.box {
  flex-grow: 1;
  color: #003333;
}

.divider {
  flex-grow: 1;
  background-image: linear-gradient(to right, transparent 0%, white 100%), url(/assets/pawbg.png);
  height: 64px;
  min-width: 70dvw;
}

input[type=text], input[type=password], textarea {
  background: #ffffff;
  color: #003333;
}

input[type=submit] {
  border: 1px solid #003333;
  padding: 12px 24px;
  border-radius: 8px;
  margin-bottom: 1px;
  margin-right: 2px;
}

input[type=text], input[type=password], textarea {
  border: 1px solid #003333;
  padding: 4px;
  border-radius: 8px;
  margin-bottom: 1px;
  margin-right: 2px;
}

input[type=text]:focus, input[type=password]:focus, textarea:focus {
  border-color: #44aaaa;
  background-color: #ddffff;
}

select, input {
  background-color: #ddffff;
  border-color: #003333;
  border-radius: 8px;
  padding: 4px; 
  border-style: solid;
  box-shadow: none;
  outline: none;
  border-width: 1px;
}

input[type="file"] {
    display: none;   
}
.custom-file {
    background-color: #442200;
    border: 1px solid #884400;
    border-radius: 8px;
    color: #ffffff;
    display: inline-block;
    padding: 4px 12px;
    cursor: pointer;
} 
/* The ccheck */
.ccheck {   
  display: block;
  position: relative;
  padding-left: 35px;
  margin-top: 2px;
  margin-bottom: -10px;
  cursor: pointer;   
  -webkit-user-select: none;
  -moz-user-select: none;   
  -ms-user-select: none;
  user-select: none;
}
  
/* Hide the browser's default checkbox */
.ccheck input {
  position: absolute;
  opacity: 0; 
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  border-radius: 8px;
  border: 1px solid #884400;
  background-color: #442200;
}
 
.roundmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  border-radius: 13px;
  border: 1px solid #884400;
  background-color: #442200;
}

/* On mouse-over, add a grey background color */
.ccheck:hover input ~ .checkmark {
  background-color: #884400;
}

.ccheck:hover input ~ .roundmark {
  background-color: #884400;
}

input:hover, select:hover, .custom-file:hover {
  background-color: #eeffff;
} 

input:active, select:active, .custom-file:active {
  background-color: #aadddd;
}
  
/* On mouse-over, add a grey background color */
.ccheck:hover input:checked ~ .checkmark {
  background-color: #884400;
}
  
.ccheck:hover input:checked ~ .roundmark {
  background-color: #884400;
}
/* When the checkbox is checked, add a blue background */
.ccheck input:checked ~ .checkmark {
  background-color: #442200;
}
 
.ccheck input:checked ~ .roundmark {
  background-color: #442200;
}
  
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute; 
  display: none;
}
 
.roundmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.ccheck input:checked ~ .checkmark:after {
  display: block;
}

.ccheck input:checked ~ .roundmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.ccheck .checkmark:after {
  left: 9px;
  top: 5px;   
  width: 5px;
  height: 10px; 
  border: solid #ff8800;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
 
.ccheck .roundmark:after {
  left: 4px;
  top: 4px;
  width: 15px;   
  height: 15px;
  border: solid #ff8800;
  border-width: 1px;
  border-radius: 10px;
  background-color: #ff8800;
}

.tooltip .tooltiptext {
  visibility: hidden;
  min-width: 160px; 
  background-color: #44220088;
  color: #fff;
  text-align: center;
  border: 1px solid #ff880088;
  border-radius: 6px;
  padding: 4px 0;
 
  display: block;
  position: absolute;
  z-index: 1;
  margin-top: 12px;
  margin-left: -6px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 12px;
  margin-top: -5px;  
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #ff8800 transparent;
}
  
.tooltip:hover .tooltiptext {
  visibility: visible;
}