/* Reset */
* {
    box-sizing: border-box;
    
}
/* @font-face {
    font-family: 'dometic';
    src: url('./font/dometic.eot');
    src: url('./font/dometic.eot#iefix') format('embedded-opentype'),
            url('./font/dometic.woff') format('woff'),
            url('./font/dometic.ttf') format('truetype'),
            url('./font/dometic.svg#dometic') format('svg');
    font-weight: normal;
    font-style: normal;
} */

@font-face {
    font-family: Gibson;
    src: url("./font/Gibson-Regular.otf") format("opentype");
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    kerning: auto;
    letter-spacing: 5px;
}

@font-face {
    font-family: GibsonRegular;
    src: url("./font/Gibson-Regular.otf") format("opentype");
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    kerning: auto;
    letter-spacing: 5px;
}

@font-face {
    font-family: GibsonBold;
    src: url("./font/Gibson-Bold.otf");
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

@font-face {
    font-family: GibsonSemiBold;
    src: url("./font/Gibson-SemiBold.otf");
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

@font-face {
    font-family: GibsonLight;
    src: url("./font/Gibson-Light.otf") format("opentype");
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

@font-face {
    font-family: 'apollo';
    src: url('./font/apollo.eot?53906990');
    src: url('./font/apollo.eot?53906990#iefix') format('embedded-opentype'),
         url('./font/apollo.woff?53906990') format('woff'),
         url('./font/apollo.ttf?53906990') format('truetype'),
         url('./font/apollo.svg?53906990#apollo') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  .demo-icon {
    font-family: "apollo";
    font-style: normal;
    font-weight: normal;
    speak: never;
   
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    /* opacity: .8; */
   
    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;
   
    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;
   
    /* Animation center compensation - margins should be symmetric */
    /* remove if not needed */
    margin-left: .2em;
   
    /* You can be more comfortable with increased icons size */
    /* font-size: 120%; */
   
    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
   
    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
  }

body button:focus, body input:focus, body select:focus {
    outline: none !important;
}
select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}
select {
    background: transparent;
    outline: none !important;
}
/* Body */
html {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}
body {
    /* font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif; */
    font-family: 'Gibson', Arial, Helvetica, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 1px;
    font-size: 14px;
    line-height: 1.2;
    color: #FFF;
    margin: 0;
    padding: 0;
    min-width: 400px !important;
    touch-action: none;
    height: 100%;
    min-height: 100%;
    min-width: 500px;
    background: #151515;
}
body.attendant {
    color: #FFF;
}

h1,h2,h3,h4,h5,h6 {
    font-family: 'GibsonSemiBold', Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
    font-kerning: auto;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

h1 {
    font-size: 2.4vw;
}
@media screen and (min-width: 1600px) {
    body {
        font-size: 16px;
    }
    h1 {
        font-size: 40px;
    }
}
@media screen and (max-width: 1200px) {
    h1 {
        font-size: 28px;
    }
}

a[disabled] {
    pointer-events: none;
    opacity: 0.5;
}

#debug, .status {
    position: absolute;
    z-index: 999;
    bottom: 0px;
    width: calc(100vw - 60px);
    min-height: 200px;
    max-height: 500px;
    padding: 20px;
    background-color: #191919;
    background-color: rgba(0,0,0,0.8);
    color: #FFF;
    overflow-y: scroll;
}
#debug {
    /* display: none; */
    bottom: 200px;
    width: 100%;
}
.status {
    min-height: 0;
    color: rgba(255,255,255,0.7);
}
.status:empty {
    display: none;
}
.status h1 {
    display: block;
    width: 100%;
    font-size: 18px;
    font-weight: normal;
    border-bottom: 1px solid rgba(255,255,255,0.5);
    margin: 0 0 10px 0;
    padding: 0;
    color: #fc5000;
}
.status span {
    display: block;
    width: 100%;
}


a {
    color: #FC5000;
}

/* DMS Buttons */


/* Sticky Topbar */
.topbar {
    position: fixed;
    z-index: 9;
    background-color: #1A1D21;
    width: 100%;
    height: auto;
    max-height: 184px;
    padding: 5px 20px;
    color: #FFF;
    display: grid;
    grid-template-columns: 300px calc(100% - 380px) 40px;
    grid-row-gap: 0;
    grid-column-gap: 20px;
}
body.login .topbar {
    background-color: #1E1E1E;
}
body.login .topbar {
    display: grid;
    grid-template-columns: 1fr;
    height: 80px;
}
.topbar .topbar_center {
    width: 300px;
    max-width: 90%;
    align-self: center;
    justify-self: center;
}
.topbar_left, .topbar_right {
    height: 40px;
}
.attendant .topbar_left {
    position: relative;
    height: 60px;
    display: grid;
    align-content: center;
}
a.logo {
    position: relative;
    /* left: 20px;
    top: 18px; */
    left: 0;
    top: 0;
    display: block;
    /* width: 233px;
    height: 32px; */
    width: 100%;
    height: auto;
    max-height: 32px;
    opacity: 1;
}
a.logo:hover {
    opacity: 1;
}
body.login a.logo {
    width: 276px;
    height: 38px;
    max-height: 38px;
    opacity: 1;
}
a.logo img {
    display: block;
    width: 100%;
    height: auto;

    -webkit-transition: all 200ms ease-out 50s;
    -moz-transition: all 200ms ease-out 50s;
    -o-transition: all 200ms ease-out 50s;
    transition: all 200ms ease-out 50ms;
}
h1.tagline {
    display: inline-block;
    font-size: 14px;
    margin: 0;
    padding: 0;
    color: #FC5000;
    text-transform: uppercase;

    -webkit-transition: all 200ms ease-out 50s;
    -moz-transition: all 200ms ease-out 50s;
    -o-transition: all 200ms ease-out 50s;
    transition: all 200ms ease-out 50ms;
}

/* Menu */
.menu_main {
    display: block;
    position: relative;
    color: #FFF;
}
.menu_main a {
    display: block;
    position: relative;
    float: left;
    line-height: 18px;
    margin: 0;
    padding: 10px 20px 6px 20px;
    color: #b9b9b9;
    text-align: center;
    opacity: 1;
    text-decoration: none;
    border-bottom: 3px solid transparent;

    -webkit-transition: all 200ms ease-out 50ms;
    -moz-transition: all 200ms ease-out 50ms;
    -o-transition: all 200ms ease-out 50ms;
    transition: all 200ms ease-out 50ms;
}
.menu_main a:hover {
    opacity: 1;
    color: #EEE;
    text-decoration: none;
}
.menu_main a.current {
    /* background: #FFF; */
    color: #191919;
    opacity: 1;
    /* border-radius: 5px 5px 0 0; */
    color: #FFF;
    text-decoration: none;
    background: #1A1D21;
    border-bottom: 3px solid #FD501E;
    text-decoration: none;
}
@media screen and (max-width:1200px) {
   .menu_main a {
        text-align: left;
        font-size: 12px;
    }
    .menu_main a.sup,
    .menu_main a.log,
    .menu_main a.lang,
    .menu_main a.client {
        display: none;
    }
}
@media screen and (max-width:1050px) {
    .menu_main a.sup,
    .menu_main a.log,
    .menu_main a.lang,
    .menu_main a.client {
        display: none;
    }
}
@media screen and (max-width:992px) {
    .menu_main a {
        font-size: 10px;
        padding-left: 13px;
        padding-right: 13px;
    }
    .menu_main a.sup,
    .menu_main a.log,
    .menu_main a.lang,
    .menu_main a.client {
        display: none;
    }
}
@media screen and (max-width:768px) {
    .menu_main a {
        padding-left: 10px;
        padding-right: 10px;
    }

    .menu_main a.sup,
    .menu_main a.log,
    .menu_main a.lang,
    .menu_main a.client {
        display: none;
    }
}

/* Offcanvas */
.menu_main_btn {
    position: relative;
    z-index: 999;
    float: right;
    clear: none;
    width: 47px;
    height: 47px;
    padding: 0;
    cursor: pointer;
}
.menu_settings {
    display: block;
    position: absolute;
    min-width: 200px;
    max-width: 300px;
    right: -300px;
    top: 56px;
    padding: 20px;
    background: rgba(0,0,0,0.90);
    z-index: 99;

    -webkit-transition: right 200ms ease-out 50ms;
    -moz-transition: right 200ms ease-out 50ms;
    -o-transition: right 200ms ease-out 50ms;
    transition: right 200ms ease-out 50ms;
}

.menu_settings.on {
    right: 20px;
}
.menu_settings.attendant {
    background: #1A1D21;
    padding: 20px 30px;
    top: 60px;

    -webkit-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:    1px 1px 4px 0px rgba(0, 0, 0, 0.2);
    box-shadow:         1px 1px 4px 0px rgba(0, 0, 0, 0.2);
    
}
.menu_settings.attendant.on {
    right: 0px;
}

/* Nav */
.nav-icon {
    position: absolute;
    margin: 1em;
    width: 40px;
    top: -14px;
    left: -14px;
}
.nav-icon:after, 
.nav-icon:before, 
.nav-icon div {
    background-color: #fff;
    border-radius: 3px;
    content: '';
    display: block;
    height: 5px;
    margin: 7px 0;
    opacity: 0.7;
    transition: all .2s ease-in-out;
}
.nav-icon:hover,
.nav-icon:hover div,
.nav-icon:hover:before,
.nav-icon:hover:after {
    opacity: 1;
}
.nav-icon.on:before {
    transform: translateY(12px) rotate(135deg);
}
.nav-icon.on:after {
    transform: translateY(-12px) rotate(-135deg);
}
.nav-icon.on div {
    transform: scale(0);
}
.menu_settings h1 {
    display: block;
    width: 100%;
    margin: 4px 0 8px 0;
    padding: 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    text-transform: uppercase;
    font-size: 16px;
    line-height: 18px;
    font-weight: normal;
    color: rgba(255,2552,255,0.7);
}
.menu_settings h1.top {
    margin-top: 12px;
}
.menu_settings .menu_offcanvas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
}
.menu_settings.attendant .menu_offcanvas {
    grid-template-columns: 1fr;
}
.menu_settings.attendant .menu_offcanvas > a:disabled {
    color: #4B4B4B;
}
.menu_settings.attendant .menu_offcanvas > a:last-child {
    border-top: 1px solid #4B4B4B;
    padding-top: 16px;
    color: #FC5000;
}
.menu_settings .menu_offcanvas a {
    display: block;
    width: 100%;
    line-height: 18px;
    height: 18px;
    margin: 0 00 4px 0;
    padding: 0;
    color: #FFF;
    text-align: left;
}
.menu_settings .menu_offcanvas a:hover {
    color: #FC5000;
}
.menu_settings.attendant .menu_offcanvas a {
    display: block;
    width: 100%;
    text-decoration: none;
    font-size: 16px;
    font-family: 'Gibson', Arial, Helvetica, sans-serif;
    padding-bottom: 6px;
    padding-top: 6px;
    height: auto;
}
.user {
    display: grid;
    position: relative;
    grid-template-columns: 50px calc(100% - 50px);
    column-gap: 10px;
}
.user .gravatar_img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 50px;
    border: 2px solid rgba(255,255,255,0.7);
}
.user .email_text {
    display: block;
    font-size: .8em;
    color: rgba(255,255,255,0.5);
    word-wrap: break-word;
}
.session_timer {
    display: block;
    float: left;
    margin-top: 10px;
    font-size: .8em;
    color: rgba(255,255,255,0.5);
}
.session_timer.attendant  {
    grid-column: 1 / span 2;
    color: #FFF;
    margin: 0;
    padding: 0;
    font-size: 11px;
    line-height: 11px;
    height: 11px;
    text-transform: uppercase;
}
@media screen and (max-width:768px) {
    .session_timer.attendant  {
        font-size: 10px;
        line-height: 10px;
        height: 10px;
    }
}
.session_timer #timeout {
    display: block;
    width: 100%;
    overflow: visible;
}
.session_timer.attendant #timeout {
    display: inline;
    width: auto;
    color: #999;
}
.logout_link {
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    color: #FC5000;
}
.attendant_link {
    display: block;
    position: absolute;
    bottom: 20px;
    right: 0;
    color: #FC5000;
}

/* Bottom Bar */
.bottombar {
    position: fixed;
    z-index: 20;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: rgba(0,0,0,0.9);
    overflow: visible;
    color: #FFF;
    display: grid;
    align-items: center;
}
.settings .bottombar button {
    text-transform: uppercase;;
}
@media screen and (max-width:768px) {
    .bottombar {
        position: relative;
    }
    .settings .bottombar {
        position: fixed;
    }
}
.footer_content {
    display: grid;
    grid-template-columns: 200px calc(100% - 200px);
    padding: 4px;
    align-items: center;
}
.footer_content .footer_left {
    position: relative;
    height:22px;
    padding-top:2px;
    padding-left: 10px;
    opacity: 0.7;
}
.footer_content .footer_left span {
    position: inline-block;
    bottom: 0;
    font-size: 12px;
}
.footer_content .footer_right {
    position: relative;
    display: grid;
    align-items: center;
    justify-items: flex-end;
}
.footer_content .footer_right .footer_info {
    float:right;
    width: auto;
    height: 100%;
}
.footer_content .footer_right .footer_info .gravatar_img {
    position: absolute;
    right: 10px;
    bottom: -4px;
    width: 42px;
    height: 42px;
    border-radius: 42px;
    border: 2px solid rgba(0,0,0,0.7);
}
.footer_content .footer_right .footer_info .footer_name {
    position: absolute;
    right: 64px;
    bottom: 0;
    top: auto;
    height: auto;
    overflow: visible;
    font-size: 12px;
    text-align: right;
}
.footer_content .footer_right .footer_info .footer_name a {
    font-size: 12px;
    color:rgba(255,255,255,0.5);
    padding-right: 10px;
}
.footer_content .footer_right .footer_info .footer_name a:hover {
    color:#FC5000;
}
.footer_content .footer_left a {
    font-size: 12px;
    color:rgba(255,255,255,0.5);
}
.footer_buttons {
    display: block;
    align-content: center;
    justify-content: flex-end;
    padding-right: 30px;
    opacity: 0;
    pointer-events: none;

    -webkit-transition: all 200ms ease 50ms;
    -moz-transition: all 200ms ease 50ms;
    -o-transition: all 200ms ease 50ms;
    transition: all 200ms ease 50ms;
}
.footer_right .footer_buttons .dms_btn {
    padding: 9px 24px 8px;
    margin: 0 0 0 8px;
    min-width: 100px;
}

/* Content */
.wrapper.container {
    padding-top: 120px;
    z-index: 1;
    padding-bottom: 80px;
    padding-left: 0;
    padding-right: 0;
}
body.login .wrapper.container {
    padding-top: 100px;
}
@media screen and (max-height: 768px) {
    body.login .wrapper.container {
        padding-bottom: 20px;
    }
}

/* Send Charges */
body.send_charges h1 {
    font-size: 2rem;
}
body.send_charges .wrapper.container {
    padding-top: 140px;
}
.test_grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 20px;
    margin-top: 20px;
}
.test_grid > div {
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    padding: 20px;
    overflow: hidden;
    border-radius: 4px;
}
.test_grid > div span {
    display: block;
    width: 100%;
}

#btn_send_alive_check,
#btn_send_link_start {
    margin: 0;
}
body.send_charges pre {
    margin-top: 20px;
    background: rgba(255,255,255,0.05);
    color: #fff;
}
body.send_charges pre:empty {
    opacity: 0;
    padding: 0;
}
body.oracle_tcp_tests pre {
    margin-top: 20px;
    background: rgba(255,255,255,0.05);
    color: #fff;
}
body.oracle_tcp_tests pre:empty {
    opacity: 0;
    padding: 0;
}


/* Reports */
.reports .wrapper.container {
    position: relative;
    padding-top: 164px;
    background: #0D0D0D;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 70px 1fr;
    padding-bottom: 0px;
}
#dashwrap {
    min-height: 300px;
    padding: 40px 20px 20px 20px;
    max-width: 100%;
    overflow: hidden;
}

/* Floors & Rooms */
#room_grid_wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 34px;
    grid-row-gap: 34px;
    margin: 40px 0;
}
#room_grid_wrapper > div.room_grid_item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.1);
    min-height: 80px;
    border-radius: 5px;
    opacity: 0;
    padding: 14% 10%;
    align-items: center;
    justify-items: center;
    cursor: pointer;
    overflow: hidden;
    z-index: 2;

    -webkit-transition: all 100ms ease 50ms;
    -moz-transition: all 100ms ease 50ms;
    -o-transition: all 100ms ease 50ms;
    transition: all 100ms ease 50ms;
}
#room_grid_wrapper > div.room_grid_item:hover {
    background: rgba(255,255,255,0.15);
}

div.room_grid_item .room_grid_status {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
}
div.room_grid_item .room_grid_status .room_dnd {
    position: relative;
    height: 100%;
    min-height: 100%;
    float: left;
    width: 5px;
    background-color: #EA362E;
    border: 0;
    display: none;
}
div.room_grid_item.dnd .room_grid_status .room_dnd {
    display: block;
}
div.room_grid_item .room_grid_status .room_grs {
    position: relative;
    height: 100%;
    min-height: 100%;
    float: left;
    width: 5px;
    background-color: #999;
    border: 0;
    display: none;
}
div.room_grid_item.grs .room_grid_status .room_grs {
    display: block;
}
div.room_grid_item .room_grid_status .room_bna {
    position: relative;
    height: 100%;
    min-height: 100%;
    float: left;
    width: 5px;
    background-color: #FD9831;
    border: 0;
    display: none;
}
div.room_grid_item.bna .room_grid_status .room_bna {
    display: block;
}


#room_grid_wrapper > div.room_grid_item > h3.room_grid_num {
    font-size: 1.8vw;
    color: #fff;
    grid-column: 1 / span 3;
    font-weight: normal;
    align-self: center;
    justify-self: center;
    font-family: 'Gibson', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 2;
}
#room_grid_wrapper > div.room_grid_item > p.room_grid_guestid {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 0.9vw;
    color: #fff;
    grid-column: 1 / span 3;
    font-weight: normal;
    font-family: 'Gibson', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 10% 0;
    position: relative;
    z-index: 2;
}

@media screen and (max-width:1200px) {
    #room_grid_wrapper {
        grid-template-columns: repeat(6, 1fr);
        grid-column-gap: 30px;
        grid-row-gap: 30px;
        margin: 34px 0;
    }
    #room_grid_wrapper > div.room_grid_item > h3.room_grid_num {
        font-size: 24px;
        margin: 0;
        padding: 0;
    }
    #room_grid_wrapper > div.room_grid_item > p.room_grid_guestid {
        font-size: 13px;
        margin: 0;
        padding: 10% 0;
    }
}
@media screen and (max-width:992px) {
    #room_grid_wrapper {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }
    #room_grid_wrapper > div.room_grid_item > p.room_grid_guestid {
        font-size: 12px;
    }
}
@media screen and (max-width:768px) {
    #room_grid_wrapper {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    #room_grid_wrapper > div.room_grid_item > h3.room_grid_num {
        font-size: 20px;
    }
    #room_grid_wrapper > div.room_grid_item > p.room_grid_guestid {
        font-size: 11px;
    }
}
@media screen and (max-width:600px) {
    #room_grid_wrapper {
        grid-template-columns: 1fr 1fr 1fr;
        grid-column-gap: 24px;
        grid-row-gap: 24px;
        margin: 28px 0;
    }
    #room_grid_wrapper > div.room_grid_item > p.room_grid_guestid {
        font-size: 10px;
    }
}
@media screen and (max-width:400px) {
    #room_grid_wrapper {
        grid-template-columns: 1fr 1fr;
    }
}


.floor_footer {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: #2B2A2B;
    border-top: 1px solid #828282;
    border-top: 1px solid rgba(130,130,130,0.4);
    z-index: 20;
}
.floor_legend {
    display: flex;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 10px;
    padding-left: 30px;
    padding-right: 30px;
    height: 50px;
    align-content: center;
    justify-content: space-around;
}
.floor_legend > div {
    align-self: center;
    justify-self: center;
}
.floor_legend > div.dnd,
.floor_legend > div.grs,
.floor_legend > div.bna,
.floor_legend > div.do {
    position: relative;
    padding-left: 30px;
}
.floor_legend > div.dnd::before,
.floor_legend > div.grs::before,
.floor_legend > div.bna::before,
.floor_legend > div.do::before  {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 10px;
}
.floor_legend > div.dnd::before {
    background-color: #EA362E;
}
.floor_legend > div.grs::before {
    background-color: #999999;
}
.floor_legend > div.bna::before {
    background-color: #FD9831;
}
.floor_legend > div.do::before {
    background-color: #1DC522;
}

.floor_legend > div.diag {
    position: relative;
    padding-left: 30px;
}
.floor_legend > div.diag::before {
    content: "";
    position: absolute;
    left: 1px;
    top: -1px;
    width: 16px;
    height: 16px;
    border: 1px solid #FFF;
    border-radius: 8px;
    padding: 0;
}
.floor_legend > div.diag::after {
    content: "i";
    position: absolute;
    left: 2.25px;
    top: 2px;
    width: 16px;
    height: 16px;
    padding: 0;
    text-align: center;
    font-size: 12px;
    line-height: 12px;
    color: #FFF;
}
.floor_legend > div.san {
    position: relative;
    padding-left: 30px;
    padding-top: 2px;
    height: 20px;
    background: url(../images/spray.png);
    background-position: 5px 0;
    background-size: 11px 20px;
    background-repeat: no-repeat;
}
@media screen and (max-width:992px) {
    .floor_footer {
        height: 60px;
    }
    .floor_legend {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-row-gap: 6px;
        height: 60px;
        align-content: center;
        justify-content: center;
        padding-left: 12%;
    }
    .floor_legend > div {
        justify-self: left;
        font-size: 12px;
    }
}
@media screen and (max-width:768px) {
    .floor_legend {
        padding-left: 4%;
        grid-template-columns: auto auto auto;
        grid-column-gap: 5%;
    }
}
@media screen and (max-width:600px) {
    .floor_legend > div {
        font-size: 10px;
        padding-top: 1px;
    }
}

/* Floor Select */
#room_select_wrapper {
    display: block;
    width: 100%;
}
#room_select_wrapper label {
    color: #FFF;
    font-size: 18px;
    line-height: 36px;
    text-align: left;
    vertical-align: middle;
    margin-right: 16px;
}

/* Dark Forms */
.dms_btn {
    display: inline-block;
    padding: 14px 46px 14px 46px;
    margin: 40px 10px 10px 10px;
    color: #E35C33;
    border: 1px solid #E35C33;
    background: rgba(0,0,0,0.1);
    border-radius: 3px;
    line-height: 1;
    text-decoration: none;
    text-transform: capitalize;
    outline: none !important;

    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}
.dms_btn.grey {
    background-color: #525252;
    border: 1px solid #525252;
    color: #FFF;
}
.dms_btn.grey.sm {
    background-color: #525252;
    border: 1px solid #525252;
    color: #FFF;
    margin: 0;
    padding: 4px 8px;
}
.dms_btn.grey.sm:hover {
    background-color: #FD501E;
    border: 1px solid #FD501E;
}
.dms_btn.send {
    margin-left: 0;
    margin-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    text-transform: uppercase;
    font-size: .9em;
    width:100%;
    padding-top: 14px;
    padding-bottom: 14px;
}
.dms_btn.oracle {
    width: 100%;
    margin-left: 0;
    margin-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    text-transform: uppercase;
    font-size: .9em;
}
.dms_btn.diagnostics,
.dms_btn.iot_diagnostics {
    width: auto;
    margin-left: 0;
    margin-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    text-transform: uppercase;
    font-size: .9em;
    background: rgba(0,0,0,0.9);
    color: #FFF;
}
.dms_btn.diag {
    text-transform: uppercase;
    margin-left: 0px;
    font-size: .9em;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    text-align: center;
    margin-top: 10px;
}
.dms_btn.diagnostics:disabled,
.dms_btn.iot_diagnostics:disabled {
    opacity: 0.7;
    cursor: default;
    pointer-events: none;
}
.dms_btn.reset {
    margin-left: 0px;
    background: rgba(0,0,0,0.9);
    color: #FFF;
}
.dms_btn:hover {
    background-color: #E35C33;
    color: #FFF;
    cursor: pointer;
}
a.dms_btn,
a.dms_btn:hover,
a.dms_btn:focus,
a.dms_btn:visited {
    text-decoration: none;
}
.dms_btn:focus {
    color: #E35C33;
    outline: none !important;
    background-color: rgba(255,255,255,0.05);
}
.hotel_topbar .dms_btn.control {
    float: right;
    clear: none;
    text-transform: uppercase;
}
@media screen and (max-width:768px) {
    .dms_btn {
        margin: 20px 6px;
        padding: 14px 30px 14px 30px;
    }
    .hotel_topbar .dms_btn.control {
        float: left;
        clear: both;
        margin-top: 20px;
        margin-left: 0px;
    }
}



.bottombar .dms_btn {
    display: inline-block;
    visibility: visible;
    opacity: 1;
    margin-top: 0px;
}

.dms_select {
    color: #454545;
    background: #FFF;
    border: 1px solid #FFF;
    min-width: 240px;
    padding: 8px;
    border-right: 10px solid #FFF;
    font-size: 16px;
    line-height: 16px;
}
.DTE_Field_InputControl select {
    color: #454545;
    background: #FFF;
    border: 1px solid #FFF;
    width: 100%;
    padding: 4px;
    border-right: 10px solid #FFF;
    font-size: 14px;
    line-height: 14px;
    border-radius: 2px;
}

/* Room Page and Minibar Controls */
#content3 {
    display: block;
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
    padding-left: 0px;
}
#content3 ul.itemSelectMenu {
    padding-bottom: 0px;
}
.room_wrapper {
    display: grid;
    grid-template-columns: 40px calc(100% - 80px);
    grid-column-gap: 30px;
    position: relative;
    width: 100%;
    padding-bottom: 50px;

    -webkit-transition: all 600ms ease 50ms;
    -moz-transition: all 600ms ease 50ms;
    -o-transition: all 600ms ease 50ms;
    transition: all 600ms ease 50ms;
}
.room_wrapper.open {
    grid-template-columns: 50% 50%;
}
#room_control {
    position: relative;
    background: rgba(255,255,255,0.0);
    overflow: hidden;
    margin: 0;
    padding: 0;

    -webkit-transition: all 600ms ease 50ms;
    -moz-transition: all 600ms ease 50ms;
    -o-transition: all 600ms ease 50ms;
    transition: all 600ms ease 50ms;
}

.room_control_form {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    z-index: 1;
    width: 100%;
    min-height: 300px;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    background: rgba(255,255,255,0.0);
    padding: 30px 50px 30px 30px;
    opacity: 0;
    font-size: 18px;
    letter-spacing: 1px;

    -webkit-transition: all 600ms ease 50ms;
    -moz-transition: all 600ms ease 50ms;
    -o-transition: all 600ms ease 50ms;
    transition: all 600ms ease 50ms;
}
.room_control_form.synced {
    opacity: 1;
}

.room_minibar_form {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 30px;
    margin-top: 20px;
    opacity: 0;
    font-size: 18px;
    letter-spacing: 1px;

    -webkit-transition: all 600ms ease 50ms;
    -moz-transition: all 600ms ease 50ms;
    -o-transition: all 600ms ease 50ms;
    transition: all 600ms ease 50ms;
}
div.synced .room_minibar_form {
    opacity: 1;
}
.room_minibar_footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 8px;

    justify-content: space-between;
    align-content: center;
    align-items: center;
    font-size: 14px;
}
.room_minibar_footer > div > span:first-child {
    opacity: 0.6;
}
.room_minibar_footer > div > span:last-child {
    opacity: 1;
    font-weight: bold;
}

.room_light_wrapper,
.room_standby_wrapper,
.room_door_wrapper,
.room_quiet_wrapper {
    display: grid;
    grid-template-columns: 120px 80px 1fr;
    height: 34px;
    overflow: hidden;
}


.room_temp_wrapper {
    display: grid;
    grid-template-columns: 120px 140px 50px 1fr;
    height: 34px;
    overflow: hidden;
    align-items: flex-end;
    align-content: flex-end;
}
.room_temp_wrapper .iot_spinner {
    /* opacity: 1; */
    top: 10px;
    left: 10px;
}
.room_temp_wrapper.one .iot_temp_wrap > div.temp_1 {
    opacity: 0.95;
}
.room_temp_wrapper.two .iot_temp_wrap > div.temp_1, 
.room_temp_wrapper.two .iot_temp_wrap > div.temp_2 {
    opacity: 0.95;
}
.room_temp_wrapper.three .iot_temp_wrap > div.temp_1, 
.room_temp_wrapper.three .iot_temp_wrap > div.temp_2, 
.room_temp_wrapper.three .iot_temp_wrap > div.temp_3 {
    opacity: 0.95;
}

.room_temp_wrapper.await_on .iot_temp_wrap {
    opacity: 0.5;
}
.room_light_wrapper > span,
.room_standby_wrapper > span,
.room_door_wrapper > span,
.room_quiet_wrapper > span {
    align-self: center;
    font-weight: bold;
    padding-top: 1px;
}
.iot_temp_wrap {
    display: grid;
    height: 34px;
    width: 100%;
    grid-template-columns: 18px auto auto auto 34px;
    grid-column-gap: 6px;
    align-items: flex-end;
    align-content: flex-end;
}
.iot_temp_wrap > div {
    display: grid;
    width: 100%;
    height: 34px;
    /* background: rgba(255,255,255,0.1); */
    align-items: flex-end;
    align-content: flex-end;
}
.iot_temp_wrap > div i.demo-icon {
    margin: 0;
    padding: 0;
}
.temp_sm {
    font-size: 18px;
    line-height: 18px;
    height: 18px;
    width: 18px;
}
.temp_lg {
    font-size: 34px;
    line-height: 34px;
    height: 34px;
    width: 34px;
}

.temp_1, .temp_2, .temp_3 {
    width: 100%;
    background: #FFF;
    opacity: 0.2;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
}
.iot_temp_wrap > div.temp_1 {
    height: 16px;
}
.iot_temp_wrap > div.temp_2 {
    height: 25px;
}
.iot_temp_wrap > div.temp_3 {
    height: 34px;
}

.room_temp_wrapper.one .iot_temp_wrap > div.temp_1 {
    opacity: 0.95;
}
.room_temp_wrapper.two .iot_temp_wrap > div.temp_1, 
.room_temp_wrapper.two .iot_temp_wrap > div.temp_2 {
    opacity: 0.95;
}
.room_temp_wrapper.three .iot_temp_wrap > div.temp_1, 
.room_temp_wrapper.three .iot_temp_wrap > div.temp_2, 
.room_temp_wrapper.three .iot_temp_wrap > div.temp_3 {
    opacity: 0.95;
}

/* Dev Tools */
#iot_dev_tools {
    background: #454545;
    color: #FFF;
    font-size: 10px;
    width: 100%;
    display: inline-block;
    padding: 20px;
    border-radius: 10px;
    overflow: scroll;
    margin-top: 30px;
    overflow: hidden;
}
#iot_dev_tools span {
    display: block;
    width: 100%;
    font-size: 16px;
    color: #FFF;
    padding-bottom: 10px;
}
.room_error_wrapper {
    
}
.iot_error_wrap {
    display: grid;
    grid-template-columns: 1fr 80px;
    grid-column-gap: 10px;
}
.iot_error_wrap .iot_spinner {
    /* visibility: visible;
    opacity: 1; */
}
.room_error_wrapper > span:first-child {
    grid-column: 1 / span 3;
}
#iot_dev_tools input[type="text"] {
    height: 100%;
    font-size: 14px;
    line-height: 27px;
    border: 1px solid #eaeaea;
    border-radius: 2px;
    width: 100%;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
    border: 1px solid #eaeaea;
    color: #454545;
    border-radius: 5px;
}
.iot_button {
    background: #d36440;
    border: 1px solid #d36440;
    border-radius: 5px;
    color:#fff;
    cursor: pointer;
}

.room_wrapper.open .room_control_form {
    background: rgba(255,255,255,0.1);
    opacity: 1;
}
.room_sync_wrapper {
    display: grid;
    grid-template-columns: 40px 1fr;
}
.room_sync_wrapper div {
    align-self: flex-start;
    justify-self: flex-start;
}
.room_sync_wrapper span {
    align-self: flex-start;
    justify-self: flex-start;
    padding-top: 4px
}
.room_control_toggle {
    display: block;
    
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    overflow: visible;
    z-index: 2;
}
.room_control_toggle span {
    display: block;
    position: absolute;
    right: 0;
    bottom: -20px;
    transform: rotate(-90deg);
    transform-origin: bottom right;
    width: auto;
    height: auto;
    overflow: visible;
    background: #666666;
    font-size: 18px;
    line-height: 18px;
    padding: 11px 20px;
    border-radius: 0 0 8px 8px;
    cursor: pointer;

    -webkit-transition: all 200ms ease 50ms;
    -moz-transition: all 200ms ease 50ms;
    -o-transition: all 200ms ease 50ms;
    transition: all 200ms ease 50ms;
}
.room_wrapper.open .room_control_toggle span {
    border-radius: 8px 8px 0 0;
}
.room_control_toggle span:after {
    content: "";
    position: absolute;
    top: 10px;
    right: -10px;
    background: white;
    z-index: 9;
    border-radius: 11px;
    width: 21px;
    height: 21px;
}
.room_control_toggle span:before {
    content: "";
    position: absolute;
    top: 16px;
    right: -4px;
    background: transparent;
    z-index: 10;
    border-radius: 0px;
    width: 6px;
    height: 6px;
    border-left: 2px solid #454545;
    border-bottom: 2px solid #454545;
    transform: rotate(-45deg);
    transform-origin: 50% 50%;

    -webkit-transition: all 100ms ease 50ms;
    -moz-transition: all 100ms ease 50ms;
    -o-transition: all 100ms ease 50ms;
    transition: all 100ms ease 50ms;
}
.room_wrapper.open .room_control_toggle span:before {
    transform: rotate(135deg);
    top: 18px;
}
.room_control_toggle:hover span:before {
    transform: rotate(135deg);
    top: 18px;
}
.room_wrapper.open .room_control_toggle:hover span:before {
    transform: rotate(-45deg);
    top: 16px;
}


#room_menu {
    position: relative;
}


/* DataTables Overrides */
.dataTable {
    font-size: 12px;
    color: #454545;
}

div.DTE div.DTE_Processing_Indicator {
    right: 5% !important;
}
div.DTE div.DTE_Processing_Indicator span,
div.DTE div.DTE_Processing_Indicator:before,
div.DTE div.DTE_Processing_Indicator:after {
    background: white;
    border: 1px solid rgba(255,255,255,0.4);
    background-color: rgba(255,255,255,0.2);
}

table.dataTable thead th,
table.dataTable thead td,
table.dataTable tfoot th,
table.dataTable tfoot td {
    padding: 14px 18px 14px 10px;
    border-color: #404040;
}
table.dataTable thead th.ui-state-default:last-child,
table.dataTable tfoot th.ui-state-default:last-child {
    border-right-width: 0;
}
.dataTables_scrollHead.ui-state-default .dataTables_scrollHeadInner table.dataTable thead th.ui-state-default {
    -moz-box-shadow:    inset 0 -14px 10px -14px rgba(0,0,0,0.1);
    -webkit-box-shadow: inset 0 -14px 10px -14px rgba(0,0,0,0.1);
    box-shadow:         inset 0 -14px 10px -14px rgba(0,0,0,0.1);

    vertical-align: top;
}
.dataTables_scrollFoot.ui-state-default .dataTables_scrollFootInner table.dataTable tfoot th.ui-state-default {
    -moz-box-shadow:    inset 0 14px 10px -14px rgba(0,0,0,0.1);
    -webkit-box-shadow: inset 0 14px 10px -14px rgba(0,0,0,0.1);
    box-shadow:         inset 0 14px 10px -14px rgba(0,0,0,0.1);

    vertical-align: top;
}
div.dt-buttons .dt-button:hover>span {
    background: none !important;
}
.dataTables_wrapper .ui-resizable-s {
	height: 13px;
	background: none;
	bottom: 0;
	cursor: ns-resize;
	opacity: 1;
	z-index: 999;
	display: block !important;
}
.dataTables_wrapper .ui-resizable-s:hover,
.dataTables_wrapper .ui-resizable-s:active {
	background: transparent url('images/vert.png') 50% 50% no-repeat;
	background-size: 13px 13px;
	opacity: 1;
}
.dataTables_wrapper .ui-resizable-s::after {
	content: "";
	display: block;
	height: 1px;
	width: 100%;
	background: #CCC;
	margin-top: 6px;
	opacity: 1;
}
.dataTables_wrapper .ui-resizable-s:hover::after,
.dataTables_wrapper .ui-resizable-s:active::after {
	background: #337ab7;
}
.dataTables_wrapper .bottom {
    border-top: 1px solid #CCC;
    height: 40px;
    background: #ccc;
    overflow: hidden;
}
.dataTables_wrapper .dataTables_info {
    clear: none;
}
.dataTables_wrapper .dataTables_length {
    float: none;
    height: 30px;
    display: inline-block;
    margin-left: 6px;
    margin-right: 10px;
}
/* .dataTables_wrapper#unpostedChargesTable_wrapper {

}
.dataTables_wrapper#unpostedChargesTable_wrapper .dataTables_scrollHead.ui-state-default .dataTables_scrollHeadInner table.dataTable thead th.ui-state-default:nth-child(9),
.dataTables_wrapper#unpostedChargesTable_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(9),
.dataTables_wrapper#unpostedChargesTable_wrapper .dataTables_scrollHead.ui-state-default .dataTables_scrollHeadInner table.dataTable thead th.ui-state-default:nth-child(10),
.dataTables_wrapper#unpostedChargesTable_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(10),
.dataTables_wrapper#unpostedChargesTable_wrapper .dataTables_scrollHead.ui-state-default .dataTables_scrollHeadInner table.dataTable thead th.ui-state-default:nth-child(11),
.dataTables_wrapper#unpostedChargesTable_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(11),
.dataTables_wrapper#unpostedChargesTable_wrapper .dataTables_scrollHead.ui-state-default .dataTables_scrollHeadInner table.dataTable thead th.ui-state-default:nth-child(12),
.dataTables_wrapper#unpostedChargesTable_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(12),
.dataTables_wrapper#unpostedChargesTable_wrapper .dataTables_scrollHead.ui-state-default .dataTables_scrollHeadInner table.dataTable thead th.ui-state-default:nth-child(13),
.dataTables_wrapper#unpostedChargesTable_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(13),
.dataTables_wrapper#unpostedChargesTable_wrapper .dataTables_scrollHead.ui-state-default .dataTables_scrollHeadInner table.dataTable thead th.ui-state-default:nth-child(14),
.dataTables_wrapper#unpostedChargesTable_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(14),
.dataTables_wrapper#unpostedChargesTable_wrapper .dataTables_scrollHead.ui-state-default .dataTables_scrollHeadInner table.dataTable thead th.ui-state-default:nth-child(15),
.dataTables_wrapper#unpostedChargesTable_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(15) {
    text-align: right;
} */
.dataTables_wrapper#unpostedChargesTable_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(6) {
    min-width: 120px;
}
.dataTables_wrapper#unpostedChargesTable_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(8),
.dataTables_wrapper#unpostedChargesTable_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(4) {
    min-width: 160px;
}
.dataTables_wrapper#unpostedChargesTable_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(3) {
    min-width: 80px;
}

/* #roomsTable_wrapper.dataTables_wrapper .dataTables_scrollHead div.dataTables_scrollHeadInner > table > thead > tr > th:nth-child(4), 
#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(4) {
    width: 40px;
    max-width: 40px;
    min-width: 40px;
    display: inline-block;
} */
.dataTables_wrapper#unpostedChargesTable_wrapper .len,
.dataTables_wrapper#unpostedChargesTable_wrapper .dataTables_length {
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin-bottom: 10px !important;
}
.dataTables_wrapper .dataTables_length label {
    color: #454545;
    font-size: 14px;
    font-weight: normal;
    color: #FFF;
    float: left;
    display: block;
    /* width: 104px; */
    height: 30px;
    position: relative;
}
.dataTables_wrapper .dataTables_length label span {
    display: inline-block;
    margin: 0 4px;
    color: rgba(255,255,255,0.6);
}
.dataTables_wrapper .dataTables_length select {
    height: 30px;
    margin: 0;
    padding: 0 8px;
    color: #757575;
    /* position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%; */
    border: 1px solid #eaeaea;
    border-radius: 2px;
    background: #FFF;
    display: inline-block;
}
.dataTables_wrapper .dataTables_length select:hover {
    border: 1px solid #eaeaea;
}
.dataTables_wrapper .buttons {
    position: relative;
    display: block;
    overflow: hidden;
}
#clientsTable_wrapper .buttons,
#languagesTable_wrapper .buttons {
    margin-bottom: 30px;
}
#clientsTable_wrapper .buttons button,
#languagesTable_wrapper .buttons button {
    height: 30px;
    border-radius: 2px;
}

#languagesTable_wrapper {
    display: grid;
    grid-template-columns: 1fr auto;
}
#languagesTable_wrapper .maintable {
    grid-column: 1 / span 2;
    grid-row: 2;

}
#languagesTable_wrapper .paginator {
    grid-column: 1 / span 2;
    grid-row: 3;

}

#languagesTable_wrapper .buttons {
    grid-column: 1 / span 1;
    grid-row: 1;
}
#languagesTable_wrapper .export {
    display: inline-block;
    width: 100%;
    height: 100%;
    overflow: visible;
    grid-column: 2 / span 1;
    grid-row: 1;
}

@media screen and (max-width: 768px) {
    #languagesTable_wrapper {
        grid-template-columns: 1fr;
        width: 100%;
    }
    #languagesTable_wrapper .buttons {
        grid-column: 1 / span 1;
        grid-row: 1;
        grid-template-columns: auto minmax(180px, auto);
        margin-bottom: 10px;
        max-width: 100%;
    }
    #languagesTable_wrapper .export {
        grid-column: 1 / span 1;
        grid-row: 2;
        margin-bottom: 10px;
    }
    #languagesTable_wrapper .maintable {
        grid-column: 1 / span 1;
        grid-row: 3;
    }
    #languagesTable_wrapper .paginator {
        grid-column: 1 / span 1;
        grid-row: 4;
    }
    #languagesTable_wrapper .dataTables_length {
        min-width: 200px;
        display: grid;
        justify-content: flex-start;
    }
    #languagesTable_wrapper .dataTables_length label span:last-child {
        display: none;
    }
}

.dataTables_wrapper .dataTables_filter label {
    color: #FFF;
    font-size: 14px;
    font-weight: normal;
    float: left;
    display: block;
    width: 130px;
    height: 30px;
    position: relative;
    color: #FFF;
}
.dataTables_wrapper .dataTables_filter label input {
    height: 100%;
    font-size: 14px;
    line-height: 27px;
    border: 1px solid #eaeaea;
    border-radius: 2px;
    width: 100%;
    padding-left: 4px;
    padding-right: 4px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 27px;
    border: 1px solid #eaeaea;
    color: #454545;
    border-radius: 5px;
}
#clientsTable_wrapper .dataTables_filter label input,
#hotelsTable_wrapper .dataTables_filter label input,
#usersTable_wrapper .dataTables_filter label input,
#languagesTable_wrapper .dataTables_filter label input {
    height: 30px;
    border-radius: 2px;
    margin-left: 0px;
}
.dataTables_wrapper .dataTables_filter label input:focus,
.dataTables_wrapper .dataTables_filter label input:hover {
    border: 1px solid #696969;
}
.dataTables_wrapper .dataTables_filter label input[type="search"] {
    margin-left: 0px;
}
.dataTables_wrapper .dataTables_paginate {
    padding-top: 0px;
    margin-top: 0px;
    float: right;
    margin-left: 20px;
    margin-bottom: 8px;
}
.dataTables_wrapper .dataTables_paginate .fg-button {
    background-color: #1C1E22;
    border: 1px solid #979797;
    /* height: 24px; */
    padding: 8px 10px;
    border-radius: 2px;
    /* color: #818181; */
    color: rgba(255,255,255,0.8);
    font-size: 11px;
    line-height: 11px;

    transition: all 200ms;
}
.dataTables_wrapper .dataTables_paginate .fg-button:hover {
    color: rgba(255,255,255,1);
    background: rgba(255,255,255,0.05);
}
.dataTables_wrapper .dataTables_paginate .fg-button.next,
.dataTables_wrapper .dataTables_paginate .fg-button.previous {
    background-color: #434343;
    border-color: #434343;
    padding-left: 20px;
    padding-right: 20px;
}
.dataTables_wrapper .dataTables_paginate span > a {
    padding-top: 7px;
    padding-bottom: 7px;
}
.dataTables_wrapper .dataTables_paginate span > a.fg-button.ui-state-disabled {
    background: #FD501E;
    border: #FD501E;
    opacity: 1;
}
div.dtk-focus-alt table.dataTable tbody th.focus,
div.dtk-focus-alt table.dataTable tbody td.focus {
    box-shadow: none;
    border-bottom: 1px solid rgba(0,0,0,0.5);
}
table.dataTable tbody th.focus,
table.dataTable tbody td.focus {
    box-shadow: none;
    border-bottom: 1px solid rgba(0,0,0,0.5);
}

/* Pagination */
.paginator {
    display: flex;
    width: 100%;
    justify-items: flex-start;
    align-content: center;
    margin-bottom: 20px;
}
#clientsTable_wrapper .paginator,
#languagesTable_wrapper .paginator {
    margin-top: 34px;
    margin-bottom: 4px;
}
#clientsTable_wrapper .paginator .dataTables_paginate,
#languagesTable_wrapper .paginator .dataTables_paginate {
    margin-left: 0px;
}
#unpostedChargesTable_wrapper .paginator {
    margin-left: 0px;
    margin-top: 20px;
    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 10px;
}
#unpostedChargesTable_wrapper .paginator .dataTables_paginate {
    padding-left: 0px;
    margin-left: 0px;
    justify-self: flex-end;
}

.dataTables_wrapper .dataTables_filter {
    display: inline-block;
    float: none;
    margin-left: 6px;
    height: 30px;
    color: #FFF;
}
.dataTables_wrapper .dt-buttons {
    float: left;
    height: 30px;
}
/* body div.maintable {
    border-right: 1px solid #CCC;
    border-left: 1px solid #CCC;
} */
body #hotelsTable_wrapper div.maintable {
    border-right: none;
    border-left: none;
}
body div.dataTables_scrollBody {
    background: #b4b4b4 !important;
}
table.dataTable.display tbody tr.odd > .sorting_1 {
    background-color: #1c1c1c;
}
table.dataTable.display tbody tr.even > .sorting_1 {
    background-color: #2a2a2a;
}
table.dataTable.display tbody tr.odd > .sorting_2 {
    background-color: #1f1f1f;
}
table.dataTable.display tbody tr.even > .sorting_2 {
    background-color: #2f2f2f;
}
table.dataTable.display tbody tr.odd > .sorting_3 {
    background-color: #222222;
}
table.dataTable.display tbody tr.even > .sorting_3 {
    background-color: #333333;
}
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td,
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tfoot > tr > td {
    border-right: 1px solid rgba(0,0,0,0.05);
    border-top: 1px solid rgba(0,0,0,0.3);
    background-color: #e7e7e7;
}
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td,
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td {
    border-right: 1px solid rgba(0,0,0,0.05);
    border-top: 1px solid rgba(0,0,0,0.3);
    color: rgba(255,255,255,0.7);
}
.fixedHeader-floating,
div.dtfh-floatingparent.dtfh-floatingparenthead {
    z-index: 9999 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    overflow: hidden;
}

table.dataTable.no-footer.fixedHeader-floating {
    border-bottom: 0;
    background: transparent;
    background-color: transparent;
    z-index: 9999 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    overflow: hidden;
    /* display: block; */
}

table.dataTable.no-footer.fixedHeader-floating thead th.ui-state-default, 
table.dataTable.no-footer.fixedHeader-floating tfoot th.ui-state-default {
    background-color: rgba(60,60,60,0.95);
    min-width: 0px !important;
    border-right: 0;
    border-left: 0;
    padding: 16px 10px;
    border-bottom: 1px solid #1C1E22;
}

body.reports table.dataTable.no-footer.fixedHeader-floating {
    display: none;
}
body.article_listing table.dataTable.no-footer.fixedHeader-floating.article_listing {
    display: block;
}
body.article_sales table.dataTable.no-footer.fixedHeader-floating.article_sales {
    display: block;
}
body.attendant_productivity table.dataTable.no-footer.fixedHeader-floating.attendant_productivity {
    display: block;
}
body.attendant_sales table.dataTable.no-footer.fixedHeader-floating.attendant_sales {
    display: block;
}
body.room_sales table.dataTable.no-footer.fixedHeader-floating.room_sales {
    display: block;
}
body.unposted_room table.dataTable.no-footer.fixedHeader-floating.unposted_room {
    display: block;
}
/* body.clients table.dataTable.no-footer.fixedHeader-floating.clients_table {
    display:block;
    width: 100%;
    z-index: 9999 !important;
} */
body.clients table.dataTable.no-footer.fixedHeader-floating {
    /* display:block; */
    width: 100%;
    z-index: 9999 !important;
}
body.clients table.dataTable.no-footer.fixedHeader-floating thead {
    width: 100% !important;
}
body.clients table.dataTable.no-footer.fixedHeader-floating thead tr td {
    border-bottom: 0 !important;
    vertical-align: top;
    padding: 14px 18px 14px 10px;
}

.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr.odd > td:first-child,
.dataTables_wrapper .DTFC_LeftWrapper .DTFC_LeftBodyWrapper  table > tbody > tr.odd > td:first-child {
    /* background-color: #eaeaea;
    border-right: 1px solid #c5c5c5;
    background-color: #212121; */
    border-color: rgba(0,0,0,0.3);

    -moz-box-shadow:    inset -14px 0 10px -14px rgba(0,0,0,0.1);
    -webkit-box-shadow: inset -14px 0 10px -14px rgba(0,0,0,0.1);
    box-shadow:         inset -14px 0 10px -14px rgba(0,0,0,0.1);
}
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr.even > td:first-child,
.dataTables_wrapper .DTFC_LeftWrapper .DTFC_LeftBodyWrapper  table > tbody > tr.even > td:first-child {
    /* background-color: #efefef;
    border-right: 1px solid #c5c5c5;
    background-color: #313131; */
    border-color: rgba(0,0,0,0.3);

    -moz-box-shadow:    inset -14px 0 10px -14px rgba(0,0,0,0.1);
    -webkit-box-shadow: inset -14px 0 10px -14px rgba(0,0,0,0.1);
    box-shadow:         inset -14px 0 10px -14px rgba(0,0,0,0.1);

}
.ui-icon-caret-2-n-s {
    opacity: 0;
}

table.dataTable tbody td.select-checkbox::before,
table.dataTable tbody td.select-checkbox::after,
table.dataTable tbody th.select-checkbox::before,
table.dataTable tbody th.select-checkbox::after {
    top: auto;
    border-color: rgba(255,255,255,0.6);
    min-width: 14px;
    min-height: 14px;
    border-radius: 1px;
}
table.dataTable tbody tr.selected td.select-checkbox::before {
    background-color: rgba(0,0,0,0.1);
    border-radius: 2px;
}
table.dataTable tr.selected td.select-checkbox::after {
    margin-top: -5px;
    margin-left: -1px;
    text-shadow: 0px 0px 1px #FAFAE0;
    color: #FFF;
    font-size: 1px;
    line-height: 1px;
    width: 4px;
    min-width: 4px;
    height: 9px;
    min-height: 9px;
    overflow: hidden;
    content: "";
    border-right: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    transform: rotate(45deg);
    border-radius: 0;
}
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.even {
    background-color: #383838;
}
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
    /* background-color: #fdfdfd; */
    background-color: #252525;
}
body table.dataTable.stripe tbody tr.odd.selected,
body table.dataTable.display tbody tr.odd.selected {
    background-color: #234653;
}
body table.dataTable.stripe tbody tr.even.selected,
body table.dataTable.display tbody tr.even.selected {
    background-color: #325461;
}
body table.dataTable.display tbody > tr.odd.selected > .sorting_1,
body table.dataTable.order-column.stripe tbody > tr.odd.selected > .sorting_1 {
    background-color: #1a343e;
}
body table.dataTable.display tbody > tr.even.selected > .sorting_1,
body table.dataTable.order-column.stripe tbody > tr.even.selected > .sorting_1 {
    background-color: #253f49;
}
body table.dataTable.display tbody > tr.odd.selected > .sorting_2,
body table.dataTable.order-column.stripe tbody > tr.odd.selected > .sorting_2 {
    background-color: #1d3a45;
}
body table.dataTable.display tbody > tr.even.selected > .sorting_2,
body table.dataTable.order-column.stripe tbody > tr.even.selected > .sorting_2 {
    background-color: #2a4651;
}
body table.dataTable.display tbody > tr.odd.selected > .sorting_3,
body table.dataTable.order-column.stripe tbody > tr.odd.selected > .sorting_3 {
    background-color: #20404c;
}
body table.dataTable.display tbody > tr.even.selected > .sorting_3,
body table.dataTable.order-column.stripe tbody > tr.even.selected > .sorting_3 {
    background-color: #2d4c58;
}
.ui-corner-all {
    border-radius: 0 !important;
}
table.dataTable thead th.ui-state-default:first-child,
table.dataTable tfoot th.ui-state-default:first-child {
    border-left-width: 0;
}
table.dataTable thead th.ui-state-default,
table.dataTable tfoot th.ui-state-default {
    /* background-color: #e7e7e7; */
    background-color: #404040;
    color: #FFF;
}
.ui-widget-overlay.ui-front {
    background-color: #000;
    opacity: 0.84;

    transition: all 500ms;
}
.dataTable .checkbox {
    display: inline-block;
}
.dataTable .DTFC_LeftBodyLiner {
    padding-right: 0;
    overflow: hidden;
}

/* DataTables Bubbles Overrides */
.ui-dialog {
    z-index: 100;
}
div.DTE_Bubble {
    z-index: 100;
}
div.DTE_Bubble div.DTE_Bubble_Liner {
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
}
div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header {
    display: block;
    overflow: hidden;
    border-radius: 0 !important;
    background-color: rgba(0,0,0,0.9);
    color: #FFF;
    padding: 10px 10px 6px 10px;
    display: none;
}
body.users div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header,
body.users div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header {
    display: block;
    padding-top: 10px;
}

body.users div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header+div.DTE_Bubble_Table {
    padding-top: 0;
}

div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header+div.DTE_Form_Info {
    padding: 16px 20px 14px 20px;
    text-align: center;
    display: grid;
    align-content: center;
    justify-content: center;
    font-size: 1.1em;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

div.DTE_Bubble div.DTE_Bubble_Liner .DTE_Form_Info {
    display: block;
    overflow: hidden;
    background-color: #2A2A2A;
    background-color: rgba(42,42,42,0.98);
    color: #FFF;
    padding: 10px;
}
div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table>form div.DTE_Form_Content {
    display: block;
    overflow: hidden;
    background-color: #2A2A2A;
    background-color: rgba(42,42,42,0.98);
    color: #FFF;
    padding: 20px;
}
div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table>form div.DTE_Form_Content input {
    color: #454545;
    background-color: #FFF;
    border: 1px solid #FFF;
    border-radius: 2px;
}
div.DTE_Field input[type="color"], 
div.DTE_Field input[type="date"], 
div.DTE_Field input[type="datetime"], 
div.DTE_Field input[type="datetime-local"], 
div.DTE_Field input[type="email"], 
div.DTE_Field input[type="month"], 
div.DTE_Field input[type="number"], 
div.DTE_Field input[type="password"], 
div.DTE_Field input[type="search"], 
div.DTE_Field input[type="tel"], 
div.DTE_Field input[type="text"], 
div.DTE_Field input[type="time"], 
div.DTE_Field input[type="url"], 
div.DTE_Field input[type="week"] {
    color: #454545;
    background-color: #FFF;
    border: 1px solid #FFF;
    border-radius: 2px;
    padding-top: 6px;
    padding-bottom: 6px;
    min-height: 30px;
}
.dataTable div.DTE_Field input[type="color"], 
.dataTable div.DTE_Field input[type="date"], 
.dataTable div.DTE_Field input[type="datetime"], 
.dataTable div.DTE_Field input[type="datetime-local"], 
.dataTable div.DTE_Field input[type="email"], 
.dataTable div.DTE_Field input[type="month"], 
.dataTable div.DTE_Field input[type="number"], 
.dataTable div.DTE_Field input[type="password"], 
.dataTable div.DTE_Field input[type="search"], 
.dataTable div.DTE_Field input[type="tel"], 
.dataTable div.DTE_Field input[type="text"], 
.dataTable div.DTE_Field input[type="time"], 
.dataTable div.DTE_Field input[type="url"], 
.dataTable div.DTE_Field input[type="week"] {
    padding-top: 1px;
    padding-bottom: 1px;
    height: 20px;
    min-height: auto;
    font-size: 12px;
}

.clients .ui-dialog-titlebar .ui-dialog-title {
    float: none;
}
div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons {
    display: block;
    overflow: hidden;
    background-color: #2A2A2A;
    background-color: rgba(42,42,42,0.98);
    color: #FFF;
    /* padding: 20px; */
    padding: 0 20px 20px 20px;
    margin-top: 0;
    /* border-top: 1px solid rgba(255,255,255,0.1); */
}
div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons .ui-button {
    margin-left: 4px;
    border: 1px solid #FD501E;
    border-radius: 2px;
    background: none;
    color: #FD501E;
    font-size: 11px;
    font-family: "Gibson", Arial, Helvetica, sans-serif;
    padding: 5px 16px;

    transition: all 250ms;
}
div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons .ui-button:hover {
    background: #FD501E;
    color: #FFF;
}
div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons .ui-button.ui-corner-all {
    border-radius: 2px !important;
}
div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table>form div.DTE_Form_Content div.DTE_Field>label {
    padding-bottom: 4px;
}
div.DTE_Bubble div.DTE_Bubble_Triangle {
    transform: rotate(0deg) !important;
    background: transparent !important;
    border-color: transparent !important;
}
div.DTE_Bubble div.DTE_Bubble_Triangle::after {
    content: "▾";
    /* color: rgba(0,0,0,0.7); */
    color: #2A2A2A;
    color: rgba(42,42,42,0.98);
    font: Arial, sans-serif;
    font-size: 24px;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    text-align: center;
    vertical-align: top;
    position: absolute;
    top: -6px;
    left: -12px;
}
div.DTE_Bubble.below div.DTE_Bubble_Triangle::after {
    content: "▾";
    color: rgba(0,0,0,0.7);
    font: Arial, sans-serif;
    font-size: 24px;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    text-align: center;
    vertical-align: top;
    position: absolute;
    top: -4px;
    left: -12px;
    transform: rotate(180deg) !important;
}
div.DTE_Body div.DTE_Body_Content div.DTE_Form_Info {
    padding-bottom: 10px;
}
.ui-widget-content .DTE_Form_Error,
.ui-widget-content .DTE_Form_Error a {
    color: #FFF !important;
}
div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Form_Error {
    background-color: #2A2A2A;
    background-color: rgba(42,42,42,0.98);
    padding: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    color: #FFF;
}

/* Datatable Inline Editing Overrides */
div.DTE_Inline div.DTE_Inline_Buttons div.DTE_Form_Buttons button {
    padding: 1px 3px;
    margin: 2px 0 2px 8px;
    border: 1px solid #c5c5c5;
}
div.DTE_Inline div.DTE_Inline_Field,
div.DTE_Inline div.DTE_Inline_Buttons {
    vertical-align: top;
}
div.DTE_Field_Type_select div.DTE_Field_Input {
    padding-top: 2px;
}
.DTE_Bubble_Table form {
    margin-bottom: 0px !important;
}

/* Datatables Column Width Overrides */
#hotelsTable_wrapper.dataTables_wrapper  .dataTables_scroll div.dataTables_scrollBody th:nth-child(1),
#hotelsTable_wrapper.dataTables_wrapper  .dataTables_scroll div.dataTables_scrollBody td:nth-child(1),
#hotelsTable_wrapper.dataTables_wrapper  .dataTables_scroll div.dataTables_scrollBody tf:nth-child(1),
#clientsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th:nth-child(1),
#clientsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td:nth-child(1),
#clientsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody tf:nth-child(1),
#languagesTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th:nth-child(1),
#languagesTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td:nth-child(1),
#languagesTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody tf:nth-child(1),
#usersTable_wrapper.dataTables_wrapper   .dataTables_scroll div.dataTables_scrollBody th:nth-child(1),
#usersTable_wrapper.dataTables_wrapper   .dataTables_scroll div.dataTables_scrollBody td:nth-child(1),
#usersTable_wrapper.dataTables_wrapper   .dataTables_scroll div.dataTables_scrollBody tf:nth-child(1),
#floorsTable_wrapper.dataTables_wrapper   .dataTables_scroll div.dataTables_scrollBody th:nth-child(1),
#floorsTable_wrapper.dataTables_wrapper   .dataTables_scroll div.dataTables_scrollBody td:nth-child(1),
#floorsTable_wrapper.dataTables_wrapper   .dataTables_scroll div.dataTables_scrollBody tf:nth-child(1),
#roomsTable_wrapper.dataTables_wrapper   .dataTables_scroll div.dataTables_scrollBody th:nth-child(1),
#roomsTable_wrapper.dataTables_wrapper   .dataTables_scroll div.dataTables_scrollBody td:nth-child(1),
#roomsTable_wrapper.dataTables_wrapper   .dataTables_scroll div.dataTables_scrollBody tf:nth-child(1),
#staffTable_wrapper.dataTables_wrapper   .dataTables_scroll div.dataTables_scrollBody th:nth-child(1),
#staffTable_wrapper.dataTables_wrapper   .dataTables_scroll div.dataTables_scrollBody td:nth-child(1),
#staffTable_wrapper.dataTables_wrapper   .dataTables_scroll div.dataTables_scrollBody tf:nth-child(1),
#categoriesTable_wrapper.dataTables_wrapper   .dataTables_scroll div.dataTables_scrollBody th:nth-child(1),
#categoriesTable_wrapper.dataTables_wrapper   .dataTables_scroll div.dataTables_scrollBody td:nth-child(1),
#categoriesTable_wrapper.dataTables_wrapper   .dataTables_scroll div.dataTables_scrollBody tf:nth-child(1),
#articlesTable_wrapper.dataTables_wrapper   .dataTables_scroll div.dataTables_scrollBody th:nth-child(1),
#articlesTable_wrapper.dataTables_wrapper   .dataTables_scroll div.dataTables_scrollBody td:nth-child(1),
#articlesTable_wrapper.dataTables_wrapper   .dataTables_scroll div.dataTables_scrollBody tf:nth-child(1)  {
    width: 8px !important;
    min-width: 8px !important;
	max-width: 8px !important; 
}
#usersTable_wrapper,
#clientsTable_wrapper,
#languagesTable_wrapper {
    margin-bottom: 68px;
}

#floorsTable_wrapper.dataTables_wrapper   .dataTables_scroll div.dataTables_scrollBody th:nth-child(2),
#floorsTable_wrapper.dataTables_wrapper   .dataTables_scroll div.dataTables_scrollBody td:nth-child(2),
#floorsTable_wrapper.dataTables_wrapper   .dataTables_scroll div.dataTables_scrollBody tf:nth-child(2) {
    width: 30%;
}
#roomsTable_wrapper.dataTables_wrapper   .dataTables_scroll div.dataTables_scrollBody th:nth-child(2),
#roomsTable_wrapper.dataTables_wrapper   .dataTables_scroll div.dataTables_scrollBody td:nth-child(2),
#roomsTable_wrapper.dataTables_wrapper   .dataTables_scroll div.dataTables_scrollBody tf:nth-child(2) {
    width: 30%;
}

#articlesTable_wrapper.dataTables_wrapper .dataTables_scrollHead.ui-state-default .dataTables_scrollHeadInner table.dataTable thead th.ui-state-default:nth-child(10),
#articlesTable_wrapper.dataTables_wrapper .dataTables_scrollHead.ui-state-default .dataTables_scrollHeadInner table.dataTable thead th.ui-state-default:nth-child(12) {
    text-align: center;
}

/* Expanding Forms */
.tableform {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: none;
    position: relative;
    z-index: 1;
    background: #151515;
}
#usersTable_wrapper,
#clientsTable_wrapper,
#languagesTable_wrapper {
    width: 100%;
    margin: 0 0 68px 0;
    padding: 10px 0;
    overflow: hidden;
    /* border: 1px solid rgb(197, 197, 197);
    background: #fafafa; */
    border-radius: 0;
    position: relative;
    z-index: 1;
}
#clientsTable_wrapper,
#languagesTable_wrapper {
    margin-bottom: 0;
    padding-bottom: 0;
}
#usersTable_wrapper {
    display: inline-block;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 0px;
}
.tableform > div {
    display: block;
    width: 50%;
    float: left;
    padding: 10px 20px 20px 20px;
    /* background: rgba(0,0,0,0.1); */
}
.tableform_header {
    display: none;
    width: auto;
    overflow: hidden;
    color: #FC5000;
    font-size: 14px;
    line-height: 20px;
    margin: 20px 0 -4px 0;
    padding: 10px 20px 10px 20px;
    background-color: #1A353E;
    /* border-bottom: 1px solid rgba(0,0,0,0.1);
    border-left: 1px solid  rgb(197, 197, 197);
    border-right: 1px solid  rgb(197, 197, 197);
    border-top: 1px solid  rgb(197, 197, 197);; */
    border: none;
    font-weight: bold;
    font-family: "Gibson", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    /* box-shadow: inset 0 -14px 10px -14px rgba(0,0,0,0.1); */
    border-radius: 5px 5px 0 0;
    position: relative;
    z-index: 91;
}

.users .page_header,
.clients .page_header,
.hotels .page_header,
.menu .page_header,
.settings .page_header {
    position: relative;
    z-index: 2;
    display: inline-block;
    width: 100%;
    /* color: #FC5000; */
    color: #FFF;
    font-size: 14px;
    line-height: 20px;
    margin: 0;
    padding: 10px 20px 10px 0px;
    /* background-color: #fafafa; */
    background-color: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    font-weight: bold;
    font-size: 18px;
    line-height: 20px;
    font-family: "Gibson", Arial, Helvetica, sans-serif;
    /* box-shadow: inset 0 -14px 10px -14px rgba(0,0,0,0.1); */
    /* border-radius: 5px 5px 0 0; */
    text-transform: none;
}
.settings .page_header.settings_header {
    border: 0;
    text-transform: uppercase;
    padding-bottom: 0px;
}

.menu .tableform {
    position: relative;
    display: block;
    float: left;
    z-index: 1;
}
.menu .tableform_header {
    position: relative;
    display: block;
    float: left;
    clear: left;
    margin-bottom: -1px;
    z-index: 2;
}
@media screen and (max-width: 950px) {
    .menu .messages_wrapper,
    .menu .articles_wrapper {
        float: left;
        clear: left;
        width: 100%;
        margin-left: 0;
    }
    .menu #categoriesTable_wrapper .buttons,
    .menu #messagesTable_wrapper .buttons,
    .menu #articlesTable_wrapper .buttons {
        display: block;
        height: auto;
    }
    .menu .tableform.messages {
        margin-bottom: 0;
    }
    .menu .tableform.articles {
        margin-bottom: 40px;
    }
    .menu .bottombar {
        float: left;
        clear: both;
    }
}
@media screen and (max-width: 768px) {
    .menu .hotels_list {
        width: 100%;
        margin-left: 0px;
        margin-bottom: 20px;
    }
    .menu .tableform_header.messages {
        margin-top: 0;
    }
}
.settings .tableform {
    display: block;
    float: left;
    padding: 20px;
}
.settings .tableform_header {
    display: inline-block;
}
.settings .tableform .control-group {
    margin-bottom: 10px;
}
.settings .tableform input[type="button"],
.settings .tableform input[type="submit"] {
    margin-top: 4px;
    min-width: 120px;
}
@media screen and (max-width:768px) {
    .settings .tableform {
        margin-bottom: 0;
    }
}
.page_header, .page_header:hover,
.hotels_header, .hotels_header:hover,
.floors_header, .floors_header:hover,
.rooms_header, .rooms_header:hover,
.staff_header, .staff_header:hover,
.categories_header, .categories_header:hover {
    font-size: 14px;
    line-height: 20px;
    width: 100%;
    margin: 0 0 10px 0;
    padding: 0;
    display: block;
    float: left;
    height: auto;
    border: 0;
    background: none;
    font-weight: normal;
    cursor: pointer;
    pointer-events: none;
    color: #FC5000;
    border-bottom: 1px solid #FC5000;
}
.page_header, .page_header:hover,
.categories_header, .categories_header:hover {
    font-size: 18px;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.tableform > div:nth-child(1) {
    width: 40%;
}
#articlesTable_wrapper {
    width: 100%;
}
#messagesTable_wrapper {
    width: 100%;
}
.settings .page_header {
    margin-bottom: 30px;
}
.tableform > table#articlesTable {
    width: 100%;
}

.tableform > div:nth-child(2) {
    width: 60%;
}
.tableform > div:nth-child(3) {
    clear: left;
    width: 100%;
    padding-top: 0;
}
/* #floorsTable_wrapper,
#roomsTable_wrapper,
#staffTable_wrapper {
    border-bottom: 3px solid rgb(197, 197, 197);
} */
#customRoomForm {
    max-width: auto;
}
#customRoomForm.no-minibar {
    max-width: 100%;
    max-width: 400px;
}
#roomsTable_wrapper input[type="checkbox"] {
    accent-color: #FD501E;
}
#customRoomForm input[type="checkbox"] {
    accent-color: #FD501E;
}

#floorsTable_wrapper .buttons,
#roomsTable_wrapper .buttons,
#staffTable_wrapper .buttons,
#categoriesTable_wrapper .buttons,
#articlesTable_wrapper .buttons,
#messagesTable_wrapper .buttons,
#usersTable_wrapper .buttons {
    margin-bottom: 8px;
}
#floorsTable_wrapper .buttons,
#roomsTable_wrapper .buttons,
#categoriesTable_wrapper .buttons,
#articlesTable_wrapper .buttons,
#usersTable_wrapper .buttons {
    width: auto;
    overflow: hidden;
    float: left;
    margin-bottom: 10px;
    margin-top: 0px;
    margin-right: 10px;
}
#floorsTable_wrapper .buttons button,
#roomsTable_wrapper .buttons button,
#categoriesTable_wrapper .buttons button,
#articlesTable_wrapper .buttons button,
#hotel_buttons_clone .dt-buttons button,
#usersTable_wrapper .dt-buttons button {
    height: 30px;
    border-radius: 2px;
}
#floorsTable_wrapper .len,
#roomsTable_wrapper .len,
#categoriesTable_wrapper .len,
#articlesTable_wrapper .len,
#usersTable_wrapper .len {
    width: auto;
    overflow: hidden;
    float: left;
    margin-top: 0px;
    margin-bottom: 10px;
    margin-left: 0px;
    padding-left: 0px;
}
#roomsTable_wrapper .buttons {
    overflow: visible;
}

#roomsTable_wrapper .dt-button-collection {
    width: 100%;
    max-width: 100%;
    min-width: 150px;
    background: rgba(255,255,255,0.94);
}
#roomsTable_wrapper div.dt-button-collection > div[role=menu] {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;

}
#roomsTable_wrapper div.dt-button-collection > div[role=menu] .ui-button-text {
    font-size: 12px;
    line-height: 1;
}
#roomsTable_wrapper .buttons div.dt-button-collection button {
    display: inline-block;
    height: auto !important;
    padding: 8px;
}
#roomsTable_wrapper .buttons div.dt-button-collection .ui-state-default {
    background:rgb(220, 220, 220);
    border: 1px solid rgb(200,200,200);
}
#roomsTable_wrapper .buttons div.dt-button-collection .ui-state-default:hover {
    background:rgb(220, 220, 220);
    cursor: pointer;
    color: #454545;
    border: 1px solid rgb(200,200,200);
}
#roomsTable_wrapper .buttons div.dt-button-collection .ui-state-active {
    background: #007fff;
    opacity: 0.9;
}
#roomsTable_wrapper .buttons div.dt-button-collection .ui-state-active:hover {
    
    background: #007fff;
    opacity: 1;
    color: #fff;
}

@media print {
    .len {
        display: none !important;
    }
    .paginator {
        display: none !important;
    }
}
#floorsTable_wrapper .paginator,
#roomsTable_wrapper .paginator,
#categoriesTable_wrapper .paginator,
#articlesTable_wrapper .paginator,
#usersTable_wrapper .paginator {
    padding: 10px 0 0 0;
}
#categoriesTable_wrapper .paginator,
#articlesTable_wrapper .paginator,
#usersTable_wrapper .paginator {
    margin-bottom: 0px;
}
#floorsTable_wrapper .paginator .dataTables_paginate,
#roomsTable_wrapper .paginator .dataTables_paginate,
#categoriesTable_wrapper .paginator .dataTables_paginate,
#articlesTable_wrapper .paginator .dataTables_paginate,
#usersTable_wrapper .paginator .dataTables_paginate {
    margin-left: 0px;
    padding-left: 0px;
}
#floorsTable_wrapper .paginator .dataTables_paginate a:first-child,
#roomsTable_wrapper .paginator .dataTables_paginate a:first-child,
#categoriesTable_wrapper .paginator .dataTables_paginate a:first-child,
#articlesTable_wrapper .paginator .dataTables_paginate a:first-child,
#usersTable_wrapper .paginator .dataTables_paginate a:first-child {
    margin-left: 0px;
}
.hotels_list {
    display: block;
    float: left;
    width: 28%;
}
.hotels_list .dataTables_scrollHead,
.hotels_list .dataTables_scrollFoot {
    display: none;
}
.hotels_list .dataTables_scrollBody {
    border-top: 1px solid #ccc;
    border-bottom: 3px solid #ccc;
}
.categories_list {
    /* display: block;
    float: left;
    width: 70%;
    margin-left: 2%; */
    grid-column: 2 / span 1;
    width: 100%;
}
#categoriesTable_wrapper .dataTables_scrollBody,
#articlesTable_wrapper .dataTables_scrollBody,
#messagesTable_wrapper .dataTables_scrollBody {
    /* border-bottom: 3px solid #ccc; */
}
#articlesTable_wrapper,
#messagesTable_wrapper {
    padding-top: 0;
}
.articles_wrapper {
    /* float: left;
    clear: none;
    width: 70%;
    margin-left: 2%; */
    grid-column: 2 / span 1;
    width: 100%;
}
.messages_wrapper {
    /* float: left;
    clear: left;
    width: 28%; */
    grid-column: 1 / span 1;
    width: 100%;
}
.reports #hotelsTable_wrapper,
.reports #hotelsTable_wrapper .maintable {
    padding: 0;
    border-top: 0;
    border-bottom: 0;
    /* border-left: 0.5px solid #c5c5c5;
    border-right: 0.5px solid #c5c5c5; */
}
/* .reports #hotelsTable_wrapper,
.settings #hotelsTable_wrapper {
    border-bottom: 3px solid #c5c5c5;
} */
.reports #hotelsTable_wrapper,
.hotels #hotelsTable_wrapper {
    border-bottom: 0px;
    height: 0px;
    overflow: hidden;
}
.reports #reports_hotel_text {
    font-weight: bold;
    font-size: 18px;
    line-height: 20px;
    display: grid;
    min-height: 30px;
    align-content: center;
    margin-right: 10px;
}
.reports .report_page .dataTable {
    padding-bottom: 10px;
}
.reports .maintable {
    /* -webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.05);
    -moz-box-shadow:    0px 0px 10px 0px rgba(50, 50, 50, 0.05);
    box-shadow:         0px 0px 10px 0px rgba(50, 50, 50, 0.05); */
    display: block;
    float: left;
    width: 100%;
    margin-top: 0;
}


.reports .report_nav {
    display: inline-block;
    position: relative;
    grid-column: 1 / span 3;
    top: 0;
    /* background: #0D0D0D; */
    background: rbga(0,0,0,0.9);
    border-top: 1px solid #4a4a4a;
    border-bottom: 1px solid #4a4a4a;
    padding: 14px 50px;
    width: 100%;
    max-height: 82px;
    overflow-x: scroll;
}
.reports .nav_reports {
    display: flex;
    align-content: flex-start;
    min-width: 1200px;
    /* grid-template-columns: repeat(8,auto);
    grid-column-gap: 4px;
    grid-row-gap: 4px; */
}

.reports .nav_reports a {
    -webkit-appearance: none;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 40px;
    background: #000;
    padding: 8px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    line-height: normal;
    text-align: center;
    vertical-align: middle;
    font-size: 12px;
    font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
    margin-right: 10px;
    max-height: 46px;
    white-space: nowrap;

    -webkit-transition: all 200ms ease-out 50s;
    -moz-transition: all 200ms ease-out 50s;
    -o-transition: all 200ms ease-out 50s;
    transition: all 200ms ease-out 50ms;
}
.reports .nav_reports a span {
    font-size: 10px;
    position: absolute;
    /* top: calc(50% - 5px); */
    top: 4px;
    left: 4px;
}
.reports .nav_reports a:hover {
    color: #FFF;
    background: rgba(255,255,255,0.05);
}
.reports .nav_reports a.on {
    background: #434343;
    border: 1px solid #434343;
    color: #FFF;
}
/* @media screen and (max-width:1400px) {
    .reports .nav_reports a {
        font-size: 11px;
        padding-right: 12px;
        padding-left: 12px;
    }
}
@media screen and (max-width:950px) {
    .reports .nav_reports {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-row-gap: 10px;
    }
    
} */
@media screen and (max-width:768px) {
    .reports .report_nav {
        padding-left: 20px;
        padding-right: 20px;
        /* grid-template-columns: 1fr 1fr; */
    }
}

.report_page .page_header {
    margin-bottom: 0px;
    text-transform: none;
}
.reports .tableform .report_page {
    width: 100%;
    border: 0;
    padding: 0;
    display: none;
}

.reports .tableform .report_page.on {
    display: block;
}
.reports .tableform .report_page.dashboard.on {
    /* display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 42px 1fr;
    border-radius: 6px;
    border: 1px solid #303233; */
}
.reports .dataTables_wrapper .maintable {
    background: none;
    padding: 20px;
    /* border: 1px solid rgba(0,0,0,0.1); */
    overflow-x: auto;
    overflow-y: hidden;
}
.reports .report_page table.dataTable.no-footer {
    /* border-bottom: 1px solid #c5c5c5; */
    border-bottom: 0 !important;
}
.reports h1.print_header {
    font-size: 16px;
    line-height: 18px;
    display: block;
    width: 100%;
    margin: 0;
    /* padding: 0 20px 20px 20px; */
    padding: 0;
    /* text-align: center; */
}
.reports h1.print_header > span {
    display: inline-block;
    width: 100%;
    font-size: 14px;
    font-family: 'GibsonLight', Arial, Helvetica, sans-serif;
    padding-top: 4px;
}
.reports tr.group,
.reports tr.heading {
    text-align: center;
    font-weight: bold;
}
.reports tr.heading td {
    padding-top: 20px !important;
}
.reports tr.odd.group:hover,
.reports tr.odd.heading:hover {
    background-color: #2A2A2A;
}
.reports table.dataTable.hover tbody tr:hover {
    background-color: #3E3E3E;
}

.reports table.dataTable td {
    padding: 8px;
}

table.dataTable.hover tbody tr.even:hover,
table.dataTable.display tbody tr.even:hover {
    background-color: #3E3E3E;
}
table.dataTable.hover tbody tr.odd:hover,
table.dataTable.display tbody tr.odd:hover {
    background-color: #2A2A2A;
}
/* .reports .attendant_sales tr.group, .reports .attendant_sales tr.group td,
.reports .attendant_sales tr.group:hover, .reports .attendant_sales tr.group td:hover
 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #c5c5c5 !important;
} */

.reports .report_page table.dataTable {
    border-radius: 6px;
    padding-bottom: 0px;
    overflow: hidden;
    border-collapse:collapse;
}
.report_page table.dataTable tbody tr {
    background-color: #2A2A2A;
    background: #2A2A2A;
    color: #FFF;
}
.reports .report_page table.dataTable tbody tr.group,
.reports .report_page table.dataTable tbody tr.heading {
    background-color: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.25);
    font-size: 1.5rem;
}
.reports .report_page table.dataTable tbody tr.group:hover,
.reports .report_page table.dataTable tbody tr.heading:hover  {
    background-color: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.25);
}

.reports strong.orange {
    /* color: #FC5000; */
    font-size: 1.5rem;
}

.reports .report_page table.dataTable.stripe tbody tr.odd,
.reports .report_page table.dataTable.display tbody tr.odd,
.reports .report_page table.dataTable.stripe tbody tr.group,
.reports .report_page table.dataTable.display tbody tr.group,
.reports .report_page table.dataTable.stripe tbody tr.heading,
.reports .report_page table.dataTable.display tbody tr.heading {
    background-color: #2A2A2A;
    color: rgba(255,255,255,0.9);
}
.reports .report_page table.dataTable.stripe tbody tr.even,
.reports .report_page table.dataTable.display tbody tr.even,
.reports .report_page table.dataTable.stripe tbody tr.even.group,
.reports .report_page table.dataTable.display tbody tr.even.group,
.reports .report_page table.dataTable.stripe tbody tr.even.heading,
.reports .report_page table.dataTable.display tbody tr.even.heading {
    background-color: #3E3E3E;
    color: rgba(255,255,255,0.9);
}
.reports .report_page table.dataTable.stripe tbody tr.odd td,
.reports .report_page table.dataTable.display tbody tr.odd td {
    border: 0;
    /* padding-top: 0px;
    padding-bottom: 5px; */
    padding-top: 8px;
    padding-bottom: 8px;
}
.reports .report_page table.dataTable.stripe tbody tr.even td,
.reports .report_page table.dataTable.display tbody tr.even td {
    border: 0;
    /* background: #FFF; */
    /* padding-top: 0px;
    padding-bottom: 5px; */
    padding-top: 8px;
    padding-bottom: 8px;
}
.reports .report_page table.dataTable.row-border tbody th,
.reports .report_page table.dataTable.display tbody th {
    border: 0;
    /* background: #FFF; */
    text-align: center;
    font-weight: bold;
    border: 0;
}
table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr.odd:hover {
    background-color: #1e1e1e;
}
table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr.even:hover {
    background-color: #2b2b2b;
}

.reports .report_page.article_listing,
/* .reports .report_page.dashboard, */
.reports .report_page.article_sales,
.reports .report_page.attendant_productivity,
.reports .report_page.attendant_sales,
.reports .report_page.guest_menu,
.reports .report_page.room_sales,
.reports .report_page.unposted_room {
    background: #1B1E22;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    overflow: hidden;
}
.reports .report_page.article_listing,
.reports .report_page.article_sales,
.reports .report_page.attendant_productivity,
.reports .report_page.attendant_sales,
.reports .report_page.guest_menu,
.reports .report_page.room_sales,
.reports .report_page.unposted_room {
    margin-bottom: 90px;
}
.reports .report_page.article_listing td[colspan]:not([colspan="1"]),
.reports .report_page.guest_menu td[colspan]:not([colspan="1"]) {
    text-align: center;
    font-weight: bold;
    padding-top: 20px;
    border: 0;
}
.reports .report_page.article_sales td[colspan]:not([colspan="1"]) {
    text-align: left;
    font-weight: bold;
    padding-top: 20px;
    border: 0;
}
.reports .report_page table.dataTable thead th.ui-state-default,
.reports .report_page table.dataTable tfoot th.ui-state-default {
    /* background-color: #ffffff;
    background: #ffffff; */
    background-color: #404040;
    background: #404040;
    border-right: 0;
    border-left: 0;
    padding: 16px 10px;
}
.reports .buttons {
    display: block;
    float: right;
    margin-bottom: 8px;
}
.reports .article_listing .buttons {
    display: block;
    float: none;
    margin-bottom: 8px;
    position: abosolute;
    top: -40px;
    right: 20px;
    left: auto;
}
/* .reports .DataTables_sort_icon {
    display: none;
} */
.reports form {
    display: flex;
    align-items: flex-end;
    float: left;
    clear: left;
    width: 100%;
    padding: 8px;
    margin: 8px 0 0 0;
    border: 1px solid rgba(0,0,0,0.1);
    background: #E7E7E7;
}
.reports form label {
    position: relative;
    display: inline-block;
    width: auto;
    margin-right: 6px;
}
@media screen and (max-width:768px) {
    .reports form {
        display: block;
    }
    .reports form label {
        display: block;
        float: left;
        width: 48%;
        margin-right: 2%;
    }
}
.reports form label span {
    display: inline-block;
    width: 100%;
    text-align: left;
    font-weight: normal;
    padding-bottom: 4px;
}
.reports form label input[type="text"] {
    height: 30px;
    font-size: 14px;
    line-height: 30px;
    padding: 8px 5px;
    font-weight: normal;
    width: 100%;
    color: #454545;
}
.reports form label select {
    height: 30px;
    font-size: 14px;
    line-height: 30px;
    margin: 0;
    padding: 0;
    font-weight: normal;
    width: 100%;
    border: 1px solid #bfbfbf !important;
    border-radius: 0 !important;
    background-color: #FFF;
    border-collapse: collapse;
}
.reports form label select:disabled {
    opacity: 0.3;
}
.reports form label button {
    margin: 0 0 0 0;
}

select:disabled, input[type="text"]:disabled, div.DTE_Field input[type="text"]:disabled {
    opacity: 0.8;
    /* background: #2d2d2d; */
    background: transparent;
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
    border-radius: 0px;;
    border-bottom: 1px solid #fff;
    color: #FFF;
}

.settings input[type="text"]:disabled {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.2);
    color: black;
}
.settings label[for="postingPortInternal"] {
    display: none;
}

.settings label[for="CachedPostingIP"] {
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;

}
.settings label[for="CachedPostingPort"] {
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.reports .report_topbar label[for=form_room] {
    padding-top: 4px;
    padding-bottom: 4px;
    background: #FFF;
    border-radius: 2px 0 0 2px;
    min-width: 90px;
    max-width: 100px;
    height: 30px;
    margin-left: 10px;
}
.reports form label input[type="text"].form_room {
    position: relative;
    z-index: 1;
    margin:0;
    padding: 0 10px;
    border: 0;
    border-right: 1px solid #CCC;
    height: 22px;
    min-width: 90px;
    max-width: 100px;
}
.reports form label select.form_room_select {
    background: #FFF;
    height: 30px;
    border-radius: 0 2px 2px 0 !important;
    border: 1px solid #FFF !important;
    color: #454545;
}

.reports form label button.ui-datepicker-trigger {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}
.reports form label button.ui-datepicker-trigger img {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.reports #articleSalesTable_wrapper h1.print_header,
.reports #attendantProductivityTable_wrapper h1.print_header,
.reports #roomSalesTable_wrapper h1.print_header,
.reports #unpostedRoomTable_wrapper h1.print_header {
    text-align: left;
    padding-left: 0px;
}

.reports #articleSalesTable_wrapper h1.print_header span,
.reports #attendantProductivityTable_wrapper h1.print_header span,
.reports #roomSalesTable_wrapper h1.print_header span,
.reports #unpostedRoomTable_wrapper h1.print_header span,
.reports #articleSalesTable_wrapper h1.print_header span {
    display: block;
    width: 100%;
    padding-top: 6px;
    font-size: 12px;
    line-height: 14px;
    color: #979797;
}
.reports .buttons {
    margin-top: 8px;
}
.reports .report_page #articleSalesTable td[colspan]:not([colspan="1"]) {
    text-align: left;
    font-weight: bold;
    border: 0;
}
.reports h3 {
    padding-top: 6px;
}
.reports iframe {
    opacity: 0.01;
}
.reports tr.subhead td {
    padding-top: 8px !important;
}
.reports td.subtotal {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    border-top: 1px solid #c5c5c5 !important;
    font-weight: bold;
}
.reports td.context {
    padding-top: 8px !important;
    font-weight: bold;
    text-align: right !important;
    line-height: 1.3 !important;
}
.reports td.grandtotal {
    padding-top: 8px !important;
    border-top: 1px solid #c5c5c5 !important;
    border-bottom: 1px solid #c5c5c5 !important;
    font-weight: bold;
    background: #000000 !important;
    color: #FFFFFF;
    font-family: 'GibsonSemibold', Arial, Helvetica, sans-serif;
}
.reports td.description {
    width: 120px !important;
    min-width: 120px !important;
}
.report_page table.dataTable thead th,
.report_page table.dataTable thead td,
.report_page table.dataTable tfoot th,
.report_page table.dataTable tfoot td {
    padding: 6px 8px;
    vertical-align: text-top;
}
.report_page table.dataTable tbody td {
    /* padding-top: 4px !important;
    padding-bottom: 2px !important; */
}
/* .reports table.dataTable tbody tr.heading td {
    padding-top: 8px !important;
    padding-bottom: 4px !important;
    border-bottom: 1px solid #c5c5c5 !important;
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
} */
.report_page .dashboard_monthly_sales {
    display: block;
    width: 100%;
    /* float: left;
    clear: left; */
    background-color: rgba(0,0,0,0.1) !important;
    margin-top: 20px;
}

/* Report Topbar */
.report_topbar{
    display: block;
    padding: 10px 0 30px 0;
    width: 100%;
}
.hotel_topbar {
    display: block;
    padding: 10px 0 0 0;
    width: 100%;
    margin-bottom: 30px;
    overflow: hidden;
}
.reports .report_topbar label,
.hotels .hotel_topbar label {
    margin: 0;
    padding: 0;
    min-height: 0px;
    border: 0px;
    display: block;
    float: left;
}
.hotels #hotels_hotel_text {
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    width: 100%;
    padding-bottom: 10px;
}
.report_topbar .dms_btn,
.hotel_topbar .dms_btn {
    margin-top: 0px;
    margin-bottom: 0px;
    /* padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 10px;
    padding-right: 10px; */
    padding: 6px 24px;
    min-height: 30px;
}
.report_topbar .dms_select,
.hotel_topbar .dms_select {
    padding-top: 0px;
    padding-bottom: 0px;
    height: 30px;
    border-radius: 2px;
    font-size: 14px;
    font-weight: normal;
}
.report_topbar #reports_hotel_select,
.hotel_topbar #hotels_hotel_select {
    margin-right: 10px;
}
.reports .report_topbar form,
.hotels .hotel_topbar form  {
    display: block;
    float:left;
    clear: none;
    background: none;
    margin-top: 0px;
    padding: 0px;
    border: 0px;
    width: auto;
}
.hotel_topbar #hotel_buttons_clone {
    float: left;
    width: auto;
}

.reports .report_topbar label[for=form_room] {
    display: none;
}
.reports .report_topbar label[for=form_room_select] {
    display: none;
}
.reports .report_topbar label[for=form_update_submit] {
    display: none;
}

.report_topbar #today_btn {
    display: none;
    margin-left: 0px;
}
.report_topbar label[for=form_from] {
    padding-top: 4px;
    padding-bottom: 4px;
    background: #FFF;
    border-radius: 2px 0 0 2px;
    min-width: 90px;
    max-width: 100px;
}
.report_topbar label[for=form_to] {
    padding-top: 4px;
    padding-bottom: 0;
    background: #FFF;
    border-radius: 0px 2px 2px 0;
    min-width: 120px;
    max-width: 130px;
}
.reports .report_topbar form label input[type="text"].form_from {
    position: relative;
    z-index: 1;
    margin:0;
    padding: 0 10px;
    border: 0;
    border-right: 1px solid #CCC;
    height: 22px;
    min-width: 90px;
    max-width: 100px;
}
.reports .report_topbar form label input[type="text"].form_to {
    position: relative;
    z-index: 1;
    margin:0 0 4px 0;
    padding: 0 10px;
    border: 0;
    height: 22px;
    min-width: 100%;
    max-width: 100%;
}
.reports .report_topbar form label button.ui-datepicker-trigger {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    z-index: 2;
}
.reports .ui-datepicker-calendar,
.transactions .ui-datepicker-calendar,
.make_prune_charges .ui-datepicker-calendar,
.make_prune_chargeheaders .ui-datepicker-calendar {
    /* background: rgba(42,42,42,0.98); */
    /* background-color: rgba(42,42,42,0.98); */
    border-top: 4px solid rgba(42,42,42,0.98);
    border-bottom: 4px solid rgba(42,42,42,0.98);
    border-left: 8px solid rgba(42,42,42,0.98);
    border-right: 8px solid rgba(42,42,42,0.98);
    color: #FFF;
}
.reports #ui-datepicker-div,
.transactions #ui-datepicker-div,
.make_prune_charges #ui-datepicker-div,
.make_prune_chargeheaders #ui-datepicker-div 
 {
    background-color: rgba(42,42,42,0.98);
    margin-top: 8px;
}
.reports .ui-widget.ui-widget-content,
.make_prune_charges .ui-widget.ui-widget-content,
.make_prune_chargeheaders .ui-widget.ui-widget-content {
    border: 1px solid rgba(42,42,42,0.98);
    border-radius: 3px;
}
.reports .ui-widget.ui-widget-content.ui-corner-all,
.make_prune_charges .ui-widget.ui-widget-content.ui-corner-all,
.make_prune_chargeheaderss .ui-widget.ui-widget-content.ui-corner-all {
    border-radius: 3px !important;
}
.report_topbar .spinner,
.hotel_topbar .spinner {
    align-self: flex-start;
    margin:2px 12px;
}
.report_topbar .spinner:after,
.hotel_topbar .spinner:after {
    margin: 0;
}
.report_topbar label[for=form_update_submit] {
    justify-self: flex-end;
}
.report_topbar .form_report_topbar {
    width: 100%;
    display: flex;
}
.report_page .page_header {
    position: relative;
    background: #525252;
    padding: 14px 20px;
    color: #FFF;
    border: 0;
    font-size: 1em;
    line-height: 1;
    font-weight: normal;
    font-family: 'GibsonSemibold', Arial, Helvetica, sans-serif;
    float: none !important;
    display: inline-block;
    height: 42px;
    /* max-height: 42px; */
}
.pms_emulator .page_header:first-child {
    color: #fff;
    border-bottom: 0px;
    margin-top: 20px;
}
.report_page .page_header span#dashboard_timerange {
    font-size: 14px;
    line-height: 1;
    font-weight: normal;
    font-family: 'GibsonLight', Arial, Helvetica, sans-serif;
    
}
.report_page.article_listing .page_header,
.report_page.article_sales .page_header,
.report_page.attendant_productivity .page_header,
.report_page.attendant_sales .page_header,
.report_page.guest_menu .page_header,
.report_page.room_sales .page_header,
.report_page.unposted_room .page_header  {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    height: auto;
    max-height: none;
    padding-top: 8px;
    padding-bottom: 8px;
    pointer-events: auto;
    cursor:inherit;
}
.report_page.article_listing .page_header > div,
.report_page.article_sales .page_header > div,
.report_page.attendant_productivity .page_header > div,
.report_page.attendant_sales .page_header > div,
.report_page.guest_menu .page_header > div,
.report_page.room_sales .page_header > div,
.report_page.unposted_room .page_header > div {
    justify-self: flex-end;
    font-family: 'Gibson', Arial, Helvetica, sans-serif;
}
.report_page.article_listing .page_header > span {
    font-family: 'GibsonSemibold', Arial, Helvetica, sans-serif;
}
.report_page.room_sales .page_header > span > span,
.report_page.unposted_room .page_header > span > span {
    display: inline-block;
    width: 100%;
    font-family: 'GibsonLight', Arial, Helvetica, sans-serif;
    padding-top: 4px;
    font-size: 14px;
}


.dash_grid {
    display: grid;
    width: 100%;
    background: transparent;
    min-height: 300px;
    overflow: visible;
    grid-template-columns: 3fr 1fr;
    grid-column-gap: 20px;
    grid-template-rows: 42px auto;
    grid-row-gap: 0px;
}
@media screen and (max-width:1600px) {
    .dash_grid {
        grid-template-columns: 2fr 1fr;
    }
}

@media screen and (max-width:1200px) {
    .dash_grid {
        grid-template-columns: 1fr;
        grid-template-rows: 42px 1fr 42px auto;
    }
    .dash_grid > #widget_header {
        grid-row: 3;
        margin-top: 20px;
    }
    .dash_grid > #dash_wrap {
        grid-row: 2;
    }
    div#widget_room_sales_figure,
    div#widget_room_sales_label,
    div#widget_day_sales_figure,
    div#widget_day_sales_label {
        font-size: 14px;
    }
    
}

.dash_grid > h1 {
    border-radius: 4px 4px 0 0;
}
.dash_grid > div {
    background: #222327;
}

#dashwidget {
    display: block;
    width: 100%;
    max-width: 100%;
    grid-template-columns: 1fr;
   /*  grid-template-rows: auto auto auto auto; */
    grid-row-gap: 10px;
}
#dashwidget > div {
    /* background: rgba(255,255,255,0.1); */
}
div.widget1,
div.widget2 {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    grid-column-gap: 20px;
    grid-row-gap: 10px;
    grid-auto-flow: column;
    direction: rtl;
    align-items: flex-start;
    padding: 30px;

    opacity: 0;

    -webkit-transition: all 100ms ease-out 20ms;
    -moz-transition: all 100ms ease-out 20ms;
    -o-transition: all 100ms ease-out 20ms;
    transition: all 100ms ease-out 20ms;

}

div#widget_checked_rooms,
div#widget_unchecked_rooms {
    display: grid;
    grid-template-columns: minmax(auto, 1fr) minmax(auto, 1.5fr);
    grid-column-gap: 20px;
    grid-row-gap: 10px;
    grid-auto-flow: column;
    direction: ltr;
    align-items: flex-start;
    padding: 40px 30px 10px 30px;
    opacity: 0;

    -webkit-transition: all 100ms ease-out 20ms;
    -moz-transition: all 100ms ease-out 20ms;
    -o-transition: all 100ms ease-out 20ms;
    transition: all 100ms ease-out 20ms;

}

div#widget_checked_rooms div.checked_num,
div#widget_unchecked_rooms div.checked_num {
    font-size: 5vw;
    line-height: 1;
    color: #FFF;
    opacity: 0.5;
    align-self: center;
    position: relative;
    z-index: 1;
    font-weight: normal;
    text-align: center;
}

div#widget_checked_rooms .check_num_label,
div#widget_unchecked_rooms .check_num_label {
    color: #FFF;
    opacity: 0.5;
    align-self: center;
    position: relative;
    z-index: 1;
    font-size: 1vw;
    font-weight: bold;
}

div#widget_room_sales,
div#widget_day_sales {
    position: relative;
    border-radius: 500px;
    max-width: 200px;
    max-height: 200px;
    /* overflow: hidden; */
    /* opacity: 0;

    -webkit-transition: all 100ms ease-out 20ms;
    -moz-transition: all 100ms ease-out 20ms;
    -o-transition: all 100ms ease-out 20ms;
    transition: all 100ms ease-out 20ms; */
    
}
canvas#widget_room_sales_widget,
canvas#widget_day_sales_widget {
   /*  background: rgba(0,0,0,0.5); */
    width: 100% !important;
    height: auto !important;
    stroke: gray;

    background: url("/images/gauge.png") 50% 50% no-repeat;
    background-size: 100% 100%;
}
div#widget_room_sales_label,
div#widget_day_sales_label {
    color: #FFF;
    opacity: 0.7;
    align-self: center;
    position: relative;
    z-index: 1;
    font-size: 1vw;
    font-weight: bold;
    direction: ltr;
}
div#widget_room_sales_figure_wrapper,
div#widget_day_sales_figure_wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    justify-items: center;
}
div#widget_room_sales_figure,
div#widget_day_sales_figure {
   display: grid;
   direction: ltr;
   font-size: 1.5vw;
   font-weight: bold;
   opacity: 0.7;
   padding-left: 20%;
   padding-right: 20%;
}
#widget_room_sales_scale {
    position: absolute;
    bottom: -20px;
    left: calc(50% - 16px);
    color: #FFF;
    opacity: 0.5;
    font-size: 12px;
}
#widget_day_sales_scale {
    position: absolute;
    bottom: -20px;
    left: calc(50% - 16px);
    color: #FFF;
    opacity: 0.5;
    font-size: 12px;
}


@media screen and (max-width:1200px) {
    #dashwidget {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr;
    }
    div#widget_room_sales_figure,
    div#widget_room_sales_label,
    div#widget_day_sales_figure,
    div#widget_day_sales_label {
        font-size: 14px;
    }
    div.widget1,
    div.widget2 {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        grid-column-gap: 20px;
        grid-row-gap: 10px;
        grid-auto-flow: column;
        direction: rtl;
        align-items: flex-start;
        padding: 30px;



    }
}



.printButton, 
.pdfButton,
.buttons-csv,
.buttons-excel  {
    text-transform: uppercase;
    font-family: 'Gibson', Arial, Helvetica, sans-serif;
    border: 0 !important;
    display: inline-block;
    margin: 0 4px 5px 4px;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
    font-size: 14px;

    -webkit-transition: all 100ms ease-out 20ms;
    -moz-transition: all 100ms ease-out 20ms;
    -o-transition: all 100ms ease-out 20ms;
    transition: all 100ms ease-out 20ms;
}
.printButton:hover, 
.pdfButton:hover,
.buttons-csv:hover,
.buttons-excel:hover {
    border: 0 !important;
}
.printButton {
    background: #C1C1C1;
    margin-left: 16px;
}
.pdfButton {
    background: #EA362E;
    color: #FFF;
}
.buttons-csv {
    background: #139316;
    color: #FFF;
}
.buttons-excel {
    background: #139316;
    color: #FFF;
}
.pdfButton:before,
.buttons-csv:before,
.buttons-excel:before {
    position: absolute;
    bottom: -7px;
    right: 4px;
    content: "";
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
}
.pdfButton:after,
.buttons-csv:after,
.buttons-excel:after {
    position: absolute;
    bottom: 100%;
    width: 3px;
    height: 5px;
    background: #fff;
    border: 0;
    right: 7px;
    bottom: -2px;
    content: "";
}

.len {
    margin-top: 20px;
    display: flex;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    align-content: center;
    justify-content: flex-start;
}
/* .len:before {
    display: grid;
    content: "Show";
    color: #999999;
    height: 30px;
    align-content: center;
    font-size: 14px;
    font-family: 'GibsonLight', Arial, Helvetica, sans-serif;
}
.len:after {
    display: grid;
    content: " Records per page";
    color: #999999;
    height: 30px;
    align-content: center;
    font-size: 14px;
    font-family: 'GibsonLight', Arial, Helvetica, sans-serif;
} */

#main_iot_wrapper {
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.report_page .page_header .spinner:after {
    margin-top: 4px;
    margin-left: 2px;
    width: 18px;
    height: 18px;
}
.reports .page_header {
    background: #525252;
    /* border-radius: 6px 6px 0 0; */
}

/* Hotels & Menu & Settings */
/* .hotels #hotelsTable_wrapper, */
.menu #hotelsTable_wrapper {
    height: 0 !important;
    overflow: hidden;
}
.settings #hotelsTable_wrapper {
    height: 0 !important;
    overflow: hidden;
}
.hotel_header,
.menu_header,
.settings_header {
    margin-bottom: 20px;
    text-transform: uppercase;
}
.hotel_wrap {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-column-gap: 5%;
}
.menu_wrap {
    display: block;
    grid-template-columns: 100%;
    grid-column-gap: 5%;
    grid-row-gap: 30px;
}
.menu_wrap > div {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-bottom: 40px;
}
.settings_wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 5%;
    grid-row-gap: 40px;
}
@media screen and (min-width:1280px) {
    .menu_wrap,
    .hotel_wrap,
    .settings_wrap {
        grid-column-gap: 50px;
    }
}
@media screen and (max-width:1279px) {
    .articles_wrapper {
        grid-column: 1 / span 2;
    }
}
@media screen and (max-width:992px) {
    .settings_wrap {
        grid-template-columns: 1fr 1fr;
    }
}
@media screen and (max-width:768px) {
    .menu_wrap {
        grid-template-columns: 1fr;
    }
    .menu_wrap > div {
        grid-column: 1 / span 1;
    }
    .settings_wrap {
        grid-template-columns: 1fr;
    }
}
.hotel_image {
    display: grid;
    align-items: center;
    justify-items: center;
}
.hotel_image img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
.rooms_wrap {
    margin-top: 10px;
}
.hotel_info_wrap {
    background: #404040;
    border-radius: 6px;
    overflow: hidden;
}
.hotel_floor_rooms {
    max-width: 100%;
    overflow: hidden;
}
.hotel_primary_contact {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 20px 20px 2px 20px;
    font-family: 'GibsonSemiBold', Arial, Helvetica, sans-serif;
    font-size: 1.1em;
}
.hotel_primary_contact:empty {
    padding: 0;
}
.hotel_address1,
.hotel_address2,
.hotel_city_state_zip,
.hotel_primary_contact_email,
.hotel_primary_contact_phone,
.hotel_language {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 6px 20px 0 20px;
    font-family: 'Gibson', Arial, Helvetica, sans-serif;
    color: rgba(255,255,255,0.7);
}
.hotel_address2:empty,
.hotel_address1:empty,
.hotel_city_state_zip:empty,
.hotel_primary_contact_email:empty,
.hotel_primary_contact_phone:empty,
.hotel_language:empty {
    display: none;
}
.hotel_primary_contact_email a {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 0;
    font-family: 'Gibson', Arial, Helvetica, sans-serif;
    color: #0078DF;
    text-decoration: underline;
    word-wrap: none;
    overflow: hidden;
}
.hotel_primary_contact_phone a {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 0;
    font-family: 'Gibson', Arial, Helvetica, sans-serif;
    color: #9B9B9B;
    text-decoration: none;
    word-wrap: none;
    overflow: hidden;
}
.hotel_edit_wrap {
    display: grid;
    width: 100%;
    align-content: center;
    justify-content: center;
    padding: 20px;
}
#hotel_edit_button {
    display: inline-block;
    width: 184px;
    max-width: 100%;
    padding-left: 10%;
    padding-right: 10%;
    box-sizing: border-box;
}
#delete-wrapper p {
    font-family: 'Gibson', Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 16px;
}
@media screen and (max-width: 900px) {
    .hotel_wrap {
        grid-template-columns: 1fr;
    }
    .hotel_info_wrap {
        margin-bottom: 40px;
    }
}

/* Settings Form */
.datetime_output {
    color: rgba(255,255,255,0.5);
    padding-bottom: 4px;
}

.settings_transmission .room_temp_wrapper#checkin_temp,
.settings_transmission .room_temp_wrapper#checkout_temp {
    height: auto;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 20px;
}
.settings_transmission .room_temp_wrapper#checkin_temp label,
.settings_transmission .room_temp_wrapper#checkout_temp label {
    grid-column: 1 / span 2;
}
.settings_transmission .room_temp_wrapper#checkin_temp .iot_spinner,
.settings_transmission .room_temp_wrapper#checkout_temp .iot_spinner {
    opacity: 1;
    top: 4px;
    display: none;
}
.settings_transmission .room_temp_wrapper#checkin_temp .iot_temp_reading, 
.settings_transmission .room_temp_wrapper#checkout_temp .iot_temp_reading {
    display: none;
}

.settings_transmission .room_temp_wrapper#checkin_temp .iot_temp_wrap,
.settings_transmission .room_temp_wrapper#checkout_temp .iot_temp_wrap {
    max-width: 130px;
    min-width: 130px;
}
.settings_transmission .room_temp_wrapper#checkin_temp .iot_temp_wrap .temp_1:hover,
.settings_transmission .room_temp_wrapper#checkout_temp .iot_temp_wrap .temp_1:hover,
.settings_transmission .room_temp_wrapper#checkin_temp .iot_temp_wrap .temp_2:hover,
.settings_transmission .room_temp_wrapper#checkout_temp .iot_temp_wrap .temp_2:hover,
.settings_transmission .room_temp_wrapper#checkin_temp .iot_temp_wrap .temp_3:hover,
.settings_transmission .room_temp_wrapper#checkout_temp .iot_temp_wrap .temp_3:hover {
    opacity: 0.3;
}
.settings_transmission .room_temp_wrapper#checkin_temp #checkin-temperature,
.settings_transmission .room_temp_wrapper#checkout_temp #checkout-temperature {
    position: absolute;
    width: 0px;
    height: 0px;
    padding: 0px;
    margin: 0px;
    opacity: 0;
}

/* Hotel Form */
/* .ui-dialog.hotel {
    min-width: 80%;
    max-width: 94%;
}
.ui-dialog.hotel.opened {
    min-width: auto;
} */
#customHotelForm {
    box-sizing: border-box;
    padding-left: 5%;
    padding-right: 5%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 5%;
    margin-top: 20px;
}
#customHotelForm fieldset {
    display: inline-block;
    width: 100%;
    background: none;
}
#customHotelForm fieldset legend {
    display: inline-block;
    width: 100%;
    border-bottom: 0px;
    font-family: 'GibsonSemiBold', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
}
div.DTE div.DTE_Body div.DTE_Body_Content #customHotelForm div.DTE_Field {
    padding-left: 0px;
    padding-right: 0px;
}
div.DTE_Body div.DTE_Body_Content div.DTE_Field > label {
    padding-right: 10px;
    overflow: hidden;
    display: inline-block;
    width: 100%;
    padding-top: 4px;
}

div.DTE_Field div.multi-value {
    color: #FFF;
    background-color: rgba(255,255,255,0.1);
    font-size: 1.2em;
    line-height: 1.1;
}
div.DTE_Field div.multi-value:hover {
    background-color: rgba(255,255,255,0.2);
}
div.DTE_Field div.multi-value span {
    display: inline-block;
    color: rgba(255,255,255,0.7);
    padding-top: 6px;
}

#customHotelForm fieldset label {
    display: inline-block;
    width: 100%;
    padding-bottom: 4px;
    font-size: 14px;
    line-height: 14px;
    font-family: 'GibsonLight', Arial, Helvetica, sans-serif;
}
div.DTE_Body div.DTE_Body_Content #customHotelForm div.DTE_Field > div.DTE_Field_Input {
    float: left;
    width: 100%;
}
div.DTE_Body div.DTE_Body_Content div.DTE_Field>div.DTE_Field_Input {
    float: left;
    width: 100%;
}
div.DTE div.editor_upload div.row.second div.cell:last-child {
    display: inline-block;
    margin-right: 0px;
    padding-right: 0px;
    width: 100%;
}
div.DTE div.editor_upload button.btn, div.DTE div.editor_upload input[type=file] {
    border-radius: 2px !important;
    font-size: 12px;
    cursor: pointer;
}
div.DTE div.editor_upload input[type=file]:hover {
    background-color: #FD501E;
    color: #fff;
}
div.DTE div.editor_upload div.drop {
    border: 1px dashed rgba(255,255,255,0.2);
    display: grid;
    align-items: center;
    justify-items: center;
}
div.DTE div.editor_upload div.rendered {
    display: inline-block;
    max-width: 180px;
}
div.DTE div.editor_upload div.rendered img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

/* Settings */
.settings .tableform {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
.settings .tableform > div.settings_attendant {
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 96%;
}
.settings .tableform > div.settings_transmission {
    display: inline-block;
    padding: 0%;
    margin: 0;
    width: 96%;
}
.settings_attendant h1,
.settings_transmission h1,
.settings_general h1 {
    font-size: 14px;
    line-height: 20px;
    width: 100%;
    margin: 0 0 10px 0;
    padding: 0;
    display: block;
    float: left;
    height: auto;
    border: 0;
    background: none;
    font-weight: normal;
    cursor: pointer;
    pointer-events: none;
    color: #FC5000;
    border-bottom: 1px solid #FC5000;
}
.settings
.settings_attendant_form,
.settings_transmission_form,
.settings_general_form {
    display: inline-grid;
    grid-template-columns: 1fr;
    width: 100%;
    padding-bottom: 50px;
    overflow: visible;
}
.settings_transmission_form h3 {
    display: block;
    width: 100%;
    text-transform: uppercase;
    margin-bottom: 10px;
    margin-top: 22px;
    color: rgba(255,255,255,0.5);
}
.settings_transmission_form h3:first-child {
    margin-top: 0;
}
.settings_attendant_form > div:nth-child(3),
.settings_attendant_form > div:nth-child(6) {
    margin-bottom: 30px;
}
.settings_attendant_form label,
.settings_transmission_form label[for="postingIP"],
.settings_transmission_form label[for="postingPort"],
.settings_attendant_form label[for="att_comments"],
.settings_attendant_form label[for="att_comments"] span,
.settings_general_form label {
    padding-left: 8px;
    display: inline-block;
    font-family: 'GibsonLight', Arial, Helvetica, sans-serif;
}
.settings_transmission_form label[for="postingIP"],
.settings_transmission_form label[for="postingPort"],
.settings_transmission_form label[for="pmsIP"],
.settings_transmission_form label[for="pmsPort"],
.settings_attendant_form label[for="att_comments"],
.settings_attendant_form label[for="att_comments"] span,
.settings_general_form label,
.settings_transmission_form label {
    padding-left: 0px;
    width: 100%;
    margin-bottom: 6px;
}
.settings_transmission_form label[for="pms_emulator_chk"] {
    width: auto;
    display: inline-block;
    padding-left: 10px;
}
div.pms_emulator_wrapper {
    margin-bottom: 20px;
}
div.pms_emulator_wrapper > span {
    display: inline-block;
    width: 100%;
    color: rgba(255,255,255,0.7);
    font-style: italic;
    display: none;
}
.settings_attendant_form textarea {
    color: #454545;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    margin-top: 4px;
    margin-bottom: 10px;
    background: #FFF;
    border: 1px solid #FFF;
    border-radius: 2px !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    padding: 8px;
}
.settings_attendant_form button,
.settings_transmission_form button,
.settings_general_form button {
    margin-top: 10px;
    min-width: 130px;
    padding: 8px 20px;
    border: 1px solid #FD501E;
    color: #FD501E;
    border-radius: 2px;
    background: none;
}
.settings_attendant_form a {
    margin-top: 5px;
    min-width: 130px;
    padding: 8px 20px;
}
.settings_attendant_form a:hover {
    color: #FFF;
    background: #0076c6;
    background-color: #0076c6;
    border: 1px solid #0076c6;
}

/* Tax Settings */
.tax_settings {
    position: relative;
    margin-bottom: 30px;
    display: inline-block;
    width: 100%;
}
.tax_settings label.tax_lbl {
    display: inline-block;
    width: 100%;
    padding-left: 0px;
}
.tax_settings > div:first-child {
    margin-bottom: 10px;
}
.tax_settings input[type="text"] {
    display: inline-block;
    margin-top: 6px;
    margin-bottom: 10px;
    width: 100%;
    min-width: 180px;
    height: 30px;
    font-size: 14px;
    line-height: 14px;
    font-weight: normal;
    padding: 8px 4px;
    background: #FFF;
    border: 1px solid #FFF;
    color: #454545;
    border-radius: 2px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
}
.tax_settings select {
    display: inline-block;
    margin-top: 6px;
    margin-bottom: 10px;
    width: 100%;
    min-width: 180px;
    height: 30px;
    font-size: 14px;
    line-height: 14px;
    font-weight: normal;
    padding: 4px 10px 4px 0px;
    background: #FFF;
    border: 1px solid #FFF;
    color: #454545;
    border-radius: 2px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    cursor: pointer;
}


.settings_mic a:not(.dms_btn) {
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
}
.settings_mic a:hover {
    color: rgba(255,255,255,0.8);
}
.settings_mic strong {
    padding-bottom: 6px;
}
.settings_mic a.dms_btn {
    margin-top: 6px;
    margin-bottom: 0px;
}
.settings_mic a.dms_btn:last-child {
    margin-bottom: 50px;
}

.settings_transmission_form input[type="text"],
.settings_general_form input[type="text"] {
    display: inline-block;
    margin-top: 6px;
    margin-bottom: 10px;
    width: 100%;
    min-width: 180px;
    height: 30px;
    font-size: 14px;
    line-height: 14px;
    font-weight: normal;
    padding: 8px 4px;
    background: #FFF;
    border: 1px solid #FFF;
    color: #454545;
    border-radius: 2px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
}
.settings_general_form select,
.settings_transmission_form select {
    display: inline-block;
    margin-top: 6px;
    margin-bottom: 10px;
    width: 100%;
    min-width: 180px;
    height: 30px;
    font-size: 14px;
    line-height: 14px;
    font-weight: normal;
    padding: 4px 10px 4px 0px;
    background: #FFF;
    border: 1px solid #FFF;
    color: #454545;
    border-radius: 2px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    cursor: pointer;

}
@media screen and (max-width:768px) {
    .settings .bottombar {
        position: fixed;
    }
    .settings .tableform {
        display: block !important;
        clear: both;
        margin-bottom: 30px;
    }
    .settings_attendant_form,
    .settings_transmission_form,
    .settings_general_form {
        width: 100%;
    }
    .settings_attendant_form {
        margin-bottom: 20px;
    }
}


.spinner {
    display: inline-block;
    width: 22px;
    height: 22px;
    opacity: 0;

    -webkit-transition: background-color 100ms ease-out 20ms;
    -moz-transition: background-color 100ms ease-out 20ms;
    -o-transition: background-color 100ms ease-out 20ms;
    transition: background-color 100ms ease-out 20ms;
}
.spinner:after {
  content: " ";
  display: block;
  width: 22px;
  height: 22px;
  margin: 8px;
  border-radius: 50%;
  border: 3px solid rgb(92, 92, 92);
  border-color: rgb(92, 92, 92) transparent rgb(92, 92, 92) transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
.admin-tabs .spinner {
    visibility: hidden !important;
    opacity: 0 !important;
    display: none;
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}




/* Datatables Mobile Overrides */
@media screen and (max-width:950px) {
    .dataTables_wrapper .buttons {
        display:grid;
        grid-template-columns: calc(100% - 260px) 260px;
        grid-template-rows: 40px 40px;
        height: 80px;
    }
    .report_page .dataTables_wrapper .buttons {
        display: block;
        height: auto;
    }
    
    #staffTable_wrapper .buttons {
        display: block;
        width: 100%;
        height: auto;
    }
    #floorsTable_wrapper .buttons,
    #roomsTable_wrapper .buttons {
        display: block;
        width: auto;
        height: auto;
    }
    .dataTables_wrapper .dataTables_filter {
        grid-row: 1;
        grid-column: 1;
        text-align: left !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
    }
    .dataTables_wrapper .dataTables_filter label input {
        margin-left: 0;
    }
    .dataTables_wrapper .dt-buttons {
        grid-row: 2;
        grid-column: 1;
        text-align: left;
        
    }
    .dataTables_wrapper .dt-buttons .dt-button {
        padding-left: 4px;
        padding-right: 4px;
    }
    .dataTables_wrapper .dataTables_length {
        grid-row: 1;
        grid-column: 2;
        
    }
    .dataTables_wrapper .dataTables_length label {
        margin-right: 0;
        float: right;
    }
    .dataTables_wrapper .dataTables_paginate {
        grid-row: 2;
        grid-column: 2;
        text-align: right;
    }
    .dataTables_wrapper .dataTables_paginate .fg-button {
        height: 30px;
        /* padding: 6px 1px 6px 0; */
        font-size: 10px;
        line-height: 18px;
        vertical-align: baseline;
    }
    .dataTables_wrapper .dataTables_paginate .ellipsis {
        padding-left: 2px;
        padding-right: 2px;
        line-height: 30px;
    }
}
@media screen and (max-width:768px) {
    .dataTables_wrapper {
        margin-bottom: 10px;
    }
    #floorsTable_wrapper,
    #roomsTable_wrapper,
    #staffTable_wrapper {
        margin-bottom: 0px;
    }
}


/* Bootstrap Overrides */
.container:before, .container:after {
    display: none;
}
@media screen and (min-width: 768px) {
    .container {
        width: calc(100% - 100px);
        max-width: calc(100% - 100px);
        margin-left: 50px;
        margin-right: 50px;
    }
}
@media screen and (max-width: 767px) {
    .container {
        width: calc(100% - 40px);
        max-width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        padding-left: 0;
        padding-right: 0;
    }
}


/* Modal Overrides */
.modal {
    z-index: 10000
} 
.modal-backdrop {
    z-index: 9999;
}

#password_reset_modal .modal-dialog {
    position: relative;
    width: 300px;
    max-width: 80%;
    margin: 0 auto;
    top: 40px;
}


#AddMultipleRoomsModal .modal-dialog, 
#IoTModal .modal-dialog {
    margin: 0;
    position: relative;
    /* width: 280px;
    max-width: 280px; */
}
#IoTModal .modal-dialog {
    max-width: 80%;
    margin: 0 auto;
}
#AddMultipleRoomsModal .modal-dialog::before,
#password_reset_modal .modal-dialog::before,
#IoTModal .modal-dialog::before {
    content: "▾";
    font-size: 22px;
    position: absolute;
    top: -12px;
    left: 36px;
    transform: rotate(180deg);
    color: rgba(0,0,0,0.9);
}
#AddMultipleRoomsModal .modal-dialog .modal-content, 
#password_reset_modal .modal-dialog .modal-content,
#IoTModal .modal-dialog .modal-content {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0;
    background: none;
}
#AddMultipleRoomsModal .modal-dialog .modal-content .modal-header,
#password_reset_modal .modal-dialog .modal-content .modal-header,
#IoTModal .modal-dialog .modal-content .modal-header {
    /* background: rgba(0,0,0,0.9); */
    border: none;
    /* background: rgba(0,0,0,0.7); */
    background-color: #2A2A2A;
    background-color: rgba(42,42,42,0.98);
    color: #FFF;
    font-size: 18px;
    font-weight: bold;
    border-radius: 0;
    min-height: 34px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    text-transform: uppercase;
    padding-left: 0;
    padding-right: 0;
}
#AddMultipleRoomsModal .modal-dialog .modal-content .modal-header .modal-title, 
#password_reset_modal .modal-dialog .modal-content .modal-header .modal-title,
#IoTModal .modal-dialog .modal-content .modal-header .modal-title {
    display: block;
    float: left;
    text-align: left;
    width: 100%;
    padding-right: 5%;
    padding-left: 5%;
    padding-top: 10px;
    padding-bottom: 10px;
}
#AddMultipleRoomsModal .modal-dialog .modal-content .modal-header .close,
#password_reset_modal .modal-dialog .modal-content .modal-header .close,
#IoTModal .modal-dialog .modal-content .modal-header .close {
    display: block;
    margin: 0;
    position: absolute;
    top: 12px;
    right: 5%;
    color: #FFF;
    padding: 0;
    opacity: 1;
}
#AddMultipleRoomsModal .modal-dialog .modal-content .modal-header .close span,
#password_reset_modal .modal-dialog .modal-content .modal-header .close span,
#IoTModal .modal-dialog .modal-content .modal-header .close span {
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 6px;
    right: 5%;
    overflow: hidden;
    transform: rotate(45deg);
    background: transparent !important;
    border: 1px solid transparent !important;
    text-indent: -100px;
    opacity: 1;

    transition: all 300ms;
}
#AddMultipleRoomsModal .modal-dialog .modal-content .modal-header .close span:before, 
#password_reset_modal .modal-dialog .modal-content .modal-header .close span:before,
#IoTModal .modal-dialog .modal-content .modal-header .close span:before {
    position: absolute;
    content: "";
    width: 3px;
    height: 21px;
    background: #525252;
    left: 9px;
    top: 0px;
    transition: all 300ms;
}
#AddMultipleRoomsModal .modal-dialog .modal-content .modal-header .close span:after, 
#password_reset_modal .modal-dialog .modal-content .modal-header .close span:after,
#IoTModal .modal-dialog .modal-content .modal-header .close span:after {
    content: "";
    width: 21px;
    height: 3px;
    background: #525252;
    position: absolute;
    left: 0px;
    top: 9px;
    transition: all 300ms;
}
#AddMultipleRoomsModal .modal-dialog .modal-content .modal-header .close:hover span:before,
#AddMultipleRoomsModal .modal-dialog .modal-content .modal-header .close:hover span:after, 
#password_reset_modal .modal-dialog .modal-content .modal-header .close:hover span:before,
#password_reset_modal .modal-dialog .modal-content .modal-header .close:hover span:after,
#IoTModal .modal-dialog .modal-content .modal-header .close:hover span:before,
#IoTModal .modal-dialog .modal-content .modal-header .close:hover span:after {
    background: #FFF;
}
#AddMultipleRoomsModal .modal-dialog .modal-content .modal-body, 
#password_reset_modal .modal-dialog .modal-content .modal-body,
#IoTModal .modal-dialog .modal-content .modal-body {
    background-color: #2A2A2A;
    background-color: rgba(42,42,42,0.98);
    padding: 20px 5%;
    display: grid;
    grid-template-columns: 1fr;
    color: #FFF;
}
#AddMultipleRoomsModal .modal-dialog .modal-content .modal-body .DTE_Form_Info, 
#password_reset_modal .modal-dialog .modal-content .modal-body .DTE_Form_Info,
#IoTModal .modal-dialog .modal-content .modal-body .DTE_Form_Info {
    
    color: #FFF;
    padding-bottom: 4px;
    margin-bottom: 10px;
}
#AddMultipleRoomsModal .modal-dialog .modal-content .modal-body label, 
#password_reset_modal .modal-dialog .modal-content .modal-body label,
#IoTModal .modal-dialog .modal-content .modal-body label {
    font-family: 'GibsonSemiBold', Arial, Helvetica, sans-serif;
    padding-bottom: 5px;
}
#AddMultipleRoomsModal .modal-dialog .modal-content .modal-body input, 
#password_reset_modal .modal-dialog .modal-content .modal-body input,
#IoTModal .modal-dialog .modal-content .modal-body input {
    display: block;
    width: 50%;
    overflow: hidden;
    margin: 2px 0 0 0;
    height: 30px;
    font-size: 14px;
    line-height: 30px;
    padding: 8px 4px;
    font-weight: normal;
    border-radius: 2px;
    color: #454545;
}
#AddMultipleRoomsModal .modal-dialog .modal-content .modal-body input.hotel_room_range_zone,
#IoTModal .modal-dialog .modal-content .modal-body input.hotel_room_range_zone {
    width: 100%;
}
#AddMultipleRoomsModal .modal-dialog .modal-content .modal-footer, 
#password_reset_modal .modal-dialog .modal-content .modal-footer,
#IoTModal .modal-dialog .modal-content .modal-footer {
    /* background: rgba(0,0,0,0.9); */
    background-color: #2A2A2A;
    background-color: rgba(42,42,42,0.98);
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 20px 5%;
}
#AddMultipleRoomsModal .modal-dialog .modal-content .modal-footer button, 
#password_reset_modal .modal-dialog .modal-content .modal-footer button,
#IoTModal .modal-dialog .modal-content .modal-footer button {
    border: 1px solid #E35C33;
    border-radius: 2px;
    background: none;
    background-color: transparent;
    color: #E35C33;
    float: right;

    transition: all 250ms;
}
#AddMultipleRoomsModal .modal-dialog .modal-content .modal-footer button:hover, 
#password_reset_modal .modal-dialog .modal-content .modal-footer button:hover,
#IoTModal .modal-dialog .modal-content .modal-footer button:hover {
    background: #E35C33;
    color: #fff;
}
#IoTModal .room_control_toggle {
    display: none;
}

.hotel_room_range_err {
    display: block;
    width: 100%;
    color: #F00;
    padding-top: 10px;
}
.hotel_room_range_err:empty {
    display: none;
}

body .ui-dialog {
    max-width: 100%;
    border: none !important;
    border-radius: 0 !important;
    margin: 0;
    padding: 0;
    /* min-width: 320px; */
    top: 70px;
}
.ui-dialog, .ui-dialog-content {
    box-sizing: content-box;
    /* min-width: 300px !important; */
}
.ui-widget-content {
    /* background: none;
    width: 100%;
    overflow-x:hidden; 
    background-color: #2A2A2A;
    background-color: rgba(42,42,42,0.98);*/
    background: none;
    box-sizing: content-box !important;
    min-width: 300px;
    padding: 0px;
}
.ui-widget-header {
    border: none;
    /* background: rgba(0,0,0,0.7); */
    background-color: #2A2A2A;
    background-color: rgba(42,42,42,0.98);
    color: #FFF;
    font-size: 18px;
    line-height: 18px;
    font-weight: bold;
    border-radius: 0;
    min-height: 34px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    text-transform: uppercase;
    min-width: 100px;
    box-sizing: content-box !important;
}
.ui-dialog .ui-dialog-titlebar {
    padding: 20px 5% 16px 5%;
    text-align: left;
}
.ui-dialog .ui-dialog-title {
    width: 100%;
    margin: 0;
    padding-top: 4px;
    padding-right: 40px;
    white-space:normal;
    line-height: 1.1em;
}

.ui-widget-content .ui-dialog-buttonpane {
    background: rgba(0,0,0,0.7);
    background-color: #2A2A2A;
    background-color: rgba(42,42,42,0.98);
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 14px 0;
    min-width: 100px;
    box-sizing: content-box !important;
}
.ui-dialog-content.ui-widget-content {
    background: #FFF;
    background-color: #2A2A2A;
    background-color: rgba(42,42,42,0.98);
    overflow-x: auto;
    overflow-y: scroll;
    color: #FFF;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 0px;
    padding-right: 0px;
    /* width: 100%;
    left: 0;
    right: 0; */
}
div.DTE_Body div.DTE_Body_Content div.DTE_Field:hover {
    background-color: rgba(255,255,255,0);
    border: 1px solid rgba(255,255,255,0);
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    padding-right: 5%;
}
.ui-dialog .ui-dialog-buttonpane button {
    margin-right: 0;
    margin-left: 10px;
    border: 1px solid #FD501E;
    color: #FD501E;
    border-radius: 2px;
    background: transparent;
    background-color: transparent;
    padding-left: 20px;
    padding-right: 20px;

    transition: all 250ms;
}
.ui-dialog .ui-dialog-buttonpane button:hover {
    background-color: #FD501E !important;
    color: #FFF;
}
/* .ui-dialog .ui-dialog-buttonpane button:focus{
    background-color: #FD501E !important;
    color: #FFF;
} */
.ui-dialog .ui-dialog-buttonpane button.ui-corner-all {
    border-radius: 2px !important;
    text-transform: uppercase;
}
.ui-dialog .ui-dialog-buttonpane.ui-widget-content {
    margin-top: 0px;
}
.ui-dialog .ui-dialog-titlebar-close {
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 20px;
    right: 5%;
    overflow: hidden;
    transform: rotate(45deg);
    background: transparent !important;
    border: 1px solid transparent !important;

    transition: all 300ms;
}
.ui-dialog .ui-dialog-titlebar-close:after {
    position: absolute;
    content: "";
    width: 3px;
    height: 21px;
    background: #525252;
    left: 9px;
    top: 0px;
    transition: all 300ms;
}
.ui-dialog .ui-dialog-titlebar-close:before {
    content: "";
    width: 21px;
    height: 3px;
    background: #525252;
    position: absolute;
    left: 0px;
    top: 9px;
    transition: all 300ms;
}
.ui-dialog .ui-dialog-titlebar-close:hover:after,
.ui-dialog .ui-dialog-titlebar-close:hover:before {
    background: #FFF;
}
div.DTE_Body div.DTE_Body_Content div.DTE_Form_Info {
    /* border-bottom: 1px solid #CCC; */
    padding-left: 5%;
    padding-right: 5%;
    margin-bottom: 10px;
    font-family: 'GibsonSemiBold', Arial, Helvetica, sans-serif;
}

/* Session Timout Overrides */

body #session-timeout-dialog {
    z-index: 10001 !important;
    top: 56px;
}
body #session-timeout-dialog .modal-dialog {
    /* background-color: rgba(0,0,0,0.8) !important; */
    background-color: #fff;
    overflow: hidden;
    width: 600px;
    /* color: #FFF; */
    color: black;
    margin-top: 0;
    border-radius: 0.3rem;
}
body #session-timout-dialog .modal-dialog .modal-content {
    display: block;
    overflow: hidden;
    
}
#session-timeout-dialog .modal-content {
    background: none !important;
    
}
body #session-timeout-dialog .modal-header {
    display: grid;
    grid-template-columns: 1fr 40px;
    position: relative;
    align-items: center;
}
body #session-timeout-dialog .modal-header h4 {
    grid-column: 1 / span 1;
    grid-row: 1;
    font-size: 1.3rem;
}
#session-timeout-dialog .modal-dialog .modal-content .modal-header .close {
    position: relative;
    grid-column: 2 / span 1;
    grid-row: 1;
    width: 30px;
    height: 30px;
    background: #f6f6f6;
    font-size: 12px;
    font-weight: normal;
    color: #454545;
    border: 1px solid #c5c5c5;
    opacity: 1;
    margin-right: 0;
    margin-top: 0;
    display: grid;
    align-items: center;
    justify-items: center;
    padding: 0px;
    margin: 0px !important;
}
body #session-timeout-dialog .modal-dialog .modal-content .modal-header .modal-title {
    display: block;
    text-align: left;
    float: left;
    width: 300px;
    margin: 0;
    padding: 0;
    padding-right: 30px;
    font-size: 2rem;
}
body #session-timeout-dialog .modal-dialog .modal-content .modal-body {
    /* color: #aaa; */
    color: #454545;
}
body #session-timeout-dialog .modal-dialog .modal-content .modal-body .progress {
    padding-bottom: 0;
    height: 20px;
}
body #session-timeout-dialog .modal-dialog .modal-content .modal-body .progress .progress-bar {
    background-repeat: repeat;
}
body #session-timeout-dialog .modal-dialog .modal-content .modal-header::before,
body #session-timeout-dialog .modal-dialog .modal-content .modal-header::after {
    display: none;
}

body #session-timeout-dialog .modal-dialog .modal-content .modal-body .progress {
    padding-bottom: 0;
    height: 20px;
}
body #session-timeout-dialog .modal-dialog .modal-content .modal-body .progress .progress-bar {
    background-repeat: repeat;
}
body #session-timeout-dialog .modal-dialog .modal-content .modal-header::before,
body #session-timeout-dialog .modal-dialog .modal-content .modal-header::after {
    display: none;
}
body #session-timeout-dialog .modal-footer button {
    font-size: 1.5rem;
}
body #session-timeout-dialog .modal-header button.close:hover {
    background: #fb4e07 !important;
    background-color: #fb4e07 !important;
    border: 1px solid #fb4e07 !important;
    color: #FFF !important;
}

.progress-bar {
    background-color: #FC5000;
}

#session-timeout-dialog .modal-body > p {
    display: inline-block;
    width: 100%;
    text-align: center;
}
.modal-body > p > span.question {
    display: grid;
    align-items: center;
    justify-items: center;
    width: 100%;
    font-size: 50px;
    width: 60px;
    height: 60px;
    border: 4px solid #FC5000;
    border-radius: 50%;
    margin: 0 auto 20px auto;
}
.modal-body > p > span.question {
    font-size: 50px;
    line-height: 60px;
    vertical-align: middle;
    color: #FC5000;
}

.modal-body > p > span.warning {
    display: grid;
    align-items: center;
    justify-items: center;
    width: 100%;
    font-size: 50px;
    width: 60px;
    height: 60px;
    border: 4px solid #FC5000;
    border-radius: 50%;
    margin: 0 auto 20px auto;
}
.modal-body > p > span.warning {
    font-size: 50px;
    line-height: 60px;
    vertical-align: middle;
    color: #FC5000;
}

/* DMS Style Set Overrides */
body.login {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #014F82;
}
.responsive_bg {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.responsive_bg img {
    display: block;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: center;
    
}
.dms-btn,
a.ui-button.dms-btn,
a:link.ui-button.dms-btn,
a:visited.ui-button.dms-btn,
.ui-button.dms-btn {
    background: #FC5000;
    color: #FFF;
    text-transform: uppercase;
    font-weight: normal;
    border: 1px solid rgba(0,0,0,0.7);
    padding: 12px 20px;
    font-size: 16px;
    line-height: 20px;
    text-decoration: none !important;
    display: inline-block;
    border-radius: 6px;
}
.dms-btn:hover,
a.ui-button.dms-btn:hover,
a:link.ui-button.dms-btn:hover,
a:visited.ui-button.dms-btn:hover,
.ui-button.dms-btn:hover {
    background: #f3754f;
    cursor: pointer;
}
.dms-btn:focus,
a.ui-button.dms-btn:focus,
a:link.ui-button.dms-btn:focus,
a:visited.ui-button.dms-btn:focus,
.ui-button.dms-btn:focus {
    background: #f3754f;
    cursor: pointer;
    border: 1px solid #FFF;
    outline: 0 !important;
    outline-offset: 0px;
}


/* Landing */

.copyright {
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    margin: 0;
    padding: 0;
    bottom: 20px;
    width: 100%;
    text-align: center;
    color: #000;
    font-size: 16px;
}
@media screen and (max-width: 768px) {
    .copyright {
        position: relative;
        font-size: 14px;
    }
}

@media screen and (max-height: 768px) {
    .copyright {
        position: relative;
    }
}

/* Login */
.login_wrapper p {
    padding-bottom: 12px;
}
.login .login_wrapper a:first-child {
    margin-top: 0px;
}
.login_wrapper {
    width: 36%;
    min-width: 600px;
    max-width: 80%;
    overflow: hidden;
    margin: 10% auto;
    padding: 20px 6% 60px 6%;
    background: rgba(0,0,0,0.9);
    color: #FFF;
    text-align: center;
}
@media screen and (min-width:1600px) {
    .login_wrapper {
        width: 32%;
    }
}
.login_wrapper p,
.login_wrapper label {
    display: block;
    margin-top: 20px;
    padding-bottom: 5px;
    text-align: left;
    font-weight: normal;
}
.login_wrapper input[type="submit"] {
    background-color: #FC5000;
    color: #fff;
    line-height: 20px;
    width: auto;
    padding: 12px 30px;
    font-size: 16px !important;
    border: 0;
    margin: 20px auto 0 auto;
    cursor: pointer;
    min-width: 200px;
}
.login_wrapper input[type="submit"]:hover {
    background-color: #f3754f;
    color: #fff;
}
.login_wrapper input[type="text"],
.login_wrapper input[type="password"],
.login_wrapper select {
    display: inline-block;
    width: 100%;
    margin: 10px 0;
    background: #E8F0FE;
    /* height: 40px !important; */
    font-size: 14px;
    line-height: 14px;
    vertical-align: middle;
    padding: 13px 8px;
    border-radius: 0;
    color: #454545;
    font-weight: normal !important;
}

.login_wrapper input[type="text"]:focus,
.login_wrapper input[type="password"]:focus,
.login_wrapper select:focus {
    border: 1px solid #fb4e07;
}
@media screen and (max-width: 768px) {
    .login_wrapper {
        min-width: 80%;
        padding-left: 10%;
        padding-right: 10%;
        padding-bottom: 10%;
    }
}
@media screen and (max-height: 768px) {
    .login_wrapper {
        margin-top: 40px;
        margin-bottom: 40px;
    }
}

.login_title {
    padding: .3em;
}
#error {
    padding: 1em;
}
@media screen and (max-width: 768px) {
    #error {
        padding: 4px;
    }
}

.ui-button:hover {
    background: #fb4e07;
    background-color: #fb4e07;
    border: 1px solid #fb4e07;
    color: #FFF;
}
.ui-button.edit-btn:hover {
    background: #0076c6;
    background-color: #0076c6;
    border: 1px solid #0076c6;
    color: #FFF;
}
.ui-button.delete-btn:hover {
    background: #B80F0A;
    background-color: #B80F0A;
    border: 1px solid #B80F0A;
    color: #FFF;
}
#canvas {
    padding-right: 20px;
}
.edit-information {
    text-transform: uppercase;
    line-height: 1.4;
}


/* Attendant Topbar */
.topbar.attendant {
    display: grid;
    grid-template-columns: 260px minmax(0,auto) minmax(380px,auto);
    grid-row-gap: 0;
    grid-column-gap: 20px;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}
.topbar.attendant .topbar_left {
    padding-left: 20px;
}

.topbar.attendant > div:nth-child(3) {
    justify-self: flex-end;
}
.topbar.attendant .topbar_right {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: 10px;
    padding: 8px 30px 8px 10px;
    justify-content: right;
    align-content: center;
    height: 60px;
    position: relative;
    z-index: 99;
    grid-row-gap: 5px;
}

@media screen and (max-width:768px) {
    .topbar.attendant {
        grid-template-columns: 140px 0px 1fr;
    }
}

.topbar .topbar_right .header_name {
    grid-column: 1 / span 2;
    font-size: 16px;
    line-height: 18px;
    margin: 0;
    padding: 0px;
    color: #FC5000;
}
@media screen and (max-width:768px) {
    .topbar .topbar_right .header_name {
        font-size: 11px;
        line-height: 12px;
    }
}
.topbar .topbar_right .header_name .lname {
    font-family: 'GibsonSemiBold', Arial, Helvetica, sans-serif;
}
.topbar .topbar_right .user_lvl {
    box-sizing: border-box;
    color: #999;
    border-left: 1px solid #999;
    font-size: 16px;
    line-height: 16px;
    height: 16px;
    display: inline-block;
    margin-left: 10px;
}
@media screen and (max-width:768px) {
    .topbar .topbar_right .user_lvl {
        font-size: 11px;
        line-height: 12px;
    }
}
.topbar .topbar_right .user_level .admin_lvl {
    
    color: #999 !important;
}
.topbar .topbar_right .last_activity {
    font-size: 11px;
    line-height: 11px;
    height: 11px;
    text-transform: uppercase;
}
.topbar .topbar_right .last_activity #lastupdated {
    color:#999;
}
@media screen and (max-width:768px) {
    .topbar .topbar_right .last_activity {
        font-size: 10px;
        line-height: 10px;
        height: 10px;
    }
}
.topbar .topbar_right .avatar_link {
    position: relative;
    display: block;
    width: 44px;
    height: 44px;
    grid-row: 1 / span 3;
    grid-column: 3;
    border: 1px solid #FFF;
    border-radius: 22px;
    margin-right: 20px;
    align-self: center;
    cursor: pointer;
}
.topbar .topbar_right .avatar_link .avatar_icon {
    display: block;
    position: absolute;
    top: 6px;
    left: 9px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    cursor: pointer;
}
.topbar .topbar_right .avatar_link .avatar_icon .avatar_head {
    display: block;
    position: absolute;
    top: 0;
    left: 5px;
    width: 14px;
    height: 14px;
    border: 2px solid #FFF;
    border-radius: 7px;
    background: rgba(255,255,255,0.05);
    
    -webkit-transition: all 200ms ease-out 50s;
    -moz-transition: all 200ms ease-out 50s;
    -o-transition: all 200ms ease-out 50s;
    transition: all 200ms ease-out 50ms;
}
.topbar .topbar_right .avatar_link .avatar_icon .avatar_body {
    display: block;
    position: absolute;
    width: 24px;
    height: 14px;
    bottom: 0;
    left: 0;
    border: 2px solid #FFF;
    border-radius: 10px 10px 0 0;
    background: rgba(255,255,255,0.05);
}
.topbar .topbar_right .avatar_link .avatar_icon .avatar_arrow {
    display: block;
    position: absolute;
    left: 46px;
    top: 6px;
    width: 10px;
    height: 10px;
    border-right: 2px solid #FFF;
    border-bottom: 2px solid #FFF;
    transform: rotate(45deg);

    -webkit-transition: all 200ms ease-out 50s;
    -moz-transition: all 200ms ease-out 50s;
    -o-transition: all 200ms ease-out 50s;
    transition: all 200ms ease-out 50ms;
}
.topbar .topbar_right .avatar_link .avatar_icon.on .avatar_arrow  {
    transform: rotate(-45deg);
}
@media screen and (max-width:768px) {
    .attendant .bottombar {
        position: fixed;
    }
}

/* DMS Admin Topbar */
body.adminlogin .topbar {
    padding: 14px 20px;
}

/* Admin Tabs */
.admin_tabs {
    grid-column: 1 / span 3;
    background: #2C3135;
    display: grid;
    grid-template-columns: calc(100% - 30px) 30px;
    padding: 0px 10px 0px 0px;
}
.admin_tabs .spinner {
    display: none !important;
}


.transmit_wrapper,
.check_wrapper {
    display: block;
    width: 100%;
    border-bottom: 1px solid #454545;
    margin-bottom: 10px;
}
.try_conn {
    display: block;
    float: left;
    clear: both;
    width: auto;
    padding: 4px 10px 4px 4px;
    background: rgba(255,255,255,0.05);
    border: 1px solid #FC5000;
    color: #FC5000;
    font-size: 16px;
    line-height: 18px;
    font-weight: normal;
    margin-top: 10px;
    text-transform: uppercase;
    cursor: pointer;
}
.try_conn:hover {
    background: rgba(255,255,255,0.1);
}
.attendant .bottombar {
    background: none;
}
.attendant .footer_content {
    display: block;
}
.attendant .footer_left.att {
    width: 100%;
    opacity: 1;
}
.attendant .footer_left.att a {
    color: #fc5000;
    display: inline-block;
    margin-left: 10px;
    display: none;
}
.attendant .footer_left.att span {
    display: none;
}
.attendant .footer_left.att a:hover {
    color: #FFF;
}

.attendant .wrapper.container {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding-top: 100px;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

/* Attendant Breadcrumbs */
.breadcrumbs {
    display: block;
    position: fixed;
    z-index: 98;
    top: 70px;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 30px;
    background: #404040;
    font-size: 14px;
    line-height: 16px;
    padding: 7px 20px;
    box-shadow: inset 0px 4px 8px rgba(0,0,0,0.15), inset 0px -3px 8px rgba(0,0,0,0.15);
}
.breadcrumbs a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
}
.breadcrumbs a:hover, .breadcrumbs a:hover span {
    color: rgba(255,255,255,1); 
}
.breadcrumbs .spinner {
    position: absolute;
    top: 4px;
    right: 4px;
}
.breadcrumbs .spinner:after {
    width: 20px;
    height: 20px;
    margin: 0;
}
.breadcrumbs span.glyphicon-menu-right {
    color: #fc5000;
}



.transmit_message {
    text-align: center;
    padding: 20px;
    font-size: 16px;
    line-height: 18px;
}
.panel_wrapper {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 60px;
    width: 100%;
    height: calc(100vh - 160px);
    overflow: visible;
}
.panel_scroller {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    bottom: 100px;
    width: 300vw;
    height: auto;

    -webkit-transition: left 200ms ease-out 100ms;
    -moz-transition: left 200ms ease-out 100ms;
    -o-transition: left 200ms ease-out 100ms;
    transition: left 200ms ease-out 100ms;
}

/* #panel-1 {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    bottom: 100px;
    width: 100vw;
    min-height: 300px;
    padding: 0 30px;
    height: calc(100vh - 160px);
    overflow-y: scroll;
} */
#panel1 {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    bottom: 100px;
    width: 100vw;
    min-height: 300px;
    padding: 0 30px;
    height: calc(100vh - 160px);
    overflow-y: scroll;
}
#panel2 {
    display: block;
    position: absolute;
    top: 0;
    left: 100vw;
    right: auto;
    bottom: 100px;
    width: 100vw;
    min-height: 300px;
    padding: 0 30px;
    height: calc(100vh - 160px);
    overflow-y: scroll;
}
#panel3 {
    display: block;
    position: absolute;
    top: 0;
    left: 200vw;
    right: auto;
    bottom: 100px;
    width: 100vw;
    height: auto;
    min-height: 300px;
    padding: 0 30px;
    height: calc(100vh - 160px);
    overflow-y: scroll;
}

.dms-btn.btn-transmit, .dms-btn.btn-checkrooms, .dms-btn.btn-signout {
    width: 100%;
    margin-bottom: 10px;
    border: 1px solid #FFF;
    text-align: center;
}
.dms-btn.btn-transmit {
    margin-bottom: 0;
    display: none;
    background: #73b466;
}
.dms-btn.btn-transmit:hover,
.dms-btn.btn-transmit:active,
.dms-btn.btn-transmit:focus {
    background: #8fba7e;
}

.dms-btn.btn-transmit .spinner:after {
    content: " ";
    display: block;
    width: 13px;
    height: 13px;
    margin: 6px;
    border-radius: 50%;
    border: 3px solid rgb(255, 255, 255);
    border-color: rgb(255, 255, 255) transparent rgb(255, 255, 255) transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}
.dms-btn.btn-checkrooms {
    background: #0076c6;
}
.dms-btn.btn-checkrooms:hover {
    background: #4b87c8;
}
.dms-btn.btn-transmit:disabled {
    background: #CCC;
}
a.ui-button.dms-btn.btn-signout {
    border: 1px solid #FC5000;
}

#left_btn, #right_btn {
    position: relative;
    float: right;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    width: 38px;
    height: 38px;
    background: #333;
    border: 2px solid rgba(0,0,0,0.9);
    border-radius: 38px;
    top: -20px;
    margin-right: 20px;
}
#left_btn:hover, #right_btn:hover {
    color: #fc5000;
    background: #444;
}
#right_btn {
    margin-right: 20px;
}
#left_btn {
    margin-right: 6px;
}
#left_btn span,
#right_btn span {
    display: block;
    position: absolute;
    width: 22px;
    height: 22px;
    left: 5px;
    top: 5px;
    font-size: 22px;
    line-height: 22px;
}

/* Folio and Initials */
.folio_initial_wrapper {
    display: block;
    width: 100%;
    overflow: hidden;
}
.folio_initial_wrapper input[type="text"] {
    display: block;
    width: calc(50% - 30px);
    background: #DFECFC;
    border: 1px solid #DFECFC;
    color: #666;
    font-size: 18px;
    line-height: 18px;
    padding: 14px;
}
.folio_initial_wrapper button {
    display: block;
    width: calc(25% - 30px);
    background: #629AF2;
    border: 1px solid #629AF2;
    padding: 14px;
    text-align: center;
    color: #FFF;
    font-size: 18px;
    line-height: 18px;
    margin-top: 10px;
    margin-bottom: 20px;
}
.folio_initial_wrapper button:hover {
    cursor: pointer;
}

/* Menu */
ul#roomsListMenu,
ul.itemSelectMenu {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
ul.itemSelectMenu {
    padding-bottom: 50px;
}
ul#roomsListMenu ul,
ul.itemSelectMenu ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    position: relative;
    z-index: 1;
}
ul#roomsListMenu .floor,
ul.itemSelectMenu .category {
    display: block;
    width: 100%;
    background: #666;
    color: #FFF;
    position: relative;
}
ul#roomsListMenu .floor > a,
ul.itemSelectMenu .category > a {
    display: block;
    position: relative;
    z-index: 2;
    width: 100%;
    background: #666;
    color: #FFF;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    padding: 14px 20px 14px 50px;
    border-bottom: 1px solid #18171A;
    text-align: left;
    text-decoration: none;
}

ul#roomsListMenu .floor > a:after,
ul.itemSelectMenu .category > a:after {
    display: block;
    position: absolute;
    content: "";
    width: 26px;
    height: 26px;
    left: 14px;
    top: 10px;
    padding: 0px;
    margin: 0px;
    background: url(../images/dash-dark.png) 50% 50% no-repeat ;
    z-index: 2;

    -webkit-transition: all 100ms ease-out 30ms;
    -moz-transition: all 100ms ease-out 30ms;
    -o-transition: all 100ms ease-out 30ms;
    transition: all 100ms ease-out 30ms;
}
ul#roomsListMenu .floor.mm-active > a:after,
ul.itemSelectMenu .category.mm-active > a:after {
   opacity: 0;
}
ul#roomsListMenu .floor > a:before,
ul.itemSelectMenu .category > a:before {
    display: block;
    position: absolute;
    content: "";
    width: 26px;
    height: 26px;
    left: 14px;
    top: 10px;
    padding: 0px;
    margin: 0px;
    background: #E0E0E0 url(../images/dash-dark.png) 50% 50% no-repeat ;
    z-index: 1;
    transform: rotate(90deg);
    border-radius: 13px;

    -webkit-transition: all 100ms ease-out 30ms;
    -moz-transition: all 100ms ease-out 30ms;
    -o-transition: all 100ms ease-out 30ms;
    transition: all 100ms ease-out 30ms;
}
ul#roomsListMenu .floor.mm-active > a:before,
ul.itemSelectMenu .category.mm-active > a:before {
    transform: rotate(0deg);
    background: #F4501D url(../images/dash-light.png) 50% 50% no-repeat ;
}

ul#roomsListMenu .floor.mm-active > a,
ul.itemSelectMenu .category.mm-active > a {
    border-bottom: 1px solid #0d629b;
    -webkit-box-shadow:  inset 0 -10px 10px -10px rgba(0,0,0,0.05);
    -moz-box-shadow:     inset 0 -10px 10px -10px rgba(0,0,0,0.05);
    box-shadow:          inset 0 -10px 10px -10px rgba(0,0,0,0.05);
}



ul#roomsListMenu li.floor ul li.room,
ul.itemSelectMenu li.category ul li.article {
    position: relative;
    display: block;
    width: 100%;
    background: #FFF;
    padding: 0;
    overflow: hidden;
}
ul#roomsListMenu .room:last-child > a {
    margin-bottom: 10px;
}
ul#roomsListMenu .room > a {
    position: relative;
    display: block;
    width: 100%;
    background: #629af2;
    color: rgba(255,255,255,0.9);
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    padding: 14px 20px 14px 50px;
    border-bottom: 1px solid #FFF;
    text-align: center;
    text-decoration: none;
}
ul#roomsListMenu .room > a.ltblue {
    background: #e2ecfa;
    color: #454545;
}
ul#roomsListMenu .room > a.yellow {
    background: #f0bd63;
}
ul#roomsListMenu .room > a.orange {
    background: #e87458;
}
ul#roomsListMenu .room > a.active {
    background: #e87458;
}
ul#roomsListMenu .room > a:after {
    display: inline-block;
    position: absolute;
    content: "▲";
    font-family: sans-serif;
    font-size: 18px;
    font-weight: bold;
    line-height: 22px;
    width: 22px;
    height: 22px;
    right: 14px;
    padding: 1px 2px 3px 2px;
    background: rgba(0,0,0,0.2);
    color: #FFF;
    border-radius: 25px;
    text-align: center;
    vertical-align: center;
    z-index: 1;
    transform: rotate(90deg);

    -webkit-transition: all 100ms ease-out 30ms;
    -moz-transition: all 100ms ease-out 30ms;
    -o-transition: all 100ms ease-out 30ms;
    transition: all 100ms ease-out 30ms;
}
@-moz-document url-prefix() { 
    ul#roomsListMenu .room > a:after {
        padding-top: 2.5px;
        padding-bottom: 0.5px;
    }
} 
ul#roomsListMenu .room:hover > a:after {
    background: rgba(0,0,0,0.5);
}
.itemSelectMenu .article_row {
    display: grid;
    background: #E0E0E0;
    /* grid-template-columns: 50px 30px 30px 300px 30px; */
    grid-template-columns: 50px 80px 50px 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    border-bottom: 1px solid #18171A;
}
@media screen and (max-width:950px) {
    .itemSelectMenu .article_row {
        /* grid-template-columns: 50px 30px 30px 1fr 30px; */
    }
}

/* IoT Overrides */
.editor-rooms-mb0doori,
.editor-rooms-mb0lgton {
    cursor: pointer;
}


#roomsTable_wrapper .iot_spinner {
    opacity: 0;
    margin: 0 0 0 6px;
    padding: 0;
    display: inline-block;
    float: left;
    position: relative;
    width: 22px !important;
    height: 16px;
    overflow: hidden;
}
#roomsTable_wrapper .iot_spinner.on {
    opacity: 0.7;
}

#roomsTable_wrapper .dt-body-center.mb0doori input[type="checkbox"],
#roomsTable_wrapper .dt-body-center.mb0pwron input[type="checkbox"],
#roomsTable_wrapper .dt-body-center.mb0lgton input[type="checkbox"],
#roomsTable_wrapper .dt-body-center.mb0silmd input[type="checkbox"],
#roomsTable_wrapper .dt-body-center.mb0tctrl input[type="checkbox"] {
    display: inline-block;
    float: left;
    
}

#roomsTable_wrapper .dt-body-center.mb0tctrl select {
    display: inline-block;
    float: left;
    margin-top: 2px;
    margin-right: 4px;
}





/* .iot_spinner {
    display: block;
    float: left;
    position: relative;
    width: 80px;
    height: 34px;
    overflow: hidden;
    opacity: 0;
}
.iot_spinner div {
    display: inline-block;
    position: absolute;
    left: 6px;
    width: 6px;
    background: #FFF;
    animation: iot_spinner 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.iot_spinner div:nth-child(1) {
    left: 0px;
    animation-delay: -0.24s;
}
.iot_spinner div:nth-child(2) {
    left: 8px;
    animation-delay: -0.12s;
}
.iot_spinner div:nth-child(3) {
    left: 16px;
    animation-delay: 0;
}
@keyframes iot_spinner {
    0% {
        top: -6px;
        height: 32px;
    }
    50%, 100% {
        top: 4px;
        height: 16px;
    }
}
.iot_spinner:after,
.iot_spinner:before {
    opacity: 0;

    -webkit-transition: left 200ms ease-out 100ms;
    -moz-transition: left 200ms ease-out 100ms;
    -o-transition: left 200ms ease-out 100ms;
    transition: left 200ms ease-out 100ms;
} */

.dark {
    opacity: 0.1;
    pointer-events: none;
}
span.dark {
    opacity: 0.3;
}

/* #roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(2),
#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(2) {
    min-width: 100px;
}

#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(10),
#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(10) {
    min-width: 100px;
} */
#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(9),
#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(9),
#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(10),
#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(10),
#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(11),
#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(11),
#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(12),
#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(12) {
    min-width: 70px;
   /*  background: blue; */
}
#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(13),
#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(13),
#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(14),
#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(14),
#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(15),
#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(15),
#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(16),
#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(16) {
    min-width: 80px;
}
/* #roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(17),
#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(17) {
    min-width: 100px;
}
#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(12),
#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(12) {
    min-width: 100px;
} */
/* #roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(14),
#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(14),
#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(16),
#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(16),
#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(18),
#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(18),
#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(19),
#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(19) {
    min-width: 300px;
    background: red;
} */

#transactionsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollHead table > thead > tr > th:nth-child(7),
#transactionsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(7),
#transactionsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollHead table > thead > tr > th:nth-child(8),
#transactionsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(8),
#transactionsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollHead table > thead > tr > th:nth-child(9),
#transactionsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(9),
#transactionsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollHead table > thead > tr > th:nth-child(10),
#transactionsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td:nth-child(10) {
    text-align:right;
    padding-right: 20px;
}

body .ui-widget-header .ui-datepicker-prev {
    /* position: relative; */
}
body .ui-widget-header .ui-datepicker-prev::before {
    content: "◀";
    position: absolute;
    top: 6px;
    left: 10px;
    width: 20px;
    height: 20px;
    color: #fff;
    font-size: 10px;
}
body .ui-widget-header .ui-datepicker-prev:hover {
    background: rgba(255,255,255,0.1);
}
body .ui-widget-header .ui-datepicker-next::before {
    content: "►";
    position: absolute;
    top: 6px;
    left: 10px;
    width: 20px;
    height: 20px;
    color: #fff;
    font-size: 10px;
}
body .ui-widget-header .ui-datepicker-next:hover {
    background: rgba(255,255,255,0.1);
}

#roomsTable_wrapper.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th {
    vertical-align: top;
}

/* Custom Room Form */
.DTE_Form_Error {
    padding-left: 10px;
}
#customRoomForm {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 20px;
    padding: 0px 40px 0 20px;
}

#customRoomForm div.DTE_Field div.multi-value {
    font-size: 12px;
    line-height: 1.1;
}
#customRoomForm.no-minibar {
    grid-template-columns: 1fr;
    grid-column-gap: 0px;
}

#customRoomForm.no-minibar fieldset.room_info_set {
    /* padding-right: 30px; */
}



#customRoomForm.no-minibar fieldset.room_iot_set,
#customRoomForm.no-minibar > div {
    display: none;
}

#customRoomForm.no-minibar fieldset.room_iot_info_set,
#customRoomForm.no-minibar > div {
    display: none;
}

#customRoomForm .room_standby_wrapper,
#customRoomForm .room_door_wrapper,
#customRoomForm .room_light_wrapper,
#customRoomForm .room_quiet_wrapper,
#customRoomForm .room_temp_wrapper {
    display: grid;
    grid-template-columns: 80px 120px 1fr;
    height: 34px;
    overflow: hidden;
}

#customRoomForm .room_temp_wrapper {
    display: grid;
    grid-template-columns: 80px 120px 1fr;
    height: auto;
    overflow: hidden;
}

#customRoomForm div.DTE_Body div.DTE_Body_Content div.DTE_Field > label {
    display: none;
}

#customRoomForm .room_iot_set .DTE_Field_Input {
    margin-top: 8px;
}

#DTE_Field_thing_current-mb0pwron_timestamp,
#DTE_Field_thing_current-mb0silmd_timestamp,
#DTE_Field_thing_current-mb0lgton_timestamp,
#DTE_Field_thing_current-mb0doori_timestamp {
    margin-bottom: 16px;
    margin-top: 4px;
}
#DTE_Field_thing_current-mb0tctrl_timestamp {
    margin-top: 4px;
}

#multi-room-list {
    padding: 10px;
}

.multi-info-copy {
    color: rgba(255,255,255,0.5);
    font-size: 12px !important;
    line-height: 1 !important;
}

#customRoomForm.no-minibar fieldset.room_status_set {
    width: 100%;
    padding-right: 0px;
    max-width: 100% !important;
    padding-top: 0px;
}

div.DTE_Body div.DTE_Body_Content div.DTE_Field.DTE_Field_Name_thing_current.mb0pwron_timestamp > label,
#customRoomForm div.DTE_Body div.DTE_Body_Content div.DTE_Field > label {
    display: none;
}
div.DTE_Body div.DTE_Body_Content div.DTE_Field.DTE_Field_Name_thing_current.mb0doori_timestamp > label,
#customRoomForm div.DTE_Body div.DTE_Body_Content div.DTE_Field > label {
    display: none;
}
#customRoomForm .bool_toggle {
    margin-top: 10px;
    clear: both;
}
#customRoomForm .bool_toggle .DTE_Label {
    display: none;
}
#customRoomForm .bool_toggle input[type="text"] {
    height: 0px;
    width: 0px;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    visibility: visible;
    display: block;
    position: absolute;
}
#customRoomForm div.multi-value {
    margin-bottom: 20px;
}

/* #customRoomForm .bool_toggle input[type="text"]#DTE_Field_thing_current-mb0tctrl {
    height: auto;
    width: auto;
    position: relative;
} */

#customRoomForm > fieldset {
    display: block;
    width: 100%;
   
    padding: 20px;
    max-width: 100%;
    max-width: 300px;

    
}
#customRoomForm > div {
    display: none;
}

/* #customRoomForm > fieldset:first-child {
    grid-column: 1 / span 2;
} */

#customRoomForm > fieldset:last-child {
    background: #353437;
    border-radius: 3px;
    border: 1px solid #ccc;
}

#customRoomForm > fieldset.room_iot_set {
    background: #353437;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.2);
    width: 100%;
    min-width: 100%;
}

#customRoomForm > fieldset.room_iot_info_set {
    grid-column: 1 / span 2;
    background: #353437;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.2);
    width: calc(100% - 20px);
    min-width: calc(100% - 20px);
    margin-left: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 8px;
    grid-row-gap: 8px;
}
#customRoomForm > fieldset.room_iot_info_set > legend {
    grid-column: 1 / span 2;
}

#customRoomForm > fieldset legend {
    position: relative;
    display: inline-block;
    float: left;
    width: 100%;
    padding: 0;
    margin: 0 0 14px 0;
}
#customRoomForm > fieldset.room_info_set {
    padding-top: 0px;
    grid-column: 1 / span 2;
    width: auto;
    max-width: 100%;
    max-width: 630px;
    padding-right: 0px;
}
#customRoomForm > fieldset.room_info_set > legend {
    border: 0;
}

#customRoomForm .DTE_Field {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

#customRoomForm .ui-dialog-content.ui-widget-content {
    padding-top: 0px;
    padding-bottom: 0px;
}

#customRoomForm .room_status_set {
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 4px;
    height: auto;
    grid-template-rows: auto auto auto auto auto auto 1fr;
    width: 100%;
    min-width: 100%;
}

#customRoomForm.no-status .room_status_set {
    width:0;
    height:0;
    display:block;
    overflow:hidden;
    margin:0;
    padding:0;
}

#customRoomForm .room_status_set legend {
    grid-column: 1 / span 2;
}
#customRoomForm editor-field {
    display: none;
}

#customRoomForm {
    min-width: 700px;
}
.DTE_Form_Content,
#customRoomForm div.DTE div.DTE_Body div.DTE_Body_Content {
    overflow: scroll;
}

#customRoomForm .status_timestamp .multi-restore {
    display: none !important;
}

#customRoomForm .DTE_Field.DTE_Field_Type_checkbox {
    display: grid;
    grid-template-columns: 20px 1fr;
    grid-template-rows: 1fr;
    grid-column-gap:8px;
    grid-row-gap: 6px;
    align-items: center;
}

#customRoomForm .DTE_Field.multi {
    display: block;
}

#customRoomForm .DTE_Field.DTE_Field_Type_checkbox label {
    grid-column: 2;
    grid-row: 1;
}
#customRoomForm .DTE_Field.DTE_Field_Type_checkbox div.DTE_Field_Input {
    grid-column: 1;
    grid-row: 1;
}
#customRoomForm .DTE_Field.DTE_Field_Type_checkbox div.DTE_Processing_Indicator {
    display: none;
}

#customRoomForm .DTE_Field:after {
    display: none;
}

#customRoomForm .room_status_set .DTE_Field.DTE_Field_Type_readonly {

}
#customRoomForm .room_status_set .DTE_Field.DTE_Field_Type_readonly label {
    display: none;
}
#customRoomForm .room_status_set .DTE_Field.DTE_Field_Type_readonly.multi label  {
    /* display: inline-block; */
    display: none;
}

#customRoomForm input:read-only {
    background-color: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.7);
}
#customRoomForm input[type="text"] {
    padding-left: 8px;
    padding-right: 8px;
}

#customRoomForm .progress_tracker {
    width: calc(100% - 20px);
    background: rgba(0,0,0,0.3);
    min-height: 100px;
    /* display: inline-block; */
    grid-column: 1 / span 2;
    margin: 0 0 0 20px;
    border-top: 1px solid rgba(255,255,255,0.3);
    border-bottom: 1px solid rgba(255,255,255,0.3);
    /* display: grid; */
    display: none;
    grid-template-columns: 50px 1fr;
    align-items: flex-start;

    -webkit-transition: all 200ms ease-out 100ms;
    -moz-transition: all 200ms ease-out 100ms;
    -o-transition: all 200ms ease-out 100ms;
    transition: all 200ms ease-out 100ms;
}
#customRoomForm .progress_tracker.on {
    display: grid;
}
#customRoomForm .progress_tracker .iot_spinner {
    opacity: 1;
    margin: 10px;
}
#customRoomForm #roomForm_standby .iot_spinner {
    margin-top: 6px;
}
#customRoomForm #roomForm_standby .iot_spinner.on {
    opacity: 1;
}

#customRoomForm #roomForm_door .iot_spinner {
    margin-top: 6px;
}
#customRoomForm #roomForm_door .iot_spinner.on {
    opacity: 1;
}
#customRoomForm #roomForm_light .iot_spinner.on {
    opacity: 1;
}
#customRoomForm #roomForm_quiet .iot_spinner.on {
    opacity: 1;
}

/* #customRoomForm .room_temp_wrapper {
    margin-top: 20px;
} */
body.settings div.room_temp_wrapper,
body.settings div#main_iot_wrapper,
body.settings a#btn_iotbroker {
    display: none;
}

#customRoomForm .room_temp_wrapper .iot_spinner.on {
    opacity: 1;
}
#DTE_Field_thing_current.mb0tctrl.bool_toggle {
    display: none;
}

#customRoomForm .progress_tracker .progress_tracker_output {
    padding: 10px 10px 10px 0;
    overflow: scroll;
    font-size: 12px;
    line-height: 20px;
}

#customRoomForm #roomForm_door .iot_toggle_handle {
    position: absolute;
    display: grid;
    grid-template-columns: 80px 2px 16px 2px 80px;
    color: #FFF;
    height: 26px;
    width: 166px;
    border-radius: 4px;
    left: -80px;
    top: 2px;
    align-items: center;
}

#customRoomForm #roomForm_door.on .iot_toggle_handle {
    left: 0px;
}

#customRoomForm #DTE_Field_rooms-visited_timestamp,
#customRoomForm #DTE_Field_rooms-dnd_timestamp,
#customRoomForm #DTE_Field_rooms-grs_timestamp,
#customRoomForm #DTE_Field_rooms-bna_timestamp,
#customRoomForm #DTE_Field_rooms-sanitized_timestamp {
    min-width: 152px;
}

#DTE_Field_thing_current-mb0pwron_timestamp.off,
#DTE_Field_thing_current-mb0lgton_timestamp.off,
#DTE_Field_thing_current-mb0silmd_timestamp.off,
#DTE_Field_thing_current-mb0doori_timestamp.off,
#DTE_Field_thing_current-mb0tctrl_timestamp.off {
    opacity: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

#customRoomForm .DTE_Field_Input.off {
    display: none;
}

#customRoomForm .room_iot_set .DTE_Field_Type_readonly .multi-restore {
    display: none !important;
}

#customRoomForm .room_mb0dsn_wrap,
#customRoomForm .room_mb0sku_wrap,
#customRoomForm .room_mb0pnc_wrap,
#customRoomForm .room_mb0ver_wrap {
    display: grid;
    grid-template-columns: 1fr 40px;
    align-items: flex-end;
}
#customRoomForm .room_mb0dsn_wrap editor-field,
#customRoomForm .room_mb0sku_wrap editor-field,
#customRoomForm .room_mb0pnc_wrap editor-field,
#customRoomForm .room_mb0ver_wrap editor-field {
    display: none;
}
#customRoomForm .room_mb0dsn_wrap .iot_spinner,
#customRoomForm .room_mb0sku_wrap .iot_spinner, 
#customRoomForm .room_mb0pnc_wrap .iot_spinner,
#customRoomForm .room_mb0ver_wrap .iot_spinner {
    /* opacity: 1; */
    top: 2px;
    margin-left: 10px;
}
#customRoomForm .room_mb0dsn_wrap .iot_spinner.on,
#customRoomForm .room_mb0sku_wrap .iot_spinner.on,
#customRoomForm .room_mb0pnc_wrap .iot_spinner.on,
#customRoomForm .room_mb0ver_wrap .iot_spinner.on {
    opacity: 1;
}
#customRoomForm .room_mb0dsn_wrap .DTE_Field,
#customRoomForm .room_mb0sku_wrap .DTE_Field,
#customRoomForm .room_mb0pnc_wrap .DTE_Field {
    display: grid;
    grid-template-columns: minmax(50px, 30%) 1fr;
}
#customRoomForm .room_mb0ver_wrap .DTE_Field {
    display: grid;
    grid-template-columns: minmax(50px, 40%) 1fr;
}
#customRoomForm .room_mb0dsn_wrap .DTE_Field .DTE_Label,
#customRoomForm .room_mb0sku_wrap .DTE_Field .DTE_Label,
#customRoomForm .room_mb0pnc_wrap .DTE_Field .DTE_Label,
#customRoomForm .room_mb0ver_wrap .DTE_Field .DTE_Label {
    padding: 8px 12px 8px 0;
    margin: 0;
}

#customRoomForm .room_iot_info_set input[type="text"]:read-only {
    color: rgba(255,255,255,0.7);
    background: transparent;
    border: 1px solid transparent;
    margin: 0;
    padding: 0;
    display: inline-block;
}
#customRoomForm .room_iot_info_set .skipper {
    grid-column: 1 / span 2;
    height: 1px;
    width: 100%;
    background: rgba(255,255,255,0.7);
    margin-top: 10px;
    margin-bottom: 10px;
}
#customRoomForm .room_iot_info_set .rm_ro span:last-child {
    color: rgba(255,255,255,0.7);
}

.greencheck {
    color: #33992b;
}
.greencheck::before {
    content: "✓";
    font-weight: bold;
    display: inline-block;
    padding-right: 6px;

}

/* PMS Emulator */
.pms_emulator .dataTables_wrapper .buttons {
    width: auto;
    float: left;
    clear: left;
    margin-right: 20px;
}
.pms_emulator .dataTables_wrapper .len {
    width: auto;
    float: left;
    clear: none;
    margin-top: 0px;
}
.pms_emulator #unpostedChargesTable_wrapper .paginator {
    grid-template-columns: 1fr;
}
#unpostedChargesTable_filter input {
    border-radius: 0px;
    font-size: 16px;
    padding: 10px 8px;
    height: auto;
}

#unpostedChargesTable_wrapper.dataTables_wrapper .dataTables_length {
    height: auto;
}

#unpostedChargesTable_wrapper.dataTables_wrapper .dataTables_filter label {
    height: 34px;
}

#unpostedChargesTable_wrapper.dataTables_wrapper .dataTables_length select {
    height: 34px;
}

.pms_emulator .dms_count {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    color: cyan;
    padding: 5px;
    font-size: 16px;
    font-weight: bold;
    border: 1px solid rgba(255,255,255,0.2);
    min-width: 30px;
    height: 30px;
    text-align: center;
}
.pms_emulator .pms_count {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    color: magenta;
    padding: 5px;
    font-size: 16px;
    font-weight: bold;
    border: 1px solid rgba(255,255,255,0.2);
    min-width: 30px;
    height: 30px;
    text-align: center;
}
.pms_emulator #pms_simulate_form {
    width: calc(100% - 40px);
    display: grid;
    grid-template-columns: 200px 300px 1fr 160px auto;
    grid-column-gap: 20px;
}
.pms_emulator #pms_simulate_form > label {
    display: inline-block;
}
.pms_emulator #pms_simulate_form > label > span {
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
}
.pms_emulator #pms_simulate_form select {
    width: calc(100% - 10px);
    background: white;
    max-width:  calc(100% - 10px) !important;
    min-width: 0px;
}
.pms_emulator #pms_simulate_form .dms_btn {
    margin-top: 26px;
}
.pms_emulator textarea#pms_message_json {
    background: rgba(0,0,0,0.9);
    min-width: 500px;
    max-width: 100%;
    min-height: 270px;
    max-height: 600px;
    padding: 20px;
    color: #FFF;
    color: rgba(255,255,255,0.8);
    border: 1px solid rgba(255,255,255,0.3);

}
.pms_emulator span.grey {
    position:relative;
    padding: 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.2);
    margin-top: 10px;
}
.pms_emulator span.cyan {
    color: cyan;
}
.pms_emulator span.magenta {
    color: magenta;
}
.pms_emulator pre {
    background: rgba(0,0,0,0.9);
    min-width: 0px;
    max-width: 100%;
    max-height: 600px;
    overflow: scroll;
    display: flex;
    flex-direction: column;
    padding: 20px;
    color: #FFF;
    border: 1px solid rgba(255,255,255,0.3);
}
.pms_emulator #hotelsTable_wrapper .maintable{
    overflow: hidden;
    margin:0;
    padding:0;
    width:0;
    height:0;
}
.pms_settings_wrapper {
    float: left;
    display: grid;
    grid-template-columns: auto auto auto auto;
    margin-bottom: 20px;
    padding-bottom: 80px;
    grid-column-gap: 20px;
    grid-row-gap: 10px;
    width: 100%;
    float: left;
}
.pms_settings_wrapper .pms_label {
    display: inline-block;
    font-weight: bold;
    color: rgba(255,255,255,0.7);
}
.pms_diagnostics_btns {
    display: grid;
    float: left;
    clear: both;
    grid-template-columns: auto auto;
}
.pms_diagnostics_btns button.dms_btn {
    padding: 14px 26px !important;
    font-size: 16px !important;
    line-height: 16px !important;
    height: auto !important;
    margin-top: 0px !important;
    letter-spacing: 1px;
}
.pms_emulator #pms_monitor_message {
    float: left;
    clear: left;
    width: 100%;
    display: grid;
    grid-template-columns: calc(50% - 15px) calc(50% - 15px);
    grid-column-gap: 30px;
    margin-bottom: 20px;
}
@media screen and (max-width:768px) {
    .pms_emulator #pms_monitor_message {
        grid-template-columns: calc(100% - 10px);
    }
}
.pms_emulator h3 {
    color: yellow;
}

.itemSelectMenu ul.mm-show {
    z-index: 9;
    padding-bottom: 0;
    border-bottom: 1px solid #0d629b;
    /* -webkit-box-shadow: 0 10px 10px -10px rgba(0,0,0,0.15);
    -moz-box-shadow: 0 10px 10px -10px rgba(0,0,0,0.15);
    box-shadow: 0 10px 10px -10px rgba(0,0,0,0.15); */
    background: #FFF;
}
.qty_wrapper {
    position: relative;
    display: grid;
    align-content: center;
    justify-content: center;
}
.itemSelectMenu input.article_qty {
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    width: 50%;
    max-width: 50%;
    height: auto;

    background: #E0E0E0;
    border: 1px solid #E0E0E0;
    border-radius: 0px;
    color: #454545;
    font-size: 18px;
    line-height: 18px;
    font-weight: bold;

    justify-self: center;
    text-align: center;;

}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}
.itemSelectMenu .article_name_wrapper .article_name {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    width: 100%;
    height: 100%;
    margin: 0;
    padding: auto;

    background: #E0E0E0;
    border: 1px solid #E0E0E0;
    border-radius: 0px;
    color: #454545;
    font-size: 18px;
    line-height: 18px;
    font-weight: bold;
    padding-left: 8px;
    width: 100%;
    vertical-align: center;
    margin: 0;

    pointer-events: none;

    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select:none;
    user-select:none;
    -o-user-select:none;
}
@media screen and (min-width: 992px) {
    .itemSelectMenu .article_name_wrapper .article_name {
        font-size: 20px;
        line-height: 20px;
    }
}
.itemSelectMenu .article_name_wrapper {
    display: grid;
    align-content: center;
    justify-content: center;
    cursor: pointer;
}

.itemSelectMenu button.article_minus {
    position: relative;
    display: grid;
    justify-content: center;
    align-content: center;
    background: #9D9D9D;
    border: #9D9D9D;
    z-index: 1;
    cursor: pointer;
    width: 50px;
    height: 50px;
}
.itemSelectMenu button.article_minus:after {
    position: relative;
    display: inline-block;
    content: "";
    min-width: 18px;
    max-width: 36%;
    height: 2px;
    z-index: 1;
    background: #454545;

    -webkit-transition: all 200ms ease-out 100ms;
    -moz-transition: all 200ms ease-out 100ms;
    -o-transition: all 200ms ease-out 100ms;
    transition: all 200ms ease-out 100ms;
}
.itemSelectMenu button.article_minus:hover,
.itemSelectMenu button.article_minus:focus {
    background:#979797;
}

.itemSelectMenu button.article_plus {
    position: relative;
    display: grid;
    justify-content: center;
    align-content: center;
    background: #E35C33;
    border: #E35C33;
    z-index: 1;
    cursor: pointer;
    width: 50px;
    height: 50px;
}
.itemSelectMenu button.article_plus:before,
.itemSelectMenu button.article_plus:after {
    position: relative;
    display: inline-block;
    content: "";
    min-width: 18px;
    max-width: 36%;
    height: 2px;
    z-index: 1;
    background: #FFF;

    -webkit-transition: all 200ms ease-out 100ms;
    -moz-transition: all 200ms ease-out 100ms;
    -o-transition: all 200ms ease-out 100ms;
    transition: all 200ms ease-out 100ms;
}
.itemSelectMenu button.article_plus:before {
    top: 1px;
}
.itemSelectMenu button.article_plus:after {
    top: -1px;
    transform: rotate(90deg);
}
.itemSelectMenu button.article_plus:hover,
.itemSelectMenu button.article_plus:focus {
    background:#FC5000;
}

.itemSelectMenu button.article_delete {
    position: relative;
    background: #ef8268;
    border: #ef8268;
    z-index: 1;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: none !important;
}
.itemSelectMenu button.article_delete:after,
.itemSelectMenu button.article_delete:before {
    display: inline-block;
    position: absolute;
    content: "—";
    font-family: sans-serif;
    font-size: 18px;
    font-weight: bold;
    line-height: 20px;
    width: 22px;
    height: 22px;
    max-width: 100%;
    max-height: 100%;
    left: 3px;
    top: 3px;
    padding: 1px;
    background: rgba(0,0,0,0.4);
    color: #FFF;
    border-radius: 22px;
    text-align: center;
    vertical-align: middle;
    z-index: 2;

    -webkit-transition: all 200ms ease-out 100ms;
    -moz-transition: all 200ms ease-out 100ms;
    -o-transition: all 200ms ease-out 100ms;
    transition: all 200ms ease-out 100ms;
}
.itemSelectMenu button.article_delete:before {
    transform: rotate(45deg);
}
.itemSelectMenu button.article_delete:after {
    transform: rotate(-45deg);
    background: none;
    z-index: 3;
}
@-moz-document url-prefix() { 
    .itemSelectMenu button.article_delete:before {
        line-height: 22px;
        padding-right: 1px;
        padding-top: -0.5px;
    }
    .itemSelectMenu button.article_delete:after {
        line-height: 22px;
        padding-left: 1px;
        padding-top: -0.5px;
    }
} 
.itemSelectMenu button.article_delete:hover:before {
    background: rgba(0,0,0,0.6);
}
@media screen and (max-width:768px) {
    /* .itemSelectMenu .article_row {
        grid-column-gap: 4px;
    } */
    .itemSelectMenu input.article_qty,
    .itemSelectMenu .article_name_wrapper .article_name {
        font-size: 14px;
    }
}

.room_footer {
    position: fixed;
    z-index: 9;
    bottom: -100px;
    left: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
    /* background: rgba(0,0,0,0.1); */
    background: #18171A;
    border-top: 1px solid #666666;

    display: flex;
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: 0;
    grid-row-gap: 0;
    padding: 14px 30px;

    justify-content: space-between;
    align-content: center;
    align-items: center;

    -webkit-transition: all 200ms ease-out 50s;
    -moz-transition: all 200ms ease-out 50s;
    -o-transition: all 200ms ease-out 50s;
    transition: all 200ms ease-out 50ms;
}
.room_footer > div:first-child {
    font-family: 'GibsonSemiBold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 18px;
    line-height: 18px;
    padding-top: 4px;
}
.room_footer button.room_confirm {
    margin: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: pointer;
}
.room_footer button.room_dnd, 
.room_footer button.room_grs,
.room_footer button.room_bna {
    position: relative;
    color: #FFF;
    background: none;
    border: 0;
    font-size: 16px;
    line-height: 16px;
    cursor: pointer;

    justify-self: start;
    padding: 4px 4px 4px 36px;
}
.room_footer button.room_dnd:before, 
.room_footer button.room_grs:before,
.room_footer button.room_bna:before {
    position: absolute;
    z-index: 1;
    content: "";
    left: 0;
    top: 0;
    width: 21px;
    height: 21px;
    border: 1px solid #E0E0E0;
    border-radius: 10px;
    opacity: .4;

    -webkit-transition: all 200ms ease-out 50s;
    -moz-transition: all 200ms ease-out 50s;
    -o-transition: all 200ms ease-out 50s;
    transition: all 200ms ease-out 50ms;
}
.room_footer button.room_dnd:hover:before, 
.room_footer button.room_grs:hover:before,
.room_footer button.room_bna:hover:before,
.room_footer button.room_dnd.on:before,
.room_footer button.room_grs.on:before,
.room_footer button.room_bna.on:before {
    border: 1px solid #E35C33;
    opacity: 1;
}
.room_footer button.room_dnd:after,
.room_footer button.room_grs:after,
.room_footer button.room_bna:after {
    position: absolute;
    z-index: 1;
    content: "";
    left: 3px;
    top: 3px;
    width: 17px;
    height: 17px;
    border: 0;
    border-radius: 8px;
    background: #E0E0E0;
    opacity: .4;

    -webkit-transition: all 200ms ease-out 50s;
    -moz-transition: all 200ms ease-out 50s;
    -o-transition: all 200ms ease-out 50s;
    transition: all 200ms ease-out 50ms;
}
.room_footer button.room_dnd:hover:after,
.room_footer button.room_grs:hover:after,
.room_footer button.room_bna:hover:after,
.room_footer button.room_dnd.on:after,
.room_footer button.room_grs.on:after,
.room_footer button.room_bna.on:after {
    background: #E35C33;
    opacity: 1;
}
@media screen and (max-width: 992px) {
    .room_footer {
        display: grid;
        
        grid-template-columns: repeat(4, 1fr);
        grid-column-gap: 0;
        grid-row-gap: 0;

        justify-content: space-evenly;
        align-content: center;
    }
    .room_footer > div:first-child {
        display: none;
    }

    .room_footer button.room_dnd .long,
    .room_footer button.room_grs .long,
    .room_footer button.room_bna .long {
        display: none;
    }
    .room_footer button.room_dnd .short,
    .room_footer button.room_grs .short,
    .room_footer button.room_bna .short {
        display: inline;
    }
}
@media screen and (min-width: 993px) {
    
    .room_footer button.room_dnd .long,
    .room_footer button.room_grs .long,
    .room_footer button.room_bna .long {
        display: inline;
    }
    .room_footer button.room_dnd .short,
    .room_footer button.room_grs .short,
    .room_footer button.room_bna .short {
        display: none;
    }
}

/* Confirm Overrides */
.confirm_wrapper ul.itemSelectMenu > li {
    display: grid;
    background: #E0E0E0;
    grid-template-columns: 50px 80px 50px 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    border-bottom: 1px solid #18171A;

    justify-content: center;
    align-content: center;
}
.confirm_wrapper ul.itemSelectMenu > li:first-child {
    background: #666;
    border-bottom: 1px solid #18171A;
    color: #FFF;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    padding: 14px 20px 14px 50px;
    border-bottom: 1px solid #18171A;
    text-align: left;
    text-decoration: none;
}
.confirm_wrapper ul.itemSelectMenu > li:first-child > div:nth-child(2) {
    grid-column: 1 / span 3;
}
.confirm_wrapper ul.itemSelectMenu > li:first-child > div:nth-child(3) {
    grid-column: 4 / span 1;
    justify-self: center;
}
.confirm_wrapper .article_name {

    display: inline-block;
    margin: 0;
    padding: auto;

    background: #E0E0E0;
    border: 1px solid #E0E0E0;
    border-radius: 0px;
    color: #454545;
    font-size: 18px;
    line-height: 18px;
    font-weight: bold;
    padding-left: 8px;
    margin: 0;

    justify-self: center;
    align-self: center;
}

/* Confirm Footer */
.confirm_footer {
    position: fixed;
    z-index: 9;
    bottom: -100px;
    left: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
    /* background: rgba(0,0,0,0.1); */
    background: #18171A;
    border-top: 1px solid #666666;
    display: block;
    padding: 14px 30px;

    -webkit-transition: all 200ms ease-out 50s;
    -moz-transition: all 200ms ease-out 50s;
    -o-transition: all 200ms ease-out 50s;
    transition: all 200ms ease-out 50ms;
}
.confirm_footer button {
    display: inline;
    margin: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    
    float: right;
    clear: none;
    max-width: 25%;
    margin-left: 10px;
}
.confirm_footer button:first-child {
    float: left;
    clear: none;
    margin-left: none;
}

/* Panels */
#wrapper {
	width:100%;
	height: calc(100vh - 160px);
	position:absolute;
    top:20px;
    left:0;
	background-color:#FFF;
	overflow:hidden;
}

#mask {
    position: relative;
    width:500%;
    height: calc(100vh - 160px);
    background-color:#FFF;
    overflow: hidden;
}

.item {
    position: relative;
    width:20%;
    height: calc(100vh - 160px);
    float:left;
    background-color:#FFF;
    overflow: hidden;
}


.content {
    width: 100vw;
    height: 100vh;
    top:0;
    bottom: 0;
    margin: 0 auto;
    padding: 90px 30px 30px 30px;
    background-color:#18171A;
    position: absolute;
    overflow: scroll;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
}
.content#content2,
.content#content3,
.content#content4 {
    padding-top: 120px;
    padding-bottom: 50px;
}
@media screen and (max-width:992px) {
    .content#content2,
    .content#content3,
    .content#content4 {
        padding-top: 120px;
        padding-bottom: 60px;
    }
}

.selected {
    background:#fff;
}
.attendant .selected {
    background: #fff;
    font-weight: 700;
}

.clear {
    clear:both;
}

/* IoT Enabled */
.iot_toggle_wrap {
    display: block;
    float: left;
    width: 64px;
    height: 34px;
    margin: 0px;
    padding: 2px;
    overflow: hidden;
    border-radius: 5px;
    background-color: #999;
    
    -webkit-transition: background-color 200ms ease-out 100ms;
    -moz-transition: background-color 200ms ease-out 100ms;
    -o-transition: background-color 200ms ease-out 100ms;
    transition: background-color 200ms ease-out 100ms;
}
.await_on .iot_toggle_wrap.on {
    background-color: #d36440;
}



.room_door_wrapper .iot_toggle_wrap {
    display: inline-block;
    float: none;
    /* width: 94px; */
    width: 104px;
}
.room_door_wrapper .iot_toggle_wrap .iot_toggle {
    width: 100px;
    min-width: 100px;
    font-style: normal !important;
    margin-right: 0;
}
.room_door_wrapper.on .iot_toggle_wrap, 
.room_standby_wrapper.on .iot_toggle_wrap,
.room_light_wrapper.on .iot_toggle_wrap,
.room_quiet_wrapper.on .iot_toggle_wrap {
    background-color: #d36440;
}
.room_door_wrapper.on .iot_toggle_handle {
    left: 0px;
}


.await_on .iot_toggle_wrap {
    background-color: #CCCCCC;
    
}
.iot_toggle {
    position: relative;
    display: block;
    width: auto;
    width: 60px;
    min-width: 60px;
    height: 30px;
    padding: 2px;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
}
.room_iot_set .iot_toggle {
    margin-bottom: 8px;
}
.await_on .iot_toggle_wrap .iot_toggle {
    pointer-events: none;
}
.iot_toggle_handle {
    position: absolute;
    display: grid;
    grid-template-columns: 40px 2px 16px 2px 40px;
    color: #FFF;
    height: 26px;
    width: 136px;
    border-radius: 4px;
    left: -40px;
    top: 2px;
    pointer-events: none;
    align-content: center;

    -webkit-transition: left 200ms ease-out 100ms;
    -moz-transition: left 200ms ease-out 100ms;
    -o-transition: left 200ms ease-out 100ms;
    transition: left 200ms ease-out 100ms;
}
.iot_toggle_wrap.on .iot_toggle_handle {
    left: 0px;
}
.room_light_wrapper.on .iot_toggle_handle,
.room_standby_wrapper.on .iot_toggle_handle,
.room_door_wrapper.on .iot_toggle_handle,
.room_quiet_wrapper.on .iot_toggle_handle {
    left: 0px;
}

.await_on .iot_toggle_wrap .iot_toggle_handle {
    left: 0px;


}

.iot_toggle_text_left, .iot_toggle_text_right {
    align-self: center;
    justify-self: center;
    background: none;
    pointer-events: none;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}
.iot_toggle_text_left span, .iot_toggle_text_right span {
    font-size: 16px;
    line-height: 16px;
    display: inline-block;
    height: 14px;
    align-self: center;
    overflow: visible;
}
.iot_toggle_sprite {
    width: 16px;
    height: 26px;
    background: #FFF;
    border-radius: 4px;
    pointer-events: none;
}

.iot_bulb {
    display: block;
    float: left;
    width: 75px;
    height: 75px;
    background: url(bulb_off.png);
    background-size: contain;
}
.iot_bulb.on {
    background: url(bulb_on.png);
    background-size: contain;
}
.iot_bulb.off {
    background: url(bulb_off.png);
    background-size: contain;
    filter: brightness(0.25);
}

/* Progress */
.prog {
    display: block;
    float: left;
    color: #CCC;
    font-weight: bold;
    padding: 30px 12px;
}
.mic {
    border-bottom: 2px solid #FFF;
}
.mic.on {
    border-bottom: 2px solid #CCC;
}
.mic.on.success {
    border-bottom: 2px solid #d36440;
}
.mic.on.failure {
    border-bottom: 2px solid #000;
}
.aws {
    border-bottom: 2px solid #FFF;
}
.aws.on {
    border-bottom: 2px solid #CCC;
}
.aws.on.success {
    border-bottom: 2px solid #d36440;
}
.aws.on.failure {
    border-bottom: 2px solid #000;
}
.fhub {
    border-bottom: 2px solid #FFF;
}
.fhub.on {
    border-bottom: 2px solid #CCC;
}
.fhub.on.success {
    border-bottom: 2px solid #d36440;
}
.fhub.on.failure {
    border-bottom: 2px solid #000;
}
.abridge {
    border-bottom: 2px solid #FFF;
}
.abridge.on {
    border-bottom: 2px solid #CCC;
}
.abridge.on.success {
    border-bottom: 2px solid #d36440;
}
.abridge.on.failure {
    border-bottom: 2px solid #000;
}

/* Spinner */
.iot_spinner {
    display: block;
    float: left;
    position: relative;
    width: 80px;
    height: 34px;
    overflow: hidden;
    opacity: 0;
}
.iot_spinner div {
    display: inline-block;
    position: absolute;
    left: 6px;
    width: 6px;
    background: #FFF;
    animation: iot_spinner 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.iot_spinner div:nth-child(1) {
    left: 0px;
    animation-delay: -0.24s;
}
.iot_spinner div:nth-child(2) {
    left: 8px;
    animation-delay: -0.12s;
}
.iot_spinner div:nth-child(3) {
    left: 16px;
    animation-delay: 0;
}
@keyframes iot_spinner {
    0% {
        top: -6px;
        height: 32px;
    }
    50%, 100% {
        top: 4px;
        height: 16px;
    }
}
.iot_spinner:after,
.iot_spinner:before {
    opacity: 0;

    -webkit-transition: left 200ms ease-out 100ms;
    -moz-transition: left 200ms ease-out 100ms;
    -o-transition: left 200ms ease-out 100ms;
    transition: left 200ms ease-out 100ms;
}

#IoTModal .synced .room_sync_wrapper .iot_spinner {
    opacity: 1;
}
#IoTModal .synced .room_sync_wrapper .iot_spinner:after,
#IoTModal .synced .room_sync_wrapper .iot_spinner:before {
    opacity: 1;
}
#IoTModal .modal-footer button {
    text-transform: uppercase;
}

/* IoT Control Button */
#iot_control_btn {
    display: flex;
    align-items: center;
    padding-top: .2em;
    padding-bottom: .2em;
    font-size: 0.9em;
    line-height: 34px;
    max-height: 34px;
}
#iot_control_btn > div.iot_spinner {
    display: none;
    width: 24px;
    margin-left: 14px;
    top: 3px;
}
#iot_control_btn.await_on > div.iot_spinner {
    display: inline-block;
    opacity: 1;
}

/* Await Overrides */
.await_on .iot_spinner {
    opacity: 1;
}

/* Sync Overrides */
.synced .room_sync_wrapper .iot_spinner div {
    opacity: 0;
}
/* #IoTModal .synced .room_sync_wrapper .iot_spinner div {
    opacity: 1;
} */
.synced .room_sync_wrapper .iot_spinner:after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 8px;
    top: 2px;
    width: 6px;
    height: 15px;
    border-bottom: 2px solid #FFF;
    border-right: 2px solid #FFF;
    transform: rotate(45deg);
    opacity: 1;
}
.synced .room_sync_wrapper .iot_spinner:before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0px;
    top: 0px;
    width: 24px;
    height: 24px;
    background: #FD501E;
    opacity: 1;
}

/* Light Overrides */
.room_light_wrapper .iot_spinner,
.room_light_wrapper .iot_spinner {
    height: 24px;
    margin-top: 4px;
}

/* XDebug */
.xdebug-error, .xdebug-error * {
    color: #454545;
}

/* Pruning */
body.make_prune_charges input[type="text"],
body.make_prune_chargeheaders input[type="text"] {
    display: inline-block;
    margin-right: 10px;
    margin-left: 10px;
    color: #454545;
}

body.make_prune_charges .dms_btn,
body.make_prune_chargeheaders .dms_btn {
    margin: 0;
}

body.make_prune_charges h2,
body.make_prune_chargeheaders h2 {
    color: yellow;
    border-bottom: 1px solid yellow;
    margin-bottom: 0;
}

body.make_prune_charges .spacer,
body.make_prune_chargeheaders .spacer {
    clear: both;
    width: 100%;
    height: 1px;
    margin-bottom: 20px;
    border-bottom: 1px solid yellow;
}

body.make_prune_charges form,
body.make_prune_chargeheaders form  {
    display: block;
    overflow: hidden;
    background: rgba(255,255,0,0.1);
    padding: 20px;
}

/* Diagnostics */
.connection_grid {
    display: grid;
    clear: both;
    width: minmax(600px, 100%);
    grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr);
    grid-column-gap: 0px;
    margin-top: 20px;
    
}
.connection_grid > div {
    position: relative;
}
.connection_grid > div:nth-child(1),
.connection_grid > div:nth-child(2),
.connection_grid > div:nth-child(3) {
    border-bottom: 1px solid #CCC;
}

.connection_grid > div > div.conn_item > b {
    display: inline-block;
    width: 100%;
    padding: 20px;
    text-align: center;
}
.connection_grid > div > div.conn_item > .conn_item_bg {
    display: grid;
    align-items: center;
    justify-items: center;
}
.connection_grid > div > div.conn_item > img {
    display: inline-block;
    margin: 0px 40px;
    max-width: 100%;
    width: 120px;
}
.connection_grid .conn_item .pendmark {
    color: #FFF;
    background: #bcb135;
    border-radius: 30px;
    width: 30px;
    height: 30px;
    position: absolute;
    top: auto;
    bottom: -15px;
    left: calc(50% - 14px);
    z-index: 2;
    align-items: center;
    display: grid;
    align-content: center;
    justify-content: center;
}
.connection_grid .conn_item .checkmark {
    color: #FFF;
    background: #33992b;
    border-radius: 30px;
    width: 30px;
    height: 30px;
    position: absolute;
    top: auto;
    bottom: -15px;
    left: calc(50% - 14px);
    z-index: 3;
    align-items: center;
    display: grid;
    align-content: center;
    justify-content: center;
    opacity: 0;
}
.connection_grid .conn_item .checkmark.on {
    opacity: 1;
}
.connection_grid .conn_item .exmark {
    color: #FFF;
    background: red;
    border-radius: 30px;
    width: 30px;
    height: 30px;
    position: absolute;
    top: auto;
    bottom: -15px;
    left: calc(50% - 14px);
    z-index: 4;
    align-items: center;
    display: grid;
    align-content: center;
    justify-content: center;
    opacity: 0;
}
.connection_grid .conn_item .exmark.on {
    opacity: 1;
}
@media screen and (max-width:768px) {
    .connection_grid {
        grid-template-columns: 1fr;
        width: 100%;
    }
    .connection_grid > div > div.conn_item > img {
        width: 100%;
        margin: 0px;
    }
}

.mic_grid {
    display: grid;
    clear: both;
    width: minmax(600px, 100%);
    grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr);
    grid-column-gap: 0px;
    margin-top: 20px;
    
}
.mic_grid > div {
    position: relative;
}
.mic_grid > div:nth-child(1),
.mic_grid > div:nth-child(2),
.mic_grid > div:nth-child(3) {
    border-bottom: 1px solid #CCC;
}

.mic_grid > div > div.conn_item > b {
    display: inline-block;
    width: 100%;
    padding: 20px;
    text-align: center;
}
.mic_grid > div > div.conn_item > .conn_item_bg {
    display: grid;
    align-items: center;
    justify-items: center;
}
.mic_grid > div > div.conn_item > img {
    display: inline-block;
    margin: 0px 40px;
    max-width: 100%;
    width: 120px;
}
.mic_grid .conn_item .pendmark {
    color: #FFF;
    background: #bcb135;
    border-radius: 30px;
    width: 30px;
    height: 30px;
    position: absolute;
    top: auto;
    bottom: -15px;
    left: calc(50% - 14px);
    z-index: 2;
    align-items: center;
    display: grid;
    align-content: center;
    justify-content: center;
}
.mic_grid .conn_item .checkmark {
    color: #FFF;
    background: #33992b;
    border-radius: 30px;
    width: 30px;
    height: 30px;
    position: absolute;
    top: auto;
    bottom: -15px;
    left: calc(50% - 14px);
    z-index: 3;
    align-items: center;
    display: grid;
    align-content: center;
    justify-content: center;
    opacity: 0;
}
.mic_grid .conn_item .checkmark.on {
    opacity: 1;
}
.mic_grid .conn_item .exmark {
    color: #FFF;
    background: red;
    border-radius: 30px;
    width: 30px;
    height: 30px;
    position: absolute;
    top: auto;
    bottom: -15px;
    left: calc(50% - 14px);
    z-index: 4;
    align-items: center;
    display: grid;
    align-content: center;
    justify-content: center;
    opacity: 0;
}
.mic_grid .conn_item .exmark.on {
    opacity: 1;
}
.mic_grid #conn_mic .conn_item .pendmark {
    left: calc(50% - 17px);
}
.mic_grid #conn_mic .conn_item .checkmark {
    left: calc(50% - 17px);
}
.mic_grid #conn_mic .conn_item .exmark {
    left: calc(50% - 17px);
}
@media screen and (max-width:768px) {
    .mic_grid {
        grid-template-columns: 1fr;
        width: 100%;
    }
    .mic_grid > div > div.conn_item > img {
        width: 100%;
        margin: 0px;
    }
}

.mic_grid label {
    display: block;
    width: 100%;
}
.info_device_form label {
    margin-right: 10px;
}
.mic_grid label input[type="text"] {
    display: inline-block;
    width: 100%;
    background: rgba(0,0,0,0.9);
    color: #fff;
    padding: 8px 20px;
    border: 1px solid #000;
    margin-top: 4px;
    margin-bottom: 10px;
}

.info_device_form select {
    display: inline-block;
    width: 100%;
    background: rgba(0,0,0,0.9);
    color: #fff;
    padding: 12px 20px;
    border: 1px solid #000;
    margin-top: 4px;
    margin-bottom: 10px;
    border: 1px solid #E35C33;
    border-radius: 3px;
    font-size: normal;
    cursor: pointer;
}
.info_device_form select:hover {
    background: rgba(0,0,0,0.4);
}



#info_webserver,
#info_dapp,
#info_pms,
#info_user,
#info_mic,
#info_device {
    min-height: 100px;
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 14px;
    width: calc(100% - 20px);
    margin: 20px 10px;
}

#info_webserver address {
    margin: 0;
    padding: 0;
}

#info_webserver .spinner,
#info_dapp .spinner,
#info_pms .spinner,
#info_user .spinner,
#info_mic .spinner,
#info_device .spinner {
    opacity: 1;
}
#info_webserver .spinner.off,
#info_dapp .spinner.off ,
#info_pms .spinner.off,
#info_user .spinner.off,
#info_mic .spinner.off,
#info_device .spinner.off {
    display: none;
}

#info_mic .spinner,
#info_user .spinner {
    margin-bottom: 4px;
}
#info_device .spinner {
    margin-bottom: 10x;
}
.web_server_grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 10px;
}

.diagnostics pre {
    border: 1px solid #000;
}
pre#info_webserver_console {
    background: rgba(0,0,0,0.9);
    min-width: 0px;
    max-width: 100%;
    max-height: 496px;
    overflow: scroll;
    display: flex;
    flex-direction: column;
    padding: 20px;
    color: #FFF;
}
pre#info_webserver_console > span {
    width: 100%;
    align-self: flex-end;
}
pre#info_dapp_console {
    background: rgba(0,0,0,0.9);
    min-width: 0px;
    max-width: 100%;
    max-height: 600px;
    overflow: scroll;
    display: flex;
    flex-direction: column;
    padding: 20px;
}
pre#info_dapp_console > span {
    width: 100%;
    align-self: flex-end;
}
.iot-broker pre#info_dapp_console {
    background: rgba(0,0,0,0.9);
    min-width: 0px;
    max-width: 100%;
    max-height: 80%;
    overflow: scroll;
    display: flex;
    flex-direction: column;
    padding: 20px;
}
pre#info_pms_console {
    background: rgba(0,0,0,0.9);
    min-width: 0px;
    max-width: 100%;
    max-height: 600px;
    overflow: scroll;
    display: flex;
    flex-direction: column;
    padding: 20px;
}
pre#info_pms_console > span {
    width: 100%;
    align-self: flex-end;
}

pre#info_user_console {
    background: rgba(0,0,0,0.9);
    min-width: 0px;
    max-width: 100%;
    max-height: 600px;
    overflow: scroll;
    display: flex;
    flex-direction: column;
    padding: 20px;
    color: #FFF;
}
pre#info_user_console > span {
    width: 100%;
    align-self: flex-end;
    color: #FFF;
}

pre#info_mic_console {
    background: rgba(0,0,0,0.9);
    min-width: 0px;
    max-width: 100%;
    max-height: 600px;
    overflow: scroll;
    display: flex;
    flex-direction: column;
    padding: 20px;
    color: #FFF;
}
pre#info_mic_console > span {
    width: 100%;
    align-self: flex-end;
    color: #FFF;
}

pre#info_mic_notes3 {
    background: rgba(0,0,0,0.9);
    min-width: 0px;
    max-width: 100%;
    max-height: 600px;
    overflow: scroll;
    display: flex;
    flex-direction: column;
    padding: 20px;
    color: #FFF;
}
pre#info_mic_notes3 > span {
    width: 100%;
    align-self: flex-end;
    color: #FFF;
}

pre#info_device_console {
    background: rgba(0,0,0,0.9);
    min-width: 0px;
    max-width: 100%;
    max-height: 600px;
    overflow: scroll;
    display: flex;
    flex-direction: column;
    padding: 20px;
    color: #FFF;
}
pre#info_device_console > span {
    width: 100%;
    align-self: flex-end;
    color: #FFF;
}

.info_webserver_console_title,
.info_webserver_text,
.info_dapp_console_title,
.info_dapp_text,
.info_pms_console_title,
.info_pms_text,
.info_mic_text,
.info_device_text {
    padding-top: 30px;
}

.info_device_form {
    grid-column: 1 / span 3;
}

.info_dapp_text {
    padding-bottom: 20px;
}

.user_name,
.info_user_console_title {
    padding-top: 30px;
}

.green {
    color: #33992b;
}
.red {
    color: #eb3939;
}


#btn_start_diagnostics:disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/* DataTables Processing Override */
body.users .processing {
    /* display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
    overflow: hidden;
    background: rgba(0,0,0,0.1); */
}
body.users .processing #usersTable_processing,
body.pms_emulator .processing #unpostedChargesTable_processing {
    /* background: rgba(0,0,0,0.9); */
    background: #1c1c1c;
    height: 60px;
    padding: 14px;
    align-items: center;
}
body.users .processing .iot_spinner,
body.pms_emulator .processing .iot_spinner {
    position: relative;
    background: none !important;
    display: inline-block;
    opacity: 1;
    float: none !important;
    height: 22px;
    margin-left: 10px;
    top: 2px;
}
/* .users .page_header:first-child {
    display: none;
} */

/* Users Password Reset */
.password_reset_btn {
    /* width: 80px;
    min-width: 80px;
    max-width: 80px; */
    width: auto;
}

/* Users Styles */
body.users #hotelsTable_wrapper {
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
}

.password_reset_btn .demo-icon {
    visibility: collapse;
    width: 0;
    height: 0;
}
.password_reset_btn.wait .demo-icon {
    visibility: visible;
    width: auto;
    height: auto;
}

.animate-spin {
    -moz-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
    display: inline-block;
  }
  @-moz-keyframes spin {
    0% {
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  
    100% {
      -moz-transform: rotate(359deg);
      -o-transform: rotate(359deg);
      -webkit-transform: rotate(359deg);
      transform: rotate(359deg);
    }
  }
  @-webkit-keyframes spin {
    0% {
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  
    100% {
      -moz-transform: rotate(359deg);
      -o-transform: rotate(359deg);
      -webkit-transform: rotate(359deg);
      transform: rotate(359deg);
    }
  }
  @-o-keyframes spin {
    0% {
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  
    100% {
      -moz-transform: rotate(359deg);
      -o-transform: rotate(359deg);
      -webkit-transform: rotate(359deg);
      transform: rotate(359deg);
    }
  }
  @-ms-keyframes spin {
    0% {
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  
    100% {
      -moz-transform: rotate(359deg);
      -o-transform: rotate(359deg);
      -webkit-transform: rotate(359deg);
      transform: rotate(359deg);
    }
  }
  @keyframes spin {
    0% {
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  
    100% {
      -moz-transform: rotate(359deg);
      -o-transform: rotate(359deg);
      -webkit-transform: rotate(359deg);
      transform: rotate(359deg);
    }
  }