:root {
  --white:              #ffffff;
  --sticky-white:       #ffffff;
  --background:         #f3f4f6;
  --border:             #e6e7e9;
  --grey-text:          #acacac;
  --dark-grey:          #2f2e2c;
  --dark-grey-text:     #6f6f6f;
  --highlight-grey:     #dddddd;
  --black:              #000000;
  --sticky-black:       #000000;
  --trim:               #a00000;
  --darker-trim:        #700000;
  --yellow:             #9C9C36;
  --faint-trim:         #FFE6E6;
  --standout:           #ff007f;
  --sidebar:            #ffffff;
  --footer-social:      #474644;
  --amber:              #dea600;
  --rule-lines:         rgba(0, 0, 0, 0.1);
  --button-grey-back:   rgba(169, 171, 176, 0.2);
  --button-green-back:  rgba(77, 157, 136, 0.15);
  --button-hard-green-back:  rgba(77, 157, 136, 1);
  --button-yellow-back: rgba(255, 213, 0, 0.15);
  --button-blue-back:   rgba(0, 198, 255, 0.15);
  --button-red-back:    rgba(160, 0, 0, 0.15);
  --button-grey-text:   rgba(28, 31, 55, 0.6);
  --button-green-text:  rgba(77, 157, 136, 1);
  --white-transparent:  rgba(255, 255, 255, 0.5);
  --black-transparent:  rgba(0, 0, 0, 0.5);
  --website-footer-white: #ffffff;

  --red:                #a00000;
  --blue:               #4182D2;
  --green:              #4D9D88;
  
  --leftsidebar: 260px;
  --rightsidebar: 400px;
  --animtime: 200ms;
}

body.dark-mode {

  --white:              #333333;
  --background:         #222222;
  --border:             #000000;
  --grey-text:          #acacac;
  --dark-grey:          #2f2e2c;
  --dark-grey-text:     #6f6f6f;
  --highlight-grey:     #dddddd;
  --black:              #efefef;
  --trim:               #b05353;
  --faint-trim:         #FFE6E6;
  --standout:           #ff007f;
  --sidebar:            #111111;
  --footer-social:      #474644;
  --rule-lines:         rgba(0, 0, 0, 0.1);
  --button-grey-back:   rgba(169, 171, 176, 0.2);
  --button-green-back:  rgba(77, 157, 136, 0.15);
  --button-grey-text:   rgba(28, 31, 55, 0.6);
  --button-green-text:  rgba(77, 157, 136, 1);
  --white-transparent:  rgba(0, 0, 0, 0.5);
  --black-transparent:  rgba(255, 255, 255, 0.5);
  --website-footer-white: #ffffff;

  --red:                #C00000;
  --blue:               #4182D2;
  --green:              #4D9D88;

}

::-moz-selection {
  color: white;
  background: var(--trim);
}

::selection {
  color: white;
  background: var(--trim);
}



*,
*::before,
*::after {box-sizing: border-box; transition: var(--animtime) background; outline: none}

html {font-size: 14px; opacity: 0; transition: var(--animtime) opacity}
html.loaded {opacity: 1}
body, html {height: 100vh; width: 100vw; margin: 0; padding: 0; background-color: var(--background); font-size: 1rem; letter-spacing: 0; font-family: 'gilroy'; font-weight: normal; line-height: 1.4; color: var(--black)}

html.website {font-size: 13px}

p {margin: 0 0 10px 0}

a,
.link-replace {color: var(--trim); text-decoration: underline; cursor: pointer; transition: var(--animtime) all}
a:hover,
.link-replace:hover {}

h1, h2, h3, h4, h5 {font-weight: bold; margin: 10px 0 14px 0; vertical-align: middle}
h1 {font-size: 2rem; line-height: 1}
h2 {}
h3 {}
h4 {}
h5 {}

.list h1,
.list h2,
.list h3,
.list h4 {margin-top: 0}

.heading-with-desc h1,
.heading-with-desc h2,
.heading-with-desc h3,
.heading-with-desc h4 {margin-bottom: 0}

main h1 {display: inline-block;}
h1 a {display: inline-block; vertical-align: top;}

button,
.button,
input[type="submit"],
input[type="radio"] + label {text-decoration: none; padding: 10px 20px; font-size: 1rem; font-weight: bold; line-height: 1; border-radius: 8px; background-color: var(--trim); color: var(--white); border: none; cursor: pointer; border: 1px solid var(--trim); transition: var(--animtime) all; display: inline-block;}
button:hover,
.button:hover,
input[type="submit"]:hover {background-color: var(--white); color: var(--trim)}

input[type="radio"] + label {opacity: 0.3; background-color: var(--green)}
input[type="radio"]:checked + label {opacity: 1}
input[type="radio"] + label {padding: 0 10px; height: 24px; line-height: 24px; border: none}

body.dark-mode button,
body.dark-mode .button,
body.dark-mode input[type="submit"] {color: var(--black);}

button.button-small,
.button.button-small,
input[type="submit"].button-small {font-size: 0.8rem; font-weight: normal; padding: 4px 14px 4px 14px; line-height: 1; border: none; border-radius: 6px}

button.button-grey,
.button.button-grey,
input[type="submit"].button-grey {background-color: var(--button-grey-back); color: var(--button-grey-text); border: 1px solid var(--button-grey-back)}

button.button-green,
.button.button-green,
input[type="submit"].button-green {background-color: var(--button-green-back); color: var(--button-green-text); border: 1px solid var(--button-green-back)}

button.button-hard-green,
.button.button-hard-green,
input[type="submit"].button-hard-green {background-color: var(--button-hard-green-back); color: var(--sticky-white); border: 1px solid var(--button-hard-green-back)}

button.button-yellow,
.button.button-yellow,
input[type="submit"].button-yellow {background-color: var(--button-yellow-back); color: var(--yellow); border: 1px solid var(--button-yellow-back)}

button.button-red,
.button.button-red,
input[type="submit"].button-red {background-color: var(--button-red-back); color: var(--trim); border: 1px solid var(--button-red-back)}

button.button-blue,
.button.button-blue,
input[type="submit"].button-blue {background-color: var(--button-blue-back); color: var(--black); border: 1px solid var(--button-blue-back)}

label {color: var(--grey-text); display: block;}

form {padding-bottom: 20px}
form .required {color: var(--trim)}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"] {border: none; background-color: var(--sticky-white); color: var(--sticky-black); width: 100%; border-radius: 8px; padding: 0 20px; height: 40px; margin: 0 0 0 0; border: 1px solid transparent; transition: var(--animtime) border; max-width: 100%}
input[type="text"],
input[type="date"],
input[type="time"],
input[type="email"],
input[type="password"],
input[type="number"] {border-radius: 8px; border: solid 1px var(--border); color: var(--sticky-black); background-color: var(--sticky-white); padding: 0.5rem 0.5555rem; max-width: 100%}
input[type="time"] {width: 100%}
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="password"]:focus,
input[type="number"]:focus {border: 1px solid var(--trim)}

input[type="text"]:last-child,
input[type="search"]:last-child,
input[type="email"]:last-child,
input[type="password"]:last-child {margin-bottom: 0}
input[type="radio"] {display: none}

.field {padding-left: 0 !important; padding-right: 0 !important}

.field-textarea textarea { width: 100%; border-radius: 8px; border: solid 1px var(--background); color: var(--sticky-black); background-color: var(--sticky-white); padding: 0.5rem 0.5555rem; }



.field-checkbox .field-input label {font-weight: bold; font-size: 14px; color: black; user-select: none; display: inline-block;}
.field-checkbox .field-input input[type="checkbox"] {margin-left: 10px; margin-right: 10px; transform: scale(1.2);}
.field-checkbox.field-wrapper-horizontal {display: flex; flex-wrap: wrap; gap: 20px 0;}
.field-checkbox .field-input-horizontal {display: flex; align-items: center; max-width: 150px; align-items: flex-start;}
.field-checkbox .field-input-horizontal label {margin-right: 30px; line-height: 1.2em;}
.field-checkbox .field-input-horizontal input[type="checkbox"] {margin-top: 5px;}

.field-select.field-wrapper-unconstrained .select-field { width: unset; }
.field-select.field-wrapper-full-width .select-field { width: 100%; }

.button.check-all-checkboxes {vertical-align: middle; margin-right: 20px}
.field-option {overflow: hidden; display: inline-block; margin: 0 20px 0 0; vertical-align: middle}
.field-option input {float: left; height: 28px; margin: 0 0 0 0}
.field-option label {float: left; height: 28px; line-height: 28px; padding-left: 10px}

/* For Placeholder */
.field .checkbox {font-weight: bold; font-size: 14px; color: black;}
.field .checkbox input[type="checkbox"] {margin-left: 20px; margin-right: 10px; transform: scale(1.2);}

hr {margin-top: 30px; margin-bottom: 30px; border-top: 2px var(--black) solid; border-left: none; border-right: none; border-bottom: none;}
hr.divider-solid {border-top: 2px var(--black) solid; border-left: none; border-right: none; border-bottom: none;}
hr.divider-dashed {border-top: 2px var(--black) dashed; opacity: 0.3;}

.main-container main ol,
.main-container main ul {padding: 0}

.main-container main .two-col > ol,
.main-container main .two-col > ul,
.main-container main ol.two-col,
.main-container main ul.two-col {column-count: 2; column-gap: 5px}
.main-container main .three-col > ol,
.main-container main .three-col > ul,
.main-container main ol.three-col,
.main-container main ul.three-col {column-count: 3; column-gap: 5px}
.main-container main .four-col > ol,
.main-container main .four-col > ul,
.main-container main ol.four-col,
.main-container main ul.four-col {column-count: 4; column-gap: 5px}

.main-container main ol {}
.main-container main ul {}

ol li,
ul li {margin: 0 0 5px 15px; border-radius: 8px;}


ol.hide-bullets li,
ul.hide-bullets li {list-style: none; margin-left: 0}



.main-container main ol li {}
.main-container main ul li {}

.main-container main ol li > a,
.main-container main ul li > a {display: block; text-decoration: none; padding: 10px; background-color: var(--white)}

.main-container main ol li > a {}
.main-container main ul li > a {}

.main-container main ul h1,
.main-container main ul h2,
.main-container main ul h3,
.main-container main ul h4,
.main-container main ul h5 {margin-bottom: 0}

a.select-field {text-decoration: none !important;}
.select-field * {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: var(--black);}
select {height: 40px; opacity: 0}

.select-field {position: relative; font-size: 0.8888rem; background: transparent; cursor: pointer; display: block; text-decoration: none; color: var(--black); height: 40px; max-width: 100%;}
.select-field::before,
.expand-form::before {width: 0.6933rem; height: 0.235rem; background-color: var(--caption); mask-image: var(--iconselectarrow); -webkit-mask-image: var(--iconselectarrow); content: ''; position: absolute; right: 0.5555rem; top: 50%; transform: translateY(-50%); z-index: -1; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center;}

.select-field.active {}
.select-field.active::before {transform: translateY(-50%) rotate(180deg);}
  .select-field .select-inner {}
    .select-field .selected {height: 40px; padding: 0.3rem 0.5555rem; border: 0.02777rem solid var(--border); border-radius: 8px; background: var(--white) url(../images/down-arrow.png) calc(100% - 20px) 50% / 16px 16px no-repeat; border: solid 1px var(--background)}
    .select-field.active .selected {background: var(--white) url(../images/up-arrow.png) calc(100% - 20px) 50% / 16px 16px no-repeat;}

    .select-field .options {display: none; position: absolute; top: 100%; left: 0; width: 100%; background-color: var(--white); z-index: 1000; border: 1px solid var(--white); border-top: 0; border-radius: 0 0 8px 8px;}
    .select-field.active .options {display: block; border: 1px solid var(--background); border-top: none}
      .select-field .options .option {color: var(--black); padding: 0.2755rem 0.5555rem; display: block; text-decoration: none !important;}
      .field-wrapper-highlighted .select-field .options .option {color: var(--red)}
      .field-wrapper-highlighted .select-field .options .option.highlighted {font-weight: bold; color: var(--green)}
      .select-field .options .option.unsuitable {font-weight: bold; color: var(--red)}
      .select-field .options .option:hover,
      html.focus-active .select-field .options .option:focus-within {background-color: var(--trim); color: var(--white)}
      .select-field .options .option.active {color: var(--black); background-color: var(--white)}

html.modal-active .modal-wrapper {display: block}
.modal-wrapper {position: fixed; display: none; width: 100%; height: 100%; z-index: 9999; background-color: var(--white-transparent); top: 0; left: 0;}
.modal {position: fixed; top: 50%; left: 50%; width: 100%; max-width: 600px; padding: 30px; background-color: var(--white); transform: translate(-50%, -50%); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px}
.dark-mode .modal {border: 1px solid rgba(255, 255, 255, 0.1);}
.modal-inner {text-align: center}


/* #### DASHED BORDER #### */

.border {position: relative;}

.border-left::before,
.border-top::before,
.border-right::after,
.border-bottom::after {background-image: url(../images/square.svg); background-repeat: repeat; background-size: 20px 20px;position: absolute; content: '';}

.border-left::before,
.border-right::after {width: 1px; height: 100%}
.border-top::before,
.border-bottom::after {height: 1px; width: 100%}

.border-top {padding-top: 1px}
.border-left {padding-left: 1px}

.border-top::before,
.border-left::before {left: 0; top: 0;}

.border-bottom {padding-bottom: 1px}
.border-right {padding-right: 1px}

.border-bottom::after {left: 0; bottom: 0;}
.border-right::after {right: 0; top: 0;}

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




.banner {position: relative;}
.image {display: block; position: relative;}
.image img {display: inline-block; max-width: 100%; height: auto;}
.banner .action {position: absolute; bottom: 14px; right: 14px;}


.columns {column-count: 2; column-gap: 100px;}
.columns-3 {column-count: 3; column-gap: 50px;}
.columns-4 {column-count: 4; column-gap: 25px;}

.columns p,
.columns li {break-inside: avoid; list-style: none; margin-left: 0; margin-bottom: 34px}

ul.columns {padding: 0; margin-left: 0}


.grey-text {color: var(--dark-grey-text)}
.trim-text {color: var(--trim)}
.info-text {color: var(--dark-grey-text)}







.calendar table {width: 100%}
.calendar table * {cursor: default;}
.calendar table td {padding: 4px; width: 14.285%; vertical-align: top; background-color: var(--background); border-radius: 10px}
.calendar table td:empty {opacity: 0.2}
.calendar table td.past-date {opacity: 0.5}
.calendar table td span {display: block; width: 35px; height: 35px; text-align: center; line-height: 35px; margin: 0 auto; border-radius: 50%; cursor: pointer;}
.calendar td.today {background-color: var(--trim); color: var(--white)}
.calendar td span.has-event {background-color: var(--green); color: var(--white)}
/*.calendar td.today span.has-event {background-color: var(--trim); border: 3px solid var(--green); line-height: 32px}*/

.calendar .calendar-title {overflow: hidden; text-align: center; font-weight: bold; text-transform: uppercase; margin-bottom: 24px}
.calendar .calendar-title span.date {display: inline-block; width: 150px; text-align: center; line-height: 30px; height: 30px; vertical-align: middle}
.calendar .calendar-title span.action {display: inline-block; cursor: pointer; height: 30px; line-height: 30px; width: 30px; border-radius: 50%; background-color: var(--trim); font-size: 1.4rem; vertical-align: middle; color: var(--white)}
/*.calendar .calendar-title span.prev {float: left}
.calendar .calendar-title span.next {float: right}*/


.cal-event {text-align: center; border-radius: 10px; background-color: var(--faint-trim); padding: 4px; margin-bottom: 4px; margin-top: 4px}
.cal-event:last-child {margin-bottom: 0}
.cal-event h4 {margin: 0; color: var(--trim); line-height: 1.4}
.cal-event p {margin: 0; color: var(--black); line-height: 1.4}












pre.debug {margin: 14px 0; padding: 14px; line-height: 18px; border: 2px solid var(--standout); border-radius: 4px; font-size: 12px; font-family: 'Courier New'; color: var(--black); white-space: pre-wrap;}
pre.debug .debug-inner {position: relative; background-size: 18px 18px !important; width: 100%;
  background: 
    linear-gradient(0deg, var(--rule-lines) 1px, transparent 1px);
/*    linear-gradient(90deg, var(--rule-lines) 1px, transparent 1px);*/
}
pre.debug .debug-inner-inner {padding-top: 3px}


pre.oops {margin: 14px 0; padding: 14px; line-height: 18px; font-size: 14px; font-family: 'Arial'; color: var(--trim)}