/*******************************************************************************
* COPYRIGHT (C) 726 TECHNOLOGY INC, 2017 - 2024            ALL RIGHTS RESERVED *
*******************************************************************************/
/* DIALOG BOX CSS */
.DialogWindow { display: none; position: fixed; z-index: 1; padding: 0; 
                left: 0; top: 0; width: 100%; height: 100%; overflow: auto;
                background-color: rgba(0, 0, 0, 0.4); }
.DialogBox { background-color: var(--main-dialog-color, #003355); 
             border: calc(0.25vh + 0.25vw) solid var(--main-dialog-border-color, #00a1ff66);
             margin: auto; padding: 0 0 1vh 0; width: 94%; min-height: 20vh; }
@media screen and (min-width: 800px) {
    .DialogBox { width: 80%; }
}  
@media screen and (min-width: 1100px) and (orientation: landscape) {
    .DialogBox { width: 50%; }
}  
.DialogBox.double, .DialogBox.triple { width: 100%; }
.DialogTitle { display: flex; justify-content: space-between; 
               align-items: center; color: #eee; font-size: 3.5vh; 
               font-weight: bold; padding: 0 3vw; 
               background-color: var(--main-dialog-title-color, #00a1ffbb); margin-bottom: 2vh; }
.DialogBoxClose { color: #333; float: right; font-size: 6vh;
                  font-weight: bold; }
.DialogBoxClose:hover,
.DialogBoxClose:focus { color: #aaa ; text-decoration: none;
                        cursor: pointer; }
.DialogContent { font-size: 1.75vh; }
.DialogContent.compact { font-size: 1.5vh; }
.DialogContent.flexi { display: flex; justify-content: space-around; flex-wrap: wrap; padding: 1vh 0; }
.DialogContent .desc { display: flex; justify-content: center; width: 15vh; color: #fff; }
.DialogContent .icon { display: flex; justify-content: center; width: 15vh; }
.DialogContent .icon img { height: 4vh; }
.DialogContent .wrapper { margin: 1vh 0; }
.DialogMessage { padding: 0 3vw; color: #eee; font-size: 3vh; font-weight: bold; }
.DialogButtonBar { display: flex; align-items: center; margin: 2vh 0;
                   justify-content: space-around; }
.DialogButton { width: 15vw; background-color: #fff; 
                border: calc(0.25vh + 0.25vw) solid #5552; text-align: center; }
.DialogButton.DialogSelect { width: 75%; font-size: 4vh; text-align: left; padding: 1vh 1vw; }
@media screen and (min-width: 800px) {
    .DialogButton { width: 10vw; }
}  
.DialogButton.mini { width: 5vw; }
.DialogButton.padded { padding: 1vh 1vw; font-size: 2vh; font-weight: bold; }
.DialogButton.selected { background-color: lightskyblue; }
.DialogButton:not(.disabled):hover { background-color: lightskyblue; cursor: pointer; }
.DialogButtonSVG { width: 4vw; height: 4vh; 
                   margin-top: 0.25vh; filter: invert(49%) sepia(4%) saturate(0%) 
                   hue-rotate(221deg) brightness(93%) contrast(95%); }
.DialogButton:not(.disabled):hover .DialogButtonSVG { filter: invert(0%) 
                   sepia(1%) saturate(7461%) hue-rotate(6deg) brightness(113%) 
                   contrast(60%); }
.DialogButton:not(.disabled):hover .DialogButtonSVG.delete { filter: invert(7%) 
                   sepia(76%) saturate(7493%) hue-rotate(10deg) brightness(300%) 
                   contrast(111%); }
.DialogButton:not(.disabled):hover .DialogButtonSVG.save { filter: invert(32%) 
                   sepia(89%) saturate(2046%) hue-rotate(98deg) brightness(97%) 
                   contrast(104%); }