*,
*::after,
*::before {box-sizing: border-box;}

/*---- COLOR PALETTE ----*/
:root {
  --color-primary: #327fa5;
  --color-primary-dark: #0d638d;
  --color-primary-accent: #3ae4e4;
  --color-primary-light: #A9E6EF;
  --color-secondary: #2f99bb;
  --color-secondary-dark: #0C5259;
  --color-secondary-accent: #0FC4DD;
  --color-black: #000000;
  --color-grey-dark: #403f3f;
  --color-grey: #a8a8a8;
  --color-grey-light: #efefef;
  --box-shadow: 0px 2px 7px 0px rgba(44, 44, 44, 0.2);
  --box-shadow-hover: 0px 2px 10px 0px rgba(12, 12, 12, 0.25);
  --color-accent: #ff8048;
  --color-accent-light: #ff9628;
  --color-accent-dark: #97401e;
  --border-radius: 15px;
}

/*---- TYPOGRAPY ----*/
/* font-family: 'Lato', sans-serif; */
/* font-family: 'Lora', serif; */
html {/* 62.5% of 16px = 10px*/font-size: 55%;}
html ul{font-size: 120%;}
/* OPERA GX */  @media screen and (max-width: 1500px) and (min-width: 1100px) {html {font-size: 55%;}}
/* OPERA GX */  @media screen and (max-width: 1500px) and (min-width: 1100px) {html ul{font-size: 130%;}}
body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
}
::-moz-selection { /* Code for Firefox */
    color: #fff;
    background: var(--color-primary-accent);
}  
::selection {
    color: #fff;
    background: var(--color-primary-accent);
}
/* Main Headings */
h1,h2,h3 {
    color: var(--color-primary);
    font-family: 'Poppins', serif;
    margin-bottom: 0.5rem;
}
h1 {font-size: 6rem;}
h2 {font-size: 4.4rem;}
h3 {font-size: 3.5rem;}
/* Sub Headings */
h4,h5,h6 {
    font-family: 'Lato', sans-serif; 
    margin: 1rem 0 0.5rem 0;
    color: var(--color-grey-dark);
}
h4 {font-size: 2.2rem;}
h5 {font-size: 2rem;}
h6 {font-size: 1.5rem;}
p {
    font-size: 1.35rem;
    font-family: 'Open Sans', sans-serif;
    margin-left: 0.5rem;
    margin-top: 0;
}
a {color: var(--color-secondary-accent);}
a:hover {color: var(--color-secondary-dark);}

/*---- BUTTONS ----*/
button {
    padding: 1rem 1.8rem;
    border: none;
    outline: none;
    border-radius: var(--border-radius);
    letter-spacing: 0.2rem;
    font-weight: 700;
    font-family: 'Lato', sans-serif;
}
button:hover {cursor: pointer;}
.btn-primary {
    color: #fff;
    background-color: var(--color-primary-accent);
}
.btn-primary:hover{background-color: var(--color-primary);}
.btn-light {
    color: #fff;
    background-color: var(--color-primary-light);
}
.btn-light:hover{background-color: var(--color-primary-accent);}
.btn-grey {
    color: #fff;
    background-color: var(--color-grey);
    text-align: left;
}
.btn-grey:hover{background-color: var(--color-grey-dark);}
.btn-outline {
    color: var(--color-primary);
    background-color: transparent;
    border: 2px solid var(--color-primary)
}
.btn-outline:hover{
    background-color: var(--color-primary);
    color: #fff;
}
.btn-outline-a {
    color: #fff;
    background-color: transparent;
    border: 3px solid #fff;
    transition: 200ms;
}
.btn-outline-a:hover{background-color: rgba(166, 75, 14, 0.526);}
.btn-warn {
    color: #fff;
    background-color: var(--color-accent);
}
.btn-warn:hover{background-color: var(--color-accent-dark);}
.btn-txt{background-color: transparent;}
.btn-txt:hover{color: var(--color-primary);}
.refine button {letter-spacing: normal;}

/*---- Responsiveness ----*/
/*flex-direction*//*flex-wrap*//*flex-flow*//*justify-content*//*align-items*//*align-content */
.flex-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.flex-row {flex-direction: row;}
.flex-col {flex-direction: column;}
.flex-center {
    justify-content: center;
    align-items: center;
    align-content: center;
    row-gap: 30px;
}
.fb-33 {flex-basis: 33%;}
.fb-25 {flex-basis: 25%;}
.fb-45 {flex-basis: 45%;}
.fb-75 {flex-basis: 75%;}
.fb-100 {flex-basis: 100%;}
.grid {display: grid;}
.grid1autox2{ /*used for impot box*/
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr;
}
.grid2x1auto{
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr;    
}
.grid1x2{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}
.grid1x3{
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
}
.grid4xauto{    
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 10px 10px;
    grid-auto-rows: minmax(min-content, max-content);
}
.grid-exp{
    grid-template-columns: 1fr;
    grid-template-rows: 10vh 80vh 10vh;
}
td, th {
    border: 1px solid var(--color-grey-light);    
    text-align: left;
    padding: 8px;
}  
th {
    font-size: 120%;
    background-color: var(--color-grey-light);
}
table{ 
    border-collapse: collapse;
    border: 1px solid var(--color-grey-light);
}
tr{border-bottom: 1px solid var(--color-grey-dark);}

/* .mob--hide{ display: inherit;}  just reset to origional*/
.mob--show {display: none;}
@media screen and (max-width: 870px) {
    .flex-row {flex-direction: column;}
    .mob--hide{ display: none;}
    .mob--show {display: inline-block;}
    .push {margin-left: 15px;}
    .pull {margin-right: 15px;}
    .grid4xauto{grid-template-columns: 1fr 1fr;}
    .grid1x2{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }
}

/*---- DESIGN ----*/
.border-rad {border-radius: var(--border-radius);}
.border-p {border: solid var(--color-primary);}
.border-l {border: solid var(--color-primary-light);}
.border-g {border: solid var(--color-grey);}
.border-thin {border-width: 1px;}
.border-none{border: none;}
.h-100 {height: 100%;}
.w-100 {width: 100%;}
.w-90 {width: 90%;}
.w-50 {width: 49%;}
.w-75 {width: 75%;}
.w-auto{width: auto;}
.h-auto{height: auto;}
.bg-lg {background-color: var(--color-grey-light);}
.bg-tw {background-color: #ffffffe0;}
.bg-tr {background-color: rgba(166, 75, 14, 0.526);}
.align-c{text-align: center;}
.align-r{text-align: right;}
.thin {font-weight: 300;}
.regular {font-weight: 400;}
.bold {font-weight: 700;}
.upper-c {text-transform: uppercase;}
.sub{font-size: 100%; color: var(--color-grey);}
.f-left{float: left;}
.f-right {float: right;}
.c-g {color: var(--color-grey);}
.c-red{color: var(--color-accent);}
.c-grn {color: var(--color-primary-accent);}
.c-w{color: #fff;}
.shadow {box-shadow: var(--box-shadow);}
.shadow:hover {box-shadow: var(--box-shadow-hover);}
.no-pad {padding: 0;}
.no-margin{margin:0;}
.no-wrap{white-space: nowrap;}
.img-cover{object-fit: cover;}
.img-contain{object-fit: contain;}
.scroll-y{overflow-y: scroll;}
.push {margin-left: 25px;}
.pull {margin-left: 25px;}
.content-center {
    display: block;
    margin: 0 auto;
}
@media screen and (max-width: 870px) {
    .w-90 {width: 100%;}
}

/*---- FORM ----*/
form, .form {padding: 10px 45px;}
input , textarea, select{
    padding: 5px 10px;
    margin: 7px 0;
}
input:focus, textarea:focus {outline: none;}
input:focus.acc-focus, textarea:focus.acc-focus, select:focus.acc-focus{box-shadow: 0px 0px 5px 0.001px var(--color-secondary-accent);}
textarea {
    resize: none; /* disable resize */
    font-family: 'Lato', sans-serif; 
}
/* Hide arrown from number input */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;}
input[type=number] {-moz-appearance: textfield;}/* Firefox */
form label {font-size: 150%;}
form label p {display: inline-block;font-size: 120%;margin: 0;}
.checkbox {
	-webkit-appearance: none; /*remove default styles*/
    cursor: pointer;
    height: 20px;
    position: relative;
}
.checkbox:hover {border: 1px solid var(--color-primary);}
.checkbox:checked {background-color: #e9ecee;}
.checkbox:checked:after { /* The check mark */
	content: '\2714';
	font-size: 13px;
	position: absolute;
	top: 0px;
	left: 5px;
}

/*---- BG's ----*/
.login, .home {
    background-image: url(images/login-bg.webp);
    background-size: cover;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: relative;
}

/*---- LOGIN PAGE ----*/
.login img {
    width: 150px;
    height: auto;
    padding: 20px;
    top: -160px;
    left: 10px;
    position: absolute;
}
.login .grid, 
.login .flex-container {margin: 25vh 21vw;}
.login .grid > div, 
.login .flex-container > div {
    background-color: #ffff;
    margin:0 1vw;
    padding: 30px 50px;
}
.login .grid > div:first-child,
.login .flex-container > div:first-child{background-color: #ffffffda;}
.login h4 {
    margin-top: 0;
    letter-spacing: 0.2rem;
    color: var(--color-grey);
}
.login p.sub {margin: -5px 0 5px 10px;}


/*---- HOME & MAIN PAGES ----*/
nav{
    width: 250px;
    height: 100vh;
    background-color: var(--color-primary);
    color: #fff;
    position: absolute;
}
nav img {
    width: 200px;
    height: auto;
    margin: 25px;
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
nav a h4:hover, nav li a:hover {color: var(--color-primary-accent);}
nav h4 {
    color: #fff;
    margin: 0 0 0 0;
}
nav li>h4 {padding: 0px 5px 0px 35px;}
nav a>h4{margin: 0 0 0 -10px;}
nav li a {
    display: block;
    width: 100%;
    padding: 0px 5px 0px 40px;
    margin: 5px;
    color: #fff;
    text-decoration:none;
}
.body{padding: 35px}
.body h2 {margin: 10px 0 0 0;}
.body span, .body .lrg-button {
    background-color: #fff;
    padding: 15px 30px;
    margin: 5px 15px;
}
.body .lrg-button:hover{background-color: #eee;}
.body .lrg-button {
    min-width: 50vw;
    max-width: 750px;
    text-align: left;
}
.body button p {
    margin: 5px;
    font-size: 1.8rem;
}
.body button p i.c-red,
.body button p i.c-grn {font-size: 1rem;}
.body form {
    height: 100%;
    max-height: 90vh;
    max-width: 750px;
    overflow-x: hidden;
}
.body form>button {
    min-width: 10px;
    max-width: none;
    text-align: left;
    padding: 8px;
    margin: 2px;
}
span.notify {
    display: inline-block;
    background-color: var(--color-accent);
    color: #fff;
    border-radius: 100%;
    height: 30px;
    width: 30px;
    font-size: 12px;
    padding: 8.5px 11.5px;
    text-align: center;
    margin: 0;
}

/*---- TABS ----*/
.tab {
    overflow: hidden;
    background-color: var(--color-primary);
    padding: 5px;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.tab .btn-outline {background-color: #fff;}
.tab .btn-outline:hover {color: #fff;}
.tab button.active {
    background-color: var(--color-primary);
    color: #fff;
    text-decoration: underline;
}
.tabcontent {
    display: none;
    height: 85vh;
    background-color: #fff;
}
.tabcontent table {font-size: 130%;}
.tabcontent form {height: auto;}

/*---- iFrames ----*/
.pdf{
    min-height: 350px;
    position: relative;
    min-width: 415px;
}
.pdf > iframe {
    position: absolute;
    top: 0;
}