* { 
    font-family: Lato, sans-serif;
    font-weight: 400;
    font-size: 15px;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */            
}
html, body {
    position: relative;
    overflow-x: hidden;    
}
body { 
    margin: 0 auto; 
    padding: 20px; 
    max-width: 100%;
    overflow-x: hidden; 
}

.fl { display: block; float: left; }
.fr { display: block; float: right; }

h3 { color: var(--bs-body-color); font-weight: 400; font-size: 1.1em; user-select: none; }
h4 { color: #d8dddf; font-size: 1.1em; clear: both; font-weight: 500; user-select: none; }
h6 { color: #999; font-size: 0.90rem; margin-top: -0.5rem; margin-bottom: 0.75rem; font-weight: 200; text-align: right; }

#header { position: absolute; width: 100%; text-align: left !important; top: 10px; left: 0px; font-size: 0.8em; margin-left: 30%; opacity: 0.6; }

.disabled { opacity: 0.6; }
.warning { color: rgb(194, 71, 71) !important; }
.m-signature-pad--body canvas {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    border: 1px solid #CCCCCC;
    border-radius: 5px;
}
.w30 { width: 30%; }
.w60 { width: 60%; }
.ml5 { margin-left: 5px; }
.logo { max-width: 200px; height: auto; display: block; float: right; margin-bottom: 10px; }

.bi-box-arrow-left { display: block; position: absolute; font-size: 1.5em; }
.bi-box-arrow-left.hide-on-small-devices { left: 20px; top: 10px; }
.bi-box-arrow-left.show-on-small-devices { right: 20px; top: 10px; }

.hidden { display: none; }
.show-on-small-devices { display: none; }

form[func="load"] .hide-on-load { display: none; }
form[func="deliver"] .hide-on-deliver { display: none; }
form[func="return"] .hide-on-return { display: none; }
form[func="plan"] .hide-on-plan { display: none; }

p.alert { text-align: center; }

@media (orientation:landscape) and (max-width: 1020px) {
    .hide-on-landscape {
        display: none !important;
    }
    .m-signature-pad {
        width: 100%;
        height: 100%;
    }
}
@media (orientation:landscape) and (min-width: 768px) {
    body { max-width: 768px; }
}

@media (orientation:portrait) {
    .hide-on-portrait {
        display: none !important;
    }
}
@media (orientation:portrait) and (max-height: 480px) {
    .hide-on-small-devices {
        display: none !important;
    }
    .show-on-small-devices {
        display: block !important;
    }
}

input:not(:read-only):focus {
    background-color: white !important;
    color: black !important;
}
input:not(:read-only):focus::placeholder {
    color: rgb(94, 94, 94) !important;
}
ul#selection-list > li {
    position: relative;
}
ul#selection-list > li > span.info {
    position: absolute;
    right: 5px;
    top: 2px;
    width: 20px;
    height: 20px;
    text-align: right;
    font-size: 0.8em;
}