.mode-switch {
  background-color: transparent;
  border: none;
  padding: 0;
  color: var(--main-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

.mode-switch.active .moon {
  fill: var(--main-color);
}

.styling {
  background: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  /* height: 150px;
  overflow: auto; */
}

.form-control {
  font-size: 15px;
}

#success_message {
  display: none;
}


.modal-title{
    color: var(--main-color);
}

@media (max-width: 767px) {
  .btn-xs-block {
    display: block;
    width: 100%;
  }

  input[type="submit"].btn-xs-block,
  input[type="reset"].btn-xs-block,
  input[type="button"].btn-xs-block {
    width: 100%;
  }

  .btn-block+.btn-xs-block,
  .btn-xs-block+.btn-block,
  .btn-xs-block+.btn-xs-block {
    margin-top: 0.5rem;
  }
}

.align-table {
  text-align: left;
}
@media (max-width: 599px) {
  .align-table {
    text-align: right;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .btn-sm-block {
    display: block;
    width: 100%;
  }

  input[type="submit"].btn-sm-block,
  input[type="reset"].btn-sm-block,
  input[type="button"].btn-sm-block {
    width: 100%;
  }

  .btn-block+.btn-sm-block,
  .btn-sm-block+.btn-block,
  .btn-sm-block+.btn-sm-block {
    margin-top: 0.5rem;
  }


}

/* Animation */
.animate {
  padding: 0px 10px 0px 0px;
  transition: all ease 0.4s;
}




@media (min-width: 992px) and (max-width: 1199px) {
  .btn-md-block {
    display: block;
    width: 100%;
  }

  input[type="submit"].btn-md-block,
  input[type="reset"].btn-md-block,
  input[type="button"].btn-md-block {
    width: 100%;
  }

  .btn-block+.btn-md-block,
  .btn-md-block+.btn-block,
  .btn-md-block+.btn-md-block {
    margin-top: 0.5rem;
  }
}

@media (min-width: 1200px) {
  .btn-lg-block {
    display: block;
    width: 100%;
  }

  input[type="submit"].btn-lg-block,
  input[type="reset"].btn-lg-block,
  input[type="button"].btn-lg-block {
    width: 100%;
  }

  .btn-block+.btn-lg-block,
  .btn-lg-block+.btn-block,
  .btn-lg-block+.btn-lg-block {
    margin-top: 0.5rem;
  }
}

a.disabled {
  pointer-events: none;
  cursor: default;
}




.dang {
  background-color: #f35959
}

.prim {
  background-color: #0275d8
}

.succ {
  background-color: #5cb85c
}


/* Start statistics */
.statistics {
  color: rgb(37, 37, 37);
}

.statistics .box {
  background-color: var(--card2-bg);
  padding: 15px;
  overflow: hidden;
  border-radius: 6px;
}

.statistics .box>i {
  float: left;
  color: #FFF;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  line-height: 60px;
  font-size: 22px;
}

.statistics .box .info {
  float: left;
  width: auto;
  margin-left: 10px;
}

.statistics .box .info h3 {
  margin: 5px 0 5px;
  display: inline-block;

}

.statistics .box .info p {
  color: rgb(122, 122, 122)
}

/* End statistics */
/* Start charts */
.charts {
  margin-top: 25px;
  color: rgb(0, 0, 0)
}

.charts .chart-container {
  background-color: #ffffff;
  padding: 15px;
}

.charts .chart-container h3 {
  margin: 0 0 10px;
  font-size: 17px;
}

/* Start statis */

.statis {
  color: #EEE;
  margin-top: 15px;
}

.statis .box {
  position: relative;
  padding: 15px;
  overflow: hidden;
  border-radius: 3px;
  margin-bottom: 25px;
}

.statis .box h3:after {
  content: "";
  height: 2px;
  width: 70%;
  margin: auto;
  background-color: rgba(255, 255, 255, 0.12);
  display: block;
  margin-top: 10px;
}

.statis .box i {
  position: absolute;
  height: 70px;
  width: 70px;
  font-size: 22px;
  padding: 15px;
  top: -25px;
  left: -25px;
  background-color: rgba(255, 255, 255, 0.15);
  line-height: 60px;
  text-align: right;
  border-radius: 50%;
}

/*chart*/
.chrt3 {
  padding-bottom: 50px;
}

.chrt3 .chart-container {
  height: 350px;
  padding: 15px;
  margin-top: 25px;
}

.chrt3 .box {
  padding: 15px;
}

.main-color {
  color: #ffffff;
}

.warning {
  background-color: #430968;
}

.danger {
  background-color: #d9534f;
}

.success {
  background-color: #932767;
}

.inf {
  background-color: #5bc0de;
}

.bg-primary {
  color: #fff;
  background-color: #00695c;
}

input[readonly] {
  background-color: #f6f6f6;
  /*border: 0;*/
  box-shadow: none;
}


.container2 {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
}

h2 {
  /*color: #337ab7;*/
  color: var(--main-color);
  font-size: 26px;
  margin: 10px 0;
  text-align: center;
}

.tabler>:not(caption)>*>* {
  /*padding: 0.5rem !important;*/
}

h2 small {
  font-size: 0.5em;
}

.responsive-table li {
  border-radius: 3px;
  padding: 25px 30px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
}

.responsive-table .table-header {
  background-color: #f5f5f5;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.responsive-table .table-row {
  background-color: #fff;
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.1);
}

.responsive-table .col-1 {
  flex-basis: 10%;
}

.responsive-table .col-2 {
  flex-basis: 15%;
}

.responsive-table .col-3 {
  flex-basis: 20%;
}

.responsive-table .col-4 {
  flex-basis: 15%;
}

.responsive-table .col-5 {
  flex-basis: 20%;
}

.responsive-table .col-6 {
  flex-basis: 20%;
}



@media all and (min-width: 768px) {
  .section-center__full {
    justify-content: center;
  }
}

@media all and (max-width: 767px) {
  .responsive-table .table-header {
    display: none;
  }

  .responsive-table li {
    display: block;
  }

  .responsive-table .col {
    flex-basis: 100%;
  }

  .responsive-table .col {
    display: flex;
    padding: 10px 0;
  }

  .responsive-table .col:before {
    color: #6c7a89;
    padding-right: 10px;
    content: attr(data-label);
    flex-basis: 50%;
    text-align: right;
  }
}

.text-bg-warning {
  background-color: #430968 ;
  color:white ;
}

.text-bg-reagendado {
  background-color: #F06292 ;
}

.text-bg-pendiente {
  background-color: #FF8A65 ;
}

.text-bg-pendiente2 {
  background-color: #7C4DFF ;
}

.text-bg-primary {
  background-color: #ff8f00 ;
}

.text-bg-success {
  background-color: #00695c ;
}

.text-bg-danger {
  background-color: #d4322c ;
}

.copy-text {
  position: relative;
  padding: 2px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  /*display: flex;*/
  max-width: 183px;
  max-height: 28px;
  display: flex;
}

.copy-text input.text {
  padding: 3px;
  font-size: 14px;
  color: #555;
  border: none;
  outline: none;
}

.copy-text button {

  background: #9aaa1f;
  color: #fff;
  font-size: 14px;
  border: none;
  outline: none;
  border-radius: 10px;
  cursor: pointer;
}

.copy-text button:active {
  background: #337ab7;
}

.copy-text button:before {
  content: "Copiado!";
  position: absolute;
  top: -45px;
  right: 0px;
  background: #9aaa1f;
  padding: 8px 10px;
  border-radius: 20px;
  font-size: 15px;
  display: none;
}

.copy-text button:after {
  content: "";
  position: absolute;
  top: -20px;
  right: 25px;
  width: 10px;
  height: 10px;
  background: #9aaa1f;
  transform: rotate(45deg);
  display: none;
}

.copy-text.active button:before,
.copy-text.active button:after {
  display: block;
}



.section-center__full {
  display: flex;
  align-items: center;
  vertical-align: middle;
  text-align: center;
}



.bootstrap-datetimepicker-widget {
  z-index: 1151 !important;
}


.ui-autocomplete-term {
  font-weight: 500;
  color: red;
}



@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic');

@-webkit-keyframes popUpEntrada {
  0% {
    opacity: 0;
    margin-top: -20%;
  }

  75% {
    margin-top: 5%;
  }

  100% {
    opacity: 1;
  }
}

@keyframes popUpEntrada {
  0% {
    opacity: 0;
    margin-top: -20%;
  }

  75% {
    margin-top: 5%;
  }

  100% {
    opacity: 1;
  }
}

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

  75% {
    opacity: 1;
    margin-top: -20%;
  }

  100% {
    opacity: 0;
    margin-top: 40%;
  }
}

@keyframes popUpSaida {
  0% {
    opacity: 1;
  }

  75% {
    opacity: 1;
    margin-top: -20%;
  }

  100% {
    opacity: 0;
    margin-top: 40%;
  }
}

.popUpFundo {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #4879c3;
  opacity: 0.8;
  z-index: 999999;
}

.popUp {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  display: none;
  position: fixed;
  top: 40%;
  left: 50%;
  padding: 0;
  font-size: 14px;
  font-family: 'PT Sans', sans-serif;
  color: #fff;
  border-style: none;
  z-index: 999;
  overflow: hidden;
  z-index: 999999;
}

.popUp button:focus {
  outline-style: none;
}

.popUp>h1 {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  margin: 0;
  padding: 5px;
  min-height: 40px;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  color: #fff;
  background-color: transparent;
  border-style: none;
  border-width: 5px;
  border-color: black;
}

.vermelha>h1 {
  border-color: #fa5032;
}

.verde>h1 {
  border-color: #42ad4f;
}

.azul>h1 {
  border-color: #659cff;
}

.popUp>div {
  display: block;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 100%;
  padding: 5%;
  text-align: center;
  vertical-align: middle;
  border-width: 1px;
  border-color: #ccc;
  border-style: none none solid none;
  overflow: auto;

}

.popUp>div>span {
  display: table-cell;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

.popUp>button {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  margin: 0;
  padding: 10px;
  width: 50%;
  border: 1px none #ccc;
  color: #fff;
  font-family: inherit;
  cursor: pointer;
}

.alert {
  width: 100% !important;
}


.popUp .puCancelar {
  float: left;
}

.popUp .puEnviar {
  float: right;
}



.alert {
  position: relative;
  /*padding: 0;*/
  min-width: 250px;
}

.alert button.close {
  margin: 0.45rem 1rem;
  opacity: 0.75;
}

.alert button.close:hover {
  opacity: 1;
}

.alert-icon,
.alert-text {
  display: table-cell;
  vertical-align: middle;
}

.alert-icon {
  min-width: 40px;
  text-align: center;
  font-size: 2.2rem;
  color: white;
  background-color: rgba(0, 0, 0, 0.25);
  padding: 1rem;
}

.alert-text {
  color: #2d3a51;
  padding: 2.4rem;
  width: 100%;
}

.alert-text>h5 {
  margin-top: 0;
  font-weight: 600;
}

.alert .alert-link {
  font-weight: normal;
  color: #4790e6;
}

.alert ul {
  margin: 0;
}

.alert ul li {
  margin-bottom: 0.2rem;
}

.alert ul li:last-child {
  margin-bottom: 0;
}

.alert-warning {
  background-color: #fff8f5;
  border-color: #ffccb3;
}

.alert-warning .alert-text h5 {
  color: #ff5400;
}

.alert-warning button.close {
  color: #ff5400;
}

.alert-warning .alert-icon {
  background-color: #ff5400;
}

.alert-help {
  background-color: #fffcf5;
  border-color: #ffe4ad;
}

.alert-help .alert-text h5 {
  color: #ffab00;
}

.alert-help button.close {
  color: #ffab00;
}

.alert-help .alert-icon {
  background-color: #ffab00;
}

.alert-info {
  background-color: #f7fbff;
  border-color: #cee5ff;
}

.alert-info .alert-text h5 {
  color: #3592ff;
}

.alert-info button.close {
  color: #3592ff;
}

.alert-info .alert-icon {
  background-color: #3592ff;
}

.alert-danger {
  background-color: #fdf5f5;
  border-color: #f6d3d3;
  margin-top: 1rem;
}

.alert-danger .alert-text h5 {
  color: #d33534;
}

.alert-danger button.close {
  color: #d33534;
}

.alert-danger .alert-icon {
  background-color: #d33534;
}

.alert-success {
  background-color: #edf8ed;
  border-color: #b9e4b9;
}

.alert-success .alert-text h5 {
  color: #42ae42;
}

.alert-success button.close {
  color: #42ae42;
}

.alert-success .alert-icon {
  background-color: #42ae42;
}


.img-responsive {
      display: block;
      max-width: 100%;
      height: auto;
}

@media (max-width: 991px) {
  .alert-text .img-responsive {
    max-width: 100%;
    height: auto;
  }

}

@media (min-width: 992px) {
  .alert-text .img-responsive {
    max-width: 50%;
    height: auto;
  }
  
}


@media (min-width: 1025px) {

  .tabler>:not(caption)>*>* {
    padding: 0.5rem !important;
  }

  
}

@media (max-width: 1025px){
  .card-body-p0 {
    padding: 18px 0 0 0 !important;
  }
}




.colorgraph {
  height: 5px;
  border-top: 0;
  background: #c4e17f;
  border-radius: 5px;
  background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
}




.p {
  margin: 0;
  width: 100%;
  max-width: 300px;
  height: 100%;
  max-height: 200px;
  transform: translate(-50%, -50%);
}

.p>div {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 100%;
  height: calc(100% -108px);
  margin: 0;
  padding: 0;
  border-style: none;

}

.p>div>div,
.p span {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 300px;
  height: 108px;
  margin: 0;
  padding: 0;
  border-style: none;

}

.p>button {
  height: 50px;

}

.puEnviar {
  margin: 5px 0;
}

.puCancelar {
  margin: 5px 0;
}


.m {
  margin: 0;
  width: 100%;
  max-width: 400px;
  height: 100%;
  max-height: 300px;
  transform: translate(-50%, -50%);
}

.m>div {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 100%;
  height: calc(100% -108px);
  margin: 0;
  padding: 0;
  border-style: none;
  border-color: #ccc;
}

.m>div>div,
.m>span,
.m>div>span {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 400px;
  height: 208px;
  margin: 0;
  padding: 0;
  border-style: none;
}

.m>button {
  height: 50px;
}

.g {
  margin: 0;
  width: 100%;
  max-width: 600px;
  height: 100%;
  max-height: 500px;
  transform: translate(-50%, -50%);
}

.g>div {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 100%;
  height: calc(100% -108px);
  margin: 0;
  padding: 0;
  border-style: none;
  border-color: #ccc;
}

.g>div>div,
.g span {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 600px;
  height: 408px;
  margin: 0;
  padding: 0;
  border-style: none;
}

.g>button {
  height: 60px;
}


.alert.puEnviar {
  display: none;
}

.popUpEntrada {
  display: block !important;
  animation: popUpEntrada 0.5s;
  -webkit-animation: popUpEntrada 0.5s;
}

.popUpSaida {
  display: block !important;
  animation: popUpSaida 0.5s;
  -webkit-animation: popUpSaida 0.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.blue {
  background-color: #51b2d6;
}

.blue>button {
  background-color: #38a7d0;
}

.blue>button:hover {
  background-color: #72c1de;
}

.popUpFundo.blue {
  background-color: #134152;
}

.green {
  background-color: #43b649;
}

.green>button {
  background-color: #3da743;
}

.green>button:hover {
  background-color: #4fbe55;
}

.popUpFundo.green {
  background-color: #173f19;
}

.red {
  background-color: #d55c4b;
}

.red>button {
  background-color: #d04b38;
}

.red>button:hover {
  background-color: #d86959;
}

.popUpFundo.red {
  background-color: #4a1811;
}

.orange {
  background-color: #f9a025;
}

.orange>button {
  background-color: #f89710;
}

.orange>button:hover {
  background-color: #f9ac42;
}

.popUpFundo.orange {
  background-color: #8c5b02;
}

.purple {
  background-color: #ab4bd5;
}

.purple>button {
  background-color: #a238d0;
}

.purple>button:hover {
  background-color: #b159d8;
}

.popUpFundo.purple {
  background-color: #3f114a;
}

.white {
  background-color: #fff;
  color: #555;
}

.white>h1 {
  color: #000;
}

.white>button {
  background-color: #f3f3f3;
  color: #555;
}

.white>button:hover {
  background-color: #e3e3e3;
}

.popUpFundo.white {
  background-color: #555;
}


/*
That part is just for the form
*/
.colorfulForm {
  width: 350px;
  margin: 60px auto;
}

.colorfulForm input,
.colorfulForm textarea,
.colorfulForm select {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 350px;
  padding: 5px;
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  border-radius: 2px;
}

.colorfulForm label {
  display: block;
  font-family: Verdana, Arial;
  margin: 10px 0 5px 0;
}

.colorfulForm button {
  width: 100px;
  margin: 3px 7px;
  padding: 5px;
  color: #fff;
  border-style: none;
}


figure {
  width: auto;
  height: auto;
  overflow: hidden;
  position: relative;
  vertical-align: top;
  /*box-shadow: 0 0 5px #ddd;*/
  display: block;
  max-width: 100%;
  border-radius: 6px;
}

figure img {
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

figure:hover figcaption {
  background: rgba(255, 255, 255, 0.3);
}

figcaption:hover div {
  opacity: 1;
  top: 0;
}

figcaption:hover div:after {
  width: 50%;
}

/*figure:hover img {
  -webkit-transform: scale3d(1.2, 1.2, 1);
  transform: scale3d(1.2, 1.2, 1);
}*/


.menubar {
  height: 23px;
  width: 100%;
  margin: 2px;
  color: white;
}









.panelpre {
  border-radius: 6px;
  box-shadow: none;
  background-color: rgb(5, 3, 85);
  margin-bottom: 1px;
}

.panelpre .panel-heading {
  padding: 2px 12px;
}

.panelpre .panel-body {
  background-color: rgb(200, 201, 201);
  border-radius: 6px;
  margin: 0px 4px 4px 4px;
  min-height: 200px;
}


.panelpre2 {
  border-radius: 6px;
  box-shadow: none;
  background-color: rgb(8, 68, 70);
}

.panelpre2 .panel-heading {
  padding: 2px 12px;
}

.panelpre2 .panel-body {
  background-color: rgb(200, 201, 201);
  border-radius: 6px;
  margin: 0px 4px 4px 4px;
  min-height: 200px;
}



.panelpre3 {
  border-radius: 6px;
  box-shadow: none;
  background-color: rgb(8, 68, 70);
}

.panelpre3 .panel-heading {
  padding: 2px 6px;
}

.panelpre3 .panel-body {
  background-color: rgb(200, 201, 201);
  border-radius: 6px;
  margin: 0px 4px 4px 4px;
  min-height: 50px;
}



.panelpre4 {
  border-radius: 6px;
  box-shadow: none;
  background-color: rgb(70, 8, 8);
}

.panelpre4 .panel-heading {
  padding: 2px 12px;
}

.panelpre4 .panel-body {
  background-color: rgb(200, 201, 201);
  border-radius: 6px;
  margin: 0px 4px 4px 4px;
  min-height: 200px;
}



.responsive-buttons {
  text-align: center;
}

.heading {
  font-size: 26px;
  margin-bottom: 30px;
}

.card3 {
  background: #fff;
  border-radius: 3px;
  display: inline-block;
  height: 135px;
  margin: 1rem;
  position: relative;
  width: 265px;
  padding: 25px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.card3:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  cursor: default;
}

.btn3 {
  background: #337ab7;
  color: #fff;
  display: inline-block;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
  text-overflow: ellipsis;
  transition: 0.2s box-shadow ease-in-out, 0.2s background-color ease-in-out;
  white-space: nowrap;
  padding: 1.4em 2em;
  width: 200px;
}

.btn3:hover {
  text-decoration: none;
  color: #fff;
  background: #3a5f6c;
  box-shadow: inset 0 0 6px #333;
}

.fa-linkedin {
  padding-right: 7px;
  font-size: 16px;
}

.text3 {
  font-weight: 700;
  font-size: 14px;
  margin: 15px 0;
}

.btn-small-screen {
  border-radius: 50%;
}

.btn-small-screen .fa-linkedin {
  padding: 0;
  font-size: 20px;
  height: 20px;
  width: 20x;
}

.button-section {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#hidden_div {
  display: none;
}


.btn-file {
  position: relative;
  overflow: hidden;
  vertical-align: middle;
}

.fileinput.input-group {
  display: flex;
  margin-bottom: 9px;
  flex-wrap: nowrap;
}

.fileinput.input-group>* {
  position: relative;
  z-index: 2;
}

.fileinput .form-control {
  padding: .375rem .75rem;
  display: inline-block;
  margin-bottom: 0px;
  vertical-align: middle;
  cursor: text;
}

.fileinput-filename {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
}

.form-control .fileinput-filename {
  vertical-align: bottom;
}

.input-group>.form-control:not(:last-child),
.input-group>.custom-select:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.fileinput.input-group>.btn-file {
  z-index: 1;
}

.fileinput-new {
  padding-right: 10px;
}

.fileinput-new.input-group .btn-file,
.fileinput-new .input-group .btn-file {
  border-radius: 0 4px 4px 0;
}

.fileinput-new.input-group .btn-file,
.fileinput-new .input-group .btn-file {
  border-radius: 0 .25rem .25rem 0;
}

.input-group-addon:not(:first-child) {
  border-left: 0;
}

.fileinput .input-group-addon {
  padding: .375rem .75rem;
  width: auto;
}

.fileinput-exists .fileinput-new,
.fileinput-new .fileinput-exists {
  display: none;
}

.fileinput .btn {
  vertical-align: middle;
}

.fileinput .input-group-addon {
  padding: .375rem .75rem;
}

.btn:not(:disabled):not(.disabled) {
  cursor: pointer;
}

.fileinput.input-group>.btn-file {
  z-index: 1;
}

.fileinput-new.input-group .btn-file,
.fileinput-new .input-group .btn-file {
  border-radius: 0 4px 4px 0;
}

.fileinput-new.input-group .btn-file,
.fileinput-new .input-group .btn-file {
  border-radius: 0 .25rem .25rem 0;
}

.btn-file>input {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  font-size: 23px;
  cursor: pointer;
  filter: alpha(opacity=0);
  opacity: 0;
  direction: ltr;
}

.loading {
  background: transparent url('https://you.com.py/admin/img/loading2.gif') center no-repeat;
}

.panel-info {
  border-color: #daecf7;
  box-shadow: 5px 4px 30px rgb(0 0 0 / 10%);
  border-radius: 10px;
  background: var(--bg-panel);
  transition: all .5s;
}

.panel-info>.panel-heading {
  color: #112452;
  background-color: #d9edf7;
  border-color: #112452;
  padding: 5px 15px;

}


.panel-info>.panel-heading2 {
  color: #112452;
  background-color: #dceeee;
  border-color: #112452;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;

}

.panel-info2 {
  border-color: #112452;
}

.panel-info2>.panel-heading {
  color: #ffffff;
  background-color: #021e53;
  border-color: #112452;
}


.badge-notify {
  background: #c50202;
  position: relative;
  top: -10px;
}

.badge-notify_historial {
  /*background: #0c6dfd;*/
  background: #4253f1;
  position: relative;
  top: -10px;
}




/*
.btn-primary {
  color: #fff;
  background-color: #008080;
  border-color: #357ebd;
}


.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: #3a5f6c;
  border-color: #285e8e;
}
*/



.table>tbody>tr.info>td,
.table>tbody>tr.info>th,
.table>tbody>tr>td.info,
.table>tbody>tr>th.info,
.table>tfoot>tr.info>td,
.table>tfoot>tr.info>th,
.table>tfoot>tr>td.info,
.table>tfoot>tr>th.info,
.table>thead>tr.info>td,
.table>thead>tr.info>th,
.table>thead>tr>td.info,
.table>thead>tr>th.info {
  background-color: #d9edf7;
}






@import url('https://fonts.googleapis.com/css?family=Meie+Script|Shadows+Into+Light|Arvo|Monda');

.font_monda {
  font-family: 'Monda', sans-serif;
}

.font_meie_script {
  font-family: 'Meie Script', cursive;
}

.font_shadows_into_light {
  font-family: 'Shadows Into Light', cursive;
}

.font_arvo {
  font-family: 'Arvo', serif;
  font-style: italic;
  font-weight: 400;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,500&family=Open+Sans&display=swap');


.icon-photo {
  position: absolute;
  right: 0;
  bottom: 0;
}

.profile-pic {
  border-radius: 50%;
  height: 150px;
  width: 150px;
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  vertical-align: middle;
  text-align: center;
  color: transparent;
  transition: all .3s ease;
  text-decoration: none;
  cursor: pointer;
}

.profile-pic:hover {
  background-color: rgba(0, 0, 0, .5);
  z-index: 10000;
  color: #fff;
  transition: all .3s ease;
  text-decoration: none;
}

.profile-pic span {
  display: inline-block;
  padding-top: 4.5em;
  padding-bottom: 4.5em;
}


.profile-pic {
  color: transparent;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: all 0.3s ease;
}

.profile-pic input {
  display: none;
}

.profile-pic img {
  position: absolute;
  object-fit: cover;
  width: 165px;
  height: 165px;
  box-shadow: 0 0 10px 0 rgba(255, 255, 255, .35);
  border-radius: 100px;
  z-index: 0;
}

.profile-pic .-label {
  cursor: pointer;
  height: 165px;
  width: 165px;
}

.profile-pic:hover .-label {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, .8);
  z-index: 10000;
  color: #fafafa;
  transition: background-color 0.2s ease-in-out;
  border-radius: 100px;
  margin-bottom: 0;
}

.profile-pic span {
  display: inline-flex;
  padding: 0.2em;
  height: 2em;
}


@media all and (max-width: 767px) {
  .size_sm {
    width: 8em;
  }
}




.wrap {
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
}

a:focus,
a:hover,
a:active {
  outline: 0;
  text-decoration: none;
}

.panelh {
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #fff;
  background: none;
  box-shadow: none;
}

.panelh:last-child {
  border-bottom: none;
}

.panel-group>.panelh:first-child .panel-heading {
  border-radius: 10px 10px 0 0;
}

.panel-group .panelh {
  border-radius: 0;
}

.panel-group .panelh+.panelh {
  margin-top: 0;
}

/*#008080   009688*/
.panelh>.panel-heading {
  background-color: #69737c;
  border-radius: 0;
  border: none;
  color: #fff;
  padding: 0;
}

.panelh>.panel-heading>.panel-title a {
  display: block;
  color: #fff;
  padding: 15px;
  position: relative;
  font-size: 16px;
  font-weight: 400;
}

.panelh>.panel-body {
  background: #fff;
}

.panelh:last-child .panel-body {
  border-radius: 0 0 4px 4px;
}

.panelh:last-child .panel-heading {
  border-radius: 0 0 4px 4px;
  transition: border-radius 0.3s linear 0.2s;
}

.panelh:last-child .panel-heading.active {
  /*border-radius: 0;*/
  transition: border-radius linear 0s;
}

/* #bs-collapse icon scale option */

.panelh>.panel-heading a:before {
  content: '\e146';
  position: absolute;
  font-family: 'Material Icons';
  right: 5px;
  top: 10px;
  font-size: 24px;
  transition: all 0.5s;
  transform: scale(1);
}

.panelh>.panel-heading.active a:before {
  content: ' ';
  transition: all 0.5s;
  transform: scale(0);
}

#bs-collapse-v .panel-heading a:after {
  content: ' ';
  font-size: 24px;
  position: absolute;
  font-family: 'Material Icons';
  right: 5px;
  top: 10px;
  transform: scale(0);
  transition: all 0.5s;
}

#bs-collapse-v .panel-heading.active a:after {
  content: '\e909';
  transform: scale(1);
  transition: all 0.5s;
}

/* #accordion rotate icon option */

#accordion .panel-heading a:before {
  content: '\e316';
  font-size: 24px;
  position: absolute;
  font-family: 'Material Icons';
  right: 5px;
  top: 10px;
  transform: rotate(180deg);
  transition: all 0.5s;
}

#accordion .panel-heading.active a:before {
  transform: rotate(0deg);
  transition: all 0.5s;
}

.h-divider {
  margin-top: 25px;
  margin-bottom: 5px;
  height: 1px;
  width: 100%;
  border-top: 1px dashed rgb(255, 0, 0);
}

.wrapper {
  padding: 100px;
}

.image--cover {
  width: 150px;
  height: 150px;
  border-radius: 50%;

  object-fit: cover;
  object-position: center right;
}

.center img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


.profile-userpic img {
  float: none;
  margin: 2px auto;
  -webkit-border-radius: 30% !important;
  -moz-border-radius: 30% !important;
  border-radius: 30% !important;
  /*border: 5px solid #5e5e5e;*/
  border: 5px solid #3a5f6c;

  width: auto;
  height: 300px;
  object-fit: cover;
  object-position: 50% 50%;

}

.calendar .event-name {
    margin-left: 0px !important;
    width: 100% !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    display: inline !important;
}

.calendar .calendar-events {
  font-weight: 500 !important;
  font-size: 0.82rem !important;
}


.table-row {
  border-bottom: 1px solid var(--table-line-color) !important;  
  background-color: var(--table-row) !important;
  color: var(--color_table) !important;
}

.table__th:hover {
  color: #01b9d1;
}

.table-row__td {
  padding: 10px 8px !important;
  vertical-align: middle !important;
  color: var(--table-row__td);
  font-size: 1.1rem;
  font-weight: 400;
  position: relative;
  line-height: 18px !important;
  border: 0 !important;
}

.table-row__tdR {
  padding: 10px 8px !important;
  vertical-align: middle !important;
  color: var(--table-row__td);
  font-size: 0.8rem;
  font-weight: 400;
  position: relative;
  line-height: 14px !important;
  border: 0 !important;
 
}


.table-row__tdRe {
  padding: 10px 8px !important;
  vertical-align: middle !important;
  color: var(--table-row__td);
  font-size: 0.9rem;
  font-weight: 400;
  position: relative;
  line-height: 14px !important;
  border: 0 !important;
 
}


.table-row--overdue {
  width: 3px;
  background-color: #e36767;
  display: inline-block;
  position: absolute;
  height: calc(100% - 24px);
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.table-row--red {
  background-color: var(--table-row--red);
  color: var(--color_table);
}

.table-row_2 {
  border-bottom: 1px solid #e4e9ea;
  background-color: var(--table-row);
}

.table__th_2:hover {
  color: #01b9d1;
}

.table-row__td_2 {
  padding: 3px 8px !important;
  vertical-align: middle !important;
  color: var(--table-row__td);
  font-size: 11.5px;
  font-weight: 400;
  position: relative;
  line-height: 18px !important;
  border: 0 !important;
}

.table-row--red_2 {
  background-color: var(--table-row--red);
  color: var(--table-row__td);
}


.table-row--overdue_2 {
  width: 3px;
  background-color: #e36767;
  display: inline-block;
  position: absolute;
  height: calc(100% - 24px);
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/*table tbody td {
  border-top: 1px solid #f0f0f0;
}*/

.table-row:hover {
  background: rgba(123, 153, 218, 0.1) !important;
}

table#tableC {
  margin: 5px auto;
  border-spacing: 0px;
  width: 100%;
  /*  margin-left: 15%;
  margin-right: 15%;*/
}


.disabled-link {
  pointer-events: none;
}


.blocked {
  color: #c2c2c2 !important;
  border: 0px solid #ccc;
  /* The important overrides the settings from bootstrap */
  cursor: not-allowed;
}


input.checkbox_[type=checkbox] {
  position: relative;
  width: 51px;
  height: 31px;
  -webkit-appearance: none;
  -webkit-appearance: none;
  background: rgba(120, 120, 128, 0.16);
  outline: none;
  cursor: pointer;
  border-radius: 20px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  transition: background 300ms linear;
}

input.checkbox_[type=checkbox]::before {
  position: absolute;
  content: "";
  width: 27px;
  height: 27px;
  top: 2px;
  left: 2px;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: left 300ms;
}

input.checkbox_[type=checkbox]:checked {
  background: #3b94ff;
}

input.checkbox_[type=checkbox]:checked::before {
  left: 22px;
  background-color: #fff;
}



input.checkbox_w[type=checkbox] {
  position: relative;
  width: 51px;
  height: 31px;
  -webkit-appearance: none;
  -webkit-appearance: none;
  background: rgba(120, 120, 128, 0.16);
  outline: none;
  cursor: pointer;
  border-radius: 20px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  transition: background 300ms linear;
}

input.checkbox_w[type=checkbox]::before {
  position: absolute;
  content: "";
  width: 27px;
  height: 27px;
  top: 2px;
  left: 2px;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: left 300ms;
}

input.checkbox_w[type=checkbox]:checked {
  background: #075E54;
}

input.checkbox_w[type=checkbox]:checked::before {
  left: 22px;
  background-color: #fff;
}




.slds-checkbox {
  display: inline-block;
}

.slds-checkbox .slds-checkbox--faux {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  border: 1px solid #d8dde6;
  border-radius: 0.125rem;
  background: white;
  transition: border 0.1s linear, background-color 0.1s linear;
}

.slds-checkbox .slds-form-element__label {
  display: inline;
  vertical-align: middle;
  font-size: 0.875rem;
}

.slds-checkbox [type="checkbox"] {
  width: 1px;
  height: 1px;
  border: 0;
  clip: rect(0 0 0 0);
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

.slds-checkbox [type="checkbox"]:checked+.slds-checkbox--faux:after,
.slds-checkbox [type="checkbox"]:checked~.slds-checkbox--faux:after {
  display: block;
  content: '';
  height: 0.5rem;
  width: 1rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0) rotate(-45deg);
  border-bottom: 2px solid #1589ee;
  border-left: 2px solid #1589ee;
}

.slds-checkbox [type="checkbox"]:focus+.slds-checkbox--faux,
.slds-checkbox [type="checkbox"]:focus~.slds-checkbox--faux {
  content: '';
  border-color: #1589ee;
  box-shadow: 0 0 3px #0070D2;
}

.slds-checkbox [type="checkbox"]:focus:checked>.slds-checkbox--faux,
.slds-checkbox [type="checkbox"]:focus:checked~.slds-checkbox--faux {
  border-color: #1589ee;
  background-color: white;
}

.slds-checkbox [type="checkbox"][disabled]+.slds-checkbox--faux,
.slds-checkbox [type="checkbox"][disabled]~.slds-checkbox--faux {
  background-color: #e0e5ee;
  border-color: #a8b7c7;
}

.slds-checkbox [type="checkbox"][disabled]+.slds-checkbox--faux:after,
.slds-checkbox [type="checkbox"][disabled]~.slds-checkbox--faux:after {
  border-color: white;
}

.slds-has-error .slds-checkbox [type="checkbox"]+.slds-checkbox--faux,
.slds-has-error .slds-checkbox [type="checkbox"]~.slds-checkbox--faux {
  border-color: #c23934;
  border-width: 2px;
}

.slds-has-error .slds-checkbox [type="checkbox"]:checked+.slds-checkbox--faux,
.slds-has-error .slds-checkbox [type="checkbox"]:checked~.slds-checkbox--faux {
  border-color: #c23934;
  background-color: white;
}

.slds-has-error .slds-checkbox [type="checkbox"]:checked+.slds-checkbox--faux:after,
.slds-has-error .slds-checkbox [type="checkbox"]:checked~.slds-checkbox--faux:after {
  border-color: #d4504c;
}

.slds-form-element .slds-checkbox [type="checkbox"]+.slds-checkbox--faux,
.slds-form-element .slds-checkbox [type="checkbox"]~.slds-checkbox--faux {
  margin-right: 0.5rem;
}

.slds-assistive-text {
  position: absolute !important;
  margin: -1px !important;
  border: 0 !important;
  padding: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
}


.slds-text-heading--label {
  margin-bottom: 0.5rem;
}

.footer_cobro {
  margin-top: -26px;
  margin-bottom: 0px;
  border-spacing: 0px;
}

.footer_cobro_recibo {
  margin-top: 5px;
  margin-bottom: 0px;
  border-spacing: 0px;
}


.cobrar {
  margin-top: 0px;
}

@media (max-width: 991px) {
  .footer_cobro {
    margin-top: -26px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    border-spacing: 0px;
    width: 100%;
  }

  .cobrar {
    margin-left: 0px;
    padding: 0px;
    margin-top: -24px;
  }

}

.text-bg-class {
  display: flex;
  align-items: center;
}


.tp-tooltip+.tooltip>.tooltip-inner {
  background-color: #f00;
}

.tp-tooltip+.tooltip .tooltip-arrow {
  border-top: 5px solid red !important;
}


.btn-ring {
  display: none;
}

.btn-ring:after {
   content: " ";
    width: 0.75em;
    height: 0.75em;
    margin-right: 0.5em;
    border-radius: 50%;
    border: 6px solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: loading-spinner-animation 1s linear infinite;
}

@keyframes loading-spinner-animation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


.box {
  box-shadow: 0px 1px 22px -12px #607D8B;
  background-color: #fff;
  padding: 25px 35px 25px 30px;
}

#monthly-earnings-chart #apexcharts-canvas {
  position: relative;
}

#monthly-earnings-chart #apexcharts-canvas:after {
  content: "";
  position: absolute;
  left: 0;
  right: 58%;
  top: 0;
  bottom: 0;
  background: #24bdd3;
  opacity: 0.65;
}

#monthly-earnings-chart #apexcharts-title-text {
  font-weight: 600;
}

#monthly-earnings-chart #apexcharts-subtitle-text {
  font-weight: 700;
}

.monthly-earnings-text {
  position: absolute;
  left: 70px;
  top: 187px;
  color: #fff;
  z-index: 10;
}

.monthly-earnings-text h6 {
  font-size: 16px;
}

.chart-title h5 {
  font-size: 18px;
  color: rgba(51, 51, 51, 1);
  margin-bottom: 38px;
}


@media screen and (max-width:760px) {
  .monthly-earnings-text {
    left: 30px;
  }

  .box {
    padding: 25px 0;
  }
}

.sparkboxes .box {
  padding: 3px 0 0 0;
  position: relative;
}

#spark1,
#spark2,
#spark3,
#spark4 {
  position: relative;
  padding-top: 15px;
}


/* overrides */
.sparkboxes #apexcharts-subtitle-text {
  fill: #8799a2 !important;
}


.spinner-border {
  display: none;
}

.note-editor .dropdown-toggle::after {
  all: unset;
}
.note-editor .note-dropdown-menu {
  box-sizing: content-box;
}

.note-editor .note-modal-footer {
  box-sizing: content-box;
}


#overlay {
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  display: none;
  background: rgba(0, 0, 0, .6)
}

.cv-spinner {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px #ddd solid;
  border-top: 4px #214fe0 solid;
  border-radius: 50%;
  animation: sp-anime .8s infinite linear
}

@keyframes sp-anime {
  100% {
    transform: rotate(360deg)
  }
}

.is-hide {
  display: none
}


#full-stars_mod {

}
#full-stars_mod .rating-group {
  display: inline-flex;
}
#full-stars_mod .rating__icon {
  pointer-events: none;
}
#full-stars_mod .rating__input {
  position: absolute !important;
  left: -9999px !important;
}
#full-stars_mod .rating__label {
  cursor: pointer;
  padding: 0 0.1em;
  font-size: 2rem;
}
#full-stars_mod .rating__icon--star {
  color: orange;
}
#full-stars_mod .rating__icon--none {
  color: #eee;
}
#full-stars_mod .rating__input--none:checked + .rating__label .rating__icon--none {
  color: red;
}
#full-stars_mod .rating__input:checked ~ .rating__label .rating__icon--star {
  color: #ddd;
}
#full-stars_mod .rating-group:hover .rating__label .rating__icon--star {
  color: orange;
}
#full-stars_mod .rating__input:hover ~ .rating__label .rating__icon--star {
  color: #ddd;
}
#full-stars_mod .rating-group:hover .rating__input--none:not(:hover) + .rating__label .rating__icon--none {
  color: #eee;
}
#full-stars_mod .rating__input--none:hover + .rating__label .rating__icon--none {
  color: red;
}


#full-stars {

}
#full-stars .rating-group {
  display: inline-flex;
}
#full-stars .rating__icon {
  pointer-events: none;
}
#full-stars .rating__input {
  position: absolute !important;
  left: -9999px !important;
}
#full-stars .rating__label {
  cursor: pointer;
  padding: 0 0.1em;
  font-size: 2rem;
}
#full-stars .rating__icon--star {
  color: orange;
}
#full-stars .rating__icon--none {
  color: #eee;
}
#full-stars .rating__input--none:checked + .rating__label .rating__icon--none {
  color: red;
}
#full-stars .rating__input:checked ~ .rating__label .rating__icon--star {
  color: #ddd;
}
#full-stars .rating-group:hover .rating__label .rating__icon--star {
  color: orange;
}
#full-stars .rating__input:hover ~ .rating__label .rating__icon--star {
  color: #ddd;
}
#full-stars .rating-group:hover .rating__input--none:not(:hover) + .rating__label .rating__icon--none {
  color: #eee;
}
#full-stars .rating__input--none:hover + .rating__label .rating__icon--none {
  color: red;
}

.star::before {
  color: #ffc700;
}
.star::after {
  color: #dddad7;
}

.star::before,
.star::after {
  font-size: 1rem;
  letter-spacing: -1px;
  text-shadow: 0 1px 2px rgba(100, 100, 100, 0.1);
}
.star[data-rating="1"]::before,
.star[data-rating="4"]::after {
  content: "★";
}
.star[data-rating="2"]::before,
.star[data-rating="3"]::after {
  content: "★★";
}
.star[data-rating="3"]::before,
.star[data-rating="2"]::after {
  content: "★★★";
}
.star[data-rating="4"]::before,
.star[data-rating="1"]::after {
  content: "★★★★";
}
.star[data-rating="5"]::before,
.star[data-rating="0"]::after {
  content: "★★★★★";
}

.addProd {
  margin-top: 15px;
  border: solid 1px var(--link-color-hover);
  border-radius: 10px;
  padding: 12px;
  background: pink;
}

.editProd {
  border: solid 1px var(--link-color-hover);
  border-radius: 10px;
  padding: 12px;
  background: #cfcfcf;
}


.drop-container:hover .drop {
  display: block;
}
.drop-container .drop {
  display: none;
  position: absolute;
  top: 20px;
  left: 8px;
}
.drop-container .drop a {
  display: block;
  padding: 8px 16px;
}

.s3 {
  font-family: Arial, sans-serif;
  font-style: normal;
  font-weight: bold;
  text-decoration: none;
  font-size: 9pt;
}

.s4 {
  color: var(--color-inv-correcto);
  font-family: Arial, sans-serif;
  font-style: normal;
  font-weight: bold;
  text-decoration: none;
  font-size: 10pt;
}

.s5 {
  color:var(--color-inv-positivo);
  font-family: Arial, sans-serif;
  font-style: normal;
  font-weight: bold;
  text-decoration: none;
  font-size: 10pt;
}

.s6 {
  color: var(--color-inv-negativo);
  font-family: Arial, sans-serif;
  font-style: normal;
  font-weight: bold;
  text-decoration: none;
  font-size: 10pt;
}



.numberCircle {
  font-family: "OpenSans-Semibold", Arial, "Helvetica Neue", Helvetica, sans-serif;
  display: inline-block;
  color: #fff;
  text-align: center;
  line-height: 0px;
  border-radius: 50%;
  font-size: 12px;
  min-width: 38px;
  min-height: 38px;
}

.numberCircle span {
  display: inline-block;
  padding-top: 50%;
  padding-bottom: 50%;
  margin-left: 1px;
  margin-right: 1px;
}

/* Some Back Ground Colors */
.clrGreen {
  background: #198754;
}

.clrRose {
  background: #dc3545;
}

.clrOrange {
  background: #ec8234;
}

.clrBlueciel {
  background: #21adfc;
}

.clrMauve {
  background: #263960;
}

.squareInd {
  width: 10px;
  height: 10px;
  border: 1px solid #555459;
  border-radius: 2px;
  display: inline-block;
  margin-top: 3px;
}


.bell{
  display:block;
  width: 13px;
  height: 13px;
  font-size: 13px !important;
  margin:50px auto 0;
  color: #9e9e9e;
  -webkit-animation: ringf 5s .7s ease-in-out infinite;
  -webkit-transform-origin: 50% 4px;
  -moz-animation: ringf 5s .7s ease-in-out infinite;
  -moz-transform-origin: 50% 4px;
  animation: ringf 5s .7s ease-in-out infinite;
  /*animation-delay: 5s;*/
  transform-origin: 50% 4px;
}



@-webkit-keyframes ringf {
  0% { -webkit-transform: rotateZ(0); 
    color: red; }
  1% { -webkit-transform: rotateZ(30deg); }
  3% { -webkit-transform: rotateZ(-28deg); }
  5% { -webkit-transform: rotateZ(34deg); }
  7% { -webkit-transform: rotateZ(-32deg); }
  9% { -webkit-transform: rotateZ(30deg); }
  11% { -webkit-transform: rotateZ(-28deg); }
  13% { -webkit-transform: rotateZ(26deg); }
  15% { -webkit-transform: rotateZ(-24deg); }
  17% { -webkit-transform: rotateZ(22deg); }
  19% { -webkit-transform: rotateZ(-20deg); }
  21% { -webkit-transform: rotateZ(18deg); }
  23% { -webkit-transform: rotateZ(-16deg); }
  25% { -webkit-transform: rotateZ(14deg); }
  27% { -webkit-transform: rotateZ(-12deg); }
  29% { -webkit-transform: rotateZ(10deg); }
  31% { -webkit-transform: rotateZ(-8deg); }
  33% { -webkit-transform: rotateZ(6deg); }
  35% { -webkit-transform: rotateZ(-4deg); }
  37% { -webkit-transform: rotateZ(2deg); }
  39% { -webkit-transform: rotateZ(-1deg); }
  41% { -webkit-transform: rotateZ(1deg); }

  43% { -webkit-transform: rotateZ(0); }
  100% { -webkit-transform: rotateZ(0); }
}

@-moz-keyframes ringf {
  0% { -moz-transform: rotate(0); 
    color: red; }
  1% { -moz-transform: rotate(30deg); }
  3% { -moz-transform: rotate(-28deg); }
  5% { -moz-transform: rotate(34deg); }
  7% { -moz-transform: rotate(-32deg); }
  9% { -moz-transform: rotate(30deg); }
  11% { -moz-transform: rotate(-28deg); }
  13% { -moz-transform: rotate(26deg); }
  15% { -moz-transform: rotate(-24deg); }
  17% { -moz-transform: rotate(22deg); }
  19% { -moz-transform: rotate(-20deg); }
  21% { -moz-transform: rotate(18deg); }
  23% { -moz-transform: rotate(-16deg); }
  25% { -moz-transform: rotate(14deg); }
  27% { -moz-transform: rotate(-12deg); }
  29% { -moz-transform: rotate(10deg); }
  31% { -moz-transform: rotate(-8deg); }
  33% { -moz-transform: rotate(6deg); }
  35% { -moz-transform: rotate(-4deg); }
  37% { -moz-transform: rotate(2deg); }
  39% { -moz-transform: rotate(-1deg); }
  41% { -moz-transform: rotate(1deg); }

  43% { -moz-transform: rotate(0); }
  100% { -moz-transform: rotate(0); }
}

@keyframes ringf {
  0% {  transform: rotate(0);
        color: red !important; 
      }
  1% { transform: rotate(30deg); 
    color: red;}
  3% { transform: rotate(-28deg); 
    color: red;}
  5% { transform: rotate(34deg); 
    color: red;}
  7% { transform: rotate(-32deg); 
    color: red;}
  9% { transform: rotate(30deg); 
    color: red;}
  11% { transform: rotate(-28deg); 
    color: red;}
  13% { transform: rotate(26deg);
    color: red; }
  15% { transform: rotate(-24deg); 
    color: red;}
  17% { transform: rotate(22deg); 
    color: red;}
  19% { transform: rotate(-20deg); 
    color: red;}
  21% { transform: rotate(18deg); 
    color: red;}
  23% { transform: rotate(-16deg); 
    color: red;}
  25% { transform: rotate(14deg); 
    color: red;}
  27% { transform: rotate(-12deg); 
    color: red;}
  29% { transform: rotate(10deg); 
    color: red;}
  31% { transform: rotate(-8deg); 
    color: red;}
  33% { transform: rotate(6deg); 
    color: red;}
  35% { transform: rotate(-4deg); 
    color: red;}
  37% { transform: rotate(2deg); 
    color: red;}
  39% { transform: rotate(-1deg); 
    color: red;}
  41% { transform: rotate(1deg); 
       color: #9e9e9e !important;}

  43% { transform: rotate(0); }
  100% { transform: rotate(0); }
}



.bellw{
  display:block;
  width: 13px;
  height: 13px;
  font-size: 13px !important;
  margin:50px auto 0;
  color: #9e9e9e;
  -webkit-animation: ringfw 5s .7s ease-in-out infinite;
  -webkit-transform-origin: 50% 4px;
  -moz-animation: ringfw 5s .7s ease-in-out infinite;
  -moz-transform-origin: 50% 4px;
  animation: ringfw 5s .7s ease-in-out infinite;
  /*animation-delay: 5s;*/
  transform-origin: 50% 4px;
}


@-webkit-keyframes ringfw {
  0% { -webkit-transform: rotateZ(0); 
    color: white; }
  1% { -webkit-transform: rotateZ(30deg); }
  3% { -webkit-transform: rotateZ(-28deg); }
  5% { -webkit-transform: rotateZ(34deg); }
  7% { -webkit-transform: rotateZ(-32deg); }
  9% { -webkit-transform: rotateZ(30deg); }
  11% { -webkit-transform: rotateZ(-28deg); }
  13% { -webkit-transform: rotateZ(26deg); }
  15% { -webkit-transform: rotateZ(-24deg); }
  17% { -webkit-transform: rotateZ(22deg); }
  19% { -webkit-transform: rotateZ(-20deg); }
  21% { -webkit-transform: rotateZ(18deg); }
  23% { -webkit-transform: rotateZ(-16deg); }
  25% { -webkit-transform: rotateZ(14deg); }
  27% { -webkit-transform: rotateZ(-12deg); }
  29% { -webkit-transform: rotateZ(10deg); }
  31% { -webkit-transform: rotateZ(-8deg); }
  33% { -webkit-transform: rotateZ(6deg); }
  35% { -webkit-transform: rotateZ(-4deg); }
  37% { -webkit-transform: rotateZ(2deg); }
  39% { -webkit-transform: rotateZ(-1deg); }
  41% { -webkit-transform: rotateZ(1deg); }

  43% { -webkit-transform: rotateZ(0); }
  100% { -webkit-transform: rotateZ(0); }
}

@-moz-keyframes ringfw {
  0% { -moz-transform: rotate(0); 
    color: white; }
  1% { -moz-transform: rotate(30deg); }
  3% { -moz-transform: rotate(-28deg); }
  5% { -moz-transform: rotate(34deg); }
  7% { -moz-transform: rotate(-32deg); }
  9% { -moz-transform: rotate(30deg); }
  11% { -moz-transform: rotate(-28deg); }
  13% { -moz-transform: rotate(26deg); }
  15% { -moz-transform: rotate(-24deg); }
  17% { -moz-transform: rotate(22deg); }
  19% { -moz-transform: rotate(-20deg); }
  21% { -moz-transform: rotate(18deg); }
  23% { -moz-transform: rotate(-16deg); }
  25% { -moz-transform: rotate(14deg); }
  27% { -moz-transform: rotate(-12deg); }
  29% { -moz-transform: rotate(10deg); }
  31% { -moz-transform: rotate(-8deg); }
  33% { -moz-transform: rotate(6deg); }
  35% { -moz-transform: rotate(-4deg); }
  37% { -moz-transform: rotate(2deg); }
  39% { -moz-transform: rotate(-1deg); }
  41% { -moz-transform: rotate(1deg); }

  43% { -moz-transform: rotate(0); }
  100% { -moz-transform: rotate(0); }
}

@keyframes ringfw {
  0% {  transform: rotate(0);
        color: white !important; 
      }
  1% { transform: rotate(30deg); 
    color: white;}
  3% { transform: rotate(-28deg); 
    color: white;}
  5% { transform: rotate(34deg); 
    color: white;}
  7% { transform: rotate(-32deg); 
    color: white;}
  9% { transform: rotate(30deg); 
    color: white;}
  11% { transform: rotate(-28deg); 
    color: white;}
  13% { transform: rotate(26deg);
    color: white; }
  15% { transform: rotate(-24deg); 
    color: white;}
  17% { transform: rotate(22deg); 
    color: white;}
  19% { transform: rotate(-20deg); 
    color: white;}
  21% { transform: rotate(18deg); 
    color: white;}
  23% { transform: rotate(-16deg); 
    color: white;}
  25% { transform: rotate(14deg); 
    color: white;}
  27% { transform: rotate(-12deg); 
    color: white;}
  29% { transform: rotate(10deg); 
    color: white;}
  31% { transform: rotate(-8deg); 
    color: whitered;}
  33% { transform: rotate(6deg); 
    color: white;}
  35% { transform: rotate(-4deg); 
    color: white;}
  37% { transform: rotate(2deg); 
    color: white;}
  39% { transform: rotate(-1deg); 
    color: white;}
  41% { transform: rotate(1deg); 
       color: #9e9e9e !important;}

  43% { transform: rotate(0); }
  100% { transform: rotate(0); }
}




.step-dot__box {
  padding: 10px;
  /*display: inline-block;*/
  display:table;
}

.step-dot {
  position: relative;
  left: 0;
  top: 0;
  border-radius: 50%;
}
.step-dot:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: inherit;
  animation-delay: 300ms;
}
.step-dot > span {
  position: relative;
  z-index: 1;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: inherit;
}
.step-dot > span.orange {
  background-color: #ffbb33;
}
.step-dot > span.green {
  background-color: #66cc33;
}
.step-dot > span.red {
  background-color: #cc3333;
}
.step-dot > span.blue {
  background-color: #3399ff;
}

.step-dot > span.white {
  background-color: #f8f8f8;
}

.pulse-orange {
  animation: pulse-orange 1.5s infinite;
}

.pulse-green {
  animation: pulse-green 1.5s infinite;
  animation-delay: 1s;
}

.pulse-red {
  animation: pulse-red 1.5s infinite;
  animation-delay: 0.33s;
}

.pulse-blue {
  animation: pulse-blue 1.5s infinite;
  animation-delay: 0.66s;
}

.pulse-white {
  animation: pulse-white 1.5s infinite;
  animation-delay: 0.66s;
}

@keyframes pulse-orange {
  10% {
    box-shadow: 0 0 0 0 #ffbb33;
  }
  100% {
    box-shadow: 0 0 0 10px rgba(255, 187, 51, 0);
  }
}
@keyframes pulse-green {
  10% {
    box-shadow: 0 0 0 0 #66cc33;
  }
  100% {
    box-shadow: 0 0 0 10px rgba(102, 204, 51, 0);
  }
}
@keyframes pulse-red {
  10% {
    box-shadow: 0 0 0 0 #cc3333;
  }
  100% {
    box-shadow: 0 0 0 10px rgba(204, 51, 51, 0);
  }
}
@keyframes pulse-blue {
  10% {
    box-shadow: 0 0 0 0 #3399ff;
  }
  100% {
    box-shadow: 0 0 0 10px rgba(51, 153, 255, 0);
  }
}

@keyframes pulse-white {
  10% {
    box-shadow: 0 0 0 0 #f8f8f8;
  }
  100% {
    box-shadow: 0 0 0 10px rgba(51, 153, 255, 0);
  }
}

.badgeTotal {
  position: absolute;
  right: 0;
  top: 0px;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  background: var(--main-color);
  color: #fff;
  padding: 3px 10px;
}


 .survey-progress {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 20px;
  border-top: 1px solid #eee;
  font-size: 13px;
}
 .survey-progress-bg {
  width: 40%;
  display: block;
}
@media screen and (max-width: 200px) {
   .survey-progress-bg {
    display: none;
  }
}
 .survey-progress-labels {
  position: absolute;
  right: 20px;
  top: 0;
  line-height: 40px;
}
@media screen and (max-width: 200px) {
   .survey-progress-labels {
    right: auto;
    left: 10px;
  }
}
 .survey-progress-label {
  line-height: 21px;
  font-size: 13px;
  font-weight: 400;
}
 .survey-completes {
  line-height: 21px;
  font-size: 13px;
  vertical-align: middle;
  color: var(--main-color);
}
 .survey-stage {
  position: absolute;
  top: 20px;
  right: 20px;
}
 .survey-stage .stage {
  display: none;
}
 .survey-stage .active {
  display: block;
}
 .survey-end-date {
  font-size: 12px;
  line-height: 20px;
}

.survey-progress-label {
  vertical-align: middle;
  margin: 0 10px;
  font-weight: 600;
 /* color: var(--main-color);*/
 color: red;
}

.survey-progress-labelInv {
  vertical-align: middle;
  margin: 0 10px;
  font-weight: 600;
  /*color: var(--main-color);*/
  color: #14b77b;
}

.survey-progress-bg {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  /*width: 100px;*/
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: #eee;
}

.survey-progress-fg {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  left: 0;
  margin: 0;
  background:red;
}

.survey-progress-fgM {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  left: 0;
  margin: 0;
  background:#14b77b;
}


.gesCalGal {
  margin-bottom: 10px;;
}


.lecturas {
  display: ruby-text;
      align-content: stretch;
      flex-direction: column;
      align-items: center;
      /* background-color: red; */
      margin: 0;
      padding-left: 10px;
      padding-right: 10px;
      justify-content: center;
}

.l-radio {
  padding: 6px;
  border-radius: 50px;
  display: inline-flex;
  cursor: pointer;
  transition: background 0.2s ease;
  margin: 8px 0;
  -webkit-tap-highlight-color: transparent;
  }
  .l-radio:hover, .l-radio:focus-within {
  background: rgba(159, 159, 159, .1);
  }
  .l-radio input {
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: none;
  border: 0;
  box-shadow: inset 0 0 0 1px #9f9f9f;
  box-shadow: inset 0 0 0 1.5px #9f9f9f;
  appearance: none;
  padding: 0;
  margin: 0;
  transition: box-shadow 150ms cubic-bezier(0.95, 0.15, 0.5, 1.25);
  pointer-events: none;
  }
  .l-radio input:focus {
  outline: none;
  }
  .l-radio input:checked {
  box-shadow: inset 0 0 0 6px rgb(1, 88, 1);
  }
  .l-radio span {
  vertical-align: middle;
  display: inline-block;
  line-height: 20px;
  padding: 0 8px;
  }

  
.radio-section {
	display: flex;
	align-items: center;
	justify-content: center;
}

.radio-list {
  display: flex; 
  justify-content: center; 
  flex-wrap: wrap;
  align-items: flex-end;
}

.radio-item [type="radio"] {
	display: none;
}
.radio-item + .radio-item {
	margin-top: 15px;
}
.radio-item{
  margin-right: 10px;
}
.radio-item label {
	display: block;
	padding: 20px 60px;
	background: #1d1d42;
	border: 2px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	cursor: pointer;
	font-size: 18px;
	font-weight: 400;
	min-width: 250px;
	white-space: nowrap;
	position: relative;
	transition: 0.4s ease-in-out 0s;
  color: #ffffff;
  
}
.radio-item label:after,
.radio-item label:before {
	content: "";
	position: absolute;
	border-radius: 50%;
}
.radio-item label:after {
	height: 19px;
	width: 19px;
	border: 2px solid #524eee;
	left: 19px;
	top: calc(50% - 12px);
}

.r-reprocesado  label:before {
	background: orange !important;
  border: 2px solid orange;
}
.r-reprocesado  label:after {
  border: 2px solid white;
}

.r-liberado  label:before {
	background: green !important;
  border: 2px solid green;
}

.r-liberado  label:after {
  border: 2px solid white;
}

.r-retenido  label:before {
	background: red !important;
  border: 2px solid red;
}
.r-retenido  label:after {
  border: 2px solid white;
}


.radio-item label:before {
	background: #524eee;
	height: 20px;
	width: 20px;
	left: 18.6px;
	top: calc(50%-5px);
	transform: scale(5);
	opacity: 0;
	visibility: hidden;
	transition: 0.4s ease-in-out 0s;
}
.radio-item [type="radio"]:checked ~ label {
	border-color: #524eee;
}

.r-reprocesado [type="radio"]:checked ~ label {
	border-color: orange !important;
  background: #695414 !important;
}

.r-liberado [type="radio"]:checked ~ label {
	border-color: green !important;
  background: #144d3d !important;
}

.r-retenido [type="radio"]:checked ~ label {
	border-color: red !important;
  background: #7e3d23 !important;
}


.radio-item [type="radio"]:checked ~ label::before {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
}

.r-liberado [type="radio"]:checked ~ label::after {
  border: 2px solid green;

}

.r-reprocesado [type="radio"]:checked ~ label::after {
  border: 2px solid orange;

}

.r-retenido [type="radio"]:checked ~ label::after {
  border: 2px solid red;
}

.texto-centrado {
  display: flex;
  flex-direction: row;
}
.texto-centrado:before, .texto-centrado:after{
  content: "";
  flex: 1 1;
  border-bottom: 1px solid;
  margin: auto;
}



    .destacar-ubicacion {
      animation: resaltarUbicacion 2.5s ease-in-out infinite;
      overflow: hidden;
      z-index: 0;
    }

    @keyframes resaltarUbicacion {
      0%, 100% {
        background-color: #50575e;
        box-shadow: 0 0 12px rgba(231, 76, 60, 0.3);
      }
      50% {
        background-color: #e74c3c;
        box-shadow: 0 0 20px rgba(231, 76, 60, 0.6);
      }
    }

    /* Espejado animado 
    .destacar-ubicacion::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 300%;
      height: 200%;
      background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0.05) 100%
      );
      transform: rotate(25deg);
      animation: brilloEspejado 3.5s linear infinite;
      pointer-events: none;
      z-index: 1;
    }

    @keyframes brilloEspejado {
      0% {
        transform: translateX(-75%) rotate(25deg);
      }
      100% {
        transform: translateX(120%) rotate(25deg);
      }
    }*/

    /* Icono de advertencia */
    .destacar-ubicacion::after {
      content: "⚠️";
      position: absolute;
      top: 6px;
      right: 10px;
      font-size: 1.2rem;
      z-index: 2;
      animation: parpadeoAdvertencia 2s ease-in-out infinite;
    }

    @keyframes parpadeoAdvertencia {
      0%, 100% {
        opacity: 0.4;
        transform: scale(1);
      }
      50% {
        opacity: 1;
        transform: scale(1.1);
      }
    }



    
.transition-icon {
  transition: transform 0.3s ease;
}
.rotate-180 {
  transform: rotate(180deg);
}


.encuestaUL{
  background-color: var(--projects-section);
  color: var(--ul-list);
  border: 1px solid var(--ul-border);
}


.bg-completo {
    background-color: rgb(11 38 77) !important;
}


.ssl-card {
  border-left: 6px solid #ccc;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}
.ssl-red { border-color: #dc3545; background: #fff5f5; }
.ssl-yellow { border-color: #ffc107; background: #fffbea; }
.ssl-green { border-color: #28a745; background: #f4fff5; }
.ssl-url {
  font-size: 1.1rem;
  font-weight: bold;
}
.ssl-desc {
  font-size: 0.9rem;
  color: #666;
}
.ssl-alert {
  font-weight: 500;
}


     .session-entry {
    background: var(--card-hs);
    /*border: 1px solid #dee2e6;
    border-radius: 10px;*/
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }

  .session-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }

  .session-data {
    flex-grow: 1;
    min-width: 0;
  }

  .session-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color_table);
  }

  .session-meta {
    font-size: 0.85rem;
    color: #6c757d;
  }

  .session-status {
    font-size: 0.9rem;
    margin-top: 2px;
  }

  .session-status.successHS {
    color: #198754;
  }

  .session-status.inactiveHS {
    color: #dc3545;
  }

  .session-device {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 4px;
  }

  .session-icons i {
    font-size: 1.1rem;
    cursor: pointer;
    color: #0d6efd;
  }

  .badge-platform {
  font-size: 0.7rem;
  margin-left: 5px;
  padding: 2px 6px;
  border-radius: 0.5rem;
  vertical-align: middle;
}
.badge-android { background-color: #a4c639; color: #fff; }
.badge-ios { background-color: #999; color: #fff; }
.badge-macos { background-color: #333; color: #fff; }
.badge-windows { background-color: #0078d7; color: #fff; }
.badge-ipad { background-color: #777; color: #fff; }
.badge-unknown { background-color: #6c757d; color: #fff; }


   @font-face {
    font-family: 'Bariol Light';
    font-style: normal;
    font-weight: normal;
    src: local('Bariol Light'), url('../assets/fonts/bariol/bariol_light-webfont.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Bariol Light Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Bariol Light Italic'), url('../assets/fonts/bariol/bariol_light_italic-webfont.woff') format('woff');
    }

    
    @font-face {
    font-family: 'Bariol Regular Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Bariol Regular Italic'), url('../assets/fonts/bariol/bariol_regular_italic-webfont.woff') format('woff');
    }

    @font-face {
    font-family: 'Bariol Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Bariol Regular'), url('../assets/fonts/bariol/bariol_regular-webfont.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Bariol Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Bariol Bold'), url('../assets/fonts/bariol/bariol_bold-webfont.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Bariol Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Bariol Bold Italic'), url('../assets/fonts/bariol/bariol_bold_italic-webfont.woff') format('woff');
    }

   .modal-container {
            background-color: #1a202c; /* Dark background similar to your images */
            border-radius: 1rem;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
            width: 90%;
            max-width: 800px;
            color: #e2e8f0;
            padding: 1.5rem;
            overflow: hidden;
        }
        .form-label-custom {
            display: block;
            margin-bottom: 0.5rem;
            font-size: 0.875rem;
            color: #a0aec0;
        }
        .form-control-custom {
            width: 100%;
            padding: 0.75rem;
            border-radius: 0.5rem;
            font-size: 1rem;
            transition: border-color 0.2s;
        }
        .form-control-custom:focus {
            outline: none;
            border-color: #63b3ed; /* Blue focus ring */
            box-shadow: 0 0 0 0.25rem rgba(99, 179, 237, 0.25); /* Bootstrap-like focus shadow */
        }
        .section-header-custom {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--main-color);
            border-bottom: 1px solid #4a5568;
            padding-bottom: 0.5rem;
            margin-top: 1.5rem;
        }
        .btn-primary-custom {
            background-color: #4299e1;
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 600;
            transition: background-color 0.2s;
            border: none;
        }
        .btn-primary-custom:hover {
            background-color: #3182ce;
            color: white; /* Ensure text color remains white on hover */
        }
        .btn-secondary-custom {
            background-color: #4a5568;
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 600;
            transition: background-color 0.2s;
            border: none;
        }
        .btn-secondary-custom:hover {
            background-color: #2d3748;
            color: white; /* Ensure text color remains white on hover */
        }

        .tab-button-custom {
            display:none !important;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 600;
            background-color: #4a5568;
            color: #e2e8f0;
            transition: background-color 0.2s;
            border: none;
        }
        .tab-button-custom.active {
            background-color: #42e1d0;
        }
        .tab-button-custom:hover:not(.active) {
            background-color: #2d3748;
            color: white;
        }
        .image-upload-area {
            border: 2px dashed #4a5568;
            border-radius: 0.5rem;
            padding: 1rem;
            text-align: center;
            cursor: pointer;
            color: #a0aec0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 120px; /* Fixed height for image placeholders */
            position: relative;
            overflow: hidden;
        }
        .image-upload-area img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            border-radius: 0.5rem;
        }
        .image-upload-area .icon {
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }
        .image-preview-item {
            position: relative;
            height: 120px;
            border-radius: 0.5rem;
            overflow: hidden;
            background-color: #2d3748;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #4a5568;
        }
        .image-preview-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .image-preview-item .remove-btn {
            position: absolute;
            top: 0.25rem;
            right: 0.25rem;
            background-color: rgba(255, 0, 0, 0.7);
            color: white;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            cursor: pointer;
            border: none;
        }
        .hallazgo-card {
            background-color: var(--hallazgo-bg);
            border-radius: 0.5rem;
            padding: 1rem;
            margin-bottom: 1rem;
            border: 1px solid var(--hallazgo-bg);
                color: var(--table-color);
        }
        .hallazgo-card .actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }
        .hallazgo-card .actions button {
            background-color: #4a5568;
            color: white;
            padding: 0.3rem 0.6rem;
            border-radius: 0.3rem;
            font-size: 0.8rem;
            border: none;
        }
        .hallazgo-card .actions button:hover {
            background-color: #63b3ed;
        }
        .checkbox-group {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-top: 1rem;
        }
        .checkbox-item {
            display: flex;
            align-items: center;
            background-color: var(--check-box-item);
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
            border: 1px solid #4a5568;
            cursor: pointer;
            transition: background-color 0.2s, border-color 0.2s;
                color: var(--table-color);
        }
        .checkbox-item:hover {
            background-color: #4a5568;
            color: white;
        }
        .checkbox-item input[type="checkbox"] {
            margin-right: 0.75rem;
            width: 1.25rem;
            height: 1.25rem;
            accent-color: #e14248; 
        }

        .upload-percent-circle {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: rgba(0, 0, 0, 0.6);
          color: #fff;
          border-radius: 50%;
          font-size: 18px;
          width: 60px;
          height: 60px;
          display: none; /* oculto inicialmente */
          justify-content: center;
          align-items: center;
          font-weight: bold;
          z-index: 10;
        }


         .campo-destacado {
          position: relative;
          border: 1px solid var(--fondoDestacado);
          border-radius: .375rem;
          padding: 1.5rem 1.5rem 0.6rem 0.6rem;
          margin-bottom: 0.2rem;
          text-align: left;
          background: var(--tituloDestacado);
                 
        }

        .campo-destacado .titulo {
          position: absolute;
          top: .3rem;
          left: 0.6rem;
          font-size: 0.85rem;
          color: var(--labelDestacado);

        }

        .campo-destacado .valor {
          font-size: 0.895rem;
          font-weight: 600;
          color: var(--valorDestacado);
        }

        .gapDestacado{
            padding-right: calc(0.2rem * .5);
            padding-left: calc(0.2rem * .5);
        }
        

        .kpi-mini {
            font-size: 0.78rem;
            opacity: 0.85;
        }

        .kpi {
            margin-right: 5px;
            font-weight: 600;
            font-size: smaller;
        }

        .kpi-ok {
            color: #1a8755; /* verde */
        }

        .kpi-bad {
            color: #dc3545; /* rojo */
        }

        .kpi-adelanto {
            color: #ffc008; /* amarillo */
        }




        .card-foto {
  width: 150px;
  border-radius: 10px;
  overflow: hidden;
  background: #2b3035;
  transition: transform 0.2s ease-in-out;
  cursor: pointer;
}

.card-foto:hover {
  transform: scale(1.05);
}

.card-foto img {
  height: 100px;
  width: 100%;
  object-fit: cover;
}

.foto-principal-img {
  width: 70%;
  max-height: 350px;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
  background: white;
  padding: 10px;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.badge-principal {
  position: absolute;
  top: 5px;
  left: 5px;
  background: gold;
  color: black;
  font-size: 0.75em;
  padding: 4px 8px;
  border-radius: 5px;
  font-weight: 600;
}

.foto-principal-anim {
  animation: pulse 0.6s ease;
}

@keyframes pulse {
  0%   { transform: scale(0.95); opacity: 0.7; }
  80%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}


.mini-equipo-img {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid #e9ecef;
}

.mini-equipo-placeholder {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #dee2e6;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ced4da;
  font-size: 18px;
  color: #6c757d;
}

.modal-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(2px);
  z-index: 9999;
  
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  border-radius: 0.6rem; /* igual que modal-content */
}