/*https://colorhunt.co/palette/3936464f45576d5d6ef4eee0*/
/*:root
{
  --sbre1: rgb(57, 54, 70);
  --sbre2: rgb(79, 69, 87);
  --sbre3: rgb(109, 93, 110);
  --clre1: rgb(244, 238, 224);
}*/

/* https://colorhunt.co/palette/27374d526d829db2bfdde6ed */
/*:root
{
  --sbre1: rgb(39, 55, 77);
  --sbre2: rgb(82, 109, 130);
  --sbre3: rgb(157, 178, 191);
  --clre1: rgb(221, 230, 237);
}*/

:root
{
  --sbre1: rgb(34,34,34);
  --sbre2: rgb(48,48,48);
  --sbre3: rgb(90,94,107);
  --clre1: rgb(226,188,116);
}

/* W3 edit */

.w3-button
{
  background-color: var(--sbre2);
  color: white;
}

.w3-button:hover
{
  background-color: var(--sbre1);
  color: black;
}

.w3-container, .w3-panel 
{
  padding: 0.01em 10px;
}

.w3-margin-bottom
{
  margin-bottom: 10px!important;
}

.w3-margin-top
{
  margin-top: 10px!important;
}

.w3-bottombar
{
    border-bottom: 3px solid #ccc!important;
}

.w3-topbar
{
    border-top: 3px solid #ccc!important;
}

/* End W3 edit */

span
{
  font-family: "Raleway", sans-serif;
}
body, h1,h2,h3,h4,h5,h6
{
  font-family: "Montserrat", sans-serif;
}

.bg-lvlup
{
  background: linear-gradient(180deg, rgb(76 175 80 / 50%) 0%, #000 100%) !important;
}

.w3-color-4
{
  background-color: var(--clre1);
  color: black;
}

.w3-color-shop
{
  color: #fff!important;
  background-color: #ff3d00e0 !important;
}

.w3-sidebar 
{
  width: 130px;
}

/* Add a left margin to the "page content" that matches the width of the sidebar (120px) */
#main 
{
  margin-left: 130px;
  background: var(--clre1);
}

/* Remove margins from "page content" on small screens */
@media only screen and (max-width: 600px)
{
  #main 
  {
    margin-left: 0px; 
    /*margin-top: 52.75px;*/
  }

  .w3-container, .w3-panel { padding: 0.01em 6px; }
  .w3-margin-top { margin-top: 6px!important; }
  .w3-margin-bottom { margin-bottom: 6px!important; }
}

.w3-degrade
{
  background: rgb(0,0,0);
  background: linear-gradient(180deg, rgba(0,0,0,1) 65%, rgba(80,63,0,1) 100%);
}

.w3-gray-gray
{
  background: rgb(34,34,34);
  color: white;
}

.w3-tooltip 
{
  position: relative;
  display: inline-block;
}

.w3-tooltip .w3-tooltiptext
{
  visibility: hidden;
  position: absolute;
  width: 180px;
  background-color: #202124;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  z-index: 1;
  opacity: 0;
  transition: opacity .6s;
}

.w3-tooltiptext
{
  top: 55%;
  left: 50%;
  margin-left: -90px;
  border: 1px solid #ffc107;
}

.w3-tooltip .w3-tooltiptext-up
{
  visibility: hidden;
  position: absolute;
  width: 130px;
  background-color: #202124;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  z-index: 1;
  opacity: 0;
  transition: opacity .6s;
}

.w3-tooltiptext-up
{
  top: 55%;
  left: 50%;
  margin-left: -65px;
  border: 1px solid #ffc107
}

.w3-tooltip .w3-tooltiptext-right
{
  visibility: hidden;
  position: absolute;
  width: 50px;
  background-color: #202124;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  z-index: 1;
  opacity: 0;
  transition: opacity .6s;
}

.w3-tooltiptext-right
{
  top: -4px;
  margin-left: 25px;
  border: 1px solid #ffc107
}

.w3-tooltip .w3-tooltiptext-right::after
{
  content: "";
  position: absolute;
  margin-top: 4px;
  margin-left: -49px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #ffc107 transparent transparent;
}

.w3-tooltip .w3-tooltiptext::after, .w3-tooltip .w3-tooltiptext-up::after 
{
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #ffc107 transparent;
}

.w3-tooltip:hover .w3-tooltiptext, .w3-tooltip:hover .w3-tooltiptext-up, .w3-tooltip:hover .w3-tooltiptext-right
{
  visibility: visible;
  opacity: 1;
}

.w3-pointer
{
  cursor: pointer;
}

.w3-verticale
{
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.w3-margin-right-5
{
  margin-right: 5px!important;
}

.w3-margin-small
{
  margin: 8px !important;
}

.w3-margin-small-n
{
  margin: 8px 8px 0px 8px !important;
}

.w3-margin-small-u, .w3-margin-small-v
{
  margin: 0px 8px 8px 8px !important;
}

.w3-border-2
{
  border-width: 2px !important;
}

.w3-border-3
{
  border-width: 3px !important;
}

.w3-modal
{
  padding-top: 30px !important;
}

.w3-card-light
{
  box-shadow: 0 0 5px 0px rgb(255 255 255 / 30%), 0 4px 20px 0 rgb(255 255 0 / 5%);
}

.w0-button
{
  border: none;
  display: inline-block;
  padding: 8px 16px;
  vertical-align: middle;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background-color: inherit;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}

.w0-button:hover
{
  box-shadow: 0 0 5px 0px rgb(255 255 255 / 30%), 0 4px 20px 0 rgb(255 255 0 / 5%);
}

.card_view
{
  overflow: hidden;
}

/* NAV */

.dz-nav
{
  background: var(--sbre1);
  padding: 6px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  flex-direction: column;
  color: white;
}

.nav-btn
{
  padding: 12px;
  margin-bottom: 6px;
  text-decoration: none;
  border: solid var(--sbre1);
}

.nav-btn:hover
{
  transition-duration: 1s;
  transition-property: box-shadow;
  box-shadow: 0 4px 10px 10px rgba(0,0,0,0.16), inset 0 4px 10px 20px rgba(0,0,0,0.12)
}

.nav-btn-focus
{
  padding: 12px;
  margin-bottom: 6px;
  text-decoration: none;
  background: var(--sbre2);
}

  /* NAV MINI */

  .dz-nav-mini
  {
    background: var(--sbre1);
    padding: 0px 2px;
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
    flex-direction: row;
  }

  .btn-mini
  {
    flex: 1 1 0;
    border-bottom-right-radius: 30%;
    border-bottom-left-radius: 30%;
    padding: 10px 6px;
    margin-bottom: 6px;
    background: var(--sbre1);
  }

  .btn-mini-focus
  {
    color: white;
    flex: 1 1 0;
    border-bottom-right-radius: 30%;
    border-bottom-left-radius: 30%;
    padding: 10px 6px;
    margin-bottom: 6px;
    background: var(--sbre2);
  }

  /* NAV MINI END */

/* NAV END */

.sombre-1
{
  background: var(--sbre1);
}

.sombre-2
{
  background: var(--sbre2);
}

.sombre-3
{
  background: var(--sbre3);
}

.txt-light
{
  color: var(--clre1)!important;
}

/* Flex */

.flex
{
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: center;
}

.flex-wrap
{
  flex-wrap: wrap;
}

.flex-grow
{
  flex: 1 1 0;
  width: 0;
}

.flex-gap
{
  gap: 10px;
}

.flex-column
{
  flex-direction: column;
}

.flex-gap-20
{
  gap: 20px;
}

.flex-gap-15
{
  gap: 15px;
}

.flex-gap-10
{
  gap: 10px;
}

.flex-gap-5
{
  gap: 5px;
}

.flex-center
{
  align-items: center
}

.clip-text
{ 
  @supports (background-clip:text) or (-webkit-background-clip:text)
  {
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 150%;
    background-position: center;
  }
}

.w3-hover-reset:hover
{
  opacity: 1;
}

.w3-round-top
{
  border-radius: 4px 4px 0 0;
}

.w3-margin-5
{
  margin-top : 5px;
  margin-bottom: 5px;
}

.w3-margin-8
{
  margin-top: 8px;
  margin-bottom: 8px;
}

.w3-margin-top-5
{
  margin-top : 5px;
}


/* SCROLLBAR */
::-webkit-scrollbar
{
  width: 8px;
}

::-webkit-scrollbar-track
{
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb
{
  background: linear-gradient(45deg, #667eea, #764ba2);
  border-radius: 10px;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover
{
  background: linear-gradient(45deg, #5a67d8, #6b46c1);
}

/* Background Colors */
.w0-color-50 { background-color: #fcf9f0 !important; }
.w0-color-100 { background-color: #f8f0dc !important; }
.w0-color-200 { background-color: #f0deb8 !important; }
.w0-color-300 { background-color: #e2bc74 !important; }
.w0-color-400 { background-color: #dca85b !important; }
.w0-color-500 { background-color: #d4903b !important; }
.w0-color-600 { background-color: #c67930 !important; }
.w0-color-700 { background-color: #a45f2a !important; }
.w0-color-800 { background-color: #844c28 !important; }
.w0-color-900 { background-color: #6b3f23 !important; }
.w0-color-950 { background-color: #392011 !important; }

/* Text Colors */
.w0-text-color-50 { color: #fcf9f0 !important; }
.w0-text-color-100 { color: #f8f0dc !important; }
.w0-text-color-200 { color: #f0deb8 !important; }
.w0-text-color-300 { color: #e2bc74 !important; }
.w0-text-color-400 { color: #dca85b !important; }
.w0-text-color-500 { color: #d4903b !important; }
.w0-text-color-600 { color: #c67930 !important; }
.w0-text-color-700 { color: #a45f2a !important; }
.w0-text-color-800 { color: #844c28 !important; }
.w0-text-color-900 { color: #6b3f23 !important; }
.w0-text-color-950 { color: #392011 !important; }