html, body {height: 100%; margin: 0; padding: 0;}
.wrapper {display: flex; min-height: 100%; flex-direction: column;}
.main {flex:1; flex-basis:auto;}

body {background-color: #eee!important;}
#logo {display:block; height:auto; float:left; position:relative;}
#logo img {width:15rem;}
#logo .env-badge {
    position: absolute;
    left: calc(100% + 0.45rem);
    bottom: 0.25rem;
    padding: 0.15rem 0.45rem;
    background-color: #c40000;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
    border-radius: 0.2rem;
    z-index: 2;
}
#logo .maintenance-badge {
    position: absolute;
    left: calc(100% + 0.45rem);
    bottom: 1.6rem;
    padding: 0.15rem 0.45rem;
    background-color: #ff6600;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
    border-radius: 0.2rem;
    z-index: 2;
}

.top {margin:1em auto; overflow:auto;}
.top .navbar-light .navbar-toggler { border: none; }
.top .nav-title {color:gray; clear:both; font-size: 80%;}
.top .nav-link {padding:0;}
.top .nav-item:hover {text-decoration:none; }
.top .navbar-toggler img {width:2rem; height:2rem;}
.top .navbar-toggler i {font-size:30px; color:#444;}
.top .navbar-nav-custom li {display:inline-block;}
.top .navbar-collapse.show .navbar-nav-custom li, .top .navbar-collapse.collapsing .navbar-nav-custom li {display:block;}

.fas {font-size: 1.5em;}
a .fas {color:gray;}
a:hover .fas {color:black}

button .fas {font-size: 1.2em; padding:0.2em;}

.carousel-inner img {margin: auto;}
.form-group label {font-size:90%; color:gray;}

.text-left .btn {margin-right:0.5rem; margin-bottom:0.5rem;}
.text-right .btn {margin-left:0.5rem; margin-bottom:0.5rem;}

th {font-size: 80%;}
td.text-right .fas {margin-left:0.5rem}

select option:disabled { color: gray; font-weight: bold; text-transform: capitalize; padding-top:0.5rem;}

optgroup {margin:0.5em 0;}

.footer {color:white; font-size: 0.7rem; padding: 2em 0; margin:0 auto;}
.footer a {color:white!important;}
.footer a:hover {color:#88704A!important; text-decoration: none;}

input[type='checkbox']#id_isconfirmed:after { content: "Non confermato"; font-size:1.4rem; font-weight:700; margin-left:1.6rem; color:#c00}
input[type='checkbox']#id_isconfirmed:checked:after { content:"Confermato"; color:#0c0 }

video#preview {background-color:green; max-width:16rem; max-height:12rem; width:auto; height:auto; float:right; margin-left:2em;}

.qrcode svg {width:100%; height:auto;}
.top .qrcode {float:right; width:10rem; margin-left:1rem;}

ul.warnings { padding-left:0; }
ul.warnings.icons-only {margin:0; overflow:auto; display:inline-block;}
.warnings li {background-repeat: no-repeat; display:block; height:2.5em; padding-left:3em; line-height:2.5em; margin-bottom:0.3em}
.warnings.icons-only li {float:left;}
.warnings li.glutine {background-image: url("../images/warnings/glutine.780025956663.svg")}
.warnings li.latte {background-image: url("../images/warnings/latte.aab02fe2c5ec.svg")}
.warnings li.maiale {background-image: url("../images/warnings/maiale.3150fade7ee2.svg")}
.warnings li.uova {background-image: url("../images/warnings/uova.b680d9133ca8.svg")}
.warnings li.vegetariano {background-image: url("../images/warnings/vegetariano.047540a44d68.svg")}

.event.expired {opacity: 0.3;}

.supply .course {font-size: 2em; line-height:1em; border-right: 2px dotted gray; width:50%;}
.supply .course.course-6 {width:33%; padding-bottom: 1em;}
.supply .course.course-5 {width:20%;}
.supply .course.course-4 {width:25%;}
.supply .course.course-3 {width:33%;}
.supply .course.course-3:last-child,
.supply .course.course-4:last-child,
.supply .course.course-5:last-child {border-right: none;}
.supply .course.course-6:nth-child(3),
.supply .course.course-6:nth-child(6) {border-right: none;}

.supply .stats h2 {display:inline-block!important;}

/* Etichette formato 4x10 su A4 */
body.labels {
    background-color: white!important; 
    font-family: Helvetica, sans-serif; 
    margin: 0; 
    padding: 0;
}

.labels {
    background-color: white!important; 
    font-family: Helvetica, sans-serif;
}

/* Container for label pages with grid layout */
/* 4 colonne al 25%, altezza proporzionale A4 */
.labels-page {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: repeat(10, calc(100vw * 297 / 210 / 10));
    grid-auto-flow: column;
    gap: 0;
    width: 100vw;
    height: calc(100vw * 297 / 210);
    page-break-after: always;
}

.labels-page:last-child {
    page-break-after: auto;
}

.label {
    padding: 0.5vw 0.5vw 0.5vw calc(0.5vw + 6mm);
    box-sizing: border-box;
    overflow: hidden;
    page-break-inside: avoid;
    border: 1px solid #eee;
}

.label .date {
    font-size: 1.2vw; 
    margin-bottom: 0.3vw;
}

.label .location {
    font-size: 1.44vw; 
    margin-bottom: 0.3vw;
    font-weight: 600;
}

.label .course {
    font-size: 2vw; 
    font-weight: 700; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    line-height: 1.1;
    margin-bottom: 0.3vw;
}

.label .quantity {
    font-weight: 700;
}

.label .quantity-number {
    font-size: 3.6vw;
}

.label .quantity-format {
    font-size: 1.8vw;
}

.label p {
    margin: 0 0 0.3vw 0;
}

/* Icons in buttons */
.btn i {
    font-size: 0.85em;
    margin-right: 0.25em;
    vertical-align: -0.125em;
}

/* Print-specific styles */
@media print {
    @page {
        size: A4;
        margin: 0;
    }
    
    body.labels {
        margin: 0;
        padding: 0;
    }
    
    .label {
        border: none;
    }
    
    .labels-page {
        page-break-after: always;
    }
    
    .labels-page:last-child {
        page-break-after: auto;
    }
}

.django-ckeditor-widget {width:100%;}

.order-details textarea {max-height: 6em;}

@media (max-width:1023px) {
	html { font-size: 0.9rem; }
	.card.main {padding: 0!important}
	#logo img {width:15rem;}
	.top .qrcode {width:8rem}
}

@media (max-width:575px) {
	html { font-size: 0.8rem; }
	.display-4 { font-size: 1.5rem; }
	.day h5 {background-color: #f8f9fa; padding: 3px 5px 5px; margin: -8px -8px 8px -8px; }
	.date { padding-left: 4px; }
	#logo img {width:8rem;}
	.top .qrcode {width:6rem}
}

@media (min-width: 576px) {
	.day { height: 12vw; }
}

@media (min-width: 1281px) {
	.top, .main, .footer {max-width:1280px;}
	.card.main {margin-bottom:2em;}
}

@media (min-width: 768px) {
	.footer {font-size: 0.8rem}
	.top .navbar-expand-md .navbar-collapse {display: block!important}
	.top .nav-link { padding-right: 0rem!important; padding-left: 1rem!important; }
}

@media print {
	pre, blockquote, .no-page-break {page-break-inside: avoid;}
	body {background-color: white!important;}
	.card.shadow {box-shadow: none!important;}
	.card.main {margin:1em; border:none;}
	.main {max-width:100%;}
}