:root {
    /* ========= Brand / Accent ========= */
    --color-primary: oklch(32% 0.02 260);          /* restrained graphite */
    --color-primary-hover: oklch(26% 0.02 260);

    /* ========= Backgrounds ========= */
    --bg-primary: oklch(98% 0.001 260);            /* near-white */
    --bg-secondary: oklch(95% 0.002 260);          /* subtle separation */

    /* ========= Borders ========= */
    --border-primary: oklch(88% 0.003 260);
    --border-width: 1px;

    /* ========= Text ========= */
    --text-primary: oklch(22% 0.01 260);           /* near-black */
    --text-secondary: oklch(80% 0.008 260);        /* muted hierarchy */
    --text-muted: oklch(80% 0.01 258.338);    /* main readable text */

    /* ========= States ========= */
    --state-success: oklch(42% 0.06 150);
    --state-error: oklch(44% 0.12 30);
    --state-info: oklch(38% 0.05 260);

    /* ========= Radius ========= */
    --radius-l: .2rem;
    --radius-s: .1rem;
    --radius: .15rem;

    /* ========= Spacing ========= */
    --space-l: .7rem;
    --space-s: .25rem;
    --space: .45rem;

    --space-r-l: .25rem .7rem;
    --space-r-s: .05rem .25rem;
    --space-r: .15rem .45rem;

    --space-x-l: .15rem .7rem;
    --space-x-s: .15rem .25rem;
    --space-x: .15rem .45rem;
}

.navigation-box {
    top: .4rem;
    right: .8rem;
    width: 2rem;
    position: absolute;
}
@media (min-width: 768px){
    .breaking-caret:after {
        content: "";
        width: 0;
        height: 0;
        border-top: 20px solid transparent;
        border-left: 15px solid #1da1ae;
        border-bottom: 20px solid transparent;
        position: absolute;
        right: -13px;
        top: 0;
    }
}
.enonewsticker {
  display: block
}

.titleenonewsticker {
  height: 100%;
  align-items: center;
  justify-content: center
}

.itemsenonewsticker p {
  margin-bottom: 0;
  position: relative
}

.navenonewsticker .carousel-control-prev,
.navenonewsticker .carousel-control-next {
  color: #000;
  position: relative;
  flex-grow: 2
}

.navenonewsticker .carousel-control-next .carousel-control-next-icon,
.navenonewsticker .carousel-control-prev .carousel-control-prev-icon {
  display: block;
  height: 100%;
  width: 100%;
  background-size: 60% 60%
}

.navenonewsticker .carousel-control-next,
.navenonewsticker .carousel-control-prev {
  width: auto
}

.topicenonewsticker {
  color: #fff;
  background: #f6757e;
  font-size: 70%;
  padding: 5px 7px;
  text-transform: uppercase
}

.bg_hats {
  background: #f6757e
}
.pagination {
  list-style: none;
  display: inline-block;
  padding: 0;
  margin-top: 0
}

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

.pagination li {
  display: inline;
  text-align: center
}

.pagination a {
  float: left;
  display: block;
  font-size: 14px;
  text-decoration: none;
  padding: 5px 12px;
  color: #fff;
  margin-left: -1px;
  border: 1px solid #fff0;
  line-height: 1.5
}

.pagination a.active {
  cursor: default
}

.pagination a:active {
  outline: none
}
.modal-6 {
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px
}

.modal-6 a {
  border-color: #ddd;
  color: #999;
  background: #fff;
  padding: 10px 15px
}

.modal-6 a:hover {
  color: #fff !important;
  background-color: #f6757e !important
}

.modal-6 a.prev {
  -moz-border-radius: 50px 0 0 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px 0 0 50px;
  width: 50px;
  position: relative
}

.modal-6 a.prev:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 100%;
  top: 0;
  right: 0;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4yIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g);
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fff0), color-stop(100%, rgb(0 0 0 / .2)));
  background-image: -moz-linear-gradient(left, #fff0 0%, rgb(0 0 0 / .2) 100%);
  background-image: -webkit-linear-gradient(left, #fff0 0%, rgb(0 0 0 / .2) 100%);
  background-image: linear-gradient(to right, #fff0 0%, rgb(0 0 0 / .2) 100%)
}

.modal-6 a.next {
  -moz-border-radius: 0 50px 50px 0;
  -webkit-border-radius: 0;
  border-radius: 0 50px 50px 0;
  width: 50px;
  position: relative
}

.modal-6 a.next:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g);
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgb(0 0 0 / .2)), color-stop(100%, #fff0));
  background-image: -moz-linear-gradient(left, rgb(0 0 0 / .2) 0%, #fff0 100%);
  background-image: -webkit-linear-gradient(left, rgb(0 0 0 / .2) 0%, #fff0 100%);
  background-image: linear-gradient(to right, rgb(0 0 0 / .2) 0%, #fff0 100%)
}

.modal-6 a.active {
  border-color: #bbb;
  background: #f6757e;
  color: #fff !important;
  -moz-box-shadow: 0 0 3px rgb(0 0 0 / .25) inset;
  -webkit-box-shadow: 0 0 3px rgb(0 0 0 / .25) inset;
  box-shadow: 0 0 3px rgb(0 0 0 / .25) inset
}
* .toast-container {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1rem;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    width: 24rem;
    padding: 1rem;
    gap: 1rem;
}
.toast {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius);
    background-color: var(--bg-primary);
    border: var(--border-width) solid var(--border-primary);
}
*::-webkit-scrollbar {
    width: 0.6rem;
}
*::-webkit-scrollbar-thumb {
    background-color: var(--color-primary);
    border-radius: var(--radius-l);
    border: 0.2rem solid var(--bg-primary);
}
pre::-webkit-scrollbar-thumb {
    background-color: var(--color-primary);
    border-radius: var(--radius-l);
    border: 0.3rem solid var(--bg-secondary);
}
.wrap {
   background: #ECF0F1;
   color: #607D8B;
   height: 100%;
   overflow: auto;
   padding: 1em 2.5em;
   text-align: center;
   width: 100%;
}

h1 {
   color: #e91e63;
   font-family: "Audiowide", cursive;
   font-size: 2em;
   font-size: 7vw;
   font-weight: bold;
   line-height: 1.2;
   margin: 0.5em 0 2.5em;
   text-shadow: 1px 1px 1px #fefefe;
}

@media (min-width: 1075px) {
   h1 {
      font-size: 4.7em;
   }
}

pre {
   background: #fff;
   display: inline-block;
   font-size: .55em;
   margin-top: 2em;
   padding: 1em;
}

@media (min-width: 360px) {
   pre {
      font-size: .7em;
   }
}

@media (min-width: 500px) {
   pre {
      font-size: 1em;
   }
}


/*== start of code for tooltips ==*/
.tool {
    position: relative;
}


/*== common styles for both parts of tool tip ==*/
.tool::before,
.tool::after {
    left: 50%;
    opacity: 0;
    position: absolute;
    z-index: -100;
}

.tool:hover::before,
.tool:focus::before,
.tool:hover::after,
.tool:focus::after {
    opacity: 1;
    transform: scale(1) translateY(0);
    z-index: 100; 
}


/*== pointer tip ==*/
.tool::before {
    border-style: solid;
    border-width: 1em 0.75em 0 0.75em;
    border-color: #3E474F transparent transparent transparent;
    bottom: 100%;
    content: "";
    margin-left: -0.5em;
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26), opacity .65s .5s;
    transform:  scale(.6) translateY(-90%);
} 

.tool:hover::before,
.tool:focus::before {
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
}


/*== speech bubble ==*/
.tool::after {
    background: #3E474F;
    border-radius: .25em;
    bottom: 170%;
    text-align:center;
    color: #EDEFF0;
    content: attr(data-tip);
    margin-left: -3.75em;
    padding: 1em;
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
    transform:  scale(.6) translateY(50%);  
    width: 10em;
}

.tool:hover::after,
.tool:focus::after  {
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26);
}

@media (max-width: 760px) {
  .tool::after { 
        font-size: .75em;
        margin-left: -5em;
        width: 10em; 
  }
}