/***** Prepare to move to default css  ****/
.height-fit {
    height: fit-content;
}

/* Css specify each page */
body.login-bg {
    animation: visiblefade 0.8s;
}

.login-bg {
    background-image: url('../../images/Background/login.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

.login-logo-container {
    height: 90px;
    text-align: center;
    margin: 20px 0px;
    animation: bounce1 0.8s;
    -webkit-appearance: none;
}


.login-logo {
    height: inherit;
    width: auto;
}

.login-card-container {
    height: auto;
    animation: bounce 0.8s;
    -webkit-appearance: none;
}

.login-card {
    background: #ffffffa3 !important;
    border-radius: 1rem !important;
}

.input-field-container {
    padding: 0px 20px;
    margin-bottom: 30px;
    animation: bounce2 0.8s;
    -webkit-appearance: none;
}

.input-group {
    margin-bottom: 1rem !important;
}

.login-input input {
    height: 45px !important;
    min-height: 45px;
}

.login-btn {
    background: #068261;
    border: none;
    font-size: 18px !important;
    color: #fff;
}

    .login-btn:hover, .login-btn:active {
        outline: none !important;
    }

.login-forgot-btn {
    color: #666 !important;
}

.quota_status_bar {
    font-size: 12px;
    background: #dadfe2;
}
/* Home */
.tank-bg {
    display: table-cell;
    vertical-align: middle;
    border: 6px solid #fff;
    background: #fff;
    border-bottom: 7px solid #fff;
}

.tank-modal {
    max-width: 910px !important;
}

.tank-container {
    height: 170px;
    width: 246px;
    background-color: #ebedf1;
    vertical-align: middle;
    margin: auto;
}

.tank-container-group-header {
    text-align: left;
    background: #2f353a; /*#d2d8de;*/
    padding: 10px 15px;
    color: #fff; /*#444;*/
    margin: 0px 10px 18px 10px;
}

.tank-site-owner {
    font-size: 14px;
    padding: 8px 10px;
    /* text-overflow: ellipsis; */
    width: 246px;
    line-height: 1;
    white-space: normal;
    /* overflow: hidden; */
    text-align: left;
    background-color: #d2d8de;
}

.tank-img {
    width: inherit;
    height: inherit;
    position: absolute;
    z-index: 1;
    transform: translate(-50%, 0%);
}

.tank-oil-level-container {
    position: relative;
    top: 26px;
    left: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 46px);
    background-color: #fff;
}

.tank-oil-level {
    height: 0%; /* Dynamic */
    position: absolute;
    bottom: 0px;
    width: 100%;
    max-height: 100%;
    animation-duration: 1s;
    animation-name: lineInserted;
    transition: height 1s;
}

.tank-oil-normal {
    background-color: #479483;
}

.tank-oil-warning {
    background-color: #ff7b07;
}

.tank-oil-empty {
    background-color: #e2192c;
}

@keyframes lineInserted {
    from {
        height: 0;
    }

    to {
        height: 0%; /* your line height here */
    }
}

.tank-oil-label-container {
    width: 246px;
    margin: auto;
    color: #fff;
    font-size: 16px;
    display: table;
}

    .tank-oil-label-container div {
        display: table-cell;
        vertical-align: middle;
        line-height: 2;
        text-align: center;
    }
/* fuel : มือจ่าย */
.fuel-detail-container {
    margin: 0px;
    margin-bottom: 20px !important;
}

.fuel-detail {
    padding: 0px 10px;
}

    /*.fuel-detail.fuel-detail-allcmd {
        padding: 0px;
        padding-right: 15px !important;
    }

    .fuel-detail.fuel-detail-allfill, .fuel-detail.fuel-detail-remainAmt {
        padding: 0px 15px;
    }

    .fuel-detail.fuel-detail-remainAllAmt {
        padding: 0px;
        padding-left: 15px !important;
    }*/

    .fuel-detail .fuel-detail-content {
        margin: 0px;
    }

        .fuel-detail .fuel-detail-content.fillingFuelTimes {
            background-color: #d8e4ea;
        }

        .fuel-detail .fuel-detail-content.sumDJournalVolumn {
            background-color: #cddee6;
        }

        .fuel-detail .fuel-detail-content.sumRemainingQuotaAmt {
            background-color: #cde4e2;
        }

        .fuel-detail .fuel-detail-content.sumRealRemainingQuotaAmt {
            background-color: #c2e1de;
        }

    .fuel-detail .fuel-detail-label {
        margin-top: 10px;
        text-align: center;
        font-size: 14px;
        color: #484c4b;
    }

    .fuel-detail .fuel-detail-no {
        margin-bottom: 5px;
        text-align: center;
        font-size: 25px;
        font-weight: bold;
    }

        .fuel-detail .fuel-detail-no.normally {
            color: #484c4b;
        }

        .fuel-detail .fuel-detail-no.sumary.tank-oil-normal {
            color: green;
            background-color: transparent;
        }

        .fuel-detail .fuel-detail-no.sumary.tank-oil-warning {
            color: yellow;
            background-color: transparent;
        }

        .fuel-detail .fuel-detail-no.sumary.tank-oil-empty {
            color: #F44336;
            background-color: transparent;
        }

.fuel-monitor-container {
    margin: 0px;
    margin-bottom: 20px !important;
    /*background: #fff;
    padding: 0px 10px;*/
}

.fuel-monitor-group-header {
    background: #2f353a; /*#d2d8de;*/
    padding: 10px 15px;
    color: #fff; /*#444;*/
    margin: 0px 10px 18px 10px;
}

.fuel-monitor {
    display: inline-flex;
    padding: 0px 10px;
    position: relative;
}

    .fuel-monitor .fuel-monitor-content {
        padding: 0px 15px;
        margin: 0px;
    }

        .fuel-monitor .fuel-monitor-content .fuel-monitor-money {
            margin-bottom: 10px;
            background-color: #fff;
        }

        .fuel-monitor .fuel-monitor-content .fuel-monitor-littre {
            margin-bottom: 10px;
            background-color: #fff;
        }



    /* หน้าจ่ายพร้อมใช้งาน */
    .fuel-monitor .fuel-ready {
        background-color: #6dcaba;
    }

        .fuel-monitor .fuel-ready .fuel-monitor-img {
            background-image: url(/images/fuel_ready.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: bottom;
            position: absolute;
            left: 15px;
            bottom: 0;
            width: auto;
            height: 95%;
        }

        .fuel-monitor .fuel-ready .fuel-monitor-content {
            padding: 5px 10px 5px 40px;
        }

    /* หน้าจ่ายกำลังเติม */
    .fuel-monitor .fuel-filling {
        background-color: #ffa436;
    }

        .fuel-monitor .fuel-filling .fuel-monitor-img {
            background-image: url(/images/fuel_filling.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: left;
            position: absolute;
            left: 15px;
            bottom: 0;
            height: 95%;
            z-index: 5;
        }

        .fuel-monitor .fuel-filling .fuel-monitor-content {
            padding: 5px 10px 5px 45px;
        }

    /* หน้าจ่ายไม่พร้อมใช้งาน */
    .fuel-monitor .fuel-error {
        background-color: #f5616f;
    }

        .fuel-monitor .fuel-error .fuel-monitor-img {
            background-image: url(/images/fuel_error.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: bottom;
            position: absolute;
            left: 15px;
            bottom: 0;
            width: auto;
            height: 95%;
        }

        .fuel-monitor .fuel-error .fuel-monitor-content {
            padding: 5px 10px 5px 40px;
        }

            .fuel-monitor .fuel-error .fuel-monitor-content .fuel-monitor-money,
            .fuel-monitor .fuel-error .fuel-monitor-content .fuel-monitor-littre {
                background-color: rgba(255,255,255,0.9);
                color: #dc3545;
            }

    /* หน้าจ่ายยังไม่ถูกเปิดให้ใช้งาน */
    .fuel-monitor .fuel-disable {
        background-color: #e4e7ea;
    }

        .fuel-monitor .fuel-disable .fuel-monitor-img {
            background-image: url(/images/fuel_disable.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: bottom;
            position: absolute;
            left: 15px;
            bottom: 0;
            width: auto;
            height: 95%;
        }

        .fuel-monitor .fuel-disable .fuel-monitor-content {
            padding: 5px 10px 5px 40px;
        }

            .fuel-monitor .fuel-disable .fuel-monitor-content .fuel-monitor-money,
            .fuel-monitor .fuel-disable .fuel-monitor-content .fuel-monitor-littre {
                background-color: rgba(255,255,255,0.9);
                color: #a8a9ab;
            }

.fuel-monitor-money {
    font-family: Digital7, serif, Sans-serif, cursive, fantasy, monospace;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 900;
    text-align: right;
    padding: 0px 5px;
    background-color: #fff;
    line-height: 2;
    height: 35px;
}

.fuel-monitor-unit {
    display: table;
    margin-bottom: 10px;
    font-size: 18px;
    text-align: right;
    height: 35px;
    padding-top: 5px !important;
}

    .fuel-monitor-unit span {
        display: table-cell;
        vertical-align: middle;
    }

.fuel-monitor-littre {
    font-family: Digital7, serif, Sans-serif, cursive, fantasy, monospace;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 900;
    text-align: right;
    padding: 0px 5px;
    background-color: #fff;
    line-height: 2;
    height: 35px;
}

.command-status-reserve {
    width: 20px;
    height: 20px;
    background: #b6b6b6;
    border-radius: 50%;
    margin: auto;
}

.command-status-filling {
    width: 20px;
    height: 20px;
    background: #ffbc00;
    border-radius: 50%;
    margin: auto;
    text-decoration: blink;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.7s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate;
}

@-webkit-keyframes blinker {
    from {
        opacity: 1.0;
    }

    to {
        opacity: 0.0;
    }
}



/* Add command */
.addcmd-card-padding {
    padding: 0px 10%;
}

td.sorting_1 {
    display: inline-flex;
    width: -webkit-fill-available;
}

    td.sorting_1 .row {
        display: table;
        margin: auto;
    }

        td.sorting_1 .row .addcmd-station-toggle {
            display: table-cell;
        }

            td.sorting_1 .row .addcmd-station-toggle label {
                margin: auto;
                vertical-align: middle;
            }

.addcmd-station-toggle .fa {
    margin: 7px 5px !important;
}

.addcmd-station-toggle .btn-tbl-end {
    margin-right: 5px !important;
}

.addcmd-station-toggle label {
    margin-right: 5px !important;
}

.addcmd-start-date-txt {
    padding: 5px 20px 5px 0px !important;
    font-size: 12px;
    text-align: right;
}

.addcmd-start-date-input {
    padding: 0px 20px 0px 0px !important;
}

.addcmd-end-date-txt {
    padding: 5px 0px !important;
    font-size: 12px;
    text-align: left;
}

.addcmd-md-start-date-txt, .addcmd-md-end-date-txt, .addcmd-md-toggle-start {
    padding: 0px;
    display: none;
}

.addcmd-unit {
    padding: 0px 20px;
}

/* Add car page */
.addcar-search-driver-modal {
    z-index: 1052;
    max-width: 1000px;
    /*margin: 2rem 15px;*/
}

.mngdriver-add-driver-modal {
    max-width: 800px !important;
}

@keyframes visiblefade {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes bounce {
    0% {
        transform: translateY(-250px);
        opacity: 0;
    }
}

@keyframes bounce1 {
    0% {
        opacity: 0;
    }

    40% {
        transform: translateY(-100px);
        opacity: 0;
    }
}

@keyframes bounce2 {
    0% {
        opacity: 0;
    }

    70% {
        transform: translateY(-20px);
        opacity: 0;
    }
}

/*ปุ่ม End*/
.btn-tbl-end {
    height: 25px;
    font-size: 14px;
    padding: 2px 10px;
    color: #fff;
    background-color: #ff4700;
    border-color: #ff4700;
}

table.dataTable thead th, table.dataTable thead td {
    border-bottom: 1px solid #999;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: 1px solid #999;
}

.dataTables_length {
    display: none;
}

.dataTables_scroll {
    border: 5px solid #fff;
}

@media only screen and (min-width: 100px) and (max-width: 320px) {
    .fuel-detail-label {
        font-size: 10px !important;
        padding: 0px 3px !important;
    }

        .fuel-detail-label .fa {
            font-size: 0.9em !important;
            margin-right: 0px;
        }

    .fuel-detail .fuel-detail-no {
        font-size: 15px;
    }

    .tank-img {
        transform: translate(0%, 0%);
    }
}

@media only screen and (min-width: 321px) and (max-width: 450px) {

    .login-logo-container {
        height: 75px;
    }

    .addcmd-amount-container {
        padding-left: 20px !important;
    }

    .addcmd-card-padding {
        padding: 0px 5%;
    }

    .addcmd-start-date-input {
        padding: 0px !important;
    }

    .addcmd-station-name {
        padding-left: 35px !important;
    }

    .addcmd-station-toggle {
        padding: 0px 20px !important;
    }

    .paddingSide20 {
        padding: 0px 20px !important;
    }

    .tank-img {
        transform: translate(0%, 0%);
    }

    .fuel-detail-label {
        font-size: 11px !important;
        padding: 0px 3px !important;
    }

        .fuel-detail-label .fa {
            font-size: 0.9em !important;
            margin-right: 0px;
        }
}

@media only screen and (min-width: 451px) and (max-width: 575px) {
    .tank-img {
        transform: translate(0%, 0%);
    }

    [id^=tank_] {
        margin: auto !important;
        margin-bottom: 20px !important;
    }

    .dataTables_wrapper {
        padding: 10px 10px 0px 10px;
        background: #fff;
        margin-bottom: 0px !important;
    }

    .fuel-detail .fuel-detail-label {
        font-size: 12px;
    }

    .fuel-detail .fuel-detail-no {
        font-size: 19px;
    }
}

@media only screen and (max-width: 767px) {
    .paddingSide20 {
        padding: 0px 20px !important;
    }

    .addcmd-command {
        padding: 20px 10%;
    }

    .addcmd-amount-container {
        padding-left: 20px !important;
    }

    .addcmd-start-date-txt, .addcmd-end-date-txt, .addcmd-toggle-start {
        display: none;
    }

    .addcmd-md-start-date-txt, .addcmd-md-end-date-txt {
        font-size: 12px;
        display: block;
    }

    .addcmd-md-toggle-start {
        display: block;
        min-height: 25px;
        height: 25px;
    }

    .addcmd-tgl-amount-fill {
        padding: 0px !important;
    }

    .addcmd-amount-fill-txt, .addcmd-amount-fill-unit {
        font-size: 12px;
    }

    .addcmd-station-name {
        padding-left: 30px !important;
    }

    .addcmd-start-date-input {
        padding: 0px !important;
    }

    .addcar-search-driver-modal {
        margin: 2rem 15px;
    }

    .fuel-detail-container, .fuel-monitor-container {
        margin-bottom: 0px !important;
    }

    .fuel-detail, .fuel-monitor {
        margin-bottom: 20px !important;
    }
}

@media only screen and (min-width: 768px) {
    .login-card-container > div > div.col-md-5 {
        flex: 0 0 66.6667%;
        max-width: 66.6667% !important;
    }

    .login-card-container {
        /*height: 370px;*/
    }

    .addcmd-amount-container {
        padding-left: 20px !important;
    }

    .addcmd-station-name {
        padding-left: 25px !important;
    }

    .addcmd-amount-fill-txt, .addcmd-amount-fill-unit {
        font-size: 12px;
    }

    .fuel-detail-container, .fuel-monitor-container {
        margin-bottom: 0px !important;
    }

    .fuel-detail, .fuel-monitor {
        margin-bottom: 20px !important;
    }
}

@media only screen and (max-width: 992px) {
    .addcar-search-driver-modal, .mngdriver-add-driver-modal {
        margin: 2rem 15px;
    }
}

@media only screen and (min-width: 992px) {
    .login-card-container > div > div.col-md-5 {
        max-width: 41.666667% !important;
    }

    .login-card-container {
        /*height: auto;*/
    }

    .addcmd-amount-fill-txt, .addcmd-amount-fill-unit {
        font-size: 13px;
    }
}

@media screen and (min-width: 992px) and (max-width: 1243px) {
    #pagetitle {
        margin-bottom: 20px !important;
    }

    .fuel-detail-container {
        margin: 0px;
        margin-bottom: 0px !important;
    }

        .fuel-detail-container .fuel-detail {
            margin-bottom: 20px !important;
        }

    .fuel-monitor-container {
        margin: 0px;
        margin-bottom: 0px !important;
    }

    .fuel-detail {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .fuel-monitor {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 20px !important;
    }

    .tank-bg {
        display: block;
    }
}


/*** Custom Checkbox **/
.checkbox label:after,
.radio label:after {
    content: '';
    display: table;
    clear: both;
}

.checkbox {
    margin: auto !important;
    vertical-align: middle !important;
    display: inline-grid !important;
    text-align: center !important;
}

    .checkbox label {
        margin: auto !important;
        margin-bottom: 0px !important;
    }

    .checkbox .cr {
        position: relative;
        display: inline-block;
        border: 1px solid #a9a9a9;
        border-radius: .25em;
        width: 1.3em;
        height: 1.3em;
        float: left;
    }

.radio .cr {
    position: relative;
    display: inline-block;
    border: 1px solid #a9a9a9;
    border-radius: 50%;
    width: 1.3em;
    height: 1.3em;
    float: left;
    margin-right: .5em;
}


    .checkbox .cr .cr-icon,
    .radio .cr .cr-icon {
        position: absolute;
        font-size: .8em;
        line-height: 0;
        top: 50%;
        left: 20%;
    }

    .radio .cr .cr-icon {
        margin-left: 0.04em;
    }

.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
    display: none;
}

    .checkbox label input[type="checkbox"] + .cr > .cr-icon,
    .radio label input[type="radio"] + .cr > .cr-icon {
        transform: scale(3) rotateZ(-20deg);
        opacity: 0;
        transition: all .3s ease-in;
    }

    .checkbox label input[type="checkbox"]:checked + .cr > .cr-icon,
    .radio label input[type="radio"]:checked + .cr > .cr-icon {
        transform: scale(1) rotateZ(0deg);
        opacity: 1;
    }

    .checkbox label input[type="checkbox"]:disabled + .cr,
    .radio label input[type="radio"]:disabled + .cr {
        opacity: .5;
    }