body {
    background: url("/images/bg.jpg") no-repeat center center fixed;
    font-size: 12px;
    font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
header nav .container-fluid {
    padding-left: 0;
    padding-right: 0;
}
nav {
    height: 50px;
    max-height: 50px;
    padding: 10px 10px 0 10px;
    width: 100%;
    background-color: transparent;
    box-shadow: none;
}
    nav li a {
        color: white;
        text-align: center;
    }
    nav a:hover {
        color: #999999;
    }
.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
    padding-left: 5px;
    cursor: pointer;
    text-shadow: 2px 2px 2px #333333;
}
    .navbar-brand img {
        -webkit-filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.5) );
        filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.5));
    }
.h-95 {
    height: 95% !important;
}
.btn, span.btn {
    padding: 0.25em 0.5em;
}
.table td, .table th {
    padding: 0.4rem;
}
div.reflection {
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    transform: scaleX(-1);
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
}
.reflect {
    display: inline-block;
    vertical-align: top;
    width: 150px;
    height: 300px;
    background: linear-gradient(#000,#000) center/100% 1px no-repeat, /*a separation*/
    var(--img) top/100% 50% no-repeat;
    position: relative;
}
    .reflect::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        background: inherit;
        transform: scale(1,-1);
        -webkit-mask-image: -webkit-linear-gradient(transparent 25%, #ccc 50%);
        mask-image: linear-gradient(transparent 25%, #ccc 50%)
    }
.right {
    width: 300px;
    height: 150px;
    background-position: center,left;
    background-size: 1px 100%,50% 100%;
}
    .right:before {
        transform: scale(-1,1);
        -webkit-mask-image: -webkit-linear-gradient(left,transparent 25%, #ccc 50%);
        mask-image: linear-gradient(to left,transparent 25%, #ccc 50%)
    }
/* Login */
#dvlogin {
    position: relative;
    margin: 0 auto;
    width: 290px;
    text-align: center;
    background: rgba(255,255,255,0.3);
    box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.5);
    border-radius: 10px;
    z-index: 999;
}
.dvlgheader {
    min-height: 10px;
    width: 100%;
    border-radius: 10px 10px 0 0;
    background: rgba(153,101,21,0.85);
    margin-bottom: 10px;
    border-bottom: 1px solid #999;
}
.dvlgcontent {
    padding: 25px 15px 5px 15px;
}
    .dvlgcontent .input-group {
        margin-bottom: 1rem;
        z-index: 999;
    }
.dvlgfooter {
    min-height: 10px;
    width: 100%;
    border-radius: 0 0 10px 10px;
    background: rgba(153,101,21,0.85);
    border-top: 1px solid #999;
}
.dvlogo {
    -webkit-filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5) );
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
    position: absolute;
    top: -70px;
    left: calc(50% - 50px);
}
#Input_Email, #Input_Password {
    font-size: 1rem;
}
#forgot-password {
    padding-top: 0;
    font-size: 0.9em;
}
.site-header {
    display: inline-block;
    flex-grow: 1;
    font-size: 1.6em;
    font-weight: 400;
    padding-left: 5px;
    color: yellow;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.select2-search, .select2-search__field,
.select2-selection__choice, .select2-results__option, select2-selection,
.select2-selection.select2-selection--multiple, .select2-selection.select2-selection--single,
.select2-results__option.select2-results__option--selectable,
.select2-results__option.select2-results__option--selectable.select2-results__option--selected {
    text-transform: uppercase;
    font-size: 0.725rem !important;
    height: auto;
/*    min-height: 25px;
    height: calc(1.5em + .525rem + 2px);
*/}
.select2-container{
    min-width:200px;
}
.select2-results__option:empty {
    margin-top:8px;
    height: 25px;
}
/*.select2-container--bootstrap-5 .select2-dropdown .select2-search{
    padding:0.2rem 0.25rem;
}
*//* Sidebar */
.wrapper {
    display: block;
}

.overlay {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 998;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
    .overlay.active {
        display: block;
        opacity: 1;
    }
#dismiss {
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background: #7386D5;
    position: absolute;
    top: 15px;
    right: 10px;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
    #dismiss:hover {
        background: #fff;
        color: #7386D5;
    }
#sidebar {
    width: 250px;
    position: fixed;
    top: 0;
    left: -252px;
    height: 100vh;
    max-height: 100vh;
    z-index: 999;
    background: #7386D5;
    color: #fff;
    transition: all 0.3s;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    scrollbar-color: #666666 transparent;
    scrollbar-width: thin;
}
#sidebar::-webkit-scrollbar {
    width: 2px;
    height: 2px;
    background-color: transparent;
}
#sidebar::-webkit-scrollbar-track {
    background-color: transparent;
}
#sidebar::-webkit-scrollbar-thumb {
    background-color: #666666;
}
#sidebar.active {
        left: 0;
    }
    #sidebar .sidebar-header {
        display: inline-flex;
        width: 100%;
        padding: 15px;
        background: #6d7fcc;
        font-size: 1.4em;
        border-bottom: 1px solid #fff;
    }
.sidebar-header img {
    margin-right: 15px;
}
.sidebar-header .version {
    font-size: 0.6em;
    margin-bottom: 0;
}
#sidebar .components {
    padding: 0 0 10px 0;
    border-bottom: 1px solid #47748b;
    overflow-y:auto;
    margin-bottom:0.7rem;
}
#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
    color: #ccc;
}
    #sidebar ul li a:hover {
        color: #7386D5;
        background: #fff;
        text-decoration: none;
    }
#sidebar ul li i {
    padding-left: 3px;
    min-width: 40px;
    font-size: 1.3em;
}
#sidebar .btnsignout {
    color: #fff;
    width: 78%;
    margin: 10px 25px;
    padding: 10px;
    background: #1861ac;
}
    #sidebar .btnsignout:hover {
        color: #7386D5;
        background: #fff;
        text-decoration: none;
    }
#sidebar ul li.active > a,
a[aria-expanded="true"] {
    color: #fff;
    background: #6d7fcc;
}
a[data-bs-toggle="collapse"] {
    position: relative;
}
.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}
/* Dashboard */
.btn-toolbar button, .btn-toolbar .btn {
    font-size:1em;
    width:70px;
}
.btn-toolbar button:nth-child(4){
    width:100px;
}
.text-lightgreen {
    color: chartreuse;
}

.bg-lightgreen {
    background-color: greenyellow;
}

.dv-statistics {
    font-size: 1em;
    margin: 0 0 10px 0;
}
.st-title {
    display: inline-flex;
    flex-grow: 1;
    font-size: 1.5em;
    color: white;
    text-shadow: 2px 2px 2px #333333;
}

#refreshRate, #info_PageSize, #curPage1, #curPage2 {
    width: 50px;
    font-size: 0.75rem;
    margin: 0 8px;
}
#tblAPC1, #tblAPC2, #tblDAC1, #tblDAC2 {
    margin-bottom: 0;
}
    #tblAPC1 td, #tblAPC2 td, #tblDAC1 td, #tblDAC2 td {
        padding: 0.3em 0.1em;
    }
    #tblDAC1 tbody td:first-child, #tblDAC2 tbody td:first-child {
        padding-left: 5px;
        text-align: left;
    }
    #tblDAC1 tfoot th, #tblDAC2 tfoot th {
        background-color: #999999;
        color: white;
        padding: 0.3rem;
    }
#tblLog {
    width: 100%;
    font-size: 1em;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
}
    #tblLog tr {
        vertical-align: middle;
    }
    #tblLog td {
        font-size: 0.9em;
        padding: 0.3em 0.5em;
    }
.btn-log {
    color: maroon;
    border-radius: 2px;
    border: 1px solid white;
    padding: 0 3px;
}
.dvLog {
    height: 650px;
    max-height: 650px;
    overflow: auto;
    padding-left: 0;
    padding-right: 0;
    scrollbar-3dlight-color: #999999 transparent;
}
.info-link, .info-link:hover {
    cursor: pointer;
    font-weight: bold;
}
.LogPhoto {
    font-size: 1.3em;
    color: #198754;
    padding-left: 5px;
    padding-right: 5px;
    cursor: pointer;
}
.LogDetails {
    font-size: 1em;
    color: #198754;
    padding-left: 5px;
    padding-right: 5px;
    cursor: pointer;
}
.btn-status {
    border: 1px solid #cccccc;
}
#deviceList {
    width: 100%;
    padding: 5px 0;
}
    #deviceList li {
        height: fit-content;
        margin-bottom: 5px;
    }
.card {
    padding: 8px;
    margin-bottom: 8px;
}
.card-body {
    padding: 0.5rem 0.5rem;
}
.card-header {
    font-size: 1.2em;
    font-weight: bold;
    padding: 0.5rem 0.5rem;
}
.list-inline li {
    vertical-align: top;
}
#chartSummary, #chartCountdown {
    margin: 10px;
    padding: 10px;
    width: 95%;
    height: 400px;
}
.item-card {
    box-sizing: border-box;
    border: solid 1px gray;
    background: rgba(255,255,255,0.75);
    padding: 10px;
    text-align: center;
    color: white;
    margin: 5px;
    box-shadow: 2px 2px 2px #aaaaaa;
}
.item-title {
    font-size: 30px;
    font-weight: 400;
    color: maroon;
    text-shadow: 2px 2px 2px #aaaaaa;
}
.item-content {
    font-size: 20px;
    color: cadetblue;
    text-shadow: 2px 2px 2px #aaaaaa;
}
.bg-content-green {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 1.5em;
    color: white;
    background-color: rgba(255,255,255,0.7);
    background-image: linear-gradient(rgb(0, 176, 155), rgb(150, 201, 61));
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.bg-content-blue {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 1.5em;
    color: white;
    background-color: rgba(255,255,255,0.7);
    background-image: radial-gradient(248px, rgb(22, 217, 227) 0%, rgb(48, 199, 236) 47%, rgb(70, 174, 247) 100%);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.bg-content-purple {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 1.5em;
    color: white;
    background-color: rgba(255,255,255,0.7);
    background-image: linear-gradient(to top, rgb(161, 140, 209) 0%, rgb(251, 194, 235) 100%);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/* Search Panel */
.search-panel {
    display: inline-flex;
    padding: 2px 10px;
    border-left: 2px solid #ccc;
    float: right;
    flex-wrap: unset;
}
    .search-panel .input-group {
        flex-wrap: unset;
    }
#PI_SV {
    width: 100px;
    font-size: 1em;
    outline: none;
    transition: 0.3s ease-in-out;
    /*    min-height: calc(1.5em + .5rem + 2px); */
    height: calc(1.5em + .5rem + 2px);
}
    #PI_SV:focus {
        width: 150px;
        transition: 0.3s ease-in-out;
    }
#PI_SchO {
    font-size: 1em;
    outline: none;
    height: calc(1.5em + .5rem + 2px);
    width: min-content;
    flex: unset;
}
/* Action Panel */
#action-panel {
    width: calc(100% - 250px);
    position: fixed;
    top: 0;
    left: 100vw;
    height: 100vh;
    z-index: 999;
    background: transparent;
    color: #333;
    transition: all 0.5s;
    overflow: hidden;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
}
    #action-panel.active {
        left: 250px;
    }
#team-panel {
    width: 100%;
    top: 0;
    height: calc(100vh - 165px);
    z-index: 999;
    background: transparent;
    color: #333;
    transition: all 0.5s;
    overflow: hidden;
}
#main-panel {
    position: absolute;
    background: #fff;
    color: #333;
    left: 41px;
    top: 0;
    width: calc(100% - 40px);
    height: 100%;
}
#dismiss1 {
    float: left;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 2em;
    background-color: #F90;
    color: #ccc;
    border-radius: 25px 0 0 25px;
    position: relative;
    top: 10px;
    left: 0px;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    z-index: 999;
}
    #dismiss1:hover {
        color: #fff;
    }
/* Clock - Date and time */
div#clocksimple {
    font-family: "OpenSans-Light", sans-serif;
    display: inline-block;
    min-width: 100px;
    font-size: 1.6em;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    white-space: nowrap;
}
#clock {
    font-family: Poppins, sans-serif;
    display: inline-block;
    border-radius: 10px;
    padding: 10px 10px 15px 10px;
    background: rgba(0,0,0,0.3);
    vertical-align: middle;
}
    #clock #currentTime, #clock #currentDate {
        display: flex;
        color: #fff;
    }
        #clock #currentTime div, #clock #currentDate div {
            position: relative;
            margin: 0 5px;
            width: 100%;
            /*        -webkit-box-reflect: below 1px linear-gradient(rgba(0,0,0,0.2),#0004);*/
        }
            #clock #currentTime div span {
                position: relative;
                width: 100px;
                height: 80px;
                background: #2196f3;
                font-weight: 300;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 3em;
                z-index: 10;
                box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
                border-radius: 6px 6px 0 0;
            }
                #clock #currentTime div span:nth-child(2) {
                    height: 30px;
                    font-size: 0.7em;
                    letter-spacing: 0.2em;
                    font-weight: 500;
                    z-index: 9;
                    box-shadow: none;
                    background: #127fd6;
                    text-transform: uppercase;
                    border-radius: 0 0 6px 6px;
                }
            #clock #currentTime div:last-child span {
                background: #ff006a;
            }
                #clock #currentTime div:last-child span:nth-child(2) {
                    background: #ec0062;
                }
            #clock #currentDate div span {
                position: relative;
                display: inline-flex;
                margin-top: 5px;
                margin-bottom: 10px;
                padding: 0 10px 0 10px;
                font-size: 1.6em;
                text-align: center;
                height: 34px;
                justify-content: center;
                justify-items: center;
                vertical-align: middle;
                background: #fff;
                color: #999;
                box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
                border-radius: 6px;
            }
        #clock #currentDate #curDow {
            margin-right: 10px;
            width: 140px;
            line-height: 1.8em;
            vertical-align: middle;
        }
        #clock #currentDate #curDate {
            width: 170px;
            color: #333;
            line-height: 1.8em;
            vertical-align: middle;
        }
/* page header */
#fmHA .row {
    display: flex;
    /*   flex-wrap:unset; */
}
.pg-header {
    display: flex;
    width: 100%;
    margin: 5px 0 5px 0;
    padding: 5px;
    color: #fff;
    vertical-align: middle;
    border-bottom: 1px solid #aaa;
    border-top: 1px solid #aaa;
}
.module-header {
    display: inline-flex;
    flex-grow: 1;
    font-size: 1.6em;
    font-weight: 400;
    padding-left: 5px;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
    .module-header i {
        padding: 5px 10px 0 0;
        height: auto;
    }
.action-list {
    padding: 2px 5px 0 10px;
    border-left: 2px solid #ccc;
}
    .action-list i {
        padding-right: 5px;
    }
/* View type */
.view-mode {
    display: inline-flex;
    list-style: none;
    float: right;
    margin: 0 auto;
    padding-left: 5px;
    border-left: 2px solid #ccc;
}
    .view-mode li {
        margin: 0;
        padding: 0;
    }
    .view-mode button:hover {
        color: #fff;
    }
    .view-mode .active button {
        color: #fff;
    }
    .view-mode button {
        border: none;
        padding: 0 5px 0 5px;
        background-color: transparent;
        font-size: 1.7em;
        color: #aaa;
        outline: none;
    }
#btnSave {
    padding: 2px 3px;
    line-height: 1em;
    font-size: 23px;
    color: #F90;
    border-radius: 5px;
    vertical-align: middle;
    outline: none;
}
    #btnSave:hover {
        color: #999;
        cursor: pointer;
    }
.tbl-log th, .tbl-log td {
    padding: 0.3rem;
}
/* data content */
#infoDetails {
    background: url("/images/bg.png") no-repeat center center fixed;
    padding: 0 5px;
}
.modal-header {
    padding: 0.8rem 1rem 0.5rem 1rem;
}
/*.modal-body {
    padding: 0;
} */
.mb-adjust {
    padding: 0;
}
.data-content {
    display: flex;
    background: rgba(255,255,255,0.5);
    border-radius: 5px;
    width: 100%;
    height: calc(100vh - 122px);
    max-height: calc(100vh - 122px);
    padding: 10px;
    margin-top: 10px;
    overflow: hidden;
}
.data-content-report {
    background: rgba(255,255,255,0.5);
    border-radius: 5px;
    width: 100%;
    padding: 10px;
    margin-bottom: 8px;
    box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.5);
}
.data-content-report label {
    font-size:1em;
    min-width:150px;
}
.data-content-dashboard {
    display: flex;
    background: rgba(255,255,255,0.5);
    border-radius: 5px;
    width: 100%;
    height: calc(100vh - 177px);
    max-height: calc(100vh - 177px);
    padding: 10px;
    margin-top: 10px;
    overflow: hidden;
}
    .data-content-dashboard .col-md-6 {
        padding-left: 0;
        padding-right: 0;
    }
.content-wrapper {
    width: 100%;
    padding:5px;
    overflow-y: auto;
    scrollbar-color: #666666 transparent;
    scrollbar-width: thin;
}
    .content-wrapper::-webkit-scrollbar {
        width: 5px;
        height: 5px;
        background-color: transparent;
    }
    .content-wrapper::-webkit-scrollbar-track {
        background-color: transparent;
    }
    .content-wrapper::-webkit-scrollbar-thumb {
        background-color: #666666;
    }
.data-content1 {
    background: rgba(255,255,255,0.5);
    border-radius: 5px;
    width: 100%;
    /*    height: calc(100vh - 65px);
    min-height: calc(100vh - 65x);
    max-height: calc(100vh - 65px); */
    padding: 10px;
    margin: 5px 8px 8px 0px;
    box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.5);
}
.content-wrapper1 {
    width: 100%;
    padding: 5px;
    overflow-y: auto;
    scrollbar-color: #999999 transparent;
    scrollbar-width: thin;
}
    .content-wrapper1::-webkit-scrollbar {
        width: 5px;
        height: 5px;
        background-color: transparent;
    }
    .content-wrapper1::-webkit-scrollbar-track {
        background-color: transparent;
    }
    .content-wrapper1::-webkit-scrollbar-thumb {
        background-color: #999999;
    }
.content-title {
    display: block;
    padding: 4px;
    background: maroon;
    color: #fff;
    width: 100%;
    border-radius: 5px 5px 0 0;
    font-size: 1.2em;
    font-weight: 400;
    text-align: center;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.content-title1 {
    display: block;
    padding: 5px;
    background: maroon;
    color: #fff;
    width: 100%;
    border-radius: 5px 5px 0 0;
    font-size: 1.3em;
    font-weight: 400;
    text-align: center;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.module-title {
    display: inline-block;
    font-size: 2em;
    font-weight: 100;
    padding-top: 5px;
    padding-left: 5px;
    color: #fff;
    width: 100%;
    text-transform: uppercase;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.modal-body .row {
    margin-left: 0;
    margin-right: 0;
}
.form-control {
    padding: 0.2em 0.4em;
    height: calc(1.5em + .525rem + 2px);
    font-size: 1em;
}
#fmReport .row {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 5px;
}
.form-floating{
    margin-bottom:10px;
}
.form-check-input {
    font-size: 1.2em;
    margin-top: 2px;
    margin-right: 5px;
}
.form-check-label {
    line-height: 1.2em;
}
.form-group {
    margin-bottom: 0.6em;
}
div.row label {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}
input.form-group {
    padding: 0.2em 0.4em;
    height: calc(1.5em + .525rem + 2px);
}
select.form-select, select.form-select-sm {
    background-position: right 0.3em center;
    padding: 0.2em 2em 0.2em 0.4em;
    height: calc(1.5em + .525rem + 2px);
    font-size: 1em;
    border-radius: 0.375rem;
}
    select.form-select[multiple], select.form-select-sm[multiple] {
        background-position: right 0.3em center;
        padding: 0.2em 1.3em 0.2em 0.4em;
        height: calc(4.5em + .525rem + 2px);
        font-size: 1em;
        border-radius: 0.375rem;
    }
textarea.form-control {
    height: calc(4.5em + .525rem + 2px);
}
#Pending_Reason, #Postpone_Reason, #Extend_Reason{
    height:15em;
}
.sub-menu-wrapper {
    display: block;
    margin: 10px 0 0 0;
    padding: 10px 5px;
    background: rgba(0,0,0,0.5);
    border-radius: 5px;
}
.sub-menu {
    display: inline-flex;
    list-style: none;
    margin: 0 auto;
    padding-inline-start: 0;
}
    .sub-menu button {
        border: none;
        margin: 0 5px;
        padding: 5px 10px;
        background-color: #7386d5;
        font-size: 1.2em;
        font-weight: 400;
        border-radius: 3px;
        min-width: 110px;
        text-align: center;
        color: #ccc;
        outline: none;
    }
    .sub-menu .active button {
        color: #fff;
        background: #6d7fff;
    }
    .sub-menu button i {
        padding-right: 6px;
    }
    .sub-menu button:hover {
        color: #6d7fff;
        background: #fff;
    }
#main-table thead th, #main-table1 thead th {
    position: sticky;
    top: 0;
}
#main-table tbody td {
    font-size: 0.95em;
    cursor: pointer;
}
#main-table1 button {
    font-size: 1em;
}
#main-table1 .form-group {
    margin-bottom: 0;
}
#main-table1 thead tr:nth-child(2) th {
    background: rgba(192,192,192,0.5);
    vertical-align: top;
}
#main-table1 span.field-validation-error {
    display: block;
}
#dvAddNewRow {
    width: 100%;
    margin-top: 5px;
    margin-left: 10px;
}
    #dvAddNewRow input {
        margin: 0 8px;
    }
/* MTile Card */
.card-img {
    border-right: 1px solid #333;
    width: 100px;
    height: 133px;
}
.card-adjust1 {
    font-size: 0.9em;
    min-width: 380px;
    max-width: 380px;
    min-height: 145px;
    padding: 5px;
    margin-bottom: 10px;
    margin-right: 5px;
    cursor: pointer;
}
/*  XTile Card */
.card-adjust2 {
    font-size: 0.9em;
    min-width: 380px;
    max-width: 380px;
    min-height: 145px;
    padding: 5px;
    margin-bottom: 10px;
    margin-right: 5px;
    cursor: pointer;
}
.card-adjust3 {
    font-size: 0.9em;
    min-width: 300px;
    max-width: 300px;
    min-height: 60px;
    padding: 5px;
    margin-bottom: 10px;
    margin-right: 5px;
    cursor: pointer;
}
#btnAddNew, #btnAddRequest {
    height: calc(1.5em + .5rem + 2px);
    font-size: 12px;
}
/* Navigation */
.col.navigation {
    width: unset;
}
/* Pagination */
.pagination {
    margin: 2px 0 0 5px;
    padding-left: 10px;
    border-left: 2px solid #ccc;
    border-radius: 0;
    height: calc(1.5em + .5rem + 2px);
    width: unset;
}
.page-link {
    padding: 3px 6px 1px 6px;
    white-space: nowrap;
    font-size: 0.9rem;
}
/* styles for validation helpers */
.field-validation-error {
    color: #e80c4d;
    font-weight: bold;
}
.field-validation-valid {
    display: none;
}
input[type="text"].input-validation-error, input[type="password"].input-validation-error {
    border: 1px solid #e80c4d;
}
.validation-summary-errors {
    width: 100%;
    color: #e80c4d;
    font-weight: bold;
    font-size: 1em;
}
.validation-summary-valid {
    display: none;
}
.field-validation-error {
    color: #ff0000;
}
.field-validation-valid {
    display: none;
}
.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}
.validation-summary-errors {
    background: url("/Images/error-ex.png") no-repeat;
    min-height: 65px;
    background-position: 10px 35%;
    border: 1px solid #bb0000;
    border-radius: 5px;
    margin: 5px 0 10px 0;
    background-color: #ffeeee;
    font-weight: bold;
    color: #ff0000;
    text-align: left;
}
    .validation-summary-errors ul {
        padding-top: 5px;
        padding-left: 75px;
        list-style-type: square;
    }
.validation-summary-valid {
    display: none;
}

/* Validation summary error */
.validation-summary-errors {
    display: inline-flex;
    color: maroon;
    text-indent: 0;
}
    .validation-summary-errors li {
        list-style: none;
        text-indent: 0;
    }
.input-validation-error {
    background-color: #f7e4e1;
}
.field-validation-error {
    font-size: 1em;
    color: maroon;
    font-weight: bold;
}
.kioskpin {
    color: white;
    padding: 10px;
    font-size: 1.5em;
    border: 1px solid #999999;
    background-color: dodgerblue;
    margin-top: 5px;
    border-radius: 6px;
}
/* Provide sufficient contrast against white background */
a {
    color: #0366d6;
    text-decoration: none;
}
@media print, screen and (max-width: 576px) {
    .data-content {
        height: calc(100vh - 200px);
        max-height: calc(100vh - 200px);
    }
    #action-panel {
        width: 100%;
    }
        #action-panel.active {
            left: 0;
        }
}