:root {
  /* COLORS */
  --black: #000000dd;
  --black-light: #000000b0;
  --blue: #2b5ac0;
  --gray-light: #e3e3e3;
  --white: #fff;
  --error: #e7346f;
  /* CATEGORY COLORS */
  --color-1: #5499c7;
  --color-2: #a454c7;
  --color-3: #e64c3b;
  --color-4: #1faa8e;
  --color-5: #0aac50;
  --color-6: #8a7213;
  --color-7: #b37108;
  --color-8: #d3641b;
  --color-9: #6d7272;
  --color-10: #34495e;
  --color-11: #12b656;
  --color-12: #8a7771;
  --color-13: #2b5ac0;
  --color-14: #e7346f;
  --color-15: #573d88;
  /* FORM INPUT */
  --form-input-container-background-color: #ffffff80;
  --form-input-background-color: var(--white);
  /* CONFIG */
  --config-background-color: #ffffff;
  /* TOAST */
  --toast-background-color: var(--white);
  /* BUTTON */
  --button-background-color: #2b5ac0;
  --button-color: var(--white);
  /* BUTTON CLOSE */
  --button-close-background-color: #2b5ac0;
  --button-close-border-color: #2b5ac0;
  --button-close-text-color: #fff;
  /* LIST ITEMS */
  --list-item-background-color: var(--white);
  --list-finish-background-color: var(--white);
  --list-gap: 0.5rem;
  /* IFRAME */
  --iframe-background-color: var(--white);
  /* MENU */
  --menu-height: 3rem;
  --menu-background-color: #363636;
  --menu-button-color: var(--white);
  --menu-config-filter-on-background-color: #ceffce;
  /* LOADERS */
  --linear-loader-line: var(--blue);
  --linear-loader-background: #ffffff80;
  --circular-loader-background: #00000080;
  --circular-loader-color-1: var(--blue);
  --circular-loader-color-2: rgba(255, 255, 255, 0.3);
  /* ITEM */
  --item-bottom-border-color: var(--gray-light);
  --image-shadow: 3px 3px 6px #c3c3c3;
  --summary-font-size: 1rem;
  --summary-font-color: var(--black-light);
  --summary-lines: 3;
  --title-font-size: 1.25rem;
  --title-font-color: var(--black);
  --title-lines: 3;
  --author-font-size: 0.75rem;
  --author-font-color: var(--black-light);
  --date-font-size: 0.75rem;
  --date-font-color: var(--black-light);
  --source-font-size: 0.75rem;
  --source-font-color: var(--black-light);
  --category-font-size: 0.75rem;
  /* SCROLL BARS */
  --scrollbar-background-color: #f5f5f5;
  --scrollbar-track-background-color: #f5f5f5;
  --scrollbar-thumb-background-color: #7a7a7a80;
  --scrollbar-shadow: inset 0 0 6px #0000004d;
  /* GOTO GOTO */
  --goto-top-shadow: 4px 4px 6px #00000059;
  --goto-top-background-color: var(--blue);
  --goto-top-color: var(--white);
}
body.mobile {
  /* MENU MOBILE */
  --menu-height: 5rem;
}

* {
  box-sizing: border-box;
  user-select: none;
}

html,
body {
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #000000cc;
  position: relative;
  overscroll-behavior: none;
}
body.mobile {
  border-top: 1px solid var(--gray-light);
}

/* --------------- */
/* TOP SHADOW      */
/* --------------- */
.top-shadow {
  top: -1px;
  left: 0;
  right: 0;
  height: .5rem;
  background: linear-gradient(to bottom, rgb(82 82 82 / 56%) 0%,rgba(0,0,0,0) 100%);
  transition: all 0.25s ease-in-out;
  opacity: 0;
}
.list-items-container.on-scroll + #top-shadow-item,
#iframe-container.on-scroll + #top-shadow-iframe {
  opacity: 1;
}

/* --------------- */
/* GOTO TOP        */
/* --------------- */
.goto-top {
  transition: 0.5s;
  bottom: calc(var(--menu-height) + 2em);
  right: 1rem;
  width: 0;
  border-radius: 50%;
  height: 0;
  background-color: var(--goto-top-background-color);
  box-shadow: var(--goto-top-shadow);
}
.on-scroll .goto-top {
  width: 3rem;
  height: 3rem;
}
body.mobile .on-scroll .goto-top {
  width: 5rem;
  height: 5rem;
}
.goto-top svg {
  fill: var(--goto-top-color);
}
.goto-top:active {
  box-shadow: none;
}
body:not(.mobile) .goto-top {
  right: 2rem;
}
.scrolling .goto-top {
  width: 0 !important;
  height: 0 !important;
}

/* --------------- */
/* BUTTON          */
/* --------------- */
.btn {
  background-color: var(--button-background-color);
  color: var(--button-color);
  border: none;
  padding: 0.75rem 1rem 0.75rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow: 3px 3px 6px #c3c3c3;
}
body.mobile .btn {
  font-size: 1rem;
  padding: 1rem 1.5rem 1rem 1.5rem;
}
.btn.btn-small {
  font-size: 0.75rem !important;
  padding: 0.75rem 1rem 0.75rem 1rem !important;
  width: 6rem;
}
.btn.rounded-close {
  border-radius: 50%;
  color: transparent;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0 !important;
  border: 2px solid var(--button-close-border-color);
  background-color: var(--button-close-background-color);
  position: relative;
}
.btn.rounded-close::after {
  content: 'X';
  color: var(--button-close-text-color);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  box-sizing: content-box;
  bottom: 0;
  right: 0;
  justify-content: center;
  align-items: center;
}

/* --------------- */
/* MENU            */
/* --------------- */
#menu-container {
  height: var(--menu-height);
  background-color: var(--menu-background-color);
  justify-content: space-between;
  align-items: center;
  box-shadow: 0px -2px 10px #282828;
}
body.mobile #menu-container {
  align-items: flex-start;
}
.menu-button {
  fill: var(--menu-button-color);
  color: white;
  height: calc(var(--menu-height) - 12px);
  width: calc(var(--menu-height) - 12px);
  max-width: 4em;
  max-height: 4em;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 1rem 0 1rem;
}
.menu-button svg {
  height: 100%;
  width: 100%;
}
body.mobile .menu-button svg {
  height: calc(100% - 10px);
  width: calc(100% - 10px);
}
body.items-loading .disable-items-loading,
body.iframe-open .disable-iframe-open,
body.iframe-no-url .disable-no-url,
body:not(.iframe-open) .disable-no-iframe-open {
  opacity: 0.3;
  cursor: not-allowed !important;
}
.first-icon,
.second-icon {
  width: 22px;
  height: 22px;
}
body.mobile .first-icon {
  width: 70% !important;
  height: 70% !important;
  padding-top: 10% !important;
}
body.mobile .second-icon {
  width: 60% !important;
  height: 60% !important;
  padding-bottom: 10% !important;
}
body.mobile .first-icon svg,
body.mobile .second-icon svg {
  width: 100% !important;
  height: 100% !important;
}
body.filter-on .first-icon svg,
body.filter-on .second-icon svg {
  fill: var(--menu-config-filter-on-background-color);
}
body.filter-on .button-config .first-icon::before {
  content: '';
  background-color: var(--menu-config-filter-on-background-color);
  position: absolute;
  top: 0.25rem;
  right: -1.1rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}
body.filter-on.mobile .button-config .first-icon::before {
  top: 0.6rem;
  right: -1.4rem;
  width: 20px;
  height: 20px;
}
@media screen and (max-width: 320px) { 
  body.filter-on.mobile .button-config .first-icon::before {
    top: 1rem;
    right: -1rem;
    width: 12px;
    height: 12px;
  }
}

/* --------------- */
/* IFRAME          */
/* --------------- */
#iframe-container {
  bottom: var(--menu-height) !important;
  height: 0;
  transition: height 0.5s ease-in-out;
  background-color: var(--iframe-background-color);
}
#iframe-item {
  display: none;
}
body.iframe-error #iframe-item {
  display: flex;
}
body.iframe-open #iframe-container {
  height: calc(100% - var(--menu-height));
}
#iframe-loading {
  height: 100%;
  display: none !important;
}
body.iframe-loading:not(.iframe-ready):not(.iframe-error) #iframe-loading {
  display: flex !important;
}

/* --------------- */
/* LIST OF ITEMS   */
/* --------------- */
.list-items-container {
  bottom: var(--menu-height) !important;
  overflow-x: hidden;
  overflow-y: scroll;
  flex-wrap: nowrap;
  gap: var(--list-gap);
  /* border-top: 1px solid var(--gray-light); */
  padding-top: 0.25rem;
}
body.loading .list-items-container {
  overflow-y: hidden;
}
.list-item,
.list-finish {
  display: flex;
  width: 100%;
}
.list-item {
  background-color: var(--list-item-background-color);
  flex-direction: column;
}
body.no-items .list-finish {
  display: none !important;
}
body.items-loading .list-finish .button-more {
  display: none !important;
}
body.loading .list-finish .circular-loader,
body:not(.items-loading) .list-finish .circular-loader {
  display: none;
}
.list-finish {
  background-color: var(--list-finish-background-color);
  min-height: fit-content !important;
  margin-top: 5rem;
  margin-bottom: 6rem;
  height: 6rem;
}
.list-no-items {
  display: none;
  font-size: 1.5rem;
}
body.no-items .list-no-items {
  display: flex !important;
  margin: auto;
}
/*
@media screen and (min-width: 640px) {
  .list-items-container {
    justify-content: center !important;
    flex-direction: row !important;
    flex-wrap: wrap;
  }
  body.mobile .list-item:not(.iframe-mode) {
    max-width: calc(50% - var(--list-gap)) !important;
  }
  .list-item:not(.iframe-mode) {
    max-width: calc(50% - var(--list-gap));
  }
  .iframe-mode.list-item {
    max-width: 640px !important;
  }
}
@media screen and (min-width: 900px) {
  .list-item {
    max-width: calc(33% - var(--list-gap));
  }
}
@media screen and (min-width: 1200px) {
  .list-item {
    max-width: calc(25% - var(--list-gap));
  }
}
*/

/* ---------------- */
/* ITEM             */
/* ---------------- */
.list-item .item {
  margin: 0.5rem 0.5rem 0 0.5rem;
  border-bottom: 1px solid var(--item-bottom-border-color);
}
.list-item .item-header .header-content {
  width: 100%;
}
/* image vertical */
.list-item.image-vertical .item-image {
  max-height: 120px;
}
.list-item.image-vertical .item-header .data {
  align-self: self-start !important;
}
.list-item.image-vertical .item-header .title {
  -webkit-line-clamp: calc(var(--title-lines) + 2) !important;
}
/* No Image */
.list-item.no-image .item-header .header-content {
  width: 100%;
}
/* image small */
.list-item.image-small .item-header {
  width: 100%;
}
.list-item.image-small .item-header .data {
  align-self: self-start !important;
}
.list-item.image-small .item-header .header-content {
  flex-direction: row-reverse !important;
  column-gap: 0.75rem !important;
  width: 100%;
}
.list-item.image-small .item-image {
  padding-top: 0.25rem;
  max-width: 25vw;
}
/*
@media screen and (min-width: 640px) {
  .list-item.image-small .item-image {
    max-width: 17.5vw;
  }
}
@media screen and (min-width: 1200px) {
  .list-item.image-small .item-image {
    max-width: 8.75vw;
  }
}
*/
.list-item.image-small .item-header .title {
  text-align: start !important;
  -webkit-line-clamp: calc(var(--title-lines) + 2) !important;
}

.list-item.image-small .hide-on-image-small {
  display: none !important;
}
.list-item.image-small .show-on-image-small {
  display: flex !important;
}
.list-item:not(.image-small) .show-on-image-small {
  display: none !important;
}
/* normal */
.list-item .item-image {
  aspect-ratio: auto;
  border-radius: 8px;
  box-shadow: var(--image-shadow);
  transition: 0.5s;
  max-width: 100%;
}
.item-header .title,
.item-body .summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  max-width: 100%;
}
.item-body .click-to-go {
  display: none;
}
body.iframe-open #iframe-item .item-body .click-to-go {
  display: flex;
  justify-content: center;
}
#iframe-item .no-url .click-to-go {
  display: none!important;
}
.item-header .title {
  font-size: var(--title-font-size);
  color: var(--title-font-color);
  -webkit-line-clamp: var(--title-lines);
}
.item-body .summary {
  font-size: var(--summary-font-size);
  color: var(--summary-font-color);
  -webkit-line-clamp: var(--summary-lines);
}
.item-header .source {
  display: none;
}
.item-header .author,
.item-header .date {
  max-width: 7rem;
}
.list-item.image-small:not(.no-image) .item-header .author {
  max-width: 15rem;
}
.item-header .author {
  font-size: var(--author-font-size);
  color: var(--author-font-color);
}
.item-header .date {
  font-size: var(--date-font-size);
  color: var(--date-font-color);
}
.item-footer {
  min-height: 42px;
}
.item-footer .source {
  padding-top: 4px;
}
.list-item .source img,
.item-footer .source img {
  width: auto;
  max-height: 16px;
  max-width: 80px;
}
.list-item .source-name,
.item-footer .source-name {
  display: inline-block;
  font-size: var(--source-font-size);
  color: var(--source-font-color);
  max-width: 5rem;
}
.list-item .source-name {
  max-width: 10rem;
}
.item-footer .category {
  font-size: var(--category-font-size);
  height: 24px;
  width: 96px;
  color: white;
  padding: 0 0.5rem 0 0.5rem;
  line-height: 24px;
}
.no-url .share-all,
.no-url .share-email,
body.no-share .item-footer .share-all {
  display: none !important;
}

/* ---------------- */
/* ITEM IFRAME MODE */
/* ---------------- */
.list-item.iframe-mode .hide-on-iframe-mode {
  display: none !important;
}
.list-item.iframe-mode .summary {
  padding-bottom: 8rem;
}
.list-item.iframe-mode .click-to-go,
.list-item.iframe-mode .summary {
  padding-top: 1rem;
}
.list-item.iframe-mode .title,
.list-item.iframe-mode .summary {
  -webkit-line-clamp: unset !important;
}
.list-item.iframe-mode .item {
  border: none !important;
}
.list-item.iframe-mode .item-header .source {
  display: flex !important;
}
body.iframe-ready #iframe-container {
  overflow: hidden !important;
}

/* ---------------- */
/* IFRAME           */
/* ---------------- */
#iframe-iframe {
  display: none;
  background-color: var(--iframe-background-color);
}
body.iframe-ready #iframe-iframe {
  display: block;
}

/* ---------------- */
/* LOADERS (LINEAR) */
/* ---------------- */
body:not(.items-loading) .linear-loader,
body:not(.items-loading) .linear-loader-container {
  height: 0px !important;
}
body.items-loading .linear-loader,
body.items-loading .linear-loader-container {
  height: 4px !important;
}
.linear-loader-container,
.linear-loader {
  height: 4px;
  transition: height 0.2s linear;
  display: block;
}
.linear-loader-container {
  background-color: var(--linear-loader-background);
}
.linear-loader {
  -webkit-animation: 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite linear-loader-animation;
  animation: 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite linear-loader-animation;
  background-color: var(--linear-loader-line);
}
/* ------------------ */
/* LOADERS (CIRCULAR) */
/* ------------------ */
body:not(.loading) #loading {
  display: none !important;
}
body.loading #loading {
  display: flex !important;
}
.circular-loader-container {
  background-color: var(--circular-loader-background);
}
.circular-loader {
  display: inline-block;
  width: 42px;
  height: 42px;
  border: 4px solid var(--circular-loader-color-2);
  border-radius: 50%;
  border-top-color: var(--circular-loader-color-1);
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}

/* --------------- */
/* ANIMATIONS      */
/* --------------- */
@keyframes linear-loader-animation {
  0% {
    left: -200%;
    right: 100%;
  }
  100%,
  60% {
    left: 107%;
    right: -8%;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}

/* --------------- */
/* SCROLL BARS     */
/* --------------- */
.custom-scrollbar::-webkit-scrollbar-track {
  -webkit-box-shadow: var(--scrollbar-shadow);
  border-radius: 10px;
  background-color: var(--scrollbar-track-background-color);
}
.custom-scrollbar::-webkit-scrollbar {
  width: 10px;
  background-color: var(--scrollbar-background-color);
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: var(--scrollbar-shadow);
  background-color: var(--scrollbar-thumb-background-color);
}

/* --------------- */
/* TOAST          */
/* --------------- */
.toast {
  border: 1px solid var(--gray-light);
  border-top: 4px solid var(--error);
  background-color: var(--toast-background-color);
  bottom: -6rem;
  width: 25rem;
  height: 6rem;
  right: 1rem;
  transition: all 0.5s ease-in-out;
  padding-left: 1rem;
  max-width: 90vw;
}
.toast .toast-message {
  color: var(--black);
}
.toast .toast-close {
  color: var(--black-light);
  height: 2rem;
  width: 2rem;
  margin: 0.5rem 1rem 0.5rem 1rem;
}
.toast .toast-close svg {
  fill: var(--black-light);
  color: var(--black-light);
  height: 2rem;
  width: 2rem;
}
.toast.show {
  bottom: calc(var(--menu-height) + 6rem);
}

/* --------------- */
/* INPUT FORM      */
/* --------------- */
#input-email {
  display: none;
}
body.show-input-email #input-email {
  display: flex;
}
.input-form-container {
  background-color: var(--form-input-container-background-color);
}
.input-form-container .input-form {
  width: 20rem;
  max-width: 90%;
  background-color: var(--form-input-background-color);
  border: 1px solid var(--gray-light);
}
.input-form-container .input-container input {
  border: 1px solid var(--gray-light);
}
.input-form-container .btn {
  font-size: 12px !important;
}

/* --------------- */
/* CONFIG          */
/* --------------- */
#config {
  height: 0;
  transition: height 0.5s ease-in-out;
  background-color: var(--config-background-color);
  min-width: 300px;
}
body.show-config #config {
  height: 100%;
}
body.show-config #config .config-container {
  overflow-y: auto;
  min-width: 320px;
}
#config-email-input {
  border: 1px solid var(--gray-light);
}
#config-categories {
  margin-top: 1rem;
  min-height: 10rem;
  overflow: auto;
  column-gap: 4rem !important;
}
.config-category-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 1rem 0.5rem 1rem;
}
.category-pill {
  color: var(--white);
  font-size: 14px;
  width: 9rem;
  margin-bottom: 1rem;
}
@media screen and (max-width: 420px) {
  #config-categories {
    column-gap: 2rem !important;
  }
  .category-pill {
    font-size: 12px;
    width: 7rem;
  }
}

/* --------------- */
/* GENERAL         */
/* --------------- */
.grid-2-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1rem;
}
/* BORDER */
.border-radius-4 {
  border-radius: 4px;
}
.border-none {
  border: none;
}
/* FONT */
.font-montserrat {
  font-family: 'Montserrat', sans-serif;
}
.font-roboto {
  font-family: 'Roboto', sans-serif;
}
/* TEXT */
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-justify {
  text-align: justify;
}
/* PADDING */
.p-1 {
  padding: 1rem;
}
.p-05 {
  padding: 0.5rem;
}
.p-025 {
  padding: 0.25rem;
}
.pb-1 {
  padding-bottom: 1rem;
}
.pb-2 {
  padding-bottom: 2rem;
}
.pl-05 {
  padding-left: 0.5rem;
}
.pr-05 {
  padding-right: 0.5rem;
}
.pl-1 {
  padding-left: 1rem;
}
.pt-025 {
  padding-top: 0.25rem;
}
.pt-05 {
  padding-top: 0.5rem;
}
/* FLEX */
.flex {
  display: flex;
}
.flex-center {
  justify-content: center;
  align-items: center;
}
.flex-column {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}
.flex-justify-space-between {
  justify-content: space-between;
}
.flex-align-center {
  align-items: center;
}
.flex-justify-space-evenly {
  justify-content: space-evenly;
}
.flex-justify-space-around {
  justify-content: space-around;
}
.flex-align-start {
  align-items: flex-start;
}
/* BOUNDS */
.bottom-0 {
  bottom: 0;
}
.left-0 {
  left: 0;
}
.right-0 {
  right: 0;
}
.top-0 {
  top: 0;
}
.top-05 {
  top: 0.5rem;
}
.right-05 {
  right: 0.5rem;
}
.right-1 {
  right: 1rem;
}
.absolute-all-size {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.absolute-all-size-without-menu {
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--menu-height);
}
/* WIDTH - HEIGHT */
.full-height {
  height: calc(100vh - var(--menu-height));
}
.wh-100 {
  width: 100%;
  height: 100%;
}
.w-5 {
  width: 5rem;
}
.w-100vw {
  width: 100vw;
}
.w-100 {
  width: 100%;
}
.h-100 {
  height: 100%;
}
.h-15 {
  height: 1.5rem;
}
.lh-15 {
  line-height: 2rem;
}
.wh-24 {
  width: 24px;
  height: 24px;
}
/* MARGIN */
.m-05 {
  margin: 0.5rem;
}
.mt-1 {
  margin-top: 1rem;
}
.ml-1 {
  margin-left: 1em;
}
.mb-1 {
  margin-bottom: 1rem;
}
.mb-2 {
  margin-bottom: 2rem;
}
.mr-25 {
  margin-right: 0.25rem;
}
/* POSITION */
.position-fixed {
  position: fixed;
}
.position-relative {
  position: relative;
}
.position-absolute {
  position: absolute;
}
/* CURSOR */
.cursor-pointer {
  cursor: pointer;
}
/* VISIBILITY */
.hide {
  display: none !important;
}
/* OVERFLOW */
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden !important;
}
.overflow-y-auto {
  overflow-y: auto;
}
/* OTHERS */
.shadow {
  box-shadow: 3px 3px 6px #c3c3c3;
}
.link {
  color: var(--blue);
  text-decoration: none;
  font-size: 1rem;
}
.use-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
}
.no-wrap {
  white-space: nowrap;
}
.line-height-15 {
  line-height: 1.5rem;
}
.font-weight-600 {
  font-weight: 600;
}