.download-app{
    z-index:10;
}
.color-input{
    display: flex;
    align-items: center;
}
.color-input .curr-color{
    display: block;
    height:30px;
    width:30px;
    border-radius:20px;
    background-color:#008cff;
    border:1px solid #ccc;
    margin-right:12px;
}
.color-input input.form-control:last-child{
    display: block;
    float:none;
    flex:1;
    border-top-left-radius:4px;
    border-bottom-left-radius:4px;
    background:#fff;
    cursor:default;
    color:#ccc;
}
.color-input input.form-control:last-child:focus{
    outline:0;
    box-shadow:none;
}
#cbi-portal-authtype-show{
    position: relative;
    min-height:720px;
}
#cbi-portal-preview-show{
    position: absolute;
    right:-180px;
    top:60px;
    width:300px;
    height:650px;
    border-radius:15px;
    overflow: hidden;
}

.curr-color+.popover{
    max-width: 500px;
    width: 242px;
    height: 310px;
    top: -313px;
    left: -5px;
    padding: 10px;
}
.curr-color+.popover.top>.arrow{
    left:19px!important;
}
.curr-color+.popover .popover-content{
    padding:0;
}
.curr-color+.popover .IroColorPicker .IroBox{
    border-radius:8px!important;
}
.curr-color+.popover .IroColorPicker .IroSlider{
    height:8px!important;
}
.curr-color+.popover .IroColorPicker .IroSlider .IroHandle{
    top:-8px!important;
}
.curr-color+.popover .IroColorPicker .IroHandle circle:first-child{
    opacity:.4;
}
.curr-color+.popover .color-value-inputs{
    display: flex;
    padding-top:10px;
}
.curr-color+.popover .color-value-inputs .item{
    flex:1;
    text-align: center;
    font-size:12px;
}
.curr-color+.popover .color-value-inputs .item+.item{
    margin-left:4px;
}
.curr-color+.popover .color-value-inputs .item .form-control{
    border-radius:4px;
    height:24px;
    padding:2px;
    margin-bottom:2px;
    text-align: center;
}
.curr-color+.popover .color-value-inputs .item .form-control + .error{
    visibility: hidden;
    height: 0;
    overflow: hidden;
}
.curr-color+.popover .color-value-inputs .item .form-control[data-name="Hex"]{
    width:80px;
}
.curr-color+.popover .color-value-inputs input[type=number]::-webkit-inner-spin-button,
.curr-color+.popover .color-value-inputs input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.curr-color+.popover .color-value-inputs input[type="number"]{
    -moz-appearance: textfield;
}
.upload-tips{
    padding-top:6px;
    color:#ccc;
}
input.upload-select{
    display:none;
}
input.input-file-name{
    color:#aaa;
}
input.input-file-name + .tool-remove{
    position: absolute;
    margin-left: -27px;
    top: 6px;
    z-index: 5;
}
input.input-file-name + .tool-remove::after{
    content:"";
    position: absolute;
    left:-5px;
    right:-5px;
    top:-6px;
    bottom:-6px;
    opacity:0;
}
.cropper-img{
    max-width:100%;
}
.cropper-inner{
    width:100%;
    height:300px;
}

/*preview*/
.preview-container{
    display:flex;
    flex-direction: column;
    height:100%;
    text-align: center;
    position:relative;
}
.preview-container .main-cont{
    position:relative;
    z-index:4;
    flex:1;
    width:100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    word-wrap: break-word;
}
.preview-container .bottom-cont{
    position:relative;
    z-index:4;
    width:100%;
    padding-bottom:2.5em;
}
#previewPassword,#previewBtn{
    width:calc(100% - 2em);
    display: block;
    margin:0 auto;
    border-radius:.7em;
    box-sizing: border-box;
    height:2.6em;
    line-height:2.6em;;
    padding:0 1em;
    border:0 none;
}
#previewPassword{
    margin-top:1em;
    margin-bottom:1.5em;
    height:3em;
    border:1px solid #E9EBF1;
}
#previewPassword::placeholder{
    color:#b6b8c0
}
#previewPassword:focus{
    outline:0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 0, 0, .075);
}
#previewTitle{
    font-size:1em;
    font-weight:700;
    padding:0 1.25em;
    margin:0 0 1em 0;
}
#previewBtn{
    background:#008cff;
    color:#fff;
    cursor: pointer;
    display:flex;
    justify-content: center;
    align-items: center;
    padding:.5em 1em;
    height:auto;
    min-height: 2.6em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
#previewBtn:active {
    filter: brightness(0.9);
}
#previewTermofservice{
    margin-top:1.25em;
    color:#a6acba;
    height:1.2em;
    line-height:1.2em;
}
#previewTermofservice input[type="checkbox"]{
    border:1px solid #a6acba;
    height:.875em;
    width:.875em;
    margin:.125em .5em 0 0;
    vertical-align:top;
}
#serviceLink{
    color:#008cff;
    cursor:pointer;
}
#previewCopyright{
    color:#a6acba;
    font-size:.75em;
    text-align:center;
    padding:1.875em 1.25em 0;
    word-break: break-word;
    margin:0;
}
#previewMask{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    background:rgba(0,0,0,.6);
    display:flex;
    justify-content: center;
    align-items: center;
    z-index:20;
}
#previewMask .serviceInfo{
    background:#fff;
    border-radius:.5em;
    width:calc(100% - 1.875em);
}
#previewMask .serviceInfo .btns-group{
    display: flex;
    border-top:1px solid #f3f3f3;
}
#previewMask .serviceInfo .btns-group span{
    display:block;
    flex:1;
    height:2.875em;
    line-height:2.875em;
    cursor: pointer;
}
#previewMask .serviceInfo .btns-group span+span{
    border-left:1px solid #f3f3f3;
}
#previewMask .serviceInfo .btns-group span.accept{
    color:#008cff;
}
#previewServiceInfo{
    min-height: 1.25em;
    max-height: 23em;
    padding: 0.625em 1.25em 1.875em;
    color:#a6acba;
    box-sizing: border-box;
    overflow:auto;
    margin:0;
    word-break: break-all;
}
#previewMask .serviceInfo h3{
    padding-top:0.625em;
    font-size: 1em;
    font-weight:700;
    margin-top: 1.25em;
    margin-bottom: .5em;
}
#previewContainer{
    background-color: #f5f6fa;
    background-size: cover;
    background-position: center;
    font-size:1em;
    overflow: hidden;
}
#previewContainer .main-cont{
    padding-top:5em;
    justify-content:start;
}
#previewContainer #previewWelcomeText{
    margin-bottom: 3.125em;
    padding: 0 1.25em;
    font-size:.875em;
}
#previewTitle:empty,
#previewWelcomeText:empty{
    margin:0!important;
    padding:0!important;
}
#previewLogo{
    width:7.5em;
    max-height:7.5em;
    margin:0 auto;
    display:none;
}
#previewContainer.has-logo #previewLogo{
    display:block;
    margin-bottom:1.3em;
}
#previewContainer.has-logo .main-cont{
    padding-top:0;
    justify-content: center;
}
#previewContainer.has-logo #previewWelcomeText{
    margin-bottom:1em;
}
#previewLogo .inner{
    width:100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
#previewLogo .inner img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#previewBg{
    position: absolute;
    width:300px;
    height:650px;
    overflow: hidden;
    background-color:#f5f6fa;
    background-size: cover;
    background-position: center;
}