/**
 * Main application styles
 * This CSS file is loaded normally through webpack CSS loaders to avoid CSP violations
 */

.mitekDisplayContainerFull {
  max-width: 100%;
  max-height: 100%;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: black;
}

.mitekDisplayContainerCustom {
  max-width: 100%;
  max-height: 100%;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: pink;
  overflow: hidden;
  position: relative;
}

.mitekMediaStreamSourceFull {
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  object-fit: cover;
}

.mitekTransformVideoHZ {
  transform: scale(1.5);
  border: 3px solid red;
}

#mitekMediaStreamSource {
  transition: transform 0.2s;
}

.mitekMediaStreamSourceCustom {
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  object-fit: cover;
}

#mitekHintMessage {
  width: 90%;
  padding: 15px 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  border: 1px solid #58ce54;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  text-align: center;
  font-family: arial;
  font-weight: bold;
  color: black;
  background-color: rgba(255, 255, 255);
}

#mitekVoicePhrase {
  width: 90%;
  padding: 15px 10px;
  position: absolute;
  top: 20%;
  left: 50%;
  min-height: 10%;
  font-size: 2em;
  z-index: 3;
  border: 1px solid #fff;
  text-align: center;
  font-family: arial;
  font-weight: bold;
  color: #fdfdfd;
  background-color: rgba(87, 87, 87, 0.5);
}

.mitek-video-container {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.mitek-voice-container {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 100);
  z-index: 5;
  width: 100%;
  height: 100%;
}

.mitek-voice-container-ui {
  min-width: 80%;
  min-height: 90%;
  border: 1px solid gray;
  border-radius: 20px;
  /* Center vertically and horizontally */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mitek-voice-container-ui #mitekVoiceRecordButton {
  cursor: pointer;
  top: 80%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid white;
}

#mitek-voice-mic {
  width: 50%;
  height: 50%;
  position: absolute;
  background-size: cover;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNDkwLjkgNDkwLjkiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ5MC45IDQ5MC45OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8Zz4NCgkJPHBhdGggZD0iTTI0NS41LDMyMi45YzUzLDAsOTYuMi00My4yLDk2LjItOTYuMlY5Ni4yYzAtNTMtNDMuMi05Ni4yLTk2LjItOTYuMnMtOTYuMiw0My4yLTk2LjIsOTYuMnYxMzAuNQ0KCQkJQzE0OS4zLDI3OS44LDE5Mi41LDMyMi45LDI0NS41LDMyMi45eiBNMTczLjgsOTYuMmMwLTM5LjUsMzIuMi03MS43LDcxLjctNzEuN3M3MS43LDMyLjIsNzEuNyw3MS43djEzMC41DQoJCQljMCwzOS41LTMyLjIsNzEuNy03MS43LDcxLjdzLTcxLjctMzIuMi03MS43LTcxLjdWOTYuMnoiLz4NCgkJPHBhdGggZD0iTTk0LjQsMjE0LjVjLTYuOCwwLTEyLjMsNS41LTEyLjMsMTIuM2MwLDg1LjksNjYuNywxNTYuNiwxNTEuMSwxNjIuOHY3Ni43aC02My45Yy02LjgsMC0xMi4zLDUuNS0xMi4zLDEyLjMNCgkJCXM1LjUsMTIuMywxMi4zLDEyLjNoMTUyLjNjNi44LDAsMTIuMy01LjUsMTIuMy0xMi4zcy01LjUtMTIuMy0xMi4zLTEyLjNoLTYzLjl2LTc2LjdjODQuNC02LjMsMTUxLjEtNzYuOSwxNTEuMS0xNjIuOA0KCQkJYzAtNi44LTUuNS0xMi4zLTEyLjMtMTIuM3MtMTIuMyw1LjUtMTIuMywxMi4zYzAsNzYuNi02Mi4zLDEzOC45LTEzOC45LDEzOC45cy0xMzguOS02Mi4zLTEzOC45LTEzOC45DQoJCQlDMTA2LjYsMjIwLDEwMS4yLDIxNC41LDk0LjQsMjE0LjV6Ii8+DQoJPC9nPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=);
}

#mitek-voice-mic.mic-muted {
  filter: invert(48%) saturate(0) brightness(118%) contrast(119%);
}

#mitek-voice-mic.mic-active {
  filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(330deg) brightness(118%) contrast(119%);
}

#mitek-voice-mic.mic-done {
  filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QA/wD/AP+gvaeTAAADXUlEQVRoge3ZzWtdRRjH8Y8JbbRWbUEDhWpRpNi1fVHRLiq4cWPuRv+Baq0b3RVEG1Bc1ug/UXxr/wNBcCOKi9YXULRRRKOpmxqIsaVxMefqce7c3JlzpmIxPxjCuXee5/nOzcwzz8xhU5v6f+uGSn6msB9Hmr97sRs34wp+xTK+wYf4AOdxtVL8ztqFV/E91gvbdziB2/91auzEG1jNhN2oreI13DQh5n214Af4uQJ43L7GoTEx5/AH5vuATwu/+jiASziNoziAO7AF23AnHsQLOCP9nzvX2IyDH/brNIgbm8Ap8J9wXFiwudrZ2CwWwq83z/tK4KdxNgH+O05ie4mzSDN4Vhn8XGmQ1LRZwkOdkPNUDX5gFP4z3FWLNKFq8Lfhx8jRMu6pRZrQQCV4eNPonL8upg1hh41T3ckqmGlVhSeUB3Gq7JNtNlJ1+CmhTmk7PN4bM60S+FlhY5yog5HDS8o2qVyVwO/Gl8IOP1EnIqenK8DGKoG/FxeaPs/nOH83cnx0g75dKsSSVLlXWH/Dfm/nBDgfOT84pt/8BoHHqTTPPxb1/SgnyMXIKHXgmM8E6AMPe6L+F3IGsBYZbY2+39cBpOsOuy2yWakxAHhc2Jnb/a7gqYrwhGo1rgYmKmcKMT6TDDLgB/I0G9ku5xjlLuJJg+gLDw9E9udyjOI0+vSE/uMG0RcejkU+3ok7TCWMPomej0wIchZP4nLrsy3+ue1fFtbHmQm+Yj0aPX+cYxSXEr/JKyVSU6brL08oHlciX/tzDFPF3HOZQeNBdIUnnJXbDIvSMyapuJxewi2ZtsNB9IGf8feNxbC9UuIgdaApuY8ZZqGuejmKvdowFSm+jVjDwz2gcnXY6Fpa6OLoVqOH+ouu7aF+j9FryyXs6OpwIFyBtx1+3gSqrbvxRRTrKp7o63ghcrqOX/BIX8ctHRbKhDjOqRrOp6XvRdfwonSxl6sZvGS0gFzHe03sKpox/nL3Wzyj7NZiu5Dn41TZhp+pxP6XpvG60TXRrtXfEuqXQ0IlubVps81nx4RjYbzDtuf8KRV/+ZTmhMyQAujTlvS4CyrVDnVfMS3okSr7aJewxce1U05bbGyLd9i2ar5mvd/oa9bhwl7BD/hKKInfx6f+A69ZN7Wp611/AksDLCavB1AcAAAAAElFTkSuQmCC);
  transition: ease-in-out 0.2s all;
}

#mitek-voice-mic.mic-done > .mic-vol {
  display: none;
}

@keyframes mic-volume-fluctuation {
  25% {
    height: 8px;
    margin-top: 22px;
  }

  50% {
    height: 10px;
    margin-top: 20px;
  }

  100% {
    height: 8px;
    margin-top: 22px;
  }
}

.mic-vol {
  margin-left: 35%;
  width: 15px;
  height: 8px;
  margin-top: 22px;
  border-radius: 5px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  background-color: #d02525;
  display: block;
  position: absolute;
  animation-name: mic-volume-fluctuation;
  animation-duration: 20ms;
  /* animation-iteration-count: infinite; */
}

.mic-muted-line {
  position: relative;
  top: 38%;
  transform: rotate(45deg);  
  border-top: 3px solid white;
}

.mic-muted-line-hidden {
  display: none;
}

@keyframes mic-volume-fluctuation-high {
  25% {
    height: 17px;
    margin-top: 13px;
  }

  50% {
    height: 16px;
    margin-top: 14px;
  }

  100% {
    height: 17px;
    margin-top: 13px;
  }
}

.mic-vol-high {
  margin-left: 34%;
  width: 16px;
  height: 17px;
  margin-top: 13px;
  border-radius: 5px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  background-color: #d02525;
  display: block;
  position: absolute;
  animation-name: mic-volume-fluctuation-high;
  animation-duration: 20ms;
}

@keyframes ripple-circle-animate {
  from {
  }

  to {
    width: 140px;
    height: 140px;
    border-color: transparent;
    border-width: 2px;
  }
}

@keyframes ripple-circle-animate2 {
  from {
  }

  to {
    width: 120px;
    height: 120px;
    border-color: transparent;
    border-width: 2px;
  }
}

.ripple-circle {
  top: 80%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  display: block;
  color: white;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid white;
  animation-name: ripple-circle-animate;
  animation-duration: 2s;
}

.ripple-circle2 {
  top: 80%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  display: block;
  color: white;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid white;
  animation-name: ripple-circle-animate2;
  animation-duration: 1s;
}

.mitek-fade-in {
  animation: fadeIn 0.3s;
  -webkit-animation: fadeIn 0.3s;
  -moz-animation: fadeIn 0.3s;
  -o-animation: fadeIn 0.3s;
  -ms-animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#mitekDisplayContainer {
  --mitek-guide-border-radius: 15px;
}

.mitek-generic-guide {
  width: 80%;
  height: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  border: 8px solid white;
  outline: 1px solid black;
  box-shadow:
    0 0 0 2000px rgb(0 0 0 / 60%),
    inset 0 0 0 1px black;
  border-radius: var(--mitek-guide-border-radius);
}

#mitekGuide.active {
  border-color: green;
}

.mirrored-video {
  transform: scaleX(-1);
}

.mitek-visible {
  visibility: visible !important;
}

.mitek-center-offset {
  transform: translate(-50%, -50%);
}

#mitekHintMessage.small {
  font-size: 0.75rem;
}

#mitekHintMessage.medium {
  font-size: 1rem;
}

#mitekHintMessage.large {
  font-size: 1.5rem;
}

#mitekVideoRecordingIcon {
  display: inline-block;
  animation: mitekBlinker 1s cubic-bezier(0.2, 0, 1, 1) infinite alternate;
  width: 0.5em;
  height: 0.5em;
  border-radius: 10px;
  background: red;
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

@keyframes mitekBlinker {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

#mitekVideoRecordingMessage {
  position: absolute;
  top: 20px;
  left: 50%;
  z-index: 101;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #000;
  background-color: rgba(255, 255, 255, 0.8);
  opacity: 0.8;
  border: 1px solid #58ce54;
  min-width: 100px;
  border-radius: 40px;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 8px;
  padding-right: 10px;
}

#mitekVideoRecordingMessage span {
  padding-left: 20px;
}