@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size:22px;
}
a, .btn-link {color:silver;}

h1:focus { outline: none; }

.sq28 {width:28px;height:28px;}

.navbar-brand {color:#000; padding-top: 0; margin-left: -20px; }
.brand-title {padding-left:unset; margin-left: -10px;}
.pagename {padding-left:1px; font-size:28px;}

.menu-title { font-size: 17px; margin-left: 20px; margin-top: 8px; font-style: italic; color: #ffffff; }
.page-title  {position:absolute; left:44px; font-size:36px; margin-top:8px; color:mediumblue;}
.under-title {position:absolute; left:14px; font-size:22px; margin-top:-15px; margin-bottom:10px; color:mediumpurple;}
.sidebar1 {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}
.sidebar2 {
    background-image: linear-gradient(180deg, rgb(103, 39, 5) 0%, #3a0647 70%);
}
.nav-item {padding-bottom: 0;}
.nav-link {font-size:20px;}

.table {color:silver;}

.btn {display: inline-flex; padding:5px 10px 5px 10px; border-radius:4px; }
.btn-primary { color: #fff; background-color: #1b6ec2; border-color: #1861ac; }
.btnSubmit { background-color: forestgreen; border:1px solid green;     color:white;     }
.btnCancel { background-color:#eeeeee66; border:1px solid #aaaaaa;  color:darkgray; }
.btnRemove { background-color:#ffebee;   border:1px solid #d32f2f;  color:#e57373; }
.btnReview { background-color: lime; border:1px solid forestgreen;  color:black;     }
.btnReturn { text-align:center; background-color: #1b6ec2; border:1px solid darkblue; color:#fff; }
.btntext {padding:0; margin-left: 3px; }

.errormessage {font-size:20px; margin-bottom:10px;}
.datamessage  {font-size:20px; margin-bottom:10px;}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
.btn-thin { height: 36px; padding-top: 4px; }

.content { padding-top: 1.1rem; }
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid red; }
.validation-message { color: red; }

/* date entry panel: default is for mobile  */
.mainform {padding:10px; max-width:100%; background-color:#F0F8FF66; border:1px solid blue; border-radius:4px;}
.deheader {padding:10px; max-width:100%; margin-left:-10px;}


.tblform {width: 80%; max-width:100%;}
.date-picker {width: 120px; max-width:120px; max-height:24px; 
              display:inline; margin-bottom:5px;}
.decell  {padding-bottom:10px;padding-left:8px;}


.stdgrid {overflow-y:unset;}
.stdgridhdr {height:28px;max-height:28px;}
.stdgridrow {height:30px;max-height:30px;vertical-align:baseline;}
.datagrid {max-width:60%;}

.ctr {text-align:center;}
.lft {text-align: left;}
.dgcellx {justify-content: flex-start; margin-left:-5px; left:0;}
.mud-button-label { justify-content: unset;}
.hvrbold:hover {font-weight:bold;cursor:pointer;}


/* custom */
.svg-menu {height:26px; width:26px; margin-left:2px; margin-right:5px;}

.spinner {z-index:3000; position:absolute;top:100px;left:300px;color: rebeccapurple;}
.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;}

.sq36 {width:36px;height:36px;}
.sq38 {width:36px;height:36px;}
.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;}

.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%);
}

.pagename {padding-left:1px; font-size:32px;}
.sidebar1 { width: 280px; }
.sidebar2 { width: 280px; }

/* vocab pages */
.entry {padding-left:7px;}
.entrystd {padding-left:7px; max-width:150px;}
.entry:active {background-color: yellow;}
.table {max-width:80%; font-size: large;}
.fulltext {display:block;}
.abbr {display:none;}

@media (max-width: 992px) {
    .sidebar {width:unset;}
    .sidebar2 {width:unset;}
    .wideview {display:none;}
    .entry {padding-left:5px;}
    .entryhdr {max-width:50%;}
    .entrycell {max-width:40%;}

    .table {max-width:95%; font-size: medium;}
    .fulltext {display:none;}
    .abbr {display:block;}
    .truncate-text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
}