:root{
  /*Facebook Blue*/
  --color-facebook: #3B5998;
  /*Twitter Blue*/
  --color-twitter: #55ACED;
  /*Background Blend Blue*/
  --background-blue-blend: #183a80;
  /*Standards*/
  --pure-white: #ffffff;
  --pure-black: #000000;
  --transparent: rgba(0,0,0,0);

  /*Button Color BLUE*/
  --Onahau: #bbe9ff;
  /*Bootstrap Disabled Color*/
  --bootstrap-disabled: #6c757d;
  /*Link Color*/
  --jacksons-purple: #2f2f8c;
  
  /*Attachment Background Color*/
  --eggshell: #EAE7DC;

  /*COLORS FROM MIKE  */
  --sherpa-blue: #013243;
  --san-marino: #446CB3;
  --alice-blue: #E4F1FE;
  --royal-blue: #4183D7;
  --picton-pale-blue: #59ABE3;
  --spray: #81CFE0;
  --shakespeare: #52B3D9;
  --humming-bird: #C5EFF7;
  --piction-blue: #22A7F0;
  --curious-blue: #3498DB;
  --madison: #2C3E50;
  --dodger-blue: #007bff;
  --ming: #336E7B;
  --ebony-clay: #22313F;
  --malibu: #6BB9F0;
  --summer-sky: #1E8BC3;
  --chambray: #3A539B;
  --pickled-bluewood: #34495E;
  --hoki: #67809F;
  --jellybean: #2574A9;
  /*--jacksons-purple: #1F3A93;*/
  --jordy-blue: #89C4F4;
  --steel-blue: #4B77BE;
  --fountain-blue: #5C97BF;

  /*FONT FAMILY*/
  --body-font: 'Segoe UI', 'Lucida Grande';
  --header-font: 'Exo 2', 'sans-serif';
}

/* ------------------------------------------------------------  Main Page Styles ------------------------------------------------------------ */
html {
  background: url(/Default/Default.jpg) no-repeat center 0 fixed;
  height: 100%;
  min-height: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
body {
  height:100%;
  background-color:transparent;
  box-sizing: border-box;
  clear: both;
  /*font-family:'Segoe UI' !important;*/
  font-family: var(--body-font)  !important;
  line-height: 1 !important;
}
#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 200px;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: auto;            /* Footer height */
}

button{
  /*font-family:'Segoe UI';*/
  font-family: var(--body-font);
}
/* ------------------------------------------------------------  Main Page Styles ------------------------------------------------------------ */

/* ------------------------------------------------------------  Container Styles ------------------------------------------------------------ */

.vertCenter{
  margin-top:5%;
  margin-bottom:auto;
  margin-left:auto;
  margin-right:auto;
}

.defaultFooter{
  width:100%;
  height:auto;
  position:absolute;
  bottom:0px;
}

.minimeatball{
  width:60px;
  height:auto;
  margin-bottom:5px;
}
.horizontal-minimeatball{
  width:50px;
  height:auto;
  margin-top: -10px;
  margin-bottom: auto;
  margin-left: 5px;
}
.container-fluid {
  padding-left: 0;
  padding-right: 0;
}
/*Resets Bootstrap Max Container Width to allow bigger page content*/
.container {
    max-width: 100%;
    resize: none;
    padding-left:0px;
    padding-right:0px;
}
.row{
  margin-left:0px;
  margin-right:0px;
}

.HomePageRow{
  margin-bottom:10px;
  display:inline;
}
.HomePageLoginCard{
  margin-left:auto !important;
  margin-right:auto !important;
  border:none !important;
  z-index:1;
}
/* ------------------------------------------------------------  Container Styles ------------------------------------------------------------ */

/* ------------------------------------------------------------  Button Styles ------------------------------------------------------------ */
/*Button Styling*/
.btn, .dt-button {
  background-color: #bbe9ff !important;
  background-color: var(--Onahau) !important;
  color: black !important;
  z-index:1 !important;
  border-radius:.25rem !important;
  margin-right:3px !important;
  border-color: #000 !important;
  border-color: black !important;
}
.btn{
  margin-bottom:10px;
}
.btn:hover, .dt-button:hover {
  background-color: #007bff  !important;
  background-color: var(--dodger-blue) !important;
  cursor: pointer;
  color: white !important;
}
.btnDisabled, .dt-button.disabled{
  background-color: #6c757d !important;
  background-color: var(--bootstrap-disabled) !important;
  color: white !important;
}
.btnDisabled:hover, .buttons-edit.disabled:hover{
  background-color: #6c757d !important;
  background-color: var(--bootstrap-disabled) !important;
  cursor: default !important;
}
/* ------------------------------------------------------------  Button Styles ------------------------------------------------------------ */
.card-title{
  margin-bottom:0px;
}
h6.card-header{
  width:100%;
  background: #001f3f;
  color: white;
}
/*styles from Tyler*/
.card-canvas
{
  margin-top:0px !important;
  border: #001f3f 1px;
  background-color: rgba(0,0,0,0);
  background-color: var(--transparent);
  /*border-radius: calc(.25rem - 1px) !important;*/
  /*box-shadow: 0 0 10px white;*/
}
.card-body.imageCard{
  background-color: #001f3f;
}
.card-body.whiteCard{
  background-color: white;
	z-index: 10;
}
.card-btn
{
  border: none !important;
  outline: none !important;
  background: none !important;
  color: white !important;
}
.actionButton 
{
  display: inline-flex;
  justify-content: center;
  color: white;
  cursor: pointer;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
  float: right;
}

.folderActionButtons{
  color: #001f3f !important;
  float: left !important;
}
.actionButton .icons , .folderActionButtons .icons
{
  position: relative;
  align-items: center;
  width: 1.25rem;
  margin-top: 5px;
}
.actionButton .icons i , .folderActionButtons .icons i
{
  position: absolute;
  /*top: 0;*/
  right: 0;
  display: block;
}
.actionButton .icons i:hover , .folderActionButtons .icons i:hover
{
  color: #007bff  !important;
  color: var(--dodger-blue)  !important;
}
.actionButton .icons .icon-default, .folderActionButtons .icons .icon-default
{
  transition: opacity .5s, transform .5s;
  /*opacity:1;*/
}
.actionButton .icons .icon-hover, .folderActionButtons .icons .icon-hover
{
  transition: opacity .5s, transform .5s;
  transform: rotate(-180deg) scale(0.5);
  opacity: 0;
}

.button_click
{
  transform: scale(1.2);
  box-shadow: 20px 15px rgba(0, 0, 0, 0.15);
}
.button_click_icon-hover 
{
  transform: rotate(0deg) scale(1) !important;
  opacity: 1 !important;
}
.button_click_icon-default 
{
  transform: rotate(180deg) scale(0.5);
  opacity: 0;
}
/* ---- Fixes Min/Max Icon bug in IE ---- */
.ie-styles
{
  margin-left:-5px;
}
/*styles from Tyler*/

.HeaderFont{
  font-family: 'Exo 2', sans-serif;
  font-family: var(--header-font), sans-serif;
}
.BodyFont{
  /*font-family:'Segoe UI';*/
  font-family: var(--body-font);
}
.WhiteFont{
  color: white;
}
.BlackFont{
  color: black;
}
.BoldFont{
  font-weight: bold;
}
.LeftFont{
  text-align: left;
}
.CenterFont{
  text-align: center;
  justify-content: center;
  width: 100%;
  display:block;
}
.PaddedFont{
  padding-top:3px;
  margin-bottom:15px;
}
.HugeFont{
  font-size:60px;
}
.ExtraLargeFont{
  font-size:30px;
  font-size: 2.5vw;
}
.LargeFont{
  font-size: 24px;
  font-size: 1.75vw;
}
.MediumFont{
  /*text-align: left;*/
  font-size: 18px;
  font-size: 1.25vw;
  /*padding-left: 15px;*/
}
.SmallFont{
  /*text-align: left;*/
  font-size:14px;
  font-size: 1vw;
  /*padding-left:15px;*/
}
.ExtraSmallFont{
  /*text-align: left;*/
  font-size:12px;
  font-size: .75vw;
  /*padding-left:15px;*/
}


/* ------------------------------ Header Style ------------------------------ */
.fc-button{
  background-image: none !important;
  background-color:#001f3f !important;
  color:white !important;
  text-shadow:none !important;
  box-shadow:none !important;
}

.fc-button:hover{
  color: #007bff  !important;
  color: var(--dodger-blue)  !important;
}

/*Social Media icon Section*/
.SocialSection{
  width:100%;
}

.fa-window-close {
  cursor:pointer !important;
}

.social [class*="fas fa-"], .social [class*="fab fa-"], .social [class*="far fa-"]{
    border-radius: 50%;
    color: white;
    display: inline-block;
    height: 50px  !important;
    line-height: 45px !important;
    margin-top: 15px;
    margin-bottom:5px;
    margin-left:5px;
    text-decoration:none;

    width: 50px !important;
    font-size: 25px !important;
    text-align: center;
    color: white;
    border:2px solid #ddd;  /*add border to the buttons */
    -moz-border-radius:27px;
    -webkit-border-radius:27px;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;  
}

.socialHeader [class*="fas fa-"], .socialHeader [class*="fab fa-"], .socialHeader [class*="far fa-"]{
    border-radius: 50%;
    color: white;
    display: inline-block;
    margin-top: 0px;
    margin-left:5px;
    margin-right:5px;
    margin-bottom:5px;
    text-decoration:none;

    width: 30px;
    text-align: center;
    color: white;
    border:2px solid #001f3f;  /*add border to the buttons */
    -moz-border-radius:27px;
    -webkit-border-radius:27px;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;  
}

/* Style all font awesome Social Media icons */
.social:hover {
  transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
}

.social{
    margin-left: auto;
    margin-right: auto;
}

/* Set a specific color for each brand */

/* Facebook */
.socialButtons .fa-facebook-f {
  background:#3B5998;
  background: var(--color-facebook);
}

.socialButtons .fa-facebook-f:hover {
  color:#3B5998;
  color: var(--color-facebook);
  background:  white;
  border-color:#3B5998;
  border-color: var(--color-facebook); /* change the border color on mouse hover */
  -webkit-filter: drop-shadow(0 1px 10px rgba(255,255,255,.8));
  -moz-filter:  drop-shadow(0 1px 10px rgba(255,255,255,.8));
  -ms-filter:     drop-shadow(0 1px 10px rgba(255,255,255,.8));
  -o-filter:    drop-shadow(0 1px 10px rgba(255,255,255,.8));
  filter:       drop-shadow(0 1px 10px rgba(255,255,255,.8)); 
}

/*SCaN*/

.socialButtons .fa-globe-americas {
  background: #2f2f8c;
  background: var(--jacksons-purple);
}

.socialButtons .fa-globe-americas:hover {
  color: #2f2f8c;
  color: var(--jacksons-purple);
  background:  white;
  border-color: #2f2f8c;
  border-color: var(--jacksons-purple); /* change the border color on mouse hover */
  -webkit-filter: drop-shadow(0 1px 10px rgba(255,255,255,.8));
  -moz-filter:  drop-shadow(0 1px 10px rgba(255,255,255,.8));
  -ms-filter:     drop-shadow(0 1px 10px rgba(255,255,255,.8));
  -o-filter:    drop-shadow(0 1px 10px rgba(255,255,255,.8));
  filter:       drop-shadow(0 1px 10px rgba(255,255,255,.8)); 
}

/* Twitter */
.socialButtons .fa-x-twitter {
  background:#55ACED;
  background: var(--color-twitter);
}

.socialButtons .fa-x-twitter:hover {
  color:#55ACED;
  color: var(--color-twitter);
  background:  white;
  border-color:#55ACED;
  border-color: var(--color-twitter);
  -webkit-filter: drop-shadow(0 1px 10px rgba(255,255,255,.8));
  -moz-filter:  drop-shadow(0 1px 10px rgba(255,255,255,.8));
  -ms-filter:     drop-shadow(0 1px 10px rgba(255,255,255,.8));
  -o-filter:    drop-shadow(0 1px 10px rgba(255,255,255,.8));
  filter:       drop-shadow(0 1px 10px rgba(255,255,255,.8)); 
}

.vertical-social{
  display:flex;
  flex-flow: row wrap;
}

/* FOOTER CSS */
.footerPic{
  width:100%;
  max-height:264px;
  max-width:400px;
}

.footerCol{
  text-align:right;
  padding-right:15px;
}

.footerContent{
  margin-top:auto;
  background: linear-gradient(to right, rgba(255,255,255,.75) 70%,rgba(255,255,255,0));
  margin-left:0px;
  padding-top:15px;
}

.custom-control-label::before, 
.custom-control-label::after {
  top: .8rem;
  width: 1.25rem;
  height: 1.25rem;
}

#customCheck1Label {
  cursor: pointer;
}

.loginRow{
  display: block;
  text-align: center;
}

#loginButton {
  margin-bottom: 0.3em;
}

.policyCheckbox{
  display: inline-block;
  margin-bottom:0.5em
}

.logoSection{
  margin-top: 5px;
}

.logoButton{
  height: 20px;
  width: auto;
  padding-right: 3px;
}

.meatball2{
/*   height: auto;
   width:60px;*/
   height: auto;
   width: 80px;
   /*max-width: 111px;*/
   background-color: rgba(255,255,255,0);
}

.alert{
  margin-top:5rem;
}

/*SCaN Home Link*/
.smallLogoImageLarge {
/*  height: auto;
  width: 133px;*/
  height: auto;
  width: 110px;
  padding-left: 15px;
  margin-top: 15px;
  margin-bottom:15px;
}

ul {
  list-style: none;
}

a {
  color: #2f2f8c;
  color: var(--jacksons-purple);
}

/*.footer-list-top a{
  color: #bbe9ff;
  color: var(--Onahau);
}*/

a:hover{
  color: #007bff;
  color: var(--dodger-blue);
}

h4 {
  margin-bottom: 10px;
}

.generic-text {
  font-size: .875em;
}

.flex-rw {
  display: flex;
  flex-flow: row wrap;
}

.footer-list-top {
  width: 33.333%;
  width:100%;
  margin-top:15px;
}

.footer-list-top > li {
  text-align: left;
  padding-bottom: 5px;
  /*color: white;*/
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ffffff;
    margin: 1em 0;
    padding: 0;
}

.footer-list-anchor {
  font-size: .875em;
}

.footer-list-text {
  font-size: .875em;
}

.footer-social-section {
  width: 100%;
  align-items: left;
  text-align:center;
  /*justify-content: space-around;*/
  position: relative;
  /*margin-top: 15px;*/
}



@media only screen and (max-width: 991px) {

  .ExtraLargeFont{
    font-size:30px !important;
  }
  .LargeFont{
    font-size: 24px !important;
  }
  .MediumFont{
    /*text-align: left;*/
    font-size: 18px !important;
    /*padding-left: 15px;*/
  }
  .SmallFont{
    /*text-align: left;*/
    font-size:12px !important;
    /*padding-left:15px;*/
  }

  .ExtraSmallFont{
    font-size:10px !important;
    padding: 0;
  }

  .footer-list-top > li { 
    text-align:center; 
  }
}

@media only screen and (max-width: 575px) {
  .vertical-social{
    display:none;
  }

  #content-wrap{
    padding-bottom:600px;
  }

  .footerContent{
    background: rgba(255,255,255,.75);
  }

  .horizontal-social{
    display:flex;
  }

  .defaultFooter{
    display:none;
  }
  
  .container {
    max-width: 100%;
    min-width: 100%;
    padding-left:0px;
    padding-right:0px;
  }

  .card{
    margin-left:0px;
    
  }

  .card-columns{
    column-count: 1;
  }

  
}