/* reset the col classes, moved on top of the template to include the actions */

@media (min-width: 576px) {
    #main-formbuilder {
        margin-left: -2rem;
        margin-right: -2rem;
    }
}

#main-formbuilder .builder-sidebar_scroll {
  position:  relative;
  top: 0;
  overflow: hidden;
  max-height:  initial;
}

/* move the sidebar fixed on left */

@media (min-width: 576px) {
    #main-formbuilder .formcomponents {
        position: fixed;
        top: 60px;
        height: calc(100vh - 60px);
        left: 0;
        overflow-y: auto;
        background-color: white;
        padding: 40px 1rem;
    }
}

@media (min-width: 768px) {
    #main-formbuilder .formcomponents {
        top: 100px;
        height: calc(100vh - 100px);
    }
}

/* actions bar on top */

.actions {
    height: 130px;
}

.actions.position-fixed {
    z-index: 1001;
    top:  60px;
}

@media (min-width: 768px) {
    .actions.position-fixed {
        top: 100px;
    }
}

/* panel right json */

.drawer-json,
.drawer-form {
    position: fixed;
    z-index: 1003 !important;
    top: 100px;
    right: 0;
    height: calc(100vh - 100px);
    background-color: white !important;
    padding: 60px 20px 0;
    margin: 0;
    transform: translateX(120%);
    transition: transform 0.4s cubic-bezier(.4,0,.2,1);
    overflow-y: scroll;
    border-radius: 0;
    width: 40vw;
}

.drawer-json.is-open,
.drawer-form.is-open {
    transform: translateX(0);
    transition: transform 0.4s cubic-bezier(.4,0,.2,1);
    opacity:  1 !important;
}

/* json formatting stuff */
pre {outline: 1px solid var(--light); padding: 15px; margin: 5px; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }

/* screen filter */
.screen-hider {
    opacity: 0;
    position: fixed;
    z-index: 1002;
    top: 100px;
    bottom: 0;
    left: -10000px;
    right: 0;
    width: 100vw;
    height: 100%;
    background-color: rgba(0,0,0, 0.4);
}

.screen-hider.is-visible {
    opacity: 1;
    left: 0;
    transition:  opacity 0.5s ease-out;
}

/* initialize limitless tabs classes */


.nav-tabs:not(.nav-tabs-bottom) .nav-link {
    color: inherit;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}


.nav-tabs:not(.nav-tabs-bottom) .nav-link.active {
    border-top-color: var(--info);
}


.nav-tabs:not(.nav-tabs-bottom) .nav-link:not(.active):hover,
.nav-tabs:not(.nav-tabs-bottom) .nav-link:not(.active):focus {
    border-color:  transparent;
}


.nav-tabs:not(.nav-tabs-bottom) .nav-link.active,
.nav-tabs:not(.nav-tabs-bottom) .nav-item.show .nav-link {
    border-width: 1px;
    border-bottom-color:  white;
    background-color: transparent;
}

.nav-tabs-bottom .nav-tabs .nav-item .nav-link {
    border-width: 0px !important;
}

.card-header-tabs.nav-tabs {
    border-bottom: 1px solid #e2e8f0;
}

/* style for sidebar left */

.builder-sidebar .btn.builder-group-button, .builder-sidebar .btn.builder-group-button:hover, .card.form-builder-panel {
    box-shadow: none !important;
    background-color:  var(--light);
}

.builder-sidebar .btn.builder-group-button:hover, .btn.builder-group-button[aria-expanded="true"] {
    box-shadow: none !important;
    color: var(--primary);
}
.builder-sidebar .btn.builder-group-button::after {
    font-family: "Font Awesome 7 Pro";
    font-weight: 400;
    content: "\f078";
    float: right;
    margin-right: 5px;
    transition:  all 0.3s ease-out;
}

.builder-sidebar .btn.builder-group-button[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* shadow only on the container card, not on others */

.formio-builder-form .card.border {
    box-shadow:  none !important;
}

/*-- Bootstrap/template overrides --*/

/* bigger buttons on left */
.collapse .btn.btn-primary {
    padding: 8px 10px;
}

.card-body:not(.card)+.card-body:not(.card) {
    border-top:  0;
}

.builder-sidebar .card-header:not([class*=bg-]):not([class*=alpha-]) {
    padding:  0px;
}

[class*=bg-]:not(.bg-transparent):not(.bg-light):not(.bg-white):not(.btn-outline):not(body),
[class*=bg-]:not(.bg-transparent):not(.bg-light):not(.bg-white):not(.btn-outline):not(body) .card-title {
    color: inherit;
}

/*-- Formio errors --*/
.formio-error-wrapper {
    color: var(--danger);
    background-color: transparent;
    border-color: none;
}

.formio-error-wrapper, .formio-warning-wrapper {
    padding: 0;
}

.formio-component-file .list-group {
    flex-direction: column;
}
.formio-component-file .list-group-item {
    flex-direction: row;
}
.formio-component-file .list-group-item .row {
    width: 100%;
}

.null {
    margin-top: 20px;
    color:  #dc3545 !important;
}

#main-formbuilder + footer {
  text-align: right;
}

.row.formbuilder {
    margin:  0px;
}

.formarea {
    flex:  none;
    max-width:  initial;
    position:  initial;
    padding:  0px;
}


/*--- PREVIEW PAGE (mobile, tablet, desktop) ---*/

.device-view {
    color: #9CA3AF;
    cursor: pointer;
}

iframe .card.shadow {
    box-shadow: none !important;
    podding:  0;

}

.device-view.device-active,
.device-view:hover {
    color: #333;
}

.shape-tablet,
.shape-smartphone,
.shape-laptop {
    margin: 0 auto 40px;
}

.shape-tablet,
.shape-tablet .previewcontent-tablet,
.shape-smartphone,
.shape-smartphone .previewcontent-smartphone,
.shape-laptop,
.shape-laptop .previewcontent-laptop,
.shape-tablet::before,
.shape-smartphone::before,
.shape-laptop::before,
.shape-tablet::after,
.shape-smartphone::after,
.shape-laptop::after {
    box-sizing: content-box;
}

.shape-tablet::before,
.shape-smartphone::before,
.shape-laptop::before,
.shape-tablet::after,
.shape-smartphone::after,
.shape-laptop::after {
    content: '';
    position: absolute;
    display: block;
}

/* The device with borders */
.shape-smartphone {
  position: relative;
  width: 360px;
  height: 640px;
  border: 16px #D1D5DB solid;
  border-top-width: 60px;
  border-bottom-width: 60px;
  border-radius: 36px;
}

/* The horizontal line on the top of the device */
.shape-smartphone:before {
  width: 60px;
  height: 5px;
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #9CA3AF;
  border-radius: 10px;
}

/* The circle on the bottom of the device */
.shape-smartphone:after {
  width: 35px;
  height: 35px;
  left: 50%;
  bottom: -65px;
  transform: translate(-50%, -50%);
  background: #9CA3AF;
  border-radius: 50%;
}

/* The screen (or content) of the device */
.shape-smartphone .previewcontent-smartphone {
  width: 360px;
  height: 640px;
  background: white;
}

/* The device with borders */
.shape-tablet {
  position: relative;
  width: 768px;
  height: 1024px;
  border: 16px #D1D5DB solid;
  border-top-width: 60px;
  border-bottom-width: 60px;
  border-radius: 36px;
}

/* The horizontal line on the top of the device */
.shape-tablet:before {
  width: 60px;
  height: 5px;
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #9CA3AF;
  border-radius: 10px;
}

/* The circle on the bottom of the device */
.shape-tablet:after {
  width: 35px;
  height: 35px;
  left: 50%;
  bottom: -65px;
  transform: translate(-50%, -50%);
  background: #9CA3AF;
  border-radius: 50%;
}

/* The screen (or content) of the device */
.shape-tablet .previewcontent-tablet {
  width: 768px;
  height: 1024px;
  background: white;
  margin: -1px;
}


/* The device with borders */
.shape-laptop {
  position: relative;
  width: 1200px;
  height: 750px;
  border: 16px #D1D5DB solid;
  border-top-width: 60px;
  border-bottom-width: 100px;
  border-radius: 36px;
}
/* The horizontal line on the top of the device */
.shape-laptop:before {
  width: 18px;
  height: 18px;
  left: 50%;
  top: -40px;
  transform: translateX(-50%);
  background: #9CA3AF;
  border-radius: 50%;
}

/* The circle on the bottom of the device */
.shape-laptop:after {
    content: '\F8FF';
    width: 60px;
    height: 60px;
    left: 50%;
    bottom: -80px;
    transform: translateX(-50%);
    background: transparent;
    border-radius: 50%;
    font-size: 60px;
    line-height: 60px;
    text-align: center;
    color: #9CA3AF;
}
/* The screen (or content) of the device */
.shape-laptop .previewcontent-laptop {
    width: 1200px;
    height: 750px;
    background: white;
    margin: -1px;
}

.list-group-item .row {
    width: 100%;
}

li[ref="editgrid-logic-row"] {
    display:  block;
}

/* Hide/change some original formio elements */
[href^="https://help.form.io/userguide"],
[href="https://help.form.io/userguide/#textfield"] {
    display:  none;
}

.btn-danger i.fa-trash:before {
    content:  "\f1f8" ;
}

/* wizard panel classes */

body {
  counter-reset: wizard;
}

.formio-component-panel.wizard > .card > .card-header::before {
    counter-increment: wizard;
    content: counter(wizard);
    position:   relative;
    z-index:  1;
    display:  inline-block;
    border:  solid 2px var(--primary);
    color:  var(--primary);
    border-radius:  50%;
    margin-right:  20px;
    width: 40px;
    height: 40px;
    line-height: 36px;
    text-align: center;
    background:  white;
}

.formio-component-panel.wizard > .card > .card-header {
    color:  var(--primary) !important;
    height:  64px;
    background-color: white;
    margin-top: 10px;
}

.formio-component-panel.wizard > .card > .card-header .card-title {
    position:   relative;
    z-index:  1;
    display:  inline-block;
    background-color: inherit;
    padding-left: 10px;
    padding-right: 10px;
}

.formio-component-panel.wizard > .card > .card-header::after {
    display:  blocK;
    content:  "";
    position:  relative;
    border-bottom:  solid 1px var(--primary);
    margin-top:  -20px;
    z-index:  0;
}


/* wizard negatives panel classes */

.formio-component-panel.wizard > .card > .card-header:not(.bg-default)::before {
    border: solid 2px white !important;
    color: inherit !important;
    background-color:  inherit;
}

.formio-component-panel.wizard > .card > .card-header:not(.bg-default) {
    color:  white !important;
}

.formio-component-panel.wizard > .card > .card-header:not(.bg-default)::after {
    border-bottom:  solid 1px white;
}

.formio-component-panel.wizard > .card > .card-header:not(.bg-default) .card-title {
    background-color:  inherit;
}



#form_wrapper .formio-form > div > nav > ul.pagination {
    border-radius: 0rem;
    counter-reset: stepCount;
    margin-bottom: 20px;
}

#form_wrapper .formio-form > div > nav > ul.pagination li.page-item {
    flex-grow:  1;
    height: 90px;
}

#form_wrapper .formio-form > div > nav > ul.pagination span.page-link {
    display: block;
    border-radius: 0;
    padding-top:  0;
    padding-bottom:  0;
    padding-left:  5px;
    padding-right:  5px;
    margin:  0;
    background:  initial;
    border:  initial;
    white-space: nowrap;
    overflow: hidden;
    color:  #ced4da;
}

/* datagrid specific classes */

.formio-component-datagrid table {}
.formio-component-datagrid thead {
    display: block;
    min-width: 280px;
}
.formio-component-datagrid thead tr {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.formio-component-datagrid tbody {
    display: block;
    min-width: 280px;
    width: 100%;
}
.formio-component-datagrid tbody tr {
    margin-bottom: 40px;
    width: 100%;
}

@media (min-width: 768px) {
    .formio-component-datagrid thead {
        min-width: 688px;
    }
    .formio-component-datagrid tbody {
        min-width: 688px;
    }
}

@media (min-width: 992px) {
    .formio-component-datagrid table {}
    .formio-component-datagrid thead {
        display: table-header-group;
        min-width: 100%;
    }
    .formio-component-datagrid thead tr {
        display: table-row;
        width: 100%;
    }
    .formio-component-datagrid tbody {
        display: table-row-group;
        min-width: 100%;
    }
    .formio-component-datagrid tbody tr {
        display: table-row;
        margin-bottom: 0;
        width: 100%;
    }
    .formio-dialog.formio-dialog-theme-default .formio-dialog-content {
        padding:  2rem;
    }

    .formio-dialog-content .panel.preview-panel {
        margin-bottom:  20px;
    }
}

/* RSC 20.07.2022 : hide navigation button in wizard mode */
#form_wrapper .formio-form>div>nav>ul.pagination button.page-link {
    display: none;
}

/* pagination classes */

#form_wrapper .formio-form > div > nav > ul.pagination li.page-item:before {
    display:  block;
    position:  relative;
    z-index:  1;
    width:  40px;
    height:  40px;
    line-height:  36px;
    border: 2px solid #ced4da;
    border-radius:  50%;
    margin-left:  auto;
    margin-right:  auto;
    margin-bottom: 10px;
    counter-increment: stepCount 1;
    content: counter(stepCount) " ";
    background:  white;
    text-align: center;
    color:  #ced4da;
}

#form_wrapper .formio-form > div > nav > ul.pagination li.page-item:after {
    position:  relative;
    width:  100%;
    display:  block;
    z-index: 0;
    content: "";
    border-top: 2px solid #ced4da;
    margin-top:  -30px;
}

#form_wrapper .formio-form > div > nav > ul.pagination li.page-item:last-child:after {
    width:  50%;
}

#form_wrapper .formio-form > div > nav > ul.pagination li.page-item:first-child:after {
    width:  50%;
    margin-left:  auto;
}

#form_wrapper .formio-form > div > nav > ul.pagination li.page-item.active:before,
#form_wrapper .formio-form > div > nav > ul.pagination li.page-item.active span.page-link {
    color:  #1E3F74;
    border-color:  #1E3F74;
}

/*
    Give some vertical padding to content-only forms
*/

#form_wrapper .card-body.content-only {
    padding-top: 80px;
    padding-bottom: 80px;
}

.choices__list--dropdown {
    z-index: 100 !important;
}

.formio-component-editgrid .list-group-item.list-group-header {
    /*display: none !important;*/
    font-weight: bolder;
}

.formio-component-editgrid .list-group-item {
    display:  block !important;
    width: 100%;
}

.formio-component-editgrid .list-group-item .formio-errors invalid-feedback {
    width: 100%;
}

.formio-component-editgrid .editgrid-actions {
    margin-top: 20px;
    /*margin-left: 20px;*/
    /*// X-Small devices (portrait phones, less than 576px)
    // No media query for `xs` since this is the default in Bootstrap

    // Small devices (landscape phones, 576px and up)
    @media (min-width: 576px) {  }

    // Medium devices (tablets, 768px and up)
    @media (min-width: 768px) { ... }

    // Large devices (desktops, 992px and up)
    @media (min-width: 992px) { ... }

    // X-Large devices (large desktops, 1200px and up)
    @media (min-width: 1200px) { ... }

    // XX-Large devices (larger desktops, 1400px and up)
    @media (min-width: 1400px) { ... }*/
}
.formio-component-editgrid .editgrid-actions button {
    display: block;
    width:  100%;
    margin-bottom: 10px;
}

@media (min-width: 576px) {
    .formio-component-editgrid .editgrid-actions button {
        display: inline-block;
        width:  auto;
        margin-bottom: 0;
    }
}

.formio-component-birthdate .col {
    width:  100%;
}

@media (min-width: 576px) {
    .formio-component-birthdate .col {
        width:  auto;
    }
}

[ref="editgrid-connectors-row"].list-group-item {
        display: block;
}

/* -- FORM IO wizard tabs -- */
.fa-cloud-upload:before {
    content: "\f0ee" !important;
}

.ck.ck-toolbar, .ck.ck-editor__editable_inline {
    border-color:  white;
    background-color: transparent;
}

.ck.ck-toolbar .ck.ck-toolbar__separator {
    background-color: white;
}

.ck.ck-editor__editable_inline {
    border: 0;
}

.ck.ck-button.ck-on, a.ck.ck-button.ck-on {
    background: #fff;
}

/* RSC : required to completely hide a div with borders and padding */
.formio-form .formio-hidden {
    margin: 0;
    padding: 0;
    border: none;
}