:root {
    --background-color-1: #1a1a1f;
    --background-color-2: rgba(37, 218, 235, .05);
    --background-color-3: #061F2F;
    --background-color-4: #041520;
    --background-color-fade: rgba(0,0,0,0.8);
  
    --menu-background: rgba(0,0,0,0);
    --submenu-background: var(--background-color-4);

    --highlight: rgba(37, 218, 235, .4);
    --w-100: 100%;

    --background-color-1: rgba(33,33,33,1);
    --background-color-2: rgba(33,33,33,.5);
    --background-color-3: rgba(0,0,0,1);
    --highlight: rgba(0,0,0,0.8);

    --color-system: #6AE5D3;
    --color-system-dark: #38B09D;

    --color-system: #7dcfcc;
    --color-system-dark: #00A19B;


    --color-system: #5BB7D6;
    --color-system-dark: #376e80;

    --background-color:   #0e2521;
    --background-color:   #23282c;

    --color-system-shadow: rgba(106, 229, 211, .1);

    --background-color-1: #22272b;
    --background-color-2: #22272b;
    --background-color-3: #22272b;

     --highlight: #1E252A;
    --highlight: rgba(0, 0, 0, .3);

    --menu-font-color: rgba(239,239,239,1);
    --font-color: rgba(239,239,239,1);

    --font-color-card-title: #c9d1d9;
    --font-color-light: #c9d1d9;

    --fade-color: rgba(0, 0, 0, .0);
    --fade-color-1: rgba(0, 0, 0, .2);
    --fade-color-2: rgba(0, 0, 0, .3);
    
    --main-color-2: var(--color-system);
    --main-color-1: var(--color-system-dark);

    --f1-color: rgb(127, 140, 141);
    --f1-color: rgb(207, 43, 54);


--fade-color-1: #12252b;

}

.card {
    background: #7C7C7C ;
}


.card  {
    background: linear-gradient(90deg, #12252b 0%, rgba(0, 0, 0, .3) 80%);
}
.card-subtitle, .card-subtitle a, .text-main {
    color: #5BB7D6 !important;

}

.f1 .card .icon, .news .card .icon {
    border-right: 1px solid #5BB7D6 !important;
}

.card  {
  /*  background: linear-gradient(90deg, #2a2a2a 0%, rgba(0, 0, 0, .3) 80%); */
      background: linear-gradient(90deg, var(--fade-color-1) 0%, var(--fade-color-2) 60%);

}

.info .card  {
    background: linear-gradient(90deg, #12252b 0%, rgba(0, 0, 0, .3) 80%);
}

.sssswitch .card  {
    background: linear-gradient(90deg, #2a2a2a 0%, rgba(0, 0, 0, .3) 80%);
}

.info .card-subtitle, .info .card-subtitle a, .info .text-main {
    color: #5BB7D6 !important;
}

.calendar .card  {
    background: linear-gradient(90deg, #363636 0%, rgba(0, 0, 0, .3) 80%);
}
.calendar .card-subtitle, .calendar .card-subtitle a, .calendar .text-main {
    color: #898989 !important;
}

.calendar .card .icon {
    border-right: 1px solid #898989 !important;
}

.scene .card {
    background: linear-gradient(90deg, #0A3C2D 20%, rgba(0, 0, 0, .3) 80%);
    background: linear-gradient(90deg, #2a302a 20%, rgba(0, 0, 0, .3) 80%);
}
.scene .card-subtitle, .scene .card-subtitle a, .scene .text-main {
    color: #20c997 !important;
}

.scene .card .icon {
    border-right: 1px solid #20c997 !important;
}

.automation .card {
    background: linear-gradient(90deg, rgb(61, 49, 24) 20%, rgba(0, 0, 0, .3) 80%);
    background: linear-gradient(90deg, #2e2a25 20%, rgba(0, 0, 0, .3) 80%);

}
.automation .card-subtitle, .automation .card-subtitle a, .automation .text-main {
    color: #EAAF00 !important;
}

.automation .card .icon {
    border-right: 1px solid #EAAF00 !important;
}

.plex .card {
    background: linear-gradient(90deg, rgb(61, 49, 24) 20%, rgba(0, 0, 0, .3) 80%);
    background: linear-gradient(90deg, #332f24 20%, rgba(0, 0, 0, .3) 80%);

    
}
.plex .card-subtitle, .plex .card-subtitle a, .plex .text-main, .plex .text-system, .plex .text-highlight, .plex .close {
    color: #EAAF00 !important;
}
.plex .dropdown-menu {
    border-left: 1px solid #EAAF00 !important;
}

.plex a.dropdown-item hr {
    color: #EAAF00; 
    background: #EAAF00;
}

.plex .progress-bar {
    background-color: #EAAF00 !important;
}
.plex .card .icon {
    border-right: 1px solid #EAAF00 !important;
}


.f1 .card {
    background: linear-gradient(90deg, #3b2a2a 0%, rgba(0, 0, 0, .3) 80%);
  /*  background: linear-gradient(90deg, #29090b 0%, rgba(0, 0, 0, .3) 80%);
  */
}


.f1 .card .card-body{
  /*background-color:#0e2a47; /* existing color */

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

}


.f1 .card-subtitle, .f1 .card-subtitle a, .f1 .text-main, .f1 .text-system, .f1 .text-highlight, .f1 .text-custom, .f1 .close {
    color: rgb(127, 140, 141) !important;
    color: #fefefe !important;
}
.f1 .dropdown-menu {
    border-left: 1px solid var(--f1-color) !important;
}

.f1 a.dropdown-item hr {
    color: var(--f1-color); 
    background: var(--f1-color);
}

.f1 .border-system {
    border-color: var(--f1-color) !important;
}
.f1 .text-light {
    color: #c9d1d9 !important;
}
.f1 .card .icon {
    border-right: 1px solid var(--f1-color) !important;
}


/*
.prtg .card {
    background: linear-gradient(90deg, #1d1f04 20%, rgba(0, 0, 0, .3) 80%);
}
.prtg .card-subtitle, .prtg .card-subtitle a, .prtg .text-main, .prtg .text-system, .prtg .text-highlight, .prtg .text-custom, .prtg .close {
    color: rgb(184, 196, 25) !important;
}
.prtg .dropdown-menu {
    border-left: 1px solid rgb(184, 196, 25) !important;
}
/*
.news .card {
    background: #0d0219 !important;
}
.news .card-subtitle, .news .card-subtitle a, .news .text-main, .news .text-system, .news .text-highlight, .news .text-custom, .news .close {
    color: #b771fd !important;
}
.news .text-light {
    color: #c9d1d9 !important;
}
.news .dropdown-menu {
    border-left: 1px solid #b771fd !important;
}
.news .border-system {
    border-color: #b771fd !important;
}

*/

.zzhide {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;}

.zzhide.expand  { 
    max-height: 550px;
    visibility: visible;
    opacity: 1;}

h2 {
    text-align: revert !important;
    margin: revert !important;
}

.hide {
    max-height: 0px;
    overflow: hidden;
    transition: max-height 0.8s linear;

}

.hide.expand  { 
    max-height: 250px;
    transition: max-height 0.8s linear;
}

.btn:hover {
    color: inherit !important;
}

.mw-100 {
    height: auto !important; }


.card-title {
    color: var(--font-color-card-title);
}

.card-title i {
    color: #c9d1d9;
    color: var(--font-color-card-title);
}


.pass {
    font-family: monospace !important;
    font-size: 1.5rem;
}

.text-highlight, .close {
    color: var(--color-system);
}

.text-custom {
    color: #5F7293 !important;
    color: var(--color-system) !important;
}

.border-system {
    border-color: var(--color-system) !important;
}

.rounded {
    border-radius: 0.5rem !important; }
  
  .rounded-top {
    border-top-left-radius: 0.5rem !important;
    border-top-right-radius: 0.5rem !important; }
  
  .rounded-right {
    border-top-right-radius: 0.5rem !important;
    border-bottom-right-radius: 0.5rem !important; }
  
  .rounded-bottom {
    border-bottom-right-radius: 0.5rem !important;
    border-bottom-left-radius: 0.5rem !important; }
  
  .rounded-left {
    border-top-left-radius: 0.5rem !important;
    border-bottom-left-radius: 0.5rem !important; }

.qr {
    width: 100px !important;
    height: 100px !important;
}

.mh-50 {
    max-height: 250px !important;
}

.invert {
    background-color: var(--color-system-dark) !important;
    background-color: #000 !important;
    background: linear-gradient(90deg, var(--color-system-dark) 0%, rgba(0, 0, 0, .3) 80%);
}
.invert .progress {
    background-color: #041520 !important;
}

.alternate {
    background: var(--background-color);
}

.mediafade {
    background: var(--background-color-fade);
}

.testart {
    width: 71.88%;
    height: calc(100vw * 0.5625 * 0.7188);
    background-size: cover;
    background-position: 0% 25%;
    display: inline;
    max-height: 350px;
}

.testposter {
    width: 28.12%;
    height: calc(100vw * 0.5625 * 0.7188);
    background-size: cover;
    background-position: 0% 25%;
    display: inline;
    max-height: 350px;


    
}

#titleImageArt, #titleImagePoster {
    background-size: cover;
    background-position: center;
        object-fit: cover;
}

.single-box .card-title i:first-of-type {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    padding: 10px;
}

body {
    background: var(--background-color) !important;
    font-size: 1.3rem !important;

    /*background-color: #1F1F1F !important;*/
}

.card-title {
    font-size: 1.25rem;
}

.dropdown-menu {
    background: rgba(0,0,0,0.9) !important;
    background-color: #171A1D !important;
}

.card {
    /*border: 2px solid #161b22 !important;*/
    border: 2px solid #2d3238 !important;
    /*border-left: 2px solid var(--color-system) !important;*/
}

.progress-bar.bg-primary {
    background-color: rgb(94, 197, 255) !important;
    background-color: orange !important;
}

.bg-success {
    background-color: var(--green) !important;
}

.bg-system {
    background-color: var(--green) !important;  
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #000;
    background-color: #5BB7D6;
}

/*
@media (prefers-color-scheme: light) {

    :root {
        --color-system: #fff;
    }

    body {
        background: #bcbcbc !important;
    }
    .card {
        
        background: var(--color-system-dark) !important;
    }
    :root {
        --font-color: #010202;
    }
    .card-title {
        color: #010202 !important;
    }
    .text-light-75 {
        color: rgba(1, 2, 3, .75) !important;
    }
    .text-white {
        color: #000 !important;
    }
}
*/

.shadow {
    box-shadow: none !important;
    box-shadow: 0 0 1px 1px var(--color-system-shadow) !important ;
}

.btn-glow {
    box-shadow: 0 0 10px 10px var(--color-system-shadow) !important ;
    background-color: #161b22;
    background-color: rgba(255,255,255,.05);
    background-color: var(--background-color);
}

.btn-off {
    background-color: rgba(0, 0, 0, .3)
}

.card {
    border: none !important;

}

.dropdown-menu {
    border: none !important;
    border-left: 3px solid var(--color-system) !important;
}

.w-lg-50 {
    width: 50%  !important;
    margin: auto;
}

/*
div[class^='titleImageTitle-'] + div[class^='titleImageTitle-'], div[class*=' titleImageTitle-'] + div[class*=' titleImageTitle-'] {
   max-width: 70%;   
 }
 */
 
.titleImageTitle {
    backdrop-filter: brightness(50%);
}

 .modal-news {
    margin: 0.1rem auto;
    max-width: 800px !important;
 }

 .modal-news .modal-body.notes {
    padding-left: 0.1rem;
    padding-right: 0.1rem;
 }
/*
 .navbar {
    background-image: url('/Images/id-2-logo-light.png');
    background-repeat: no-repeat;
    background-position: 50px 5px;
    background-size: auto 30px ;
 }
 */

  .rounded {
    border-radius: 0.4rem !important; }
  
  .rounded-top {
    border-top-left-radius: 0.4rem !important;
    border-top-right-radius: 0.4rem !important; }
  
  .rounded-right {
    border-top-right-radius: 0.4rem !important;
    border-bottom-right-radius: 0.4rem !important; }
  
  .rounded-bottom {
    border-bottom-right-radius: 0.4rem !important;
    border-bottom-left-radius: 0.4rem !important; }
  
  .rounded-left {
    border-top-left-radius: 0.4rem !important;
    border-bottom-left-radius: 0.4rem !important; }


.w-100 {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;

}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: var(--font-color-light);
    background-color: var(--background-color) !important;
    border-color: #dee2e6 #dee2e6 #fff;

    border-bottom: var(--background-color) !important;
    position: relative;
    top: 1px;

}


.nav-tabs .nav-link, .nav-tabs .nav-link:hover {
    color: var(--font-color-light);
    background-color: var(--background-color) !important;
    border-color: #dee2e6 #dee2e6 #fff;
}


button:focus {
  outline: none !important;
}

a.dropdown-item hr {
    height: 1px;
    color: #5BB7D6;
    background: #5BB7D6;
    font-size: 0;
    border: 0;
}

ul {
list-style-type: none;
}

.done.last {
    background-color: #ffcc00;
  position: absolute;
  font-family: 'FontAwesome';
  top: 0;
  left: 10px;
  content: "\f005";
}

.train {
    width: 50px !important;
}

.card-body {
    padding: 0rem !important;
    margin: 0rem !important;
}

.media  {
    padding: 0rem !important;
    margin: 0rem !important;
}

.card-subtitle {
    font-size: 0.8em;
}

.card-item, .upper {
    font-size: 0.8em;  
}

.mid {
    font-size: 0.7em;
}

.lower {
    font-size: 0.7em;
}

.stopped {
    display: none !important;
}

.bg-80 {
    background-size: 80% !important;
}

.blur {
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px);
    background: rgba(0,0,0,0.3);
}


.blur-up {
    filter: blur(3px);
    transition: filter 0.2s ease-in-out;

}

.blur-up.loaded {
    filter: blur(0);
}



.ultra-blur-bg {
  position: fixed;
  inset: 0;

  background:
    radial-gradient(circle at top left,    #162e4f 0%, transparent 60%),
    radial-gradient(circle at top right,   #30618f 0%, transparent 60%),
    radial-gradient(circle at bottom right,#345e96 0%, transparent 60%),
    radial-gradient(circle at bottom left, #1c2c56 0%, transparent 60%);

  /* Blend the gradients together */
  background-blend-mode: screen;

  /* Plex-style softness */
  filter: blur(60px) brightness(0.7) saturate(1.2);

  transform: scale(1.2); /* prevents blur edge clipping */
}


.titleImageLogo {

    position: relative;
    left: 00px;
    top: 20px;
    z-index: 1000;
    height: 60px;
    /*width: 100%;*/
    background-size: contain;
    object-fit: contain;
    background-position: left center;
    background-repeat: no-repeat;
    object-position: right center;
    margin-bottom: -60px;
    padding-right: 20px;


  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #000);

    
}