/* Installation Page */
.installation.main{
  display:block; width:100%; min-height:100dvh; background:#171717; color:#f5f9ff;
}
.installation.main > .wrapper{position:relative; display:block; width:100%; padding:1rem 1.5rem;}
.installation .panels{display:flex; align-items:flex-start; width:100%; margin:1rem 0 0 0;}
.installation .panel-left{
  display:block; width:19rem; height:calc(100dvh - 5.5rem);
  padding:.25rem .5rem 0 .5rem; margin:0 0 0 -.5rem; overflow:hidden;
}
.installation .panel-left > .wrapper{
  position:relative; display:block; width:100%; transition:transform .3s;
}
.installation .panel-right{
  position:relative; display:block; width:calc(100% - 19rem); height:calc(100dvh - 5.75rem);
  margin:.25rem 0 0 .5rem; padding:1px; border-radius:.5rem;
}
.installation .panel-right > .wrapper{
  position:relative; display:block; width:100%; height:100%;
  border-radius:inherit; background:hsl(0, 0%, 7%);
}

.installation .step-content{position:relative; display:block; width:100%; height:100%;}
.installation .step-content > form{display:block; width:100%; height:100%;}
.installation .step-content > .header, .installation .step-content > form > .header,
.installation .step-content > .footer, .installation .step-content > form > .footer{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  width:100%; height:4.5rem; padding:0 1.25rem;
}
.installation .step-content > .header::after,
.installation .step-content > form > .header::after,
.installation .step-content > .footer::after,
.installation .step-content > form > .footer::after{
  content:''; position:absolute; top:100%; left:0; right:0; height:.7px; overflow:hidden;
  background:linear-gradient(112deg, transparent 30%, rgba(255,255,255,.08) 40%,
  rgba(255,255,255,.24) 50%, rgba(255,255,255,.08) 60%, transparent 80%);
  background-size:500% 100%; background-position:-75% 0;
}
.installation .step-content > .footer,
.installation .step-content > form > .footer{justify-content:center; height:4rem;}
.installation .step-content > .footer::after,
.installation .step-content > form > .footer::after{top:unset; bottom:100%;}
.installation .step-content > .body, .installation .step-content > form > .body{
  position:relative; display:block; width:100%; height:calc(100% - 8.5rem);
  padding:1rem 1.25rem; overflow-x:hidden; overflow-y:auto;
}

.installation .step-content .img-hero{
  display:block; width:auto; max-width:90%; height:auto; max-height:90%;
}


/* Installation Step */
.installation .step{
  position:relative; display:block; padding:.7px; border-radius:.5rem;
  transition:background .3s ease-in-out, box-shadow .3s ease-in-out;
  box-shadow:0 0 0 1px transparent, 0 2px 4px transparent, 0 12px 24px transparent;
  margin:0 0 .75rem 0; background:#111111;
}
.installation .step.active{cursor:pointer;}
.installation .step > .wrapper{
  position:relative; display:flex; align-items:center; width:100%; padding:1rem;
  border-radius:inherit; background:#111111;
}
.installation .step > .wrapper > *{opacity:.2; transition:opacity .3s;}
.installation .step.current > .wrapper > *,
.installation .step.active > .wrapper > *{opacity:1;}
.installation .step > .highlight{opacity:0;}
.installation .step.active:hover > .highlight,
.installation .step.current > .highlight{opacity:1;}
.installation .step .icon{
  position:relative; width:2.25rem; height:2.25rem; border-radius:.25rem; padding:.7px;
}
.installation .step .icon > .num{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; border-radius:inherit; background:#111111;
  transition:background .3s;
}
.installation .step .icon > .highlight{opacity:0;}
.installation .step.active .icon > .highlight{opacity:1;}
.installation .step .text{display:block; width:calc(100% - 2.25rem); padding:0 0 0 1rem;}


/* Installation Progress */
.installation .progress{
  position:relative; display:flex; width:100%; height:2rem; border-radius:.25rem;
  border:1px solid #222222; transition:opacity .3s;
}
.installation .progress > .bar{
  position:relative; display:block; height:100%; border-radius:inherit;
}
.installation .progress > .bar.animate{animation:installationProgress 1.5s linear forwards;}
@keyframes installationProgress{
  0% { width:0; } 100% { width:100%; }
}


/* Installation Button */
.installation .btn{background:transparent!important;}
.installation .btn > .shimmer::after{
  content:''; position:absolute; top:1px!important; bottom:1px!important;
  left:1px!important; right:1px!important; border-radius:inherit;
  inset:inherit; background:#111111; transition:background .3s;
}
.installation .btn:hover > .shimmer::after{background:#1b1b1b;}
.installation .btn:not(.animate) > .highlight{animation:unset;}


/* Installation Input */
.installation input[type=text], .installation input[type=email], .installation input[type=password],
.installation  input[type=date], .installation input[type=tel], .installation input[type=number],
.installation input[type=phone], .installation input[type=submit], .installation input[type=file],
.installation input[type=time], .installation input[type=color], .installation select,
.installation textarea{
  background:#242424; color:#f5f9ff; border-color:#333333!important;
}
.installation input[type=text]:focus, .installation input[type=email]:focus,
.installation input[type=password]:focus, .installation input[type=date]:focus, 
.installation input[type=tel]:focus, .installation input[type=number]:focus,
.installation input[type=phone]:focus, .installation input[type=submit]:focus, 
.installation input[type=file]:focus, .installation input[type=time]:focus,
.installation input[type=color]:focus, .installation select:focus,
.installation textarea:focus{
  border-color:#666666!important;
}

.installation input[type=text].disabled, .installation input[type=email].disabled,
.installation input[type=password].disabled, .installation input[type=date].disabled,
.installation input[type=tel].disabled, .installation input[type=number].disabled,
.installation input[type=phone].disabled, .installation input[type=submit].disabled,
.installation input[type=file].disabled, .installation input[type=time].disabled,
.installation select.disabled, .installation textarea.disabled,
.installation input[type=text]:disabled, .installation input[type=email]:disabled,
.installation input[type=password]:disabled, .installation input[type=date]:disabled,
.installation input[type=tel]:disabled, .installation input[type=number]:disabled,
.installation input[type=phone]:disabled, .installation input[type=submit]:disabled,
.installation input[type=file]:disabled, .installation input[type=time]:disabled,
.installation input[type=color]:disabled, .installation select:disabled,
.installation textarea:disabled{
  background:#1e1e1e!important; color:#bbbec3!important;
}
.installation select:disabled{opacity:1;}

.installation ::placeholder{color:#666666!important;}


/* Table */
.installation .table-wrapper.scrollable{border-color:#424242!important;}
.installation table.table th, .installation table.table td{
  background:#171717; color:#f5f9ff; border-color:#424242!important;
}
.installation table.table th,
.installation table.table td.th{background:#242424; color:#ffffff;}
.installation table.table > tbody > tr:hover > td{background:#171717;}


/* Image Uploader */
.installation .img-uploader{background:#242424; border-color:#333333;}
.installation .img-uploader > .btn-wrapper{background:#242424;}
.installation .img-uploader .img-block{
  border-color:#333333; color:#f5f9ff; background:#333333;
}
.installation .img-uploader .img-block:hover{color:#666666;}
.installation .img-uploader .img-block .img-desc{
  background:#333333; border-color:#666666; color:#f5f9ff!important;
}
.installation .img-uploader .img-block .btn-delete{
  background:#242424; color:#f5f9ff; border-color:#242424;
}
.installation .img-uploader .img-block .btn-delete:hover{
  background:#f5334f; color:#ffffff; border-color:#f5334f;
}
.installation .img-uploader .img-block .btn-prev,
.installation .img-uploader .img-block .btn-next{
  background:#242424; color:#f5f9ff; border-color:#242424;
}
.installation .img-uploader .img-block .btn-prev:not(.disabled):hover,
.installation .img-uploader .img-block .btn-next:not(.disabled):hover{
  background:#5a8dee; color:#ffffff; border-color:#5a8dee;
}
.installation .img-uploader .img-block .img-container{background:#666666;}
.installation .img-uploader.view,
.installation .img-uploader.view > .btn-wrapper{background:#1e1e1e;}


/* Installation Dialog */
.installation.MuiDialog-root .MuiPaper-root{
  background:#111111; color:#ffffff; box-shadow:none; border:1px solid #34353e;
}
.installation.MuiDialog-root .MuiDialogContent-root{border-color:#34353e;}
.installation.MuiDialog-root .hamburger > div{background:#bbbec3;}


/* Installation Shimmer */
.installation .shimmer{
  position:absolute; border-radius:inherit; inset:0;
  background:linear-gradient(112deg, transparent 30%, rgba(255,255,255,.1) 40%,
    rgba(255,255,255,.3) 50%, rgba(255,255,255,.1) 60%, transparent 80%);
  background-size:500% 100%; background-position:-75% 0;
}
.installation .shimmer-line{position:relative; display:block; width:100%; height:.7px;}
.installation .shimmer-line::after{
  content:''; position:absolute; top:0; bottom:0; left:0; right:0; overflow:hidden;
  background:linear-gradient(112deg, transparent 30%, rgba(255,255,255,.08) 40%,
  rgba(255,255,255,.24) 50%, rgba(255,255,255,.08) 60%, transparent 80%);
  background-size:500% 100%; background-position:-75% 0;
}

/* Installation Highlight */
.installation .highlight{
  position:absolute; top:0; bottom:0; left:0; right:0; border-radius:inherit;
  background-image:linear-gradient(-75deg, #007cf0, #00dfd8, #ff0080, #007cf0);
  background-size:400% 100%; transition:all .3s;
  animation:installationHighlight 14s ease-in-out infinite;
}
.installation .highlight::after{
  content:''; position:absolute; top:1px; left:0; right:0; height:100%;
  background-size:inherit; background-image:inherit;
  filter:blur(.25rem); animation:inherit; transition:inherit;
}
@keyframes installationHighlight{
  50% { background-position:140% 50%; transform:skew(-2deg); }
}

/* Installation Special Tag */
.installation .ss-tag{
	position:relative; display:inline-block; padding:.1875rem .625rem; white-space:nowrap;
	font-size:.75rem; font-weight:500; text-align:center; border-radius:var(--bradius);
}
.installation .ss-tag.sm{padding:.125rem .5rem; font-size:.6875rem;}
.installation .ss-tag::before{
	content:''; position:absolute; top:0; bottom:0; left:0; right:0; border-radius:var(--bradius);
}
.installation .ss-tag{color:#ffffff; background:transparent!important;}
.installation .ss-tag::before{background:#ffffff; opacity:.1;}
.installation .ss-tag.bg-p{color:var(--p-color);}
.installation .ss-tag.bg-p::before{background:var(--p-color); opacity:.15;}
.installation .ss-tag.bg-s{color:var(--s-color);}
.installation .ss-tag.bg-s::before{background:var(--s-color); opacity:.15;}
.installation .ss-tag.bg-info{color:#5a8dee;}
.installation .ss-tag.bg-info::before{background:#5a8dee; opacity:.15;}
.installation .ss-tag.bg-success{color:#4ecc48;}
.installation .ss-tag.bg-success::before{background:#4ecc48; opacity:.15;}
.installation .ss-tag.bg-warning{color:#ecb403;}
.installation .ss-tag.bg-warning::before{background:#ecb403; opacity:.15;}
.installation .ss-tag.bg-danger{color:#f5334f;}
.installation .ss-tag.bg-danger::before{background:#f5334f; opacity:.15;}

/* Installation MUI */
.installation .MuiAutocomplete-root .MuiOutlinedInput-root.MuiInputBase-root{
  background:#242424!important; border-color:#333333!important;
}
.installation .MuiAutocomplete-root input{color:#ffffff!important;}
.installation .MuiAutocomplete-root.disabled 
.MuiOutlinedInput-root.MuiInputBase-root{background:#242424!important;}
.installation .MuiAutocomplete-root .MuiAutocomplete-tag{
  background:#4b4c55!important; border-color:#4b4c55!important; color:#f5f9ff!important;
}
.installation .MuiAutocomplete-root .MuiAutocomplete-endAdornment .MuiButtonBase-root,
.installation .MuiAutocomplete-root .MuiSvgIcon-root{color:#828487!important;}
.installation .MuiAutocomplete-root .MuiAutocomplete-endAdornment .MuiButtonBase-root:hover,
.installation .MuiAutocomplete-root .MuiSvgIcon-root:hover{color:#f5f9ff!important;}

.installation .MuiCheckbox-root:not(.Mui-checked) .MuiSvgIcon-root,
.installation .MuiRadio-root:not(.Mui-checked) .MuiSvgIcon-root{fill:#dddddd;}