/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 16-ene-2023, 8:06:55
    Author     : jperez
*/


:root {
  --header-color: #c1c1c1;
  --footer-color: #c1c1c1;
  --title-color: white;

  --main-bg-color: #004a98 !important;
  --main-bg-colorTrans: #004a9820 !important;
  --main-font-color: #004a98 !important;

}


.contentBody {
  background-image: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, 0.1)), url(../../img/background_default.jpg);
  background-size: cover;
  background-position: center;
}


.header,
.myNav {
  background-color: var(--header-color);
  background-image: linear-gradient(to right, #c20c2e, #f6b232, #007168, #004a98);
}

#continueButtonMob {
  margin-top: 40px;
}

.leftNav,
.rightNav {
  align-items: center;
}



.logo {
  max-width: 150px;
}

/*
#continueButton,
#continueButtonMob {
  color: var(--title-color);
  background-color: transparent;
  border-color: var(--title-color);
  border-width: 2px;
  font-weight: bold;
  font-size: 1em;
  transition: .3s;
  border-radius: 25px;
  height: 3em;
}

#continueButton:hover {
  transform: scale(1.2);
  transition: .3s;
}*/

.task {
  color: var(--title-color);
}

.opt1 {
  color: var(--title-color);


}




.opt2 {
  color: var(--title-color);


}




#welcome,
#welcomeMobile {
  color: var(--title-color);
}


#hamburger-icon>div {
  background-color: var(--title-color);
}

#mobile-menu {
  background-color: var(--title-color) !important;
  height: calc(100% + 60px) !important;
}

/* END HEADER */




/* FOOTER */

.footer {
  padding: 2em 0 2em 0;
  background-color: var(--footer-color);
  background-image: linear-gradient(to right, #c20c2e, #f6b232, #007168, #004a98);
}


.footer a {
  color: var(--title-color) !important;
}


/* END FOOTER */


/* EKYC */

#videoFrame {
  display: flex;
  width: 80% !important;
  margin: 0 auto;
}
@media (min-width: 310px) and (max-width: 600px) {

  #videoFrame {
  
  width: 100% !important;
  
}
  #gesturesMessageDiv{
    width: 100% !important;
    padding: 10px !important;
    font-size: 1.25em !important;
  }
}

/* FIN EKYC */

/* OTP */

.card h6 {
  color: var(--main-bg-color) !important;

}

.form-control:focus {
  box-shadow: none;
  border: 2px solid var(--main-bg-color) !important;
}

.validate {

  color: white !important;

}

.validate:focus {
  border: 2px solid var(--main-bg-color) !important;
}

/* FIN OTP */

/* forms styles */
.dz-clickable {
  color: var(--main-bg-color, grey) !important;
}

#capturePanel>img,
#capturePanel>video,
#zdrop {
  border-radius: 20px !important;
}

.videoElement {

  -webkit-mask-image: url(../../landing/img/mask.png);
  -webkit-mask-position: center center;
  -webkit-mask-size: 100% 100%;

  mask-image: url(../../landing/img/mask.png);
  mask-type: alpha;
  mask-position: center center;
  mask-size: 100% 100%;


}

.videoElement.selfie{
  -webkit-mask-image: url(../../landing/img/face_mask.png) !important;
   mask-image: url(../../landing/img/face_mask.png) !important;
}
.uploadPanelComponent.selfie{
  max-width: 40%;
}

.circular-chart {
  display: block;
  margin: 10px auto;
  max-width: 80%;
  max-height: 250px;
  background-color: transparent !important;
}

.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
}

.circle {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}



.circular-chart.validate .circle {
  stroke: #4CC790;
}



.percentage {
  fill: #666;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
}

#htmlElement{
  max-width: 200px;
    min-width: 150px;
    margin: 0 auto;
}

/* fin forms styles */