/*body { font-family: Roboto, Arial, sans-serif; }*/
body.fullpage { background: #f9f9f9; margin-top: 57px; }
.centered { display:flex; align-items:center; justify-content: center; }

.brand-wrap { width:100%; display:flex; justify-content: space-between; align-items: center; position: relative; }
.iconLink { display: inline-block }

.navbar-brand {
    background-image: linear-gradient(to left, violet, #6666ff, #0099ff , #00ff00, orange,  #ff3399, #6666ff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: rainbow_animation 8s ease-in-out infinite;
    background-size: 400% 100%;
}
@keyframes rainbow_animation {
    0%,100% { background-position: 0 0; }
    50% { background-position: 100% 0; }
}
@keyframes bg_rainbow_animation {
    0% { background-color: #d466ff; }
    14% { background-color: #6666ff; }
    28% { background-color: #0099ff; }
    42% { background-color: #00ff00; }
    56% { background-color: orange; }
    70% { background-color: #ff3399; }
    84% { background-color: rgb(238, 130, 211); }
    100% { background-color: #d466ff; }
}

.brand-wrap .sup { position: absolute; font-size: 10px; top: 7px; left: 118px; vertical-align: baseline; color: #666; }

.code {
    font-size: 87.5%; color: #e83e8c; word-wrap: break-word; border: 1px solid #dee2e6; outline: none; background: #f1f1f1; width: 100%;
    padding: .25rem .5rem; margin-bottom: 3px; font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
.clicktotcopy { cursor:pointer; }
.clicktotcopy:hover { background:#EEE; color: #d82e7c; }

.vertical-nav {
    width:100%; height: calc(100vh - 57px); position: fixed; top: 57px; left: -100%;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1); transition: left 0.4s; z-index: 1029; /*was 1031?*/
}
.vertical-nav.active { left: 0; }
.vertical-nav .nav { position: relative; }
.vertical-nav .nav-item.active>a { /*border-right: 5px solid #007bff;*/ background: #FEFEFE!important; }
.vertical-nav .nav-item>a { position:relative; }
.vertical-nav .nav-item .indicator {
    position:absolute; background:#666; top:0; width:0; bottom:0; z-index:4; right:0; display:block;
    transition: width ease-out .25s;
}
.vertical-nav .nav-item.active .indicator { width:5px; background:#007bff; animation: bg_rainbow_animation 8s ease-in-out infinite; }
.vertical-nav .nav-item:hover .indicator { width:5px; }
.vertical-nav .nav-tabs .nav-link { border: none;  color: #495057; }
.vertical-nav .nav-tabs .nav-link:hover { background-color:#f8f9fa; }
.vertical-nav .nav-tabs .nav-link.active { border: none; color: #007bff; background-color: #dee2e6; }
.vertical-nav .dropright .dropdown-menu.show {
    margin-left:0; border-radius:0; border-left:none; border-color: #dee2e6;
    box-shadow: 3px 3px 10px rgb(0 0 0 / 10%);
}
.vertical-nav .nav-link.small { padding: 5px 1rem; }

.alert { padding: .5rem .75rem; }
.alert-dismissible .close { padding: .5rem 1rem; }

.toastWrapper { top: 0; right: 0; z-index: 1040; }

.formatresult { cursor:pointer; }

@media (min-width: 768px) {
    .h-md-100 { height:100%; }
    /*.brand-wrap { width: auto;  }*/
    .brand-wrap .sup { left: 158px; }
    .navbar-brand {  padding-top:0; padding-bottom:0; font-size: 26px; margin-right:0; }
    .vertical-nav { min-width:215px; width: auto; left: 0; }
    .overflow-md-auto { overflow: auto; }
    .page-content { width: calc(100% - 215px); margin-left: 13rem; }
}

@media (prefers-color-scheme: dark) {
    body.fullpage { background:#393939; color:#9da1a6; }
    nav.navbar { background:#333131!important; border-bottom-color: #2c2c2c!important; }
    .navbar-light .navbar-brand { color: #ffffff; }
    #sidebar { background: #2d2d2d!important; }
    .nav-link.text-dark.bg-light { background-color:#252525!important; color:#acacac!important; }
    .bordered, .tabcontent { border-color:#4e4d4d; border-bottom-color: #535353; border-right-color: #4b4b4b; border-left-color: #535353; }
    .form-control { background-color: #292929; border-color:#1e1e1e; color: #9aa2aa; }
    .form-control:disabled, .form-control[readonly] { background-color: #292929; border-color:#1e1e1e; color: #495057; }
    .nav-tabs .nav-link { background: #393939; border-bottom:#000; color:#5797db;}
    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: #c0c4c8;
        background-color: #413f3f;
        border-color: #767b7e #606569 #1f1e1e; }
    .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover { color: #c7c1c1; border-color: #767b7e #606569 #1f1e1e; }
    .bg-white.border { background-color:#454545!important; border-color:#444!important; }
    a.text-dark { color:#6c96bf!important }
}