/* custom */
main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;
}

footer {
    height: 40px;
    flex-shrink: 0;
    border-top: 1px solid gray;
    padding: 10px;
    box-sizing: border-box;
}





.svg-menu {height:26px; width:26px; margin-left:2px; margin-right:5px;}
.top-row {justify-content: flex-start !important;}

.page-title  {position:relative; font-size:36px; margin-top:8px; color:mediumblue;}
.spinner {z-index:3000; position:absolute;top:100px;left:300px;color: rebeccapurple;}
.my-spinner { color: #0000ff !important; height:100px; width:100px;}
.mb10 {margin-bottom:10px;}
.ml10 {margin-left:10px;}
.ml20 {margin-left:20px;}
.mt20 {margin-top:20px;}
.mt10 {margin-top:10px;}
.mt40 {margin-top:40px;}
.sq24 {width:24px;height:24px;}
.sq28 {width:28px;height:28px;}
.sq32 {width:32px;height:32px;}

.sq36 {width:36px;height:36px;}
.sq38 {width:38px;height:38px;}
.sq44 {width:44px;height:44px;}
.flag {width:36px;height:24px;}
.flag-lg {width:42px;height:28px; margin-top:-6px;}
.w40  {width: 40px;}
.ctr  {text-align: center;}
.indent1 {padding-left:20px;}

.hdr {color: #dddddd;}
.drow a {color: #01e3fc;} /*cyan old=#0096FF*/
.drow a:hover {color: #ffff00; font-weight: bold;}
.drow {cursor:pointer;  color: #E5E4E2;}
.drow:hover {background-color: #00cc;}
.drow:focus {background-color: #eeeeee; color: #ff0000 !important;}
.drow:active {background-color: #eeeeee; color: #0000ff !important;}
.drowlink:hover {color: #ffff00;}

.spinner {
    border: 8px solid #fff; border-top: 8px solid #258cfb; 
    border-radius: 50%; width: 40px; height: 40px; animation: spin 2s linear infinite;
    display:block; position:fixed; top: 80px; left: 100px;  z-index: 3000;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.brightblue {color:#01e3fc;}
.brightblue:hover {color: #ffff00;}
.dashlink {color:#01e3fc;}
.dashlink:hover {color: #ffff00;}

.entry {padding-left:7px;}
.entrylabel {width:30%; max-width:30%;}
.entrycell {width:30%; max-width:30%;}
.entryresult {width:40%; max-width:40%;}
.entry:focus {background-color: yellow;}

/* std main grid rules */
.mud-container {display:inline-block;}
.mt-8, .my-8 { margin-top: unset !important;}
.main-grid: {margin-top:10px !important;}
.main-grid th {text-decoration:underline;}

.iconblock { min-width: 40px; min-height: 40px; max-width: 40px;	max-height: 40px; }

/* tables */
.tableMid {width:100%;}


.col1 {	max-width: 40px; }
.coledit { text-align:center; max-width: 80px;}
.flink {text-decoration:none;}
.flink:hover {text-decoration:underline;}

/* modal */
	.modal1 {position:relative;inset:0;display:flex;align-items:center;justify-content:center;z-index:2000;}
	.modal2 {background-color: #fff;z-index:2001;border-radius:8px;  cursor: move;
    user-select: none;}
	.modalcontent {z-index:2002;min-width:320px;max-width:600px;border-radius:8px 8px 0 0;}
	.modalheader {z-index:2002;min-width:320px;max-width:600px;border-radius:8px 8px 0 0; position: relative;
		max-height:50px; background-color: darkolivegreen; padding:10px 10px;color:#fff; margin-top:-1px;}
	.link {color:blue;}
	.link:hover {font-weight:600; text-decoration: underline;}
	.hdrclose {position: absolute; top: 10px; right: 10px; color: white; cursor: pointer; }

/* draggable */
.drag-modal {
    position: fixed; top: 150px; left: 300px; width: 500px; background: white;
    border: 1px solid #aaa; box-shadow: 0 4px 18px rgba(0,0,0,.25); z-index: 2000;
}

.drag-modal-header {
    padding: 10px 15px; border-bottom: 1px solid #ccc; cursor: move; user-select: none; 
}

.svg-button {border: none; background-color: transparent; padding: 0; margin-top: -5px;}
.svg-blue {
    filter: invert(60%) sepia(9%) saturate(953%) hue-rotate(165deg) brightness(92%) contrast(88%);
}
.svg-blue path:hover {
  stroke: #0000ff;
  stroke-width: 5px;
}
.svg-link:hover {font-weight:bolder;}
.svg-silver {
    filter: invert(65%) sepia(94%) saturate(0%) hue-rotate(162deg) brightness(98%) contrast(97%);
}
.svg-white {
  filter: invert(100%) sepia(4%) saturate(707%) hue-rotate(210deg) brightness(120%) contrast(100%);
}
.svg-hover-blue:hover {
    filter: invert(60%) sepia(9%) saturate(953%) hue-rotate(165deg) brightness(92%) contrast(88%);
}
.svg-bright-blue { /* #01e3fc: cyan */
    filter: invert(65%) sepia(37%) saturate(2077%) hue-rotate(140deg) brightness(103%) contrast(105%);
}
.svg-bright-blue:hover { /* blue */
    filter: invert(60%) sepia(9%) saturate(953%) hue-rotate(165deg) brightness(92%) contrast(88%);
}
.svg-dark-green { /* #003400: darker green */
    filter: invert(13%) sepia(50%) saturate(2166%) hue-rotate(91deg) brightness(97%) contrast(106%);
}
.svg-forest-green { /* ##228B22: forest green */
    filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(2293%) hue-rotate(70deg) brightness(97%) contrast(94%);
}
.svg-green { /* #228B22: forest green */
    filter: brightness(0) saturate(100%) invert(77%) sepia(7%) saturate(7494%) hue-rotate(64deg) brightness(87%) contrast(89%);
}
.svg-red { /* #EE4B2B: bright red */
    filter: brightness(0) saturate(100%) invert(37%) sepia(92%) saturate(3604%) hue-rotate(349deg) brightness(101%) contrast(87%);
}
.svg-yellow { /* #FFFF00: yellow */
filter: brightness(0) saturate(100%) invert(97%) sepia(43%) saturate(7467%) hue-rotate(2deg) brightness(106%) contrast(104%);
}

/* widths */

@media (min-width: 641px) {
    .mud-table-cell {padding: 8px;}
    .tableMid {width:60vw;}

}