@charset "utf-8";

:root {
    --rush-accent: #FFBD02;
    --rush-dark-1: #111111;
    --rush-dark-2: #666666;
    --rush-dark-3: #F6F6F6;
    --rush-accent-1: #E202FF;
    --rush-accent-2: #FF00AC;
    --rush-accent-3: #FE0000;
    --rush-accent-4: #FF4E02;
    --rush-accent-5: #FFBD02;
    --rush-accent-6: #FEED00;
    --rush-accent-7: #000000;
}


body {
    overflow: hidden;
    color: #fff;
    background-color: #103146;
}

.body {
    height: 100%;
}

.login-notification {
    position: fixed;
    left: 50%;
    bottom: -38px;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    border: 1px solid #515151;
    width: 200px;
    height: 25px;
    color: #fff;
    text-align: center;
    background-color: #222222;
    line-height: 20px;
    font-size: 8pt;
    -webkit-transition: bottom 0.5s ease-in-out;
    -moz-transition: bottom 0.5s ease-in-out;
    -o-transition: bottom 0.5s ease-in-out;
    transition: bottom 0.5s ease-in-out;
}

.login-notification-show {
    bottom: -12px;
}

/*.login-notification-show {
    animation-name: slideup;
    animation-delay: 0.5s;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}
*/
@keyframes slideup {
    0% {
        bottom: -38px
    }

    100% {
        bottom: -12px;
    }
}

.login-notification-hide {
    animation-name: slidedown;
    animation-delay: 0.5s;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

@keyframes slidedown {
    0% {
        bottom: -12px
    }

    100% {
        bottom: -38px;
    }
}

input[type="text"], input[type="password"], input[type="tel"], input[type="email"] {
    border: 1px solid #515151;
    color: #FFF;
    background-color: #222222;
}

#portal {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
}

#header {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 49px;
    border-bottom: 1px solid #383838;
    background-color: #103146;
    display: flex;
}

/*#header .menu {
    position: absolute; right:0px; top:0px; height: 55px; width: 250px; 
}
*/
#content {
    position: absolute;
    top: 49px;
    left: 0px;
    right: 0px;
    bottom: 30px;
    background-color: #333333;
}

#footer {
    position: absolute;
    height: 30px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #1d1d1d;
    border-top: 1px solid #515151;
    display: flex;
    align-items: stretch;
}

.footer-element {
    line-height: 32px;
    border-left: 1px solid #515151;
    text-align: center;
}

.signalr-connected {
    color: lawngreen;
}

.signalr-disconnected {
    color: #ffc30c;
}

.signalr-error {
    color: red;
}

.fa-blink {
    opacity: 0;
    color: #ffc30c;
    animation: anima 1s ease infinite;
}

.portal-brand {
    color: #fff;
    line-height: 30px;
    padding-left: 5px;
}

.loggedIntoQueue {
    color: blue;
}

@keyframes anima {
    to {
        opacity: 1;
    }
}



#login-error {
    padding: 15px 0px 0px 0px;
    text-align: center;
    color: #FFF;
}

#recover-error {
    padding: 0px 0px 0px 0px;
    text-align: center;
    color: #FFF;
}

#recoverMessage {
    color: #FFF;
}

.sidebar {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 200px;
    background-color: #222222;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.sidebar-head {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 40px;
    border-bottom: 1px solid #333333;
}

.sidebar-body {
    position: absolute;
    top: 1px;
    left: 0px;
    bottom: 41px;
    right: 0px;
    overflow-x: hidden;
    overflow-y: auto;
}

.sidebar-foot {
    position: absolute;
    right: 0px;
    left: 0px;
    bottom: 0px;
    height: 40px;
    border-top: 1px solid #333333;
    background-color: #252525;
}

.small {
    width: 45px;
}

.smalllabel {
    width: 0px;
}

.large {
    width: 250px;
}

.search_button {
    color: #FFF;
}

.plugin {
    display: inline-block;
    position: relative;
    line-height: 40px;
    width: 200px;
    cursor: pointer;
    border-bottom: 1px solid #333333;
}

.plugin-header {
    display: inline-block;
    position: relative;
    line-height: 30px;
    width: 200px;
    cursor: default;
    border-bottom: 1px solid #333333;
}

    .plugin-header:hover {
        background-color: #222222;
    }

.plugin-header-text {
    padding: 10px;
}

    .plugin-header-text:hover {
        text-decoration: none;
    }

.plugin:hover {
    background-color: #333333;
}

.plugin .icon {
    width: 40px;
    font-size: 14pt;
    text-align: center;
    line-height: 35px;
    float: left;
}

.plugin .label {
    font-size: 9pt;
    text-align: left;
    line-height: 40px;
    float: left;
    color: #ffffff;
}

.tabs {
    position: absolute;
    left: 202px;
    right: 0;
    height: 28px;
    background-color: #222222;
    border-bottom: 1px solid #666666;
}

img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tabs .tab {
    line-height: 2em;
    padding: 0 1em;
    display: inline-block;
    background-color: #000000;
    border-right: 1px solid #444444;
    height: 27px;
    color: #666666;
}

    .tabs .tab.active {
        background-color: #252525;
        border-color: #666666;
        border-left: 1px solid #666666;
        color: #ffffff;
        height: 28px;
    }

.tabs .tabelement:nth-child(2) {
    border-left: none;
}

.tabs .tabClose {
    color: #666666;
}

    .tabs .tabClose:hover {
        color: #ffffff;
    }

.tabs .closeAllTabs {
    line-height: 2em;
    padding: 0 1em;
    display: inline-block;
    height: 27px;
    background-color: #222222;
    color: #888888;
}

    .tabs .closeAllTabs:hover {
        background-color: #252525;
        color: #ffffff;
    }

.windows {
    position: absolute;
    top: 28px;
    bottom: 0px;
    right: 0px;
    transition: all 0.2s linear;
    left: 201px;
    white-space: nowrap; /* important */
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: #222222;
    font-size: 0;
}

.minmisedBlade {
    background-color: #222222;
}

.winscr {
    position: relative;
    background: red;
    height: 100%;
    display: inline-block;
    left: 0px;
}

.scrollr {
    position: absolute;
    height: 20px;
    bottom: 0px;
    right: 0px;
    left: 201px;
}

.left46 {
    left: 47px
}


.show {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .5s;
    transition: .5s;
}





.menuicon {
    font-size: 20pt;
    width: 60px;
    line-height: 60px;
    vertical-align: middle;
    text-align: center;
}


.sidebar ul {
    list-style-type: none;
    padding: 0;
    width: 200px;
}

.sidebar li {
    margin: 0px 0px 10px 0px;
    border-bottom: 1px solid #383838;
}

.sidebar ul li a {
    text-decoration: none;
    color: #FFF;
    display: block;
    cursor: pointer;
}

    .sidebar ul li a .icon {
        width: 40px;
        font-size: 12pt;
        display: inline-block;
        text-align: center;
        line-height: 30px;
        overflow: hidden;
    }

    .sidebar ul li a .label {
        width: 150px;
        display: inline-block;
        clear: both;
        text-align: left;
        overflow: hidden;
        line-height: 30px;
        white-space: nowrap;
        font-size: 9pt
    }



    .sidebar ul li a:visited {
        color: white;
    }

    .sidebar ul li a:hover, .sidebar ul li .current {
        color: #fff;
        background-color: #383838;
    }


.plugin-header > input {
    background-color: transparent;
    width: 150px;
    border: none;
    color: #fff;
    float: left;
    margin-left: 0px;
    line-height: 40px;
    height: 40px;
    vertical-align: middle;
    font-weight: normal;
    color: #179CDF;
    font-size: 9pt
}

.plugin-delete {
    display: none;
    color: #fff;
    float: right;
    vertical-align: middle;
    padding-right: 1.5em;
    cursor: pointer;
}

.visible {
    visibility: visible;
}

.hidden {
    visibility: hidden;
}

.modal {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #000;
    opacity: 0.5;
    z-index: 5999;
    overflow: hidden;
}

.page {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-color: #252525;
    z-index: 100;
}



.blade {
    height: 100%;
    background-color: #252525;
    display: inline-block;
    position: relative;
    border-left: 1px solid #383838;
}

    .blade .head {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        height: 41px;
        border-bottom: 1px solid #383838;
        line-height: 41px;
    }

        .blade .head .icon {
            font-size: 12pt;
            color: #B8D432;
            margin-left: 20px;
            vertical-align: middle;
        }

        .blade .head .title {
            padding-left: 10px;
            font-size: 10pt;
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            /*width: calc(100% - 12em);*/
        }

        .blade .head .blade_icon {
            font-size: 14pt;
            color: #616161;
            margin: 5px;
            padding: 5px 0px;
            cursor: pointer;
        }

            .blade .head .blade_icon:hover {
                color: #ffffff;
            }

            .blade .head .blade_icon.active {
                color: #ffffff;
            }

.minimisedBlade {
    background-color: #252525;
    border-left: 1px solid #383838;
}

    .minimisedBlade .blade_icon {
        font-size: 12pt;
        color: #616161;
        margin: 5px;
        padding: 5px 0px;
        cursor: pointer;
    }

        .minimisedBlade .blade_icon:hover {
            color: #ffffff;
        }

.blade .menu {
    position: absolute;
    top: 42px;
    left: 0px;
    right: 0px;
    height: 60px;
    border-bottom: 1px solid #383838;
    padding-left: 20px;
}

.blade .menu-body {
    position: absolute;
    top: 103px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow-y: auto;
}

.blade .find {
    position: absolute;
    top: 131px;
    left: 20px;
    right: 20px;
    height: 30px;
}

.blade .list {
    position: absolute;
    top: 180px;
    left: 20px;
    right: 20px;
    bottom: 35px;
}

.blade .info {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 200px;
}

.blade .view {
    position: absolute;
    top: 110px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow-y: auto;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
}

.blade .info {
    position: absolute;
    top: 110px;
    left: 0px;
    right: 0px;
    height: 150px;
    border-bottom: 1px solid #383838;
}

/*.blade {
    animation: fadeAndZoom 0.15s;
}*/

/*.blade .view {
    animation: fadeAndZoom 0.15s;
}

    .blade .find {
        animation: fadeAndZoom 0.15s;
    }

    .blade .list {
        animation: fadeAndZoom 0.15s;
    }

    .blade .menu {
        animation: fadeAndZoom 0.15s;
    }*/

@keyframes fadeAndZoom {
    from {
        transform: scale(0.98);
        opacity: 0.5;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.blade .viewgrid {
    position: absolute;
    top: 440px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.blade .grid {
    position: absolute;
    top: 125px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    overflow: hidden;
}

.blade .foot {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 100px;
    border-top: 1px solid #383838;
}

.blade .grid-footer {
    position: absolute;
    bottom: 0.5em;
    left: 0.5em;
    right: 0.5em;
    border: 1px solid #515151;
    padding: 0.25em 1em;
}



.icon-list {
    list-style-type: none;
    padding: 0;
    width: 100%
}

    .icon-list li {
        margin: 0px 0px 0px 0px;
        border-bottom: 1px solid #383838;
    }

    .icon-list a p {
        font-size: 9pt;
    }

        .icon-list a p.svcname {
            margin-top: 7px;
            font-size: 10pt;
        }

    .icon-list li h1 {
        margin-top: 25px;
        margin-bottom: 0px;
        padding-bottom: 10px;
        color: #fff;
        font-size: 8pt;
        /*font-weight: 700;*/
        vertical-align: baseline;
        border-bottom: 1px solid #383838;
        text-transform: uppercase;
        letter-spacing: 0.5pt;
        pointer-events: none;
    }

    .icon-list li a {
        text-decoration: none;
        color: #FFF;
        display: block;
        cursor: pointer;
        width: 100%
    }

        .icon-list li a .icon {
            width: 30px;
            font-size: 12pt;
            display: inline-block;
            text-align: center;
            line-height: 35px;
            overflow: hidden;
        }

        .icon-list li a .text {
            display: inline-block;
            text-align: left;
            overflow: hidden;
            line-height: 35px;
            white-space: nowrap;
            font-size: 9pt;
            color: #fff;
            float: left;
            width: 150px !important;
        }

            .icon-list li a .text.radio_button {
                color: #bbb;
            }

        .icon-list li a:hover {
            color: #fff;
            background-color: #505050;
        }

    .icon-list li.current {
        background-color: #000 !important;
    }

.favourite {
    color: #FFFF00;
}

.notfavourite {
    color: #787878;
}

.isDefault {
    color: #B8D432;
}

.isNotDefault {
    color: #787878;
}


.active {
    color: #B8D432;
}

.inactive {
    color: #616161;
}

.blade h1 {
    margin-top: 25px;
    margin-bottom: 0px;
    padding-bottom: 10px;
    color: #fff;
    font-size: 8pt;
    /*font-weight: 700;*/
    vertical-align: baseline;
    border-bottom: 1px solid #383838;
    text-transform: uppercase;
    letter-spacing: 0.5pt;
}


.blade .menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: 60px;
}

    .blade .menu ul li {
        display: inline-block;
        width: 60px;
        height: 60px;
        cursor: pointer;
    }

        .blade .menu ul li i {
            text-align: center;
            font-size: 13pt;
            width: 60px;
            padding-top: 10px;
            color: #fff;
        }

        .blade .menu ul li p {
            text-align: center;
            font-size: 9pt;
            width: 60px;
            padding-top: 10px;
            color: #fff;
        }

        .blade .menu ul li div {
            width: 1px;
            padding-top: 10px;
            color: #fff;
            border-left: 1px solid #383838;
        }

        .blade .menu ul li:hover {
            background-color: #515151;
        }

        .blade .menu ul li.active {
            border-left: 1px solid #252525;
            background-color: #515151;
        }

            .blade .menu ul li.active.borderRight {
                border-right: 1px solid #252525;
            }


.disabled {
    color: #9C9C9C !important;
    pointer-events: none;
    opacity: 0.6;
}

.blade-child {
    height: 100%;
    background-color: #252525;
    display: inline-block;
    position: relative;
    border-left: 1px solid #383838;
}

    .blade-child .head {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        height: 49px;
        border-bottom: 1px solid #383838;
    }

    .blade-child .menu {
        position: absolute;
        top: 61px;
        left: 0px;
        right: 0px;
        height: 60px;
        border-bottom: 1px solid #383838;
    }

    .blade-child .find {
        position: absolute;
        top: 131px;
        left: 20px;
        right: 20px;
        height: 30px;
    }

    .blade-child .list {
        position: absolute;
        top: 180px;
        left: 20px;
        right: 20px;
        bottom: 20px;
    }

.blade-form {
    /*padding-right: 8px;*/
}

    .blade-form p {
        color: #EFEFEF;
        font-size: 8pt;
        vertical-align: baseline;
        margin-top: 10px;
        line-height: 14pt;
    }

    .blade-form h1 {
        margin-top: 25px;
        margin-bottom: 15px;
        padding-bottom: 5px;
        color: #00BCF2;
        font-size: 8pt;
        /*font-weight: bold;*/
        vertical-align: baseline;
        border-bottom: 1px solid #383838;
        text-transform: uppercase;
    }


.page .head {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 49px;
    border-bottom: 1px solid #383838;
}

.page .menu {
    position: absolute;
    top: 61px;
    left: 0px;
    right: 0px;
    height: 60px;
    border-bottom: 1px solid #383838;
}

.page .find {
    position: absolute;
    top: 131px;
    left: 20px;
    right: 20px;
    height: 30px;
}

.page .list {
    position: absolute;
    top: 180px;
    left: 20px;
    right: 20px;
    bottom: 20px;
}



.page-dialog {
    z-index: 6000;
}

    .page-dialog .head {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        height: 44px;
        background-color: #9cc65e;
    }

        .page-dialog .head .title {
            position: absolute;
            left: 0px;
            top: 0px;
            line-height: 44px;
            right: 0px;
            height: 44px;
            vertical-align: middle;
            color: #fff;
            text-align: center;
            font-size: 10pt;
        }

    .page-dialog .body {
        position: absolute;
        top: 44px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: #fff;
    }



.jqx-grid-cell {
    border-right-color: transparent !important;
}

.jqx-grid-column-header-azure {
    border-right-color: transparent !important;
    text-transform: uppercase;
}


@keyframes normalNavigationBar {

    from {
        width: 45px;
    }

    to {
        width: 200px;
    }
}

@keyframes normalNavigationBarLabel {

    from {
        width: 0px;
        display: block;
    }

    to {
        width: 150px;
    }
}

.normalNavigationBar {
    animation: normalNavigationBar 0.2s linear;
    animation-fill-mode: forwards;
}

.normalNavigationBarLabel {
    animation: normalNavigationBarLabel 0.2s linear;
    animation-fill-mode: forwards;
}


@keyframes compactNavigationBar {

    from {
        width: 200px;
    }

    to {
        width: 45px;
    }
}

@keyframes compactNavigationBarLabel {

    from {
        width: 150px;
    }

    to {
        width: 0px;
        display: none;
    }
}

.compactNavigationBar {
    animation: compactNavigationBar 0.2s linear;
    animation-fill-mode: forwards;
}

.compactNavigationBarLabel {
    animation: compactNavigationBarLabel 0.2s linear;
    animation-fill-mode: forwards;
}


.animate-page-slideFromLeft {
    -webkit-animation: slideFromLeft 0.75s ease;
    animation: slideFromLeft 0.75s ease;
}

@-webkit-keyframes slideFromLeft {
    from {
        -webkit-transform: translateX(-100%);
    }
}

@keyframes slideFromLeft {
    from {
        transform: translateX(-100%);
    }
}


.animate-page-slideParentFromRight {
    -webkit-animation: slideParentFromRight 1.75s ease;
    animation: slideParentFromRight 1.75s ease;
}

@-webkit-keyframes slideParentFromRight {
    from {
        -webkit-transform: translateX(-100%);
    }
}

@keyframes slideParentFromRight {
    from {
        transform: translateX(-100%);
    }
}


@-webkit-keyframes slideParentFromRight {
    from {
        -webkit-transform: translateX(-100%);
    }
}

@keyframes slideParentFromRight {
    from {
        transform: translateX(-100%);
    }
}

/*$("#slide1_images").css("transform","translateX("+$(this).index() * -450+"px)");*/
.jqx-validator-error-label {
    font-size: 8pt;
}

.blade-question-icon {
    font-size: 50pt !important;
    color: #B8D432;
}

.blade-question {
    font-size: 9pt;
    color: #fff;
    line-height: 25px;
    margin: 10px;
    white-space: normal;
    text-align: center;
}


/* Time Restriction Editor */

.trt {
    width: 100%;
    border-collapse: separate;
    border-spacing: 1px;
    background-color: #383838;
}

.tc {
    width: 17px;
    height: 10px;
    background-color: #252525;
}

.tch {
    font-size: 7pt;
    color: #fff;
    vertical-align: middle;
    width: 17px;
    height: 10px;
    background-color: #252525;
    text-align: center;
}

.restricted {
    background-color: #000;
    color: #fff;
    cursor: pointer;
}

.unrestricted {
    background-color: #54B4D9;
    color: #000;
    cursor: pointer;
}




.b-border {
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

.blade-color-border {
    border-color: #383838;
}



.ONLINE {
    background-color: green
}

.OFFLINE {
    background-color: red
}

.ONLINE-color {
    color: green
}

.OFFLINE-color {
    color: red
}

.Status {
    font-size: 8pt;
    color: white;
    padding: 0px 5px;
}


.blade-form-tip {
    width: 100%;
    color: #B8D432;
    font-size: 9pt;
    line-height: 20px;
    white-space: normal;
    margin-top: 20px;
}




.uer {
    display: table-row;
    line-height: 20px;
}

.uel {
    display: table-cell;
    width: 100px;
}

.uet {
    display: table-cell;
}

.user_events_view hr {
    margin-top: 5px;
    margin-bottom: 5px;
}


.button {
    width: 50%;
    background-color: #b8d432;
    border-radius: 2px;
    display: inline-block;
    position: relative;
    line-height: 40px;
    cursor: pointer;
}

    .button .label {
        color: #000;
        font-size: 11pt;
        width: 100%;
        text-align: center;
        line-height: 40px;
        float: left;
    }

.radio-button-checked.radio-button-checked-border {
    border-left: 1px solid #383838;
    border-right: 1px solid #383838;
    background-color: #000;
}

    .radio-button-checked.radio-button-checked-border .text.radio_button {
        font-size: 10pt;
        color: #fff;
    }




.slider-gauge-container {
    float: left;
    margin-top: 15px;
    width: 100%;
}

.slider-gauge-background {
    width: 100%;
    height: 20px;
    background-image: url("../images/criss_cross.png");
    border: 1px solid #383838;
    background-color: #383838;
}

.slider-gauge-fill {
    height: 15px;
    z-index: 10;
    top: 0;
    background-color: #00BCF2;
    border: 1px solid #00BCF2;
    border-right: 1px solid #ffffff;
}

.slider-gauge-fill-shaped {
    height: 15px;
    background-color: #ffe066;
    border: 1px solid #ffe066;
}

.slider-gauge-fill-expired {
    height: 15px;
    background-color: #fb274a;
    border: 1px solid #fb274a;
}

.slider-gauge-text {
    color: #ffffff;
    font-size: 8pt;
}

.slider-gauge-title {
    float: left;
}

.slider-gauge-top-right-text {
    padding-bottom: 5px;
    float: right;
}

.slider-gauge-bottom-left-text {
    padding-top: 5px;
    float: left;
}


.service-summary-table {
    width: 100%;
    min-width: 720px;
}

    .service-summary-table td {
        padding: 6px 7px 6px 20px;
        border: 1px solid #383838;
        text-align: right;
        min-width: 80px;
        font-size: 12px;
    }

    .service-summary-table tr:nth-child(even) {
        background-color: #202020;
    }

    .service-summary-table tr:nth-child(odd) {
        background-color: #151515;
    }

    .service-summary-table th {
        padding: 6px 7px 6px 7px;
        border: 1px solid #383838;
        min-width: 80px;
        text-align: center;
        font-size: 14px;
        background-color: #151515;
    }

.service-profit-table td {
    vertical-align: middle;
    background-color: #000000;
}


.ticketBold {
    color: #58B5D7;
    font-weight: bold;
}



.rotate {
    transition: 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
    display: inline-block;
    position: relative;
    -webkit-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
    -o-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
    -moz-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
}

@-webkit-keyframes rotating {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

.rotating {
    -webkit-animation: rotating 2s linear infinite;
}

.notification-badge {
    position: relative;
    top: -15px;
    left: -10px;
    display: none;
    color: #FFF;
    font-size: 7pt;
    background-color: red;
    border: 1px solid red;
    border-radius: 10px;
    padding: 0px 6px 1px 5px;
    line-height: 18px;
}

.fa-bell-o[data-count]:after {
    position: absolute;
    right: -5px;
    top: 5px;
    content: attr(data-count);
    font-size: 7pt;
    padding: .6em;
    border-radius: 999px;
    line-height: .75em;
    color: white;
    background: red;
    text-align: center;
    min-width: 2em;
    font-weight: bold;
    z-index: 1000;
}

.sys-menu {
    position: relative;
    display: inline-block;
}

    .sys-menu:hover .sys-menu-items {
        /* display: block;*/
        cursor: pointer;
    }

.sys-menu-item:hover {
    background-color: #1C587D;
    cursor: pointer;
}

.sys-menu-items {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(66,66,66,0.2);
    z-index: 1;
}

    .sys-menu-items a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        cursor: pointer;
    }

        .sys-menu-items a p {
            color: black;
            line-height: 25px;
            font-size: 10pt;
            display: inline-block;
        }

        .sys-menu-items a i {
            color: black;
            line-height: 25px;
            font-size: 15pt;
            display: inline-block;
        }

        .sys-menu-items a:hover {
            background-color: #f1f1f1
        }

.sys-menu-user {
    height: 13px;
    text-align: right;
    padding: 0;
    margin: 10px 5px 0px 0px;
    line-height: 13px;
    vertical-align: bottom;
    font-size: 14px;
    color: #fff;
}

.sys-menu-role {
    height: 13px;
    text-align: right;
    padding: 0;
    margin: 5px 5px 0px 0px;
    line-height: 13px;
    vertical-align: bottom;
    font-size: 12px;
    color: #fff;
}

.avatar {
    float: right;
    width: 38px;
    height: 38px;
    border-radius: 100%;
    border: 1px solid #383838;
    text-align: center;
    margin-top: 5px;
    margin-right: 5px;
    background-color: #505050;
}

    .avatar i {
        font-size: 22pt;
        line-height: 36px;
        color: #fff
    }

.jqx-grid-cell-azure {
    cursor: pointer;
}

/*------ Help Topics ----------------------------------------------------------------------------*/

.help-topic {
    font-size: 9pt;
    line-height: 25px;
}

    .help-topic h1 {
        font-size: 14pt;
        margin: 10px 0px 10px 0px;
        border: none;
        text-transform: none;
        color: #B8D432
    }

    .help-topic h2 {
        font-size: 9pt;
        margin: 10px 0px 5px 0px;
        border: none;
        text-transform: none;
        font-weight: 700;
        color: #B8D432;
    }

    .help-topic h3 {
        font-size: 10pt;
        margin: 10px 0px 5px 0px;
        border: none;
        text-transform: none;
        font-weight: 700;
        color: #B8D432;
    }

    .help-topic h4 {
        font-size: 8pt;
        margin: 10px 0px 5px 0px;
        border: none;
        text-transform: none;
        font-weight: 700;
        color: #B8D432;
    }


    .help-topic p {
        font-size: 9pt;
        line-height: 25px;
        margin: 0;
    }

    .help-topic ul {
        margin-left: 15px;
    }

    .help-topic ol {
        margin-left: 15px;
    }
/*------ Notifications ---------------------------------------------------------------------------*/

.notification-leave-container {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 350px; /* note: notification-container width... */
    z-index: 2049;
}

.notification-container {
    position: absolute;
    top: 50px;
    right: 0;
    width: 350px;
    display: none;
    bottom: 0px;
    overflow: hidden;
    background: #000;
    opacity: 1.0;
    z-index: 999;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

.notification-container-scroller {
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 30px;
    overflow: hidden;
}

.notification-container-footer {
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    height: 30px;
}

.selected {
    -webkit-animation: slide-in 0.2s forwards;
    animation: slide-in 0.2s forwards;
}

.dismiss {
    -webkit-animation: slide-out 0.2s forwards;
    animation: slide-out 0.2s forwards;
}

.notification {
    height: 150px;
    width: 360px;
    background-color: #000;
    border-bottom: 1px solid #383838;
    cursor: pointer;
}

.unread {
    border-left: 5px solid #1C587D;
}

.read {
    border-left: 5px solid #000;
}

.notification .title {
    float: left;
    margin: 10px;
    color: #fff;
    line-height: 18px;
    font-size: 10pt;
}

.notification .date {
    float: right;
    margin: 10px 0px 10px 10px;
    color: #fff;
    line-height: 18px;
    font-size: 10pt;
}

.notification .close {
    float: right;
    margin: 10px 30px 10px 10px;
    color: #fff;
    font-size: 10pt;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 18px;
    cursor: pointer;
}

.notification .body {
    display: inline-block;
    margin: 10px;
    height: 60px;
    width: 325px;
    font-size: 10pt;
}

@-webkit-keyframes slide-in {
    0 {
        -webkit-transform: translateX(100%);
    }

    100% {
        -webkit-transform: translateX(0%);
    }
}

@keyframes slide-in {
    0 {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0%);
    }
}

@-webkit-keyframes slide-out {
    0% {
        -webkit-transform: translateX(0%);
    }

    100% {
        -webkit-transform: translateX(100%);
    }
}

@keyframes slide-out {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(100%);
    }
}


/*------ ACE Editor Customisation ---------------------------------------------------------------*/

.ace_editor, .ace_editor * {
    font-family: "Monaco", "Menlo", "Ubuntu Mono", "Droid Sans Mono", "Consolas", monospace !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}

/*------ Webkit Scrollbar Customisation ---------------------------------------------------------*/

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

::-webkit-scrollbar-button {
    width: 15px;
    height: 15px;
    background-color: #3E3E42;
    color: #fff;
}

::-webkit-scrollbar-thumb {
    background: #818181;
    border: 0px none #ffffff;
    border-radius: 0px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #6e6e6e;
    }

    ::-webkit-scrollbar-thumb:active {
        background: #818181;
    }

::-webkit-scrollbar-track {
    background: #424242;
    border: 0px none #ffffff;
    border-radius: 0px;
}

    ::-webkit-scrollbar-track:hover {
        background: #424242;
    }

    ::-webkit-scrollbar-track:active {
        background: #424242;
    }

::-webkit-scrollbar-corner {
    background: transparent;
}


.blink_me {
    animation: blinker 2s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0.5;
    }
}

.call-alert {
    background-color: #FEC30C;
    color: #000;
    cursor: pointer;
}

.call-alert-icon {
    float: left;
    font-size: 25pt !important;
    line-height: 48px !important;
    margin: 0px 10px;
    color: #FFF;
}

.call-alert-text {
    font-size: 9pt;
    line-height: 14px;
    color: #000;
}

.call-alert-close {
    float: left;
    font-size: 10pt;
    line-height: 30px !important;
    margin: 0px 10px;
    color: #FFF;
}


.chat-alert {
    background-color: green;
    color: #000;
    cursor: pointer;
}

.chat-alert-icon {
    float: left;
    font-size: 25pt !important;
    line-height: 48px !important;
    margin: 0px 10px;
    color: #FFF;
}

.chat-alert-text {
    font-size: 9pt;
    line-height: 14px;
    color: #fff;
}

.chat-alert-close {
    float: left;
    font-size: 10pt;
    line-height: 30px !important;
    margin: 0px 10px;
    color: #FFF;
}


.widgetIcon {
    float: left;
    padding: 10px 0px 0px 10px;
    font-size: 24pt;
}

.widgetValue {
    text-align: right;
    vertical-align: bottom;
    font-size: 14pt;
    padding: 10px 10px 0px 0px;
}

.widgetText {
    line-height: 10px;
    vertical-align: top;
    font-size: 8pt;
    padding: 5px 10px 0px 0px;
}

.portalWidget {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    min-height: 70px;
    width: 100%;
    margin-bottom: 10px;
    border: 1px solid #444444;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.drillDownWidget {
    background-color: #252525 !important;
    border: 1px solid #444444 !important;
    transition: all 0.125s ease-out;
}

    .drillDownWidget:hover {
        background-color: #000000 !important;
        border: 1px solid #666666 !important;
        transition: all 0.375s ease-in;
    }

.selectedWidget .simpleWidget {
    border: 1px solid #dddddd !important;
}

.selectedWidget.page-title {
    border: 1px dashed #dddddd !important;
}

.editMode {
    -webkit-filter: grayscale(100%);
    -mos-filter: greyscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}

    .editMode.selectedWidget {
        -webkit-filter: none;
        -mos-filter: none;
        -ms-filter: none;
        -o-filter: none;
        filter: none;
    }

.Editable_Container.chart_container .widgetSettingsIcon {
    position: absolute;
    padding: 0.5em;
    display: none;
    border: 1px solid #666666;
    background-color: #383838;
    color: #dddddd;
    cursor: pointer;
    transition: all 0.125s ease-out;
    z-index: 80;
    top: 30px;
    right: 40px;
}

    .Editable_Container.chart_container .widgetSettingsIcon.previousDate {
        right: 70px;
    }

    .Editable_Container.chart_container .widgetSettingsIcon.nextDate {
        right: 10px;
    }

    .Editable_Container.chart_container .widgetSettingsIcon:hover {
        border: 1px solid #dddddd;
        background-color: #444444;
        color: #ffffff;
        transition: all 0.25s ease-in;
    }

.Editable_Container.chart_container:hover .widgetSettingsIcon {
    display: initial;
}

.Editable_Container.page-title .widgetSettingsIcon {
    position: absolute;
    padding: 0.5em;
    top: -1em;
    right: 1em;
    display: none;
    border: 1px solid #666666;
    background-color: #383838;
    color: #dddddd;
    cursor: pointer;
    transition: all 0.125s ease-out;
}

    .Editable_Container.page-title .widgetSettingsIcon:hover {
        border: 1px solid #dddddd;
        background-color: #444444;
        color: #ffffff;
        transition: all 0.25s ease-in;
    }

.Editable_Container.page-title:hover .widgetSettingsIcon {
    display: initial;
}

.simpleWidget .widgetSettingsIcon {
    position: absolute;
    padding: 0.5em;
    top: 0px;
    right: 0px;
    display: none;
    border: 1px solid #666666;
    background-color: #252525;
    color: #dddddd;
    cursor: pointer;
    transition: all 0.125s ease-out;
}

    .simpleWidget .widgetSettingsIcon:hover {
        border: 1px solid #dddddd;
        background-color: #444444;
        color: #ffffff;
        transition: all 0.25s ease-in;
    }

.simpleWidget:hover .widgetSettingsIcon {
    display: initial;
}

.drillDownWidget .widgetSettingsIcon {
    border: 1px solid #666666;
    background-color: #252525;
    color: #dddddd;
    transition: all 0.125s ease-out;
    cursor: pointer;
}

    .drillDownWidget .widgetSettingsIcon:hover {
        border: 1px solid #dddddd;
        background-color: #444444;
        color: #ffffff;
        transition: all 0.25s ease-in;
    }

.drillDownWidget:hover .widgetSettingsIcon {
    display: initial;
}

.resourceUtilisationChart .jqx-chart-axis-text {
    fill: #dddddd;
}

.resourceUtilisationChart .jqx-chart-legend-text {
    fill: #dddddd;
}

table.bordersOn {
    width: 100%;
    border: 1px solid #444444;
    line-height: 2em;
}

    table.bordersOn td {
        border: 1px solid #444444;
        padding-left: 0.5em;
    }


.changeNotification {
    width: 100%;
    background-color: #deab4f;
    line-height: 30px;
    vertical-align: middle;
    text-align: center;
    margin-top: 10px;
    cursor: pointer;
}

.portDisabled {
    background-color: #d9d9d9;
    cursor: default;
}

.selectAllPorts {
    float: left;
    margin-left: 4px;
    margin-right: 4px;
    margin-bottom: 8px;
    height: 20px;
    width: 20px;
    border: 1px solid #757575;
    cursor: pointer;
    text-align: center;
    font-size: 8pt;
    vertical-align: middle;
    padding-top: 4px;
}

.bondPort {
    float: left;
    margin-left: 4px;
    margin-right: 8px;
    margin-bottom: 8px;
    height: 15px;
    width: 20px;
    border: 1px solid #757575;
    cursor: pointer;
    text-align: center;
    font-size: 8pt;
    vertical-align: middle;
    padding-top: 4px;
    margin-top: 6px;
}

.switchInterface {
    float: left;
    margin-left: 4px;
    margin-right: 4px;
    height: 40px;
    width: 20px;
}

.switchInterfacePort {
    height: 20px;
    width: 20px;
    border: 1px solid #757575;
    cursor: pointer;
    text-align: center;
    font-size: 8pt;
    vertical-align: middle;
    padding-top: 4px;
    font-family: Verdana;
}

.switchInterfacePoe {
    height: 12px;
    width: 20px;
    border-left: 1px solid #757575;
    border-right: 1px solid #757575;
    border-bottom: 1px solid #757575;
    cursor: pointer;
    text-align: center;
    font-size: 7pt;
    vertical-align: middle;
    color: #000;
    font-family: sans-serif;
}

/*.trunkPort:before {
    content: "T"
}
*/
.poePort {
    float: left;
    margin-left: 4px;
    margin-right: 4px;
    margin-bottom: 8px;
    height: 20px;
    width: 20px;
    border: 1px solid #757575;
    cursor: pointer;
    text-align: center;
    font-size: 6pt;
    vertical-align: middle;
    line-height: 18px;
}

.switchPort {
    float: left;
    margin-left: 4px;
    margin-right: 4px;
    margin-bottom: 8px;
    height: 20px;
    width: 20px;
    border: 1px solid #757575;
    cursor: pointer;
    text-align: center;
    font-size: 8pt;
    vertical-align: middle;
    padding-top: 4px;
}

.physicalPort {
    float: left;
    margin-left: 4px;
    margin-right: 4px;
    margin-bottom: 8px;
    height: 30px;
    width: 30px;
    border: 1px solid #757575;
    cursor: pointer;
    text-align: center;
    line-height: 28px;
    font-size: 8pt;
}

.portRunning {
    border-color: yellow;
}

.portPluggedIn {
    background: #37c080 !important;
}

.portPluggedInSlow {
    background: #fb274a !important;
}

.clientPort {
    float: left;
    margin-left: 0px;
    margin-right: 12px;
    margin-bottom: 8px;
    height: 30px;
    width: 30px;
    border: 1px solid #757575;
    cursor: pointer;
    text-align: center;
    line-height: 28px;
    font-size: 8pt;
}

.clientPort {
    float: left;
    margin-left: 0px;
    margin-right: 12px;
    margin-bottom: 8px;
    height: 30px;
    width: 30px;
    border: 1px solid #757575;
    cursor: pointer;
    text-align: center;
    line-height: 28px;
    font-size: 8pt;
}

.clientPortLabel {
    float: left;
    margin: 10px 0px 0px 0px;
    height: 20px;
    width: 30px;
    font-size: 8pt;
    text-align: center;
}

.clientPortButton {
    float: left;
    margin-left: 0px;
    margin-right: 12px;
    margin-bottom: 8px;
    height: 40px;
    width: 30px;
    border: 1px solid #757575;
    cursor: pointer;
    text-align: center;
    line-height: 28px;
    font-size: 8pt;
}

    .clientPortButton .head {
        position: relative;
        top: 0px;
        left: 0px;
        right: 0px;
        height: 26px;
        line-height: 25px;
        text-align: center;
        font-size: 8pt;
        cursor: pointer;
    }

    .clientPortButton .base {
        position: relative;
        bottom: 0px;
        left: 0px;
        right: 0px;
        height: 10px;
        line-height: 3px;
        text-align: center;
        background-color: #000;
        border-top: 1px solid #757575;
        cursor: pointer;
    }

.portEnabled {
    background-color: #252525;
    cursor: pointer;
}

.portDisabled {
    background-color: #757575;
    cursor: default;
}


.interface {
    float: left;
    margin-left: 0px;
    margin-bottom: 8px;
    height: 32px;
    width: 30px;
}

    .interface .body {
        position: relative;
        top: 0px;
        left: 0px;
        right: 0px;
        height: 26px;
        line-height: 25px;
        text-align: center;
        font-size: 8pt;
        cursor: pointer;
        border: 1px solid #757575;
    }

    .interface .foot {
        position: relative;
        bottom: 0px;
        left: 0px;
        right: 0px;
        height: 12px;
        line-height: 3px;
        text-align: center;
        background-color: #000;
        border-left: 1px solid #757575;
        border-right: 1px solid #757575;
        border-bottom: 1px solid #757575;
        cursor: pointer;
    }

.interfaceLabel {
    float: left;
    margin: 10px 12px 0px 0px;
    height: 20px;
    width: 30px;
    font-size: 8pt;
    text-align: center;
}

.interfaceEnabled {
    background-color: #252525;
    cursor: pointer;
}

.interfaceDisabled {
    background-color: #757575;
    cursor: default;
}

.visible {
    display: block;
}

.hidden {
    display: none;
}
/* DivTable.com */
.divTable {
    display: table;
    width: 100%;
}

.divTableRow {
    display: table-row;
}

.divTableHeading {
    display: table-header-group;
}

.divTableCell, .divTableHead {
    display: table-cell;
    padding: 3px 0px;
}

.divTableHeading {
    display: table-header-group;
}

.divTableFoot {
    display: table-footer-group;
}

.divTableBody {
    display: table-row-group;
}


.pull-right {
    float: right;
}

.card-container .row {
    display: -ms-flexbox;
    display: flex;
    margin: 0 5px 10px;
}

.card-container .field {
    position: relative;
    width: 100%;
    height: 50px;
    margin: 0 10px;
}

    .card-container .field.half-width {
        width: 50%;
    }

.card-container .baseline {
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    bottom: 0;
    /*background-color: #cfd7df;*/
    background-color: #888888;
    transition: background-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.card-container label {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 8px;
    /*color: #cfd7df;*/
    color: #c0c2c4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform-origin: 0 50%;
    cursor: text;
    transition-property: color, transform;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

.card-container .input {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    padding-bottom: 7px;
    /*color: #32325d;*/
    color: #fff;
    background-color: transparent;
}

    .card-container .input::-webkit-input-placeholder {
        color: transparent;
        transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .card-container .input::-moz-placeholder {
        color: transparent;
        transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .card-container .input:-ms-input-placeholder {
        color: transparent;
        transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .card-container .input.StripeElement {
        opacity: 0;
        transition: opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        will-change: opacity;
    }

    .card-container .input.focused,
    .card-container .input:not(.empty) {
        opacity: 1;
    }

        .card-container .input.focused::-webkit-input-placeholder,
        .card-container .input:not(.empty)::-webkit-input-placeholder {
            /*color: #cfd7df;*/
            color: #c0c2c4;
        }

        .card-container .input.focused::-moz-placeholder,
        .card-container .input:not(.empty)::-moz-placeholder {
            /*color: #cfd7df;*/
            color: #c0c2c4;
        }

        .card-container .input.focused:-ms-input-placeholder,
        .card-container .input:not(.empty):-ms-input-placeholder {
            /*color: #cfd7df;*/
            color: #c0c2c4;
        }

        .card-container .input.focused + label,
        .card-container .input:not(.empty) + label {
            /*color: #aab7c4;*/
            color: #c0c2c4;
            transform: scale(0.85) translateY(-25px);
            cursor: default;
        }

        .card-container .input.focused + label {
            /*color: #24b47e;*/
            color: #b8d432;
        }

    .card-container .input.invalid + label {
        /*color: #e25950;*/
        color: #fb274a;
    }

    .card-container .input.focused + label + .baseline {
        /*background-color: #24b47e;*/
        background-color: #b8d432;
    }

    .card-container .input.focused.invalid + label + .baseline {
        /*background-color: #e25950;*/
        background-color: #fb274a;
    }

.card-container input, .card-container button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    border-style: none;
}

    .card-container input:-webkit-autofill {
        -webkit-text-fill-color: #e39f48;
        transition: background-color 100000000s;
        -webkit-animation: 1ms void-animation-out;
    }

.card-container .StripeElement--webkit-autofill {
    background: transparent !important;
}

.card-container input, .card-container button {
    -webkit-animation: 1ms void-animation-out;
}

.card-container button {
    display: block;
    width: calc(100% - 30px);
    height: 40px;
    margin: 40px 15px 0;
    /*background-color: #24b47e;*/
    background-color: #b8d432;
    border-radius: 4px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
}

.card-container .error svg {
    margin-top: 0 !important;
}

    .card-container .error svg .base {
        /*fill: #e25950;*/
        fill: #fb274a;
    }

    .card-container .error svg .glyph {
        fill: #fff;
    }

.card-container .error .message {
    /*color: #e25950;*/
    color: #fb274a;
}

.card-container .success .icon .border {
    /*stroke: #abe9d2;*/
    stroke: #b8d432;
}

.card-container .success .icon .checkmark {
    /*stroke: #24b47e;*/
    stroke: #b8d432;
}

.card-container .success .title {
    /*color: #32325d;*/
    color: #1262a4;
    font-size: 16px !important;
}

.card-container .success .message {
    /*color: #8898aa;*/
    color: #c0c2c4;
    font-size: 13px !important;
}

.card-container .success .reset path {
    /*fill: #24b47e;*/
    fill: #b8d432;
}

.payment-spinner {
    display: inline-block;
    margin-top: 15px;
    margin-bottom: 15px;
}

    .payment-spinner:after {
        content: " ";
        display: block;
        width: 46px;
        height: 46px;
        margin: 1px;
        border-radius: 50%;
        border: 5px solid #4DC0D6;
        border-color: #666666 transparent #666666 transparent;
        animation: lds-dual-ring 1.2s linear infinite;
        margin-left: auto;
        margin-right: auto;
    }

.lds-dual-ring {
    display: inline-block;
    width: 100%;
    opacity: 0.8;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

    .lds-dual-ring:after {
        content: " ";
        display: block;
        width: 46px;
        height: 46px;
        margin: 1px;
        border-radius: 50%;
        border: 5px solid #4DC0D6;
        border-color: #666666 transparent #666666 transparent;
        animation: lds-dual-ring 1.2s linear infinite;
        margin-left: auto;
        margin-right: auto;
    }

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

    100% {
        transform: rotate(360deg);
    }
}


.small-button {
    float: left;
    border: 1px solid #515151;
    margin-top: 10px;
    height: 26px;
    width: 45px;
    line-height: 23px;
    text-align: center;
    cursor: pointer;
    font-size: 8pt;
    margin-left: 5px;
    color: #ffffff;
    line-height: 24px;
}

    .small-button .disabled {
        cursor: none;
        color: #252525;
    }

.toggled {
    background-color: #00bcf2;
}


.invoice-item-header {
    font-weight: bold;
}

    .invoice-item-header:not(.jqx-grid-cell-hover), .jqx-widget .invoice-item-header:not(.jqx-grid-cell-hover) {
        color: #B8D432;
    }



.cream {
    color: #ffffff;
    background-color: #313131;
}

    .cream:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .green:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
        color: #ffffff;
        background-color: #313131;
    }


.green {
    color: black\9;
    background-color: #b6ff00\9;
}

.yellow {
    color: black\9;
    background-color: yellow\9;
}

.red {
    color: black\9;
    background-color: #e83636\9;
}

.inherited {
    font-style: italic;
}

.Inherited {
    font-style: italic;
}

.notPublished {
    color: #ffc30c !important;
}
.Direct {
    font-weight: bold;
}

.orange-cell {
    font-style: italic;
    color: orange !important;
}

.profit-and-loss-cell {
    border-right: 1px solid rgb(56, 56, 56);
}

.green:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .green:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
    color: black;
    background-color: #b6ff00;
}

.yellow:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .yellow:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
    color: black;
    background-color: yellow;
}

.red:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .red:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
    color: black;
    background-color: #e83636;
}


.filter-button {
    border: 1px solid #515151;
    text-align: center;
    line-height: 24px;
    background-color: #3e3e42;
    cursor: pointer;
}

.filter-button-blue {
    background-color: #00bcf2;
}

.filter-button-grey {
    background-color: #3e3e42;
}

.count-badge {
    position: relative;
    color: #FFC30C;
    font-size: 7pt;
    /*background-color: #777474;*/
    /*border: 1px solid #777474;*/
    /*border-radius: 10px;*/
    padding: 0px 6px 1px 5px;
    line-height: 13px;
    margin-right: 0px;
    top: 5px
}


/* Fullscreen (Device Maps) */
.fullscreen_hide {
    display: none !important;
}

.fullscreen_body {
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #252525;
}

.fullscreen_menu {
    top: 0 !important;
}

.fullscreen_view {
    top: 60px !important;
}
/* End Fullscreen (Device Maps) */


.lockMapButtonAlert i, .lockMapButtonAlert p {
    color: #fb274a !important;
}

.interface-service {
    /*border-bottom: 1px solid #383838;*/
    height: 35px;
    width: 100%;
    cursor: default;
}
/*.interface-service:hover {
        background-color: #505050;
    }*/



.interface-core {
    float: left;
    margin-left: 0px;
    margin-right: 12px;
    margin-bottom: 8px;
    height: 42px;
    width: 42px;
}

    .interface-core .body {
        position: relative;
        top: 0px;
        left: 0px;
        right: 0px;
        height: 26px;
        line-height: 25px;
        text-align: center;
        font-size: 8pt;
        cursor: pointer;
        border: 1px solid #757575;
    }


.interfaceLabelCode {
    float: left;
    margin: 10px 12px 0px 0px;
    height: 20px;
    width: 42px;
    font-size: 7pt;
    text-align: center;
}

.interfaceEnabled {
    background-color: #252525;
    cursor: pointer;
}

.interfaceDisabled {
    background-color: #757575;
    cursor: default;
}

.interface-link-config {
    float: right;
    width: 10px;
    color: #616161;
    margin-right: 15px;
    cursor: pointer;
    margin-top: 10px;
    font-size: 15px;
}

.interface-link-delete {
    float: right;
    width: 10px;
    color: #616161;
    margin-right: 10px;
    cursor: pointer;
    margin-top: 8px;
    font-size: 18px;
}

.interface-link-config:hover {
    color: #FFFFFF;
}

.interface-link-delete:hover {
    color: #FFFFFF;
}

.interface-address {
    color: #616161;
}

    .interface-address:hover {
        color: #FFFFFF;
    }

.interface-link-nating {
    float: right;
    width: 10px;
    color: #616161;
    margin-right: 15px;
    cursor: pointer;
    margin-top: 10px;
    font-size: 15px;
}

.service-overview-widget {
    margin-top: 10px;
    float: left;
}

.widget-blue {
    background-color: rgb(18, 98, 164);
    color: #fff;
}

.widget-yellow {
    background-color: rgb(255, 195, 12);
    color: #000;
    font-weight: bold;
}

.service-overview-widget .title {
    width: 100%;
    height: 60px;
    vertical-align: bottom;
    text-align: center;
    font-size: 8pt;
    padding-top: 10px;
    white-space: normal;
    line-height: 15px;
}

.service-overview-widget .value {
    width: 100%;
    line-height: 50px;
    vertical-align: top;
    font-size: 16pt;
    text-align: center;
    margin-top: 9px;
}

.device-jobs-sqlssh-editor-show {
    transition: all linear 0.3s;
    right: 190px;
    top: 3px;
    bottom: 1px;
    left: 0px;
}

.device-jobs-sqlssh-editor-hide {
    /*transition: all linear 0.3s;*/
    right: 0px;
    top: 3px;
    bottom: 1px;
    left: 0px;
}

.device-jobs-sqlssh-variables-show {
    transition: all linear 0.3s;
    right: 40px;
    top: 3px;
    bottom: 1px;
    width: 138px;
}

.device-jobs-sqlssh-variables-hide {
    transition: all linear 0.3s;
    right: -140px;
    top: 3px;
    bottom: 1px;
    width: 138px;
}

.interface-wireless {
    width: 100%;
    line-height: 20px;
    vertical-align: middle;
    text-align: center;
    border-left: 1px solid #515151;
    border-bottom: 1px solid #515151;
    border-right: 1px solid #515151;
    background-color: #000;
    cursor: pointer;
}

.search-result-json-row:hover {
    background-color: rgb(37, 37, 37); /*rgb(81, 81, 81);*/
}



.animate-left {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}


.pretty {
    transform: translateX(-400px);
}

.selector {
    transform: translateX(-550px);
}

.chooser {
    transform: translateX(-500px);
}

.alternate-button {
    line-height: 35px;
    text-align: center;
    border: 1px solid #383838;
    cursor: pointer;
}

    .alternate-button:hover {
        background-color: #000;
        color: #fff;
    }

.active-property {
    color: #fff;
    font-size: 8pt;
}

.inactive-property {
    color: #a9a9a9;
    font-size: 8pt;
}


.online-cell {
    color: #B8D432 !important;
    font-weight: bold;
}


.checkout-button {
    background-color: #B8D432;
    border: 1px solid #fff;
    cursor: pointer;
    margin: 5px 0px 5px 0px;
    text-align: center;
    font-weight: bold;
    line-height: 30px;
    color: #000;
}

.checkout-disabled {
    background-color: #252525;
    border: 1px solid #383838;
    cursor: default;
    color: #383838;
}




#spotlight-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
}

.spotlight {
    position: relative;
    top: 300px;
    margin-left: auto;
    margin-right: auto;
    width: 700px;
    min-height: 40px;
    max-height: 400px;
    overflow: hidden;
    z-index: 2000;
    border-radius: 5px 5px 5px 5px;
    background-color: #000;
}

#spotlight-scroller {
    overflow: auto;
    margin-top: 40px;
    opacity: 0.8;
    max-height: 360px;
}

#spotlight-search {
    /*display: block;*/
    width: 100%;
    height: 40px;
    border: none;
    outline: none;
    font-size: 13px;
    color: black;
    background-color: #ffffff;
    /*background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjIuNyAyMi41IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMi43IDIyLjUiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxjaXJjbGUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2NzY2IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgY3g9IjguMSIgY3k9IjguNCIgcj0iNi44Ii8+PGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2NzY2IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjEzLjIiIHkxPSIxMi45IiB4Mj0iMjEuNSIgeTI9IjIxLjQiLz48L3N2Zz4=);*/
    padding: 0 10px;
}


.spotlight-result:hover {
    background-color: #4DC0D6;
}

div.spotlight-menu ul {
    border-radius: 05px;
    position: relative;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    /* overflow: hidden; */
    background-color: #a9bcba;
    /*z-index: -1; */
}

div.spotlight-menu > ul::after {
    clear: both;
    display: table;
    content: ' ';
    overflow: hidden;
}


div.spotlight-menu li {
    float: left;
}

    div.spotlight-menu li a {
        display: inline-block;
        text-align: center;
        margin: 0px;
        padding: 10px 10px;
        color: white;
    }

        div.spotlight-menu li a:hover {
            background-color: #879694;
            color: blue;
        }
/* SECTION WITH THE DROPDOWN CONTENT FOR THE MENU */

.dropdowncontent a:hover {
    background-color: #cbd6d5
}

.dropdown:hover .dropdowncontent {
    display: block;
}

div.dropdowncontent {
    display: none;
    /*	position: absolute; */
    background-color: #a9bcba;
    width: 115px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

    div.dropdowncontent a {
        color: red;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: right;
        overflow: auto;
    }

div.menu > ul > li {
    position: relative;
}

.dropdowncontent {
    position: absolute;
    top: 100%;
}

li.dropdown:hover div.dropdowncontent {
    display: block;
}

#button1_popup,
#button2_popup {
    display: none;
    border: 1px solid black;
    width: 220px;
    height: 100px;
    position: absolute;
    right: 0;
}

.active-chart {
    color: deepskyblue;
    font-weight: bold;
}


@-webkit-keyframes spinner { /* For Safari */
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.spin-it {
    -webkit-animation: spinner 1s linear infinite; /* Safari */
    animation: spinner 1s linear infinite;
}


.jqx-kanban-column-header-azure, .jqx-kanban-column-header-collapsed {
    border: 2px solid #383838;
}


.jqx-kanban-item {
    border: 1px solid #383838;
    box-shadow: none;
    margin: 0px 0px 5px 0px !important;
}


.jqx-kanban-item-footer {
    border: 1px solid #333 !important;
    width: 95%;
    margin-left: 8px;
    border-radius: 8px;
    padding-right: 10px;
    margin-top: 0px !important;
}

.jqx-kanban-item-text {
    font-size: 12px;
    padding-right: 35px;
    padding-left: 10px;
}

.jqx-kanban-item-avatar {
    top: 5px;
    right: 5px;
}

.jqx-kanban-item-color-status {
    width: 5px;
}

.jqx-kanban-item-avatar {
    background-color: transparent;
    color: #FFC30C;
    font-weight: bold;
}



/* Project Kanban */

.kanban-scroll-container {
    position: relative; /* Use relative positioning */
    overflow-y: hidden; /* Hide vertical scrolling */
    overflow-x: auto; /* Enable horizontal scrolling */
    white-space: nowrap; /* Prevent wrapping of columns */
    width: 100%; /* Full width of the visible container */
    height: 100%;
    white-space: nowrap;
}

.jqx-kanban {
    display: inline-block;
    width: 200%; /* Adjust this to be wide enough for all columns */
}


.jqx-widget-header-projects {
    background-color: #252525 !important;
    color: white;
    text-transform: uppercase;
    border: none !important;
}

.jqx-kanban-column-header-projects {
    background-color: #252525 !important;
    margin: 0px !important;
    border: none !important;
    padding-left: 10px !important;
}

.jqx-kanban-column-container {
    background-color: #252525 !important;
    margin: 0px !important;
    border: none;
}

.jqx-kanban-column {
    border: none !important;
    width: 260px !important;
    display: inline-block !important;
}


    .jqx-kanban-column:first-of-type {
        border: none;
    }

.jqx-kanban-column-container::-webkit-scrollbar {
    width: 5px; /* Make the scrollbar narrow */
}

.jqx-kanban-column-container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1); /* Very light thumb */
    border-radius: 10px;
}

.jqx-kanban-column-container::-webkit-scrollbar-track {
    background: transparent; /* Invisible track */
}

.jqx-kanban-item-projects {
    background-color: #252525 !important;
    color: white;
    margin-left: 0px !important;
    margin-top: 0px !important;
    border: none !important;
    box-shadow: none;
    width: 260px;
}

.jqx-kanban-item-text {
    color: #FFC30C;
    padding-top: 3px;
    padding-left: 8px !important;
    padding-right: 6px !important;
}

.jqx-kanban-item-footer-projects {
    /*    background-color: #252525 !important;
    margin-top:0px !important;
    width:90% !important;
    margin-left:10px !important;
    border-top : none !important;*/
}

.jqx-kanban-item-avatar-projects {
    background-color: #252525 !important;
}

.jqx-kanban-item-color-status {
    background-color: #252525 !important;
}

.jqx-kanban-item label {
    margin: 0; /* Reset margin */
    padding: 0; /* Reset padding */
    display: inline-block; /* Ensure the labels are displayed correctly */
    line-height: 4px;
    vertical-align: text-top;
    font-size: 11px;
    color: floralwhite;
    max-width: calc(100% - 20px); /* Ensure the text doesn't overflow (adjust value as needed) */
}

/* Card container */
.project-header-card {
    background-color: #222; /* Background color */
    border: 1px solid #333; /* Border */
    border-radius: 8px; /* Rounded corners */
    padding: 10px; /* Spacing inside the card */
    margin-bottom: 0px; /* Space between cards */
    width: 100%; /* Full width of the container */
}

/* Flexbox container for content */
.project-header-card-content {
    display: flex; /* Use flexbox */
    justify-content: space-between; /* Align content to the sides */
    align-items: flex-start /* Align to the top */
}

/* Left section (badge and customer info) */
.project-header-left-section {
    display: flex; /* Flexbox to align badge and text horizontally */
    align-items: center; /* Vertically center items */
    flex: 1; /* Allow left section to take up available space */
    min-width: 0; /* Prevent flexbox item from growing beyond its container */
}

/* Badge styling */
.project-header-badge {
    background-color: #555; /* Badge background */
    border-radius: 50%; /* Make it circular */
    color: white; /* Text color */
    width: 27px; /* Fixed width */
    height: 25px; /* Fixed height */
    display: inline-flex; /* Use flexbox to center content */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    font-size: 10px; /* Text size inside the badge */
    text-align: center; /* Center the text in the badge */
    margin-right: 10px; /* Space between badge and customer info */
}

/* Customer name and location */
.project-header-customer-info {
    display: flex;
    flex-direction: column; /* Stack customer name and location vertically */
    flex: 1; /* Allow customer info to take up available space */
    overflow: hidden; /* Hide any overflow */
    white-space: nowrap; /* Prevent text wrapping */
    text-overflow: ellipsis; /* Show ellipsis when text overflows */
}

.project-header-customer-name {
    color: #ffc107; /* Yellow customer name */
    font-size: 11px; /* Font size for customer name */
    overflow: hidden; /* Hide the overflow */
    text-overflow: ellipsis; /* Show ellipsis when text overflows */
    max-width: 100%;
}

.project-header-customer-location {
    color: #bbb; /* Lighter color for the location */
    font-size: 11px; /* Smaller font for location */
    overflow: hidden; /* Hide the overflow */
    text-overflow: ellipsis; /* Show ellipsis when text overflows */
    max-width: 100%; /* Set a max-width for the order number container (adjust as needed) */
}

/* Right section (order number and checkmark) */
.project-header-right-section {
    display: flex;
    align-items: center; /* Vertically center order number and checkmark */
    justify-content: flex-end; /* Push content to the right */
    margin-left: 10px; /* Add space between the name and the order number */
}

.project-header-order-number {
    color: #ffc107; /* Yellow order number */
    font-size: 11px;
    white-space: nowrap; /* Prevent text from wrapping */
}

.project-header-checkmark {
    color: green; /* Green checkmark */
    font-size: 12px;
    padding-left: 3px;
}


/********************* Staff Scheduler ******************/
.project-scheduler {
    display: flex;
    position: absolute;
    top: 41px;
    left: 20px;
    right: 20px;
    bottom: 20px;
}

.dateheader {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex; /* Enable Flexbox */
    justify-content: center; /* Horizontally center the child elements */
    align-items: center;
    margin-left: -100px;
}

    .dateheader div {
        margin-right: 10px;
    }


.project-scheduler .schedule {
    /* width: 1000px; */

    position: absolute;
    top: 10px;
    left: 10px;
    right: 275px;
    bottom: 10px;
    overflow-y: scroll;
}

.salesOrders {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 10px;
    padding: 10px;
    width: 230px;
    border-left: 1px solid #666666;
    overflow-y: scroll;
}


    .salesOrders .datePicker {
        display: flex;
    }

.project-scheduler .schedule table {
    table-layout: fixed;
    width: 100%;
}

.project-scheduler .schedule th {
    padding: 10px;
    text-transform: uppercase;
    font-weight: normal;
}

    .project-scheduler .schedule th:first-child {
        text-align: left;
        width: 150px;
    }


.project-scheduler .schedule td {
    padding: 5px;
    border: 1px solid gray;
    min-width: 125px;
    height: 15px;
}

.project-scheduler .placedSalesOrder {
    text-align: left;
    ;
    color: tan;
}

.project-scheduler .schedule td.selected {
    background-color: blue;
    color: white !important;
}


.project-scheduler .schedule td div {
    overflow: hidden;
    text-overflow: ellipsis;
}

    .project-scheduler .schedule td div.holiday {
        color: green;
        cursor: default;
        text-align: center;
        text-transform: uppercase;
    }

    .project-scheduler .schedule td div.annualLeave {
        color: #ffc30c;
        cursor: default;
        text-align: center;
        text-transform: uppercase;
    }

    .project-scheduler .schedule td div.workHistory {
        color: darkolivegreen;
        cursor: default;
        text-align: left;
    }


.project-scheduler .schedule .staffcolumn {
    padding: 5px;
    border: none;
}

.project-scheduler .salesOrders .salesOrder {
    padding: 10px;
    display: flex; /* Enables Flexbox */
    justify-content: center; /* Centers text horizontally */
    align-items: center; /* Centers text vertically */
    border: 1px solid #666666;
    margin-top: 5px;
    height: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    box-sizing: border-box;
}



.dropzone-hover {
    background-color: blue;
}

.salesOrderdropped {
    /*    text-align:center;    
    width: 100%;    
    overflow: clip;
    padding:0px 3px;
*/
    /*  max-width:100%;
    max-height:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    padding:0px;
    white-space:nowrap;
    display:inline-block;*/
}


.dropzone {
    padding: 0px 3px;
}







.buttons-container .input-box button:hover {
    background-color: white;
}


button.tablinks:hover {
    background-color: #666;
}

button.tablinks {
    background-color: #666666;
    color: #dddddd;
}

    button.tablinks.active {
        background-color: #FFFF99;
        color: #252525;
    }

    button.tablinks.btn-agent.active {
        background-color: #4F4574;
        color: #dddddd;
    }

#event-hr hr {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}


.tiblock {
    align-items: center;
    display: flex;
    height: 17px;
}

.ticontainer .tidot {
    background-color: #90949c;
}

.tidot {
    -webkit-animation: mercuryTypingAnimation 1.5s infinite ease-in-out;
    border-radius: 2px;
    display: inline-block;
    height: 4px;
    margin-right: 2px;
    width: 4px;
}

@-webkit-keyframes mercuryTypingAnimation {
    0% {
        -webkit-transform: translateY(0px)
    }

    28% {
        -webkit-transform: translateY(-5px)
    }

    44% {
        -webkit-transform: translateY(0px)
    }
}

.tidot:nth-child(1) {
    -webkit-animation-delay: 200ms;
}

.tidot:nth-child(2) {
    -webkit-animation-delay: 300ms;
}

.tidot:nth-child(3) {
    -webkit-animation-delay: 400ms;
}



.processSpinner:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25px;
    height: 25px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    border: 2px solid #FFF;
    border-top-color: #000;
    animation: spinner .8s linear infinite;
}

@keyframes processSpinner {
    to {
        transform: rotate(360deg);
    }
}


.tools-icon {
    line-height: 50px !important;
    font-size: 25px;
    color: #FFFFFF;
    width: 55px;
    text-align: center;
    border-left: 1px solid #515151;
}

    .tools-icon:hover {
        color: #FF4E02
    }


.comms-icon {
    line-height: 50px !important;
    font-size: 25px;
    color: #888888;
    width: 50px;
}

.comms-icon-lb {
    border-left: 1px solid #515151;
    width: 20px;
}

.comms-icon-active {
    color: #fff;
}

.comms-icon[data-badge]:after {
    content: attr(data-badge);
    position: relative;
    top: -15px;
    right: 5px;
    font-size: 8px;
    font-weight: bold;
    background-color: red;
    color: white;
    padding: 5px 7px;
    text-align: center;
    border-radius: 20px;
}

.fa-blink {
    color: #fff;
    opacity: 0;
    animation: anima 1s ease infinite;
}

@keyframes anima {
    to {
        opacity: 1;
    }
}





.roster-container {
    position: absolute;
    top: 42px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.roster-period {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 40px;
    right: 0px;
    border-bottom: 1px solid #383838;
}


.roster-week {
    position: absolute;
    top: 41px;
    left: 0px;
    height: 60px;
    right: 0px;
    display: flex;
    border-bottom: 1px solid #383838;
}

.roster-week-time {
    flex: 0 0 75px;
}

.roster-week-head {
    flex: 1;
    border-left: 1px solid #383838;
}

.roster-week-day {
    text-align: center;
    line-height: 30px;
}

.roster-week-date {
    text-align: center;
    font-size: 15px;
}

.roster-hours-container {
    position: absolute;
    top: 101px;
    left: 0px;
    bottom: 60px;
    right: 0px;
    overflow-x: hidden;
    overflow-y: auto;
}

.roster-hour-row {
    display: flex;
    border-bottom: 1px solid #383838;
    line-height: 35px;
}

.roster-hour-time {
    flex: 0 0 75px;
}

.roster-hour-day {
    flex: 1;
    border-left: 1px solid #383838;
}

/*------------------------------------ lachlan is a gangsta -----------------------------------------------*/

.diagnostic {
    background: #404041;
    border-radius: 10px;
    position: absolute;
    top: 130px;
    left: 50px;
    width: 700px;
    height: 225px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.diagnostic-interface {
    border-radius: 10px;
    width: 80px;
    height: 60px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 12px;
    padding: 5px;
    text-align: center;
    color: black;
}

.diagnostic-connected {
    background: #404041;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    position: absolute;
    top: 48px;
    margin-left: 53px;
}

    .diagnostic-connected:hover::before {
        content: attr(data-title);
        position: absolute;
        bottom: 45px;
        padding: 10px;
        background: white;
        color: black;
        font-size: 14px;
        white-space: nowrap;
        border-radius: 10px;
        right: 0%;
    }

.diagnostic-name {
    display: flex;
    justify-content: center;
    padding-bottom: 5px;
}

.diagnostic-lineSpeed {
    display: flex;
    justify-content: center;
    font-size: 12px;
    margin-bottom: 10px;
}

.diagnostic-ssid {
    display: flex;
    justify-content: center;
    font-size: 12px;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .diagnostic-ssid:hover::before {
        content: attr(data-title);
        position: absolute;
        bottom: 45px;
        padding: 10px;
        background: white;
        color: black;
        font-size: 14px;
        white-space: pre-line;
        border-radius: 10px;
        right: 2%;
    }


.diagnostic-results {
    background: #404041;
    position: absolute;
    top: 400px;
    width: 700px;
    left: 50px;
    padding: 20px;
    overflow: auto;
    padding-bottom: 25px;
    border-radius: 10px;
}

.diagnostic-results-icon {
    padding: 20px;
    display: inline-flex;
    font-size: 22px;
    width: 60px;
}

.diagnostic-results-name {
    margin-left: 20px;
    font-size: 15px;
    display: inline;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.diagnostic-results-comment {
    margin-left: 80px;
    font-size: 12px;
    display: block;
    white-space: pre-wrap;
    word-wrap: break-word;
    width: 65%;
}

.diagnostic-results-command {
    width: 70px;
    height: 30px;
    background: #646466;
    color: white;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    float: right;
    margin-top: 15px;
}

.diagnostic-scan-button {
    width: 70px;
    height: 30px;
    background: #646466;
    color: white;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}

.loader {
    border: 6px solid #f3f3f3; /* Light grey */
    border-top: 6px solid #404041;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
    position: absolute;
    top: 358px;
    left: 390px;
    z-index: 10;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.plan-information {
    display: flex;
    flex-wrap: wrap;
    gap: 5px; /*Adjust the gap between items as needed */
}

    .plan-information .column {
        flex: 0 0 31%; /* Grow | Shrink | Basis */
        /* Additional styles for better visualization */
        text-align: center;
        padding: 5px;
        box-sizing: border-box;
    }

    .plan-information .plan {
        border: 2px solid var(--rush-accent, red);
        border-radius: 30px;
        width: 100%;
        padding: 20px;
        margin-top: 20px;
        background-color: white;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.6); /* Example shadow */
        width: 235px;
        height: 295px;
    }

        .plan-information .plan .header {
            font-size: 20px;
            background-color: var(--rush-accent, red);
            color: white;
            text-align: center;
            border-radius: 28px 28px 0 0; /* Top left and top right radius */
            padding: 10px;
            margin: -20px; /* To offset the parent box's padding */
            margin-bottom: 20px; /* Spacing between the header and the content below */
        }

        .plan-information .plan .speed {
            font-size: 20px;
            text-align: center;
            padding: 0px 0px 10px 0px;
            margin: 0px;
            font-weight: bold;
            color: #000;
        }

        .plan-information .plan .data {
            font-size: 14px;
            text-align: center;
            padding: 0px 0px 20px 0px;
            margin: 0px;
            border-bottom: 1px solid #000;
            font-weight: bold;
            color: #000;
        }


        .plan-information .plan .price {
            font-size: 30px;
            text-align: center;
            padding: 10px 0px 0px 0px;
            margin: 0px 50px;
            color: var(--rush-accent, red);
            font-weight: bold;
        }

        .plan-information .plan .month {
            font-size: 14px;
            text-align: center;
            padding: 10px 0px 5px 0px;
            color: #666666;
        }

        .plan-information .plan .cis {
            font-size: 12px;
            text-align: center;
            padding: 25px 0px 0px 0px;
            color: #666666;
        }

        .plan-information .plan .promotions {
            font-size: 14px;
            line-height: 18px;
            text-align: center;
            padding: 15px 0px 0px 0px;
            margin: 10px 5px 0px 5px;
            border-top: 1px solid #000;
            color: #000;
            white-space: normal;
        }

        .plan-information .plan .promoperiod {
            font-size: 10px;
            text-align: center;
            padding: 10px 0px 0px 0px;
            margin: 0px 5px 0px 5px;
            color: #000;
            font-weight: bold;
        }

/* vlan manager */
.vlans {
    width: 100%; /* Full width of the parent container */
    height: 100%; /* Full height of the parent container */
    display: flex;
    flex-direction: column; /* Ensure toolbar is on top and the main content below */
    color: white;
    font-family: Helvetica, Arial, sans-serif;
}


    .vlans .toolbar-container {
        width: 100%; /* Ensure full width */
        height: 50px; /* Fixed height */
        display: flex;
        justify-content: center; /* Distribute buttons evenly */
        align-items: center; /* Center buttons vertically */
        border-bottom: 1px solid #383838;
    }


    .vlans .main-container {
        flex-grow: 1; /* Take up remaining height below toolbar */
        width: 1500px; /* Make sure it takes the full width */
        display: flex; /* Display VLAN columns horizontally */
        position: relative;
        margin-top: 51px;
    }

.vlan-container {
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

    .vlan-container .vlan-container-header {
        width: 100%;
        margin-left: 25px;
    }


    .vlan-container .vlan-container-body {
        padding-bottom: 30px;
    }




    .vlan-container .switch-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 5px;
        padding: 5px;
        background-color: transparent;
        border: 1px solid white;
        margin-top: 15px;
        margin-right: 10px;
    }

        .vlan-container .switch-container .switchheader {
            display: flex;
            width: 100%;
            justify-content: space-between;
            padding: 2px;
            margin-bottom: 5px;
        }

            .vlan-container .switch-container .switchheader div {
                font-size: 10px;
                color: #ffc30c;
            }

        .vlan-container .switch-container .oddportrows, .vlan-container .switch-container .evenportrows {
            display: flex;
            justify-content: center;
            margin: 5px 0;
        }

        .vlan-container .switch-container .interfaces {
            display: flex;
        }

            .vlan-container .switch-container .interfaces div,
            .vlans .toolbar-container div {
                width: 17px;
                height: 17px;
                margin: 3px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 10px;
                color: white;
                cursor: pointer;
            }


        .vlan-container .switch-container .port-number {
            font-size: 9px;
            margin-left: 1px;
            width: 22px;
            text-align: center;
            color: white;
            font-family: Helvetica, Arial, sans-serif;
        }


.vlans .tagged,
.vlans .toolbar-container div.tagged {
    background-color: orange;
}

    .vlans .tagged::before {
        content: 'T'
    }


.vlans .untagged,
.vlans .toolbar-container div.untagged {
    background-color: blue;
}

    .vlans .untagged::before {
        content: 'U'
    }

.vlans .empty,
.vlans .toolbar-container div.empty {
    border: 1px solid white;
}

.vlans .toolbar-container div.toggle {
    border: 1px solid white;
}

    .vlans .toolbar-container div.toggle::before {
        content: 'X'
    }

.vlans .selected-toolbar {
    border: 2px solid #FFD700; /* Gold color for the selected button */
    background-color: #333; /* Darken background to indicate selection */
    border-radius: 4px; /* Optional: Rounded corners */
}

@keyframes fadeToTransparent {
    from {
        background-color: #ffc30c;
    }

    to {
        background-color: transparent;
    }
}

/* Apply the animation class */
.highlight-fade {
    animation: fadeToTransparent 1.5s forwards; /* 1.5s to match the 500ms delay + 1s fade */
}

/* Tech Schedule */
/* ====== Tech Schedule Layout ====== */
.tech-schedule-layout {
    display: flex;
    flex-direction: row;
    height: 100%;
    margin-top: 41px;
}

.tech-schedule-wrapper {
    flex: 1;
    overflow: auto;
    position: relative;
}

.tech-schedule-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tech-schedule-nav {
    width: 100%;
}

.tech-schedule-nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1a1a1a;
    padding: 10px;
    position: sticky;
    top: 0;
    z-index: 5;
}

.tech-schedule-nav-btn {
    background-color: #333;
    color: #fff;
    border: 1px solid #444;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
}

    .tech-schedule-nav-btn:hover {
        background-color: #555;
    }

    .tech-schedule-nav-btn.left {
        margin-right: auto;
    }

    .tech-schedule-nav-btn.right {
        margin-left: auto;
    }

.tech-schedule-nav-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 8px;
}

.tech-schedule-nav-date {
    font-weight: normal;
    font-size: 14px;
    color: #B8D432;
}

.tech-schedule-nav-settings {
    background: none;
    border: none;
    color: #bbb;
    cursor: pointer;
    font-size: 14px;
    font-weight: 100;
    padding: 0;
}

    .tech-schedule-nav-settings:hover {
        color: #fff;
    }

.tech-schedule-time-col,
.tech-schedule-header-time-col {
    background-color: #000;
    color: #fff;
    width: 60px;
    text-align: right;
    padding: 5px 10px;
    font-size: 12px;
    border-bottom: 1px solid #333;
    box-sizing: border-box;
}

.tech-schedule-grid {
    display: grid;
}

.tech-schedule-day-row {
    position: sticky;
    top: 40px;
    z-index: 3;
    height: 25px;
    display: grid;
    background-color: #1a1a1a;
    color: #ccc;
    font-size: 11px;
    border-bottom: 1px solid #333;
}

.tech-schedule-day-cell {
    text-align: left;
    padding: 4px 8px;
    font-size: 11px;
    color: #ccc;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 25px;
}

.today {
    color: #ffc30c;
    font-weight: bold;
}

.tech-schedule-header-row {
    top: 0;
    z-index: 4;
    height: 40px;
    display: grid;
    background-color: #111;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    border-bottom: 2px solid #333;
    position: sticky;
}

.tech-schedule-tech-header {
    padding-left: 10px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: left;
    background-color: #111;
    color: #fff;
    font-weight: bold;
}

.tech-schedule-cell {
    position: relative;
    overflow: visible;
    border-right: 0.5px solid rgba(255, 255, 255, 0.1);
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
}

    .tech-schedule-cell.highlight-slot {
        background-color: rgba(0, 71, 171, 0.4) !important;
        border: 1px solid #3399ff;
    }

    .tech-schedule-cell[data-last-day="true"] {
        border-right: 0.2px solid gray;
        box-sizing: border-box;
    }

.tech-schedule-appointment {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    background-color: #cfead6;
    padding: 4px 6px;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: black;
    cursor: grab;
}

    .tech-schedule-appointment .resize-handle {
        display: none;
    }

    .tech-schedule-appointment.active .resize-handle {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: -2px;
        left: 50%;
        transform: translateX(-50%);
        width: 8px;
        height: 8px;
        background-color: white;
        border: 1px solid #555;
        border-radius: 50%;
        cursor: ns-resize;
        z-index: 20;
        box-shadow: 0 0 2px rgba(0,0,0,0.4);
        pointer-events: auto;
    }

    .tech-schedule-appointment.dragging {
        opacity: 0.6;
    }

    .tech-schedule-appointment.active {
        outline: 2px solid #ffc30c;
        z-index: 15;
    }

.tech-schedule-workorder {
    position: relative;
    background-color: #2a2a2a;
    color: #fff;
    padding: 8px;
    margin-bottom: 6px;
    border: 1px solid #444;
    border-radius: 4px;
    font-size: 12px;
    cursor: grab;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .tech-schedule-workorder .workorder-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }


.tech-schedule-side-panel .tech-schedule-search-wrapper {
    padding: 10px;
}


.tech-schedule-side-panel .tech-schedule-search {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 10px;
    margin: 0 0 10px 0;
    border: 1px solid #515151;
    background-color: #222222;
    color: #fff;
    border-radius: 4px;
}



.tech-schedule-workorder .wo-card {
    position: relative;
    background: #1f1f1f;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 10px 10px 10px 10px;
    margin-bottom: 8px;
    color: #ccc;
}

    .tech-schedule-workorder.wo-card.priority-2 {
        border-left: 3px solid #ff5555; /* red for high */
    }

    .tech-schedule-workorder.wo-card.priority-1 {
        border-left: 3px solid #ffcc00; /* yellow for medium */
    }

    .tech-schedule-workorder.wo-card.priority-0 {
        border-left: 3px solid #5cb85c;
        green for low
    }

.tech-schedule-workorder .wo-title {
    color: #fff;
    margin-bottom: 2px;
}

.tech-schedule-workorder .wo-meta {
    font-size: 12px;
    color: #aaa;
}

.tech-schedule-workorder .wo-type {
}

.tech-schedule-workorder .wo-location {
    font-size: 12px;
    color: #aaa;
    margin-top: 2px;
}

.tech-schedule-workorder .offer-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    background: none;
    border: none;
    cursor: pointer;
    color: #aaa;
    font-size: 16px;
    padding: 4px;
    z-index: 1;
}



.tech-schedule-side-panel {
    width: 220px;
    height: 100%;
    background-color: #1e1e1e;
    color: #fff;
    padding: 10px;
    box-sizing: border-box;
    border-left: 1px solid #444;
    overflow-y: auto;
    max-height: calc(100vh - 60px);
}

    .tech-schedule-side-panel .tech-schedule-search-wrapper {
        padding: 10px;
    }

    .tech-schedule-side-panel .tech-schedule-search {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 6px 10px;
        margin: 0 0 10px 0;
        border: 1px solid #515151;
        background-color: #222222;
        color: #fff;
        border-radius: 4px;
    }


.tech-schedule-side-label {
    font-weight: bold;
    font-size: 12px;
    color: #fff;
    margin-bottom: 10px;
    border-bottom: 1px solid #444;
    padding-bottom: 4px;
}

.tech-schedule-side-panel.offer-btn i {
    color: yellow;
    cursor: pointer;
    margin-left: 6px;
}

.tech-settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

    .tech-settings-row input[type="color"] {
        margin-left: 10px;
        width: 36px;
        height: 24px;
        padding: 0;
        border: none;
        background: none;
    }

.modal-save {
    margin-top: 12px;
    padding: 6px 12px;
    background-color: #444;
    color: #fff;
    border: 1px solid #555;
    border-radius: 4px;
    cursor: pointer;
}

    .modal-save:hover {
        background-color: #555;
    }

.tech-schedule-modal-content {
    padding: 20px;
    background-color: #1e1e1e;
    color: #fff;
    font-size: 13px;
}

.tech-schedule-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 0;
    z-index: 9999;
    box-shadow: 0 0 10px rgba(0,0,0,0.7);
    max-width: 460px;
    width: 40%;
    overflow: hidden;
}

    .tech-schedule-modal h4 {
        margin-bottom: 10px;
    }

/* Input Styling for Edit Modal */
.tech-schedule-modal-content input[type="text"], .tech-schedule-modal-content textarea {
    width: 100%;
    padding: 6px;
    margin-top: 4px;
    margin-bottom: 10px;
    border: 1px solid #444;
    background-color: #2a2a2a;
    color: #fff;
    border-radius: 4px;
    font-size: 13px;
}

.appointment-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6); /* semi-transparent black */
    z-index: 9998;
}

.appointment-edit-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    height: 510px;
    transform: translate(-50%, -50%);
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 20px;
    z-index: 9999;
    box-shadow: 0 0 10px rgba(0,0,0,0.7);
    max-width: 960px;
    min-height: 50%;
    width: 800px;
    overflow: hidden;
    display: flex;
    gap: 20px;
}


    .appointment-edit-dialog .left-column {
        height: 100%;
        width: 40%;
        display: flex;
        flex-direction: column;
        flex: 1;
    }


    .appointment-edit-dialog .right-column {
        height: 100%;
        width: 60%;
    }

    .appointment-edit-dialog .mobile-wrapper {
        display: flex;
        align-items: center;
        gap: 8px; /* Optional: adds space between input and button */
        margin-bottom: 10px;
    }

        .appointment-edit-dialog .mobile-wrapper .sms-mobile {
            background: #1a1a1a;
            border: 1px solid #2f2f2f;
            margin-right: 5px;
            height: 30px;
            color: white;
            padding-left: 5px;
        }

        .appointment-edit-dialog .mobile-wrapper .sms-mobile-label {
            display: flex;
            align-items: center; /* Vertical centering */
            border: 1px solid #2f2f2f;
            padding: 0 8px; /* Horizontal padding */
            border-radius: 4px; /* Optional: to match the input's visual feel */
            height: 30px;
            flex: 1;
        }

    .appointment-edit-dialog .right-column .sms-thread {
        height: 310px;
        overflow-y: auto;
        border: 1px solid #333;
        padding: 8px;
        display: flex;
        flex-direction: column;
    }

    .appointment-edit-dialog .right-column .sms-compose {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 6px;
        margin-top: 5px;
        margin-bottom: 12px;
        width: 100%;
    }

    /* Stack calendar/send vertically */
    .appointment-edit-dialog .right-column .sms-action-buttons {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 6px;
    }

        /* Optional: size buttons nicely */
        .appointment-edit-dialog .right-column .sms-action-buttons button {
            width: 36px;
            height: 36px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0;
            border: none;
            background-color: #444;
            color: white;
            border-radius: 4px;
            cursor: pointer;
        }

    .appointment-edit-dialog .right-column .tab-bar {
        display: flex;
        margin-bottom: 8px;
    }

    .appointment-edit-dialog .right-column .tab-button {
        flex: 1;
        padding: 8px;
        background: #222;
        border: 1px solid #444;
        color: #ccc;
        cursor: pointer;
        font-weight: bold;
        border-bottom: none;
    }

        .appointment-edit-dialog .right-column .tab-button.active {
            background: #111;
            color: #fff;
            border-bottom: 2px solid #ffc30c;
        }

    .appointment-edit-dialog .right-column .tab-content {
        display: none;
    }

        .appointment-edit-dialog .right-column .tab-content.active-tab {
            display: block;
        }

    .appointment-edit-dialog .right-column .appointment-notes-editor {
        width: 100%;
        height: 415px;
        background-color: #1a1a1a;
        color: #f0f0f0;
        border: 1px solid #333;
        border-radius: 4px;
        padding: 8px;
        resize: none;
        overflow-y: auto;
    }

        .appointment-edit-dialog .right-column .appointment-notes-editor img.selected {
            outline: 2px dashed #ffc30c;
            outline-offset: 2px;
            box-shadow: 0 0 4px #ffc30c;
        }


    .appointment-edit-dialog .right-column .sms-input {
        flex: 1 1 auto;
        min-height: 80px;
        max-height: 200px;
        padding: 6px 10px;
        resize: none;
        background-color: #1a1a1a;
        color: #f0f0f0;
        border: 1px solid #333;
        border-radius: 4px;
        font-size: 12px;
        font-family: inherit;
    }

    .appointment-edit-dialog .right-column .sms-send {
        align-self: flex-end;
        background-color: #333;
        color: #e0e0e0;
        padding: 6px 12px;
        font-size: 12px;
        border: 1px solid #444;
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.2s ease;
        min-height: 40px;
    }

        .appointment-edit-dialog .right-column .sms-send:hover {
            background-color: #444;
        }

    .appointment-edit-dialog .right-column .sms-text {
        padding: 6px 10px;
        border-radius: 6px;
        background-color: #2e2e2e;
        color: #d0e9ff;
        word-wrap: break-word;
        white-space: pre-wrap;
        max-width: 70%;
        margin-top: 5px;
    }

    .appointment-edit-dialog .right-column .sms-divider {
        text-align: center;
        color: #999;
        margin: 10px 0;
        font-size: 0.85em;
    }


    .appointment-edit-dialog .right-column .sms-message {
        margin: 4px 0;
        max-width: 70%;
        padding: 6px 10px;
        border-radius: 6px;
        position: relative;
        font-size: 9pt;
        word-wrap: break-word;
        white-space: pre-wrap;
    }

        .appointment-edit-dialog .right-column .sms-message.sent {
            color: white;
            background: darkgreen;
            align-self: flex-end;
        }

        .appointment-edit-dialog .right-column .sms-message.received {
            background: darkslateblue;
            color: white;
            align-self: flex-start;
        }

    .appointment-edit-dialog .right-column .sms-timestamp {
        font-size: 0.7em;
        color: #ccc;
        margin-top: 2px;
    }


    .appointment-edit-dialog .appointment-meta {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 7px 10px;
        font-size: 13px;
        color: #ccc;
        margin-bottom: 20px;
    }

    .appointment-edit-dialog h4 {
        font-size: 8pt;
        margin-bottom: 10px;
        padding-bottom: 4px;
        color: #00BCF2;
        text-transform: uppercase;
    }

    .appointment-edit-dialog .appointment-details-heading {
        display: flex;
        margin-top: 20px;
    }


    .appointment-edit-dialog .add-appointment-btn:hover {
        background-color: #444;
    }

    .appointment-edit-dialog .appointment-list-container {
        max-height: 170px;
        overflow-y: auto;
        margin-bottom: 10px;
        max-width: 100%;
    }


    .appointment-edit-dialog .appointment-row {
        width: auto; /* Or leave it out entirely unless you need it */
        margin-bottom: 10px;
        text-align: left;
    }

        .appointment-edit-dialog .appointment-row label {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .appointment-edit-dialog .appointment-row .label-text {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex-shrink: 1;
            min-width: 0;
            display: inline-block;
        }

        .appointment-edit-dialog .appointment-row input[type="radio"] {
            width: auto; /* prevents 100% width */
            margin-right: 8px;
        }

    .appointment-edit-dialog .modal-actions {
        /*margin-top: 40px;
        display: flex;
        gap: 10px;*/
        display: flex;
        gap: 10px;
        margin-top: auto; /* This pushes it to the bottom */
    }

    .appointment-edit-dialog button {
        padding: 6px 12px;
        border-radius: 4px;
        font-size: 12px;
        cursor: pointer;
        border: 1px solid #444;
        background-color: #2a2a2a;
        color: #e0e0e0;
        transition: background 0.2s ease;
    }


.tech-schedule-appointment.appointment-draft {
    border: 2px dotted white;
    background-color: transparent;
    color: white;
    font-style: italic;
}

.tech-schedule-appointment.appointment-offered {
    border: 2px dotted green;
    background-color: transparent;
    color: white;
    font-style: italic;
}

.tech-schedule-appointment.appointment-confirmed {
    border: none;
    color: black;
    font-style: normal;
}



    .appointment-edit-dialog .left-column strong {
        color: #eee;
    }

    .appointment-edit-dialog .right-column {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-left:20px;
    }

    

   

        .appointment-edit-dialog .save-btn:hover, .cancel-btn:hover {
            background-color: #3a3a3a;
        }

    .appointment-edit-dialog .status-label {
        font-weight: bold;
        margin-top: 8px;
        color: #ffc30c;
    }




    

    .appointment-edit-dialog .sms-message {
        margin-bottom: 10px;
    }

    .appointment-edit-dialog .sms-meta {
        font-size: 10px;
        color: #777;
        margin-bottom: 2px;
    }



    

    

    .appointment-edit-dialog  .sms-send {
        align-self: flex-end;
        background-color: #333;
        color: #e0e0e0;
        padding: 6px 12px;
        font-size: 12px;
        border: 1px solid #444;
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.2s ease;
    }

        .appointment-edit-dialog  .sms-send:hover {
            background-color: #444;
        }

    .appointment-edit-dialog .sent .sms-text {
        background-color: #2e2e2e;
        color: #bde0fe;
    }

    .appointment-edit-dialog  .received .sms-text {
        background-color: #2a2a3a;
        color: #e4dfff;
    }
*/


    .published-pricing {
        color: #ffc30c;
    }
*/


    .published-pricing {
        color: #ffc30c;
    }
.appointment-status-dropdown {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #1e1e1e;
    color: white;
    border: 1px solid #555;
    /*padding: 8px 30px 8px 10px;*/
    border-radius: 4px;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23ffffff" height="14" viewBox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 20px;
    height: 20px;
}
*/


    .published-pricing {
        color: #ffc30c;
    }