/*******************************************************************************
* COPYRIGHT (C) 726 TECHNOLOGY INC, 2017 - 2024            ALL RIGHTS RESERVED *
*******************************************************************************/
/* Responsive Page Layout CSS */
.ResponsiveContentBox { height: 100%; display: flex; flex-wrap: wrap; }
@media screen and (min-width: 1100px) and (orientation: landscape) {
    .ResponsiveContentBox { height: 76vh; }
}   

.ResponsiveFullBox { width: 100%; padding: 5vh 0 0 0; }
.ResponsiveHeader { width: 100%; color: #fff; text-align: center; 
                    font-size: calc(1.5vh + 0.75vw); font-weight: bold; }
.ResponsiveHeader.sub { font-size: calc(1.5vh + 0.75vw); font-weight: normal; }

.ResponsiveHalfBox { background-color: var(--main-window-color, #00a1ff55); box-sizing: border-box; margin-top: 2vh; 
                     padding: 0 6%; display: flex; align-items: center; width: 100%; 
                     border: calc(0.25vh + 0.25vw) solid var(--main-window-border-color, #00a1ff22); }
@media screen and (min-width: 1100px) and (orientation: landscape) {
    .ResponsiveHalfBox { width: 50%; height: 100%; }
}  

.ResponsiveHalfBox.block { display: block; }

.ResponsiveHalfBox.centerstart { align-items: flex-start; }
@media screen and (min-width: 1100px) and (orientation: landscape) {
    .ResponsiveHalfBox.centerstart { align-items: center; }
}  

.ResponsiveHalfBox.cropped { max-height: 30vh; }
@media screen and (min-width: 1100px) and (orientation: landscape) {
    .ResponsiveHalfBox.cropped { max-height: 40vh; }
}  

.ResponsiveHalfBox.clear { background-color: transparent; border: none; }

.ResponsiveHalfBox.extended { min-height: 60vh; max-height: 60vh; overflow-y: scroll; }
@media screen and (min-width: 1100px) and (orientation: landscape) {
    .ResponsiveHalfBox.extended { max-height: 80vh; }
}  

.ResponsiveHalfBox.mid { min-height: 55vh; height: 55vh; flex-direction: column; 
                         padding: 0; overflow-y: scroll; }
@media screen and (min-width: 1100px) and (orientation: landscape) {
    .ResponsiveHalfBox.mid { min-height: 55vh; height: 55vh; }
}  

.ResponsiveHalfBox.full { min-height: 50vh; max-height: 50vh; overflow-y: scroll; }
@media screen and (min-width: 1100px) and (orientation: landscape) {
    .ResponsiveHalfBox.full { max-height: 70vh; }
}  

.ResponsiveHalfBox.footer { align-items: flex-end; max-height: 14vh; margin-top: 0; }
@media screen and (min-width: 1100px) and (orientation: landscape) {
    .ResponsiveHalfBox.footer { align-items: center; max-height: 80vh; margin-top: 2vh; }
}  

.ResponsiveHalfBox.buttonpanel { align-items: flex-start; min-height: 20vh; 
                                 height: 20vh; margin-top: 0; }
@media screen and (min-width: 1100px) and (orientation: landscape) {
    .ResponsiveHalfBox.buttonpanel { align-items: center; align-self: center; 
                                     max-height: 50vh; margin-top: 2vh; }
}  

.ResponsiveHalfBox.invisible { background-color: transparent; border: calc(0.25vh + 0.25vw) solid transparent; }
.ResponsiveHalfBox.scrolling { scrollbar-width: none; }
.ResponsiveHalfBox.scrolling::-webkit-scrollbar { display: none; }
.ResponsiveHalfBox.transitional { transition-property: background-color, border; 
                                  transition-duration: 2s; }
.ResponsiveHalfBox.unpadded { padding: 0; }
.ResponsiveHalfBox.wrapped { flex-wrap: wrap; -webkit-flex-wrap: wrap; }