/* Estilos personalizados */
#content-login{
  max-width: 1000px; margin: 40px auto;
}

#form-login{
  padding: 3% 5% 2% 5%;
}

#form-login > div > h1{
  color: #1d9a81 !important;
  font-weight: 700;
}

#cont-win{
  overflow-x:auto;
  padding: 2%;
  box-shadow: 3px 3px 7px 2px;
}

.paginate_button{
  background: #ffffff !important;
}

#flotante-win{
  display: none;
}

@media (max-width: 992px) {
  #content-login{
    max-width: 85%;
  }
  #img-logo{
    display: none;
  }
  div.dataTables_wrapper {
    /*width: 800px;*/
    margin: 0 auto;
  }
  #flotante-win{
    display: block;
    position: fixed;
    font-size: 69px;
    color: #1d9a81;
    left: 77%;
    bottom: 4%;
  }

  #flotante-win > i {
    border: 2px solid #1d9a81;
    border-radius: 50%;
    background: white;
    animation: infinite respAniBalon 2s;
    cursor: pointer;
  }

  @keyframes respAniBalon {
    0%,100%{
      box-shadow: 0px 0px 20px 10px;
    }
    50%{
    box-shadow: 0px 0px 0px;
    }
  }
}


#img-logo{
  margin: auto;text-align: center;
}

#img-logo > button {
  font-size: 20px;
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
  border-top-left-radius: 22px;
}

.intermitente{
  border: 1px solid #c09f61;
  padding: 20px 20px;
  box-shadow: 0px 0px 20px;
  animation: infinite resplandorAnimation 2s;
}

.intermitente:active{
  background-color: #1d9a81 !important;
  border-color: #1d9a81 !important;
}

@keyframes resplandorAnimation {
  0%,100%{
    box-shadow: 0px 0px 20px;
  }
  50%{
  box-shadow: 0px 0px 0px;
  }
}

#title-win{
  width: 100%;
  text-align: center;
  padding: 4%;
}

#title-win > h4{
  color:  #1d9a81;
  font-weight: 700;
}

#title-win > h5{
  color: #175268;
  font-weight: 700;
}

#title-principal{
  margin-top: 3%;
  font-weight: 700;
  color: #660a29;
}

#card-resultado{
  width: 850px; 
  margin: 2% auto;
}

#card-resultado > .row{
  box-shadow: 3px 4px 4px 4px #660b29;
}

#card-resultado > .row > div {
  margin: 1% auto;
}

#title-win > .row > #card-resultado{
  overflow-x:auto; 
  background: linear-gradient(17deg, rgb(102 6 38) 0%, rgb(102 13 43) 52%, rgb(228 226 224) 87%);
  box-shadow: 5px 6px 6px #650a2a;
}

#title-lugar{
  color: #875b1c;
  margin: auto;
}

#title{
  color: #175268;
  font-weight: bold;
}

.title-bolsa{
  color: #600e2a;
  font-weight: 700;
  font-size: 17px;
}

#container-principal{
  width: 100%;
  margin: /*10%*/ auto;
  background: white;
}

#container-principal > form{
  padding: 5%;
}

#container-principal > div{
  background: #1cc88a3b;
  padding: 3%;
  text-align:center
}

#container-principal > div > h5{
  color: black;
}

#por-agencia {
  height: 400px;
  overflow: auto !important;
}

.highcharts-figure,
.highcharts-data-table table {
  min-width: 320px;
  max-width: 800px;
  margin: 1em auto;
}

.highcharts-data-table table {
  font-family: Verdana, sans-serif;
  border-collapse: collapse;
  border: 1px solid #ebebeb;
  margin: 10px auto;
  text-align: center;
  width: 100%;
  max-width: 500px;
}

.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}

.highcharts-data-table th {
  font-weight: 600;
  padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
  padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}

.highcharts-data-table tr:hover {
  background: #f1f7ff;
}

.highcharts-title{
  fill: #68102e !important;
  font-weight: 700;
}

.buttons-pdf{
  cursor: pointer;
  background-color: #f45b5b;
  border-color: #f45b5b;
  box-shadow: 0 0 5px #f45b5b;
  color: white;
  font-size: 20px;
}

.buttons-excel{
  cursor: pointer;
  background-color: #1d9a90;
  border-color: #1d9a81;
  box-shadow: 0 0 5px #1d9a81;
  color: white;
  font-size: 20px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: black !important;
  border: 1px solid #111;
}

#name-team{
  margin:auto; 
  width: 100%;
}

#name-team > div{
  text-align:center; 
  padding: 0%;
}

#name-team > div > span{
  width:100%;
}


#shield-team > div > img{
  width:85px;
}

#shield-one{
  padding: 0px;
  text-align:center;
  /*box-shadow: 17px 2px 14px -12px #265368;*/
}

#shield-two{
  padding: 0px;
  text-align:center;
  /*box-shadow: -17px 2px 14px -12px #265368;*/
}

#vs {
  margin: auto;
}

#vs > h4 {
  font-size: 22px; 
  color: #165368; 
  font-weight: 800;
}

#marker-team{
  margin:auto; 
  width: 100%; 
  background: white;
  padding: 2%;
  box-shadow: 2px 12px 17px 0px #3576a2;
}

#marker-team > h5 {
  width:100%; 
  font-weight: 700; 
  border-bottom: 2px solid #38679c;
  padding-bottom: 4px;
  color: #38679c;
}

#marker-team > .col-2 {
  margin: auto;
}

#marker-team > .col-5 {
  text-align:center;
  border-right: 2px solid #38679c;
  border-left: 2px solid #38679c;
}

#marker-team > div > div{
  text-align: center; 
  color: #38679c;
  font-weight: 700;
  font-size: 30px;
}

table > thead > tr {
  color: #175268;
}

table > tbody {
  color: #111;
}

@media (max-width: 767px) {
  #container-principal {
    width: 100% !important;
    margin-top: 5% !important;
  }
  #card-resultado{
    width: 100% !important;
  }
}

.sidebar-content{
  display: contents;
}

#content-wrapper{
  margin-left: auto;
  margin-top: 70px;
  overflow-y: hidden;
  padding: 2% !important;
}

#container-home{
  width: 70%;
  margin: auto;
  background: white;
  text-align: center;
  background: linear-gradient(17deg, rgb(102 6 38) 0%, rgb(102 13 43) 52%, rgb(228 226 224) 87%);
  box-shadow: 5px 6px 6px #650a2a;
}

#container-home > div{
  background: white;
}

#cont-info{
  /*background: linear-gradient(17deg, rgb(104 16 46) 0%, rgb(219 199 129) 52%, rgb(104 16 46) 87%);*/
  padding: 3%;
  width: 100%;
  margin: auto;
  color: #300715; 
  margin-bottom: 4%;
  margin-top: 4%;
  box-shadow: 0px -5px 3px 0px;
}

#miMarcador{
  box-shadow: 0px -1px 5px 0px;
  padding:3%;
  width:100%;
}

#cont-info > i{
  font-size: 110px;
  margin: auto; 
  padding: 5%;
  border-radius: 50%;
  border: solid #996255;
}

#cont-info > p{
  width: 100%;
  margin: 2% auto;
  font-size: 17px;
}

#container-home > div > h5{
  color: #650727;
}

@media (max-width: 1150px) {
  #container-home {
    width: 100% !important;
  }
}

.swal2-popup .swal2-styled.swal2-cancel {
  background: red !important;
}

.swal2-popup .swal2-styled.swal2-confirm {
  background: #2aa72a !important;
}

.FormUnit--spin {
  display: inline-block;
  display: flex;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.FormUnit-quantity--add { 
  padding-top: 12px; 
  float: right;
  order: 3;
  border-radius: 0px 10px 10px 0px;
  background: white;
}

.FormUnit-quantity--add:hover { 
  background-color: #ffffff;
  box-shadow: 0 0 5px #dfcd83;
}

.FormUnit-quantity--remove {
  padding-top: 12px;
  border-right: none;
  float: left;
  order: 1;
  border-radius: 10px 0px 0px 10px;
  background: white;
}

.FormUnit-quantity--remove:hover{
  background-color: #ffffff;
  box-shadow: 0 0 5px #dfcd83;
}

.FormUnit-field--spin {
  order: 2;
  padding: 0.275rem;
  width: 100%;
}

.FormUnit-field:valid {
  text-align: center;
  font-size: 25px;
  color: #1b4960;
  border: 2px solid #dfcd83;
  font-weight: bold;
  color: white;
  background: #68102e;
}

#marcadores{
  display:none;
}

#marcadores > div{
  margin: auto; 
  padding: 1%;
}

#marcadores > div> h5{
  color: white;
}

.ingresar-marcador{
  margin:auto;
  width: 100%; 
  font-size: 16px; 
  background: white !important;
  color: #a16d59 !important;
  font-weight: 700;
  animation: infinite resplandorInMa 2s;
}

.iingresar-marcador:active{
  background-color: white !important;
  border-color: #dfcd83 !important;
}

@keyframes resplandorInMa {
  0%,100%{
    box-shadow: 0px 0px 20px;
  }
  50%{
    box-shadow: 0px 0px 0px;
  }
}

.ingresar-marcador-dis{
  margin:auto;
  width: 100%; 
  font-size: 16px; 
  background: grey;
  color: white;
  font-weight: 700;
}

.btn-ingre-mar{
  margin: auto; 
  width: 100%; 
  padding: 0%;
}

.btn-cancelar{
  display: none; 
  margin: auto; 
  font-size: 20px;
}

.btn-guardar{
  display: none; 
  margin: auto; 
  font-size: 20px;
  background: #dfcd83;
  color: #68122f;
  font-weight: 700;
  border: 2px solid #dfcd83;
}

.btn-guardar:hover{
  background-color: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 0 5px #ffffff;
  color: #67102e;
}

#resultado-partido{
  width: 100%;
  margin: auto;
  box-shadow: 0px 1px 4px 0px;
}

#resultado-partido > div{
  margin: auto;
}

#resultado-partido > div > p{
  font-size: 30px; 
  color: #68102e; 
  margin:0px
}

#resultado-partido > div > h6{
  color:#12586b;
  padding-top: 10px;
  margin-bottom: 0px;
}

#btn-salir{
  margin: 5% auto; 
  width: 100%; 
  background: white; 
  color: #68122f;
}

#btn-salir > h5 {
  font-weight: bold;
}

#container-vs{
  box-shadow: -8px 1px 7px -4px #165368; 
  padding:5%
}

.alert-info{
  font-size:19px !important;
}

#spinner-env{
  width: 100%;
  display: none;
}

#spinner-env > p{
  margin-top: -35px;
}

#wrapper > div{
  display: contents;
}

#cont-tables{
  overflow-x: auto;
}

#box-tables{
  box-shadow: 9px 1px 10px -3px #12586b;
}

#table-marcadores > thead{
  text-align: center;
}

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

#table-marcadores{
  text-align: center;
}

#table-mas-votados{
  text-align: center;
}

#table-por-agencias{
  text-align: center;
}

#table-por-nomina{
  text-align: center;
}

#mas-votados{
  height: 700px;
}

#por-agencias{
  height: 700px;
}

#por-nomina{
  height: 700px;
}

table > thead{
  background: #68102e !important;
}

table > thead > tr{
  color: white !important;
}

.sorting_1{
  background: #ffffff !important;
  color: #111 !important;
}

.dropzone{
  border-radius: 25px;
  text-align: center;
}

.hr-style{
  width: 100%; 
  color: white;
  background: white; 
  margin: 1%;
}

.sidebar{
  width: 10.5rem;
}

.sidebar .nav-item > a{
  width: 100% !important;
}

#win-btn{
  width: 100%;
  margin: auto;
  margin-top: 3%;
}