/********************************************************/
/*  RDCP v2.0 by Alex Cristian                          */
/*  Platforma dedicata Competitiilor de dans            */
/*  https://rdcp.ro/ | https://alexcristian.ro/         */ 
/********************************************************/

/*===========================================================
   RDCP CSS - Autentificare/Inregistrare - Input parola
 ===========================================================*/ 
.field-parola {
    --c-text: #5A5A64;
    --c-text-light: #A1A1B6;
    --c-text-selection: #09ABC3;
    --c-background: #fff;
    --c-background-selection: rgba(9, 171, 195, 0.15);
    --c-border: #E2E2ED;
    --c-border-hover: #D0D0DB;
    --c-border-active: #09ABC3;
    --c-shadow: rgba(41, 41, 86, 0.06);
    --c-shadow-active: rgba(9, 171, 195, 0.25);
    --eye-background: 0;
    --eye-offset: 3px;
    --eye-wrapper-y: 0;
    --eye-y: 0;
    --eye-x: 0;
    --eye-s: 1;
    
    position: relative;
    border-radius: 7px;
    background: var(--c-background);
    box-shadow: inset 0 0 0 1px var(--border, var(--c-border)), 0px 1px 3px var(--shadow, var(--c-shadow));
    transition: box-shadow 0.25s;
  }
  .field-parola:hover {
    --border: var(--c-border-hover);
    --eye-duration: .05s;
  }
  .field-parola:focus-within {
    --border: var(--c-border-active);
    --shadow: var(--c-shadow-active);
  }
  .field-parola input,
  .field-parola span {
    -webkit-appearance: none;
    outline: none;
    background: none;
    border: none;
    margin: 0;
  }
  .field-parola input {
    display: block;
    font-family: inherit;
    font-size: 16px;
    line-height: 21px;
    height: 45px;
    margin-left: -5px;color: var(--c-text);
    padding: 12px 41px 12px 16px;
    transform: translateY(var(--y, var(--default-y, 0))) translateZ(0);
    opacity: var(--o, var(--default-o, 1));
    pointer-events: var(--pe, var(--default-pe, auto));
    transition: filter 0.35s, transform 0.4s, opacity 0.25s;
  }
  .field-parola input::-moz-placeholder {
    color: var(--c-text-light);
    -moz-transition: color 0.25s;
    transition: color 0.25s;
  }
  .field-parola input:-ms-input-placeholder {
    color: var(--c-text-light);
    -ms-transition: color 0.25s;
    transition: color 0.25s;
  }
  .field-parola input::placeholder {
    color: var(--c-text-light);
    transition: color 0.25s;
  }
  .field-parola input::-moz-selection {
    color: var(--c-text-selection);
    background: var(--c-background-selection);
  }
  .field-parola input::selection {
    color: var(--c-text-selection);
    background: var(--c-background-selection);
  }
  .field-parola input:focus::-moz-placeholder, .field-parola input:hover::-moz-placeholder {
    color: var(--c-text);
  }
  .field-parola input:focus:-ms-input-placeholder, .field-parola input:hover:-ms-input-placeholder {
    color: var(--c-text);
  }
  .field-parola input:focus::placeholder, .field-parola input:hover::placeholder {
    color: var(--c-text);
  }
  .field-parola input:not(.clear) {
    width: 103%;
  }
  .field-parola input.clear {
    --y: var(--clear-y, 12px);
    --o: var(--clear-o, 0);
    --pe: var(--clear-pe, none);
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
  }
  .field-parola span {
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    padding: 11px;
    position: absolute;
    z-index: 1;
    right: 0px;
    top: 0;
    transform: scale(var(--s, 1));
    color: #49494c;
    transition: color 0.25s, transform 0.15s;
  }
  .field-parola span:hover {
    color: var(--c-text);
  }
  .field-parola span:active {
    --s: .95;
  }
  .field-parola span svg {
    display: block;
    width: 23px;
    height: 23px;
    pointer-events: none;
  }
  .field-parola span svg .top,
  .field-parola span svg .bottom,
  .field-parola span svg .lashes {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5px;
    stroke-linecap: round;
  }
  .field-parola span svg .lashes {
    stroke-dasharray: 3px;
    stroke-dashoffset: var(--eye-offset);
  }
  .field-parola span svg .top {
    fill: var(--c-background);
    fill-opacity: var(--eye-background);
  }
  .field-parola span svg .eye {
    fill: currentColor;
    transform-origin: 10.5px 13.5px;
    transform: translate(var(--eye-x), var(--eye-y)) scale(var(--eye-s)) translateZ(0);
    transition: transform var(--eye-duration, 0.3s);
  }
  .field-parola.show {
    --default-y: -12px;
    --default-o: 0;
    --default-pe: none;
    --clear-y: 0;
    --clear-o: 1;
    --clear-pe: auto;
  }
  
  .field-email {
    --c-text: #5A5A64;
    --c-text-light: #A1A1B6;
    --c-text-selection: #09ABC3;
    --c-background: #fff;
    --c-background-selection: rgba(9, 171, 195, 0.15);
    --c-border: #E2E2ED;
    --c-border-hover: #D0D0DB;
    --c-border-active: #09ABC3;
    --c-shadow: rgba(41, 41, 86, 0.06);
    --c-shadow-active: rgba(9, 171, 195, 0.25);
    --eye-background: 0;
    --eye-offset: 3px;
    --eye-wrapper-y: 0;
    --eye-y: 0;
    --eye-x: 0;
    --eye-s: 1;
    
    position: relative;
    border-radius: 7px;
    background: var(--c-background);
    box-shadow: inset 0 0 0 1px var(--border, var(--c-border)), 0px 1px 3px var(--shadow, var(--c-shadow));
    transition: box-shadow 0.25s;
  }
  .field-email:hover {
    --border: var(--c-border-hover);
    --eye-duration: .05s;
  }
  .field-email:focus-within {
    --border: var(--c-border-active);
    --shadow: var(--c-shadow-active);
  }
  .field-email input,
  .field-email span {
    -webkit-appearance: none;
    outline: none;
    background: none;
    border: none;
    margin: 0;
  }
  .field-email input {
    display: block;
    font-family: inherit;
    font-size: 16px;
    line-height: 21px;
    height: 45px;
    margin-left: -4.28px;color: var(--c-text);
    padding: 12px 41px 12px 16px;
    transform: translateY(var(--y, var(--default-y, 0))) translateZ(0);
    opacity: var(--o, var(--default-o, 1));
    pointer-events: var(--pe, var(--default-pe, auto));
    transition: filter 0.35s, transform 0.4s, opacity 0.25s;
  }
  .field-email input::-moz-placeholder {
    color: var(--c-text-light);
    -moz-transition: color 0.25s;
    transition: color 0.25s;
  }
  .field-email input:-ms-input-placeholder {
    color: var(--c-text-light);
    -ms-transition: color 0.25s;
    transition: color 0.25s;
  }
  .field-email input::placeholder {
    color: var(--c-text-light);
    transition: color 0.25s;
  }
  .field-email input::-moz-selection {
    color: var(--c-text-selection);
    background: var(--c-background-selection);
  }
  .field-email input::selection {
    color: var(--c-text-selection);
    background: var(--c-background-selection);
  }
  .field-email input:focus::-moz-placeholder, .field-email input:hover::-moz-placeholder {
    color: var(--c-text);
  }
  .field-email input:focus:-ms-input-placeholder, .field-email input:hover:-ms-input-placeholder {
    color: var(--c-text);
  }
  .field-email input:focus::placeholder, .field-email input:hover::placeholder {
    color: var(--c-text);
  }
  .field-email input:not(.clear) {
    width: 102.4%;
  border-radius: 8px;}
  .field-email input.clear {
    --y: var(--clear-y, 12px);
    --o: var(--clear-o, 0);
    --pe: var(--clear-pe, none);
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
  }
  .field-email span {
    -webkit-tap-highlight-color: transparent; 
    padding: 11px;
    position: absolute;
    z-index: 1;
    right: 0px;
    top: 0;
    transform: scale(var(--s, 1));
    color: #49494c;
    transition: color 0.25s, transform 0.15s;
  }
  .field-email span:hover {
    color: var(--c-text);
  }
  .field-email span:active {
    --s: .95;
  }
  .field-email span svg {
    display: block;
    width: 23px;
    height: 23px;
    pointer-events: none;
  }
 
  
  .field-email.show {
    --default-y: -12px;
    --default-o: 0;
    --default-pe: none;
    --clear-y: 0;
    --clear-o: 1;
    --clear-pe: auto;
  }
/*===========================================================
   RDCP CSS - Autentificare/Inregistrare - Video BG
 ===========================================================*/ 
  .btn-check {
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none
}

.radio {
    color: #953d83;
    border-color: #20d489;
    background-color: #142bb914!important;
}

header {
    position: relative;
    background-color: #000;
    height: 89.6vh;
    min-height: 25rem;
    width: 100%
}

header video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-53%);
}

header .container {
    position: relative;
    z-index: 2;
}

header .overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background-color: #000;
    opacity: .6;
    z-index: 1;
    background: #1e1f3ef5;
    background-image: radial-gradient(#000 5%,transparent 35%);
    background-size: 3px 3px;
}

@media (pointer: coarse) and (hover:none) {
    header {
        background: url(../../../app-assets/images/authinreg/rdcp-bg-authlogin.jpg) no-repeat left center;
        height: 120.6vh;
        min-height: 26rem;
        overflow: auto
    }

    header .overlay {
        /* position: absolute; */
        top: 0;
        left: 0;
        height: 124vh;
        width: 100%;
        background-color: #000;
        opacity: .5;
        z-index: 1;
        background: #1e1f3eba;
        background-image: radial-gradient(#000 5%,transparent 35%);
        background-size: 3px 3px
    }

    header video {
        display: none;
    }
}
/*================================================================================
   RDCP CSS - auth/reg - Validare Infos
 ==================================================================================*/ 
.error {
  border: 2px solid rgba(255, 0, 0, 0.322) !important; 
} 
.valid {
  border: 2px solid transparent !important;
}   
/*================================================================================
   RDCP CSS - auth/reg - Validare/Activare cont bg effect
 ==================================================================================*/ 
.context {
  width: 100%;
  position: absolute;
  top:50vh;
  
} 
.context h1{
  text-align: center;
  color: #fff;
  font-size: 50px;
} 
.area{
  background: #4e54c8;  
  background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);  
  width: 100%;
  height:100vh; 
} 
.circles{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
} 
.circles li{
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  animation: animate 25s linear infinite;
  bottom: -150px;
  
} 
.circles li:nth-child(1){
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
} 
.circles li:nth-child(2){
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
} 
.circles li:nth-child(3){
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
} 
.circles li:nth-child(4){
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 18s;
} 
.circles li:nth-child(5){
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
} 
.circles li:nth-child(6){
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
} 
.circles li:nth-child(7){
  left: 35%;
  width: 150px;
  height: 150px;
  animation-delay: 7s;
} 
.circles li:nth-child(8){
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s;
} 
.circles li:nth-child(9){
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
} 
.circles li:nth-child(10){
  left: 85%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 11s;
} 
@keyframes animate { 
  0%{
      transform: translateY(0) rotate(0deg);
      opacity: 1;
      border-radius: 0;
  } 
  100%{
      transform: translateY(-1000px) rotate(720deg);
      opacity: 0;
      border-radius: 50%;
  } 
}
.row.justify-content-center.btninapoi {
  display: inline;
}
button.btn.btn-dark.inapoi {
  border-radius: 50px;
}
/*================================================================================
   RDCP CSS - auth/reg - logo rdcp
 ==================================================================================*/ 
img.logordcp {
  width: 23rem !important;
}
@media only screen and (max-width: 844px) {
  img.logordcp {
    width: 20rem !important;
  }
  .logordcp-head{
    display: none;
  }
  .landing-info-pretitle{
    display: none;
  }
  .landing-info-title{ 
     margin-top: -5rem; 
  }
  svg text { 
    font-size: 6rem;
}
}

@media (min-width: 768px) {
  .modal-n {
      width: 817px;
  }
  .modal-content {
      box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
  }
} 
@media (min-width: 480px) {
  .modal-body {
      padding-right: 23px;
  }
}
.modal.fade .modal-dialog {
  -webkit-transform: translateY(-25%);
  transform: translateY(-25%);
  transition: -webkit-transform .3s ease-out;
  transition: transform .3s ease-out;
  transition: transform .3s ease-out,-webkit-transform .3s ease-out;
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0);
  transform: translate(0);
}
.modal-dialog {
  margin-top: 80px;
}
.modal-content {
  position: relative;
  background-color: #fff;
  border: 1px solid #999;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 6px;
  box-shadow: 0 3px 9px rgb(0 0 0 / 50%);
  background-clip: padding-box;
  outline: 0;
}
.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
  min-height: 16.42857px;
}
.modal-header .close {
  margin-right: -220px;
}
.modal-title {
  margin: 0;
  line-height: 1.42857 !important;
}
.modal-body {
  position: relative;
  padding: 15px;
}

.offset-top {
  margin-top: 20px;
}
.tfa_input_field {
  margin-bottom: 15px;
  position: relative; 
  display: flex;
  align-items: center;
} 
.tfa_input_field input { 
  padding-left: 40px;
  width: 100%;
  height: 36px;
  line-height: 34px;
}

.tfa_input_field i {
  left: 40px;
  position: absolute;
  top: 12px;
  z-index: 2;
}

.tfa-confirmare {
  padding: 15px 0;
  font-size: 15px;
  width: 100%;
}
.conftfa {
  padding: 15px 0;
  font-size: 15px;
  width: 100%;
}
.twofa-type-icon {
  width: 44px;
  height: 44px;
  padding-right: 10px;
}
.footerLinks {
  z-index: 999;
  display: inline-flex;
  color: white;
  align-content: center;
  align-items: center;
  justify-content: center;
  justify-items: center;
}
.footerLinks  > a { 
  color: white; 
}
.footerLinks  > a:hover { 
  color: rgb(255, 251, 7); 
}