html {
    position: relative;
    min-height: 100%;
}

body { 
    display: flex;
    min-height: 100vh;
    font-family: montserrat;
    background-image: url(../../../Content/img/fondo_gris.png);
    background-size: cover;
    flex-direction: column;
}
#faq {
  /*max-width: 800px;*/
  margin: 0 auto;
  padding: 20px;
}

.faq-item {
  /*border-bottom: 1px solid #ccc;*/
  margin-bottom: 10px;
}

.faq-question {
    background-color: #ffffff;
    width: 100%;
    text-align: left;
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    outline: none;
    color: #51112b;
    border-radius: 15px;
    border-left: 6px solid #B17B45;
    border-right: 1px solid #cdcdcd;
    border-top: 1px solid #cdcdcd;
    border-bottom: 1px solid #cdcdcd;
}

.banner{
contain: content;
    background-image: url(../../img/fondo_ocre.jpg);
    border-radius: 25px;
    height: 10vh;
    display: flex;
    margin-top: 25px;
    padding: 35px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: -webkit-center;
    font-size: larger;
    color: white;
    font-weight: 500;
}
}
.faq-question:hover {
  color: #007bff;
}

.faq-answer {
    text-align: center;
    display: block;
 padding: 0 35px 15px;
  display: none; /* Hide the answer by default */
}

.faq-answer p {
    margin-top: 15px !important;
    text-align: justify;
    margin: 0;
    line-height: 1.6;
    font-size: large;
}
    /* Loading animation styles */
    .loading-spinner {
        display: none;
        width: 1.5rem;
        height: 1.5rem;
        border: 4px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        border-top-color: #fff;
        animation: spin 1s ease-in-out infinite;
    }
    a:hover {
  /* This removes the underline on hover */
  text-decoration: none;
  color:white;
}
    .search-button.loading .loading-spinner {
        display: block;
    }
    
    .search-button.loading #buttonText {
        display: none;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

html input[disabled], html input[readonly] {
    background-color: #fafafa !important;
    cursor: not-allowed !important;
}

button[type="button"], button[type="submit"] {
    font-size: 15px !important;
    font-family: Arial,sans-serif !important;
}

textarea {
    padding: 10px !important;
}

.field-validation-error {
    color: #a94442;
}
li{
    margin-top: 10px;
    list-style-type: none;
    font-size: large;
}

li a{
    color:#4f4d4d;
}
.form{
    contain: content;
background: #d9d9d947;
    border-radius: 25px;
    height: 45vh;
    display: flex;
    margin-top: 25px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.table-container{
background: #d9d9d947;
    border-radius: 25px;
    /*height: 45vh;*/
    display: flex;
    justify-content: flex-start;
    margin-top: 35px;
    flex-direction: column;
    align-items: center;
}
.table-responsive {
  overflow-x: auto;
}

.seccionTitulo h1{
    text-shadow: 0px 1px, 1px 0px, 1px 1px;
    color:#965C1B;
    font-weight: bolder;
}

.seccionTitulo p{
    color:#696969;
    font-weight:500;
    font-size:20px;
}

.search-form {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

#forma-busquedaVoucher{
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
}
.labelforinput{
        position: absolute;
    left: 0px;
    top: -28px;
    color: #54122b;
    font-size: large;
}

.input-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

input[type='text'] {
    width: 400px;
    padding: 15px 30px;
    font-size: 16px;
    color: #4f4d4d;
    border: 2px solid #53152B;
    border-radius: 30px;
    background-color: #ffffff;
    outline: none;
    transition: all 0.3s ease;
}

input[type='text']:focus {
  border-color: #5c1630;
  box-shadow: 0 0 8px rgba(176, 141, 109, 0.5);
}

input::placeholder {
  color: var(--placeholder-color);
}

.required-field {
    position: absolute;
    bottom: -30px;
    left: 60%;
    font-size: 14px;
    color: #53152B;
    margin-top: 5px;
}

.search-button {
  padding: 15px 40px;
  font-size: 18px;
  font-weight: bold;
  color: white;
 background-image:url(../../../Content/img/fondo_ocre.jpg);
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  /*text-transform: uppercase;*/
}

.back-button {
display: block;
    margin-top: 25px;
    justify-self: end;
    position: sticky;
    padding: 15px 40px;
    font-size: 12px;
    font-weight: bold;
    color: white;
    background-image: url(../../../Content/img/fondo_ocre.jpg);
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    /*text-transform: uppercase;*/
}

.pdf-button {
        background-size: cover;
    padding: 15px 20px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    background-image: url(../../../Content/img/fondo_guinda.jpg);
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    /*text-transform: uppercase;*/
}

.search-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.25);
}

.search-button:active {
  transform: translateY(0);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.folioHeader{
        font-weight: bolder;
    justify-items: center;
color:white;
background-image: url(../../img/fondo_ocre.jpg);
    height: 80px;
    width: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
/*.voucher-table {
    width: 100%;
    border-collapse: collapse;
    border: none;
}*/
/* Container for the table to give it the overall background and rounded corners */
.table-container-table {
    background-color: #ffffff; /* White background for the table area */
    border-radius: 15px; /* Rounded corners for the entire table container */
    padding: 20px; /* Padding inside the container */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    overflow-x: auto; /* For responsiveness: add horizontal scroll if needed */
    max-width: 90%; /* Max width to keep it from stretching too much */
    width: 100%; /* Ensure it takes full width up to max-width */
}

/* Main table styling */
.voucher-table {
    margin:25px;
    width: 90%;
    border-collapse: collapse; /* Collapse borders for a clean look */
    /* Remove default table borders */
    border: none;
}

/* Table Header Styling */
.voucher-table thead {
    background-color: white; /* Dark maroon background for headers */
    color: #5d022b; /* White text for headers */
    /*text-transform: uppercase;*/
    font-size: 0.9em;
    letter-spacing: 0.05em;
    border-radius: 10px 10px 0 0; /* Rounded top corners for the header */
    overflow: hidden; /* Ensures rounded corners are visible */
}

.voucher-table th {
    padding: 15px 10px; /* Padding for header cells */
    text-align: center; /* Center align header text */
    font-weight: bolder; /* Normal weight as in the image */
    border: none; /* Remove individual cell borders in header */
border-right: 2px solid #f0f0f0;
}

.voucher-table th:last-child {
    border-right: none; /* No separator on the last header cell */
}

/* Table Body Styling */
.voucher-table tbody tr {
   background: white;
    /*border-bottom: 2px solid #f0f0f0;*/
}

.voucher-table tbody tr:last-child {
    border-bottom: none; /* No border for the last row */
}

.voucher-table td {
    padding: 15px 10px; /* Padding for data cells */
    text-align: center; /* Center align all data */
    color: #51112b; /* Darker text for data */
    font-size: 1em;
    border: none; /* Remove default td borders */
    border-right: 2px solid #f0f0f0; /* Light vertical separator lines */
}

.voucher-table td:last-child {
    border-right: none; /* No separator on the last data cell */
}

/* Specific styling for the first column (TARJETA) if needed, e.g., font-weight */
.voucher-table tbody td:first-child {
    font-weight: bold; /* Tarjeta number seems bold in the image */
}

/* Styling for the "Consultar PDF" button */
.consultar-btn {
    background-color: #51112b; /* Darker maroon for the button */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 20px; /* Highly rounded corners for pill shape */
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    transition: background-color 0.3s ease; /* Smooth hover effect */
    white-space: nowrap; /* Prevent button text from wrapping */
}

.consultar-btn:hover {
    background-color: #6a0934; /* Slightly darker on hover */
}

/* Adjust header background for rounded corners to apply visually */
.voucher-table thead tr:first-child th:first-child {
    border-top-left-radius: 10px;
}

.voucher-table thead tr:first-child th:last-child {
    border-top-right-radius: 10px;
}
        /* --- Responsive Styles --- */
           
        @media (max-width: 768px) {

            .faq-answer img{
                width: 100%!important;
            }
            .banner{
                    height: 30vh;
            }
                    .labelforinput{
                font-size: small !important;
    text-align: center !important;
    left: unset;
        }
           .folioHeader h1 {
                font-size: x-large!important;
    text-align: center;
            }
            .search-form {
                flex-direction: column;
                width: 100%;
                gap: 30px;
                    display: flex;
    justify-content: center;
            }

            input[type='text'] {
                width: 100%;
                max-width: 400px;
                padding: 12px 20px;
                font-size: 14px;
            }

            .required-field {
               left: 40%;
        bottom: -25px;
        font-size: 12px;
            }

            .search-button {
                width: 100%;
                max-width: 400px;
                padding: 12px 30px;
                font-size: 16px;
            }
            .main{flex-grow: 1;
               height: 110vh;
            }
             table, thead, tbody, th, td, tr {
        display: block; /* Makes each element a block-level element */
    }

    /* Hide the table headers (thead) */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        margin-bottom: 15px; /* Adds space between rows */
        border: 1px solid #ccc;
    }

    td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        text-align: right;
    }

    td::before {
        content: attr(data-label); /* Displays the data-label attribute */
        position: absolute;
        left: 6px;
        font-weight: bold;
        text-align: left;
    }

            .voucher-table tbody tr {
                background: white;
                border-radius: 25px;
            }

        }

/************* HEADER *************/


.navbar-default {
height: 90px;
    background-image: url(../../../Content/img/fondo_guinda.jpg);
    background-size: cover;
    margin: 0px !important;
    align-content: center;
}

.navbar-default .navbar-nav > li > a {
    color: #eaeaea !important;
}

@media (min-width: 768px) {
    .navbar-nav > li > a {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        line-height: 20px;
    }
}

.log-off span {
    font-size: 1.8em;
    color: #eaeaea !important;
    line-height: 38px;
}

.log-off:hover {
    background-color: #a94442 !important;
}

@media (max-width: 768px) {
    .navbar-default .navbar-nav > .open > a,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #fff !important }
}

.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover { color:#fff !important; background-color: #9D2449 !important }

/************* ESTILOS LAYOUT / FRAMEWORK *************/

.main {
    margin-top: 20px;
    flex-grow: 1
}

#logo {
    background: transparent url("../../../Content/img/logoBC.png") no-repeat 50% 50%;
    background-size:contain;
    display: block;
    height: 55px;
    overflow: hidden;
    padding: 10px 0;
    width: 220px;
    margin-top:3px;
}

.disable-combobox .k-dropdown-wrap {
    background-color: whitesmoke !important;
}

/************* TELERIK DEFAULT *************/

.k-checkbox-label { font-weight:400 }

.k-checkbox-label::before {
    top:-5px;
    left:1px;
}

.k-checkbox-label, .k-radio-label {
    line-height: 5px !important
}

.k-radio:checked + .k-radio-label::after {
    background-color: #9D2449 !important;
}

.k-textbox, .k-numerictextbox, .k-datepicker, .k-dropdown, .k-combobox, .k-datetimepicker, .k-timepicker, .k-maskedtextbox {
    display: block !important;
    width: 100% !important;
    /*text-transform: uppercase;*/
}

.k-list-optionlabel.k-state-selected.k-state-focused, .k-list > .k-state-selected.k-state-focused, .k-item.k-state-selected.k-state-hover {
    background-color: #9D2449 !important;
    color: #fff !important;
}

.k-treeview .k-in {
    color:#333;
    margin-top:2px;
    font-size: 15px;
}

.k-treeview .k-in.k-state-hover, .k-treeview .k-in.k-state-selected {
    color: #333;
    background-color: transparent;
    cursor: pointer;
}

.k-pager-wrap .k-link, .k-pager-wrap .k-link:hover {
    color: #333;
}

.btn-primary {
    background-color: #9D2449;
    border-color: #9D2449;
}
.btn-primary:focus, .btn-primary.focus {
  background-color: #8A1136;
  border-color: #8A1136;
}
.btn-primary:hover {
  background-color: #8A1136;
  border-color: #8A1136;
}
.btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
  background-color: #8A1136;
  border-color: #8A1136;
}
.btn-primary:active:hover, .btn-primary.active:hover, .open > .dropdown-toggle.btn-primary:hover, .btn-primary:active:focus,
.btn-primary.active:focus, .open > .dropdown-toggle.btn-primary:focus, .btn-primary:active.focus, .btn-primary.active.focus, .open > .dropdown-toggle.btn-primary.focus {
  background-color: #8A1136;
  border-color: #8A1136;
}

.btn-info {
    background-color: #b2945e;
    border-color: #b2945e;
}
.btn-info:focus, .btn-info.focus {
  background-color: #9F814B;
  border-color: #9F814B;
}
.btn-info:hover {
  background-color: #9F814B;
  border-color: #9F814B;
}
.btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info {
  background-color: #9F814B;
  border-color: #9F814B;
}
.btn-info:active:hover, .btn-info.active:hover, .open > .dropdown-toggle.btn-info:hover, .btn-info:active:focus,
.btn-info.active:focus, .open > .dropdown-toggle.btn-info:focus, .btn-info:active.focus, .btn-info.active.focus, .open > .dropdown-toggle.btn-info.focus {
  background-color: #9F814B;
  border-color: #9F814B;
}

/************* LOGIN *************/

.logo-login {
    margin-top: 5%;
    margin-bottom: 3%;
    height: 150px;
    width: 270px;
}

#login-form {
    background-color: #f7f7f7;
    border-radius: 2px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    height: 320px;
    margin: 10px auto 20px;
    max-width: 370px;
    padding: 50px 25px 0;
}


/************* TAMAÑOS / COLORES *************/

.text-primary { color: #9D2449 }
.text-info { color: #b2945e }
.text-default { text-transform: none !important }
.text-lowercase { text-transform: lowercase !important }
.text-center { text-align:center !important }
.text-wrap { word-break: break-all }
.smallest { font-size: 1.2em; vertical-align: middle; }
.padding-zero { padding: 0 !important }
.text-consolas { font-family: Menlo,Monaco,Consolas,"Courier New",monospace !important; letter-spacing:1px }

/************* NOTIFICACIONES *************/

#notification {
    font-size: 1em;
    opacity: 0.9;
    position: fixed;
    right: 10px;
    top: 30px;
    z-index: 10100;
}

/************* MODAL *************/

.modal-contenido {
    line-height: 1.35em;
	overflow: hidden;
    padding-top: 10px;
    padding-bottom: 10px;
}

.modal-contenido .form-group {
    box-sizing: border-box !important;
}

.modal-botones {
    padding-top:10px;
    margin-top:10px;
}

/************* SIDEBAR / MENU PRINCIPAL *************/

.sidebar {
    background-color: #f8f8f8;
    border-right: 1px solid #e6e6e6;
    left: 0;
    max-height: 95%;
    min-height: 90%;
    position: absolute;
}

.sidebar li { border-bottom: 1px solid #e6e6e6 }

.sidebar a {
    background-color: #fff;
    color: #71798f;
    font-size: 1em;
    padding: 0 !important;
}

.sidebar a .menu-icon {
    font-size: 1em;
    padding: 13px;
    width: 30px;
}

.sub-menu a .menu-icon {
    padding-left:25px;
    width:45px;
}

.sidebar a .menu-child {
    position: absolute;
    right: 5px;
    top: 15px;
}

.menu-active, .menu-active .menu-icon, .sidebar a:hover, .sidebar a:hover .menu-icon {
    background-color: #eee !important;
    /*color: #fff !important;*/                                    
}

.labelCantMenu {
    position: absolute;
    top: 15px;
    right: 10px;
}

@media only screen and (orientation:landscape) 
{
    .sidebar a {
        font-size: 1em;
    }
}

@media (max-width: 767px) {
    .sidebar { z-index: 2; }
}

@media only screen and (min-device-width: 1200px) and (max-device-width: 1500px){
    .sidebar a .menu-icon {
        font-size: 1em;
        padding: 15px 10px;
        width: 30px;
    }
    .sub-menu a .menu-icon {
        padding-left:20px;
        width:35px;
    }

     .sidebar a .menu-child {
        position: absolute;
        right: 5px;
        top: 17px;
    }
}

@media only screen and (min-device-width: 851px) and (max-device-width: 1199px){
    .sidebar a .menu-icon {
        font-size: 1em;
        padding: 15px 10px;
        width: 40px;
    }
    .sub-menu a .menu-icon {
        padding-left:25px;
        width:45px;
    }

    .sidebar a .menu-child {
        position: absolute;
        right: 5px;
        top: 15px;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 850px){
    .sidebar a .menu-icon {
        font-size: 1em;
        padding: 15px 5px;
        width: 20px;
    }
    .sub-menu a .menu-icon {
        padding-left:15px;
        width:30px;
    }

    .sidebar a .menu-child {
        position: absolute;
        right: 5px;
        top: 13px;
    }

    .labelCantMenu {
        position: absolute;
        top: 12px;
        right: 10px;
    }
}

@media (max-width: 767px) {
    .sidebar { z-index: 2; }

    nav nav-sidebar li{
        font-size:1.1em;
    }

    .sidebar li{
        font-size:1.1em !important;
    }
}

/************* GRID /*************/

.grid-toolbar {
    min-height:40px;
    padding-top: 10px;
}

.grid-toolbar .form-group {
    box-sizing: border-box !important;
    margin-bottom: 5px !important;
}

.k-grid table {
    touch-action: auto !important;
} 

.k-grid-norecords-template {
    border: 0;
    padding: 15px 0 10px 0;
}

.grid-agrupar {
    display: block;
    font-style: italic;
    width: 100%;
    text-align:center;
}

.grid-boton-columna { 
    font-size: 1.5em;
    text-align: center;
    display: block;
}

a.grid-boton-columna {
    color: #9D2449;
}

.k-state-selected .grid-boton-columna { 
    color: whitesmoke !important;
}

a.grid-boton-columna:hover, a.grid-boton-columna:focus {
    text-decoration: none;
    color: #333;
    background: none;
}

.k-grid .k-grid-header .k-header {
    font-weight: 600 !important;
}

.k-grid-header
{
    padding-right: 0px !important;
}

.k-grid-content
{
    height: auto !important;
    overflow-y: hidden !important;
}

.k-grid .form-control-feedback {
    line-height: 34px;
}

.k-grid input.k-checkbox {
    width: 30px !important;
    height: 25px !important;
    cursor: pointer;
}

.k-grid .k-checkbox-label::before {
    width: 16px !important;
    height: 16px !important;
    margin-left: 8px !important;
    margin-top: 4px !important;
}

.k-grid .k-grid-header .k-header .k-link {
    height: auto;
}
  
.k-grid .k-grid-header .k-header {
    white-space: normal;
}

.k-grid .k-grid-header .k-header .k-link {
    height: auto;
}
  
.k-grid .k-grid-header .k-header {
    white-space: normal;
}

.k-state-selected {
    background-color: #6F7271 !important;
    border-color: #6F7271 !important;
}

.k-grid td.k-state-selected:hover, .k-grid tr.k-state-selected:hover td {
    background-color: #6F7271 !important;
}

.k-state-focused {
    box-shadow: none !important;
}

#tsDetalle > .nav.nav-tabs {
    background-color: #f5f5f5;
}

#tsDetalle > .tab-content {
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 0 20px 20px;
    overflow: hidden;
}

/************* LOADING /*************/

#loading {
    background-color: rgba(0, 0, 0, 0.3);
    top: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10100;
}

#loading .loading-body {
    top: 50%;
    left: 50%;
    position: fixed;
    background-color: #fff;
    border-radius: 7px;
    color: #666;
    font-size: 1.2em;
    font-weight: 600;
    max-width: 320px;
    min-width: 220px;
    min-height: 80px;
    padding: 15px;
    text-align: center;
}

#loading .loading-icon {
    background: #fff url("../../../Content/img/loading.svg") no-repeat 0 0;
    display: block;
    height: 40px;
    margin: 0 auto;
    width: 40px;
}


/************* FOOTER /*************/

footer[role="contentinfo"] {
    /*height:20%;*/
    width:100%;
    color:#fff !important;
}

footer[role="contentinfo"] p {
    margin: 0 0 5px 0;
}

.fondo-colores {
    background: url("../../../Content/img/fondo-colores.jpg") repeat-x center top;
    height: 6px;
    margin-bottom: 5px;
}

.k-slider-selection {
    background-color: #337ab7;
}