@font-path: "../fonts/";
@font-roboto-regular: "Roboto-Regular";
@font-roboto-bold: "Roboto-Bold";

@box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.35);
@border-radius: 8px;

@gap-xl: 20px;
@gap-lg: 15px;
@gap-md: 14px;
@gap-reg: 10px;
@gap-sm: 5px;

@fs--2: 10px;
@fs--1: 12px;
@fs-0: 14px;
@fs-05: 16px;
@fs-1: 18px;
@fs-2: 22px;
@fs-3: 24px;
@fs-4: 42px;

@clr-primary: #dedabd;
@clr-previsions: #c5c1a0;
@clr-secondary-one: #edff00;
@clr-secondary-two: #7ea105;
@clr-secondary-three: #5f8a2a;
@clr-secondary-one-hover: #e1f200;
@clr-secondary-two-hover: #779900;
@clr-secondary-three-hover: #578326;
@clr-tertiary-start: #7b6939;
@clr-tertiary-end: #c3a86b;
@clr-text: #181717;
@clr-light: #eef4ed;

@clr-discord: #7289da;
@clr-grey-one: #dee0e2;
@clr-grey-two: #999da1;
@clr-grey-three: #545454;
@clr-green: #198309;
@clr-orange: #dea325;
@clr-red: #eb2126;

@clr-secondary: linear-gradient(
  180deg,
  @clr-secondary-one 0%,
  @clr-secondary-two 50%,
  @clr-secondary-three 100%
);
@clr-secondary-hover: linear-gradient(
  180deg,
  @clr-secondary-one-hover 0%,
  @clr-secondary-two-hover 50%,
  @clr-secondary-three-hover 100%
);
@clr-tertiary: linear-gradient(
  0deg,
  @clr-tertiary-start 0%,
  @clr-tertiary-end 60%,
  @clr-tertiary-end 100%
);
@clr-grey: linear-gradient(
  180deg,
  @clr-grey-one 0%,
  @clr-grey-two 60%,
  @clr-grey-three 100%
);

:root {
  @font-face {
    font-family: @font-roboto-regular;
    src: url("@{font-path}@{font-roboto-regular}.ttf");
    font-display: block;
  }
  @font-face {
    font-family: @font-roboto-bold;
    src: url("@{font-path}@{font-roboto-bold}.ttf");
    font-display: block;
  }

  --box-shadow: @box-shadow;
  --border-radius: @border-radius;

  --gap-xl: @gap-xl;
  --gap-lg: @gap-lg;
  --gap-md: @gap-md;
  --gap-reg: @gap-reg;
  --gap-sm: @gap-sm;

  --clr-primary: @clr-primary;
  --clr-previsions: @clr-previsions;
  --clr-secondary-one: @clr-secondary-one;
  --clr-secondary-two: @clr-secondary-two;
  --clr-secondary-three: @clr-secondary-three;
  --clr-secondary-one--hover: @clr-secondary-one-hover;
  --clr-secondary-two--hover: @clr-secondary-two-hover;
  --clr-secondary-three--hover: @clr-secondary-three-hover;
  --clr-secondary: @clr-secondary;
  --clr-secondary--hover: @clr-secondary-hover;
  --clr-tertiary: @clr-tertiary;
  --clr-text: @clr-text;
  --clr-light: @clr-light;

  --clr-discord: @clr-discord;
  --clr-grey: @clr-grey;
  --clr-green: @clr-green;
  --clr-orange: @clr-orange;
  --clr-red: @clr-red;

  --fs--2: @fs--2;
  --fs--1: @fs--1;
  --fs-0: @fs-0;
  --fs-05: @fs-05;
  --fs-1: @fs-1;
  --fs-2: @fs-2;
  --fs-3: @fs-3;
  --fs-4: @fs-4;

  font-size: var(--fs-0);

  h1,
  h2,
  h3,
  h4 {
    font-family: @font-roboto-bold;
    margin: 0 auto 0 var(--gap-reg);
  }

  h1 {
    font-size: var(--fs-4);
    text-transform: uppercase;
    margin-left: 0;
    color: var(--clr-light);
  }
  h2 {
    font-size: var(--fs-3);
    color: var(--clr-text);
  }
  h3 {
    font-size: var(--fs-2);
    color: var(--clr-text);
  }
  h4 {
    font-size: var(--fs-1);
  }
  h5 {
    font-size: 1.1em;
    padding: var(--gap-sm) 0;
  }
  h6 {
    font-size: 1em;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  list-style: none;
  padding: 0;
  text-decoration: none;
  scrollbar-color: #7ea10557 #00000000;
  scrollbar-width: thin;
  user-select: none;
}

a {
  color: var(--clr-text);
}

button,
input {
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--clr-text);
  cursor: pointer;
  height: 100%;
}

.modalImage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  opacity: 1;
}

.modal-close {
  transition: all .3s ease-in-out;
}

.modal-open {
  cursor: pointer;
  transition: all .3s ease-in-out;
  background-color: rgba(0, 0, 0, 0.8);
}

.is-open {
  max-width: 70vw;
}

.quest {
  color: #1b78d2 !important;
}

.achievement {
  font-weight: 600;
  color: #006400 !important;
}

.dungeon {
  font-style: oblique !important;
  color: #b700df !important;
  font-weight: 500 !important;
}

.warning {
  color: red !important;
}

.keyboardFocusedElement {
  position: relative;
  
  &::before {
    content: "";
    position: absolute;
    width: 95%;
    height: 0px;
    bottom: -3px;
    left: 0;
    border: outset 2px var(--clr-red);
    border-radius: 4px;
  }
}

body {
  color: var(--clr-text);
  display: flex;
  font-family: @font-roboto-regular;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  position: relative;

  &::after {
    content: "Certaines illustrations sont la propriété d'Ankama Games, d'autres de Icones8 - Tous droits réservés.";
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #ffffffa3;
  }

  #theme-emeraude {
    --clr-primary: @clr-primary;
    --clr-secondary-one: @clr-secondary-one;
    --clr-secondary-two: @clr-secondary-two;
    --clr-secondary-three: @clr-secondary-three;
    --clr-tertiary-start: @clr-tertiary-start;
    --clr-tertiary-end: @clr-tertiary-end;
    --clr-text: @clr-text;
    --clr-light: @clr-light;
  }

  #theme-ocre {
    --clr-primary: #2e2e2e;
    --clr-secondary-one: #4a4a4a;
    --clr-secondary-two: #3a3a3a;
    --clr-secondary-three: #2a2a2a;
    --clr-tertiary-start: #1a1a1a;
    --clr-tertiary-end: #4a4a4a;
    --clr-text: #e0e0e0;
    --clr-light: #1e1e1e;
  }

  #backgroundImage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
  }

  #header {
    align-items: center;
    display: flex;
    padding: var(--gap-xl) var(--gap-xl) var(--gap-reg);
    color: var(--clr-light);
    font-size: var(--fs-1);

    h1 {
      display: flex;
      margin: 0;
    }

    div {
      align-items: center;
      display: flex;
      margin-left: var(--gap-reg);

      #credentials {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 0;
      }

      #contacts {
        align-items: flex-start;
        flex-direction: column;
        padding-left: 0;

        i {
          color: var(--clr-discord);
          margin-right: 5px;
          font-size: var(--fs-1);
        }
      }

      i {
        font-size: var(--fs-3);
      }

      .themeToggle {
        margin-left: 0;

        &:first-of-type {
          margin-left: 2em;
        }
      }
    }

    #gear {
      margin-left: auto;
      font-size: var(--fs-3);
      padding: 0 10px;
      cursor: pointer;
      transition: all 0.2s linear;

      &:hover {
        rotate: 180deg;
        font-size: 1.5em;
      }
    }
  }

  .flex(@flex: 1) {
    display: flex;
    flex: @flex;
  }

  .hidden {
    display: none !important;
  }

  .active {
    background: darken(@clr-primary, 10%);
    box-shadow: 0 0 0 !important;
  }

  .title {
    .flex(0);
    align-items: center;
    background: var(--clr-tertiary);
    border: 1px solid var(--clr-light);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    box-shadow: var(--box-shadow);
    justify-content: space-between;

    .imgBackground {
      background: var(--clr-secondary);
      border-right: 1px solid var(--clr-light);
      border-radius: var(--border-radius) 0 0 0;
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--gap-reg);

      img {
        border-radius: var(--border-radius) 0 0 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  .content {
    .flex();
    flex-direction: column;
    margin: var(--gap-reg) 0;
    padding: 0 var(--gap-reg) var(--gap-reg);
    overflow-y: auto;

    ul {
      display: flex;
      flex-direction: column;
      gap: var(--gap-reg);

      li {
        align-items: center;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        display: flex;
        justify-content: space-between;

        & div {
          transition: background 0.3s ease-in-out;
          border-radius: @border-radius 0 0 @border-radius;
        }

        & div:first-child:hover {
          background: darken(@clr-primary, 20%);
        }

        i {
          cursor: pointer;
          font-size: 15px;
          padding: var(--gap-lg);
        }

        p {
          margin-right: auto;
          margin-left: @gap-sm;
        }

        .box-checkbox {
          background: none;
          border: none;
          display: flex;
          padding: var(--gap-md);

          input {
            cursor: pointer;
            width: 15px;
            height: 15px;
          }
        }
      }
    }
  }

  .interactable {
    display: flex;
    justify-content: space-between;
    padding: var(--gap-reg);
    padding-top: 0;

    button,
    div {
      align-items: center;
      background: var(--clr-secondary);
      border-radius: var(--border-radius);
      border: none;
      color: var(--clr-text);
      cursor: pointer;
      display: flex;
      flex: 1;

      &:disabled {
        cursor: initial;

        &:hover {
          background: var(--clr-grey);
        }
      }

      &:first-child {
        border-radius: var(--border-radius) 0 0 var(--border-radius);
        text-align: left;
        border: 1px solid var(--clr-light);
        border-right: none;
      }

      &:last-child {
        border-radius: 0 var(--border-radius) var(--border-radius) 0;
        text-align: right;
        justify-content: flex-end;
        border: 1px solid var(--clr-light);
        border-left: none;
      }

      &:hover {
        background: var(--clr-secondary--hover);
      }

      i {
        font-size: 15px;
        padding: var(--gap-reg);
      }
    }
  }

  #content {
    align-items: center;
    .flex();
    height: 100%;
    justify-content: center;
    overflow: hidden;
    min-height: 0;

    #frame_main {
      position: relative;
      display: flex;
      flex: 1;
      gap: 10px;
      height: 100%;
      padding: 0 var(--gap-xl) var(--gap-xl);

      main {
        .flex(3);
        flex-direction: column;
        gap: 10px;

        .caretOpen {
          transition: all 0.3s ease-in-out; 
          rotate: 180deg;
        }

        .caretClose {
          transition: all 0.3s ease-in-out; 
          rotate: 0deg;
        }

        #topNav {
          position: relative;
          background: var(--clr-secondary);
          cursor: pointer;
          border: solid 1px var(--clr-light);          
          transition: all 0.1s ease-in-out;

          .guide-header {
            align-items: center;
            display: flex;

            .imgBackground {
              border-radius: var(--border-radius) 0 0 var(--border-radius);
              width: 50px;
              height: 50px;
              display: flex;
              align-items: center;
              justify-content: center;
              padding: var(--gap-reg);
        
              img {
                border-radius: var(--border-radius) 0 0 var(--border-radius);
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }

            i {
              padding: 0 var(--gap-reg);
              font-size: var(--fs-4);
            }

            h2 {
              margin-left: 0;
            }
          }
          
          .dropDownOpen {
            display: flex;
            flex-direction: column;
            position: absolute !important;
            margin-bottom: 60px;
            width: 100%;
            background: var(--clr-secondary);
            border-radius: var(--border-radius);
            border: solid 1px var(--clr-light);
            z-index: 100;
            top: 0;
          }

          .dropdown-content {
            position: absolute;
            z-index: 1000;
            overflow: hidden;
            width: 100%;
            background: var(--clr-secondary-two);
            border-radius: 0 0 var(--border-radius) var(--border-radius);
            border: solid 1px var(--clr-light);
            
            .overflow {
              max-height: 0;
              transition: all 0.1s ease-in-out;
              overflow-y: auto;
              scrollbar-color: #7b6939 #00000000;
              margin: var(--gap-sm);
          
              .guide-item {
                padding: var(--gap-reg) var(--gap-lg);
                margin-bottom: 2px;
                cursor: pointer;
              }
          
              .guide-item:hover {
                background: #f5f5f5;
                border-radius: calc(var(--border-radius) / 2);
              }
          
              .guide-item.selected {
                background-color: #f0f0f0;
                border-radius: calc(var(--border-radius) / 2);
                font-weight: bold;
              }
            }
          
            .overflowOpen {
              max-height: 400px;
            } 
          
            .overflowClose {
              max-height: 0;
            }
          }
        }

        .js-open {
          border-radius: var(--border-radius) var(--border-radius) 0 0;
          
        }

        .js-close {
          border-radius: var(--border-radius);
        }

        #centerContent {
          .flex();
          gap: 10px;
          overflow: hidden;

          #objectivesAndAchievements {
            .flex(0.8);
            flex-direction: column;
            background-color: var(--clr-primary);
            border-radius: var(--border-radius);
    
            #objectives {
              .flex();
              flex-direction: column;
              overflow: hidden;
    
              #frame_objectives {
                display: flex;
                flex-direction: column;
                gap: var(--gap-reg);
                font-size: var(--fs-05);
    
                .objective_element {
                  ul {
                    gap: 0;
                    li {
                      box-shadow: none;
                      border: none;
                      border-radius: none;
                      display: block;
                    }
                  }
                }
              }
    
            }
    
            #achievements {
              .flex(2);
              flex-direction: column;
              overflow: hidden;
    
              .title {
                border-radius: 0 0 0 0;
                .imgBackground {
                  border-radius: 0 0 0 0;
                }
              }
    
              .content {
                #frame_achievements {
                  
                  ul {
                    li {
                      transition: background 0.3s ease-in-out;
                      border-radius: 8px;
                      &:hover {
                        background: darken(@clr-primary, 10%);
                      }
      
                      .achievementCompletion {
                        padding-right: var(--gap-reg);
                        margin-left: @gap-sm;
                        font-family: @font-roboto-bold;
                      }
      
                      .achievementName {
                        .flex();
                        flex-direction: column;
                        min-height: 45px;
                        justify-content: center;
      
                        .expectIcons {
                          margin-right: auto;
                          margin-left: @gap-sm;
      
                          .flex();
                          gap: var(--gap-reg);
                          img {
                            width: 15px;
                            height: 15px;
                            object-fit: cover;
                          }
                        }
      
                        a {
                          padding: var(--gap-sm) 0;
                          .flex();
                          justify-content: center;
                          flex-direction: column;
                          p {
                            text-align: left;
                          }
                        }
                      }
                    }
      
                    .borders-green {
                      border: solid 2px @clr-green;
                    }
                    .borders-red {
                      border: solid 2px @clr-red;
                    }
                    .borders-orange {
                      border: solid 2px @clr-orange;
                    }
                  }
                }
              }
            }
          }

          #guide {
            .flex(2);
            background-color: var(--clr-primary);
            border-radius: var(--border-radius);
            flex-direction: column;
            overflow: hidden;

            .title {
              p {
                margin-right: var(--gap-reg);
                color: var(--clr-light);
              }
            }

            .content {
              gap: var(--gap-reg);
              font-size: var(--fs-05);

              #frame_guide {
                
                #previsions {
                  display: flex;
                  flex-direction: column;
                  background-color: var(--clr-previsions);
                  border: solid 1px var(--clr-light);
                  border-radius: var(--border-radius);
                  box-shadow: var(--box-shadow);
                  padding: var(--gap-reg);
                  margin-bottom: var(--gap-md);
                  
                  h4 {
                    margin-bottom: var(--gap-reg);
                    margin-left: auto;
                    color: var(--clr-red);
                  }
                  
                  a {
                    color: revert;
                    transition: all 0.2s ease;

                    &:hover {
                      color: lighten(#0000CC, 30%);
                    }
                  }
  
                  #prevision_content {
                    display: flex;
                    flex-direction: column;
                    gap: @gap-sm;
  
                    .prevision_element {
                      box-shadow: none;
                      display: flex;
                      justify-content: flex-start;
                      align-items: center;
                      
                      &:not(:first-child) {
                        margin-top: var(--gap-reg);
                      } 

                      img {
                        width: 25px;
                        height: 25px;
                        object-fit: cover;
                        margin-right: var(--gap-reg);
                      }
                      
                      .prevision_element_content {
                        display: flex;
                        flex-direction: column;
                        gap: var(--gap-sm);

                        ul {
                          gap: 0;
                          
                          li {
                            display: block;
                            box-shadow: none;
                            border: none;
                            border-radius: none;
                          }
                        }
                      }
                    }
                  }
                }
  
                #guide_content {
                  display: flex;
                  flex-direction: column;
                  gap: var(--gap-reg);
                  
                  .guide_element {
                    display: flex;
                    flex-direction: column;
                    gap: var(--gap-reg);
                    
                    a {
                      color: revert;
                      transition: all 0.2s ease;
  
                      &:hover {
                        color: lighten(#0000CC, 30%);
                      }
                    }

                    ul {
                      gap: 0;

                      li {
                        display: block;
                        box-shadow: none;
                        border: none;
                        border-radius: none;
                      }

                      ul {
                        margin-left: var(--gap-lg);
                      }
                    }

                    img {
                      width: 70%;
                      object-fit: scale-down;
                      cursor: pointer;
                    }

                    h4 {
                      margin-left: 0;
                      font-size: 1.3em;
                      margin: var(--gap-reg) 0 0;
                    }

                    h4 ~ p,
                    h4 ~ ul {
                      margin-left: 4px;
                    }

                    h5 {
                      margin-left: 4px;
                    }

                    h5 ~ * {
                      &:not(h5) {
                        margin-left: 8px !important;
                      }
                    }
                    
                    .jsToggleSummaryBtn {
                      padding: 8px 0;
                      background: lighten(@clr-previsions, 5%);
                      width: 100%;
                      box-shadow: var(--box-shadow);
                      font-family: 'Roboto-Bold';
                      border-radius: 4px;

                      &:hover {
                        background: @clr-previsions;
                      }

                      &:active {
                        box-shadow: none;
                      }
                    }

                    .jsGuideSummary {
                      display: none;

                      .guideSummary {
                        display: flex;
                        flex-direction: column;
                        gap: var(--gap-reg);

                        &:not(:last-child) {
                          margin-bottom: var(--gap-lg);
                        }
  
                        h5 {
                          color: var(--clr-red);
                          margin-left: 0;
                          font-size: 1.1em;
                          margin: var(--gap-sm) 0;
                        }
                      }

                      p:not(:last-child) {
                        margin-bottom: var(--gap-reg);
                      }
                    }

                    .groupTwoOrLessImages {
                      display: flex;
                      flex-wrap: wrap;

                      img {
                        width: 50%;
                        padding: 2px;
                      }
                    }

                    .groupTwoOrMoreImages {
                      display: flex;
                      flex-wrap: wrap;

                      img {
                        width: 33%;
                        padding: 2px;
                      }
                    }

                    .groupOneImageAndText {
                      display: flex;
                      gap: var(--gap-sm);

                      img {
                        width: 70%;
                      }

                      div {
                        padding: 0 var(--gap-sm);
                      }
                    }
                  }
                }
              }

            }

            .interactable {
              transition: background 0.3s ease-in-out;
            }
          }

          #quests {
            .flex(0.8);
            background-color: var(--clr-primary);
            border-radius: var(--border-radius);
            flex-direction: column;
            overflow-y: auto;

              .content {
                padding: 0 0 var(--gap-reg);
                
                #quest_frame_achievement_title {
                  position: sticky;
                  left: 0;
                  top: 0;
                  background: var(--clr-primary);
                  
                  h4 {
                    text-align: center;
                    margin: 0 0 var(--gap-reg) 0;
                    position: relative;
    
                    &::after {
                      content: "";
                      display: block;
                      height: 2px;
                      background: var(--clr-secondary);
                      width: 30%;
                      margin: 2px;
                      position: absolute;
                      left: 50%;
                      transform: translateX(-50%);
                    }
                  }
                }

                #frame_quests {
                  padding: 0 var(--gap-reg);
                  
                  .isCompleted {
                    box-shadow: 0 0 0 !important;
                    opacity: 50%;
    
                    i {
                      padding: 10px !important;
                      font-size: 12px !important;
                    }
    
                    p {
                      font-size: 12px !important;
                    }
    
                    &:hover {
                      opacity: 100%;
                    }
                  }
    
                  .js-quest {
                    transition: 0.3s ease-in-out;
    
                    .qButton {
                      transition: background 0.3s ease-in-out;
                      border-radius: 0 @border-radius @border-radius 0;
                    }
    
                    .check {
                      &:hover {
                        background: #23dc3c91;
                      }
                    }
    
                    .uncheck {
                      &:hover {
                        background: lighten(@clr-red, 20%);
                      }
                    }
                  }
    
                  ul {
                    li {
                      .validate-button {
                        border-radius: 0 @border-radius @border-radius 0;
                        transition: all 0.3s ease-in-out;
                        &:hover {
                          background: darken(@clr-primary, 20%);
                        }
                      }
                    }
                  }
                }
              }
  
              .interactable {
                div {
                  font-size: var(--fs--1);
                  cursor: auto;
  
                  padding: 0;
  
                  & p:first-child {
                    text-align: right;
                  }
  
                  & p:last-child {
                    text-align: left;
                  }
                }
              }
          }
        }
      }
      
    }
  }
}


.jsToggleSummaryBtn {
  padding: 8px 0;
  background: lighten(@clr-previsions, 5%);
  width: 100%;
  box-shadow: var(--box-shadow);
  font-family: 'Roboto-Bold';
  border-radius: 4px;

  &:hover {
    background: @clr-previsions;
  }

  &:active {
    box-shadow: none;
  }
}

.jsGuideSummary {
  display: none;

  .guideSummary {
    display: flex;
    flex-direction: column;
    gap: var(--gap-reg);

    &:not(:last-child) {
      margin-bottom: var(--gap-lg);
    }

    h5 {
      color: var(--clr-red);
      margin-left: 0;
      font-size: 1.1em;
      margin: var(--gap-sm) 0;
    }
  }
}

#alignment_form {
  margin-right: var(--gap-reg);
  
  .form-group {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);

    select {
      background: var(--clr-secondary--hover);
      border: solid 1px var(--clr-primary);
      border-radius: var(--border-radius);
      padding: 4px;
    }
  }
}

.optionModalBackground {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #181717ad;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;

  .optionModal {
    background: var(--clr-primary);
    display: flex;
    min-width: 70vw;
    min-height: 70vh;
    max-width: 50vw;
    max-height: 50vh;
    border-radius: var(--border-radius);
    position: relative;
  
    .optionLeftPanel {
      flex: 1;
      padding: var(--gap-lg);
      box-shadow: 2px 0px 2px #00000030;
  
      h4 {
        margin-bottom: var(--gap-reg);
        text-align: center;
        margin-left: 0;
        text-transform: uppercase;
      }
  
      .settingsContainer {
        display: flex;
        flex-direction: column;
        gap: var(--gap-reg);
  
        .optionContainer {
          display: flex;
          gap: 5px;
          align-items: center;
          border-radius: var(--border-radius);
          box-shadow: var(--box-shadow);
          cursor: pointer;
  
          &:hover {
            background: #cdc79b;
          }

          i {
            padding: var(--gap-reg);
          }
        }
      }
    }
  
    .optionRightPanel {
      flex: 4;
      display: flex;
      flex-direction: column;
      gap: var(--gap-lg);
      padding: var(--gap-lg);
  
      .settingsContainer {
        display: flex;
        gap: var(--gap-reg);
        cursor: pointer;
        transition: background 0.3s ease-in-out;

        &:hover {
          background: #cdc79b91;
          border-radius: var(--border-radius);
        }
  
        i {
          font-size: 20px;
          margin-top: 3px;
        }
  
        .settingTitle {
          font-size: 20px;
          font-family: 'Roboto-Bold';
        }
  
        .settingDescription {
          font-size: 13px;
          color: #5c5c5c;
          margin-left: var(--gap-reg);
        }
      }
    }

    .optionCloseButton {
      position: absolute;
      top: 0;
      right: 0;
      padding: 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--clr-primary);
      border-radius: 50%;
      transition: all 0.2s ease-in-out;

      &:hover {
        color: var(--clr-red);
        font-size: 1.5em;
      }
    }
  }
}

#messages {
  position: absolute;
  top: var(--gap-lg);
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  border-radius: var(--border-radius);
  padding: 10px;
  background: var(--clr-primary);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Roboto-Bold';
  border: solid 2px var(--clr-light);
  text-align: center;
}

.success {
  background: lighten(@clr-green, 60%) !important;
  border: solid 2px var(--clr-light);
}

.failure {
  background: lighten(@clr-red, 30%) !important;
}
