:root,
 html[data-theme=light] {
  --primary: #0baace;
  --primary-hover: #0d9467;
  --white: #ffffff;
  --black: #0a0a0a;
  --bg-main: #0a0a0a;
  --bg-base: var(--white);
  --bg-inset: #e5e5e5;
  --bg-subtle: #f5f5f5;
  --bg-lucid: rgb(0 0 0 / 4%);
  --bg-transparent: rgb(0 0 0 / 5%);
  --bg-form: var(--white);
  --color-title: #171717;
  --color-text: #404040;
  --color-text-muted: #737373;
  --color-border: #d4d4d4;
  --color-logo: var(--primary);
  --aside-width: 80px;
  --main-padding: 0.5rem;
  --cover-blurred: 1.5rem;
  --font-primary: "Roboto", sans-serif;
  --font-secondary: "Roboto", sans-serif;
  --shadow-low: 0 1px 2px rgb(0 0 0 / 5%);
  --shadow-medium: 0 1px 3px rgb(0 0 0 / 35%);
  --shadow-high: 0 2px 4px rgb(0 0 0 / 50%);
  --shadow-very-high: 0 4px 8px rgb(0 0 0 / 50%);
  --text-shadow: 0 1px 2px rgb(0 0 0 / 35%);
  --duration: .5s;

   --txt: #000;
   --bg: #e8e8e8;
   --ads: #e8e8e8;
   --border-radius: 8px;
   --transition: all 0.3s ease;
   --shadow-md: rgba(0, 0, 0, 0.2) 0px 2px 3px 3px;
   --bds: 3px solid #585858;
   --bds1: linear-gradient(180deg, #FFF 0, rgba(252, 250, 238, 0.95) 31.05%, rgba(230, 240, 236, 0.97) 72.3%, #FFF 100%);
   --bds4: 0 8px 17px 2px #1c1f3a80, 0 3px 14px 2px #1c1f3a80, 0 5px 5px -3px #1c1f3a80, 0 0 0 6px #1c1f3a80;
   --bgs: #fff;
   --bgs1: #95939366;
   --bgs2: #ffffff;
 }

 html[data-theme=dark] {
   --bg-base: #171717;
   --bg-inset: #262626;
   --bg-subtle: #171717;
   --bg-lucid: rgb(255 255 255 / 4%);
   --bg-transparent: rgb(255 255 255 / 5%);
   --bg-form: var(--black);
   --color-title: var(--white);
   --color-text: #d4d4d4;
   --color-text-muted: #a3a3a3;
   --color-border: #404040;
   --color-logo: var(--white);

   --txt: #fff;
   --bg: #1a1a1a;
   --ads: #34353538;
   --border-radius: 8px;
   --transition: all 0.3s ease;
   --shadow-md: rgba(163, 158, 158, 0.66) 0px 1px 1px 1px;
   --bds: 3px solid #585858;
   --bds1: linear-gradient(180deg, #000 0, rgba(80, 79, 72, 0.95) 31.05%, rgba(34, 35, 35, 0.97) 72.3%, #000 100%);
   --bds4: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 0 0 6px rgba(255, 255, 255, 0.2);
   --bgs: #333;
   --bgs1: #444;
   --bgs2: #000;
 }

 body {
   font-family: var(--font-primary);
   overflow-x: hidden;
   min-height: 100%;
   background-color: var(--bg-main);
   color: var(--color-text);
   font: 100% Arial;
 }

 .counter_GOWFQ {
   position: absolute;
   top: .25rem;
   right: .25rem;
   margin: 0;
   display: flex;
   height: 1.25rem;
   align-items: center;
   justify-content: center;
   gap: .25rem;
   border-radius: .125rem;
   padding-right: .5rem;
   padding-left: .5rem;
   font-weight: 600;
   --tw-text-opacity: 1;
   color: rgba(255, 255, 255, var(--tw-text-opacity));
 }

 @media (min-width:1536px) {
   .counter_GOWFQ {
     font-size: .75rem !important;
     line-height: 1rem !important
   }
 }

 .counter_GOWFQ {
   background-color: rgba(36, 36, 36, .6);
 }

 .icon_LQuLC {
   z-index: 0;
   display: flex;
   width: auto;
   fill: currentColor
 }

 .x2_g5wU0 {
   height: .5rem;
   width: .5rem
 }

 @media (min-width:1100px) {
   .x2_g5wU0.responsive_M6u6o {
     height: .75rem
   }

   .x2_g5wU0.responsive_M6u6o {
     width: .75rem
   }
 }
.g-1 {
  gap:1rem
}
 @media (min-width:1280px) {
   .x2_g5wU0.responsive_M6u6o {
     height: 1rem
   }

   .x2_g5wU0.responsive_M6u6o {
     width: 1rem
   }
 }

 @media (min-width:1536px) {
   .x2_g5wU0.responsive_M6u6o {
     height: 1.25rem
   }

   .x2_g5wU0.responsive_M6u6o {
     width: 1.25rem
   }
 }

 .button_dn {
   cursor: pointer;
   display: block;
   width: 36px;
   /*! height: 41px; */
   margin: 0 auto;
   background: inherit;
   color: white;
   font: 110% "Arial";
   border-radius: 0px;
   border: 0px solid darkgreen;
 }

 .button_dn:hover {
   border: 0px solid #333;
   background-color: #404142;
 }

 .button_dn {
   /*! height: 44px; */
   /*! display: none; */
 }

 .imgNightDay {
   filter: opacity(100%);
   -webkit-filter: opacity(1);
 }

 .imgNightDay {
   height: 20px;
   width: 20px;
   vertical-align: text-bottom;
 }

 #sun-svg,
 html[data-theme=dark] #moon-svg {
   cursor: pointer;
   height: 24px;
   width: 24px;
   border: 0;
   background: none;
   display: none;
   fill: #e1e1e1;
   stroke: #e1e1e1;
 }

 #moon-svg,
 html[data-theme=dark] #sun-svg {
   display: inline-block;
   fill: #e1e1e1;
   cursor: pointer;
   height: 24px;
   width: 24px;
   border: 0;
   background: none;
 }

 .track-info {
   display: flex;
   width: 100%;
   flex-direction: column;
   justify-content: center;
   padding-left: 1rem;
   padding-right: 1rem;
 }

 .p-5 {
   display: flex;
   width: 100%;
   max-width: 24rem;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   border-radius: .5rem;
   background-color: rgba(24, 24, 24, var(--tw-bg-opacity));
   padding: 1.5rem;
   border: 2px solid transparent;
   padding: 1rem;
 }

 .mb-7 {
   margin-left: 2px;
   display: inline-flex;
   margin: 2px;
   margin-bottom: 2px;
   padding: 2px;

   box-shadow: 0 12px 14px -5px rgba(20, 29, 38, 0.2);
   background: var(--ads);
 }

 .YN {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 1rem;
   padding-bottom: 14px;
 }

 button {
   background: transparent;
   border: 0;
   cursor: pointer;
 }
 img,
 video {
   max-width: 100%;
   height: auto;
 }

 audio,
 canvas,
 embed,
 iframe,
 img,
 object,
 svg,
 video {
   display: block;
   vertical-align: middle;
 }

 img {
   vertical-align: middle;
 }

 a {
   text-decoration: inherit;
   color: transparent;
 }

 .link_Ro2Lz:hover {
   background: #55555554;
 }

 p {
   margin: 5px 0 20px 0;
   text-align: inherit;

 }

 a:link,
 a:visited {
   text-decoration: underline;
 }

 a:hover,
 a:active {
   text-decoration: none;
 }

 a img {
   border: 0;
 }

 h1 {

   display: inline-block;
   border-bottom: transparent;
   font-size: 20px;
   font-weight: normal;
 }

 h1.empty {
   width: 100%;
   text-align: center;
 }

 h2 {
   font-size: 18px;
   font-weight: normal;

   font-weight: 700;
 }

 h3 {
   font-size: 17px;
   font-weight: normal;

   font-weight: 700;
 }

 hr.op {
   opacity: 0.15;
   margin-bottom: 15px;
 }

.footer nav{
   z-index: 0;
   position: sticky;
 }

 #left {
   padding: 0 10px;
   line-height: 26px;
 }

 #player {
   display: block;
   width: 500px;
   height: 0px;
   background-color: white;
   color: red;
   position: absolute;
 }

#cc {
  background-color: #000;
  color: #e1e1e1;
  border-top-color: #333;
}

#cc {
  position: fixed;
  z-index: 999;
  overflow: hidden;
  font-family: Calibri, Helvetica, Arial;
  padding: 10px 20px;
  color: white;
  background-color: #002029;
  border-top: 1px solid #ccc;
  bottom: 0px;
  right: 0px;
  left: 0px;
  font-size: 16px;
  display: none;
}

#cc span {
  display: inline-block;
  float: right;
  color: black;
  background-color: #d7bf00;
  text-decoration: none;
  padding: 5px 30px;
  border-radius: 5px;
  cursor: pointer;
}
 #cc span:hover {
   background-color: #dc271f;
   color: white;
 }

 #cc div {
   padding: 5px 0 0;
 }

 #cc div a {
   margin-left: 5px;
   color: #0fbaeb;
   text-decoration: underline;
 }

 @media only screen and (max-width:400px) {
   div.long {
     letter-spacing: -1.7px;
   }
 }

 @media only screen and (max-width:895px) {
   div#left_col {
     display: none;
   }

 }

 @media (max-width: 1100px) {
   .ml-4 {
     margin-left: 1rem;
     position: static;
     margin-top: 2.3vw;
     position: initial;
   }
 }

 a,
 a:link,
 a:visited,
 a:hover,
 a:active {
   cursor: pointer;
   text-decoration: none;
 }

 nav {
   background: var(--bg);
   top: 0;
   width: 100%;
   margin: auto;
   margin: 0 0 0 0;
   padding: 0;
   position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
 }

 nav .wrapper {
   position: relative;
   max-width: 1200px;
   padding: 0px 30px;
   height: 47px;
   line-height: 46px;
   margin: auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 90%;
 }

 .wrapper .logo a {
   color: var(--txt);
   font-size: 22px;
   font-weight: 600;
   text-decoration: none;
   font-family: monaco, courier, monospace;
 }

 .wrapper .logo a:hover {
   color: #555;
 }

 .wrapper .nav-links {
   display: inline-flex;
 }

 .nav-links li {
   list-style: none;
 }

 .nav-links li a {
   text-decoration: none;
   padding: 9px 15px;
   border-radius: 5px;
   transition: all 0.3s ease;
   color: var(--txt);
 }

 .nav-links li a:hover {
   background: #404142;
 }

 .nav-links .mobile-item {
   display: none;
 }

 .nav-links .drop-menu {
   position: absolute;
   background: #242526;
   width: 180px;
   line-height: 45px;
   top: 85px;
   opacity: 0;
   visibility: hidden;
   box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
 }

 .nav-links li:hover .drop-menu,
 .nav-links li:hover .mega-box {
   transition: all 0.9s ease;
   top: 49px;
   opacity: 1;
   visibility: visible;
   /* width: 100%; */
 }

 .drop-menu li a {
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: center;
   padding-top: .75rem;
   padding-bottom: .75rem;
   padding-left: 1rem;
   padding-right: 1rem;
   line-height: 1rem;
   transition-property: all;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
   transition-duration: 150ms;
   transition-duration: .7s;
   color: white;
 }

 .mega-box {
   position: absolute;
   left: 0;
   width: 100%;
   padding: 0 30px;
   top: 85px;
   opacity: 0;
   visibility: hidden;
 }

 .mega-box .content {
   background: #242526;
   padding: 25px 20px;
   display: flex;
   width: 100%;
   justify-content: space-between;
   box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
 }

 .mega-box .content .row {
   width: calc(25% - 30px);
   line-height: 45px;
 }

 .content .row img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .content .row header {
   color: #f2f2f2;
   font-size: 20px;
   font-weight: 500;
 }

 .content .row .mega-links {
   margin-left: -40px;
   border-left: 1px solid rgba(255, 255, 255, 0.09);
 }

 .row .mega-links li {
   padding: 0 20px;
 }

 .row .mega-links li a {
   padding: 0px;
   padding: 0 20px;
   color: #d9d9d9;
   font-size: 17px;
   display: block;
 }

 .row .mega-links li a:hover {
   color: #f2f2f2;
 }

 .wrapper .btn {
   color: #fff;
   font-size: 20px;
   cursor: pointer;
   display: none;
 }

 .wrapper .btn.close-btn {
   position: absolute;
   right: 30px;
   top: 10px;
 }

 @media (max-width: 1100px) {
   .wrapper .btn {
     display: inline-flex;
   }

   .genres {
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 9999px;
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
     padding-left: 1rem;
     padding-right: 1rem;
     line-height: 1rem;
   }

   .wrapper .nav-links {
     position: fixed;
     height: 100vh;
     width: 100%;
     /* max-width: 350px; */
     top: 0;
     left: -100%;
     background: var(--bg);
     display: block;
     padding: 50px 10px;
     line-height: 50px;
     overflow-y: auto;
     box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.18);
     transition: all 0.3s ease;
   }

   #menu-btn:checked~.nav-links {
     left: 0%;
   }

   #menu-btn:checked~.btn.menu-btn {
     display: none;
   }

   #close-btn:checked~.btn.menu-btn {
     display: flex;
   }

   .nav-links li {
     margin: 15px 10px;
   }

   .nav-links li a {
     padding: 0 20px;
     display: block;
     font-size: 20px;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 9999px;
     padding-top: .25rem;
     padding-bottom: .25rem;
     padding-left: .5rem;
     padding-right: .5rem;
     text-align: center;
     line-height: 1.5rem;
     color: var(--txt);
   }

   .nav-links .drop-menu {
     position: static;
     opacity: 1;
     top: 65px;
     visibility: visible;
     padding-left: 20px;
     width: 100%;
     max-height: 0px;
     /* overflow: hidden; */
     box-shadow: none;
     transition: all 0.3s ease;
   }

   #showDrop:checked~.drop-menu,
   #showMega:checked~.mega-box {
     max-height: 100%;
   }

   .nav-links .desktop-item {
     display: none;
   }

   .nav-links .mobile-item {
     display: none;
     color: #f2f2f2;
     font-size: 20px;
     font-weight: 500;
     padding-left: 20px;
     cursor: pointer;
     border-radius: 5px;
     transition: all 0.3s ease;
   }

   .nav-links .mobile-item:hover {
     background: #3A3B3C;
   }

   .drop-menu li {
     margin: 0;
   }

   .drop-menu li a {
     border-radius: 5px;
     font-size: 18px;
   }

   .mega-box {
     position: static;
     top: 65px;
     opacity: 1;
     visibility: visible;
     padding: 0 20px;
     max-height: 0px;
     overflow: hidden;
     transition: all 0.3s ease;
   }

   .mega-box .content {
     box-shadow: none;
     flex-direction: column;
     padding: 20px 20px 0 20px;
   }

   .mega-box .content .row {
     width: 100%;
     margin-bottom: 15px;
     border-top: 1px solid rgba(255, 255, 255, 0.08);
   }

   .mega-box .content .row:nth-child(1),
   .mega-box .content .row:nth-child(2) {
     border-top: 0px;
   }

   .content .row .mega-links {
     border-left: 0px;
     padding-left: 15px;
   }

   .row .mega-links li {
     margin: 0;
   }

   .content .row header {
     font-size: 19px;
   }
 }

 nav input {
   display: none;
 }

 .m_E {
   font-size: 1rem;
   font-weight: 600;
 }

 @media (min-width:1100px) {
   .m_E {
     font-size: .75rem;
   }
 }

 @media (min-width:1280px) {
   .m_E {
     font-size: .875rem;
   }
 }

 @media (min-width:1536px) {
   .m_E {
     font-size: 1rem;
   }
 }

 pre {
   line-height: 3.25rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 300px;
 }

 code.language-javascript {
   padding: .5rem;
   border-width: 0;
   border-radius: .25rem;
   text-align: center;
   font-size: 1.125rem;
   line-height: 1.75rem;
   background: var(--txt);
   color: var(--bg);
 }

 pre button {
   padding: 5px 5px;
   margin-right: 0px;

   border: none;
   border-radius: 50px;
   cursor: pointer;
   transition: all ease-in-out 9s;

   display: flex;
   flex-direction: column;
   align-items: center;
   width: 140px;
   margin: 0 auto;
   background: var(--txt);
 }

 .list_l0wjB {
   display: flex;
   width: 100%;
   flex-direction: column;
   gap: .75rem;
   padding: 0;
 }

 .insWrapFix {
   width: 100%;
   margin-top: 0;
   margin-bottom: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative
 }

 .insWrap {
   width: 100%;
   margin-top: 20px;
    margin-bottom: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative
 }

 .insWrap:first-child {
   margin-top: 0
 }

 .insWrapBg {
   background: var(--ads);
 }

 .insWrapBg::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: var(--txt);
   background-size: contain;
   opacity: .05;
   pointer-events: none
 }

 .ins {
   width: 100%
 }

 .insTop {
   height: 100px;
   width: 300px;
   align-items: center !important;
   justify-content: center !important;
   margin-left: auto;
   margin-right: auto;
 }

 @media (min-width:768px) {
   .insTop {
     height: 90px !important;
   }

   .insTop {
     max-height: 90px !important;
   }

   .insTop {
     max-width: 728px !important;
   }
 }

 @media (min-width:1280px) {
   .insTop {
     height: 90px !important;
   }

   .insTop {
     max-height: 90px !important;
   }

   .insTop {
     width: 728px !important;
   }

   .insTop {
     max-width: 728px !important;
   }
 }

 .ins22 {
  display:flex!important;
  height:50px!important;
  max-height:100px!important;
  width:320px!important;
  max-width:320px!important;
  align-items:center!important;
  justify-content:center!important;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width:768px) {
  .ins22 {
    height:90px!important;
  }
  .ins22 {
    max-height:100px!important;
  }
  .ins22 {
    max-width:728px!important;
  }
}
@media (min-width:1280px) {
  .ins22 {
    height:250px!important;
  }
  .ins22 {
    max-height:250px!important;
  }
  .ins22 {
    width:970px!important;
  }
  .ins22 {
    max-width:970px!important;
  }
}

@media screen and (max-width: 487px) {
    .insBottom {
        min-height: 83.2vw;
        width: 100vw;
        margin-left: auto;
        margin-right: auto;
    }
}

 @media screen and (min-width: 488px) {
   .insBottom {
     min-height: 280px;
   }
 }

 .insBottom {
   flex-direction: column;
   min-height: 0;
 }

 .insFix {
   left: 50%;
   transform: translate(-50%, 0);
   z-index: 9999998;
   position: fixed;
   bottom: 0px;
   text-align: center;
   line-height: 0px;
   height: 50px !important;
   width: 300px !important;
   margin-left: auto;
   margin-right: auto;
 }

 @media (min-width:1100px) {
   .insFix {
     height: 90px !important;
   }

   .insFix {
     max-height: 90px !important;
   }

   .insFix {
     width: 728px !important;
   }

   .insFix {
     max-width: 728px !important;
   }
 }

 @media (min-width:1100px) {
   .margin_vvxgO {
     padding-top: .75rem;
     padding-bottom: .75rem;
   }
 }

 @media (min-width:1280px) {
   .margin_vvxgO {
     padding-top: 1.5rem;
     padding-bottom: 1.5rem;
   }
 }

 .resp3 {
   height: 600px;
   width: 300px;
 }

 @media (max-width:1100px) {
   div.ad_mobil {
     display: none;
   }
 }

 .ad_mobil {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   outline: none !important;
   list-style: none;
   height: 600px;
   width: 300px;
   top: 50px;
   display: inline-block;
   position: -webkit-sticky;
   position: fixed;
   padding: 14px;
 }

 .store-buttons {
   display: block;
   text-align: center;
   padding: 20px;
 }

 .store-button {
   display: inline-block;
   width: 200px;
   margin: 10px auto;
   padding: 10px;
   background: linear-gradient(to right, rgb(87, 161, 162), rgb(231, 161, 8) 100%);
   color: var(--txt);
   text-decoration: none;
   border-radius: 5px;
   border: none;
   font-size: 16px;
   font-weight: 700;
   height: 68px;
   top: 50%;
   position: relative;
   padding: 2px;
   box-shadow: 0 12px 14px -5px rgba(20, 29, 38, 0.2);
 }

 .store-button img {
   height: 47px;
   vertical-align: middle;
   margin-right: 0;
   top: 30%;
   position: absolute;
   transform: translateX(-50%);
 }

 .icon-white {
   left: 50%;
   transform: translateX(50%);
   filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
 }

 .store-button {
   color: var(--color);
   font-size: 16px;
   font-weight: 700;
 }

 .store-buttons {
   text-align: center;
 }

 #pause {
   display: none;
 }

 #load {
   display: none;
 }

 input[type=range] {
   appearance: none;
   /*! height: 6px; */
   outline: none;
   border: none;
   max-width: 90%;
   margin-left: 3px;
   -webkit-appearance: none;
   /* Override default look */
   appearance: none;
 }

 div.center {
  text-align: center;
  padding: 0 5px;
}

div.left {
  padding: 0 10px;
  line-height: 26px;
}

 .playerJs-volume::-moz-range-thumb {
   -webkit-appearance: none;
   /* Override default look */
   appearance: none;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: red;
   cursor: pointer;
 }

 .playerJs-volume::-webkit-slider-thumb {
   -webkit-appearance: none;
   /* Override default look */
   appearance: none;
   border-radius: 50%;
   background: #afe9f8;
   /* Green background */
   cursor: pointer;
   /* Cursor on hover */
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: red;
 }

 .playerJs-volume {
   position: absolute;
   width: calc(100% - 60px);
   left: 45px;
   top: calc(50% - 5px);
   height: 10px;
   -webkit-appearance: none;
   border-radius: 5px;
   background: #d3d3d3;
   background: linear-gradient(to right, rgb(53, 104, 127) 100%, #d3d3d3 100%);
   outline: none;
   cursor: pointer;
   -webkit-transition: .2s;
   transition: opacity .2s;
 }

 #volumeUp,
 #volumeDown,
 #volumeOff,
 #volumeMute {
   margin-left: 5px;
 }

 #volumeMute {
   color: white;
   display: none;
   vertical-align: top;
 }

 #volumeUp {
   color: white;
   display: inline-block;
   vertical-align: top;
 }

 #volumeOff {
   color: white;
   display: none;
   vertical-align: top;
 }

 #volumeDown {
   color: white;
   display: none;
   vertical-align: top;
 }

 @media (min-width:1100px) {
   #track-title,
   #track-artist {
     max-width: 300px
   }
 }

 @media (min-width:1280px) {
   #track-title,
   #track-artist {
     max-width: 400px
   }
 }

 @media (min-width:1536px) {
   #track-title,
   #track-artist {
     max-width: 500px
   }
 }

 @media (min-width:1900px) {
   #track-title,
   #track-artist {
     max-width: 650px
   }
 }

 @media (max-width: 728px) {
   #track-title,
   #track-artist {
     max-width: 300px;
   }
 }

 #track-title,
 #track-artist {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   background: var(--bg);
   color: var(--txt);
   box-shadow: var(--shadow-md);
 }

 .radio-player .genres {
   display: flex;
   flex-direction: column;
   margin: 10px 30px 10px 0;
}

 .radio-player h1 {
   font-weight: bold;
   color: var(--txt);
   font-size: 1.5rem;
   line-height: 2rem;
   position: absolute;
   top: 10%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: max-content;
   font-size: 1.09rem;
   line-height: 1rem;
   padding: 10px 15px;
   background-color: #FFF;
   border-radius: 20px;
   display: inline-block;
   margin: 5px 5px 5px 0;
   background: var(--bg);
   box-shadow: var(--shadow-md);
 }

 .radio-player {
   position: relative;
   /*! background:var(--bds1); */
   border-radius: 20px;
   /*! margin:30px auto 20px; */
   /*! border-radius: var(--border-radius); */
   /*! box-shadow: var(--shadow-md); */
   /*! border: var(--bds); */
   /*! background: #333; */
   background: var(--bgs);
   box-shadow: var(--shadow-md);
 }

 .radio-player>div:first-child {
   padding-top: 55px;
 }

 .radio-player>div:first-child>div {
   position: relative;
   /*! width: 100%; */
   margin: 0 auto;
   margin: 20px;
 }

 .radio-player>div:not(:first-child) {
   width: 100%;
   position: initial
 }

 .thumb_EIjpk {
  display:flex;
  width:100%;
  justify-content:center
}
@media (min-width: 1100px) {
  .thumb_EIjpk {
    grid-column-start:1
  }
  .thumb_EIjpk {
    grid-row-start:1
  }
  .thumb_EIjpk {
    grid-row-end:6
  }
  .thumb_EIjpk {
    height:200px
  }
  .thumb_EIjpk {
    width:200px
  }
}
@media (min-width: 1536px) {
  .thumb_EIjpk {
    height:300px
  }
  .thumb_EIjpk {
    width:300px
  }
}
.thumb_EIjpk img {
  height:300px
}
.thumb_EIjpk img {
  width:300px
}
.thumb_EIjpk img {
  border-radius:0.5rem
}
@media (min-width: 1100px) {
  .thumb_EIjpk img {
    height:200px
  }
}
@media (min-width: 1100px) {
  .thumb_EIjpk img {
    width:200px
  }
}
@media (min-width: 1536px) {
  .thumb_EIjpk img {
    height:300px
  }
}
@media (min-width: 1536px) {
  .thumb_EIjpk img {
    width:300px
  }
}

 .radio-player .radio-image {
   /* margin:20px; */
   /* width:200px; */
   border-radius: 10px;
   /* margin: 20px; */
   /* width: 200px; */
   border-radius: 10px;
   background-color: var(--bgs);
 }

 .radio-player .circle {
   position: absolute;
   width: 60px;
   height: 60px;
   /*! top: 50%; */
   /*! transform: translate(-50%,-50%); */
   border-radius: 50%;
  background-color: var(--primary);
  box-shadow: var(--shadow-very-high);
  transition: background-color var(--duration);

   /*! left: 8px; */
   /*! bottom: 10px; */
 }

 .radio-button {
   z-index: 0;
   /*! position: absolute; */
   width: 60px;
   height: 60px;
   /*! top: 50%; */
   /*! transform: translate(-50%,-50%); */
   border-radius: 50%;
   cursor: pointer;
   /*! left: 8px; */
    /*bottom: 10px; */
 }

 svg.radio-button {
   width: 60px;
   height: 60px;
   /*! top: 50%; */
   /*! transform: translate(-50%,-50%); */
   left: 8px;
   bottom: 10px;
 }

 .radio-player .genres span {
   color: #535360;
   font-size: 1rem;
   line-height: 1rem;
   padding: 10px 15px;
   background-color: #FFF;
   border-radius: 20px;
   box-shadow: 0 12px 14px -5px rgba(20, 29, 38, 0.2);
   display: inline-block;
   width: auto;
   margin: 5px 5px 5px 0;
 }

 .radio-player .buttons {
   display: flex;
   margin: 10px 30px 10px 0;
 }

 .radio-player .sub-buttons {
   display: flex;
   align-content: center
 }

 .radio-player .buttons img {
   width: 33px;
   height: 33px;
   cursor: pointer
 }

 #volume_controls {
   position: relative;
   display: flex;
   background: var(--bg);
   border-radius: 20px;
   width: 100%;
   padding: 0 10px 0 0;
   box-shadow: var(--shadow-md);
 }

 @media screen and (min-width:1220px) {
   h1 {
     font-size: 1.5rem;
     line-height: 2rem
   }
 }

 @media (max-width: 1100px) {
   .radio-player>div:first-child>div {
     position: relative;
     /*! width: 300px; */
     width: 300px;
     margin: 0 auto;
     max-width: 100%;
     height: auto;
   }

   .radio-player .genres {
    display: flex;
    flex-direction: column;
    margin: 0px 0px 0px 0;
}

   .radio-player>div:first-child>div {
     margin-block: 20px
   }

   .radio-player h1 {
     top: 8%;
     margin: 0;
   }

   .radio-player>div:first-child h1 {
     display: block;
     text-align: center
   }

   .radio-player>div:not(:first-child) h1 {
     display: none
   }

   .radio-player>div:not(:first-child) {
     /* width:240px; */
     margin: auto
   }

   .radio-player .buttons {
     margin: 0 auto;
     width: 240px;
     display: block;
   }

   .radio-player .sub-buttons {
     margin: 10px auto;
     width: fit-content
   }
 }

 @media (min-width: 1100px) {
   .radio-player>div:first-child h1 {
     display: none;
   }

   .radio-player>div:not(:first-child) h1 {
     display: block;
     text-align: left
   }

   .radio-player {
     display: flex;
   }

   .radio-player>div:first-child {
     padding-top: 0
   }

   .radio-player>div:not(:first-child) {
     width: calc(100% - 240px);
     position: relative;
     padding: 20px 20px 20px 20px
   }
 }

 /* Últimas Tocadas */
 .recent-tracks {
   width: 100%;
   /*! width: 150px; */
 }

 @media (min-width:1280px) {
   .recent-tracks {
     padding-top: 1.5rem;
     /*! padding-bottom:1.5rem; */
   }
 }

 .recent-tracks h3 {
   padding: .5rem;
   text-align: left;
   font-size: 1.25rem;
   line-height: 1.75rem;
   font-weight: 700
 }

 @media (min-width:1536px) {
   .recent-tracks h3 {
     font-size: 1.5rem;
     line-height: 2rem
   }
 }

 .tracks-list {
   display: flex;
   flex-direction: column;
   gap: .5rem;
   padding-left: .5rem;
   padding-right: .5rem;
   padding-top: 1rem;
   /*! padding-bottom:1rem; */
   /*! width: 150px; */
     height: 100%;
   overflow: hidden;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #444; /* Borda mais escura */
    border-radius: 8px;
    padding: 10px;
 }

 @media (min-width:768px) {
   .tracks-list {
     display: grid
   }

   .tracks-list {
     grid-template-columns: repeat(2, minmax(0, 1fr))
   }
 }

 @media (min-width:1536px) {
   .tracks-list {
     grid-template-columns: repeat(3, minmax(0, 1fr))
   }
 }

 .track-item {
   display: flex;
   cursor: pointer;
   flex-direction: row;
   border-radius: 10px;
   padding: 1rem;
   background: var(--bgs);
   box-shadow: var(--shadow-md);
   border-radius: 8px;
   transition: all 0.3s ease;
   /*! width: 150px;
   height: 130px;*/
   height: 88px;
 }

 .track-item img {
   z-index: 0;
 }

 .track-item img {
   /*!width: 100px;
   height: 100px;*/
   width: 60px;
  height: 60px;
   box-shadow: var(--bds4);
 }

 .track-item img {
   border-radius: 0.25rem;
 }

 .track-time {
   color: #999;
   font-size: 14px;
 }

 @media (min-width:1280px) {
   .load-more-btn {
     margin: 0
   }

   .load-more-btn {
     justify-content: center;
   }
 }

 button.load-more-btn {
   margin-left: auto;
   margin-right: auto;
   margin-top: 1rem;
   margin-bottom: 1rem;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: .5rem;
   width: 100%;


   background: #105192;
   border: none;
   border-radius: 8px;
   color: white;
   font-size: 16px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.3s ease;

   display: none;
 }

 @media (max-width:1536px) {
   .load-more-btn {
     position: relative;
     left: 50%;
     transform: translate(-50%, -50%);
   }
 }

 .load-more-btn:hover {
   background: #0052a3;
 }

 .track-item:hover {
   background: var(--bgs1);
 }

 .author {
   font-size: 1rem;
   line-height: 1.5rem;
   font-weight: 600;
   color: var(--bds);
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
 }

 @media (min-width: 1536px) {
   .author {
     font-size: 1.125rem;
     line-height: 1.75rem;
   }
 }

 .track-time {
   display: flex;
   align-items: center;
   gap: 0.25rem;
   font-size: 0.75rem;
   line-height: 1rem;
 }

 .name {
   font-size: 1.125rem;
   line-height: 1.75rem;
   font-weight: 900;
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
 }

 @media (min-width: 1536px) {
   .name {
     font-size: 1.25rem;
     line-height: 1.75rem;
   }
 }

 .name {
   line-height: 1.25rem
 }

 .x3_XLd4L {
   fill: var(--txt);
 }

 html {
   line-height: 1.5;
   -webkit-text-size-adjust: 100%;
   -webkit-font-smoothing: antialiased
 }

 *,
 :before,
 :after {
   box-sizing: border-box
 }

 html,
 body {
   height: 100%
 }

 * {
   margin: 0
 }

 fieldset,
 legend {
   padding: 0
 }

 iframe,
 fieldset {
   border-width: 0
 }

 hr {
   border-style: solid;
   border-width: 1px 0 0;
   color: inherit;
   height: 0;
   overflow: visible
 }

 a {
   color: inherit;
   text-decoration: none
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-size: inherit;
   font-weight: inherit;
   overflow-wrap: break-word
 }

 address {
   font-style: normal;
   line-height: inherit
 }

 abbr[title] {
   text-decoration: underline dotted
 }

 b,
 strong {
   font-weight: bolder
 }

 small {
   font-size: 80%
 }

 sub,
 sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
   vertical-align: baseline
 }

 sub {
   bottom: -.25em
 }

 sup {
   top: -.5em
 }

 button,
 /* input, */
 optgroup,
 select,
 textarea {
   padding: 0;
   border-width: 0;
   font-size: 100%;
   font-family: inherit;
   line-height: inherit;
   color: inherit
 }

 textarea:focus,
 input:focus {
   outline: none
 }

 textarea {
   resize: vertical
 }

 button,
 select {
   text-transform: none
 }

 button,
 [type=button],
 [type=reset],
 [type=submit] {
   -webkit-appearance: button;
   background-color: transparent;
   display: inline-block;
   vertical-align: middle
 }

 button:not(:disabled),
 [type=button]:not(:disabled),
 [type=reset]:not(:disabled),
 [type=submit]:not(:disabled) {
   cursor: pointer
 }

 progress {
   vertical-align: baseline
 }

 ::-webkit-file-upload-button {
   -webkit-appearance: button;
   font: inherit
 }

 summary {
   display: list-item
 }

 [hidden] {
   display: none
 }

 ol,
 ul,
 dl,
 dd {
   list-style: none;
   padding: 0
 }

 table {
   border-collapse: collapse;
   max-width: 100%
 }

 tbody,
 td,
 th,
 thead,
 tr {
   border-width: 0;
   text-align: inherit
 }

 tr>* {
   padding: .75rem;
   word-break: normal
 }

 img,
 svg,
 video,
 canvas {
   height: auto
 }

 source {
   display: none
 }

 img,
 svg,
 video,
 canvas,
 iframe,
 embed,
 object {
   display: block;
   max-width: 100%
 }

 audio,
 video {
   width: 100%
 }

 .stream-item-image {
   width: 40px;
   height: 40px;
   overflow: hidden;
   border-radius: .5rem
 }

 .staggered>* {
   transition-property: transform, color, opacity, background-color;
   transition-duration: var(--duration);
   transition-delay: calc(var(--delay) * .05s), 0s;

   background: var(--bg-main);
  color: var(--white);
  border-radius: 1rem;
  overflow: hidden;
  margin: 6px;
  box-shadow: var(--shadow-md);
 }

 @keyframes garacao {

   0%,
   90%,
   to {
     transform: scale(1)
   }

   92% {
     transform: scale(1.2)
   }

   94% {
     transform: scale(.9)
   }

   96% {
     transform: scale(1.1)
   }

   98% {
     transform: scale(.95)
   }
 }

 .aside {
   position: fixed;
   z-index: 100;
   inset: auto 1rem 1rem;
   width: 300px;
 }

 @media (min-width: 768px) {
   .aside {
     width: 300px;
     inset: 0 auto 0 0;
   }
 }

 @media (max-width: 767px) {
   .aside {
     border-radius: .75rem;
     background-color: #0a0a0ad9
   }
 }

 .video {
   aspect-ratio: 1820/224;
   background-color: var(--bg-main)
 }

 .main {
   min-height: 100vh;
   background-color: var(--bg-base);
   box-shadow: var(--shadow-very-high);
   padding: 1rem;
   transition: background-color var(--duration);
 }

 @media (min-width: 768px) {
   .main {
     padding: var(--main-padding);
     padding-top: 56px;
   }
 }

 @media (max-width: 767px) {
   .main {
     /*! padding-bottom: calc(var(--main-padding) + 52px); */
     padding: 3px;
     padding-top: 56px;
   }
 }

 .container {
   max-width: 1600px;
   margin: 0 auto
 }

 @media (min-width: 768px) {
   .layout {
     padding-left: 0px;
   }
 }

 @media (min-width:1100px) {
   .layout {
     padding-left: 300px;
   }
 }

 @media (min-width:1280px) {
   .layout {
     padding-left: 300px;
   }
 }

 @media (min-width: 1536px) {
   .layout {
     padding-left: 300px;
   }
 }

 .layout {
   background-color: var(--bg-base);
   box-shadow: var(--shadow-very-high);
 }

 .layout-content {
   display: grid;
   grid-template-areas: "content" "sidebar";
   grid-template-columns: 100%;
   gap: 1rem
 }

 @media (min-width: 992px) {
   .layout-content {
     gap: 2rem;
     grid-template-areas: var(--content-areas);
     grid-template-columns: var(--content-columns)
   }
 }

 .layout-content-default {
   --content-areas: "content sidebar";
   --content-columns: minmax(0, 1fr) 386px
 }

 .layout-content-player {
   --content-areas: "content sidebar";
   --content-columns: 500px minmax(0, 1fr)
 }

 .layout-left {
   grid-area: content
 }

 .layout-right {
   grid-area: sidebar
 }

 .footer {
   color: var(--color-text-muted);
   padding-top: 3rem
 }

 .footer a {
   transition: color var(--duration)
 }

 .footer a:hover {
   color: var(--primary)
 }

 .footer-last {
   border-top: 1px solid var(--color-border);
   margin-top: 2rem;
   padding-top: 2rem
 }

 .footer-disclaimer {
   margin-top: .5rem
 }

 .skeleton-text {
   background-color: var(--bg-transparent);
   color: transparent;
   -webkit-user-select: none;
   user-select: none
 }

 .alert {
   padding: 1.5rem;
   background-color: var(--bg-lucid)
 }

.alert-danger {
  color: #ffffff;
  background-color: #ff0039;
  border-color: #f0005e;
}

lement {
}
.alert-dismissable .close, .alert-dismissible .close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}
button.close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
}
.close {
  text-decoration: none;
  text-shadow: none;
  opacity: 0.4;
}
.close {
  float: right;
  font-size: 22.5px;
  font-weight: bold;
  line-height: 2;
  color: #ffffff;
  text-shadow: 0 1px 0 #ffffff;
  filter: alpha(opacity=20);
  opacity: 2;
}

 .user {
   padding: 1.5rem;
   margin-bottom: 1.5rem;
   border-radius: .5rem;
   background-color: var(--bg-lucid)
 }

 .preview-image-src {
   width: 60px;
   height: 60px
 }

 body:not(.site-loaded):not(.body-static) .cookies-choise {
   opacity: 0;
   transform: translateY(4rem)
 }

 @media (max-width: 767px) {
   .cookies-choise-accept {
     width: 100%
   }
 }

 .app-image {
   max-width: 100px
 }

 @media (min-width: 576px) {
   .app-image {
     max-width: 160px
   }
 }

 @media (min-width: 768px) {
   .app-image {
     max-width: 200px
   }
 }

 @media (min-width: 992px) {
   .app-image {
     max-width: 260px
   }
 }

 .install-info {
   min-height: 100vh
 }

 .install-app-icon {
   width: 62px;
   padding: 16px;
   background-color: var(--primary);
   color: #f6f9f8;
 }

 .install-app-icon svg {
   width: 28px
 }

 .install-app-text {
   padding: 8px 1rem
 }

 .btn-install-app {
   background: var(--bg-main);
   color: var(--white);
   border-radius: 1rem;
   overflow: hidden;
   margin: 6px;
   box-shadow: var(--shadow-md);
 }

 @media (max-width: 767px) {
   .btn-install-app {
     width: 97%;
   }
 }

 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   column-gap: .5rem;
   background-color: var(--btn-bg, var(--gray-700));
   padding: var(--btn-padding, .75rem .875rem);
   color: var(--btn-color, var(--white));
   font-size: var(--btn-fs, .875rem);
   font-weight: 500;
   border-radius: .5rem;
   line-height: 1.5;
   transition-property: box-shadow, background-color, color;
   transition-duration: var(--duration)
 }

 .btn:hover {
   background-color: var(--btn-bg-hover, var(--gray-800))
 }

 .btn-primary {
   --btn-bg: var(--primary);
   --btn-bg-hover: var(--primary-hover)
 }

 .btn-rounded {
   border-radius: 999px
 }

 .btn-full {
   width: 100%;
   justify-content: center
 }

 .btn-outline {
   --btn-bg: transparent;
   --btn-bg-hover: transparent;
   backface-visibility: hidden;
   box-shadow: 0 0 0 1px var(--btn-shadow-color, var(--gray-300)) inset
 }

 .btn-outline:hover,
 .btn-outline.is-active {
   --btn-color: var(--primary);
   --btn-shadow-color: var(--primary)
 }

 .cards-default {
   --cols-min: 16rem
 }

 .cards-ads {
   margin-bottom: 1rem
 }

 .cards-ads:has(>.adsbygoogle[data-ad-status=unfilled]) {
   display: none
 }

 @media (min-width: 768px) {
   .cards-ads {
     margin-bottom: 1.5rem
   }
 }

 .card {
   background-color: var(--white);
   box-shadow: var(--shadow-medium);
   background-color: var(--gray-900);

       
     background: var(--bg-main);
  color: var(--white);
  border-radius: 1rem;
  overflow: hidden;
  margin: 6px;
  box-shadow: var(--shadow-md);
 }

 .card-loader {
   width: 45px;
   height: 45px;
   z-index: 50
 }

 .card-meta-loaded .card-loader {
   display: none
 }

 body:not(.site-loaded) .card:not(.card-big) {
   transform: translateY(4rem);
   opacity: 0
 }

 .card-image img {
   width: 100%
 }

 .card-content:not(:hover) {
   --card-image-scale: 1
 }

 .card-content:not(:hover):not(.meta-loaded) .loader {
   opacity: 0
 }

 .card-body {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   color: var(--white);
   position: relative;
   z-index: 10;
   aspect-ratio: var(--card-aspect-ratio, 4/3);
   padding: 1rem;
 }

 @media (min-width: 768px) {
   .card-body {
     padding: 1rem;
   }
 }

 .card-body-wrapper {
   max-width: 600px;
   transition: opacity var(--duration)
 }

 .card-title {
   text-shadow: var(--text-shadow)
 }

 .card-image {
   transition: transform var(--duration), opacity var(--duration);
   will-change: transform;
   transform: scale(var(--card-image-scale, 1.1))
 }

 .card:not(:hover) .card-footer {
   opacity: 0;
   height: 0
 }

 .card-footer {
   height: 40px;
   transition: opacity var(--duration), height var(--duration);
   will-change: opacity, height
 }

 .card-footer-wrapper {
   padding-top: .75rem
 }

 @media (min-width: 768px) {
   .card-big {
     --card-aspect-ratio: 16/9
   }
 }

 @media (min-width: 992px) {
   .card-big {
     --card-aspect-ratio: 21/9
   }
 }

 .banners {
   --cols-min: 8rem
 }

 .banner-img {
   border-radius: .5rem;
 }

 body:not(.site-loaded):not(.body-static) .banner-img {
   opacity: 0
 }

 .i {
   stroke-width: var(--i-stroke, 2);
   width: var(--i-size, 20px);
   height: var(--i-size, 20px);
   stroke: currentColor;
   stroke-linecap: round;
   stroke-linejoin: round;
   fill: none
 }

 .i-s {
   --i-size: 18px
 }

 .i-m {
   --i-size: 24px
 }

 .i-l {
   --i-size: 30px
 }

 .i-xl {
   --i-size: 45px
 }

 .i-xxl {
   --i-size: 60px
 }

 .typography :where(h1,
   h2,
   h3,
   h4,
   h5,
   h6) {
   margin-bottom: var(--typography-spacing-headings, .75rem);
   color: var(--color-title);
   font-weight: 500;
   align-items: center;
   display: flex
 }

 .typography :where(h1) {
   font-size: clamp(1.5rem, 5vw, 1.75rem)
 }

 .typography :where(h2) {
   font-size: clamp(1.25rem, 5vw, 1.3rem);
   --typography-spacing-headings: 1.5rem
 }

 .typography :where(blockquote) {
   border-inline-start: 4px solid var(--color-border);
   padding-inline-start: 1.5rem;
   position: relative
 }

 .typography :where(ul,
   ol) {
   padding-inline-start: 1.5rem
 }

 .typography :where(ul) {
   list-style: disc
 }

 .typography :where(ol) {
   list-style: decimal
 }

 .typography :where(figure) {
   position: relative
 }

 .typography :where(figure) :where(figcaption) {
   text-align: center;
   margin-top: .75rem;
   font-size: .875rem
 }

 .typography :where(iframe[src^=http]) {
   aspect-ratio: 16/9;
   width: 100%;
   height: auto
 }

 .typography :where(table) th {
   font-weight: 700
 }

 .typography :where(table) tr>* {
   border: 1px solid var(--color-border);
   padding: .5rem .75rem
 }

 .typography :where(p,
   figure,
   img,
   blockquote,
   ul,
   ol,
   pre,
   table,
   div[class]):not(:where(:last-child,
     :where(figure,
       blockquote) :last-of-type)) {
   margin-bottom: var(--typography-spacing)
 }

 .article-header {
   margin-bottom: 1rem
 }

 .form-columns {
   --cols-min: 34rem
 }

 .form-title {
   margin-bottom: 1rem;
   font-weight: 500;
   color: var(--color-title)
 }

 .form-name {
   color: var(--color-title);
   display: block;
   margin-bottom: .5rem
 }

 .form-control {
   background-color: var(--bg-form);
   border: 1px solid var(--color-border);
   padding: .75rem;
   transition: border var(--duration), box-shadow var(--duration);
   width: 100%;
   min-height: 3.125rem
 }

 .form-control::placeholder {
   color: var(--color-text-muted)
 }

 .form-control:focus {
   border: 1px solid var(--primary);
   outline: 0
 }

 .form-control[type=file] {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none
 }

 .form-control[type=file]::file-selector-button {
   background-color: var(--bg-inset);
   color: var(--color-text);
   margin: -.5rem .75rem -.5rem -.5rem;
   padding: .75rem;
   line-height: 1;
   border: 0 none;
   cursor: pointer
 }

 .form-required {
   font-weight: 300;
   font-size: 90%;
   margin-left: .5rem;
   color: var(--gray-500)
 }

 .form-check {
   display: flex;
   align-items: center
 }

 .form-check-input {
   height: 18px;
   width: 18px;
   margin-right: .75rem;
   border: 1px solid var(--primary);
   transition: border-color var(--duration);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   cursor: pointer
 }

 .form-check-input:checked {
   border-color: var(--primary);
   box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 10px var(--primary)
 }

 .form-check-input[type=radio] {
   border-radius: 50rem
 }

 .form-check-input[type=checkbox] {
   border-radius: .25rem
 }

 .form-group+.form-group {
   margin-top: 2rem;
   padding-top: 2rem;
   border-top: 1px solid var(--color-border)
 }

 .form-footer {
   margin-top: 1rem
 }

 .form-checks>.form-check {
   margin-top: .5rem
 }

 .form-checks {
   margin-bottom: 1rem
 }

 select.form-control {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23677077' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
   background-position: right .75rem center;
   background-repeat: no-repeat;
   background-size: 14px
 }

 .dropdown {
   top: var(--drop-top, auto);
   left: var(--drop-left, 0);
   right: var(--drop-right, auto);
   bottom: var(--drop-bottom, calc(100% + 1rem));
   min-width: var(--drop-width, 180px);
   max-height: var(--drop-height, initial);
   padding: var(--drop-padding, 1.25rem);
   transform-origin: var(--drop-origin, bottom left);
   background-color: var(--bg-base);
   transition-property: opacity, transform;
   transition-duration: var(--duration);
   transition-timing-function: var(--timing);
   position: absolute;
   color: var(--color-text);
   box-shadow: var(--shadow-very-high)
 }

 .dropdown:not(.is-active) {
   pointer-events: none;
   opacity: 0;
   transform: translate3d(0, 1rem, 0) scale(.9)
 }

 .dropdown-title {
   white-space: nowrap;
   margin-bottom: 1rem
 }

 .dropdown-link {
   display: block;
   white-space: nowrap
 }

 .dropdown-link+* {
   margin-top: 1rem
 }

 .dropdown-link:hover,
 .color-primary {
   color: var(--primary)
 }

 .color-50 {
   color: var(--gray-50)
 }

 .color-100 {
   color: var(--gray-100)
 }

 .color-200 {
   color: var(--gray-200)
 }

 .color-300 {
   color: var(--gray-300)
 }

 .color-400 {
   color: var(--gray-400)
 }

 .color-500 {
   color: var(--gray-500)
 }

 .color-600 {
   color: var(--gray-600)
 }

 .color-700 {
   color: var(--gray-700)
 }

 .color-800 {
   color: var(--gray-800)
 }

 .color-900 {
   color: var(--gray-900)
 }

 .color-950 {
   color: var(--gray-950)
 }

 .color-white {
   color: var(--white)
 }

 .color-black {
   color: var(--black)
 }

 .color-title {
   color: var(--color-title)
 }

 .color-text {
   color: var(--color-text)
 }

 .color-text-muted {
   color: var(--color-text-muted)
 }

 .bg-base {
   background-color: var(--bg-base)
 }

 .bg-inset {
   background-color: var(--bg-inset)
 }

 .bg-subtle {
   background-color: var(--bg-subtle)
 }

 .image-fit {
   width: 100%;
   position: absolute;
   top: 0;
   height: 100%;
   left: 0;
   object-fit: cover
 }

 .widget-title {
   margin-bottom: 1rem;
 }

 .has-icon {
   display: inline-flex;
   align-items: center;
   column-gap: .5rem
 }

 .has-spacer>*:not(:last-child) {
   margin-bottom: 1rem
 }

 @media (min-width: 768px) {
   .has-spacer>*:not(:last-child) {
     margin-bottom: 2rem
   }
 }

 .has-overlay {
   overflow: hidden;
   position: relative
 }

 .has-overlay:after {
   content: "";
   position: absolute;
   background-image: linear-gradient(to bottom, transparent 0%, black 100%);
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 5;
   transition: opacity var(--duration)
 }

 @keyframes loader {

   to,
   95% {
     transform: rotate(840deg)
   }
 }

 @keyframes rotate {
   0% {
     transform: rotate(0)
   }

   to {
     transform: rotate(360deg)
   }
 }

 .loader {
   --loader-size: 6px;
   pointer-events: none;
   margin: auto;
   transition: opacity 1s;
   position: absolute;
   inset: calc(var(--loader-size) * -2 + 1px)
 }

 .loader:before {
   content: "";
   border: var(--loader-size) solid var(--primary-hover);
   border-top-color: #0000;
   border-radius: 50%;
   animation: 1s linear infinite rotate;
   position: absolute;
   inset: var(--loader-size)
 }

 .columns {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   gap: var(--typography-spacing)
 }

 .columns>* {
   flex: 1 1 0;
   margin: 0
 }

 .alignleft {
   float: left;
   clear: left;
   margin-right: var(--typography-spacing);
   margin-top: .5rem
 }

 .alignright {
   float: right;
   clear: right;
   margin-left: var(--typography-spacing);
   margin-top: .5rem
 }

 .aligncenter {
   margin-left: auto;
   margin-right: auto;
   display: table
 }

 .absolute {
   position: absolute
 }

 .relative {
   position: relative
 }

 .fixed {
   position: fixed
 }

 .sticky {
   position: sticky
 }

 .z-10 {
   z-index: 10
 }

 .z-20 {
   z-index: 20
 }

 .z-30 {
   z-index: 30
 }

 .z-40 {
   z-index: 40
 }

 .z-50 {
   z-index: 50
 }

 .z-60 {
   z-index: 60
 }

 .z-70 {
   z-index: 70
 }

 .z-80 {
   z-index: 80
 }

 .z-90 {
   z-index: 90
 }

 .z-100 {
   z-index: 100
 }

 .block {
   display: block
 }

 .inline-block {
   display: inline-block
 }

 .inline {
   display: inline
 }

 .flex {
   display: flex
 }

 .inline-flex {
   display: inline-flex
 }

 .grid {
   display: grid
 }

 .inline-grid {
   display: inline-grid
 }

 .none {
   display: none
 }

 @media (min-width: 576px) {
   .s\:block {
     display: block
   }

   .s\:inline-block {
     display: inline-block
   }

   .s\:inline {
     display: inline
   }

   .s\:flex {
     display: flex
   }

   .s\:inline-flex {
     display: inline-flex
   }

   .s\:grid {
     display: grid
   }

   .s\:inline-grid {
     display: inline-grid
   }

   .s\:none {
     display: none
   }
 }

 @media (min-width: 768px) {
   .m\:block {
     display: block
   }

   .m\:inline-block {
     display: inline-block
   }

   .m\:inline {
     display: inline
   }

   .m\:flex {
     display: flex
   }

   .m\:inline-flex {
     display: inline-flex
   }

   .m\:grid {
     display: grid
   }

   .m\:inline-grid {
     display: inline-grid
   }

   .m\:none {
     display: none
   }
 }

 @media (min-width: 992px) {
   .l\:block {
     display: block
   }

   .l\:inline-block {
     display: inline-block
   }

   .l\:inline {
     display: inline
   }

   .l\:flex {
     display: flex
   }

   .l\:inline-flex {
     display: inline-flex
   }

   .l\:grid {
     display: grid
   }

   .l\:inline-grid {
     display: inline-grid
   }

   .l\:none {
     display: none
   }
 }

 @media (min-width: 1200px) {
   .xl\:block {
     display: block
   }

   .xl\:inline-block {
     display: inline-block
   }

   .xl\:inline {
     display: inline
   }

   .xl\:flex {
     display: flex
   }

   .xl\:inline-flex {
     display: inline-flex
   }

   .xl\:grid {
     display: grid
   }

   .xl\:inline-grid {
     display: inline-grid
   }

   .xl\:none {
     display: none
   }
 }

 .items-start {
   align-items: flex-start
 }

 .items-end {
   align-items: flex-end
 }

 .items-center {
   align-items: center
 }

 .justify-start {
   justify-content: flex-start
 }

 .justify-end {
   justify-content: flex-end
 }

 .justify-center {
   justify-content: center
 }

 .justify-between {
   justify-content: space-between
 }

 .justify-around {
   justify-content: space-around
 }

 .justify-evenly {
   justify-content: space-evenly
 }

 .row {
   flex-direction: row
 }

 .column {
   flex-direction: column
 }

 @media (min-width: 576px) {
   .s\:row {
     flex-direction: row
   }

   .s\:column {
     flex-direction: column
   }
 }

 @media (min-width: 768px) {
   .m\:row {
     flex-direction: row
   }

   .m\:column {
     flex-direction: column
   }
 }

 @media (min-width: 992px) {
   .l\:row {
     flex-direction: row
   }

   .l\:column {
     flex-direction: column
   }
 }

 @media (min-width: 1200px) {
   .xl\:row {
     flex-direction: row
   }

   .xl\:column {
     flex-direction: column
   }
 }

 .wrap {
   flex-wrap: wrap
 }

 .wrap-reverse {
   flex-wrap: wrap-reverse
 }

 .nowrap {
   flex-wrap: nowrap
 }

 .flex-1 {
   flex: 1 1 0
 }

 .flex-auto {
   flex: auto
 }

 .flex-initial {
   flex: initial
 }

 .flex-none {
   flex: none
 }
@media (max-width: 768px) {

.card-body {
    padding: 0.75rem;
}
}
.auto-fill {
  display: grid;
}

.grid-cols-2 {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.grid-cols-none {
  grid-template-columns:none
}
.grid-cols-1 {
  grid-template-columns:repeat(1,minmax(0,1fr))
}
.grid-cols-3 {
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.grid-cols-4 {
  grid-template-columns:repeat(4,minmax(0,1fr))
}
.grid-cols-5 {
  grid-template-columns:repeat(5,minmax(0,1fr))
}
.grid-cols-6 {
  grid-template-columns:repeat(6,minmax(0,1fr))
}
.grid-cols-7 {
  grid-template-columns:repeat(7,minmax(0,1fr))
}
.grid-cols-8 {
  grid-template-columns:repeat(8,minmax(0,1fr))
}
.grid-cols-9 {
  grid-template-columns:repeat(9,minmax(0,1fr))
}
.grid-cols-10 {
  grid-template-columns:repeat(10,minmax(0,1fr))
}
.grid-cols-11 {
  grid-template-columns:repeat(11,minmax(0,1fr))
}
.grid-cols-12 {
  grid-template-columns:repeat(12,minmax(0,1fr))
}

@media (min-width:768px) {
  .md\:grid-cols-2 {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .md\:grid-cols-3 {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .md\:grid-cols-1 {
    grid-template-columns:repeat(1,minmax(0,1fr))
  }
  .md\:grid-cols-4 {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
  .md\:grid-cols-5 {
    grid-template-columns:repeat(5,minmax(0,1fr))
  }
  .md\:grid-cols-6 {
    grid-template-columns:repeat(6,minmax(0,1fr))
  }
  .md\:grid-cols-7 {
    grid-template-columns:repeat(7,minmax(0,1fr))
  }
  .md\:grid-cols-8 {
    grid-template-columns:repeat(8,minmax(0,1fr))
  }
  .md\:grid-cols-9 {
    grid-template-columns:repeat(9,minmax(0,1fr))
  }
  .md\:grid-cols-10 {
    grid-template-columns:repeat(10,minmax(0,1fr))
  }
  .md\:grid-cols-11 {
    grid-template-columns:repeat(11,minmax(0,1fr))
  }
  .md\:grid-cols-12 {
    grid-template-columns:repeat(12,minmax(0,1fr))
  }
  .md\:grid-rows-2 {
    grid-template-rows:repeat(2,minmax(0,1fr))
  }
}
@media (min-width:1100px) {
  .lg\:grid-cols-1 {
    grid-template-columns:repeat(1,minmax(0,1fr))
  }
  .lg\:grid-cols-2 {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .lg\:grid-cols-3 {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .lg\:grid-cols-4 {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
  .lg\:grid-cols-5 {
    grid-template-columns:repeat(5,minmax(0,1fr))
  }
  .lg\:grid-cols-6 {
    grid-template-columns:repeat(6,minmax(0,1fr))
  }
  .lg\:grid-cols-7 {
    grid-template-columns:repeat(7,minmax(0,1fr))
  }
  .lg\:grid-cols-8 {
    grid-template-columns:repeat(8,minmax(0,1fr))
  }
  .lg\:grid-cols-9 {
    grid-template-columns:repeat(9,minmax(0,1fr))
  }
  .lg\:grid-cols-10 {
    grid-template-columns:repeat(10,minmax(0,1fr))
  }
  .lg\:grid-cols-11 {
    grid-template-columns:repeat(11,minmax(0,1fr))
  }
  .lg\:grid-cols-12 {
    grid-template-columns:repeat(12,minmax(0,1fr))
  }

}
@media (min-width:1280px) {
  .xl\:grid-cols-3 {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .xl\:grid-cols-4 {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
  .xl\:grid-cols-1 {
    grid-template-columns:repeat(1,minmax(0,1fr))
  }
  .xl\:grid-cols-2 {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .xl\:grid-cols-5 {
    grid-template-columns:repeat(5,minmax(0,1fr))
  }
  .xl\:grid-cols-6 {
    grid-template-columns:repeat(6,minmax(0,1fr))
  }
  .xl\:grid-cols-7 {
    grid-template-columns:repeat(7,minmax(0,1fr))
  }
  .xl\:grid-cols-8 {
    grid-template-columns:repeat(8,minmax(0,1fr))
  }
  .xl\:grid-cols-9 {
    grid-template-columns:repeat(9,minmax(0,1fr))
  }
  .xl\:grid-cols-10 {
    grid-template-columns:repeat(10,minmax(0,1fr))
  }
  .xl\:grid-cols-11 {
    grid-template-columns:repeat(11,minmax(0,1fr))
  }
  .xl\:grid-cols-12 {
    grid-template-columns:repeat(12,minmax(0,1fr))
  }
  .xl\:grid-rows-1 {
    grid-template-rows:repeat(1,minmax(0,1fr))
  }
}
@media (min-width:1536px) {
  .\32xl\:grid-cols-5 {
    grid-template-columns:repeat(5,minmax(0,1fr))
  }
  .\32xl\:grid-cols-1 {
    grid-template-columns:repeat(1,minmax(0,1fr))
  }
  .\32xl\:grid-cols-2 {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .\32xl\:grid-cols-3 {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .\32xl\:grid-cols-4 {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
  .\32xl\:grid-cols-6 {
    grid-template-columns:repeat(6,minmax(0,1fr))
  }
  .\32xl\:grid-cols-7 {
    grid-template-columns:repeat(7,minmax(0,1fr))
  }
  .\32xl\:grid-cols-8 {
    grid-template-columns:repeat(8,minmax(0,1fr))
  }
  .\32xl\:grid-cols-9 {
    grid-template-columns:repeat(9,minmax(0,1fr))
  }
  .\32xl\:grid-cols-10 {
    grid-template-columns:repeat(10,minmax(0,1fr))
  }
  .\32xl\:grid-cols-11 {
    grid-template-columns:repeat(11,minmax(0,1fr))
  }
  .\32xl\:grid-cols-12 {
    grid-template-columns:repeat(12,minmax(0,1fr))
  }
}
@media (min-width:1900px) {
  .\33xl\:grid-cols-1 {
    grid-template-columns:repeat(1,minmax(0,1fr))
  }
  .\33xl\:grid-cols-2 {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .\33xl\:grid-cols-3 {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .\33xl\:grid-cols-4 {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
  .\33xl\:grid-cols-5 {
    grid-template-columns:repeat(5,minmax(0,1fr))
  }
  .\33xl\:grid-cols-6 {
    grid-template-columns:repeat(6,minmax(0,1fr))
  }
  .\33xl\:grid-cols-7 {
    grid-template-columns:repeat(7,minmax(0,1fr))
  }
  .\33xl\:grid-cols-8 {
    grid-template-columns:repeat(8,minmax(0,1fr))
  }
  .\33xl\:grid-cols-9 {
    grid-template-columns:repeat(9,minmax(0,1fr))
  }
  .\33xl\:grid-cols-10 {
    grid-template-columns:repeat(10,minmax(0,1fr))
  }
  .\33xl\:grid-cols-11 {
    grid-template-columns:repeat(11,minmax(0,1fr))
  }
  .\33xl\:grid-cols-12 {
    grid-template-columns:repeat(12,minmax(0,1fr))
  }
}

.auto-fill-1 {
  display: grid;
}

.auto-fill-1 {
  grid-template-columns: repeat(auto-fill,minmax(min(100%,var(--cols-min, 16rem)),1fr));
}

 .o-auto {
   overflow: auto
 }

 .o-hidden {
   overflow: hidden
 }

 .ox-auto {
   overflow-x: auto
 }

 .ox-hidden {
   overflow-x: hidden
 }

 .oy-auto {
   overflow-y: auto
 }

 .oy-hidden {
   overflow-y: hidden
 }

 .flex-center {
   display: flex;
   align-items: center;
   justify-content: center
 }

 .grid-center {
   display: grid;
   place-items: center
 }

 .scrollbar {
   overflow: auto;
   scrollbar-color: var(--bg-inset) transparent;
   scrollbar-width: thin
 }

 .scrollbar::-webkit-scrollbar {
   width: 5px;
   height: 5px;
   background-color: transparent
 }

 .scrollbar::-webkit-scrollbar-track {
   background-color: transparent;
   border-radius: 5px
 }

 .scrollbar::-webkit-scrollbar-thumb {
   background-color: var(--bg-inset);
   border-radius: 10px
 }

 .ratio {
   display: block;
   position: relative;
   width: 100%
 }

 .ratio:before {
   content: "";
   display: block;
   padding-top: calc(var(--ratio-y, 9) / var(--ratio-x, 16) * 100%)
 }

 .ratio-21\:9 {
   --ratio-x: 21;
   --ratio-y: 9
 }

 .ratio-16\:9 {
   --ratio-x: 16;
   --ratio-y: 9
 }

 .ratio-4\:3 {
   --ratio-x: 4;
   --ratio-y: 3
 }

 .ratio-1\:1 {
   --ratio-x: 1;
   --ratio-y: 1
 }

 .ratio-1\:2 {
   --ratio-x: 1;
   --ratio-y: 2
 }

 .ratio-2\:3 {
   --ratio-x: 2;
   --ratio-y: 3
 }

 .ratio-5\:7 {
   --ratio-x: 5;
   --ratio-y: 7
 }

 .lead {
   font-size: 1.25rem;
   font-weight: 300
 }

 .has-drop-cap:first-letter {
   font-weight: 500;
   font-size: 6em;
   line-height: 1;
   margin-right: 1.25rem;
   text-transform: uppercase;
   float: left;
   color: var(--gray-800)
 }

 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap
 }

 .truncate-line {
   display: -webkit-box;
   -webkit-line-clamp: var(--line-clamp, 2);
   -webkit-box-orient: vertical;
   overflow: hidden
 }

 .fs-1 {
   font-size: 2.5rem
 }

 .fs-2 {
   font-size: 2rem
 }

 .fs-3 {
   font-size: 1.5rem
 }

 .fs-4 {
   font-size: 1.25rem
 }

 .fs-5 {
   font-size: 1.125rem
 }

 .fs-6 {
   font-size: 1rem
 }

 .fs-7 {
   font-size: .875rem
 }

 .fs-8 {
   font-size: .75rem
 }

 @media (min-width: 576px) {
   .s\:fs-1 {
     font-size: 2.5rem
   }

   .s\:fs-2 {
     font-size: 2rem
   }

   .s\:fs-3 {
     font-size: 1.5rem
   }

   .s\:fs-4 {
     font-size: 1.25rem
   }

   .s\:fs-5 {
     font-size: 1.125rem
   }

   .s\:fs-6 {
     font-size: 1rem
   }

   .s\:fs-7 {
     font-size: .875rem
   }

   .s\:fs-8 {
     font-size: .75rem
   }
 }

 @media (min-width: 768px) {
   .m\:fs-1 {
     font-size: 2.5rem
   }

   .m\:fs-2 {
     font-size: 2rem
   }

   .m\:fs-3 {
     font-size: 1.5rem
   }

   .m\:fs-4 {
     font-size: 1.25rem
   }

   .m\:fs-5 {
     font-size: 1.125rem
   }

   .m\:fs-6 {
     font-size: 1rem
   }

   .m\:fs-7 {
     font-size: .875rem
   }

   .m\:fs-8 {
     font-size: .75rem
   }
 }

 @media (min-width: 992px) {
   .l\:fs-1 {
     font-size: 2.5rem
   }

   .l\:fs-2 {
     font-size: 2rem
   }

   .l\:fs-3 {
     font-size: 1.5rem
   }

   .l\:fs-4 {
     font-size: 1.25rem
   }

   .l\:fs-5 {
     font-size: 1.125rem
   }

   .l\:fs-6 {
     font-size: 1rem
   }

   .l\:fs-7 {
     font-size: .875rem
   }

   .l\:fs-8 {
     font-size: .75rem
   }
 }

 @media (min-width: 1200px) {
   .xl\:fs-1 {
     font-size: 2.5rem
   }

   .xl\:fs-2 {
     font-size: 2rem
   }

   .xl\:fs-3 {
     font-size: 1.5rem
   }

   .xl\:fs-4 {
     font-size: 1.25rem
   }

   .xl\:fs-5 {
     font-size: 1.125rem
   }

   .xl\:fs-6 {
     font-size: 1rem
   }

   .xl\:fs-7 {
     font-size: .875rem
   }

   .xl\:fs-8 {
     font-size: .75rem
   }
 }

 .fw-100 {
   font-weight: 100
 }

 .fw-200 {
   font-weight: 200
 }

 .fw-300 {
   font-weight: 300
 }

 .fw-400 {
   font-weight: 400
 }

 .fw-500 {
   font-weight: 500;
 }

 .fw-600 {
   font-weight: 600
 }

 .fw-700 {
   font-weight: 700
 }

 .fw-800 {
   font-weight: 800
 }

 .fw-900 {
   font-weight: 900
 }

 .text-center {
   text-align: center
 }

 .text-left {
   text-align: left
 }

 .text-right {
   text-align: right
 }

 .text-justify {
   text-align: justify
 }

 .capitalize {
   text-transform: capitalize
 }

 .uppercase {
   text-transform: uppercase
 }

 .lowercase {
   text-transform: lowercase
 }