/* Auth 01 */
.auth-01{
  position:relative; display:flex; align-items:center; min-height:100dvh;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.auth-01 > .bg-img{
  position:fixed; top:0; left:0; width:100vw; height:100dvh;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.auth-01 > .container{position:relative;}
.auth-01 .auth-container{width:100%; max-width:26rem; margin:0 auto; overflow:hidden;}
.auth-01 .auth-container.auth-container-lg{max-width:36rem;}
.auth-01 .auth-container > .auth-body{width:100%; padding:2.25rem 2rem;}
.auth-01 .auth-container > .auth-footer{width:100%; padding:1.25rem 2rem;}
.auth-01 .auth-container .title{display:flex; align-items:center; justify-content:center;}
.auth-01 .auth-container .title .logo{
  display:block; height:3.25rem; width:auto; margin:0 .75rem 0 0;
}
@media screen and (max-width:1199.98px){
  .auth-01 .auth-container .title .logo{height:3.1875rem; margin:0 .6875rem 0 0;}
}
@media screen and (max-width:991.98px){
  .auth-01 .auth-container .title .logo{height:3.125rem; margin:0 .625rem 0 0;}
}
@media screen and (max-width:767.98px){
  .auth-01 .auth-container > .auth-body{padding:1.75rem 1.5rem;}
  .auth-01 .auth-container > .auth-footer{padding:1.25rem 1.5rem;}
  .auth-01 .auth-container .title .logo{height:2.9375rem; margin:0 .5625rem 0 0;}
}
@media screen and (max-width:575.98px){
  .auth-01 .auth-container > .auth-body{padding:1.5rem 1rem;}
  .auth-01 .auth-container > .auth-footer{padding:1.25rem 1rem;}
}
@media screen and (min-width:1200px){
  .sidenav + .auth-01{margin-left:15rem; width:calc(100% - 15rem);}
  .sidenav .auth-01 > .bg-img{left:15rem; width:calc(100vw - 15rem);}
}
/* @supports (-webkit-touch-callout:none){
  .auth-01{min-height:-webkit-fill-available;}
  .auth-01 > .bg-img{height:-webkit-fill-available;}
} */


/* Chat 01 */
.chat-01 .chat-panel-left input[type=text]{
  border:0!important; padding-top:.75rem!important; padding-bottom:.75rem!important;
}
.chat-01 .chat-panel-left > .header{border-bottom:1px solid transparent;}
.chat-01 .chat-panel-left > .body, .chat-01 .chat-panel-right > .body{
  position:relative; display:block; padding:.5rem 0; overflow-x:hidden; overflow-y:auto;
  height:calc(100dvh - 17.625rem); max-height:calc(100dvh - 17.625rem);
}

.chat-01 .chat-person{
  display:block; position:relative; padding:0;
  border-radius:var(--bradius); cursor:pointer; transition:background .25s;
}
.chat-01 .chat-person > .wrapper{
  display:flex; align-items:center; width:100%; padding:.5rem .75rem;
}
.chat-01 .chat-person .avatar-wrapper{width:2.875rem;}
.chat-01 .chat-person .text-wrapper{
  position:relative; width:calc(100% - 2.875rem); padding:0 1rem 0 .75rem;
}
.chat-01 .chat-person .name, .chat-01 .chat-person .preview, 
.chat-01 .chat-person .time, .chat-01 .chat-header .name{
  width:100%; display:block; display:-webkit-box; overflow:hidden;
  text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:1;
}
.chat-01 .chat-person .dot-alert{
  position:absolute; top:.4375rem; right:0; width:.625rem; height:.625rem; border-radius:50%;
}
.chat-01 .chat-person > .option-float{
  position:absolute; top:.5rem; right:.5rem; opacity:0; transition:opacity .25s;
}
.chat-01 .chat-person:hover > .option-float{opacity:1;}
.chat-01 .chat-person > .option-float > .wrapper{position:relative;}
.chat-01 .chat-person > .option-float .option{
  display:flex; align-items:center; white-space:nowrap; cursor:pointer;
  padding:.5rem .5rem; overflow:hidden; font-size:1rem;
  transition:background .25s, color .25s;
}
.chat-01 .chat-person > .option-float .option.main{
  padding:.375rem .5rem; border-radius:var(--bradius);
}
.chat-01 .chat-person > .option-float .option *{line-height:1;}
.chat-01 .chat-person > .option-float .dropdown{
  position:absolute; top:calc(100% + .5rem); right:0; min-width:7rem; opacity:0;
  pointer-events:none; border:1px solid transparent; border-radius:var(--bradius);
  padding:.1875rem 0; transition:top .25s, opacity .25s;
}
.chat-01 .chat-person > .option-float:hover .dropdown{top:100%; opacity:1; pointer-events:auto;}

.chat-01 .chat-panel-right > .body{padding:0; border-radius:0 0 var(--bradius) var(--bradius);}
.chat-01 .chat-panel-right > .header{
  display:flex; align-items:center; height:3rem; border-bottom:1px solid transparent;
}
.chat-01 .chat-header{display:flex; align-items:center; height:3rem; padding:0 1rem 0 .5rem;}
.chat-01 .chat-header > .avatar-wrapper{width:2rem;}
.chat-01 .chat-header > .text-wrapper{width:calc(100% - 4.625rem); padding:0 1rem;}
.chat-01 .chat-footer{
  display:flex; align-items:center; height:3rem; border-top:1px solid transparent;
}
.chat-01 .chat-footer input[type=text]{border:0!important;}

.chat-01 .chat-footer .chat-option{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:3rem; height:3rem; font-size:1.25rem; overflow:hidden;
  cursor:pointer; transition:color .25s, opacity .25s;
}
.chat-01 .chat-footer .chat-option > input[type=file]{
  position:absolute; top:0; bottom:0; left:0; right:0; opacity:0; cursor:pointer;
}

.chat-01 .messages{
  display:block; width:100%; height:calc(100% - 3rem); padding:.3125rem 0 1rem 0;
  overflow-x:hidden; overflow-y:auto;
}
.chat-01 .message{
  position:relative; width:100%; display:flex; flex-wrap:wrap; padding:0 2rem .1875rem 4rem;
}
.chat-01 .message.self{justify-content:flex-end; padding:0 4rem .1875rem 2rem;}
.chat-01 .message > .wrapper{
  position:relative; max-width:30rem; padding:.5rem .75rem; border-radius:var(--bradius);
}
.chat-01 .message > .wrapper > *{position:relative;}
.chat-01 .message > .wrapper-gallery{
  position:relative; width:24rem; padding:0 .375rem .375rem .375rem;
  border-radius:var(--bradius); overflow:hidden;
}
.chat-01 .message > .wrapper-gallery img{
  display:block; width:100%; height:auto; border-radius:var(--bradius); cursor:pointer;
}
.chat-01 .message > .wrapper-gallery .grid-img{
  position:relative; display:block; width:100%; padding:100% 0 0 0;
  overflow:hidden; border-radius:var(--bradius); cursor:pointer;
}
.chat-01 .message > .wrapper-gallery .grid-img > .img-bg{
  position:absolute; top:0; bottom:0; left:0; right:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.chat-01 .message > .wrapper-gallery .grid-img > .img-bg.blur{
  filter:blur(5px); -webkit-filter:blur(5px);
}
.chat-01 .message > .wrapper-gallery .grid-img > .filter,
.chat-01 .message > .wrapper-gallery .grid-img > .more{
  position:absolute; top:0; bottom:0; left:0; right:0; font-size:2.5rem; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.chat-01 .message .name{display:block; width:100%; margin:.25rem 0 .125rem 0;}
.chat-01 .message.self .name, .chat-01 .message.self .time{text-align:right;}
.chat-01 .message .time{position:relative; display:block; width:100%; margin:.125rem 0 0 0;}
.chat-01 .message .time::before{
  content:''; position:absolute; top:-1.1rem; left:-.5rem; width:.8125rem; height:1rem;
  clip-path:polygon(0 100%,100% 0,100% 100%);
}
.chat-01 .message.self .time::before{
  left:unset; right:-.5rem; clip-path:polygon(0 0,100% 100%,0 100%);
}
.chat-01 .message .message-avatar{
  position:absolute; bottom:.375rem; left:1rem; width:2.125rem; height:2.125rem;
}
.chat-01 .message.self .message-avatar{left:unset; right:1rem;}
.chat-01 .message .message-avatar > .img-bg{
  width:100%; height:100%; border-radius:50%; background-size:cover; background-position:center;
}

.chat-01 .chat-panel-right .show-mobile{display:none;}
.chat-01 .chat-panel-right .hide-mobile{display:block;}
@media screen and (max-width:767.98px){
  .chat-01 .chat-panel-left > .body, .chat-01 .chat-panel-right > .body{
    height:calc(100dvh - 18.9375rem); max-height:calc(100dvh - 18.9375rem);
  }
  .chat-01.chat-01-active .chat-panel-left{display:none;}
  .chat-01:not(.chat-01-active) .chat-panel-right{display:none;}
  .chat-01 .chat-panel-right .show-mobile{display:block;}
  .chat-01 .chat-panel-right .hide-mobile{display:none;}
}
@supports (-webkit-touch-callout:none){
  .chat-01 .chat-panel-left > .body, .chat-01 .chat-panel-right > .body{
    height:calc(100dvh - 24rem); max-height:calc(100dvh - 24rem);
  }
}


/* Global Language */
.global-lang{position:fixed; top:1rem; right:1rem; z-index:90;}
.global-lang > .wrapper{position:relative;}
.global-lang .lang-item{
  display:flex; align-items:center; padding:.3125rem .5rem; cursor:pointer;
  border-radius:var(--bradius); transition:background .25s;
}
.global-lang .dropdown .lang-item{border-radius:0;}
.global-lang .lang-item .flag{
  display:block; width:1.5rem; height:1.0625rem; border-radius:calc(var(--bradius) / 2);
  background-size:cover; background-position:center;
}
.global-lang .lang-item .lang{padding:0 0 0 .5rem; font-size:.875rem; font-weight:600;}
.global-lang .dropdown{
  position:absolute; top:calc(100% + .5rem); left:0; right:0; opacity:0; 
  pointer-events:none; border:1px solid transparent; border-radius:var(--bradius);
  transition:top .25s, opacity .25s;
}
.global-lang:hover .dropdown{top:100%; opacity:1; pointer-events:auto;}
.global-lang .dropdown > .wrapper{
  width:100%; padding:.3125rem 0; border-bottom:1px solid transparent;
}
.global-lang .dropdown > .wrapper:last-child{border-bottom:0;}


/* Log Container */
.log-continer{
  position:relative; display:block; width:100%; max-width:60rem;
  margin:0; padding:0 0 0 1.25rem;
}
.log-continer .log-item{
  position:relative; display:block; width:100%; padding:1.5rem 0 0 1.8125rem;
}
.log-continer .log-item::before{
  content:''; position:absolute; top:0; left:.25rem; width:.0625rem; height:100%;
}
.log-continer .log-item:last-child:before{height:2.5rem;}
.log-continer .log-item::after{
  content:''; position:absolute; top:2rem; left:0;
  width:.5625rem; height:.5625rem; border-radius:50%;
}
@media screen and (max-width:767.98px){
  .log-continer{padding:0 0 0 .5rem;}
  .log-continer .log-item{padding:1.5rem 0 0 1.5625rem;}
}


/* Page Loading */
.page-loading{position:fixed; top:0; left:0; width:100vw; height:100dvh; z-index:1;}
.page-loading > .wrapper{
  display:flex; align-items:center; justify-content:center; width:100%; height:100%;
}
@media screen and (min-width:1200px){
  nav.sidenav + .page-loading > .wrapper{padding-left:15rem;}
}


/* Product 01 */
.product-01{display:block; width:100%;}
.product-01 .product-img{position:relative; width:100%; padding:50% 0 0 0;}
.product-01 .product-img > .wrapper{
  position:absolute; top:0; bottom:0; left:0; right:0;
  display:flex; align-items:center; justify-content:center;
}
.product-01 .product-img img{
  display:block; width:auto; max-width:100%; height:auto; max-height:100%;
}


/* Progress Bar 01 */
.progress-bar-01{
  display:block; position:relative; width:100%; height:.5rem; border-radius:1000em;
  border:2px solid transparent;
}
.progress-bar-01 > .bar{
  position:absolute; top:-1px; bottom:-1px; left:0; border-radius:1000em; transition:width .25s;
}


/* Tabs 01 */
.tabs-01{position:relative; display:block; width:100%; border-radius:var(--bradius); overflow:hidden;}
.tabs-01 .tab{
  position:relative; display:block; width:100%; padding:.75rem 1rem; cursor:pointer;
  border-bottom:1.5px solid transparent; font-size:1rem; font-weight:500;
  transition:background .25s, color .25s;
}
.tabs-01 .tab:last-child{border-bottom:0;}
.tabs-01 .tab::after{
  content:''; position:absolute; top:0; bottom:0; left:0; width:0;
  transition:width .25s;
}
.tabs-01 .tab.active::after{width:.125rem;}

/* Tabs 02 */
.tabs-02{position:relative; display:block; width:100%; overflow:hidden;}
.tabs-02 .swiper{position:relative;}
.tabs-02 .tab{
  position:relative; display:block; width:100%; cursor:pointer;
  padding:1.25rem 1rem; border-radius:var(--bradius); text-align:center;
  white-space:nowrap; transition:background .25s, color .25s;
}
.tabs-02 .tab > *{opacity:.4; transition:background .25s, color .25s, opacity .25s;}
.tabs-02 .tab:hover > *, .tabs-02 .tab.active > *{opacity:1;}
.tabs-02 .tab::after{
  content:''; position:absolute; bottom:0; left:unset; right:0;
  width:0; height:.1875rem; transition:width .25s;
}
.tabs-02 .tab.active::after{left:0; right:unset; width:100%;}
.tabs-02 .swiper.swiper-initialized{width:100%;}
.tabs-02 .swiper .buttons{
  position:absolute; top:0; bottom:0; left:0; right:0; padding:.5rem; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  pointer-events:none; opacity:0; transition:opacity .25s;
}
.tabs-02 .swiper:hover .buttons{opacity:1;}
.tabs-02 .swiper .buttons > .button{
  display:flex; align-items:center; justify-content:center; width:2rem; height:2rem;
  font-size:.875rem; border-radius:50%; pointer-events:auto; cursor:pointer;
  transition:all .25s;
}
.tabs-02 .swiper .buttons > .button.disabled{opacity:0; pointer-events:none;}
@media screen and (max-width:767.98px){
  .tabs-02 .swiper .buttons{padding:.25rem;}
  .tabs-02 .swiper .buttons > .button{width:1.75rem; height:1.75rem; font-size:.75rem;}
}


/* FIXES: External Library */
.echarts-for-react *{z-index:10!important}

/* FIXES: React Select */
.select-multi > div:nth-child(3){
	box-shadow:none; border:1.5px solid transparent; border-radius:var(--bradius);
}
.select-multi .css-319lph-ValueContainer, .select-multi .css-g1d714-ValueContainer{
	padding:0 0 0 .5rem; font-size:.9375rem; font-weight:var(--fw); line-height:var(--lh);
}
.select-multi .css-6j8wv5-Input{margin:.0625rem!important;}
.select-multi .css-12jo7m5{font-size:95%; padding:.1875rem .25rem .1875rem .5rem;}
.select-multi .css-xb97g8{cursor:pointer; transition:background .25s, color .25s;}
.select-multi .css-1rhbuit-multiValue{border-radius:var(--bradius);}
.select-multi .css-tj5bde-Svg{transition:color .25s;}
.select-multi .css-26l3qy-menu{z-index:100!important;}
.select-multi.css-3iigni-container .css-tj5bde-Svg{display:none!important;}
.select-multi .css-26l3qy-menu{border-radius:var(--bradius);}
.select-multi .css-26l3qy-menu .css-4ljt47-MenuList,
.select-multi .css-26l3qy-menu .css-1n7v3ny-option{transition:background .15s, color .15s;}

/* FIXES: Material UI */
.MuiFormControl-root.MuiTextField-root{width:100%!important;}
.MuiOutlinedInput-root.MuiInputBase-root{
  border:1.5px solid transparent; border-radius:var(--bradius);
  padding:0 .875rem 0 0; margin:0; outline:none; box-shadow:none;
  transition:border-color .25s, color .25s;
}
.MuiFormControl-root.MuiTextField-root input{
  padding:.375rem .625rem!important; border:0!important;
  height:auto!important; font-size:.9375rem!important;
  font-weight:var(--fw)!important; line-height:var(--lh)!important;
}
.MuiFormControl-root.MuiTextField-root.sm input{
  padding:.3125rem .5rem!important; font-size:.875rem!important;
}
.MuiPaper-root{border-radius:var(--bradius); border:1px solid transparent; overflow:hidden;}
.form-control.bradius-0 .MuiOutlinedInput-root.MuiInputBase-root{border-radius:0!important;}
.form-control.bradius-top-sharp .MuiOutlinedInput-root.MuiInputBase-root{
  border-top-left-radius:0!important; border-top-right-radius:0!important;
}

/* Qr-Code */
.qr-reader {
  width: 430px;
  height: 100vh;
  margin: 0 auto;
  position: relative;
}

/* Media Queries for mobile screens */
@media (max-width: 426px) {
  .qr-reader {
    width: 100%;
  }
}

/* Tooltip */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 100px;
  text-align: center;
  font-size:.85rem; 
  font-weight:500;
	text-align:center; 
  border-radius:200em; 
  white-space:nowrap;
  padding: 5px 0;
  position: absolute;
  bottom: 90%;
  left: 60%;
  margin-left: -50px;

  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* Tooltip Action */
.tooltipAction {
  position: relative;
  display: inline-block;
}

.tooltipAction .tooltiptext {
  visibility: hidden;
  width: 75px;
  text-align: center;
  font-size:.85rem; 
  font-weight:500;
	text-align:center; 
  border-radius:200em; 
  white-space:nowrap;
  padding: 5px 0;
  position: absolute;
  bottom: 90%;
  left: 60%;
  margin-left: -50px;

  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: opacity 1s;
}

.tooltipAction:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}