.hide {
  display: none;
}

body {
  display: inline-grid;
  align-items: center;
  justify-content: center;
  width: 100vw;
  /*height: 100vh;*/
  margin-top: 10%;
  background: #bfd1e1;
  background-size: cover;
  font-family: "Helvetica Neue", "Calibri Light", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  border: none;
  outline: none;
}

ul, li {
  margin: 0;
  padding: 0;
}

.window {
  width: 48rem;
  height: 30rem;
  background: #3D4C5F;
  position: relative;
  overflow: hidden;
}
.window-admin
{
   width: 48rem;
  height: 25rem;
  background: #3D4C5F;
  position: relative;
  overflow: hidden;
}
.window-admin-signup
{
   width: 48rem;
  height: 25rem;
  background: #3D4C5F;
  position: relative;
  overflow: hidden;
}
.window__osx {
  border-radius: 4px;
  box-shadow: 0 0.8rem 3rem rgba(0, 0, 0, 0.5);
}

.window--header {
  z-index: 1;
  height: 3.1rem;
  position: sticky;
  top: 0;
  left: 0;
  display: flex;
}

.controls {
  margin-left: 1rem;
  margin-top: 0.8rem;
  cursor: default;
}
.controls .icon {
  height: 80%;
  position: absolute;
  margin: auto;
  opacity: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.controls:hover .icon {
  opacity: 0.5;
}
.controls--button {
  border-radius: 50%;
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.2rem;
  position: relative;
}
.controls--button__close {
  background: #fc635d;
}
.controls--button__min {
  background: #fdbe41;
}
.controls--button__max {
  background: #35cb4b;
}

.window-content {
  width: 100%;
  height: 95%;
  display: flex;
  position: relative;
}


.intro-logo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 4rem;
  transform: translateY(-3.2rem) scale(1.4);
  -webkit-animation: intro--logo-translate 0.8s 2s both cubic-bezier(0.77, 0, 0.175, 1);
          animation: intro--logo-translate 0.8s 2s both cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 9;
}


.intro-logo-2 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 4rem;
  transform: translateY(-3.2rem) scale(1.4);
  -webkit-animation: intro--logo-translate 0s 0s both cubic-bezier(0.77, 0, 0.175, 1);
          animation: intro--logo-translate 0s 0s both cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 9;
}


.intro {
  position: absolute;
  top: 0;
  width: 4rem;
  margin-left: 45%;
}
.intro-logo path {
  fill: transparent;
  stroke: #fff;
  stroke-width: 1px;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  -webkit-animation: intro--stroke-offset 1s both ease-in-out, intro--stroke-fill 0.4s 0.8s both ease;
          animation: intro--stroke-offset 1s both ease-in-out, intro--stroke-fill 0.4s 0.8s both ease;
}

@-webkit-keyframes intro--stroke-offset {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes intro--stroke-offset {
  to {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes intro--stroke-fill {
  to {
    fill: #00c99e;
    stroke: #00c99e;
  }
}
@keyframes intro--stroke-fill {
  to {
    fill: #00c99e;
    stroke: #00c99e;
  }
}
@-webkit-keyframes intro--logo-translate {
  to {
    transform: translateY(-10.3rem) scale(1);
  }
}
@keyframes intro--logo-translate {
  to {
    transform: translateY(-10.3rem) scale(1);
  }
}
.sync-title {
  color: #00c99e;
  margin: 0.2rem;
  font-weight: 400;
}
.sync-title:after {
  -webkit-animation: sync-finish 0.2s 10s both ease;
          animation: sync-finish 0.2s 10s both ease;
}


.sync-title-2 {
  color: #00c99e;
  margin: 0.2rem;
  font-weight: 400;
}
.sync-title-2:after {
  -webkit-animation: sync-finish 0s 0s both ease;
          animation: sync-finish 0s 0s both ease;
}


.sync-indicator {
  margin-left: auto;
  margin-right: 1rem;
  margin-top: 1rem;
  display: flex;
}


.sync-indicator-2 {
  margin-left: 1rem;
  margin-right: 1rem;
  margin-top: 1rem;
  display: flex;
}

.sync-progress {
  height: 1.2rem;
  transform: rotate(-90deg);
  margin-left: 0.2rem;
  -webkit-animation: sync-shrink 0.4s 10.1s both cubic-bezier(0.77, 0, 0.175, 1);
          animation: sync-shrink 0.4s 10.1s both cubic-bezier(0.77, 0, 0.175, 1);
}
.sync-progress circle {
  stroke-width: 4px;
  stroke: #00c99e;
  stroke-dasharray: 125;
  stroke-dashoffset: 120;
  -webkit-animation: sync-progress 10s linear both;
          animation: sync-progress 10s linear both;
}

@-webkit-keyframes sync-progress {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes sync-progress {
  to {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes sync-finish {
  to {
   /* content: "SYNCHRONIZED";*/
  /*  color: #00c99e;*/
  content: " ";
  }
}
@keyframes sync-finish {
  to {
   /* content: "SYNCHRONIZED";*/
   /* color: #00c99e;*/
   content: " ";
  }
}
@-webkit-keyframes sync-shrink {
  to {
    transform: scale(0.5);
  }
}
@keyframes sync-shrink {
  to {
    transform: scale(0.5);
  }
}
.welcome-screen {
  margin: auto;
  bottom: 2.4rem;
  left: 0;
  right: 0;
  font-weight: 300;
  width: 80%;
  height: 20rem;
  position: absolute;
}

.greeting {
  margin: auto;
  text-align: center;
  font-weight: 300;
  color: #f0f0f0;
  transform: translateY(1rem);
  opacity: 0;
  -webkit-animation: greeting--animate-in 0.4s 2.4s both ease;
          animation: greeting--animate-in 0.4s 2.4s both ease;
}


.greeting-2 {
  margin: auto;
  text-align: center;
  font-weight: 300;
  color: #f0f0f0;
  transform: translateY(1rem);
  opacity: 0;
  -webkit-animation: greeting--animate-in 0s 0s both ease;
          animation: greeting--animate-in 0s 0s both ease;
}



.options {
  display: flex;
  margin-top: 0.8rem;
}

.option {
  transform: translateY(1rem);
  opacity: 0;
  -webkit-animation: greeting--animate-in 0.4s 2.6s both ease;
          animation: greeting--animate-in 0.4s 2.6s both ease;
  list-style: none;
  margin: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  flex: 1;
  height: 12rem;
  border-radius: 4px;
  transition: border 0.1s ease;
  border: 1px solid transparent;
}

.option-2 {
  transform: translateY(1rem);
  opacity: 0;
  -webkit-animation: greeting--animate-in 0s 0s both ease;
          animation: greeting--animate-in 0s 0s both ease;
  list-style: none;
  margin: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  flex: 1;
  height: 15rem;
  border-radius: 4px;
  transition: border 0.1s ease;
  border: 1px solid transparent;
}

.option-3 {
  transform: translateY(1rem);
  opacity: 0;
  -webkit-animation: greeting--animate-in 0s 0s both ease;
          animation: greeting--animate-in 0s 0s both ease;
  list-style: none;
  margin: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  flex: 1;
  height: 9rem;
  border-radius: 4px;
  transition: border 0.1s ease;
  border: 1px solid transparent;
}

 
.option-4 {
  transform: translateY(1rem);
  opacity: 0;
  -webkit-animation: greeting--animate-in 0s 0s both ease;
          animation: greeting--animate-in 0s 0s both ease;
  list-style: none;
  margin: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  flex: 1;
  height: 11rem;
  border-radius: 4px;
  transition: border 0.1s ease;
  border: 1px solid transparent;
}


.option label {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}
.option:nth-child(1) {
  -webkit-animation-delay: 2.6s;
          animation-delay: 2.6s;
}
.option:nth-child(2) {
  -webkit-animation-delay: 2.7s;
          animation-delay: 2.7s;
}
.option:nth-child(3) {
  -webkit-animation-delay: 2.8s;
          animation-delay: 2.8s;
}



.option-2 label {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}
.option-2:nth-child(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.option-2:nth-child(2) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.option-2:nth-child(3) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}


.option--title {
  color: #ccc;
  font-weight: 400;
  font-size: 0.9rem;
  padding: 0 1rem;
  text-align: center;
  transition: color 0.1s ease;
}
.option--icon {
  width: 5rem;
  margin: auto;
  margin-top: 1.8rem;
}
.option--icon svg {
  transition: fill 0.1s ease;
  fill: #ccc;
}
.option:hover {
  border-color: rgba(255, 255, 255, 0.2);
}
.option:hover .option--title {
  color: #fff;
}
.option:hover .option--icon svg {
  fill: #fff;
}

@-webkit-keyframes greeting--animate-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes greeting--animate-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
input[type=checkbox]:checked + .section {
  -webkit-animation: section--animate-in 0.4s both ease-in-out;
          animation: section--animate-in 0.4s both ease-in-out;
  pointer-events: all;
}
input[type=checkbox]:checked + .section ~ .intro-logo {
  -webkit-animation: logo--to-topbar 0.4s forwards ease-in-out;
          animation: logo--to-topbar 0.4s forwards ease-in-out;
}

.section {
  opacity: 0;
  background: #293340;
  position: absolute;
  height: 100%;
  bottom: 0;
  z-index: 10;
  width: 100%;
  pointer-events: none;
  color: #f0f0f0;
  display: flex;
  flex-direction: column;
}
.section p {
  /*width: 27rem;*/
  margin: -0.5rem auto;
  color: rgba(255, 255, 255, 0.5);
}

.section--title {
  color: #fff;
  font-weight: 300;
  text-align: center;
}

@-webkit-keyframes section--animate-in {
  from {
    transform: translateY(9rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes section--animate-in {
  from {
    transform: translateY(9rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes logo--to-topbar {
  from {
    transform: translateY(-10.3rem) scale(1);
  }
  to {
    transform: translateY(-15rem) scale(0.4);
  }
}
@keyframes logo--to-topbar {
  from {
    transform: translateY(-10.3rem) scale(1);
  }
  to {
    transform: translateY(-15rem) scale(0.4);
  }
}
.form--input-danger {
  background: transparent;
  color: #fff;
  border: none;
  border-bottom: 2px solid red;
  padding: 0.5rem 0;
  width: 20rem;
  flex: 2;
}
.form--input {
  background: transparent;
  color: #fff;
  border: none;
  border-bottom: 2px solid #00c99e;
  padding: 0.5rem 0;
  width: 20rem;
  flex: 2;
}
.form--input:focus {
  outline: none;
  border-bottom-color: #fdbe41;
}
.form--input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.form--input:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.form--input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.form--button {
  margin: 2rem auto;
  padding: 0.7rem 1rem;
  color: #fff;
  background: #00c99e;
  border-radius: 3px;
}

.form--button1 {
  margin: 2rem auto;
  padding: 0.5rem 1rem;
  color: #fff;
  background: #00c99e;
  border-radius: 3px;
}

.form--button2 {
  margin: 3rem auto;
  padding: 0.5rem 1rem;
  color: #fff;
  background: #00c99e;
  border-radius: 3px;
}

.form--group {
  display: flex;
  margin: 1rem auto;
  width: 24rem;
}
.form--group strong {
  flex: 0 0 5rem;
  margin: auto;
  margin-right: 2rem;
  color: #00c99e;
}
.form--group span {
  flex: 2;
}


.text-decoration-none
{
  text-decoration: none;
}


.new-icon i
{
  color: #cbcbcc;
}

.new-icon:hover i
{
  color: #fff !important;
}




.grid-container {
  display: grid;
  grid-template-columns: auto;
  padding: 10px;
}
.grid-item {
  text-align: center;
}


.grid-container-2 {
  display: grid;
  grid-template-columns: auto auto;
  padding: 10px;
}
.grid-item-2 {
  text-align: center;
  margin-top: 2%;
}


.new-video
{
  width: 95%;
  margin-left: 2.5%;
}


.width-21rem
{
  width: 21rem;
}


.width-30rem
{
  width: 30rem;
}

 
.new-btn
{
  margin: 0.5rem auto !important;
}  

.new-btn1
{
  margin: 3.5rem auto !important;
}   

.new-form-margin
{
    margin: 0.3rem auto;
}



.new-form-margin::placeholder
{
    margin: 0.3rem auto;
}

.margin-top-2
{
  margin-top: 2%;
}  

.margin-top-n-3
{
  margin-top: -3%;
} 
.margin-top-n-5
{
  margin-top: -5%;
}    


.margin-top-5
{
  margin-top: 5%;
} 

.margin-top-7
{
  margin-top: 7%;
}   


.new-forgot-password
{
  background: none;
  border: none; 
  height: 2rem; 
  margin-top: -2%;
}  

    




.alert {
  position: relative;
  padding: .55rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 5px
}

.alert-heading {
  color: inherit
}

.alert-link {
  font-weight: 700
}

.alert-dismissible {
  padding-right: 26rem
}

.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: .55rem 1rem;
  color: inherit
}

.alert-primary {
  color: #1b3e85;
  background-color: #d6e4ff;
  border-color: #2b65d6
}

.alert-primary hr {
  border-top-color: #265bc2
}

.alert-primary .alert-link {
  color: #122a5b
}

.alert-secondary {
  color: #4a5362;
  background-color: #e9ecf2;
  border-color: #78869e
}

.alert-secondary hr {
  border-top-color: #6a7993
}

.alert-secondary .alert-link {
  color: #343a45
}

.alert-success {
  color: #1f5f17;
  background-color: #d8f1d5;
  border-color: #329a25
}

.alert-success hr {
  border-top-color: #2b8520
}

.alert-success .alert-link {
  color: #12360d
}

.alert-info {
  color: #0d5d5d;
  background-color: #d1f0f0;
  border-color: #159696
}

.alert-info hr {
  border-top-color: #128080
}

.alert-info .alert-link {
  color: #073030
}

.alert-warning {
  color: #724203;
  background-color: #f8e5cd;
  border-color: #b86a05
}

.alert-warning hr {
  border-top-color: #9f5c04
}

.alert-warning .alert-link {
  color: #402502
}

.alert-danger {
  color: #7f1620;
  background-color: #fdd5d8;
  border-color: #cd2433
}

.alert-danger hr {
  border-top-color: #b7202e
}

.alert-danger .alert-link {
  color: #540e15
}

.alert-light {
  color: #676a6e;
  background-color: #f4f5f6;
  border-color: #a7abb1
}

.alert-light hr {
  border-top-color: #999ea5
}

.alert-light .alert-link {
  color: #4e5154
}

.alert-dark {
  color: #01020e;
  background-color: #cccdd1;
  border-color: #010317
}

.alert-dark hr {
  border-top-color: #000
}

.alert-dark .alert-link {
  color: #000
}

.alert-orange {
  color: #843b0f;
  background-color: #ffe3d2;
  border-color: #d56018
}

.alert-orange hr {
  border-top-color: #be5615
}

.alert-orange .alert-link {
  color: #56270a
}

.alert-purple {
  color: #500c85;
  background-color: #ebd1ff;
  border-color: #8114d6
}

.alert-purple hr {
  border-top-color: #7312bf
}

.alert-purple .alert-link {
  color: #340856
}

.alert-skyblue {
  color: #0b4980;
  background-color: #d0e8fd;
  border-color: #1276cf
}

.alert-skyblue hr {
  border-top-color: #1069b8
}

.alert-skyblue .alert-link {
  color: #072e51
}

.float-right
{
  float: right;
}














.margin-top-auto{
  margin-top: auto
}

.background-color{
 background-color:transparent
}

.opt{
  margin-left: 10%;
  flex: 1;
  border-radius: 4px;
  transition: border 0.1s ease;
  border: 1px solid transparent;
}

.color-new-green
{
  color: #00c99e;
}


.modal {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.25);
}

.modal-container {
  max-height: 90vh;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.25);
}
@media (max-width: 600px) {
  .modal-container {
    width: 90%;
  }
}

.modal-container-header {
  padding: 0px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #293340;
    color: #02c99d;
}

.modal-container-title {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  font-size: 1.125;
}
.modal-container-title svg {
  width: 32px;
  height: 32px;
  color: #59687a;
}

.modal-container-body {
  padding: 0px 32px 30px;
  overflow-y: auto;
}


.modal-container-footer {
 padding: 10px 32px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border: none;
    gap: 12px;
    position: relative;
    background-color: #3d4c5e;
    color: #02c99d;
}
.modal-container-footer:after {
  content: "";
  display: block;
  position: absolute;
  top: -51px;
  left: 24px;
  right: 24px;
  height: 50px;
  flex-shrink: 0;
  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.75), transparent);
  pointer-events: none;
}

.modal-button {
  padding: 12px 20px;
  border-radius: 8px;
  background-color: transparent;
  border: 0;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s ease;
}
.modal-button.is-ghost:hover, .modal-button.is-ghost:focus {
  background-color: #dfdad7;
}
.modal-button.is-primary {
  background-color: #59687a;
  color: #fff;
}
.modal-button.is-primary:hover, .modal-button.is-primary:focus {
  background-color: #232b31;
}

.modal-icon-button {
  padding: 0;
  border: 0;
  background-color: transparent;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  transition: 0.15s ease;
}
.modal-icon-button svg {
  width: 24px;
  height: 24px;
}
.modal-icon-button:hover, .modal-icon-button:focus {
  background-color: #dfdad7;
}


.new-ul
{
 list-style-type: none;
 text-align: right;
}


.f-12
{
  font-size: 12px;
}


.footer {
   left: 0;
   bottom: 0;
   width: 100%;
   color: #3d4c5e;
   text-align: center;
}

.terms-color
{
  color: #3d4c5e !important;
}

.no-italics {
    font-style: normal;   
}


.password_eye
{
  float: right;
  margin-top: -3%;
  margin-right: 1%;
}


.password_eye_2
{
  float: right;
  margin-top: -7%;
  margin-right: 2%;
}


.password_eye_3
{
  margin-right: 13%;
  margin-top: -5%; 
  float: right;
}



.password_eye_4
{
  margin-right: 25%;
  margin-top: -5%; 
  float: right;
}


.password_eye_5
{
  margin-right: 12%;
  margin-top: -5%; 
  float: right;

}



.margin-top-8
{
  margin-top: 8%;
}



.notification {
  padding-bottom: 0.75em;
  position: fixed;
  top: 5.5em;
  right: 1.5em;
  width: 18.75em;
  max-width: calc(100% - 3em);
  transition: transform 0.15s ease-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  z-index: 10000000;
}

.notification__box,
.notification__content,
.notification__btns {
  display: flex;
}
.notification__box,
.notification__content {
  align-items: center;
}
.notification__box {
    animation: flyIn 0.3s ease-out;
    background-color: #232b31c9 !important;
    color: #fff;
    margin-bottom: 10px;
    border-radius: 0.75em;
    box-shadow: 0 0.5em 1em hsla(var(--hue),10%,10%,0.1);
    min-height: 4em;
    height: auto;
    transition: 
    background-color var(--transDur),
    color var(--transDur);
}
.notification--out .notification__box {
  animation: flyOut 0.3s ease-out forwards;
}
.notification__content {
  padding: 0.375em 1em;
  width: 100%;
  height: 100%;
}
.notification__icon {
  flex-shrink: 0;
  margin-right: 0.75em;
  width: 2em;
  height: 2em;
}
.notification__icon-svg {
  width: 100%;
  height: auto;
}
.notification__text {
  line-height: 1.333;
}
.notification__text-title {
font-size: 0.9em;
}
.notification__text-subtitle {
  font-size: 0.8em;
  opacity: 0.75;
}
.notification__btns {
  box-shadow: -1px 0 0 hsla(var(--hue),10%,10%,0.15);
  flex-direction: column;
  flex-shrink: 0;
  min-width: 4em;
  height: 100%;
  transition: box-shadow var(--transDur);
}
.notification__btn {
  background-color: transparent;
  color: #ffffffba;
  box-shadow: 0 0 0 hsla(var(--hue),10%,10%,0.5) inset;
  font-size: 0.6rem;
  line-height: 1;
  font-weight: 500;
  height: 100%;
  padding: 0 0.5rem;
  transition:
    background-color var(--transDur),
    color var(--transDur);
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  border: none !important;
}
.notification__btn-text {
  display: inline-block;
  pointer-events: none;
      font-size: 1.5em;
    font-weight: bold;
}
.notification__btn:first-of-type {
  border-radius: 0 0.75rem 0 0;
}
.notification__btn:last-of-type {
  border-radius: 0 0 0.75rem 0;
}
.notification__btn:only-child {
  border-radius: 0 0.75rem 0.75rem 0;
}
.notification__btn + .notification__btn {
  box-shadow: 0 -1px 0 hsla(var(--hue),10%,10%,0.15);
  font-weight: 400;
}
.notification__btn:active,
.notification__btn:focus {
  background-color: hsl(var(--hue),10%,95%);
}
.notification__btn:focus {
  outline: transparent;
}

@supports selector(:focus-visible) {
  .notification__btn:focus {
    background-color: transparent;
  }
  .notification__btn:focus-visible,
  .notification__btn:active {
    background-color: hsl(var(--hue),10%,95%);
  }
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(var(--hue),10%,10%);
    --fg: hsl(var(--hue),10%,90%);
  }
  .notification__box {
    background-color: hsl(var(--hue),10%,30%);
  }
  .notification__btns {
    box-shadow: -1px 0 0 hsla(var(--hue),10%,90%,0.15);
  }
  .notification__btn + .notification__btn {
    box-shadow: 0 -1px 0 hsla(var(--hue),10%,90%,0.15);
  }
  .notification__btn:active,
  .notification__btn:focus {
    background-color: hsl(var(--hue),10%,35%);
  }

  @supports selector(:focus-visible) {
    .notification__btn:focus {
      background-color: transparent;
    }
    .notification__btn:focus-visible,
    .notification__btn:active {
      background-color: hsl(var(--hue),10%,35%);
    }
  }
}

/* Animations */
@keyframes flyIn {
  from {
    transform: translateX(calc(100% + 1.5em));
  }
  to {
    transform: translateX(0);
  }
}
@keyframes flyOut {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(100% + 1.5em));
  }
}



.text-align-left
{
  text-align: left;
}


 .modal-agent-request
{
  width: 80%;
  z-index: 10000;
}

.login-select-region
{
  margin: 0.5rem auto !important;
}   


.new-section
{
  height: 60vh !important;
  background: #3D4C5F !important;
}

.position-inherit
{
  position: inherit;
}



.agent-input::placeholder {
    padding-left: 3px;
}


.agent-input {
    background: #293340;
}
       


.agent-input::-ms-expand {
    display: none;
}

.text-right-side
{
    background: #293340;
    pointer-events: none;
    -webkit-appearance: none;
    color: #fff;
    border: none;
    border: none;
    border-bottom: 2px solid #00c99e;
    padding: 0.5rem 17px;
}

.text-right-side-dropdown{
   background: #293340;
    color: #fff;
    border: none;
    border-bottom: 2px solid #00c99e;
    padding: 0.5rem 0;
}
 
.terms-of-use
{
  margin-top: 8%;
  float: right;
  margin-right: -8%;
  color: #00c99e;
}

.font-weight-bold
{
  font-weight: bold;
}

.custom-select {
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 1.25rem + 2px);
  padding: .625rem 2.25rem .625rem 1.25rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  vertical-align: middle;
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3E%3Cpath fill='%2301041b' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 1.25rem center/8px 10px;
  border: 1px solid #ced4da;
  border-radius: 5px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075);
  appearance: none
}
.form-control {
  height: 46px;
  line-height: 45px;
  background: #fff;
  border: 1px solid #bcbcbc;
  font-size: 20px;
  color: #324253;
  border-radius: 5px;
  box-shadow: none
} 






.tooltip {
  margin-top: -7%;
  margin-left: 90%;
  position: relative;
  color: white;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  right: 70%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}



.margin-none
{
  margin: 0px !important;
}


.new-doc
{
  position: absolute;
  top: 4%;
  right: 2%;
  text-decoration: none;
}
.agent-token
{
   position: absolute;
  top: 4%;
  right: 15%;
  text-decoration: none;
}
.agent-token a
{
  text-decoration: none;color: gray;margin: 2rem auto;
  padding: 0.5rem 1rem;
  color: #fff;
  background: #00c99e;
  border-radius: 3px;
}
.new-home
{
  position: absolute;
  top: 4%;
  left: 1%;
  text-decoration: none;
}
.new-home a
{
  text-decoration: none;color: gray;margin: 2rem auto;
  padding: 0.5rem 1rem;
  color: #fff;
  background: #3d4c5f;
  border-radius: 3px;
}


.new-doc a
{
  text-decoration: none;color: gray;margin: 2rem auto;
  padding: 0.5rem 1rem;
  color: #fff;
  background: #00c99e;
  border-radius: 3px;
}
 
 
 
.new-footer
{ 
  position: fixed;
  left: -5%;
  bottom: 3%;
  width: 100%;
  color: grey;
  text-align: right !important;
  font-size: 10px;
  z-index: -1;
  color: grey;
}

 
.new-footer a
{ 
  text-decoration: none;
  color: grey;
}


.f-14
{
   font-size:14px;
}