/* ==========================================================================
Project: TWD CMS 7 - Form Builder
Date: 04/14/20 - File created
Created by: Third Wave Digital (www.thirdwavedigital.com)
========================================================================== */
/* ==========================================================================
Fonts
========================================================================== */
@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(/admin/assets/css/materialicons/MaterialIcons-Regular.eot);src:local('Material Icons'),local('MaterialIcons-Regular'),url(/admin/assets/css/materialicons/MaterialIcons-Regular.woff2) format('woff2'),url(/admin/assets/css/materialicons/MaterialIcons-Regular.woff) format('woff'),url(/admin/assets/css/materialicons/MaterialIcons-Regular.ttf) format('truetype')}
.material-icons{font-family:'Material Icons';font-weight:400;font-style:normal;font-size:24px;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga'}
/* ==========================================================================
Images
========================================================================== */
img {max-width: 100%}
/* ==========================================================================
Form Builder
========================================================================== */
/* Nav */
.form-builder-nav {}
.form-builder-nav .input-group-append {box-shadow:0 2px 5px 0 rgba(0,0,0,.08), 0 2px 10px 0 rgba(0,0,0,.06)}
.form-builder-nav .input-group-append .btn {box-shadow:none !important;}
/* Form Group Tags */
.form-builder-tags {}
.form-builder-tags .col-12 {padding-left: 0px; padding-right:0px}
.form-group-tag {border-left: 4px solid rgba(0,0,0,.125); transition: transform 500ms ease, border 500ms ease; user-select: none}
.form-group-tag:hover {cursor:move; border-left: 4px solid #007bff;border-top: 1px dashed #007bff;border-right: 1px dashed #007bff;border-bottom: 1px dashed #007bff; }
/* Sortable Target */
.sortable-target {border: 2px dashed #ced4da; background: #f9f9f9; position: relative;z-index:1;counter-reset: steps}
.sortable-target.active {border: 2px dashed #007bff}
.sortable-instructions {display:-webkit-box; display:-ms-flexbox; display:flex; justify-content: center; align-items: center;position: absolute; top: 50%; left: 50%;width: 300px; height: 200px; margin: -100px 0px 0px -150px}
.sortable-target .form-group-type input, .sortable-target .form-group-type select, .sortable-target .form-group-type textarea, .sortable-target .form-group-type label, .sortable-target .btn-clearsignature, .sortable-target .signature, .sortable-target .step-indicator {pointer-events:none;user-select:none}
.sortable-target li {padding-left: 5px; padding-right: 5px;}
.sortable-target li[data-target=".step-settings"] .badge:empty {width: 25px; height: 25px; border-radius: 25px; border: 2px solid #007bff; display:-webkit-box; display:-ms-flexbox; display:flex; justify-content: center;align-items:center}
.sortable-target li[data-target=".step-settings"] .badge::before {content:counter(steps);counter-increment: steps;font-size: .85rem;}
.dragging .card {border: 2px dashed #007bff}
/* Sortable Target - Form Groups Types */
.form-group-type {}
.form-group-type:hover .form-group-nav, .form-group-type:focus .form-group-nav {opacity:1}
.form-group-type.active .form-group-content {border-color: #007bff}
.form-group-type.active .btn-edit {background:#007bff; border-color: #007bff; color: #fff; }
.form-group-type.active .btn-edit:hover, .form-group-type.active .btn-edit:focus {color: #fff !important}
.form-group-content {position: relative;border-width: 2px}
.form-group-content .signature hr {border-top-width: 3px;margin-top: .5rem}
.form-group-content small {font-size: .7rem}
.form-group-content small:empty {display:none}
.form-group-content input[type="text"], .form-group-content input[type="password"], .form-group-content .custom-select:not([multiple]), .form-group-content .custom-file-input, .form-group-content .form-control:not(textarea), .form-group-content .input-group-text, .form-group-content .input-group .form-control {height: 30px !important}
.form-group-content .custom-file-label {height: 30px; padding: .25rem .75rem}
.form-group-content .custom-file-label::after {min-height: 28px;max-height:28px; padding: .25rem .75rem}
.form-group-content .custom-select[size] {height:auto}
.form-group-content .custom-select {padding:.175rem 1.75rem .175rem .75rem}
.form-group-content label:not(.custom-control-label):not(.custom-file-label) {font-weight: 500;min-height:20px;}
.form-group-nav {position: absolute; top: 0px; right: 0px; opacity:0; z-index: 1; border: 0 0 0 .25rem; transition: opacity 250ms ease}
.form-group-nav .btn-cms {font-size: .7rem; width: 25px; height: 25px;min-height: 25px}
.form-group-nav .btn-move:hover {cursor:move}
/* Form Group Settings */
.form-builder-settings {}
.form-builder-settings button[data-toggle] {background:none; border:none}
.form-builder-settings button[data-toggle] span {transition: transform 250ms ease;}
.form-builder-settings button[data-toggle].collapsed span {-webkit-transform: rotate(-90deg);-ms-transform: rotate(-90deg);transform: rotate(-90deg);}
.form-builder-settings label:not(.custom-control-label) {font-size: .75rem;text-transform: uppercase; font-weight:400; margin-bottom: 2px;}
.form-builder-settings .custom-control-label {font-size: .8rem}
.form-builder-settings hr {margin: .75rem 0}
.form-builder-settings .small {font-size: .75rem}
.form-builder-settings .form-control {height: 30px;}
.cms .form-builder-settings .input-group .form-control {height:30px}
.sticky .form-builder-settings, .sticky .form-builder-tags {position: sticky; top: 0px; padding-top: 45px}
/* Scroll */
.form-builder-tags, .form-builder-settings {overflow-y: auto; height: calc(100vh - 30px);}
.form-builder-tags::-webkit-scrollbar, .form-builder-settings::-webkit-scrollbar {width: 9px;height: 0px;}
.form-builder-tags::-webkit-scrollbar-thumb, .form-builder-settings::-webkit-scrollbar-thumb { border-width: 0px 2px;border-style: solid}
.form-builder-tags::-webkit-scrollbar-thumb, .form-builder-settings::-webkit-scrollbar-thumb {background-color: #ccc;border-color: #fff;}
/* Modal Preview */
.modal-open, .form-builder-preview {padding-right: 0px !important}
.form-builder-preview label:not(.custom-control-label):not(.custom-file-label) {font-weight: 700;}
.form-builder-preview input[type="text"], .form-builder-preview .custom-select, .form-builder-preview .custom-file-label {min-height:38px}
.form-builder-preview .custom-file-label {padding: .5rem .75rem}
.form-builder-preview .input-group-prepend .far {display:-webkit-box; display:-ms-flexbox; display:flex;}
.form-builder-preview .signature {overflow:hidden}
.form-builder-preview .signature-pad { position: relative;width: 400px; height: 150px;}
.form-builder-preview .signature-pad::after {content:""; height: 3px; background: rgba(0,0,0,.1); position: absolute; left: 10px; right: 10px; bottom: 10px;}
.form-builder-preview .signature-pad canvas {position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;border-radius: .25rem}
.form-builder-preview .custom-file-label::after {min-height: 36px;padding: .5rem .75rem}
.form-builder-preview .tab-content>.active {display:-webkit-box; display:-ms-flexbox; display:flex;}
.form-builder-preview iframe {border:none}
.form-preview .modal-dialog, .form-builder-preview .modal-dialog {width: 90%; max-width: 1000px}
/* ==========================================================================
Stepper Component
========================================================================== */
.cms-stepper {counter-reset: steps;border-bottom:none}
.cms-stepper .step {position:relative;margin: 0px 20px 20px 0px}
.cms-stepper .step:last-child {margin-right: 0px}
.cms-stepper .step .badge {justify-content: center; width: 25px; height: 25px; border-radius: 25px; border: 2px solid #007bff;display:-webkit-box; display:-ms-flexbox; display:flex; align-items:center}
.cms-stepper .step .badge:empty {display:-webkit-box; display:-ms-flexbox; display:flex; }
.cms-stepper .step .badge:empty::before {content:counter(steps);counter-increment: steps;font-size: .85rem;}
.cms-stepper .step .completed .badge {background: #28a745;color:#fff; border-color:#28a745}
.cms-stepper .step .active .badge {background: #007bff;color:#fff}
.cms-stepper .step .active .badge::before {color: #fff}
.cms-stepper .step a {display:-webkit-box; display:-ms-flexbox; display:flex; align-items: center;text-decoration: none;}}
.cms-stepper .step a:hover, .cms-stepper .step a:focus { text-decoration: none;}
.cms-stepper .has-errors, .cms-stepper .has-errors:hover, .cms-stepper .has-errors:focus {color: #dc3545 !important}
.cms-stepper .has-errors .badge:empty {border: 2px solid #dc3545 }
.cms-stepper .has-errors.active .badge {background: #dc3545 }
/* ==========================================================================
Form Output
========================================================================== */
.cms-form {}
.cms-form label:not(.custom-control-label):not(.custom-file-label) {display:block; font-weight: 700;}
.cms-form .signature {overflow:hidden}
.cms-form .signature-pad { position: relative;width: 400px; height: 150px;}
.cms-form .signature-pad::after {content:""; height: 3px; background: rgba(0,0,0,.1); position: absolute; left: 10px; right: 10px; bottom: 10px;}
.cms-form .signature-pad canvas {position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;border-radius: .25rem}
.cms-form .signature-pad canvas.is-invalid {border: 1px solid #dc3545}
.cms-form .input-group-prepend .far {display:-webkit-box; display:-ms-flexbox; display:flex;}
.cms-form .form-control-width-1 {width: 35px}
.cms-form .form-control-width-2 {width: 50px}
.cms-form .form-control-width-3 {width: 75px}
.cms-form .form-control-width-4 {width: 100px}
.cms-form .form-control-width-5 {width: 125px}
.cms-form .form-control-width-6 {width: 150px}
.cms-form .form-control-width-7 {width: 175px}
.cms-form .form-control-width-8 {width: 200px}
.cms-form .form-control-width-9 {width: 225px}
.cms-form .form-control-width-10 {width: 250px}
.cms-form .frm-required {color: #ff0000;}
.cms-form .formbuilder-finito{display:none !important;} /* Used for hiding honeypot */
.alert p {margin-bottom: 0px}
/* ==========================================================================
Media Queries
========================================================================== */
@media (min-width: 0px) {
.cms-stepper {flex-direction: column;}
.cms-stepper .step {width: 100%;display:-webkit-box; display:-ms-flexbox; display:flex;}
.cms-stepper .step a {width: 100%;}
}
@media (min-width: 576px) {
}
@media (min-width: 768px) {
.cms-stepper {flex-direction: row;}
.cms-stepper .step, form-builder-preview .cms-stepper .step a {width: auto}
.cms-stepper .step {display:inline-block;}
}
@media (min-width: 1200px) {
}