/* Auth 01 */
.auth-01{
  position:relative; display:flex; justify-content:flex-end;
  width:100%; height:100dvh; overflow:hidden;
}
.auth-01 .auth-bg, .auth-01 .auth-filter{
  position:fixed; top:0; left:0; width:calc(100% - 26rem); height:100dvh;
  background-size:cover; background-position:center;
}
.auth-01.bg-full .auth-bg, .auth-01.bg-full .auth-filter{width:100%;}
.auth-01 .auth-filter{background:#000000; opacity:0;}
.auth-01 .auth-container{
  position:relative; display:flex; align-items:center; width:26rem; height:100%;
  padding:1.5rem 1.5rem 3rem 1.5rem; overflow-x:hidden; overflow-y:auto; background:#ffffff;
}
.auth-01 .auth-container > .img-bg{opacity:.15;}
.auth-01 .auth-container > .wrapper{position:relative; display:block; width:100%;}
.auth-01 .logo{
  display:flex; align-items:flex-end; justify-content:center;
  position:relative; padding:0 0 .75rem 0;
}
.auth-01 .logo .ptt{display:block; height:3.75rem; width:auto;}
.auth-01 .logo .slogan{padding:0 0 0 .625rem; text-align:center; transform:translateY(.5625rem);}
.auth-01 .logo .title, .auth-01 .logo .desc{
	font-size:2.6875rem; font-weight:900; line-height:.85;
  background-image:linear-gradient(to right,
    #ffae00, #ff2784, #ff2484, #6732fe, #6334fe, #04edd8);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  background-size:500% auto; animation:sloganShine 7s ease-in-out infinite alternate;
}
.auth-01 .logo .desc{font-size:.8125rem; font-weight:700;}
.auth-01 .logo .hero{
	display:block; height:2.875rem; width:auto; margin:0 0 0 .875rem; transform:translateY(.25rem);
}
.auth-01 .auth-box{display:block; width:100%; max-width:16rem; margin:0 auto;}
.auth-01 .auth-sep{display:flex; justify-content:center; width:100%; overflow:hidden;}
.auth-01 .auth-sep > *{position:relative;}
.auth-01 .auth-sep > *::before, .auth-01 .auth-sep > *::after{
  content:''; position:absolute; top:calc(50% - .5px); width:100vw; height:1px;
  background:#e4e4e4;
}
.auth-01 .auth-sep > *::before{right:calc(100% + .75rem);}
.auth-01 .auth-sep > *::after{left:calc(100% + .75rem);}
@media screen and (max-width:991.98px){
  .auth-01 .auth-bg, .auth-01 .auth-filter{width:calc(100% - 23rem);}
  .auth-01 .auth-container{width:23rem;}
}
@media screen and (max-width:767.98px){
  .auth-01{justify-content:center; align-items:center; min-height:100dvh; padding:1.5rem;}
  .auth-01 .auth-bg{background-attachment:fixed;}
  .auth-01 .auth-bg, .auth-01 .auth-filter{width:100%;}
  .auth-01 .auth-container{
    width:100%; max-width:23rem; height:unset; border-radius:var(--bradius);
    padding:2rem 1.5rem 2.5rem 1.5rem;
  }
  .auth-01 .logo{padding:0 0 .75rem 0;}
  .auth-01 .logo .ptt{height:3.5rem;}
  .auth-01 .logo .slogan{padding:0 0 0 .5rem; transform:translateY(.5625rem);}
  .auth-01 .logo .title{font-size:2.4375rem; line-height:.9;}
  .auth-01 .logo .desc{font-size:.75rem;}
  .auth-01 .logo .hero{height:2.5625rem; margin:0 0 0 .75rem; transform:translateY(.125rem);}
}


/* Breadcrumb */
.breadcrumb{background:#00aeef;}
.breadcrumb .wrapper{
  display:flex; align-items:center; white-space:nowrap; width:100%;
  padding:.625rem 0; border-radius:0 0 var(--bradius) var(--bradius); overflow:hidden;
  text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:1;
}
@media screen and (max-width:991.98px){
  .breadcrumb{display:none;}
  .breadcrumb .wrapper{padding:.5rem 1rem;}
}


/* Card Media */
.card-media{position:relative; display:block; width:100%; overflow:hidden;}
.card-media .media{
  position:relative; display:block; width:100%; padding:80% 0 0 0; overflow:hidden;
  border-radius:var(--bradius);
}
.card-media .media > .preview{
  position:absolute; top:0; bottom:0; left:0; right:0;
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; padding:1rem; background:#f4f4f4;
  transition:background .25s;
}
.card-media .media > .preview:hover{background:rgba(90,141,238,.15);}
.card-media .media > .preview img{
  display:block; width:auto; max-width:100%; height:auto; max-height:100%;
}
.card-media .media > .preview img.img-folder{max-width:90%; max-height:90%;}
.card-media .media > .preview .icon{
  position:absolute; display:block; width:auto; max-width:32%; height:auto; max-height:32%;
}
.card-media .media > .preview .icon.icon-play{border-radius:50%; background:rgba(0,0,0,.25);}
.card-media .media > .preview .img-inner{
  position:relative; display:block; width:100%; height:100%;
  background-size:auto; background-position:center; background-repeat:no-repeat;
}
.card-media .text-wrapper{display:block; width:100%;}
.card-media .title, .card-media .desc{
	display:block; display:-webkit-box; text-overflow:ellipsis; overflow:hidden;
	-webkit-box-orient:vertical; -webkit-line-clamp:1;
}
.card-media .detail{display:none; width:100%;}
.card-media .options{
  position:absolute; top:0; right:0; pointer-events:none; z-index:1;
  border-radius:var(--bradius); opacity:0; transition:opacity .25s;
}
.card-media .options.left{left:0; right:unset;}
.card-media:hover .options, .card-media .options.active{opacity:1;}
.card-media .option{width:2.5rem; pointer-events:auto;}

.card-media.list{
  display:flex; align-items:center; padding:.75rem 0; border-bottom:1px solid #e9e9e9;
}
.grid:not(.mt-0) > .card-media.list{margin:-1rem 0 0 0;}
.card-media.list .media{width:7.25rem; padding:0; display:flex; align-items:center;}
.card-media.list.no-options .media{width:5rem;}
.card-media.list .media > .preview{
  position:relative; top:unset; bottom:unset; left:unset; right:unset; padding:.5rem;
  width:5rem; height:4rem; border-radius:var(--bradius); overflow:hidden;
}
.card-media.list .text-wrapper{width:calc(100% - 16.75rem); padding:0 1rem!important;}
.card-media.list.no-options .text-wrapper{width:calc(100% - 14.5rem);}
.card-media.list .title{margin:0 0 .125rem 0;}
.card-media.list .detail{display:block; width:9.5rem;}
.card-media.list .options{
  width:2rem; margin:0 .25rem 0 0; position:relative; top:unset; right:unset;
}
.card-media.list .options.left{display:none;}
.card-media.list .option{width:2rem;}
.card-media:not(.list) .option.show-list,
.card-media.list .option.hide-list{display:none;}

@media screen and (max-width:991.98px){
  .card-media .options{opacity:1;}
  .card-media .avatar-wrapper{
    position:absolute; top:0; right:0; padding:.0625rem; background:#ffffff;
    margin:calc(80% - 2.5rem) .375rem 0 0;
  }
  .card-media.list .avatar-wrapper{position:relative; top:unset; right:unset; margin:0 .5rem;}
}
@media screen and (max-width:767.98px){
  .card-media.list .text-wrapper{width:calc(100% - 7.25rem); padding:0 0 0 1rem!important;}
  .card-media.list.no-options .text-wrapper{width:calc(100% - 5rem);}
  .card-media.list .detail{display:none;}
  .card-media.list .avatar-wrapper{margin:0 0 0 .5rem;}
}
@media screen and (min-width:992px){
  .card-media .avatar-wrapper{
    position:absolute; top:0; right:0; padding:.0625rem; background:#ffffff;
    margin:calc(80% - 2.5rem) .375rem 0 0;
  }
  .card-media.list .avatar-wrapper{position:relative; top:unset; right:unset; margin:0 .5rem 0 0;}
  .card-media.list.with-avatar .text-wrapper{width:calc(100% - 19.5rem);}
  .card-media.list.with-avatar.no-options .text-wrapper{width:calc(100% - 17.25rem);}
}
@media screen and (min-width:1200px){
  .card-media.list.xl .text-wrapper{width:calc(100% - 21.25rem);}
  .card-media.list.xl.no-options .text-wrapper{width:calc(100% - 19rem);}
  .card-media.list.xl.with-avatar .text-wrapper{width:calc(100% - 24rem);}
  .card-media.list.xl.with-avatar.no-options .text-wrapper{width:calc(100% - 21.75rem);}
  .card-media.list.xl .detail{width:14rem;}
  .card-media.list.lg .text-wrapper{width:calc(100% - 20.25rem);}
  .card-media.list.lg.no-options .text-wrapper{width:calc(100% - 18rem);}
  .card-media.list.lg.with-avatar .text-wrapper{width:calc(100% - 23rem);}
  .card-media.list.lg.with-avatar.no-options .text-wrapper{width:calc(100% - 20.75rem);}
  .card-media.list.lg .detail{width:13rem;}
}
@media screen and (min-width:1300px){
  .card-media.list.xl .text-wrapper{width:calc(100% - 22.25rem);}
  .card-media.list.xl.no-options .text-wrapper{width:calc(100% - 20rem);}
  .card-media.list.xl.with-avatar .text-wrapper{width:calc(100% - 25rem);}
  .card-media.list.xl.with-avatar.no-options .text-wrapper{width:calc(100% - 22.75rem);}
  .card-media.list.xl .detail{width:15rem;}
}


/* Media Drawer */
.media-drawer{position:relative; display:block; width:100vw; max-width:38rem;}
.media-drawer > .wrapper{
  position:relative; width:100%; height:calc(100dvh - 2px);
  padding:12.75rem 0 0 0; background:#f4f4f4; overflow:hidden;
}

.media-drawer .toolbar{
  position:absolute; top:0; left:0; width:100%; z-index:1;
  padding:1rem 1rem .5rem 1rem; background:#ffffff;
}
.media-drawer .toolbar .title-wrapper{width:calc(100% - 1.875rem); padding:0 1rem 0 0;}
.media-drawer .toolbar .title, .media-drawer .toolbar .desc{
	display:block; display:-webkit-box; text-overflow:ellipsis; overflow:hidden;
	-webkit-box-orient:vertical; -webkit-line-clamp:3; max-width:100%;
}
.media-drawer .toolbar .options{
  width:calc(100% + .5rem); display:flex; margin:.75rem -.25rem 0 -.25rem;
}
.media-drawer .toolbar .option{padding:0 .25rem;}

.media-drawer .toolbar-footer{
  position:absolute; bottom:1rem; right:1rem; padding:.5rem; z-index:1;
  display:flex; align-items:center; background:#ffffff;
}
.media-drawer .toolbar-footer.left{left:1rem; right:unset;}
.media-drawer .toolbar-footer .MuiSelect-select{padding:.3125rem 2rem .1875rem .5rem;}

.media-drawer .media-wrapper{
  position:relative; width:100%; height:100%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  padding:0 0 4.125rem 0;
}
.media-drawer .media{display:flex; justify-content:center; cursor:grab;}
.media-drawer .media.draw-mode{cursor:crosshair;}
.media-drawer .media img{display:block; width:auto; height:auto; transition:transform .25s;}

.media-drawer .canvas-loading{
  position:absolute; top:12.75rem; bottom:4.125rem; left:0; right:0;
  display:flex; align-items:center; justify-content:center;
}

@media screen and (max-width:767.98px){
  .media-drawer .toolbar .option .hide-mobile{display:none!important;}
}
@media screen and (max-width:575.98px){
  .media-drawer > .wrapper{padding:15.75rem 0 0 0;}
}

.media-drawer .folder-wrapper{
  position:relative; width:100%; height:100%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  padding:0 1.5rem 3rem 1.5rem;
}
.media-drawer .folder-wrapper img{
  display:block; width:auto; max-width:25rem; height:auto; max-height:25rem;
}

.media-drawer .video-wrapper{
  display:flex; align-items:center; justify-content:center;
  position:relative; width:100%; height:100%; padding:1rem;
}
.media-drawer .video-wrapper video{
  display:block; width:auto; max-width:100%; height:auto; max-height:100%;
}

.media-drawer .media .canvas-wrapper,
.media-drawer .media .crop-wrapper{
  position:absolute; pointer-events:none!important; transition:transform .25s;
}
.media-drawer .media .canvas-wrapper *,
.media-drawer .media .crop-wrapper *{pointer-events:none!important;}
.media-drawer .media.draw-mode .canvas-wrapper,
.media-drawer .media.draw-mode .canvas-wrapper *,
.media-drawer .media.draw-mode .crop-wrapper,
.media-drawer .media.draw-mode .crop-wrapper *{pointer-events:auto!important;}
.media-drawer .media .canvas-wrapper:not(.saving) svg > g:last-child{
  transform-origin:top left; transform:scale(calc(1 / var(--canvas-scale)))!important;
}


/* Media Preview */
.media-preview{
  position:relative; width:5.5rem; height:4rem; padding:.5rem;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--bradius); overflow:hidden; background:#f4f4f4;
}
.media-preview img{display:block; width:auto; max-width:100%; height:auto; max-height:100%;}
.media-preview img.icon-play{position:absolute; max-width:32%; max-height:32%;}


/* Paginate */
.paginate{
	display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
	margin:-.25rem -.25rem 0 0;
}
.paginate > .page-set{
	display:flex; align-items:center; justify-content:center; margin:0;
}
.paginate .page{
	display:flex; align-items:center; justify-content:center; margin:.25rem .25rem 0 0;
	font-size:.9375rem; font-weight:500; cursor:pointer; width:2rem; height:2rem;
  background:#f7f7f8; color:#161c24;
	border-radius:var(--bradius); transition:all .25s;
}
.paginate .page:first-child:last-child{border-radius:.25rem;}
.paginate .page.active{pointer-events:none!important;}
.paginate .page.disabled{pointer-events:none!important; opacity:.4;}
.paginate .page.page-dots{pointer-events:none!important; letter-spacing:.05rem;}
@media screen and (max-width:575.98px){
  .paginate .page.page-first, .paginate .page.page-last{display:none;}
}
.paginate .page:hover,
.paginate .page.active{background:rgba(90,141,238,.1); color:var(--color-p);}


/* Report 01 */
.report-01{width:100%; display:flex;}
.report-01 > .report-left{width:10rem;}
.report-01 > .report-right{width:calc(100% - 10rem);}
.report-01 .report-slot{
  display:flex; align-items:center; justify-content:flex-end; width:100%; height:4rem;
}
.report-01 .echarts-for-react{height:100%!important;}
@media screen and (max-width:767.98px){
  .report-01 > .report-left{width:8rem;}
  .report-01 > .report-right{width:calc(100% - 8rem);}
}
@media screen and (max-width:575.98px){
  .report-01 > .report-left{width:6rem;}
  .report-01 > .report-right{width:calc(100% - 6rem);}
}


/* Section 01 */
.section-01 .tabs{position:sticky; top:5.75rem; display:block; width:100%;}
.section-01 .tabs .MuiButtonBase-root.MuiButton-root{
  display:flex; width:100%; justify-content:flex-start;
  padding-top:.75rem!important; padding-bottom:.75rem!important;
}
.section-01 .tabs .MuiButtonBase-root.MuiButton-root.disabled{background:transparent!important;}
@media screen and (max-width:991.98px){
  .section-01 .tabs{position:relative; top:unset; max-width:100%; margin:.25rem auto 0 auto;}
  .section-01 .tabs .MuiButtonBase-root.MuiButton-root{
    width:calc(100% + 1.25rem); margin:0 -.625rem; padding:1rem!important;
  }
  .section-01 .tabs .MuiButtonBase-root.MuiButton-root p{
    font-size:1rem!important; margin:0 0 0 .5rem!important;
  }
}
@media screen and (max-width:767.98px){
  .section-01 .tabs{max-width:100%;}
}
@media screen and (min-width:992px){
  .section-01 .tabs .border-top-1{display:none;}
}


/* Section Media */
.section-media{overflow:unset;}
.section-media .media-tools{width:100%; display:flex; align-items:center;}
.section-media .media-tools .media-title{margin:0 auto 0 0;}
.section-media .media-tools .media-title .desc{
  display:block; display:-webkit-box; text-overflow:ellipsis; overflow:hidden;
	-webkit-box-orient:vertical; -webkit-line-clamp:1;
}
.section-media .media-tools .media-title .pannel-toggle{display:none;}
.section-media .media-tools .media-options{display:flex;}
.section-media .media-tools .media-option{margin:0 0 0 .5rem;}
.section-media .media-tools .media-option.search{width:14rem;}

.section-media .media-panels{width:100%; display:flex; align-items:flex-start;}
.section-media .media-left{width:14rem; position:sticky; top:5.5rem; margin:1rem 0 0 0;}
.section-media .media-left .pannel-toggle{display:none;}
.section-media .media-right{width:calc(100% - 14rem); padding:0 0 0 1.5rem;}

@media screen and (max-width:991.98px){
  .section-media .media-tools{flex-wrap:wrap;}
  .section-media .media-tools .media-title{width:100%;}
  .section-media .media-tools .media-title .pannel-toggle{
    display:block; margin:0 0 0 auto; padding:0 0 0 .5rem;
  }
  .section-media .media-tools .media-options{width:100%; margin:1rem 0 .5rem 0;}
  .section-media .media-tools .hide-tablet{display:none!important;}
  .section-media .media-right{width:100%; padding:0;}
  .section-media .media-left{
    display:block; position:fixed; top:4rem; bottom:4.8125rem; right:0; z-index:11;
    width:15.5rem; margin:0; padding:0; background:#ffffff;
    border-right:1px solid transparent; box-shadow:0 3px 6px rgba(0,0,0,.03);
    transform:translateX(16rem); transition:transform .3s;
  }
  .section-media .media-left > .inner-wrapper{
    position:relative; display:block; width:100%; height:100%; overflow:hidden;
    padding:1rem 0 0 0;
  }
  .section-media .media-left .widget-folders{
    width:100%; max-height:100%; padding:1rem 1rem 1rem .75rem;
  }
  .section-media .media-left.active{transform:translateX(0);}
  .section-media .media-left .pannel-toggle{
    display:block; position:absolute; top:.5rem; right:1rem;
  }
  .section-media .media-panel-filter{
    position:fixed; top:4rem; bottom:4.8125rem; left:0; right:0; z-index:9;
    background:rgba(0,0,0,.2); cursor:pointer; opacity:0; pointer-events:none;
    transition:opacity .45s;
  }
  .section-media .media-left.active + .media-panel-filter{opacity:1; pointer-events:auto;}
}
@media screen and (max-width:767.98px){
  .section-media .media-left{top:3.5rem;}
  .section-media .media-panel-filter{top:3.5rem;}
}
@media screen and (min-width:992px){
  .section-media .media-tools .show-tablet{display:none!important;}
}


/* Widget Folders */
.widget-folders{
  display:block; width:100%; max-height:calc(100dvh - 14.75rem);
  overflow-x:hidden; overflow-y:auto;
}
.widget-folders .folder{position:relative; display:block; width:100%; overflow:hidden;}
.widget-folders .folder > .folder-main{
  display:flex; align-items:center; width:100%; padding:.5rem 0 .5rem .5rem;
  border-radius:var(--bradius); transition:background .25s;
}
.widget-folders .folder:hover > .folder-main{background:#f7f7f7;}
.widget-folders .folder > .folder-main.active{background:rgba(90,141,238,.08);}
.widget-folders .folder > .folder-main.selected{background:rgba(90,141,238,.16);}
.widget-folders .folder > .folder-main.active p,
.widget-folders .folder > .folder-main.selected p{color:#000000!important;}
.widget-folders .folder > .folder-main .icon{
  display:flex; align-items:center; justify-content:center;
  width:1.25rem; height:1.25rem; transition:transform .25s;
}
.widget-folders .folder.open > .folder-main .icon{transform:rotate(90deg);}
.widget-folders .folder > .folder-main img{
  display:block; width:1.625rem; height:auto; margin:0 .125rem;
}
.widget-folders .folder > .folder-main p{
  width:calc(100% - 3.125rem); padding:0 .5rem; transform:translateY(.1rem);
  display:block; display:-webkit-box; text-overflow:ellipsis; overflow:hidden;
	-webkit-box-orient:vertical; -webkit-line-clamp:1;
}
.widget-folders .folder > .folder-sub{
  position:absolute; display:block; padding:0 0 0 1rem; opacity:0; pointer-events:none;
  transform:translateY(.5rem); transition:opacity .25s, transform .25s;
}
.widget-folders .folder.open > .folder-main + .folder-sub{
  position:relative; opacity:1; pointer-events:auto; transform:translateY(0);
}
@media screen and (max-width:991.98px){
  .widget-folders{max-height:calc(100dvh - 17.5rem);}
}