e{
    color:red;
}
.btn-primary.active, .btn-primary:active, .btn-primary.active:focus, .btn-primary:active:focus, .btn-primary:active:hover, .open .dropdown-toggle.btn-primary {
    background-color: #E50914;
    border-color: #E50914;
    color: #fff;
}
.btn-primary.hover, .btn-primary:hover, .open .dropdown-toggle.btn-primary {
    background-color: #EA4335;
    border-color: #EA4335;
    color: #fff;
}
.btn-primary, .btn-primary:focus {
    color: #fff;
    background-color: #E50914;
    border-color: #E50914;
}
.panel-default>.panel-heading {
    color: white;
    background-color: #be1e2d !important;
    border-color: #be1e2d;
}

.breadcrumb a.active {

    color: #be1e2d;
}

.form-group-default.required:after {
    color: #be1e2d;
}



ol, ul {
    margin-top: 0px;
    margin-bottom: 0px;
    list-style-type: square;
}


table{
    border-collapse: collapse;
}

.dataTables_wrapper{
    margin-top:20px;
}

.dataTable th{
    background-color:#be1e2d;
    color:white;
    font-size: 11px;
}

.dataTable a{
    color: #c49991;
}

.dataTable a:hover{
    color: #be1e2d;
}
.tabla_detalle th{
    background-color: black;
    color:white;
    font-size: 10px;
    text-align: center;
}

.tabla_detalle{
    width: 100%;
}
.header {
    position: relative;
    display: block;
    height: 60px;
    width: 100%;
    padding: 0 20px 0 0;
    z-index: 800;
    background-color:#DDDDD;
    border-bottom: 1px solid rgba(230, 230, 230, 0.7);
} 

.tabla-color th{
    background-color: #870F11   !important;
    color: white !important;
    vertical-align: middle;


}


.tabla-color tr:hover td.grupo, .tabla-color tr:hover td.total{
    color:#F8F9B9 !important;
    background-color: #9F383A !important;
}

.tabla-color tr:nth-child(odd) td{
    background-color: #F1F1F1;


}

.tabla-color tbody tr:nth-child(odd):hover td{
    background-color: #FFF6DC;
    color: black;
}
.tabla-color tr:nth-child(even) td{
    background-color: white;

}
.tabla-color tbody tr:nth-child(even):hover td{
    background-color: #FFF6DC;
    color: black;
}

.tabla-color .grupo
{
    background-color: #AE3F41 !important;
    color: white !important;
}
.tabla-color .total
{
    background-color: #870F11   !important;
    color: white !important;
}

.center{
    text-align: center;
}

.form-control[readonly]{
    background-color:white;
    color:black;
}

.datepicker thead tr .dow {
    font-family: 'Montserrat';
    color: #be1e2d;
    text-transform: uppercase;
    font-size: 11px;
}

.datepicker table tr td.active {
    background-color: #be1e2d !important;
}

[data-toggle-pin="sidebar"] > i:before {
    content: "\f111";
}

.width-100p{
    width:100% !important;
}

.card .card-title{
    color: #c49991; 
    font-weight: 500;
}

.card .card-header {
    background: 0 0;
    border-radius: 0;
    border-bottom: 0;
    padding: 20px 20px 7px;
    position: relative;
    z-index: 3;
    min-height: 48px;
}
.card .card-body {
    padding: 5px 20px 20px 20px;
}

@media only screen and (min-width: 768px){
    form .row [class*='col-']:first-child {
        padding-left: 7px;
    }
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}



.loading-container {
    position: fixed;
    background-color: #888;
    opacity:0.9;
    z-index: 99999999;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.sk-cube-grid {
    width: 45px;
    height: 45px;
    background-image: url('/img/loading.png');
    position: absolute;
    top: 0;
    left: 0;
    bottom:0;
    right:0;
    margin:auto;
}

.sk-cube{

}

.sk-cube-grid .sk-cube {
    width: 15px;
    height: 15px;
    background-color: #DDD;
    float: left;
    -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
    animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
}
.sk-cube-grid .sk-cube1 {
    background-image: url('/img/loading.png');background-position:0 0;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 {
    background-image: url('/img/loading.png');background-position:-15px 0; 
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 {
    background-image: url('/img/loading.png');background-position:-30px 0;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 {
    background-image: url('/img/loading.png');background-position:0px -15px;
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 {
    background-image: url('/img/loading.png');background-position:-15px -15px;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 {
    background-image: url('/img/loading.png');background-position:-30px -15px;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 {
    background-image: url('/img/loading.png');background-position:-0px -30px;
    -webkit-animation-delay: 0s;
    animation-delay: 0s; }
.sk-cube-grid .sk-cube8 {
    background-image: url('/img/loading.png');background-position:-15px -30px;
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 {
    background-image: url('/img/loading.png');background-position:-30px -30px;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s; }

@-webkit-keyframes sk-cubeGridScaleDelay {
    0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
    } 35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1); 
    }
}

@keyframes sk-cubeGridScaleDelay {
    0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
    } 35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
    } 
}


.panel-default>.panel-heading {
    color: white;
    background-color: #AE301A !important;

}
.panel-body{
    background-color:white;

}
.panel.panel-default{

    border: 1px solid rgba(174, 48, 26, 0.07);
    border-radius: 8px;
    overflow: hidden;
}
.breadcrumb > .breadcrumb-item.active{
    color:#999;
}
.panel{
    max-width:1100px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom:10px;
}


.sortable-list{padding:0;width:100%; margin:0 0 15px 0;}
.sortable-list li { padding:4px 8px; color:#676767; cursor:move; list-style:none;  background:#FFF4F2; margin:10px 0; border:1px solid #c49991;  width:100%; height:38px; min-height: 38px; position:relative;overflow:hidden; }
.sortable-list p{margin:0 0 4px 0 ;line-height:12px; font-size:12px;}
.sortable-list button { font-weight:bold; height:26px; width:28px; font-size:18px; line-height:16px; } 
.sortable-list-buttons{position:absolute;top:5px;right:10px}

.sortable-list li:hover{
    background-color: #be1e2d;

}        
.sortable-list li:hover p{
    color:white;
}

/* Fix para radio buttons personalizados - cuando el input está dentro del label */
.radio.radio-inline {
    position: relative;
    display: inline-block;
    margin-right: 20px;
    margin-top: 0;
    margin-bottom: 10px;
    padding-left: 0;
    vertical-align: middle;
}

.radio.radio-inline label {
    position: relative;
    padding-left: 25px !important;
    cursor: pointer;
    display: inline-block;
    margin-right: 0;
    margin-bottom: 0;
    font-size: 13px;
    font-weight: normal;
}

.radio.radio-inline label input[type="radio"] {
    position: absolute !important;
    left: 0 !important;
    top: 3px !important;
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
    opacity: 0 !important;
    z-index: 2 !important;
    cursor: pointer !important;
}

.radio.radio-inline label span {
    position: relative;
    padding-left: 0;
    vertical-align: middle;
}

/* Círculo del radio button - se muestra siempre */
.radio.radio-inline label:before {
    content: "" !important;
    display: inline-block !important;
    width: 17px !important;
    height: 17px !important;
    position: absolute !important;
    left: 0 !important;
    top: 3px !important;
    background-color: #fff !important;
    border: 2px solid #d0d0d0 !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Radio button cuando está seleccionado - usando clase JavaScript */
.radio.radio-inline label.checked:before {
    border-width: 5px !important;
    border-color: #be1e2d !important;
    background-color: #fff !important;
}

/* Hover effect */
.radio.radio-inline label:hover:before {
    border-color: #999 !important;
}

.radio.radio-inline label.checked:hover:before {
    border-color: #be1e2d !important;
}

/* Focus state */
.radio.radio-inline label input[type="radio"]:focus + span:before,
.radio.radio-inline label.focused:before {
    box-shadow: 0 0 3px rgba(190, 30, 45, 0.5) !important;
}

/* Disabled state */
.radio.radio-inline label input[type="radio"]:disabled ~ span {
    opacity: 0.65;
    cursor: not-allowed;
}

.radio.radio-inline label input[type="radio"]:disabled {
    cursor: not-allowed !important;
}

.radio.radio-inline label:has(input[type="radio"]:disabled):before {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Variantes de color */
.radio.radio-success.radio-inline label.checked:before {
    border-color: #10cfbd !important;
}

.radio.radio-primary.radio-inline label.checked:before {
    border-color: #6d5cae !important;
}

.radio.radio-danger.radio-inline label.checked:before {
    border-color: #f55753 !important;
}

/* Custom checkbox styles with red accent color */
input[type="checkbox"] {
    position: relative;
    width: 17px;
    height: 17px;
    margin-right: 8px;
    vertical-align: middle;
    cursor: pointer;
}

/* Estilo específico para checkboxes en formularios */
.option-group input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 17px;
    height: 17px;
    border: 2px solid #d0d0d0;
    border-radius: 3px;
    background-color: #fff;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    vertical-align: middle;
    margin-right: 8px;
}

.option-group input[type="checkbox"]:hover {
    border-color: #999;
}

.option-group input[type="checkbox"]:checked {
    background-color: #be1e2d;
    border-color: #be1e2d;
}

.option-group input[type="checkbox"]:checked:after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.option-group input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 3px rgba(190, 30, 45, 0.5);
}

.option-group label {
    cursor: pointer;
    display: inline-block;
    margin-bottom: 8px;
    font-weight: normal;
    font-size: 13px;
}

/* Badge styles for user types */
.label {
    display: inline-block;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 3px;
}

.label-danger {
    background-color: #be1e2d;
}

.label-info {
    background-color: #6d5cae;
}