/* Base styles for desktop */
.content {
    transform-origin: top left;
    transition: transform 0.3s ease;
}

/* Scale up for mobile devices - BUT NOT for login screens */
@media screen and (max-width: 768px) {
    .content:not(.login-content) {
        transform: scale(1.2); /* 20% larger */
        width: 83.33%; /* Compensate: 100% / 1.2 */
    }
    
    /* Login screen stays at normal scale */
    .content.login-content {
        transform: scale(1);
        width: 100%;
    }
}

/* For smaller screens, scale even more - BUT NOT for login screens */
@media screen and (max-width: 480px) {
    .content:not(.login-content) {
        transform: scale(1.4);
        width: 71.43%; /* 100% / 1.4 */
    }
    
    /* Login screen stays at normal scale */
    .content.login-content {
        transform: scale(1);
        width: 100%;
    }
}

/* Create a zoom wrapper that contains everything */
.zoom-wrapper {
    transform-origin: 0 0;
    transition: transform 0.3s ease;
    min-height: 100vh;
    width: 100%;
}

/* Responsive zoom levels - NOT for login screen */
@media screen and (min-width: 769px) {
    .zoom-wrapper.auto-zoom:not(.login-page) {
        transform: scale(1);
    }
}
/* 
@media screen and (max-width: 768px) and (min-width: 481px) {
    .zoom-wrapper.auto-zoom:not(.login-page) {
        transform: scale(1.2);
    }
}

@media screen and (max-width: 480px) {
    .zoom-wrapper.auto-zoom:not(.login-page) {
        transform: scale(1.5);
    }
}
*/
/* Login screen zoom wrappers always stay at scale 1 */
.zoom-wrapper.login-page {
    transform: scale(1) !important;
}

/* Override for manual zoom */
.zoom-wrapper.manual-zoom {
    /* Manual zoom overrides auto zoom */
}
body      { font-family: Verdana, sans-serif; }
body.waiting * { cursor: wait !important;}
img.Logo { border-radius : 10px; }	
th.TopRound { border-top-right-radius: 10px;  border-top-left-radius: 10px; }
div.TopRound { border-top-right-radius: 10px;  border-top-left-radius: 10px; }
div.Round, blockquote.Round {border-radius: 10px; }

.BottomRound { border-bottom-right-radius: 10px;  border-bottom-left-radius: 10px; box-shadow: 1px 1px 1px grey;}

.Format table {table-layout: auto;}
.Format th, .Format td {width: auto;}

td {
    vertical-align: middle;
}
table.Title{
            width: 100%; }

td.Title  { padding: 5px;
            text-align: center;

            font-size: 16pt; }
table.DialogBox {
            padding: 0px;
            margin-right: 10px;
            width: 50%; }
table.InDialogBox {
            padding: 0px;
            width: 50%; }
table.InteriorBox {
            padding: 0px;
            width: 100%; }
table.List {
            padding: 0px;
            width: 100%; }
td.Menu, td.HighlightMenu, td.MenuSelected {
            padding: 5px;
            margin: 5px;
            vertical-align: top;
            font-size: 14pt;
            text-align: left;
            white-space: nowrap;
            width: 840px; }
td.Menu2 {
            padding: 5px;
            margin: 5px;
            vertical-align: top;
            font-size: 8pt;
            text-align: left;
            white-space: nowrap;
            width: 20px; }
th.DialogBox, th.InDialogBox {
            /* padding: 5px; */
            margin: 5px;
            vertical-align: top;
            font-size: 12pt;
			color: #000055;
            text-align: left;
            white-space: nowrap;
            width: 1%; }

th.DialogBox {
			box-shadow: 1px 1px 1px grey;
			}            
th.DialogBoxEndColumn {
            padding: 5px;
            margin: 5px;
            white-space: nowrap;
            vertical-align: top;
            font-size: 12pt;
			color: #000055;
            text-align: left;
            width: 1%;}

  
td.DialogBox, td.InDialogBox, td.EvenList, td.OddList {
            padding: 2px;
            margin: 5px;
            vertical-align: middle;
            font-size: 8pt;
            text-align: left;
            white-space: nowrap; }
       
td.EvenListr, td.OddListr {
            padding: 2px;
            margin: 5px;
            vertical-align: middle;
            font-size: 8pt;
            text-align: right;
            white-space: nowrap;
            width: 1%; }
            
td.EvenListEndColumn, td.OddListEndColumn {
            padding: 2px;
            margin: 5px;
            vertical-align: middle;
            font-size: 8pt;
            text-align: left;
            white-space: nowrap;
            width: 1%; }

td.EvenListEndColumnr, td.OddListEndColumnr {
            padding: 2px;
            margin: 5px;
            vertical-align: middle;
            font-size: 8pt;
            text-align: right;
            white-space: nowrap;
            width: 1%; }
            
table.TableDialogBox {
            padding: 0px;
            margin-right: 10px;
            width: 970px; }
            
div.box 
        {
            border: 0; 
            position : relative; 
            left : 25px;
            width: 100%;
        }
		

p {
  margin: 0px;
  padding: 0px;
}

               
#AddDialogLayer { position: absolute;
            top: 20%;
            margin: 20%;
            width: 500px;
            visibility: hidden;
            padding: 0px; }
#EditDialogLayer { position: absolute;
            top: 20%;
            margin: 20%;
            width: 500px;
            visibility: hidden;
            padding: 0px; }
#RemoveDialogLayer { position: absolute;
            top: 20%;
            margin: 20%;
            width: 500px;
            visibility: hidden;
            padding: 0px; }
#CalendarLayer { position: absolute;
            top: 20%;
            margin: 20%;
            width: 500px;
            visibility: hidden;
            padding: 0px; }

.hide {
  opacity: 0;
  transition: opacity 1s linear;
  -webkit-transition: opacity 1s linear;
  -moz-transition: opacity 1s linear;
  -o-transition: opacity 1s linear;
}
.show {
  opacity: 1;
  transition: opacity 1s linear;
  -webkit-transition: opacity 1s linear;
  -moz-transition: opacity 1s linear;
  -o-transition: opacity 1s linear;
}

.drsElement {
	opacity: 1;
	transition: opacity 0.5s ease-in-out;
}

.drsElement.fade-out {
	opacity: 0;
}

select {
    width: auto;
    max-width: 100%;
    box-sizing: border-box;  /* Include padding/border in width calculation */
}

select {
    width: auto;
    max-width: 100%;
    box-sizing: border-box;  /* Include padding/border in width calculation */
}

/* Optional: Make it full width on very small screens */
@media (max-width: 480px) {
    select {
        width: 100%;
    }
}
/* Was interfearing with drag and drop sizing
input[type="text"] {
    max-width: 100%;      
    box-sizing: border-box; 
} */