@import "./bootstrap.css";
@import "./bootstrap-cards.css";
@import "./sura_template.css";
@import "../content/Checkbox.css";

.table-responsive {
    overflow-x: auto;
}

.classParpadeo{
    /* background-color: #03a9f4; */
    font-weight: bold;
    animation: parpadeo 1.5s;
    -webkit-animation: parpadeo 1.5s;
    -moz-animation: parpadeo 1.5s;
    animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-iteration-count:infinite;
    }
    
    
    @keyframes parpadeo {
    0% {background-color: white}
    100%{background-color: #F26100;  font-weight: bold;}
    }
    
    @-webkit-keyframes parpadeo {
    0% {background-color: white}
    100%{background-color: #F26100;  font-weight: bold;}
    }
    

.nav>li>a,.nav>li>ul>li>a{text-decoration: none!important;}

body{overflow : hidden; overflow-y : scroll}

/* body{overflow : hidden; overflow : -moz-scrollbars-vertical} */
.card
{
    box-shadow:0px 0px 0px 0px!important;
}

.card .border-primary
{
    border:1px 1px 1px 1px!important;
    border-color:#0058CB !important;
}

.card .border-info
{
    border:1px 1px 1px 1px!important;
    border-color: #00AEE5 !important;
}

.card .border-warning
{
    border:1px 1px 1px 1px!important;
    border-color: #2DC84D  !important;
}

.card-header{
    background-color:  #0058CB;
    color:#fff !important;
}

.card-header > label{
    color: #fff !important;
}

.card-header > p{
    color:#fff !important;
} 


.text-warning
{
    color: #CBEEBE  !important;
}

/* Para alinear el icono del calendario en el componente datepickersimple */
.react-datepicker__input-container input.form-control {
    margin-bottom: -5px !important;
   
}

.input-group-btn > .btn .btn-info {
    margin-bottom: -5px !important;
   
}
.react-datepicker-popper {
    z-index: 3  !important;
  }

.AumentarAlto
{
    height: 37px !important;
}
  .switch 
  {
      width: 200px !important;
  }

.files input {
    /*outline: 2px dashed #00AEE5;*/
    /*outline-offset: -10px;*/
    -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
    transition: outline-offset .15s ease-in-out, background-color .15s linear;
    padding: 25px 0px 30px 5%;
    text-align: center important;
    /*margin: 0;*/
    margin-top: 0%;
    margin-left: -7%;
    width: 100% !important;
}
/* .files input:focus{     outline: 2px dashed#00AEE5;  outline-offset: -10px;
    -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
    transition: outline-offset .15s ease-in-out, background-color .15s linear; border:1px solid #00AEE5;
 } */
.files{ 
    position:relative;
    color:#fff;
    
}
.files-border{
    outline: 2px dashed #00AEE5;
    outline-offset: 0px;
    width: 100%;
}

.files-border-error{
    outline: 2px dashed red;
    outline-offset: -3px;
    width: 100%;
}

.files:after {  pointer-events: none;
    position: absolute;
    top: 60px;
    left: 0;
    width: 50px;
    right: 0;
    height: 56px;
    content: "";
    /*background-image: url(https://image.flaticon.com/icons/png/128/109/109612.png);*/
    display: block;
    margin: 0 auto;
    background-size: 100%;
    background-repeat: no-repeat;
}
.color input{ background-color:#00AEE5;}
.files:before {
    position: absolute;
    bottom: 10px;
    left: 0;  pointer-events: none;
    width: 100%;
    right: 0;
    height: 57px;
    /*content: " or drag it here. ";*/
    display: block;
    margin: 0 auto;
    /* color: #00AEE5; */
    font-weight: 600;
    text-transform: capitalize;
    text-align: center;
}

  .nav-tabs,
.nav-pills {
    text-align: center;
    padding-bottom: 1px;
    /*border-bottom: 1px solid #00AEE5 !important;*/
}

    /*param las tabs pill*/
    .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
        /*color: #fff;
        background-color: #00AEE5 !important;*/
        background-color:  #2DC84D;
        color: #FFF;
    }

    .nav-pills > li > a {
        border-radius: 0px;
        /* font-family: DIN-Regular, Arial; */
        /*background-color: #D8D8D8;*/
        background-color: #0058CB;
        color: #fff;
    }

        .nav-pills > li > a:hover {
            /*background-color: #00AEE5;*/
            background-color:  #2DC84D;
            color: #FFF;
        }
input{
    z-index: 0 !important;
}


label
{
  color: #0058CB;
}

.img-aclaraciones, .image-name{
    font-size: 11px !important;
}

@media (max-width: 500px){
    .swal-modal {
        width: calc(100% - 100px);
    }
}

.swal-button {
    background-color: #0058CB;
    color:#fff;
}

.swal-button:not([disabled]):hover {
    background-color: rgb(20, 80, 211);
}

.swal-button--danger:not([disabled]):hover {
    background-color: #0058CB;
}
.swal-button--danger{
    background-color: rgb(20, 80, 211);
}

.swal-button--cancel {
    color: #fff;
    background-color: #00AEE5;
}
.swal-button--cancel:not([disabled]):hover {
    background-color: #78cbf2;
}

.swal-text{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center !important;
    font-size: 16px !important;
}


.swal-title{
    font-size: 22px !important;
}

.swal-icon--info {
    border-color: #00AEE5;
}

.swal-icon--info:before {
    background-color: #00AEE5 !important;
}
.swal-icon--info:after {
    background-color: #00AEE5 !important;
}

.swal-icon--warning__body, .swal-icon--warning__dot{
    background-color: #2DC84D !important;
}

@keyframes pulseWarning {    
    0% {
        border-color: #2DC84D;
    }
    
    100% {
        border-color: #2DC84D;
    }    
  }

.react-datepicker {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 10px !important;
}
.react-datepicker__current-month, .react-datepicker-time__header, .react-datepicker-year-header {
    font-size: 1.3rem !important;
  }
  
  .react-datepicker__current-month {
    font-size: 1.5rem !important;
  }
  
  .react-datepicker__header {
    padding-top: 6px !important;
  }
  
  .react-datepicker__navigation {
    top: 13px !important;
  }
  
  .react-datepicker__day-name, .react-datepicker__day {
    margin: 0.5rem !important;
  }

  .css-1g48xl4-IndicatorsContainer{
      display: none !important;
  }
  .blink {
    color:#fff;
    background-color: red;
    font-weight: bold;
    animation: blinker 2s linear infinite;
  }
  
  @keyframes blinker {
    50% {
        color:#000;
        background-color: #fff;
    }
  }

  .blinkO {
    color:#000;
    background-color: orange;
    font-weight: bold;
    animation: blinkerO 2s linear infinite;
  }
  
  @keyframes blinkerO {
    50% {
        color:#000;
        background-color: #fff;
    }
  }

  .OFAC {
    color:#0058CB;
    background-color: #2DC84D;
    font-weight: bold;
  }
  .OFAC:hover {
    color:#0058CB;
    background-color: #2DC84D;
  
  }
  
 


  .disabled_div {
    pointer-events: none;
    opacity: 0.8;
}
.modal-dialog {
    position:absolute;
    top:50% !important;
    transform: translate(0, -50%) !important;
    -ms-transform: translate(0, -50%) !important;
    -webkit-transform: translate(0, -50%) !important;
    margin:auto 15%;
    width:90%;
    height:90%;
  }
  .modal-content {
    min-height:100%;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0; 
  }
  .modal-body {
    position:absolute;
    top:60px; /** height of header **/
    bottom:45px;  /** height of footer **/
    left:0;
    right:0;
    overflow-y:auto;
  }
  .modal-footer {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
  }

.BtnNav{
    position: fixed;
    bottom:5px;
    right: 5px;
    background-color: #fff;
    z-index: 1000;
    padding: 5px;
    box-shadow: 1px 1px 6px #c0c0c0;
    border:1px solid #c0c0c0;
}
.BtnNav ul{
    margin: 5px!important;
}

.rdr-Calendar{
    display: block !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 285px !important;
}
.rdr-MonthAndYear-innerWrapper{
    font-size: 18px !important;
}
.rdr-WeekDay{
    font-size: 14px !important;
}

.rdr-Day{
    font-size: 15px !important; 
}

.rdr-PredefinedRanges{
    display: flex !important;
    flex-direction: row !important;
}

.rdr-PredefinedRangesItem {
    display: block !important;
    outline: 0 !important;
    line-height: 18px !important;
    padding: 10px 20px !important;
    text-align: left !important;
    background: #00AEE5 !important;
    color: #fff !important;
    margin-left: 5px;
}
.is-selected, .is-inRange{
    background-color: #2DC84D !important;
    color: #fff !important;
}


.is-inRange > .is-passive{
    background-color: #2DC84D !important;
    color: #fff !important;
}


/*.is-passive{
    background-color:#FDFF8B !important;
}*/
.mostrar{
    display: block!important;
}
.ocultar{
    display: none!important;
}

.no-padding
{
    padding: 0;
}


.multi-select {
    --rmsc-primary:  #66afe9!important;
    --rmsc-hover: #f1f3f5;
    --rmsc-selected: #e2e6ea;
    --rmsc-border: #ccc;
    --rmsc-gray: #aaa;
    --rmsc-background: #fff;
    --rmsc-spacing: 10px;
    --rmsc-border-radius: 4px;
    --rmsc-height: 34px !important;
    border-width: 1px !important;
  }
.multi-select:focus {
    border-width: 1px !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6) !important;
}

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


.pagination {
    display: inline-block;
  }
  
  .pagination button {
      border: none;
      background: transparent;
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
  }
  
  .pagination button.active {
    background-color: #66afe9;
    color: white;
    border-radius: 5px;
  }
  
  .pagination button:hover:not(.active) {
    background-color: #ddd;
    border-radius: 5px;
  }

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