body {
  margin: 0 auto;
  background-color: #232023;
  /* HACK: datepicker will use the default body color only*/
  color:black;
  font-family: "Verdana"; 
}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  body {
    margin-left: 5%;
    margin-right: 5%;
  }
}

/* HACK: datepicker will use the default body color only*/
section {
  color: white;  
}

.invalid-feedback {
  font-size: 1.2em;
  font-weight: bold;
}

.fa-bboogie-error {
  font-size: 2em;
  margin-right: 8px;
  margin-left: 8px;
}

.fa-innhopp {
  font-size: 38px;
  color: white;
  margin-right: 3px;
  margin-left: 3px;
}

.riggerPill {
   font-size: 14pt;
   color:white;
   background-color:#db3832;
   border:5px solid black;
}

.activeRigger {
  border:5px solid white;
  background-color: black;
  color:#db3832;
  box-shadow: 0px 0px 10px 3px #db3832, inset 0px 0px 10px 3px #f25650;
}

.sdccorePill {
   font-size: 14pt;
   color:white;
   background-color:#db3832;
   border:5px solid black;
}

.activeSdccore {
  border:5px solid white;
  background-color: black;
  color:#db3832;
  box-shadow: 0px 0px 10px 3px #db3832, inset 0px 0px 10px 3px #f25650;
}

.fa-icehopp-spinner {
  font-size: 30px;
  color: white;
  margin-right: 3px;
  margin-left: 3px;
}

.uploadSuccess{
  color: green;
  font-weight: bold;
  font-size: 3em;
}

.uploadFail{
  color: #db3832;
  font-weight: bold;
  font-size: 1em;
}

.uploaddocsImgPreview{
  width: 20%;
  border-radius: 20px;
  margin:10px;
}

#validationStatus {
  font-size: 1em;
  color: #db3832;
  font-weight: bold;
}

.price {
  color: #db3832;
  font-size: 2em;
}

.stripePayButton {
  background-color:#db3832;
  color:white;
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
  border: 2px solid #db3832;
}

.stripeCardErrors{
  margin-left:20px;
}

.stripePayButton:hover {
  background-color:#bf2f2a;
}

.stripeCardElement {
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
  border: 2px solid #db3832;
}

.logo {
  width: 100%;
}

.container {
	position: relative;
  	word-wrap: break-word; 
}

.row {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-align-content: center;
	-ms-flex-line-pack: center;
	align-content: center;
	-webkit-align-items: start;
	-ms-flex-align: start;
	align-items: start;
}

.col-d {
	  display: flex;

	  -webkit-justify-content: center;
	    align-content: center;
  justify-content: center;

}

.col{
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

section {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover; 
  background-color: #232023;
}

.red-borderX {
  border-style: solid; 
  border-color: red;
}

.blue-borderX {
  border-style: solid; 
  border-color: blue;
}
.green-borderX {
  border-style: solid; 
  border-color: green;
}

.tangotech {
  color:#ec5628;
}

.tangotech:hover {
  color:#ff5d2b;
}

.heroMessage {
  font-family: "Verdana"; 
  font-size: 2.7em;
  font-weight: bold;
}

.heroMessage p {
}

.heroMessage2 {
  font-family: "Verdana"; 
  font-size: 1.4em;
}



.heroMessage3 {
  font-family: "Verdana"; 
  font-size: 1.2em;
}

.heroMessage6 {
  font-family: "Verdana"; 
  font-size: .6em;
}

.signupMapHero {
  width: 70%;
}

.colorHeader {
  font-family: "Verdana"; 
  font-size: 1.2em; 
  font-weight: bold;
  margin-bottom: 20px; 
}

.line{
  border: 1px solid white;
  width:60%;
}

.ty {
  font-family: "Verdana"; 
  font-size: 40pt;
  color : #c70d0d;
}

.fail {
  font-family: "Verdana"; 
  font-size: 40pt;
  color : #eb5528;
}

h4 {
  font-family: "Verdana"; 
  font-size: 14pt;
}

.connect-button img {
  width: 380px;
}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  .connect-button img {
    width: 100%;
  }
}

section {
  margin-top: 20px;
}

.tangotech {
  color:#ec5628;
}

.tangotech:hover {
  color:#ff5d2b;
}

.accoPill {
   font-size: 14pt;
   color:white;
   background-color:#db3832;
   border:5px solid #ab0600;
   border-radius: 15px;
   padding: 10px;
}

.activeAcco {
  border:5px solid white;
  background-color: black;
  color:#9A6754;
  box-shadow: 0px 0px 10px 3px #9A6754, inset 0px 0px 10px 3px #4E403E;
}

.extPill {
   font-size: 14pt;
   color:white;
   background-color:#db3832;
   border:5px solid #ab0600;
   border-radius: 15px;
   padding: 10px;
}

.activeExt {
  border:5px solid white;
  background-color: black;
  color:#9A6754;
  box-shadow: 0px 0px 10px 3px #9A6754, inset 0px 0px 10px 3px #4E403E;
}

.skydentityPill {
   font-size: 14pt;
   color:white;
   background-color:#9A6754;
   border:5px solid #4E403E;
   border-radius: 15px;
   padding: 10px;
}

.activeSkydentity {
  border:5px solid white;
  background-color: black;
  color:#9A6754;
  box-shadow: 0px 0px 10px 3px #9A6754, inset 0px 0px 10px 3px #4E403E;
}

.weekPill {
   font-size: 14pt;
   color:white;
   background-color:#db3832;
   border:5px solid #ab0600;
   border-radius: 15px;
   padding: 10px;
}

.activeWeek {
  border:5px solid white;
  background-color: black;
  color:#db3832;
  box-shadow: 0px 0px 10px 3px #db3832, inset 0px 0px 10px 3px #f25650;
}

.bumpPill {
   font-size: 14pt;
   color:white;
   background-color:#db3832;
   border:5px solid black;  
}

.activeBump {
  border:5px solid white;
  background-color: black;
  color:#db3832;
  box-shadow: 0px 0px 10px 3px #db3832, inset 0px 0px 10px 3px #f25650;  
}

.basePill {
   font-size: 14pt;
   color:white;
   background-color:#db3832;
   border:5px solid black;
}

.bookDatePill {
   font-size: 14pt;
   color:white;
   background-color:#db3832;
   border:5px solid black;
   border-radius: 5px;
}

.bookDatePillDisabled {
   font-size: 14pt;
   color:white;
   background-color:#db3832;
   border:5px solid black;
   border-radius: 5px;
   opacity: 50%;
}


.activeBookDatePill {
  border:5px solid #db3832;
  background-color: black;
  color:#db3832; 
}

.activeBase {
  border:5px solid white;
  background-color: black;
  color:#db3832;
  box-shadow: 0px 0px 10px 3px #db3832, inset 0px 0px 10px 3px #f25650;
}


.licencePill {
   font-size: 14pt;
   color:white;
   background-color:#db3832;
   border:5px solid black;
}

.activeLicence {
  border:5px solid white;
  background-color: black;
  color:#db3832;
  box-shadow: 0px 0px 10px 3px #db3832, inset 0px 0px 10px 3px #f25650;
}

.covidPill {
   font-size: 14pt;
   color:white;
   background-color:#db3832;
   border:5px solid black; 
}

.activeCovid {
  border:5px solid white;
  background-color: black;
  color:#db3832;
  box-shadow: 0px 0px 10px 3px #db3832, inset 0px 0px 10px 3px #f25650;  
}

.gearPill {
   font-size: 14pt;
   color:white;
   background-color:#eb983e;
   border:5px solid black;
}

.activeGear {
  border:5px solid white;
  background-color: black;
  color:#eb983e;
  box-shadow: 0px 0px 10px 3px #eb983e, inset 0px 0px 10px 3px #eb983e;
}

.packPill {
   font-size: 14pt;
   color:white;
   background-color:#db3832;
   border:5px solid black;
}

.activePack {
  border:5px solid white;
  background-color: black;
  color:#db3832;
  box-shadow: 0px 0px 10px 3px #db3832, inset 0px 0px 10px 3px #f25650;
}

.tipPill {
   font-size: 14pt;
   color:white;
   background-color:#db3832;
   border:5px solid black;
}

.activeTip {
  border:5px solid white;
  background-color: black;
  color:#db3832;
  box-shadow: 0px 0px 10px 3px #db3832, inset 0px 0px 10px 3px #f25650;
}

.depoPill {
   font-size: 14pt;
   color:white;
   background-color:#db3832;
   border:5px solid black;
}

.activeDepo {
  border:5px solid white;
  background-color: black;
  color:#db3832;
  box-shadow: 0px 0px 10px 3px #db3832, inset 0px 0px 10px 3px #f25650;
}

.shipPill {
   font-size: 14pt;
   color:white;
   background-color:#db3832;
   border:5px solid black;
}

.activeShip {
  border:5px solid white;
  background-color: black;
  color:#db3832;
  box-shadow: 0px 0px 10px 3px #db3832, inset 0px 0px 10px 3px #f25650;
}


.aadPill {
   font-size: 14pt;
   color:white;
   background-color:#db3832;
   border:5px solid black;
}

.activeAAD {
  border:5px solid white;
  background-color: black;
  color:#db3832;
  box-shadow: 0px 0px 10px 3px #db3832, inset 0px 0px 10px 3px #f25650;
}

.roomPill {
   font-size: 14pt;
   color:white;
   background-color:#db3832;
   border:5px solid black;
}

.activeRoom {
  border:5px solid white;
  background-color: black;
  color:#db3832;
  box-shadow: 0px 0px 10px 3px #db3832, inset 0px 0px 10px 3px #f25650;
}

.dietaryPill {
   font-size: 14pt;
   color:white;
   background-color:#db3832;
   border:5px solid black;
}

.activeDietary {
  border:5px solid white;
  background-color: black;
  color:#db3832;
  box-shadow: 0px 0px 10px 3px #db3832, inset 0px 0px 10px 3px #f25650;
}

.doctorPill {
   font-size: 14pt;
   color:white;
   background-color:#439bf7;
   border:5px solid black;
}

.activeDoctor {
  border:5px solid white;
  background-color: black;
  color:#439bf7;
  box-shadow: 0px 0px 10px 3px #439bf7, inset 0px 0px 10px 3px #439bf7;
}

.tshirtPill {
   font-size: 14pt;
   color:white;
   background-color:#db3832;
   border:5px solid black;
}

.tshirtPill2 {
   font-size: 14pt;
   color:white;
   background-color:#db3832;
   border:5px solid black;
}

.men {
  background-color:#45b1ff;
}

.women {
  background-color:#f7399b;
}

.activeTShirtMen {
  border:5px solid white;
  background-color: black;
  color:#45b1ff;
  box-shadow: 0px 0px 10px 3px #439bf7, inset 0px 0px 10px 3px #439bf7;
}

.activeTShirtWomen {
  border:5px solid white;
  background-color: black;
  color:#f7399b;
  box-shadow: 0px 0px 10px 3px #f7399b, inset 0px 0px 10px 3px #f7399b;
}

.action-tangocart {
  background-color:#db3832;
  border: 1px solid #db3832;
  font-weight: bold; 
  font-family: "Verdana"; 
  text-transform: uppercase;
  border-radius: 10px;
  color:white;
  margin: 20px;
  padding: 20px;
}

#spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid white;
  border-radius: 50%;
  border-top: 16px solid #c70d0d;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}