/* This file is reserved for overriding and extending the template styles. */
html[data-placement=vertical] .nav-container, 
html[data-placement=horizontal] .nav-container.mobile-side-ready, 
html[data-placement=vertical] .nav-container.mobile-side-ready{
	width: 16rem !important;
}

html[data-placement=vertical] .nav-container .nav-content .menu-container, 
html[data-placement=horizontal] .nav-container.mobile-side-ready .nav-content 
.menu-container, html[data-placement=vertical] .nav-container.mobile-side-ready 
.nav-content .menu-container {
    display: flex !important;
    align-self: flex-start;
    order: 3;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    width: 15rem;
    margin-left: 0.5rem;
    margin-right: 1rem;
}
@media (min-width: 576px){
	.modal-dialog {
	    max-width: 580px;
	}
}
.modal-fullscreen-xxl-down {
    width: 100vw;
    max-width: none !important;
    height: 100%;
    margin: 0;
}
.modal-lg, .modal-xl {
    max-width: 800px;
}
.modal-sm {
    max-width: 300px;
}
@media (min-width: 1200px){
    .modal-xl {
        max-width: 1140px;
    }
}
.btn-xs{
    padding: 3px 10px;
    font-size: .8em;
}
:root {
    --transition-time: 400ms;
    --transition-time-long: 1000ms;
    --transition-time-short: 200ms;
    --nav-size-slim: 4.5rem;
    --nav-size: 16rem;
    --footer-size: 4.5rem;
    --input-height: 2rem !important;
    --small-title-height: 2rem;
    --font: "Nunito Sans", sans-serif;
    --font-heading: "Montserrat", sans-serif;
}

label{
	font-weight: bold;
}

.card .card-body label{
	font-size: 11px;
}
.modal-body label{
	font-size: 11px;
}
.card .card-body .form-control, .form-select, .custom-select{
	font-size: .657rem;
}
.form-select{
    padding: 0.5rem 2.25rem 0.375rem 0.75rem;
}
.table .number{
	font-size: .95em;
}

.table ._number {
    min-height: 1rem;
    padding: 3px !important;
    border-radius: 2px !important;
}

main{
	padding-left: calc(var(--nav-size) + var(--main-spacing-horizontal));
}

.compose-body {
    margin-right: 1rem;
    margin-left: 1rem;
}

.form-group {
    margin-bottom: 8px;
}

.compose-body {
    margin-right: 1rem;
    margin-left: 1rem;
}

.search-input-container {
    border: 1px solid #ddd;
}

.modal-badoon-titulo{
	padding-left: 2rem;
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
}

.badoon_anulado{
	text-decoration: line-through;
	color:red !important;
}

.form-control:disabled, .form-control[readonly] {
    color: #2e2e2e;
    -webkit-text-fill-color: #2e2e2e !important;
}
.select2-container--default .select2-selection--single {
    color: #4e4e4e;
box-shadow: initial !important;
background-color: #ffffff;
border: 1px solid var(--separator) !important;
border-radius: 4px; !important;
min-height: 1.9rem; !important;
font-size: 1em;
}

.select2-container--open .select2-dropdown--below{
    border: 1px solid rgba(30, 168, 231, 1) !important;
    padding: 0.75rem;
    border-radius: 10px !important;
    background: #ffffff;
    margin-top: 3px;
}
.select2-results__option--highlighted, .select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true] {
    cursor: pointer;
    color: #1ea8e7;
    background: #f1f1f1 !important;
    border-radius: 6px;
}
.badoon-mesas {
    padding-right: 3px;
    padding-left: 3px;
    cursor: pointer;
}
.badoon-libre {
    background: #f2f2f2;
    color: #36404e;
    padding: 2px;
    text-align: center;
    margin-bottom: 5px;
}
.badoon-libre:hover {
    background: #ccc;
}
.badoon-ocupada {
    background: #d9534f;
    color: #fff;
    padding: 2px;
    text-align: center;
    margin-bottom: 5px;
}
.badoon-ocupada h3, .badoon-ocupada h6{
    color: #fff;
    font-weight: 700
}

.mesa-activa {
    background: #595ad4;
}
.mesa-activa h3, .mesa-activa h6{
    color: #fff;
    font-weight: 700
}
.table{
    font-size: 10px !important;
}
table > tbody > tr > td{
        padding: .3rem .3rem !important;
    }
.tabladetalle > thead > tr > th{
    background-color: #fff;
        background-image: linear-gradient(to bottom,#d6f0ff 0%,#dce0ed 100%);
    background-repeat: repeat-x;
}
.tablaindex > thead > tr > th{
    background-color: #F5F5F5;
    border-bottom-width: 2px;
    font-weight: 700 !important;
    font-size: 12px
}
.tabladetalle > tbody > tr > td > .form-control{
    min-height: 15px !important;
}
.tabladetalle > tbody > tr > td > .form-select{
    min-height: 15px !important;
}

.form-control, .form-select{
    padding:.2rem .2rem !important;
}
.form-select {
    background-position: right 0.35rem center;
}
.select2-container--bootstrap4 .select2-selection--single{
    height: 20px !important;
}
td span {
    line-height: 18px;
}
.offcanvas-header{
    background-color: #f1f1f1;
    border-bottom: 2px solid #bbb;
}

@media (max-width:700px) and (min-width:300px) {
    label{
       font-size: 10px !important;
    }
    html[data-placement=horizontal] .nav-container {
        height: 3rem;
    }
    .row {
        --bs-gutter-x: .5rem;
    }
    .mobil{
        display: none !important;
    }
    .tablaindex > thead > tr > th {
        font-size: 10px;
    }
}
.card .card-header{
    padding: 10px;
}
.breadcrumb {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0 0;
    margin-bottom: 0rem;
    list-style: none;
}

@media (max-width: 767.98px){
    .display-4 {
        font-size: 1.2em;
        font-weight: 700;
        margin-bottom: 10px !important;
    }
    .btn {
        margin-bottom: 5px;
    }
    .breadcrumb-container{
        display: none !important;
    }
}

html[data-placement=horizontal][data-dimension=mobile] main, 
html[data-placement=vertical][data-dimension=mobile] main {
    padding-left: .5rem !important;
    padding-right: .5rem !important;
    padding-top: calc(3.5rem + calc(var(--main-spacing-horizontal) / 2));
}

@media only screen and (max-width: 800px) {
    /* Force table to not be like tables anymore */
    #no-more-tables table,
    #no-more-tables thead,
    #no-more-tables tbody,
    #no-more-tables th,
    #no-more-tables td,
    #no-more-tables tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    #no-more-tables thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    #no-more-tables tr { border: 1px solid #ccc; }

    #no-more-tables td {
        /* Behave like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50% !important;
        white-space: normal;
        text-align:left;
        font-size: 12px !important;
    }

    #no-more-tables tbody td input{
        width: 24px;
        height: 24px;
        border: 1px solid rgb(0 0 0 / 60%) !important;
    }

    #no-more-tables td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align:left;
        font-weight: bold;
    }

    /*
    Label the data
    */
    #no-more-tables td:before { content: attr(data-title); }
}