html, body {
    height: 100%;
}

body {
    overflow-y: auto; /* scroll único */
    overflow-x: hidden; /* evita horizontal por widths/calcs */
}

* {
    margin: 0;
    padding: 0;
    user-select: none;
}

main {
    position: relative;
    left: 250px;
}

    main.show {
        width: 100%;
        left: 0px;
    }

.container {
    padding-top: 0;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    float: left;
}

.options {
    margin-top: 20px;
    padding: 20px;
    background-color: rgba(191, 191, 191, 0.15);
    position: relative;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

header div div div div {
    float: left;
}

    header div div div div a img {
        /*height: 40px;*/
        height: 60px;
        width: 55px;
    }

.btn {
    position: absolute;
    top: 20px;
    left: 200px;
    height: 45px;
    width: 45px;
    text-align: center;
    background: #1b1b1b;
    border-radius: 3px;
    cursor: pointer;
    transition: left 0.4s ease;
}

    .btn span {
        color: white;
        font-size: 28px;
        line-height: 45px;
    }

    .btn.click span:before {
        content: '\f00d';
    }

.submenu {
    text-align: center !important;
    position: relative !important;
    color: white !important;
    background: #595959 !important;
    text-decoration: none !important;
    font-size: 16px !important;
    padding-left: 0px !important;
    line-height: 30px;
    /*font-weight: 500 !important;*/
    width: 100% !important;
    border-bottom: 1px solid;
    border-bottom-color: #a6a6a6;
}
    .submenu:hover {
        color: #ccddff !important;
        background: #595959 !important;
        text-decoration: none !important;
        border-left-color: #ccddff !important;
    }

    .submenu.active {
        color: #ccddff !important;
        background: #595959 !important;
        border-left-color: #ccddff !important;
    }

.optionmenu {
    font-size: 12px !important;
}

    .optionmenu:hover {
        font-size: 12px !important;
    }

    .optionmenu.active {
        font-size: 12px !important;
    }

.sidebar {
    position: absolute;
    width: 250px;
    left: 0px;
    background: transparent;
    transition: left 0.4s ease;
    border-left: 1px;
    border-left-color: black;
}

    .sidebar.show {
        left: -250px;
    }

    .sidebar .text {
        color: white;
        font-size: 25px;
        /*font-weight: 600;*/
        line-height: 65px;
        text-align: center;
        background: #1e1e1e;
        letter-spacing: 1px;
    }

nav {
    max-height: 800px;
}

nav div {
    background: #ccddff;
    font-weight: bold;
    padding-left: 20px;
    font-size: 14px;
    height: 25px;
}

nav ul {
    background: #ffffff;
    height: 100%;
    width: 100%;
    list-style: none;
}

    nav ul li {
        line-height: 30px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        background: #ffffff;
    }

        nav ul li:last-child {
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        nav ul li a {
            text-align: center;
            position: relative;
            color: black;
            background: #a6a6a6;
            text-decoration: none;
            font-size: 16px;
            padding-left: 0px;
            /*font-weight: 500;*/
            display: block;
            width: 100%;
            border-left: 3px solid transparent;
        }

            nav ul li a:hover {
                color: #ccddff;
                background: #a6a6a6;
                text-decoration: none;
                border-left-color: #ccddff;
            }

        nav ul li.active a {
            color: #ccddff;
            background: #a6a6a6;
            border-left-color: #ccddff;
        }

        nav ul li a span {
            position: absolute;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            font-size: 22px;
            transition: transform 0.4s;
        }

            nav ul li a span.rotate {
                transform: translateY(-50%) rotate(-180deg);
            }

    nav ul [class$="-show1"] {
        padding-top: 20px;
    }

    nav ul ul {
        position: static;
        display: none;
        border-right: 1px solid;
        border-right-color: #a6a6a6;
        border-bottom: 1px solid;
        border-bottom-color: #a6a6a6;
    }

        nav ul ul li {
            line-height: 42px;
            border-bottom: none;
        }

            nav ul ul li a {
                text-align: center;
                font-size: 15px;
                color: black;
                background: white;
                padding-left: 0px;
            }

                nav ul ul li a img {
                    display: block;
                    margin-left: auto;
                    margin-right: auto;
                    width: 20%;
                }

                nav ul ul li a span {
                    position: absolute;
                    top: 50%;
                    right: 20px;
                }

            nav ul ul li.active a {
                text-align: center;
                font-size: 15px;
                color: black;
                padding-left: 0px;
            }

    nav ul li.active ul li a {
        color: black;
        background: white;
        border-left-color: transparent;
    }

        nav ul li.active ul li a:hover {
            border-left-color: #ccddff;
            color: black;
        }

    nav ul ul li a:hover {
        background: white;
        color: black;
    }

    nav ul ul li a img:hover {
        border-image-slice: 100%;
        border-image: 1px;
        border-bottom: 1px solid;
        border-bottom-color: black;
        border-right: 1px solid;
        border-right-color: black;
    }

    nav ul ul[class$="-show2"] {
        padding-top: 20px;
        max-height: 500px;
        overflow: auto;
    }

        nav ul ul[class$="-show2"]::-webkit-scrollbar {
            width: 10px;
        }

        nav ul ul[class$="-show2"]::-webkit-scrollbar-track {
            background: #a6a6a6;
        }

        nav ul ul[class$="-show2"]::-webkit-scrollbar-thumb {
            background-color: #f05b41;
            border-radius: 20px;
            border: 1px solid white;
        }

    nav ul ul ul {
        position: static;
        display: none;
        border-right: 0px;
        border-right-color: #a6a6a6;
    }

        nav ul ul ul li {
            line-height: 42px;
            border-bottom: none;
        }

            nav ul ul ul li a {
                text-align: center;
                font-size: 14px;
                color: #e6e6e6;
                padding-left: 0px;
            }

                nav ul ul ul li a img {
                    display: block;
                    margin-left: auto;
                    margin-right: auto;
                    width: 20%;
                }

                nav ul ul ul li a span {
                    position: absolute;
                    top: 50%;
                    right: 20px;
                }

    nav ul ul li.active ul li a {
        color: black;
        background: white;
        border-left-color: transparent;
    }

        nav ul ul li.active ul li a:hover {
            border-left-color: #ccddff;
            color: black;
        }

    nav ul ul ul li a:hover {
        background: white;
    }

    nav ul ul ul li a img:hover {
        border-image-slice: 100%;
        border-image: 1px;
        border-bottom: 1px solid;
        border-bottom-color: black;
        border-right: 1px solid;
        border-right-color: black;
    }

.li-hide {
    display: none;
}

.uppercase .dx-texteditor-input {
    text-transform: uppercase;
}

.editors .left, .editors .right {
    display: inline-block;
    width: 49%;
    padding-right: 20px;
    box-sizing: border-box;
}

.dx-multiview-item-container {
    padding-left: 10px;
    padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 10px;
}

.qr-avatar {
    height: 200px;
    width: 200px;
    margin-right: 10px;
    border: 1px solid #d2d3d5;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.cellOn {
    background-color: #1ED104;
    word-wrap: break-word;
    text-align: center;
    font-size: 13px;
    font-weight: 400;
    color: white;
}

.cellOff {
    background-color: red;
    word-wrap: break-word;
    text-align: center;
    font-size: 13px;
    font-weight: 400;
    color: white;
}

.cellLeft {
    background: #ccddff;
}

.cellAlarm {
    background: #ccddff;
    cursor: pointer;
}

.cellPointer {
    cursor: pointer;
}

.cellWarning {
    background-color: yellow;
    word-wrap: break-word;
    text-align: center;
    font-size: 13px;
    font-weight: 400;
    color: black;
}

.cellDateAlert {
    word-wrap: break-word;
    text-align: center;
    font-weight: 600;
}

.columnHeader {
    background-color: #a6a6a6;
    color: white;
    font-size: 13px;
    font-weight: 400;
}

.cellStatus {
    word-wrap: break-word;
    text-align: center;
    font-size: 13px;
    font-weight: 400;
    color: white;
}

.cellTvmStatus {
    word-wrap: break-word;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
}

    .cellTvmStatus .on {
        color: #1ED104;
    }

    .cellTvmStatus .off {
        color: red;
    }

    .cellTvmStatus .warning {
        color: yellow;
    }

    .cellTvmStatus .jam {
        color: orange;
    }

    .cellTvmStatus span {
        font-size: 26px;
    }

.cellButtom {
    word-wrap: break-word;
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    color: black;
}

.cellTvm1 {    
    word-wrap: break-word;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
}

    .cellTvm1 .on {
        color: #1ED104;
    }

    .cellTvm1 .off {
        color: red;
    }

    .cellTvm1 .warning {
        color: yellow;
    }

    .cellTvm1 span {
        font-size: 30px;
    }

.cellAlert1 {
    word-wrap: break-word;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #ccddff;
}

    .cellAlert1 span {
        font-size: 36px;
    }

.icon {
}
    .icon span {
        font-size: 36px;
    }

.cellTvm2 {
    word-wrap: break-word;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
}

.cellAlarmOn {
    font-weight: 600;
}

.cellAlarmOff {
    font-weight: 400;
}

div .left {
    float: left;
    width: 330px;
    height: 590px;
    padding: 20px;
    background: rgba(191, 191, 191, 0.15);
    margin-right: 30px;
}

div .left #list .dx-list-group-header {
    color: #f05b41;
    font-weight: normal;
    font-size: 18px;
}

div .left #list .product {
    float: left;
}

    div .left #list .product .description {
        font-size: 12px;
        font-weight: 600;
    }



div .right {
    overflow: hidden;
}

div .right .header {
    height: 70px;
}

div .right .header .name-container {
    float: left;
}

div .right .header .name {
    font-size: 20px;
    font-weight: bold;
}

.widget-container-width {
    width: 100%;
}

.inventory-options {
    padding: 20px;
    position: absolute;
    float: right;
    right: 50px;
    width: 260px;
    top: 90px;
    background-color: rgba(191, 191, 191, 0.15);
}

.inventory-container {
    padding: 20px;
    float: left;
    max-width: 700px;
    min-width: 300px;
    width: 120%;
}

#dvCaptcha {
    position: absolute;
    bottom: 20px;
    float: left;
}

/*#imgTvm {
    height: 60px;
    width: 35px;
}*/

#location {
    height: 10px;
}

#iconfinfraform3 {
    margin-top: 10px;
}

#TabPanelSales {
    padding-bottom: 50px;
}

#cellValue {
    word-wrap: break-word;
}

#btnAccess {
    background-color: #f05b41;
    border-color: #f05b41;
    position: absolute;
    bottom: 25px;
    right: 20px;
}

    #btnAccess:hover {
        background-color: orange;
    }

#btnSave {
    background-color: #f05b41;
    border-color: #f05b41;
    color: white;
}

    #btnSave:hover {
        background-color: orange;
    }

#btnGenerate {
    margin-top: 20px;
    background-color: #f05b41;
    border-color: #f05b41;
}

    #btnGenerate:hover {
        background-color: orange;
    }

#btnTarget {
    margin-bottom: 20px;
    background-color: #f05b41;
    border-color: #f05b41;
    color: white;
}

    #btnTarget:hover {
        background-color: orange;
    }

#tableTab {
    width: 250px;
    float: left;
    display: inline-block;
    margin-left: 5px;
}

    #tableTab .tdFirst {
        width: 6%;
    }

        #tableTab .tdFirst span {
            font-size: 18px;
            cursor: pointer;
        }

    #tableTab .tdSecond {
        text-align: left;
        font-weight: bold;
        width: 18%;
    }

    #tableTab .tdThird {
        margin-left: 10px;
        text-align: center;
        color: #1ED104;
        display: inline-block;
        border-top: thin solid black;
        border-top-left-radius: 5px;
        border-left: thin solid black;
        border-bottom: thin solid black;
        border-bottom-left-radius: 5px;
        font-weight: bold;
        width: 38%;
    }

    #tableTab .tdFourth {
        text-align: center;
        color: gray;
        display: inline-block;
        border-top: thin solid black;
        border-top-right-radius: 5px;
        border-right: thin solid black;
        border-bottom: thin solid black;
        border-bottom-right-radius: 5px;
        font-weight: bold;
        width: 38%;
    }

#tableTabChmSummary {    
    float: left;
    margin-left: 55px;
    display: inline-block;
}

    #tableTabChmSummary .tdAlarms {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-top-left-radius: 5px;
        border-bottom: thin solid black;
        border-bottom-left-radius: 5px;
        border-left: thin solid black;
        width: 53px;
        color: #1ED104;
        font-weight: bold;
    }

    #tableTabChmSummary .tdValuesdoor {
        text-align: center;
        display: inline-block;
        border-left: thin solid black;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 60px;
        color: gray;
        font-weight: bold;
    }

    #tableTabChmSummary .tdCoindispenser {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 70px;
        color: gray;
        font-weight: bold;
    }

    #tableTabChmSummary .tdCoins1 {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 55px;
        color: gray;
        font-weight: bold;
    }

    #tableTabChmSummary .tdCoins2 {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 55px;
        color: gray;
        font-weight: bold;
    }

    #tableTabChmSummary .tdCoins3 {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 55px;
        color: gray;
        font-weight: bold;
    }

    #tableTabChmSummary .tdBilldispenser {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 70px;
        color: gray;
        font-weight: bold;
    }

    #tableTabChmSummary .tdBills1 {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 55px;
        color: gray;
        font-weight: bold;
    }

    #tableTabChmSummary .tdBills2 {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 55px;
        color: gray;
        font-weight: bold;
    }

    #tableTabChmSummary .tdPrinter {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 55px;
        color: gray;
        font-weight: bold;
    }

    #tableTabChmSummary .tdPrinterlevel {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 55px;
        color: gray;
        font-weight: bold;
    }

    #tableTabChmSummary .tdQr {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-top-right-radius: 5px;
        border-right: thin solid black;
        border-bottom: thin solid black;
        border-bottom-right-radius: 5px;
        border-left: thin solid black;
        width: 55px;
        color: gray;
        font-weight: bold;
    }    

#tableTabSummary {
    /*width: 950px;*/
    float: left;
    margin-left: 30px;
    display: inline-block;
}

    #tableTabSummary .tdAlarms {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-top-left-radius: 5px;
        border-bottom: thin solid black;
        border-bottom-left-radius: 5px;
        border-left: thin solid black;
        width: 53px;
        color: #1ED104;
        font-weight: bold;
    }

    #tableTabSummary .tdService {
        text-align: center;
        display: inline-block;
        border-left: thin solid black;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 60px;
        color: gray;
        font-weight: bold;
    }

    #tableTabSummary .tdMaintenance {
        text-align: center;
        display: inline-block;
        border-left: thin solid black;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 60px;
        color: gray;
        font-weight: bold;
    }

    #tableTabSummary .tdValues {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 55px;
        color: gray;
        font-weight: bold;
    }

    #tableTabSummary .tdCashbox {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 55px;
        color: gray;
        font-weight: bold;
    }

    #tableTabSummary .tdCoinbag {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 55px;
        color: gray;
        font-weight: bold;
    }

    #tableTabSummary .tdPaperlevel {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 55px;
        color: gray;
        font-weight: bold;
    }

    #tableTabSummary .tdQr {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 55px;
        color: gray;
        font-weight: bold;
    }

    #tableTabSummary .tdCoinreader {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 55px;
        color: gray;
        font-weight: bold;
    }

    #tableTabSummary .tdBillreader {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 55px;
        color: gray;
        font-weight: bold;
    }

    #tableTabSummary .tdCredit {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 55px;
        color: gray;
        font-weight: bold;
    }

    #tableTabSummary .tdPrinter {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 55px;
        color: gray;
        font-weight: bold;
    }

    #tableTabSummary .tdSensor {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-top-right-radius: 5px;
        border-right: thin solid black;
        border-bottom: thin solid black;
        border-bottom-right-radius: 5px;
        border-left: thin solid black;
        width: 55px;
        color: gray;
        font-weight: bold;        
    }

    #tableTabSummary .tdQrB {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 65px;
        color: gray;
        font-weight: bold;
    }

    #tableTabSummary .tdPrinterB {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 65px;
        color: gray;
        font-weight: bold;
    }

    #tableTabSummary .tdBillB {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 65px;
        color: gray;
        font-weight: bold;
    }

    #tableTabSummary .tdCoinB {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 65px;
        color: gray;
        font-weight: bold;
    }

    #tableTabSummary .tdCardReaderB {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 65px;
        color: gray;
        font-weight: bold;
    }

    #tableTabSummary .tdCashBoxB {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 65px;
        color: gray;
        font-weight: bold;
    }

    #tableTabSummary .tdShiftB {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 65px;
        color: gray;
        font-weight: bold;
    }

    #tableTabSummary .tdTopCoverB {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 65px;
        color: gray;
        font-weight: bold;
    }

    #tableTabSummary .tdValuesDoorB {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 65px;
        color: gray;
        font-weight: bold;
    }

    #tableTabSummary .tdMaintenanceDoorB {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-top-right-radius: 5px;
        border-right: thin solid black;
        border-bottom: thin solid black;
        border-bottom-right-radius: 5px;
        border-left: thin solid black;
        width: 65px;
        color: gray;
        font-weight: bold;
    }

#tableTabBus {
    width: 300px;
    float: left;
    display: inline-block;
    margin-left: 5px;
}

    #tableTabBus .tdFirst {
        width: 6%;
    }

        #tableTabBus .tdFirst span {
            font-size: 18px;
            cursor: pointer;
        }

    #tableTabBus .tdSecond {
        text-align: left;
        font-weight: bold;
        width: 18%;
    }

    #tableTabBus .tdThird {
        margin-left: 10px;
        text-align: center;
        color: #1ED104;
        display: inline-block;
        border-top: thin solid black;
        border-top-left-radius: 5px;
        border-left: thin solid black;
        border-bottom: thin solid black;
        border-bottom-left-radius: 5px;
        font-weight: bold;
        width: 38%;
    }

    #tableTabBus .tdFourth {
        text-align: center;
        color: gray;
        display: inline-block;
        border-top: thin solid black;
        border-top-right-radius: 5px;
        border-right: thin solid black;
        border-bottom: thin solid black;
        border-bottom-right-radius: 5px;
        font-weight: bold;
        width: 38%;
    }

#tableTabBusSummary {
    /*width: 950px;*/
    float: left;
    margin-left: 35px;
    display: inline-block;
}

    #tableTabBusSummary .tdAlarms {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-top-left-radius: 5px;
        border-bottom: thin solid black;
        border-bottom-left-radius: 5px;
        border-left: thin solid black;
        width: 65px;
        color: #1ED104;
        font-weight: bold;
    }

    #tableTabBusSummary .tdQrB {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 65px;
        color: gray;
        font-weight: bold;
    }

    #tableTabBusSummary .tdPrinterB {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 65px;
        color: gray;
        font-weight: bold;
    }

    #tableTabBusSummary .tdBillB {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 65px;
        color: gray;
        font-weight: bold;
    }

    #tableTabBusSummary .tdCoinB {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 65px;
        color: gray;
        font-weight: bold;
    }

    #tableTabBusSummary .tdCardReaderB {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 65px;
        color: gray;
        font-weight: bold;
    }

    #tableTabBusSummary .tdCashBoxB {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 65px;
        color: gray;
        font-weight: bold;
    }

    #tableTabBusSummary .tdShiftB {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 65px;
        color: gray;
        font-weight: bold;
    }

    #tableTabBusSummary .tdTopCoverB {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 65px;
        color: gray;
        font-weight: bold;
    }

    #tableTabBusSummary .tdValuesDoorB {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-bottom: thin solid black;
        border-left: thin solid black;
        width: 65px;
        color: gray;
        font-weight: bold;
    }

    #tableTabBusSummary .tdMaintenanceDoorB {
        text-align: center;
        display: inline-block;
        border-top: thin solid black;
        border-top-right-radius: 5px;
        border-right: thin solid black;
        border-bottom: thin solid black;
        border-bottom-right-radius: 5px;
        border-left: thin solid black;
        width: 65px;
        color: gray;
        font-weight: bold;
    }

#fileuploader-container {
    border: 1px solid #d3d3d3;
    margin: 20px 20px 20px 20px;
}

#fbx-fileuploader-container {
    border: 1px solid #d3d3d3;
    float: left;
    width: 50%;
    padding-left: 10px;
}

#fbx-form-container {
    float: left;
    width: 50%;
}

/*#fbx-toolbar-container {
    position: absolute;
    top: 50px;
    right: 100px;
}*/

#fbx-grid-container {
    float: left;
    width: 100%;
}

#fbx-cmd-container {
    float: left;
    width: 100%;
    margin-top: 20px;
}

#tvm-fileuploader-container {
    border: 1px solid #d3d3d3;
    float: left;
    width: 50%;
    padding-left: 10px;
    display: none;
}

#button-container {
    text-align: right;
    margin-top: 20px;
}

#scroll-btn {
    position: fixed;
    right: 10px;
    bottom: 10px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 1.25);
    outline: none;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.2);
}

.status-tab {
    position:absolute;
    top: 0;
    width: 100%;
}

.status-content {
    margin-top: 40px;
}


.fade-in {
    animation: fadeIn ease 0.5s;
    -webkit-animation: fadeIn ease 0.5s;
    -moz-animation: fadeIn ease 0.5s;
    -o-animation: fadeIn ease 0.5s;
    /*-ms-animation: fadeIn ease 0.5s;*/
}

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

    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fade-out {
    animation: fadeOut ease 0.5s;
    -webkit-animation: fadeOut ease 0.5s;
    -moz-animation: fadeOut ease 0.5s;
    -o-animation: fadeOut ease 0.5s;
    /*-ms-animation: fadeOut ease 0.5s;*/
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-moz-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-o-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-ms-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


.card {
    position: relative;
    height: 180px !important;
    width: 350px !important;
}

    .card .main .online {
        color: white;
        background: #1ED104;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .card .main .warning {
        color: gray;
        background: yellow;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .card .main .offline {
        color: white;
        background: red;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .card .main .CardViewTitle p {
        height: 20px;
        padding-top: 2.5px;
        font-weight: 600;
    }

    .card .main .row .column {
        float: left;
        width: 50%;
    }

        .card .main .row .column .CardViewData_PrinterStatus {
            margin-top: 15px;
        }

        .card .main .row .column .CardViewData_BillStatus {
            margin-top: 15px;
        }

        .card .main .row .column .CardViewData_CoinStatus {
            margin-top: 15px;
        }

        .card .main .row .column .CardViewData_CardReaderStatus {
            margin-top: 15px;
        }

        .card .main .row .column .CardViewData_Cashbox {
            margin-top: 15px;
        }

        .card .main .row .column .CardViewData_ShiftStatus {
            margin-top: 15px;
        }

        .card .main .row .column .CardViewData_TopCoverStatus {
            margin-top: 15px;
        }

        .card .main .row .column .CardViewData_ValueDoorStatus {
            margin-top: 15px;
        }

        .card .main .row .column .CardViewData_MaintenanceDoorStatus {
            margin-top: 15px;
        }

        .card .main .row .column .CardViewData_Alert {
            margin-top: 15px;
        }

        .card .main .row .column .icon1 {
            position: absolute;
            right: 60%;
        }

        .card .main .row .column .icon2 {
            position: absolute;
            right: 10%;
        }

        .card .main .row .column .icon3 {
            position: absolute;
            opacity: 100;
            right: 2.5%;
            bottom: 0%;
            cursor: pointer;
        }

        .card .main .row .column .icon4 {
            opacity: 0;
            position: absolute;
            right: 2.5%;
            bottom: 0%;
            cursor: pointer;
        }

        .card .main .row:after {
            content: "";
            display: table;
            clear: both;
        }

    .card .main .row .column .on {
        color: #1ED104;
    }

    .card .main .row .column .off {
        color: red;
    }

    .card .main .row .column .war {
        color: yellow;
        font-size: 35px;
    }

.status {
    padding-left: 15px;
}

div-dx-datagrid-header-panel {
  position: sticky;
  top:0;
  z-index: 1000; 
  /*z-index is applied so that this element appears in front*/
}

div-dx-datagrid-headers.dx-datagrid-nowrap {
    position: sticky;
    top: 70px;
    background-color: white;
    z-index: 1000;
}

.fixed-headers {
    top: 0;
    width: auto;
    z-index: 999;
}

.flags {
    position: absolute;
    top: 10px;
    right: 10px;
}

.flagsAccess {
    position: absolute;
    top: 5px;
    right: 10px;
}

.systems {
    position: absolute;
    top: 10px;
    left: 165px;
}


/* ==========================================================================
   1. DESBLOQUEO DEL ANCHO (FULL SCREEN)
   ========================================================================== */
/* Forzamos que el container ocupe el 100% ignorando los breakpoints antiguos */
@media (min-width: 576px), (min-width: 768px), (min-width: 992px), (min-width: 1200px) {
    .container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 20px;
        padding-right: 20px;
        float: none; /* Quitamos float para usar Flexbox */
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 0; /* no forzar alto */
        height: auto; /* que crezca natural */
    }
}

main {
    width: calc(100% - 250px);
    transition: all 0.4s ease;
    height: auto;
    min-height: calc(100vh - 80px); 

    overflow: visible; 
}

    main.show {
        width: 100%; /* Cuando el menú se oculta */
        left: 0;
    }

/* ==========================================================================
   2. ESTILO "WIZARD" (CONTENEDOR DE VISTAS)
   ========================================================================== */
.wizard-container {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    height: 100%; /* Ocupa todo el alto del container padre */
    max-height: 100%;
    border: 1px solid #e1e4e8;
    overflow: hidden; /* El scroll ocurrirá dentro del body */
}

.wizard-header {
    background-color: #f8f9fa;
    padding: 15px 25px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    flex-shrink: 0; /* No permite que el header se encoja */
}

.wizard-body {
    flex: 1; /* Ocupa todo el espacio restante */
    padding: 20px;
    overflow-y: auto; /* Scroll interno limpio */
    background-color: #fff;
    display: flex;
    flex-direction: column;
}

.wizard-footer {
    background-color: #f8f9fa;
    padding: 15px 25px;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: flex-end; /* Botones a la derecha */
    gap: 15px;
    height: 70px;
    flex-shrink: 0;
}

/* ==========================================================================
   3. SEMÁNTICA DE BOTONES (COLORES FUNCIONALES)
   ========================================================================== */
/* Acción Principal (Guardar, Siguiente, Vender) -> VERDE o AZUL FUERTE */
.btn-primary-action .dx-button-content {
    background-color: #28a745 !important; /* Verde éxito */
    color: white;
    font-weight: 600;
}

/* Acción de Hardware (Leer Tarjeta, Tomar Foto) -> VIOLETA o NARANJA */
.btn-hardware-action .dx-button-content {
    background-color: #6f42c1 !important; /* Violeta distintivo */
    color: white;
}

.btn-hardware-action .dx-icon {
    color: white !important;
}

/* Acción Secundaria (Cancelar, Volver) -> GRIS */
.btn-secondary-action .dx-button-content {
    background-color: #6c757d !important;
    color: white;
}

/* ================================================
   FIX DEFINITIVO PARA LOGIN
   Evitar que el main se desplace y se expanda
   ================================================ */

.login-page main {
    position: static !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
}

/* Evitar que el layout interno se fuerce a 80% */
.login-page #contentLayout {
    width: 100% !important;
}

/* Asegurar que el popup se centre correctamente */
.login-page .dx-popup-content {
    display: block !important;
}

/* Cuando el contenedor tiene la clase, afectamos a los ::after de los hijos */
.line-container.glow-ok .station-wrapper::after {
    box-shadow: 0 0 12px rgba(46,125,50,0.45);
}

.line-container.glow-warn .station-wrapper::after {
    box-shadow: 0 0 14px rgba(239,108,0,0.55);
}

.line-container.glow-error .station-wrapper::after {
    box-shadow: 0 0 16px rgba(198,40,40,0.65);
}