@import url('normalize.css');
@import url('navigation.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');

/************************
*** Site Specific CSS ***
*************************/

/* DEMO - Background Striped */
.bg-striped {
  padding:1em;
  border: 1px solid gainsboro;
  border-radius: 5px;
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 2px, transparent 2px, rgba(0,0,0,.3) 3px);
  background-size:4px 4px;
}

/* CSS Variables */
:root {
    --background: #f3f3f3;  /* background color */
  --contentWidth: 1440px;     /* main content width */
        --header: 160px;      /* header height */
        --footer: 188px;      /* footer height */
     --cardColor: #ffffff;
 --success-color: #2ecc71;
   --error-color: #e74c3c;
 --form-bg-color: #fefff9;
}

/* Site */
.site { display:flex; flex-direction:column; height:100vh; background-color: var(--background); }
.site-content { flex:1 0 auto; width:100%; padding: 1em; max-width: var(--contentWidth); margin: auto; }
.site-content .fullwidth { width: 100vw; margin:1rem 0 1rem calc(-50vw + 50%); }
.site-content .fw-cont { max-width: var(--contentWidth); padding: 0 .5em 1.15em; }

/* Header */
header { display: flex; justify-content: space-between; min-height:var(--header); background: #333 url('/_Assets/img/header_background.jpg') no-repeat 0 -310px; background-blend-mode: color-dodge; color:hsl(0, 0%, 88%); }
header .mainTitle { font-size: clamp(3em, 6vw, 4em); color: hsl(249deg 100% 96%); font-family:"Arial Black", Gadget, sans-serif, Geneva, sans-serif; text-shadow:4px 5px #333; width:100%; text-align:left; top:50px; left:53%; position: absolute; transform:translate(-50%, -50%); }
header .subTitle { font-size: clamp(1.25em, 2.75vw, 1.85em); font-family: 'Righteous', cursive; text-shadow: -1px -1px 0 rgb(88, 88, 88), 1px -1px 0 rgb(88, 88, 88), -1px 1px 0 rgb(88, 88, 88), 1px 1px 0 rgb(88, 88, 88); letter-spacing:2px; position:relative; top:84px; left:2.75vw; color: hsl(248.9, 77.1%, 93.1%); height: 34px; margin-left: 1rem; }
header #login-area { z-index: 100; }
header fieldset { margin: .35rem .5rem .5rem; border: 1px solid #b8b8b8a1; border-radius: 15px; height: 143px; width: 290px; }
header fieldset a { color: rgb(158, 158, 158); text-decoration: none; }
header fieldset a:hover { color: ivory; }
header fieldset #login-buttons { display: flex; justify-content: space-evenly; align-items: flex-end; }
header fieldset #login-buttons button { padding: .25rem .5rem .35rem; margin-top: .75rem; background-color: darkgrey; border: 1px solid hsla(0, 0%, 94.5%, 0.3); color: rgb(54, 54, 54); line-height: 1; }
header fieldset #login-buttons button:hover { background: lightslategray; color: ivory }
header fieldset .login-anchors { color: rgb(122, 122, 122); display: inline-block; padding-top: .25rem; }
header fieldset legend { padding:.125rem .5rem; border:1px solid hsla(0, 0%, 72%, 0.63); background: grey; border-radius: 0 10px 0 10px; }
header #frmLoginFields > div { display: flex; text-align: right; }
header #frmLoginFields > div > * { margin: .25rem .5rem 0 0; }
header #frmLoginFields > div :first-child { flex: 1 1 80px; }
@media screen and (max-width: 600px) { header .mainTitle, header .subTitle { display:none; } header #login-area { width: 100%; margin-right: 1rem; } header fieldset { width: 100%; }}

/* Login */
.badLogin { height: 60px; width: 100%; position: absolute; top: 0; right: 0; background: maroon; color: ivory; padding: 1rem; text-align: center; font-size: 1.25em; z-index: 200; }
.badLogin div { position: absolute; top: 0; right: 0; background: rgb(192, 20, 20); padding: .125rem .55rem; font-size: .88em; }
.badLogin div:hover { background: red; cursor: pointer; }

/* Content */
article hr, aside hr { border:1px solid #e0e0e0; margin: .5em 0; top:-.25em; }
h1, h2, h3 { color: #333; }
h1 { font-size: 1.500em; }
h2 { font-size: 1.250em;}
h3 { font-size: 1.125em; }
p { font-size: clamp(.92em, 1.75vw, 1.1em); text-align: justify; text-indent: 1em; }
.clrWhite { color: hsl(0, 0%, 88%); }
.dashed { border: 1px dashed; color: hsla(0, 0%, 66%, 0.527); }
.title{ margin: 0 0 .5em; font-size: 2em; font-weight: 900; color:#ff870c; font-size: clamp(1.75em,5vw,2.25em); letter-spacing: .05em; text-transform: capitalize; }
.card { padding: 1rem; border: 1px solid gainsboro; background-color: var(--cardColor); box-shadow: 0 0 .05em rgba(0, 0, 0, .25); }
.card-simple { background: white; margin: 0 .25rem .25rem 0; padding: .5rem 1.5rem; outline: 1px solid gainsboro; }
.hide { display: none; }

/* Helper Classes */
.img-responsive { display:block; max-width:100%; height:auto; }
.center { margin:0 auto; }
.right { margin-left:auto; }
.left { margin-right:auto; }
.shadow { box-shadow:2px 1px 5px 1px hsl(0, 0%, 78%); }
.box-shadow { box-shadow:0px 0px 4px 0px #B8B8B8; }
.border, .border-drop-shadow { border:1px solid hsl(0, 0%, 88%); padding:.25rem .5rem; margin-bottom: .5rem; }
.border-drop-shadow { box-shadow:3px 3px 3px -1px hsl(0, 0%, 72%); box-sizing:border-box; }
.border-topBottom { border-top:1px solid hsl(0, 0%, 75%); border-bottom:1px solid hsl(0, 0%, 75%); padding:.5rem; }
.text-nowrap { white-space: nowrap; }
.text-left { text-align:left; }
.text-center { text-align:center; }
.text-right { text-align:right; }
.text-justify { text-align:justify; }
.overflow-x { overflow-x: auto; }
.radius-10 { border-radius:10px; padding:1rem; }

/* Spacing Classed */
.mt-05 { margin-top: 0.50rem; }
.mt-10 { margin-top: 1.00rem; }
.mr-25 { margin-right: 0.25rem; }
.gap-025 { gap: .25rem; }
.gap-10 { gap: 1.0rem; }
.gap-15 { gap: 1.5rem; }

/* Buttons */
button { line-height: 1; text-align: center; padding: .75rem 1.25rem; background: cornsilk; border: 1px solid; border-color: #e6e6e6 #ccc #ccc  #e6e6e6; text-transform: capitalize; }
button:hover { background: wheat; cursor: pointer; }
.button-container { display: flex; flex-wrap: wrap; justify-content: center; white-space: nowrap; }
.button-container > * { margin-bottom: .25rem; }
.button-container > *:not(:last-child) { margin-right: .25rem; }

/* Footer */
footer { background:lightgrey url('/_Assets/img/footer_background.jpg') repeat-x 0 0; padding:0; margin: 0; min-height: var(--footer); display: flex; justify-content: center; }
footer div#footer_logo { position: relative; bottom: 0; margin: 0 auto; }
@media screen and (max-width: 990px) { footer div#footer_logo { display:none; }}

/* Grid Classes */
.grid { display: grid; }

/* Flex Classes */
.flex-cont { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-column { flex-direction: column; }
.flex-1 { flex: 1 1; }
.flex-2 { flex: 2 1; }
.basis-300 { flex-basis: 300px; }

/* Distribute Space (all items in container - Do not set auto margins for this to work) */
.spaceAround { -webkit-justify-content:space-around; -ms-justify-content:space-around; justify-content:space-around; }
.spaceBetween { -webkit-justify-content:space-between; -ms-justify-content:space-between; justify-content:space-between; }

/* Justify Items (all items in container) */
.justifyLeft { -webkit-justify-content:flex-start; -ms-justify-content:flex-start; justify-content:flex-start; }
.justifyCenter { -webkit-justify-content:center; -ms-justify-content:center; justify-content:center; }
.justifyRight { -webkit-justify-content:flex-end; -ms-justify-content:flex-end; justify-content:flex-end; }

/* Align Items (all items in container - needs to be larger than the flex items height) */
.alignItemsTop { -webkit-align-items:flex-start; -ms-align-items:flex-start; align-items:flex-start; }
.alignItemsCenter { -webkit-align-items:center; -ms-align-items:center; align-items:center; }
.alignItemsBottom { -webkit-align-items:flex-end; -ms-align-items:flex-end; align-items:flex-end; }
.alignItemsStretch { -webkit-align-items:stretch; -ms-align-items:stretch; align-items:stretch; }
.alignItemsBaseline { -webkit-align-items:baseline; -ms-align-items:baseline; align-items:baseline; }

/* For alignment of children */
.selfTop { -webkit-align-self:flex-start; -ms-align-self:flex-start; align-self:flex-start; }
.selfCenter { -webkit-align-self:center; -ms-align-self:center; align-self:center; }
.selfBottom { -webkit-align-self:flex-end; -ms-align-self:flex-end; align-self:flex-end; }
.selfStretch { -webkit-align-self:stretch; -ms-align-self:stretch; align-self:stretch; }

/* Flex Buttons */
.flexBTN-toolBar { display:flex; flex-flow:wrap; margin-top: .5rem; }
.flexBTN-toolBar a, .flexBTN-toolBar a:hover, .flexBTN-toolBar a:visited { color:black; text-decoration:none; }
.flexBTN-toolBar .flexBTN-button, .flexBTN-toolBar button.flexBTN-button { display:flex; text-align:center; margin:2px; padding:.5rem .75rem; background:#f9f9f9; border:1px solid #dedede; border-top:1px solid #eee; border-left:1px solid #eee; border-radius:0; line-height:1; }
.flexBTN-toolBar .flexBTN-button.flexBTN-disabled { background:#fbfbfb; color:gainsboro; }
.flexBTN-toolBar .flexBTN-button-text { padding:.25rem .5rem .25rem .15rem }
.flexBTN-toolBar .flexBTN-button:not(.flexBTN-disabled):hover, .flexBTN-toolBar button.flexBTN-button:not(.flexBTN-disabled):hover { background:#dff4ff; border:1px solid #c2e1ef; cursor:pointer; color:black; }

/* DataTables */
.tblBTN{padding:.4rem .5rem .4rem;box-shadow:1px 1px 0 0 #f1eaea;color:hsla(0,0%,38%,1);min-width:2rem;line-height:0;border:1px solid #d6d6d6;display:inline-block;cursor:pointer;background:#fff -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#ececec)) -webkit-linear-gradient(top,#fff 0,#ececec 100%);background:-moz-linear-gradient(top,#fff 0,#ececec 100%);background:-ms-linear-gradient(top,#fff 0,#ececec 100%);background:-o-linear-gradient(top,#fff 0,#ececec 100%);background:linear-gradient(to bottom,#fff 0,#ececec 100%);vertical-align:bottom}
.tblBTN:hover{color:#dc143c;cursor:pointer}

/* Modal Window */
.modal-window { z-index:900; position:fixed; top:0; right:0; bottom:0; left:0; overflow-y:auto; -ms-overflow-y:auto; text-align:center; background:hsla(240, 25%, 76%, 0.48); padding:0 1rem; }
.modal-body { position:relative; background:#fefefe; max-width:100%; margin:0 auto 10px; border:1px solid darkgray; box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); text-align:left; -webkit-animation-name:animatetop; -webkit-animation-duration:0.4s; animation-name:animatetop; animation-duration:0.4s; }
.modal-header { white-space:nowrap; text-align:left; font:bold 1.25rem/2.0 "Arial Black", Gadget, sans-serif; height:42px; padding:.35rem 1rem; background:hsl(0, 0%, 97.5%); border-bottom:1px solid hsl(0, 0%, 92%); }
.modal-content { padding:1rem 1.5rem .5rem; background:white; }
.modal-footer { padding:.15rem; background:hsl(0deg 0% 98% / 10%); text-align:right; border-top:1px solid hsl(0, 0%, 92%); min-height:30px; }
.modal-close { color:white; position:absolute; top:0; right:0; font-size:28px; height:42px; width:60px; background:gainsboro; line-height:41px; text-align:center; font-weight:bold; font-family:"Arial Black", Gadget, sans-serif; }
.modal-close::after { content:'X'; }
.modal-close:hover { cursor:pointer; background:hsl(0, 100%, 61%); }
@-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; }
}