@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root{
    --primaryColor: #01a9ac;
    --secondaryColor: #01cace;
    --secondary--Color: #066f7d;
    --secondaryLight: #9ddadc;
    --bgDark: #353535;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  width: 100%;
  place-items: center;
  overflow-x: hidden;
  /* background: -webkit-linear-gradient(left, var(--secondaryColor), #9ddadc); */
  /* background: -webkit-linear-gradient(left, #a445b2, #fa4299); */
}
button{background: transparent;border:0;}
::selection{
  /* background: #fa4299; */
  background: var(--secondaryColor);
  color: #fff;
}
.logo{width:260px;margin: 15px auto;display: block;}
/* Custom Code */
/* .alert{opacity: 0;visibility: hidden;height: 0;overflow: hidden; width:100%;position:relative;}
.alert.active{opacity: 1;visibility: visible;height: auto;overflow: hidden; width:100%;}
.alert-danger{padding: 10px 20px;background: #f10070;color: #FFF;border-radius: 4px;}
.alert-success{padding: 10px 20px;background: #19bb29;color: #FFF;border-radius: 4px;} */

.button--loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 4px solid transparent;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: button-loading-spinner 1s ease infinite;
}
/* Custom */
.btn-primary{background: var(--secondaryColor) !important;border:1px solid var(--primaryColor) !important;}
.btn.active{background-color: var(--secondary--Color) !important;border-color: var(--secondary--Color) !important;}
a{color:#000 !important;text-decoration: none !important;}
a:visited{color:#000;text-decoration: none;}
a:focus{color:#000;text-decoration: none;}
.fw-700{font-weight: 700;}
.text-mute {color: #999 !important;}
.mainScreen {display: flex;justify-content: space-between;align-items: center;width: 100vw;height:100vh;}
.splashScreen{background: var(--secondaryColor);width:50%;display: inline-flex;justify-content: center;align-items: center;height:100%;}
.splashScreen:after{width:0px;content:"";position: fixed;height:100%;content: '';border-right: 120px solid #f9f9f9;border-top: 50vh solid transparent;border-bottom: 50vh solid transparent;filter: drop-shadow(-4px 0px 2px #0003);top:0px;right:49.95%;}
.splashScreen .content{width:calc(100% - 150px);display: inline-flex;flex-direction: column;justify-content: center;align-items: center;margin-left:-100px;margin-top: -55px;}
.content h1{border-top:1px dotted #000;padding-top:25px;text-transform: capitalize;}
.form{background: #f9f9f9;width:50%;padding:25px;height:100%;display: none;justify-content: flex-start;align-items: center;}
.form.active{display: flex;overflow-y: auto;}
.tabs{width:100%;display: flex;gap: 1rem;}
.tabItem{border:1px dotted #000;border-radius:50px;padding:10px 25px;font-weight: 500;transition: 0.3s ease;}
.tabItem:hover{border:0.5px dashed #000;}
.tabItem.active{background: #000;color:#efefef !important;}
.tabArea{position: relative;display: block;min-height: 300px;}
.tabContent{width:100%;opacity: 0;transition: opacity 0.3s ease, margin 0.3s ease;display: flex;margin-top:50px;position: absolute;height:0;overflow: hidden;}
.tabContent form{width:100%;}
.tabContent.active{opacity: 1;margin-top: 0;height:auto;}
.form-control{border-radius:20px !important;}
.form-control:focus{border-color: var(--primaryColor) !important;box-shadow: none !important;}
.btn-primary{border-radius: 20px !important;}
.phoneCodeArea {position: relative;display: inline-block;width: 100px;margin-right:5px;}
.selectedPhoneCode{width:100%;height:100%;border-radius:20px;border:var(--bs-border-width) solid var(--bs-border-color);padding: 0.375rem 0.75rem;display: flex;justify-content: center;align-items: center;background:#FFF;cursor: pointer;}
ul.phoneCode {list-style: none;margin: 0;padding: 0;max-height: 200px;overflow-y: scroll;position: absolute;background: #efefef;z-index: 9;border:1px dotted #999;margin-left: 0px !important;opacity:0;z-index:-999;transition: all 0.3s ease;}
ul.phoneCode.active{opacity:1;z-index:9;}
ul.phoneCode li{display: block;padding:3px 7px;border-bottom:1px dotted #999;cursor: pointer;}
ul.phoneCode li:hover{background:#ccc;}
ul.phoneCode li:last-child{border-bottom:none;}
label{display: flex !important;justify-content: space-between;align-items: center;}
[data-notify="container"]{z-index:9999999999 !important;}
/* Custom */

@keyframes button-loading-spinner {
  from {
    transform: rotate(0turn);
  }

  to {
    transform: rotate(1turn);
  }
}
/* Responsive */
@media only screen and (max-width:786px){
  .mainScreen{flex-direction: column;}
  .splashScreen{width:100%;margin-top:0px;height:40vh !important;position: relative;}
  .splashScreen:after{display: none;}
  .content{margin-left: 0px !important;margin-top:0 !important;}
  .form{width:100%;align-items: flex-start;}
}
/* Responsive */