/* Fixed sidenav, full height */
.sidenav {
    height: 100%;
    width: 140px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    padding-top: 25px;
    padding-right: 3px;
    padding-left: 2px;
    /*padding-bottom: 40px;*/
}

#BtnLogout {
    position: fixed;
    top: 0;
    background: #004d99;
    border: 3px solid #111;
    border-bottom: none;
    width: 140px;
    height: 25px;
    z-index: 2;
    cursor: pointer;
    color: white;
    text-align: center;
    font-size: 15px;
}

/* Style the sidenav links and the dropdown button */
.sidenav a, .NavBtn, .dropdown-btn {
    padding: 6px 2px 6px 4px; // top, right, bottom, left
    text-decoration: none;
    font-size: 16px;
    color: #818181;
    display: block;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    outline: none;
    margin-bottom: 2px;
}

.NavPage {
    padding-left: 20px;
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
    color: #f1f1f1;
}

/* Main content */
.main {
    margin-left: 200px; /* Same as the width of the sidenav */
    font-size: 20px; /* Increased text to enable scrolling */
    padding: 0px 10px;
}

/* Add an active class to the active dropdown button */
.activeDivision {
    background-color: midnightblue;
    color: white;
}

.activePage {
    background-color: darkslateblue;
    color: white;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
    display: none;
    background-color: #262626;
    padding-left: 8px;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
    float: right;
    padding-right: 8px;
}

#MainBlock {
    margin-left: 140px;
    margin-top: 25px;
    width: available;
}

#TopBar {
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;
    overflow-x: hidden;
    background: #004d99;
    color: white;
    text-align: center;
    width: 100%;
    height: 25px;
    /*margin-left: 140px;*/
}

#PageTitle {
    width: 50%;
    float: left;
    text-align: left;
    padding-left: 160px;
}

#PageActions {
    width: 50%;
    float: left;
    text-align: right;
    padding-right: 20px;
}

#PageActions button {
    height: 20px;
    font-size: 14px;
    color: #004d99;
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: center;
    line-height: 14px;
    vertical-align: middle;
    margin-left: 5px;
}

/* Some media queries for responsiveness */
@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

    .sidenav a {
        font-size: 18px;
    }
}


.form-control {
    padding: 5px;
}

.RowSelected {
    background: #555555;
    color: white;
    background-color: #555555;
}

.form_half {
    width: 50%;
    float: left;
    padding-right: 10px;
}

.form_third {
    width: 33%;
    float: left;
    padding-right: 10px;
}

#ModalInst {
    font-weight: bold;
    color: black;
}

#ModalInst .form-control {
    font-weight: normal;
    color: black;
}

a {
    cursor: pointer;
}

.btna {
    padding: 8px;
}

.cell {
    float: left;
}

.cell50 {
    width: 50%;
}

input {
    height: 30px;
}

select {
    height: 30px;
}

button {
    height: 30px;
}


#InDeviceID {
    width: 200px;
}

#DivMappingHeader {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 20px;
    width: 100%;
    padding: 0 auto;
    text-align: center;
}

#MappingTable {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
}

#MappingTable td {
    padding: 10px;
    border: 2px solid black;
}

#Block_product_mapping .btn, #Block_product_mapping .form-control, #Block_product_mapping td, #Block_product_mapping input, #Block_product_mapping select {
    font-weight: bold;
}

#Block_service_index tr {
    cursor: pointer;
}


#Block_product_renew .RowExpired {
    color: red;
}

#Block_product_renew .btn-danger, #Block_product_renew .btn-success, #Block_product_renew .btn-warning {
    padding-left: 0;
    padding-right: 0;
}

#Block_product_renew table {
    font-size: 15px;
    font-weight: normal;
}

#Block_product_renew td {
    white-space: nowrap;
}


#DivOverview {
    /*background: #004d99;*/
    background: #cccccc;
    /*padding: 50px;*/
    height: 100%;
}

#OverviewLeft {
    float: left;
    width: 60%;
    /*border-right: 2px solid #004d99;*/
    padding: 30px;
}

#OverviewRight {
    float: left;
    width: 40%;
    padding: 30px;
}

.OverviewHeader {
    color: #004d99;
    font-weight: bold;
    font-size: 25px;
    text-align: center;
}

#DivOverview table {
    width: 100%;
    border: 1px solid #004d99;
    padding: 5px;
}
#DivOverview td {
    padding: 5px;
    text-align: center;
    color: #004d99;
    border: 2px solid #004d99;
    font-weight: bold;
}

body {
    background: #cccccc;
}

#TdNoData {
    text-align: center;
    width: 100%;
    padding: 0;
    color: #aaa;
    font-size: 40px;
    /*border: 0px;*/

}

#ImgNoData {
    padding: 30px;
    width: 40%;
    max-height: calc(100vh - 50px);
    /*height: 100%;*/
    /*height: 200px;*/
}

.sidenav::-webkit-scrollbar {
    width: 0px;
}


/*::-webkit-scrollbar-button {*/
/*    background: #ccc*/
/*}*/
/*::-webkit-scrollbar-track-piece {*/
/*    background: #888*/
/*}*/
/*::-webkit-scrollbar-thumb {*/
/*    background: #eee*/
/*}*/

#outer {
    /*display: flex;*/
    /*flex-flow: column;*/
    /*width: 100%;*/
    /*height: 100vh;*/
    /*border: 10px solid black;*/
}

#inner_fixed {
    height: 100px;
    background-color: grey;
}

.inner_remaining {
    /*background-color: #0000ff;*/
    /*flex-grow : 1;*/
}

.radio-unselected {
    /*height: 40px;*/
    background: white;
    border: 1px solid #0275d8;
    color: black;
    margin: 0;
    float: left;
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    box-sizing: border-box;
    /*font-weight: bold;*/
}

.radio-selected {
    /*height: 40px;*/
    background: #0275d8;
    color: white;
    border: 1px solid #0275d8;
    margin: 0;
    float: left;
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    box-sizing: border-box;
    /*font-weight: bold;*/
}

.radio-unselected:hover {
    background: #0275d830;
    /*color: #0275d8;*/
    /*font-weight: bold;*/
}


#WrapperVoucherType {
    border: 1px solid #0275d8;
    border-radius: 3px;
    width: fit-content;
    text-align: center;
}

.datepicker{ z-index:99999 !important; }

#VoucherDate {
    /*position: absolute;*/
    /*top: 50%;*/
    /*transform: translateY(-50%);*/
    /*width: fit-content;*/
    /*max-width: 120px;*/
    font-weight: bold;
}

.select2-container--default .select2-selection--single {
    height: 38px !important;
    padding: 5px 5px;
    font-size: 18px;
    line-height: 38px;
    border-radius: 6px;
    vertical-align: center;
}

#DivWrapSalesPerson .select2 {
    width: 100% !important;
}

.listviewCard {
    border: 1px solid lightgrey;
    margin: 5px;
    padding: 5px;
    overflow: hidden;
    color: white;
    /*height: 40px;*/
}

#CurrentSelectedNum {
    font-width: bold;
    background: dodgerblue;
    color: white;
    padding: 8px;
    font-size: 18px;
    border-bottom: 2px solid gray;
}

.smsEntry {
    padding: 8px;
}

.smsIn {
    background: lightgreen;
}

.smsOut {
    background: lightpink;
    text-align: right;
}

.smsFooter {
    font-size: 12px;
    color: gray;
}

.numListEntry {
    border: 1px solid grey;
    margin: 2px;
}

.healthEntry {
    margin: 8px;
    padding: 8px;
    color: white;
}

.backRed {
    background: red;
}

.backGreen {
    background: green;
}