/*------------------------------------*\
  #Root
\*------------------------------------*/

:root{
  --Primary-color: #33504d;
  --Primary-dark-color: #002420;
  --Secondary-color:  #fe6b64;
  --Secondary-hover-color: #fea6a2;
  
  /* Neutral Colors */
  --White-color: #fff;
  --Black-color: #333;
}

/*------------------------------------*\
  #BASE
\*------------------------------------*/
.catfish-button,
.button,
a {
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
}


/*------------------------------------*\
  #LAYOUTS
\*------------------------------------*/
.navbar{
  background-color: var(--Primary-color);

  .navbar-brand {

    .is-header-logo {
      height: 1.5rem;
    }
  }


  /*Header Right*/
  .navbar-menu{
      justify-content: flex-end;

      .navbar-start,
      .navbar-end{
          margin: unset;
      }
  }

  a.navbar-item,
  a.navbar-link{
    color: var(--White-color);
    font-size: 0.833rem;

    &:hover,
    &:focus,
    &:active{
      background-color: transparent;
      text-decoration: underline;
      text-decoration-color: inherit;
      -moz-text-decoration-color: inherit;
      text-decoration-thickness: 2px;
    }
  }

  .navbar-dropdown{
    border-top-color: var(--White-color);
    border-radius: 12px;
     -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;

    a.navbar-item{
      color: var(--Black-color);

      &:hover,
      &:focus,
      &:active{
        background-color: transparent;
        text-decoration: underline;
      }
    }
  }

  .navbar-link:not(.is-arrowless)::after{
    border-color: var(--White-color);
  }

  .navbar-end .navbar-item a.button{
    background-color: var(--Secondary-color);
    color: var(--Primary-dark-color);
    border-radius: 100vw;
    -webkit-border-radius: 100vw;
    -moz-border-radius: 100vw;
    -ms-border-radius: 100vw;
    -o-border-radius: 100vw;

    &:hover,
    &:focus,
    &:active{
      background-color: var(--Secondary-hover-color);
    }
  }

   @media screen and (max-width: 1087px){
    .navbar-menu{
      background-color: var(--Primary-color);
      overflow: hidden !important; 

      .navbar-start,
      .navbar-end{

        a.navbar-item:not(:first-child),
        a.navbar-link:not(:first-child){
          margin-top: .5rem;
        }

        .navbar-item.has-dropdown{
          background-color: var(--White-color);
          border-radius: 10px;
          -webkit-border-radius: 10px;
          -moz-border-radius: 10px;
          -ms-border-radius: 10px;
          -o-border-radius: 10px;
        }

        .navbar-dropdown{
          a.navbar-item:not(:first-child){
            margin-top: 0;
          }

          a.navbar-item{
            background-color: transparent;
            border-radius: 0;
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            -ms-border-radius: 0;
            -o-border-radius: 0;
            min-height: initial;
          }
        }
      }

      a.navbar-item,
      a.navbar-link{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        border-radius: 10px;
        background-color: var(--White-color);
        color: var(--Black-color);
        padding: 10px 10px 10px 20px;
        min-height: 56px;
      }

      .navbar-link:not(.is-arrowless)::after {
        border-color: var(--Black-color);
      }
    }

    .navbar-burger span{
      background-color: var(--White-color);
    }

  @media screen and (max-width: 768px) {
      .navbar-brand > a.navbar-item {
        padding: .5rem;
      }

      .navbar-brand .is-header-logo {
        height: 1rem;
      }
    }
  }
}

.nav-search-container .searchbox_wrapper{

  input.searchbox{
    border-top-left-radius: 100vw;
    border-bottom-left-radius: 100vw;
  }

  input.searchbutton {
    border-top-right-radius: 100vw;
    border-bottom-right-radius: 100vw;
    color: var(--Primary-dark-color);
  }
}

/* Footer */
footer.catfish-footer{
  background-color: var(--Primary-color);
  color: var(--White-color);

  ul li a{
    color: var(--White-color);

    &:hover,
    &:focus,
    &:active{
      color: var(--White-color);
      text-decoration: underline;
      text-decoration-color: inherit;
      -moz-text-decoration-color: inherit;
      text-decoration-thickness: 2px;
    }
  }
}
/*------------------------------------*\
  #ADMIN PAGES
\*------------------------------------*/
.login__wrapper{

  & >.catfish-container{
    background-color: var(--Primary-color);
    color: var(--White-color);
  }

  .page-title{
    margin-bottom: 3rem;

    &:before{
      width: 100%;
      margin-bottom: 0;
    }
  }

  .forgot-password a{
    font-size: 1rem;
    font-weight: 600;
    color: var(--White-color);
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;

    &:hover,
    &:focus,
    &:active{
      text-decoration: underline;
      text-decoration-color: inherit;
      -moz-text-decoration-color: inherit;
      text-decoration-thickness: 2px;
    }
  }

  .login-block .table-container{
    
    tr:nth-child(1),
    tr:nth-child(2){
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .5rem;

      .item-value{
        width: 80%;
      }

      input{
        border-radius: 10px;
        height: 53px;
      }
    }
  }

  .returning-wrapper .buttons{
    justify-content: center;

    .catfish-button{
      font-size: 1.2rem;
      font-weight: 600;
      width: 50%;
      border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      -o-border-radius: 10px;
      height: 53px;
    }
  }
}