:root {
  --main-highlight-color: #0d6efd; /*#a23f4f;*/
  --font-size: 13px;
  --dark-bg-color: #3f3f3f;
  --red: #f44336;
  --dark-bg-color2: #313131; /*darker than the main dark color*/
}

html{
  /* font-family: Arial; */
  font-family: 'Barlow';
  font-size: var(--font-size);
}
#root{
  
  background-position: center center;
  background-repeat: no-repeat;
}
body{
    background: rgb(243 243 243);

        /* background: linear-gradient(155deg, rgb(255 255 255) 31%, rgb(167 167 167) 80%, rgba(255, 255, 255, 1) 100%); */
      }
.no-scroll{
  overflow-y: hidden;
}
table{
  font-size: var(--font-size);
}
*:focus {
  outline: none;
}
::placeholder {
  color: #0000002e;
}
a{
  color: #555;
}
a:hover{
  color: #888;
}
.env_warning{

    font-size: 1rem;
    /* font-weight: bold; */
    text-transform: uppercase;
    color: red;
}
/*
    position: fixed;
    height: 650px;
    width: 1130px;
    top: 50%;
    left: 50%;
    margin-left: -520px;
    border: 20px solid #313131;
    margin-top: -340px;
    box-shadow: 0px 37px 47px -17px black;
    border-radius: 5px;
*/

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #009688;
  --bs-btn-border-color: #009688;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #00cfbc;
  --bs-btn-hover-border-color: #00a797;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #009688;
  --bs-btn-active-border-color: #007d71;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #a7a7a7;
  --bs-btn-disabled-bg: #757575;
  --bs-btn-disabled-border-color: #3f3f3f;
}
.pt-sans-regular {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.pt-sans-bold {
  font-family: "PT Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.pt-sans-regular-italic {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.pt-sans-bold-italic {
  font-family: "PT Sans", sans-serif;
  font-weight: 700;
  font-style: italic;
}

#container{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  text-align: center;
}

#container.is-page{
  height:auto;
  margin-top: 20px;
  margin-bottom: 20px;
}
#footer{
  margin-top: 40px;
  color: #858585;
}

.orange{
    color: #FF5722;
}
.highlight{
  color: var(--main-highlight-color);
}

#loading{

    position: fixed;
    background-color: #d1d1d1de;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px #9f9f9f;
}

.flicker {
  /* width: 200px;
  height: 200px;
  background-color: yellow; */
            opacity: 0; /* Start with 0% opacity */
            animation: flicker 1s infinite;
}

@keyframes flicker {

  from {
    opacity: 0;
  }
  to {
      opacity: 1;
  }
}

#errorListWrapper{
  margin-bottom: 10px;
}
#errorListWrapper > div{
   color: red;
   font-weight: bold;
}
.org-choose{

}
.org-choose > div{

}
.pass-updated-success-icon{
  font-size: 3em;
  color: #4caf50;
}
.pass-page-invalid{
  font-size: 3em;
  color: #f44336;
}

.w150{
  width: 150px !important;
}
.w200{
  width: 200px !important;
}
.w300{
  width: 300px !important;
}
.w400{
  width: 400px !important;
}
.w500{
  width: 500px !important;
}
.w600{
  width: 600px !important;
}
.mw200{
  min-width: 200px !important;
}
.mw800{
  min-width: 800px !important;
}
.mxw800{
  max-width: 800px !important;
}
.w800{
  width: 800px !important;
}
.w850{
  width: 850px !important;
}
.w1000{
  width: 1000px !important;
}
.font2{
  font-size: 2em;
}
.mr-2{
  margin-right: 10px;
}
.btnFlex{

    display: flex;
    align-items: center;
    justify-content: center;
}



#logged-out-checkmark, #pass-recovery-success-checkmark{

    color: #4CAF50;
    font-size: 7em;
}



#Loading{
  position: fixed;
  top: 0; left: 0;
  /* background-color: #000000cc; */
  background-color: #00000096;
  z-index: 99999;
  height: 100%; width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  /* transition: opacity .5s linear;
  opacity: 0;
  pointer-events: none; */
}

#Loading.active{
  /* opacity: 1; */
}

.loader-content-spinner{

      /* border: 3px solid white; */
      /* height: 100px; */
      /* width: 100px; */
      /* background-color: white; */
      /* color: #00BCD4; */
      color: black;
      font-size: .7em;
}
.loader-content-spinner > div{

      height: 10px;
      width: 25px;
      background-color: white;
      /* border: 1px solid #000000; */
      /* border-radius: 5px 0px; */
      margin-bottom: 5px !important;
      margin: 0 auto;

}
.loader-middle{
  /* height: 30px !important;
  width: 30px !important; */
  background-color: var(--main-highlight-color) !important;
}


#LoadingImage {
    font-size: .4em;
    height: 100px;
    width: 100px;
}


#static-guide{
  font-size: 1.2em;
  max-width: 1024px;
}
#static-guide img {
  border: 8px solid white;
  max-width: 100%;
}

#static-guide ol{
  
  margin: 0;
  text-align: left;
  display: inline-block;
}

#static-guide h4{
  margin-top: 20px;
}

#qr-scanner-wrapper{
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 100;
  background-color: rgb(0 0 0 / 85%);
  display: flex;
  align-items: center;
  justify-content: center;
}
#qr-scanner-wrapper > div{
  width: 100%;
}

#direct-qr-scanner-stop-button{
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
}

div.hide{
  display: none !important;
}

.word-break, .text-break{
  word-break: break-word !important;
}