*{
    --w-element:325px;
    --w-settings:350px
}
::-webkit-scrollbar{
    width:9px;
    height:9px
}
::-webkit-scrollbar-track{
    background:#fff;
    margin:0 7px
}
::-webkit-scrollbar-thumb{
    background-color:rgba(0,0,0,.2);
    border-radius:20px
}
::-webkit-scrollbar-thumb:hover{
    background-color:rgba(0,0,0,.4)
}
.forms-fullscreen{
    position:fixed;
    top:0;
    left:0;
    width:100%!important;
    height:100%!important;
    z-index:52;
    background:#fff;
    background-image: radial-gradient(#cbd5e1 1px, var(--bs-body) 1px);
    background-size: 20px 20px;
}
.container-forms{
    width:100%;
    height:100vh;
    display:flex;
    flex-direction:column
}
.wrapper-title{
    width:400px
}
.container-tab{
    height:64px;
    width:100%;
    background:#fff;
    border-top:1px solid #e9ecef
}
.content-wrapper{
    width:100%;
    height:calc(100% - 64px);
    display:flex;
    border-top:1px solid #e9ecef
}
.container-element{
    height:100%;
    width:0;
    background:#fff;
    transition:.5s;
    position:relative;
    top:0;
    left:-400px;
    border-right:1px solid #e9ecef
}
.container-element.show{
    left:0;
    width:var(--w-element)
}
.tab-design{
    height:100%;
    width:100%;
    /*background:#fff;*/
    display:flex
}
.tab-preview{
    height:100%;
    width:100%;
    background:#fff;
    display:flex
}
.container-design{
    height:100%;
    width:calc(100%);
    /*background:#fff;*/
    display:flex;
    transition:.5s
}
.container-element:is(.show)~.content-design{
    width:calc(100% - var(--w-element))
}
.content-design{
    height:100%;
    width:calc(100%);
    /*background:#fff;*/
    position:relative;
    transition:.5s;
    overflow-y:auto;
    padding:1.5rem 0
}
.designer-content{
    height:100%;
    max-width:700px;
    margin-left:auto;
    margin-right:auto;
    padding:1rem
}
.card-page{
    cursor:pointer;
    transition:.25s
}
.card-page.hovered{
    background-color:#eff2f6
}
.card-page.select{
    background-color:#eff2f6;
    box-shadow:0 0 0 2px #a5acb2 inset
}
.page-title{
    color:#343a40!important;
    font-weight:500;
    font-size:20px;
    padding:.4rem;
    border-radius:5px;
    margin-left:-7px;
    word-break:break-word;
    outline:0;
    position:relative;
    z-index:12
}
.page-description{
    color:#343a40!important;
    font-weight:400;
    font-size:16px;
    padding:.4rem;
    border-radius:5px;
    margin-left:-7px;
    word-break:break-word;
    outline:0;
    position:relative;
    z-index:12
}
.element-description:hover,.element-title:hover,.page-description:hover,.page-title:hover{
    box-shadow:0 0 0 2px #b5babe inset;
    cursor:text
}
.element-description:focus,.element-title:focus,.page-description:focus,.page-title:focus{
    color:#a4abd0!important;
    box-shadow:0 0 0 2px #1e88e5 inset;
    padding:.4rem;
    background:#fff;
    -ms-user-select:text;
    user-select:text;
    -webkit-user-select:text
}
.element-title[aria-placeholder]:empty:before,.page-title[aria-placeholder]:empty:before{
    content:attr(aria-placeholder);
    color:#343a40
}
.element-description[aria-placeholder]:empty:before,.page-description[aria-placeholder]:empty:before{
    content:attr(aria-placeholder);
    color:#343a40
}
.element-item:is(.col-1,.col-2) .dropdown-types,.element-item:is(.col-1,.col-2) .isRequired,.element-item:is(.col-1,.col-2) .title-delete,.element-item:is(.col-1,.col-2) .title-dropdown{
    display:none
}
.element-item:is(.col-3,.col-4) .dropdown-types,.element-item:is(.col-3,.col-4) .title-delete,.element-item:is(.col-3,.col-4) .title-dropdown,.element-item:is(.col-3,.col-4) .title-isRequired{
    display:none
}
.element-item:is(.col-5,.col-6) .title-delete,.element-item:is(.col-5,.col-6) .title-dropdown,.element-item:is(.col-5,.col-6) .title-dropdown-types,.element-item:is(.col-5,.col-6) .title-isRequired{
    display:none
}
.element-item:is(.col-7,.col-8) .title-delete,.element-item:is(.col-7,.col-8) .title-dropdown-types,.element-item:is(.col-7,.col-8) .title-isRequired{
    display:none
}
.element-item:is(.col-9,.col-10) .title-delete,.element-item:is(.col-9,.col-10) .title-dropdown-types{
    display:none
}
.element-item:is(.col-11,.col-12) .icon-dropdown-types{
    display:none
}
.element-item:not(.col-121) .sortable-choices{
    max-height:137px;
    overflow-y:auto
}
.card-element{
    cursor:pointer;
    transition:.25s
}
.card-element:hover{
    box-shadow:0 0 0 2px #a5acb2 inset
}
.card-element.select{
    box-shadow:0 0 0 2px #1e88e5 inset
}
.element-title{
    color:#343a40!important;
    font-weight:500;
    font-size:16px;
    padding:.4rem;
    border-radius:5px;
    margin-left:-7px;
    word-break:break-word;
    outline:0;
    position:relative;
    z-index:12
}
.element-description{
    color:#343a40!important;
    font-weight:400;
    font-size:14px;
    padding:.4rem;
    border-radius:5px;
    margin-left:-7px;
    word-break:break-word;
    outline:0;
    position:relative;
    z-index:12
}
.hidden{
    display:none
}
.container-settings{
    height:100%;
    width:0;
    background:#fff;
    position:relative;
    top:0;
    right:-350px;
    transition:.25s;
    overflow-y:auto;
    border-left:1px solid #e9ecef
}
.container-settings.show{
    right:0;
    width:var(--w-settings)
}
.header-settings{
    position:sticky;
    top:0;
    background-color:#fff;
    z-index:4
}
.setting-show{
    width:calc(100% - var(--w-settings))
}
.container-preview{
    height:100%;
    width:100%;
    border-left:1px solid #e9ecef;
    border-right:1px solid #e9ecef;
    background:#ffefd5;
    position:relative;
    transition:.5s
}
.form-control-edit:disabled{
    font-size:.9375rem!important;
    padding:.9rem 1rem;
    background-color:#fff;
    box-shadow:inset 0 2px 4px rgba(0,0,0,.15)
}
.form-control-edit-disabled,.form-control-edit-disabled::placeholder{
    color:#fff;
    opacity:.25!important
}
.form-control-preview:disabled{
    background-color:#fff
}
.form-control-preview-disabled,.form-control-preview-disabled::placeholder{
    color:#fff;
    opacity:.5!important
}
.form-check-input-preview{
    background-color:#fff
}
.hand-page{
    cursor:grab;
    margin-top:-17px;
    margin-bottom:5px
}
.hand-page i{
    height:6px
}
.hand-element{
    cursor:grab;
    margin-top:-17px;
    margin-bottom:5px
}
.hand-element i{
    height:6px
}
.hand-choice{
    cursor:grab;
    width:27px
}
.choices{
    width:105px;
    padding:8px;
    border:0
}
.choices:focus{
    box-shadow:0 0 0 2px #1e88e5 inset
}
.btn-choice{
    color:#343a40!important
}
.btn-choice:hover{
    color:#1e88e5!important
}
.sortable-choices,.sortable-elements{
    position:relative
}
.list-choices{
    display:flex;
    flex-direction:column;
    padding-left:0;
    margin-bottom:0;
    border-radius:4px
}
.choice-item{
    background-color:#fff;
    border:1px solid rgba(0,0,0,.125);
    margin-bottom:.25rem!important
}
.ui-sortable-helper{
    box-shadow:2px 5px 20px rgba(0,0,0,.13)
}
.element-placeholder{
    border-radius:5px;
    visibility:visible!important
}
.element-placeholder-border{
    border:2px dashed #a5acb2
}
.element-placeholder-bg{
    border-radius:inherit;
    background-color:#dfe1e4
}
.element-h-50px{
    height:50px!important
}
.element-helper{
    background-color:#1e88e5;
    box-shadow:0 0 0 2px #1e88e5 inset,2px 5px 20px rgba(0,0,0,.13)
}
.element-helper .title{
    padding:.4rem 0
}
.page-helper{
    position:relative;
    box-shadow:0 0 0 2px rgba(52,58,64,.95) inset,2px 5px 20px rgba(0,0,0,.13)
}
.bg-blur-helper{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
    background:rgba(52,58,64,.95)
}
.page-helper .title{
    padding:.4rem 0
}
.choice-placeholder{
    border:1px solid rgba(0,0,0,.125);
    height:48px;
    margin-bottom:.25rem!important
}
.item-design,.item-design.choice-item{
    border:0;
    margin-bottom:.25rem!important
}
.item-design .hand-choice{
    margin-left:-20px
}
.design-choices{
    color:#343a40!important;
    font-weight:400;
    font-size:16px;
    padding:.3rem;
    border-radius:5px;
    margin-left:-7px;
    word-break:break-word;
    outline:0;
    position:relative;
    z-index:12
}
.design-choices:not(.not):hover{
    box-shadow:0 0 0 2px #b5babe inset;
    cursor:text
}
.design-choices:not(.not):focus{
    color:#a4abd0!important;
    box-shadow:0 0 0 2px #1e88e5 inset;
    padding:.3rem;
    background:#fff
}
.form-switch .form-check-input{
    width:2em
}
@media (max-width:768px){
    .container-forms{
        height:calc(100vh - 110px)
    }
    .wrapper-title{
        width:auto
    }
    .container-element:is(.show)~.content-design{
        width:100%
    }
    .container-element{
        position:absolute;
        z-index:50
    }
    .container-element.show{
        left:0;
        box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important
    }
    .container-settings{
        position:absolute;
        z-index:50
    }
    .container-settings.show{
        right:0;
        box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important
    }
    .setting-show{
        width:100%!important
    }
}