.vpn-status{
            padding:0.5em;
        }
        .vpn-status>.material-icons{
            size:1em;
            vertical-align: bottom;
            padding-right: 0.25em;
        }
        .vpn-status.bad{
            background-color: #ffdede;
            color: #c00;
        }

        .vpn-status.good{
            background-color: #deffde;
            color: #070;
        }


        .vpn-status-again{
            display:none;
            padding-left:1em;
        }

        .input-field input[type=text].error{
            background-color: #ffdede;
            color: #c00;
        }

        #launch-form{
            display:none;
        }
    
        .row.current-state-running button.start-button,
        .row.current-state-stopping button.start-button, 
        .row.current-state-pending button.start-button{
            display:none;
        }

        .row.current-state-stopped button.stop-button,
        .row.current-state-stopping button.stop-button,
        .row.current-state-pending button.stop-button{
            display:none;
        }

        .row.current-state-shutting-down button,
        .row.current-state-terminated button{
            display:none;
        }

        .html-snippet-template{
            display:none;
        }
        .inst-current-state{
            font-weight: bold;
        }
        ul.collection.instance-data{
            margin-bottom:0;
        }
        p.instance-info{
            margin-top:1em;
        }
        .instance-label{
            padding-right:0.5em;
        }
        .instance-label-center{
            padding-left:0.5em;
            padding-right:0.5em;
        }

        .code-change-button, .update-defaults-button, .code-download-link {
            cursor: pointer;
            display: inline-block;
            vertical-align: middle;
        }


        .copy-button {
            cursor: pointer;
            line-height: 0.75em;
            display: inline-block;
            font-size: 1em;
            padding: 0 0 0 0.5em;
            vertical-align: middle;
        }
        body{
            background-position-x:center;
            background-position-y: 100px;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size:100dvh;
        }
        nav .brand-logo {
            white-space: nowrap;
        }

        nav .brand-logo.logo-background{
            padding-left: 1.08lh;
            background-size: auto 80%;
            background-repeat: no-repeat;
            background-position: 8px center;
            background-image: url('/lib/g/mascot.png');
            cursor: pointer;
        }

        @media only screen and (max-width: 992px){
            .launch-new-col{
                margin-top: 1em;
            }
        }

        .dropdown-content li>a, .dropdown-content li>span {
            color: #000;
        }
        .select-wrapper input.select-dropdown:focus {
           border-bottom-color: #000;
        }

        .input-field label{
            color: #9e9e9e !important;
        }

        ul#nav-mobile.right.hide-on-med-and-down span.profile-name{
            min-width: 100px;
            display: inline-block;
        }

        input:not([type]):focus:not([readonly]),
        input[type=text]:not(.browser-default):focus:not([readonly]),
        input[type=password]:not(.browser-default):focus:not([readonly]),
        input[type=email]:not(.browser-default):focus:not([readonly]),
        input[type=url]:not(.browser-default):focus:not([readonly]),
        input[type=time]:not(.browser-default):focus:not([readonly]),
        input[type=date]:not(.browser-default):focus:not([readonly]),
        input[type=datetime]:not(.browser-default):focus:not([readonly]),
        input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
        input[type=tel]:not(.browser-default):focus:not([readonly]),
        input[type=number]:not(.browser-default):focus:not([readonly]),
        input[type=search]:not(.browser-default):focus:not([readonly]),
        textarea.materialize-textarea:focus:not([readonly]) {
            border-bottom-color: #2196F3;
            box-shadow: 0 1px 0 0 #2196F3;
        }

        /* ugly default color: #26a69a */
        .chips.focus{
            border-bottom-color: #2196F3;
            box-shadow: 0 1px 0 0 #2196F3;
        }
        .chip:focus {
            background-color: #2196F3;
        }

        .chips.filter-environments input.input{
            width: 100% !important
        }

        .filter-data-freshness-description{
            display:inline-block;
            line-height: 32.4px;
            padding-left: 1em;
        }

        .count-description>span#cumulative-burn-rate-hourly,
        .count-description>span#cumulative-burn-rate-monthly,
        .count-description>span#selected-active-environment-count,
        .count-description>span#total-active-environment-count{
            font-weight: bold;
        }

        .modal-content h4>i.material-icons{
            padding-right:0.5em;
        }

        .modal.instruction-modal .modal-content .copy-value{
            font-weight: bold;
        }

        .modal.instruction-modal .modal-content ol li{
            padding-top: 0.25em;
            padding-bottom: 0.25em;
        }

        .modal.instruction-modal .modal-content ol li ul{
            padding: 0.5em 0 0.5em 2em;
        }

        .modal.instruction-modal .modal-content ol li ul li{
            padding-top: 0.25em;
            padding-bottom: 0.25em;
        }

        .modal#log-modal .log-modal-title{
            font-size: 1.7em;
        }

        .log-btn{
            cursor: pointer; 
        }

        .modal#log-modal table td{
            vertical-align: top;
            font-family: monospace;
        }
        .modal#log-modal table td.log-timestamp{
            white-space: nowrap;
            padding-right: 1em;
        }

        .inst-burn-rate{
            font-weight: bold;
            display:inline-block;
            padding-right:0.15em;
        }
        .inst-stopped-burn-rate-savings{
            font-style: italic;
            color: #070;
        }

        .modal#log-modal table.log-messages tr.verbose-message{
            display:none;
        }

        .modal#log-modal table.log-messages.log-verbose tr.verbose-message{
            display:table-row;
        }

        .modal#log-modal table.log-messages tr.error-msg td{ color: #900;}
        .modal#log-modal table.log-messages tr.owner-msg td{ background-color: rgb(33, 150, 243); color:#fff;}
        .modal#log-modal table.log-messages tr.on-msg td{ background-color: rgb(46, 125, 50); color:#fff;}
        .modal#log-modal table.log-messages tr.off-msg td{ background-color: rgb(249, 168, 37); color:#fff;}
        .modal#log-modal table.log-messages tr.destroy-msg td{ background-color: rgb(198, 40, 40); color:#fff;}

        .modal#log-modal table.log-messages{
            table-layout: fixed;
            width: 100%;
        }

        .modal#log-modal table.log-messages tbody tr td{
            overflow-x: auto;
        }
        

        .modal#log-modal table.log-messages thead tr th.log-timestamp{
            width:255px;
        }


    .tm-status.progress{
        display:none;
        vertical-align: text-top;
        max-width: 15%;
        margin-top:0.6em;
        margin-bottom: -0.6em;
        margin-left: 1em;
        background-color: rgba(33, 149, 243, 0.427);
    }

    .current-tm-status-launching .tm-status.progress, 
    .current-tm-status-starting .tm-status.progress, 
    .current-tm-status-updating-code-version .tm-status.progress, 
    .current-tm-status-updating-defaults-values .tm-status.progress, 
    .current-tm-status-deploying-aws-stack .tm-status.progress, 
    .current-tm-status-stopping .tm-status.progress{
        display:inline-block;
    }

    .current-tm-status-error li.tm-status-item{
        background-color: #ffdede;
        color:#c00;
    }

    .tm-status.progress .indeterminate{
        background-color: #2196F3;
    }

    .status-update-countdown{
        display:none;
        vertical-align: text-middle;
        margin-left: 1em;
        font-size: 0.75em;
    }

    .current-tm-status-launching .status-update-countdown, 
    .current-tm-status-starting .status-update-countdown, 
    .current-tm-status-updating-code-version .status-update-countdown,
    .current-tm-status-updating-defaults-values .status-update-countdown,
    .current-tm-status-deploying-aws-stack .status-update-countdown, 
    .current-tm-status-stopping .status-update-countdown{
        display:inline;
    }

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.container {
    flex: 1 0 auto;
}

footer.page-footer{
    background:#efefef;
    padding-top:0;
}
footer.page-footer .footer-copyright{
    color:#000;
}

ul.collection.instance-data li.collection-item.connection-instructions{
    padding:1em;
    text-align: center;
}

ul.collection.instance-data li.collection-item.connection-instructions table{
    width:100%;
    padding:0;
    margin:0;
    border:none;
}

ul.collection.instance-data li.collection-item.connection-instructions table tr{
    border:none;
}

ul.collection.instance-data li.collection-item.connection-instructions table tr td{
    padding:0;
    margin:0;
    text-align: center;
    vertical-align: middle;
    border:none;
}

.os-alternate{
    width:44%;
    margin-left:2.5%;
    margin-top: 1em;
    margin-bottom: 1em;
    padding:0;
    display:inline-block;
    border-radius: 5px;
    border: 1px solid #ccc;
}
.os-alternate ol{
    padding-left:2.5em;
    list-style-type: lower-roman;
    width:95%;
}

.os-alternate .os-title{
    display:block;
    font-weight: bold;
    padding:0.5em;
}

.code-change-form{
    display:none;
}

#code-change-form-template{
    display:none;
}

.active-environment .card-content,
.active-environment .card-content ul.collection.instance-data {
    overflow: visible;
}

#login-modal .login-modal-title,
#login-modal .login-modal-content,
#login-modal .modal-footer{
    text-align: center;
}

#login-modal .login-modal-content>img{
    max-width: 512px;
    max-height: 50vh;
}

#mascot{
    display:none;
    z-index: 2000;
    position: fixed;
    width:100vw;
    height:100vh;
    background-color: rgba(0,0,0,0.5);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('/lib/g/mascot.png');
    top:0;
    left:0;
    cursor: pointer;
}

[type="checkbox"]:checked+span:not(.lever):before {
    border-right-color: #070 !important;
    border-bottom-color: #070 !important;
}

div.input-field.inline.free_storage_space{
    width: 4em;
}

input[type="number"]#free_storage_space{
    width: 4em;
    text-align: right;
}

div.inline-text-wrapper{
    line-height: 5em;
}

div.f-drive-sub, div.hp-sub{
    margin-top: -1.75em;
    margin-left: 3em;
}

div.f-drive-sub-toggle, div.hp-sub-toggle{
    display:none;
}


div.f-drive-sub.add-client-files{
    line-height: 3.5em;
}

div.hp-options{
    display: none;
}

div.f-drive-options label, div.hp-options label{
    color: #000;
}


.report-loading{
    text-align: center;
    padding: 1em;
    margin-top: 4em;
}

.failure-reason{
    font-size: smaller;
    color: #c00;
    cursor: pointer;
}

tr.last-error-output{
    font-family: 'Courier New', Courier, monospace;
    white-space: pre;
    overflow: scroll;
    background: #ffdede;
    color: #c00;
    font-size: smaller;
}

tr.last-error-output.hydra-hide{
    display:none;
}

table.incoming-data-report td.launch-time span{
    font-size: smaller;
    color: #777;
}

.page-footer .container{
    text-align: center;
}

a.older-version-link{
    margin-left:45px;
    display:inline-block;
    font-size:smaller
}

.high_performance_ttl_unit{
    margin-left: 0.5em;
}

.environment-type-high-performance .highlight-high-performance{
    background-color: #ffffcc;
}

.high-performance-only{
    display:none;
}

.environment-type-high-performance .high-performance-only{
    display:block;
}


.high-performance-expired{
    position: relative;
    user-select: none;
}

.high-performance-expired .expired-environment-overlay{
    display:block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 100;
}

.high-performance-expired .expired-environment-overlay:after{
    content: 'Expired';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2em;
    font-weight: bold;
    color: #c00;
    text-align: center;
    letter-spacing: 0.1em;
    width: 95%;
    background: rgba(255, 128, 128, 0.5);
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff;
}

.expired-environment-overlay{
    display:none;
}

.edit-note-btn{
    cursor: pointer;
}

/* .note-form textarea{
    width:100%;
    margin-bottom: 2em;
    border-bottom: red 1px solid;
} */

.environment-note-item .note-form{
    display:none;
}

.environment-note-item.show-note-form .note-form{
    display:block;
}

.environment-note-item.show-note-form .note-value,
.environment-note-item.show-note-form .edit-note-btn-wrapper {
    display:none;
}

.environment-note-item.show-note-form .note-form-buttons{
    clear:both;
    margin-top: 1.8em;
}

.environment-note-item.show-note-form textarea{
    min-width: 100%;
    min-height: 5em;
}

.btn:focus-visible,
.modal#ownership-modal .btn:focus{
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.5);
    outline: 0;
}

.btn-small.hydra-inline-button{
    height: 24px;
    line-height: 24px;
    font-size: 10px;
    padding: 0 8px;    
}

.right.btn-small.hydra-inline-button{
    margin-left: 0.5em;
}

.current-tm-status-launching .not-during-launch{
    display:none;
}

.ownership-item .has-owner{ display: none; }
.ownership-item.ownership-claimed .has-owner{ display: inline; }
.ownership-item .no-owner{ display:inline; }
.ownership-item.ownership-claimed .no-owner{ display: none; }

.customer-specific-options-wrapper{
    display:none;
}

.customer-specific-header{
    font-size: 1.25em;
    font-weight: 300;
    padding-bottom: 0.5em;
}

.hot-drive-pending{
    display:block;
    color: #999;
    font-size: smaller;    
}


.customer-specific-options table{
    border-top: 1px solid rgba(0,0,0,0.12);
}

.customer-specific-options table td{
    vertical-align: top;
}

span.hot-drive-build-time{
    font-size: smaller;
    color: #333;
    background: #efefef;
    border-radius: 0.5em;
    padding: 0.35em 0.5em;
}

td.customer-specific-hot-drive-tools{
    text-align: right;
}

@media only screen and (max-width: 800px) {
    .data-options-hide-on-small{
        display:none;
    }
}

.cs-website-version{
    color: rgb(158, 158, 158);
}

.customer-specific-options-wrapper.error{
    background-color: #ffdede;
    color: #c00;
}
.show-after-customer-selection{
    display: none;
}

table.hot-copy-calendar{
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
table.hot-copy-calendar th{
    text-align: center;
}
table.hot-copy-calendar td{
    position:relative;
    border: 1px solid #dedede;
    padding: 0 0 1.25em 0;
    overflow: hidden;
    height: 12vh;
    vertical-align: bottom;
}

table.hot-copy-calendar td span.d{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: #dedede;
    border-bottom-right-radius: 0.5em;
    padding: 0 0.5em;
    font-size: 0.75em;
    color: #333;
}

table.hot-copy-calendar td input.hc-request{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 2.25em;
    text-align: right;
    margin: 0;
    height: unset;
    border-left: 1px solid #9e9e9e;
    border-top: 1px solid #9e9e9e;
    border-bottom: none;
    border-top-left-radius: 4px;
}
table.hot-copy-calendar td input.hc-request:focus{
    background: #ffeb3b;
}
table.hot-copy-calendar td div.f{
    position: absolute;
    height:2em;
    left:0;
    right:0;
    bottom: 0;
}

table.hot-copy-calendar td div.f::before{
    content: 'Amount:';
    font-size: 0.75em;
    color: #333;
}

table.hot-copy-calendar td div.f input{
    text-align: right;
}

table.hot-copy-calendar td ul{
    padding: 1.5em 0 0.5em 0;
    margin:auto;
    width:90%;
}
table.hot-copy-calendar td ul li{
    list-style: none;
    padding:0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 0.75em;
    padding: 0.1em;
}

table.hot-copy-calendar td ul li>span{
    display: inline-block;
    width: 20px;
    text-align: right;
}

ul.hot-copy-calendar-list, ul.hot-copy-calendar-list ul {
    list-style: none;
}

ul.hot-copy-calendar-list ul{
    padding-left: 4em;
}

ul.hot-copy-calendar-list li, ul.hot-copy-calendar-list ul li{
    list-style: none;
    margin: 2px;
}

ul.hot-copy-calendar-list ul li>span{
    display: inline-block;
    width: 2em;
    text-align: right;
    margin-right: 0.5em;
}

ul.hot-copy-calendar-list li span.hc-h-date{
    font-weight: bold;
    font-size: 1em;
}

ul.hot-copy-calendar-list li span.hc-h-date>i.material-icons{
    vertical-align: text-top;
    padding-right: 0.25em;
}

ul.hc-daily-counts{
    margin-bottom: 2em;
}

#editor-modal.modal.bottom-sheet{
    max-height: 80vh;
    overflow-y: auto;
}

.hc-calendar-passed-day{
    background-color: #f0f0f0;
    color:#999;
}

table.hot-copy-calendar li.total-count{
    border-top: 1px solid #9e9e9e;
    font-weight: bold;
}

span.example-filter {
    display: inline-block;
    padding: 0.25em 0.75em;
    margin-right: 0.5em;
    font-size: smaller;
    border-radius: 50vh;
    background:#f5f5f5;
    cursor: pointer;
    user-select: none;
}

span.example-filter.not-clickable{
    cursor: default;
    user-select: unset;
}

span.example-filter.match-colors{
    background: #e4e4e4;
}

a.filter-help{
    color: #000;
}

span.filter-help-divider{
    display:inline-block;
    padding-right: 1em;
    margin-right: 1em;
    border-right: 1px solid #999;
}

ul.filter-help-list{
    margin-left:2em;
}

ul.filter-help-list li{
    list-style-type: disc;
    padding-left: 0.5em;
}

dl.filter-help-dictionary dt, dl.filter-help-dictionary dd{
    font-size:15px;
    margin-bottom: 0.5em;
}

dl.filter-help-dictionary{
    margin-left: 2em;
}

body.hide-hat .hide-hat{
    display:none;
}

i.material-icons.prefix.active{
    color: #2196F3 !important;
}

.change-owner-modal-hostname,
.change-owner-modal-current-owner{
    font-weight: bold;
}

div#log-modal.modal.modal-fixed-footer.bottom-sheet{
    max-height: 80%;
    height: 80%;
}

table.log-messages tfoot tr td{
    text-align: center;
}

.log-loading .dot{
    /* animate the opacity to fade in and out from 1 to 0 repeatedly */
    animation: blink 1s infinite;
}

.log-loading .message{
    padding-right: 0.5em;
}

.log-loading .dot-1 { animation-delay: 0s; }
.log-loading .dot-2 { animation-delay: 0.33s; }
.log-loading .dot-3 { animation-delay: 0.66s; }

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.report-destroyed-hostname{
    font-weight: bold;
}

.report-destroyed-by{
    font-style: italic;
}

.report-destroyed-by{
    color:#333;
}

.report-destroyed-by:before{
    content: 'Destroyed By: ';
    padding-left: 0.5em;
}

.focused-environment{
    border: 2px solid #6a1b9a;
    box-shadow: 0 0 50px #6a1b9a;
    border-radius: 5px;
}

.focused-environment-banner{
    color: #fff;
    position: relative;
    padding: 0.5em;
    margin-bottom: 1em;
    border-radius: 4px;
}

.card .card-content .focused-environment-banner p{
    margin-right: 125px;
    font-size: 18px;
}

.focused-environment-banner button{
    position: absolute;
    top: 50%;
    margin-top: -12px;
    right: 2em;
    color: #6a1b9a;
}

.filtered-out{
    display:none;
}

.filtered-out.focused-environment{
    display: block !important;
}

.focus-is-filtered-out{
    display:none;
}

.filtered-out .focus-is-filtered-out{
    display: inline;
}

#editor-modal .editor-content{
    position: absolute;
    top: 5em;
    right: 1em;
    bottom: 1em;
    left: 1em;
}

#editor-modal .modal-content h4>span{
    color:#999;
}

#editor-modal .editor-content textarea{
    width:100%;
    height:100%;
}

.CodeMirror{
    border: 1px solid #999;
    border-radius: 4px;
}

.card-icons{
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 1) 10px);
    position: absolute;
    line-height: 32px;
    top: 0;
    right: 0;
    font-size: 24px;
}

.card-icons .env-icon-button{
    cursor: pointer;
    line-height: 0.75em;
    display: inline-block;
    font-size: 1em;
    padding: 0 0 0 0.5em;
    vertical-align: middle;
}

/* if window width is less than 1250px */
@media only screen and (max-width: 1250px) {
    .card-icons{
        position:relative;
        top:0;
        left:0;
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
    }
    .card-icons i.env-icon-button{
        flex-grow: 1;
        flex-basis: 0;
        text-align: center;
        padding: 0;
    }

}

.card-title-row{
    position: relative;
}