/* FRAMEWORK *//* FRAMEWORK *//* FRAMEWORK *//* FRAMEWORK *//* FRAMEWORK *//* FRAMEWORK */
/* REUSABLE FLEX */
    .flex {
        display:flex;
        gap:5px;
    }
    .flex-v {
        display:flex;
        gap:5px;
        flex-direction: column;
    }
    .centered {
        align-items: center;
        justify-content: center;
    }
    .flex.center-top {
        align-items: flex-start;
        justify-content: center;
    }
    .flex-v.center-top {
        align-items: center;
        justify-content: flex-start;
    }
    .wrap {
      flex-wrap: wrap;
    }
    .flex.responsive {
      @media screen and (max-width: 550px) { 
      flex-direction: column;
      }
    }

/* REUSABLE GRID */
    .grid {
      display:grid;
      gap:5px;
    }
        .grid.col-1-1 {
      grid-template-columns: 1fr 1fr;
    }
    .grid.col-2-1 {
      grid-template-columns: 2fr 1fr;
    }
    .grid.col-1-2 {
      grid-template-columns: 1fr 2fr;
    }    .grid.col-1-1-2 {
      grid-template-columns: 1fr 1fr 2fr;
    }
    .grid.row-2-1 {
      grid-template-rows: 2fr 1fr;
    }
    .grid.row-1-2 {
      grid-template-rows: 1fr 2fr;
    }
    .grid.row-1-1-1 {
      grid-template-rows: 1fr 1fr 1fr;
    }
    .grid.auto-fit {
      grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
    }


  .masonry {
      column-count: 3;
    column-gap: 1rem;
    > div {
          break-inside: avoid;
          margin-bottom: 1rem;
    }

  }

  /* CONTAINERS */
    .container {
      padding:15px;
      position: relative;
    }
    .container.responsive {
      @media screen and (max-width:550px) {
        padding: 10px 3px;
        width: 100%;
        
      }
    }

    .card {
      padding:10px;
      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.234);
      background-color: white;
      border-radius: 10px;
      overflow: hidden;
      position: relative;
    }
    .profile-card-sm {
      width: 190px;
      height: 70px;
      display: grid;
      position: relative;
      grid-template-columns: 50px auto;
      padding:5px;
      font-size: 14px;
      .coffee-icon {
        width: 20px;
      }
    }

          .max-500 {
      max-width: 500px;
      margin: auto;
        }
    .max-800 {
      max-width: 800px;
      margin: auto;
      @media screen and (max-width: 550px) {
      flex-direction: column;
      padding-inline: 10px;
      }
    }
    .max-1000 {
      max-width: 1000px;
      margin: auto;
      @media screen and (max-width: 550px) {
      flex-direction: column;
      padding-inline: 10px;
      }
    }
    .max-1200 {
      max-width: 1400px;
      margin: auto;
      padding-inline: 90px;
      @media screen and (max-width: 1000px) {
        margin: auto;
        padding-inline: 20px;
      }
      @media screen and (max-width: 550px) {
        width:100%;
      margin: auto;
      flex-direction: column;
      }
    }
    .max-800.col-2-1 {
      @media screen and (max-width: 550px) {
        grid-template-columns: 1fr;
        grid-template-rows: 2fr 1fr;
      }
    }

    /* BUTTONS */
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background-color: var(--button-color);
  color:white;
  border-radius: 20px;
  font-size: clamp(0.8rem, 1vw, 1.2rem);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  padding-inline: clamp(5px, 2vw, 15px);
  padding-block: clamp(3px, 1.5vw, 10px);
  border: none;
  cursor: pointer;
  font-weight: 500;
}

.btn-green {
  background-color: rgba(0, 128, 0, 0.534);
}

.btn-red {
  background-color: rgba(212, 18, 18, 0.678);
}

.btn-blue {
  background-color: rgba(18, 31, 212, 0.637);
}

.btn-grey {
  background-color: rgba(128, 128, 128, 0.534);
  color: black;
  border: none;
}
.btn-light {
  background-color: var(--light-green);
  color:var(--button-color);
}
.btn-dark {
  background-color: var(--button-color);
  color:white;
}

.btn-clear {
  background-color: transparent;
  padding:1px;
  border:none;
}

.btn-word {
  background-color: transparent;
  color:var(--button-color);
  text-transform: capitalize;
  padding:1px;
}
.btn-cancel {
  background-color: rgba(255, 0, 0, 0.084);
  color:var(--dark-red);
}

.btn:hover {
  cursor: pointer;
  opacity: 0.8;
}

.btn:active {
  cursor: pointer;
  border-style: inset;
}

.btn:focus {
  border: outset 2px var(--icu-green-light);
}
.btn:disabled {
  filter: grayscale(100%);
  opacity: 0.7;
}
.btn:disabled:hover {
  cursor: none;
}

.clear-button {

  background-color: transparent;
  border: none;
  font-family: inherit;
  font-size: inherit;
  padding: 2px;
  color:#373833;
  transition: all 0.8s ease;
  position: relative;
  border-radius: 5px;
  
}

.clear-button.withtext {
  display: flex;
  justify-content: center;
  align-items: center;
  gap:5px;
}

.clear-button.withtextbelow {
  display: flex;
  flex-direction: column;

  gap:0px;
  
}

.clear-button:hover {
  cursor: pointer;
  color: black;
}

/*DIALOG*//*DIALOG*//*DIALOG*//*DIALOG*//*DIALOG*//*DIALOG*//*DIALOG*//*DIALOG*//*DIALOG*//*DIALOG*//*DIALOG*/
  .dlg {
    border: solid 1px gray;
    border-radius: 10px;
    padding: 0px;
    width: 80%;
    max-width: 500px;
    position: relative;
    
    p {
      width:100%;
      text-align: center;
      padding-inline: 30px;
    }

    .btn {
      min-width: 100px;
      margin-inline:auto;
      margin-block: 10px;
    }

  }
  .dlg-header {
    position: sticky;
    top: 0;
    background-color: var(--button-color);
    color:white;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:5px 10px;

  }
  .dlg-close {
    width: 25px;
    height:25px;
    background-color: transparent;    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotate(45deg);    
    font-size: 22px;
    color: white;
    border-radius: 50%;
    padding: 0;
    transition-duration: 200ms;
    vertical-align: middle;
    border:none;
  }
  .dlg-close:hover {
    transform: rotate(48deg);
    cursor: pointer;
    
  }


  .dlg-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    margin: auto;
    width: 100%;
    padding: 10px 20px;
  }

  .closebox {
    background-color: var(--tertiary-color);
  }

/* TEXT */
.wiki-text {
    max-width: 60ch;
    margin-inline:auto;
    p {  
      text-align: justify;    
      display: block;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline:auto;
      unicode-bidi: isolate;
      line-height: 1.5;
    }
}
.wiki-text.text-left {
  margin-inline: 0;
  p {
    text-align: left;
  }
}
.profile_header {
  text-transform: uppercase;
  color: var(--button-color);
  margin-block: 5px;
  font-weight: 600;
  width: 100%;
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-small {
  font-size:14px;
}
.text-14 {
  font-size:14px;
}
.text-12 {
  font-size:12px;
}
.text-10 {
  font-size:10px;
}

/* DESIGN */
.br-0 {border-radius: 0px;}
    .br-5 {border-radius: 5px;} 
    .br-10 {border-radius: 10px;}
    .br-15 {border-radius: 15px;}
    .br-20 {border-radius: 20px;}

    .pad-0 {padding: 0px;}
    .pad-5 {
      padding: 5px;
    }
    .pad-10 {
      padding: 10px;
    }
        .pad-15 {
      padding: 15px;
    }
        .pad-20 {
      padding: 20px;
    }
    
    .pad-5-15 {
      padding: 5px 15px;
    }
    .pad-1-5 {
      padding: 1px 5px;
    }
        .gap-0 {
      gap: 0px;
    }
        .gap-5 {
      gap: 5px;
    }
    .gap-10 {
      gap: 10px;
    }
    .gap-15 {
      gap: 15px;
    }
    .gap-20 {
      gap: 20px;
    }
    .w-15 {
      width: 15px;
    }
    .w-25 {
      width: 25px;
    }
    .w-50 {
      width: 50px;
    }
    .w-100 {
      width: 100px;
    }
    .w-150 {
      width: 150px;
    }
      .w-200 {
      width: 200px;
    }
        .w-250 {
      width: 250px;
    }
            .w-300 {
      width: 300px;
    }
    .square {
      aspect-ratio: 1/1;
    }