body {
    padding-top: 3rem;
    padding-bottom: .1rem;
    color: var(--light);
    font-size: .8rem;
    font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
}
.wave {width: 100%;overflow: hidden;}
.wave_1 {background: url("/img/wave_1.png") repeat-x;width: 7000px;height: 70px;animation: waves 15s infinite linear;}
.wave_2 {background: url("/img/wave_2.png") repeat-x;width: 7000px;height: 70px;animation: waves 12s infinite linear;}
.wave_3 {background: url("/img/wave_3.png") repeat-x;width: 7000px;height: 70px;animation: waves 7s infinite linear;}
@keyframes waves {
    0% {margin-left: 0; }
    100% {margin-left: -1938px; }
}

footer {color: var(--light);}
a {color: #F39C12 !important;}
.btn-outline-warning:hover,.btn:hover {color: #212529 !important;}
.ajaxLoading {
    display:    none;
    position:   fixed;
    z-index:    2000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 0, 0, 0, .8 )
    url('/img/ajax-loading.svg')
    50% 50%
    no-repeat;
}
.ajaxLoading.loading {overflow: hidden;}
.ajaxLoading.loading {display: block;}
#serverMessage{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    position: fixed;top:0;left:.5%;
    width:99%;min-height: 100px;
    background: #0c0c0c;opacity: .9;
    z-index:9999;
    border: 1px darkgrey solid;
    border-radius: 0 0 .5rem .5rem;
}
.text-blur{
    color: hsla(0,0%,0%,0);
    text-shadow: #fff 0 0 10px;
    transition: text-shadow 2s cubic-bezier(0, 1, 0, 1);
}
#serverMessage [role="button"] {position:absolute;right:10px;bottom:10px;}
#serverMessage .trace{white-space: pre-wrap;font-weight:300;font-size:60%;padding:.4rem;color:#6c757d;text-align:left;float:left;}
.modal .btn:not(.modal .input-group .btn) {border-radius: .3rem !important;}
.modal .container h1{display: none !important;}
span[data-toggle] {border-bottom:1px dotted var(--success);}
.map-container{position:relative;opacity:.9;overflow:hidden;padding-bottom:16.25%;height:0;height: 300px;margin-top: 1rem;border-top: 1px #9e9e9e solid;border-bottom: 1px #9e9e9e solid;}
.map-container iframe{position:absolute;left:0;top:0;height:100%;width:100%;}
blockquote {
    overflow: hidden;
    padding-right: 1.5em;
    padding-left: 1.5em;
    margin: .5rem 0;
    font-style: italic;
    border-left: 1px solid #ccc;
}
.table th, .table td{padding: .25rem!important;}
.card.subscription .table a{
    text-decoration: none;
    border-bottom: 1px dotted;
}
.h24tv-channels {
    column-count: 3;
    column-rule: dotted 1px #333;
}
.h24tv-channels li i {min-width: 60px;}
.lead{font-weight: 200 !important;}
h2, h3, h4, h5, h6 {
    font-weight: 200 !important;
}
h1 {
    font-weight: 100;
    line-height: 1;
    letter-spacing: .1rem;
}
.table .form-check-label{width: 100%;}
#ajax-loading{
    background: url('/img/ajax-loader-bg.png') no-repeat center center;
    display: none;
    position: absolute;
    z-index: 10001;
}
#ajax-loading .icon{
    background: url('/img/ajax-loader.gif') no-repeat center center;
    width: 128px;height: 128px;
}
header .navbar {
    font-size: 1.1rem;
    font-weight: 200;
    height: 55px !important;
    padding: .1rem 1rem !important;
}
header .navbar-bg {display: none;}
@media (max-width: 992px) {
    header .navbar-bg {
        position: fixed;
        height: 55px;
        top: 0;right: 0;left: 0;
        display: block;
        z-index: 1000;
        background-color: var(--gray-dark);
    }
}

header .navbar ul li {padding: 0 .5rem;}
header .navbar .fal,header .navbar .fab {padding: 0 .5rem}
header .navbar header .navbar-nav{z-index: 100;}
.back-to-top {
    position: fixed;
    border-radius: 50%;
    opacity: .5;
    bottom: 1rem;
    right: 1rem;
    display: none;
}
header .navbar.bg-dark {
    border-bottom: 1px var(--light) solid;
    opacity: .98;
}
header .navbar .dropdown-menu {
    background-color: var(--gray-dark);
    border-color: var(--light);
    border-top: none;
    border-radius: 0 0 .25rem .25rem;
    top: 47px;
    margin-top: 1px;
}

.bootstrap-datetimepicker-widget{
    font-size: .8rem;
    z-index: 1900;
}
header a.nav-link {color: rgba(255,255,255,.8) !important;}
header a.nav-link:hover {color: rgba(255,255,255,.99) !important;}

.dropdown-item{background-color: transparent !important;color: rgba(255,255,255,.5) !important;}
.dropdown-item:hover{color: rgba(255,255,255,.8);}
.dropdown-toggle{outline: none;}
header .navbar .nav-link {padding: 0.5rem .1rem !important;}
.text-primary{color: #9999b6 !important;}
a.text-primary:hover{color: #8e8eb5 !important;}
.featurette-divider{color: #686679;}
.tab-pane{padding-top: 1em;}
.btn:not(.input-group .btn){border-radius: 5rem !important;}
.modal-lg{min-width: 80%;}
.modal-lg .modal-content {height: 80%;}
.modal-lg .modal-body {max-height: calc(100vh - 210px); overflow-y: auto;}

::-webkit-scrollbar {height: 5px;width: 5px;}
::-webkit-scrollbar-track {box-shadow: inset 0 0 5px grey;border-radius: 5px;}
::-webkit-scrollbar-thumb {background: #F39C12;border-radius: 5px;}

.modal-body {height: 70%;overflow-y: auto;}
@media (max-width: 380px) {
    header .navbar-brand img {height: 36px !important;}
    header .navbar {font-size: 1rem;}
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {font-size: 3.5rem;}
}
@media (max-width: 500px) {
    .h24tv-channels {column-count: 1 !important;}
}
.combo .card {min-width: 17rem; max-width: 17rem; margin: .4rem;}
.card-billing {
    position: absolute;
    display: none;
    opacity: .98 !important;
}
.card-billing .card{opacity: 1 !important;width:18rem;}
.table td i.fal{padding-right: .5rem}
@media (min-width: 1700px) {
    .card-billing {display: block;}
}

@media (min-width: 1600px){
    .container-lg {max-width: 1540px;}
}

@media (min-width: 992px) {
    .card-billing {
        min-width: 300px;
        position: absolute;
        top: 4.1rem;
        right: .2rem;
    }
}
@media (max-width: 1100px) {
    header .navbar .nav-item {font-size: 1rem;}
}

@media (max-width: 992px) {
    header .navbar.bg-dark{border: 0;}
    .card-billing {
        display: block;
        padding-bottom: 2rem;
        opacity: .95 !important;
    }
    .combo.justify-content-center{
        -webkit-box-pack: unset !important;
        -ms-flex-pack: unset !important;
        justify-content: normal !important;
    }
    .combo {
        /* .flex-row */
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
        flex-direction: row !important;
        /* .flex-nowrap */
        -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
        /* .d-flex */
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
    }
    .nav-link {padding: 0.5rem .8rem !important;}
    .h24tv-channels {column-count: 2;}
    .bnt-billing{display: none;}
    .back-to-top {
        padding: .25rem .5rem;
        font-size: .875rem;
        line-height: 1.5;
    }
    header .navbar{background-color: #343a40;}
    header .navbar ul li {padding: .2rem 0;}
    header .navbar .logout {position: absolute;right: 20px;top: 55px;}
    header .navbar-collapse::-webkit-scrollbar {display: none;}
    header .navbar .dropdown-menu {top: 10px;border: none;background-color: transparent;}
    header .navbar-collapse {
        position: absolute;
        overflow: scroll;
        top: 0; right: 0;
        z-index: -1;
        padding-top: 55px;
        background-color: #343a40;
        border-bottom: 1px #9e9e9e solid;
        padding-left: 7px;
        padding-right: 5px;
        padding-bottom: 15px;
        width: 300px;
        min-height: 600px;
        height: 100vh !important;
        transition: all .5s ease;
        display: block;
    }
    header .navbar-collapse.collapsing {
        height: 100vh !important;
        margin-right: -280px;
        transition: all .3s ease;
        display: block;
    }
    header .navbar-collapse.show {right: 0;}
}