v/* mobbeel css
-------------------------------------------------- */

select.custom {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20fill%3D%22%23555555%22%20%0A%09%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%22-261%20145.2%2024%2024%22%20style%3D%22enable-background%3Anew%20-261%20145.2%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpath%20d%3D%22M-245.3%2C156.1l-3.6-6.5l-3.7%2C6.5%20M-252.7%2C159l3.7%2C6.5l3.6-6.5%22%2F%3E%0A%3C%2Fsvg%3E");
    padding-right: 25px;
    background-repeat: no-repeat;
    background-position: right center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select.custom::-ms-expand {
    display: none;
}

/* Fonts
-------------------------------------------------- */

@font-face {
    font-family: "gotham-book";
    src: url("../fonts/gotham/gotham-book-webfont.eot");
    src: url("../fonts/gotham/gotham-book-webfont.eot") format("embedded-opentype"), url("../fonts/gotham/gotham-book-webfont.woff") format("woff"), url("../fonts/gotham/gotham-book-webfont.ttf") format("truetype"), url("../fonts/gotham/gotham-book-webfont.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "gotham-medium";
    src: url("../fonts/gotham/gotham-medium-webfont.eot");
    src: url("../fonts/gotham/gotham-medium-webfont.eot") format("embedded-opentype"), url("../fonts/gotham/gotham-medium-webfont.woff") format("woff"), url("../fonts/gotham/gotham-medium-webfont.ttf") format("truetype"), url("../fonts/gotham/gotham-medium-webfont.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "gotham-light";
    src: url("../fonts/gotham/gotham-light-webfont.eot");
    src: url("../fonts/gotham/gotham-light-webfont.eot") format("embedded-opentype"), url("../fonts/gotham/gotham-light-webfont.woff") format("woff"), url("../fonts/gotham/gotham-light-webfont.ttf") format("truetype"), url("../fonts/gotham/gotham-light-webfont.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "gotham-bold";
    src: url("../fonts/gotham/gotham-bold-webfont.eot");
    src: url("../fonts/gotham/gotham-bold-webfont.eot") format("embedded-opentype"), url("../fonts/gotham/gotham-bold-webfont.woff") format("woff"), url("../fonts/gotham/gotham-bold-webfont.ttf") format("truetype"), url("../fonts/gotham/gotham-bold-webfont.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

/* General structure and layouts
-------------------------------------------------- */

html {
    position: relative;
    min-height: 100%;
    font-family: "gotham-medium";
}

body {
    font-family: "gotham-book";
    font-size: 12px;
    line-height: 22px;
    background: #eee;
}

.logo {
    line-height: 70px;
}

.client-logo {
    max-height: 40px;
    margin-right: 10px;
}

.container {
    width: 90%
}

.titleSite {
    font-size: 32px;
    color: #fff;
    display: flex;
    align-items: center;
}

.availabilityIcon {
    margin-right: 10px;
    margin-bottom: 4px;
    vertical-align: middle;
    cursor: pointer;
}

.wrapper {
    background: #eee;
}

.page-body {
    padding: 20px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin-bottom: 20px;
    background-color: #ffffff;
    box-shadow: 0 0px 24px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
}

.page-body h1 {
    margin-bottom: 20px;
}

#footer {
    background: #eee;
}

.section-footer {
    text-align: center;
}

#list-pagination {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-bottom: 20px;
}

#list-pagination li a {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#list-pagination ul {
    display: flex;
    margin: 0;
    padding-left: 10px;
}

.pagination>li>a, .pagination>li>span {
    padding: 10px 12px;
}

.pagination .page-item.active .page-link {
  background-color: #005b96;  /* azul suave */
  border-color: #005b96;
}
.pagination .page-link:hover {
  background-color: #e8f0fa;  /* fondo azul pálido al hover */
}

.topbar-main a {
  text-decoration: none !important;
}

.topbar-main a:hover {
  text-decoration: none !important;
}

#topnav {
    right: 0;
    left: 0;
    top: 0;
    z-index: 1030;
    background-color: #ffffff;
    border: 0;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    min-height: 70px;
    box-shadow: 0 0px 24px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
}

.navbar-custom {
    padding-top: 15px;
}

#top-menu {
    margin-top: 5px;
}

#topbar-main {
    background: #005FA0;
    font-size: 12px;
    color: #fff;
}

#top-menu li a {
    color: #fff
}

#top-menu li {
    display: inline;
    float: left;
    list-style: none;
    padding: 0 10px;
}

#topnav .topbar-main {
    background: #005FA0;
    line-height: 60px;
}

.navbar-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar-nav>li {
    float: left;
    display: block;
    position: relative;
    font-family: "gotham-book";
}

.navbar-nav>li>a {
    display: block;
    color: #000;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    line-height: 20px;
    background: none;
    text-transform: uppercase;
    font-size: 14px;
    font-family: "gotham-book";
}

.nav {
    margin-left: 0px;
}

#top-menu .nav>li>a {
    padding: 0px;
}

.nav>li>a:hover, .nav>li>a:focus {
    text-decoration: none;
    background-color: #fff;
    ;
}

.navbar-collapse {
    padding: 0px;
}

table td i {
    font-size: 14px;
    margin-right: 5px;
    z-index: 100;
}

i.bi-clock-fill {
    color: orange
}

i.bi-check-circle-fill {
    color: #005FA0;
}

i.bi-x-circle-fill {
    color: red;
}

i.bi-remove-sign.disabled-user-btn {
    color: gray;
}

i.bi-exclamation-lg {
    color: orange;
}

i.bi-check2 {
    color: green;
}

#main-menu li:first-child a {
    padding-left: 0px;
}

.icon-fat {
    font-size: 28px;
    filter:
        drop-shadow(1px 0 currentColor)
        drop-shadow(-1px 0 currentColor)
        drop-shadow(0 1px currentColor)
        drop-shadow(0 -1px currentColor);
}

/* Content
-------------------------------------------------- */

.page-header {
    border: 0px;
    margin: 60px 0 0px 0;
    padding: 0px;
}

.page-header h1 {
    font-size: 32px;
    font-family: "gotham-book";
    color: #424242;
    text-align: left;
}

.layerFilter {
    display: block;
    width: 100%;
    background: #fff;
    margin-top: 30px;
    display: none;
}

.wrapFilter {
    padding: 40px;
}

/* Tablas e intranet
-------------------------------------------------- */

/* menu */

.page-admin .navbar-default {
    height: 54px;
    line-height: 50px;
    background: #005FA0;
    color: #fff;
}

.page-admin .navbar-default li a {
    color: #fff;
    font-size: 16px;
}

.page-admin .navbar-default li.active a, .page-admin .navbar-default li.active:hover a, .page-admin .navbar-default li:hover a {
    text-decoration: underline;
    background: #0093d0;
    color: #fff;
}

.page-admin table.table-activation td {
    line-height: 22px;
    font-size: 12px;
    text-align: center
}

.page-admin table.table-activation th {
    line-height: 32px;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
}

.page-admin table.table-activation tr td:nth-child(2) {
    /* color:#005FA0; */
    font-weight: bold;
}

.page-admin table.table-activation tr:hover td {
    color: #fff;
    background: #005FA0;
    cursor: pointer;
}

.page-admin .form-control {
    border-radius: 3px;
    max-height: 40px;
}

.page-admin table.table-activation tr:hover i {
    background-color: #fff;
    border-radius: 50%;
}

.page-admin table.table-users {
    margin-top: 1%;
}

.page-admin table.table-users td {
    line-height: 22px;
    font-size: 12px;
    text-align: center
}

.page-admin table.table-users th {
    line-height: 32px;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
}

.page-admin table.table-users tr td:nth-child(2) {
    /* color:#005FA0; */
    font-weight: bold;
}

.lst-activation-data {
    list-style: none;
    margin-left: 0px;
    padding-left: 0px;
}

.lst-activation-data li {
    line-height: 30px;
    margin-bottom: 5px;
    padding: 0 0 5px;
    background: #fff;
}

.lst-activation-data li .name {
    color: #6c7175;
    font-size: 13px;
    width: 35%;
    display: inline-block;
}

.lst-activation-data li .info {
    background: #f2f2f2;
    color: #323537;
    font-weight: bold;
    display: inline-block;
    width: 60%;
    text-align: center
}

.centered-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    margin: 0;
}

.top0-important {
    top: 0 !important;
}

.modal {
    font-family: "gotham-book";
    top: 35%;
}

.modal-center {
    top: 0% !important;
    font-family: "gotham-book";
}

.modal h4 {
    font-family: "gotham-bold";
    font-size: 22px;
    color: #4a4a4a;
    line-height: 25px;
    text-align: left;
    margin-top: 0px;
}

.box {
    border-radius: 3px;
    background: #fff;
    padding: 20px;
}

.btn-primary {
    border-radius: 3px;
    border: 0px;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    line-height: 14px;
    margin-bottom: 0;
    min-height: 38px;
    padding: 0px 20px;
    text-align: center;
    background: #005FA0;
    color: #fff;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    color: #fff;
}

.btn-excel-list {
    display: block;
    margin-top: 20px;
}

.btn-excel-report {
    display: block;
    margin-top: 40px;
}

.form-actions .btn-primary {
    width: 49%
}

.form-control {
    background: fff;
    min-height: 40px;
    border-radius: 3px;
    height: 40px;
}

textarea.form-control {
    min-height: 100px;
    height: 100px;
}

.btn-links {
    text-align: center;
}

.btn-link {
    color: #32adf3;
    font-size: 12px;
    font-family: "gotham-bold";
    text-transform: uppercase;
}

.btn-link:hover, .btn-link:focus {
    color: #32adf3;
}

.page-admin .menuback li {
    display: inline;
}

.mb-3.validation_ko .form-control {
    border-color: #ff0000;
}

#license-button.validation_ko {
    border-color: #ff0000;
}

.mb-3.validation_ko .msg {
    display: block;
    line-height: 22px;
    color: #ff0000;
    font-size: 12px;
    background: white
}

.mb-3.validation_ko_date .form-control {
    background: #f5f5f5 no-repeat 95%;
    border-color: #ff0000;
    background: white
}

#licenses-check {
    max-height: 250px;
    overflow-y: auto;
}
/* Idioma
-------------------------------------------------- */

.navbar-lang {
    margin-right: 60px;
}

.navbar-lang>li>a {
    padding: 0 15px;
}

.navbar-lang li a:focus, .navbar-lang li a:hover {
    background: none;
    border: 0px;
}

.navbar-lang .open>a, .navbar-lang .open>a:active, .navbar-lang .open>a:focus, .navbar-lang .open>a:hover {
    background: none;
    border: 0px;
}

.lang-selected, .lang-id, .lang-name, .lang-navigation a {
    font-size: 12px;
    color: fff;
    font-family: gotham-medium;
    font-weight: normal;
}

#lang-navigation ul li a {
    color: #000;
}

.icon-state {
    font-size: 20px;
}

.bi-ok {
    color: #6db023
}

.bi-remove {
    color: #ff0000
}

.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
    background: none;
    border: 0px;
}

.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
    background-color: #005FA0;
    border-color: #005FA0;
}

/* List style
-------------------------------------------------- */

#selectElementsPerPage {
    font-size: small;
}

/* Style for page /processesEvents */

.events-extra-data {
    list-style-type: none;
    text-align: left;
    padding: 0px;
    margin: 0px;
}

.events-extra-data-key {
    font-weight: bold;
}

i.bi.bi-remove-sign.bad-result, i.bi.bi-ok-sign.good-result {
    position: inherit;
}

/* --tooltip style --*/

.header-with-tooltip .tooltip .tooltip-inner{
    border: 1px solid #000;
    background-color:#ffffff;
    color: #212121;
    text-align: left;
}

/* User management */

.dropdown-license-item {
    padding: 0px 20px 0px 20px;
    white-space: nowrap;
}

.user-dropdown-menu {
    left: 80% !important;
    transform: translateX(-50%) !important;
    top: 100% !important;
}

.invite-user-form-field > * {
    margin:10px 10px 20px 10px !important;
}

.inline-msg {
    position: fixed;
}

.col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}
.invite-user-checkbox {
    padding: 10px;
}

.form-centered {
    float: none;
    margin: 0 auto;
}

.license-panel-content {
    text-align: left;
    margin-right: 15px;
    margin-left: 15px;
}

#enable-2fa-checkbox {
    display: block;
    margin: 0px;
}

#license-panel {
    margin-bottom: 0px;
}

.form-check-label {
    font-size: medium;
}

.enabling-button {
    margin-bottom: 5px;
    width: -webkit-fill-available;
}

.property-info {
    margin-left: 5px;
}

.quit-bullet-style {
    list-style: none;
    padding: 0;
}

i.bi-lock {
    color: black;
    background-color: transparent;
}

.page-admin table.table-activation tr:hover i.bi-lock {
    background-color: transparent;
}

.loader {
    width: 48px;
    height: 48px;
    border: 5px solid #005FA0;
    border-bottom-color: #f2f2f2;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.checkmark__circle {
	stroke-dasharray: 166;
	stroke-dashoffset: 166;
	stroke-width: 2;
	stroke-miterlimit: 10;
	stroke: #005FA0;
	fill: none;
	animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards
}

.checkmark {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: block;
	stroke-width: 2;
	stroke: #fff;
	stroke-miterlimit: 10;
	margin: auto;
	box-shadow: inset 0px 0px 0px #005FA0;
	animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both
}

.checkmark__check {
	transform-origin: 50% 50%;
	stroke-dasharray: 48;
	stroke-dashoffset: 48;
	animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards
}

@keyframes stroke {
	100% {
		stroke-dashoffset: 0
	}
}

@keyframes scale {

	0%,
	100% {
		transform: none
	}

	50% {
		transform: scale3d(1.1, 1.1, 1)
	}
}

@keyframes fill {
	100% {
		box-shadow: inset 0px 0px 0px 30px #005FA0;
	}
}

.otp-text {
    font-size: 30px;
    text-align: center;
    font-weight: bold;
}

.otp-text-info {
    font-size: 15px;
    text-align: center;
}

.otp-modal-dialog {
    width: 400px;
}

.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #005FA0;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: auto;
  box-shadow: inset 0px 0px 0px #005FA0;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px #005FA0;
  }
}


.cross-mark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #fa2929;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.cross-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: auto;
  box-shadow: inset 0px 0px 0px #fa2929;
  animation: fill-cross .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}
.cross-mark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 29;
  stroke-dashoffset: 29;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill-cross {
  100% {
    box-shadow: inset 0px 0px 0px 30px #fa2929;
  }
}

legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    font-size: 21px;
    line-height: inherit;
    color: inherit;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
}

.table-group-divider {
    border-top-color: rgba(0,0,0,0.1) !important;
}

.user-row-icons i {
    color: inherit !important;
}

.bootstrap-select.custom-license-picker > .dropdown-toggle {
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem !important;  /* Igual que form-select */
    background-color: #fff !important;
    color: #212529 !important;
    padding: 0.47rem 0.75rem !important;
    height: auto !important;
    box-shadow: none !important;
}

.bootstrap-select.custom-license-picker > .dropdown-toggle {
    font-size: 1rem;
    line-height: 1.5;
    width: 100% !important;
}

.custom-range-group .input-group-text,
.custom-range-group .form-control {
    border: 1px solid #ced4da !important;
}

.custom-range-group .input-group-text:first-child {
    border-right: 0 !important;
}

.custom-range-group .form-control {
    border-left: 0 !important;
    border-right: 0 !important;
}

.custom-range-group .input-group-text:last-child {
    border-left: 0 !important;
}

.custom-range-group .input-group-text,
.custom-range-group .form-control {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.bi-exclamation-triangle-fill {
    color: orange;
}

.formClass {
    width: 100%;
    display: flex;
    flex-direction: row;
}
.selectClass {
    width: 80%;
    margin: 5px;
}

.btnClass {
    margin: 5px;
}

.property-label {
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
}


.generalStats {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

.chartDiv {
    width: 80%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    text-align: center;
    align-content: center;
    align-items: center;
}

.globalStats {
    width: 80%;
    display: flex;
    flex-direction: row;
    place-content: space-around;
    text-align: center;
}

.chartDiv > div {
    width: 50%;
}

.table-responsive-client {
    margin-left:10%;
    margin-right:10%;
}

.main_container {
    width: 80%;
    margin: 10%;
    padding-top: 5%;
    background-color: white;
}
.pagination {
    margin: 0px !important;
}

.footer-table {
    width: 100%;
}

.chartsDiv {
    background-color: white;
    padding: 50px;
    height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.pieChart {
    width: 100%;
    height: 100%;
    display:flex;
    align-items: center;
    flex-direction: column;
}

.data-top{
    display: flex;
    flex-direction: row-reverse;
}

.formSearch {
    display: flex;
    flex-direction: column;
}

.listForm > input {
    width: 100%;
}

.buttonsForm {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}

.buttonsForm > button {
    width: 45%;
}

#verifications-table{
    margin-bottom: 32px;
}

.titleSite {
    margin: 18px 30px;
    font-weight: normal;
}

.formClass {
    width: 100%;
    display: flex;
    flex-direction: row;
}
.selectClass {
    width: 80%;
    margin: 5px;
}

.btnClass {
    margin: 5px;
}

.link-unstyled {
    font-style: inherit;
    color: inherit;
    background-color: transparent;
    font-size: inherit;
    text-decoration: none;
    font-variant: inherit;
    font-weight: inherit;
    line-height: inherit;
    font-family: inherit;
    border-radius: inherit;
    border: inherit;
    outline: inherit;
    box-shadow: inherit;
    padding: inherit;
    vertical-align: inherit;
  }

  .disabled-user-btn {
      color: gray;
  }

.uppercase-text {
    text-transform: uppercase;
}

.section-heading { font-size:18px; margin-top:30px; text-align:center; }
.mt-30 { margin-top:30px; }
.mb-50 { margin-bottom:50px; }
.mt-20 { margin-top:20px; }
.margin-top-50 { margin-top:50px; }

.screenshots-row-margin { margin:30px 8% 0 8%; }

.image-agent { cursor:pointer; width:auto; }

.face-image-right, .img-200-right { width:auto; height:200px; float:right; }
.face-image-left, .img-200-left { width:auto; height:200px; float:left; }

.video-wrapper-hidden { display:none; margin-bottom:50px; }
.video-liveness { margin-top:50px; display:none; width:50%; margin-left:auto; margin-right:auto; }
.video-stamps { margin-top:20px; display:none; width:50%; margin-left:auto; margin-right:auto; }

.scroll-80, .third-party-scroll { height:80%; overflow-y:scroll; }
.scroll-80-body, .third-party-scroll-body { height:80%; overflow-y:scroll; padding-left:10px; padding-top:5px; }

.card-no-margin-bottom { margin-bottom:0; }

.flex-column-center, .extra-images-flex, .extra-image-buttons-row { display:flex; flex-direction:column; align-items:center; }

.hidden-display { display:none !important; }

.line-height-35 { line-height:35px; }

.z-100, .video-draggable-wrapper { z-index:100; }
.w-fit-content, .fit-content { width:fit-content; }

.network-badge { color:green; background-color:rgba(0,0,0,0.7); width:fit-content; position:absolute; }
.network-badge-local { color:green; background-color:rgba(0,0,0,0.7); width:fit-content; position:absolute; right:0; bottom:10px; padding:5px; }

.remote-button-container { text-align:center; margin-bottom:10px; display:flex; flex-direction:column; align-items:center; }

.version-info { color:#cdcdcd; font-size:75%; float:right; }

.zoom-container-style { box-shadow:0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); background-color:transparent; position:fixed; right:0; bottom:0; height:200px; width:200px; opacity:0; }

.download-certificate-hidden { padding-top:12px; display:none; }

.cursor-pointer { cursor:pointer; }

.pos-relative { position:relative; }

.validation-icon-hidden { margin-left:8px; color:#28a745; display:none; }

.pt-12px { padding-top:12px; }

.attachments-list { list-style:none; padding:0; }
.attachment-item { margin:10px 0; font-size:14px; text-align:center; }
.attachment-link { text-decoration:none; color:#337ab7; }
.attachment-date { font-size:14px; color:#888; }

.extra-image-row { margin-top:30px; }

.otp-spinner-center { text-align:center; }

.switch-label-adjust { margin-bottom:-7px; }

.date-span-relative { position:relative; }

.image-swapper-container { display:block; }

.network-badge-wrapper { position:relative; width:fit-content; }

.centered-text { text-align:center; }

.screenshots-images-row { margin-top:30px; }

.image-rotation-group label.btn.line-height-35 { line-height:35px; }

.remote-media-black { background-image:none !important; background-color:black !important; }

.network-badge-poor { color:#ffcc00; background-color:rgba(0,0,0,0.7); }
.network-badge-bad { color:#ff0000; background-color:rgba(0,0,0,0.7); }

.icon-state-valid { color:#198754; }
.icon-state-invalid { color:#dc3545; }
.icon-state-warning { color:#ffc107; }


.margin-top-30 { margin-top:30px; }
.margin-bottom-10 { margin-bottom:10px; }
.mb-0 { margin-bottom:0; }
.padding-5 { padding:5px; }

.attachment-link:hover { text-decoration:underline; }

.img-fluid-auto { width:auto; max-width:100%; height:auto; }

.rotate-active { outline:2px solid #0d6efd; }

.hidden { display:none !important; }

.lh-35 { line-height:35px; }

.third-party-personal-info {
    height: 80%; overflow-y: scroll; padding-left: 10px; padding-top: 5px;
}

.list-attachments {
    list-style-type: none;
}

.attachment-item {
    margin: 10px 0;
    font-size: 14px;
    text-align: center;
}

.attachment-date {
    font-size: 14px;
    color: #888;
}

.third-party-biometric-data {

    height: 80%;
    overflow-y: scroll;
}

.w-40 {
width: 40%;}

.fs-70 {
    font-size: 70px;
}

.fs-42 {
    font-size: 42px;
}

.fs-15 {
    font-size: 15px;
}

.fs-40 {
    font-size: 40px;
}

.mw-20 {
    max-width: 20px;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }

  .h-70 {
    height: 70%;
  }

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

   .ml-5px { margin-left: 5px; }

   .edit-user-license-selector {
    width: 100%; min-width: 500px; max-height: 300px; overflow-y: auto; white-space: nowrap;
   }

   .p-40 {
    padding: 40px;
   }

   .fs-40 {
    font-size: 40px;
   }

 .pos-15 {
   top: 15px;
   right: 15px;
 }

  .w-76 {
     width: 76%;
   }

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

    .lh-20px {
      line-height: 20px;
    }

  .h-350px {
    height: 350px;
  }

  .h-20px {
    height: 20px;
  }

  .report-range {
    background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc
    }

.w-dynamic {
    width: var(--width);
  }

  .fs-12pt {
    font-size: 12pt;
  }

  .pd-20 {
    padding: 20px;
  }

    .w-95 {
      width: 95%;
    }

  .mt-20 {
    margin-top: 20px;
  }

  .min-h-200 {
    min-height: 200px;
  }

   .h-90 {
     height: 90%;
   }

   .h-95 {
     height: 95%;
   }

   .canvas-image-modal {
    display: block;
     margin: auto;
     max-height: 80vh;
     max-width: 100%;
    }

    .h-300px {
      height: 300px;
    }

  .saved-screenshot {
    max-height: 90vh;
    width: auto;
  }

  .circle-activations {
    margin: 70px 10px 70px 0
    }

.circle-canvas-report {
    margin: 15px 10px 10px 0
}

.m-10 {
    margin: 10px;
}

#video-draggable {
    position: relative;
    width: fit-content;
    z-index: 100;
}

#remote-media {
    position: relative;
    background-color: black;
}

.remote-video {
    width: 480px;
    height: 360px;
    object-fit: scale-down;
    display: block;
}

#local-media {
    position: absolute;
    z-index: 20;
}

.local-video {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border: 2px solid white;
    border-radius: 4px;
}

.network-badge {
    position: absolute;
    color: green;
    background-color: rgba(0,0,0,0.7);
    width: fit-content;
}

.network-badge-local {
    position: absolute;
    bottom: 10px;
    right: 10px;
    padding: 5px 8px;
    font-size: 14px;
    background-color: rgba(0,0,0,0.7);
    color: #00ff00;
    width: fit-content;
    z-index: 30;
}