.visible-xs {display: none!important;}
.visible-sm {display: none!important;}
.visible-md {display: none!important;}
.visible-lg {display: none!important;}
.is-mobile {display: none!important;}
.is-desktop {display: none!important;}

@media(max-width: 767px) {
  .visible-xs {display: block!important;}
  .is-mobile {display: block!important;}
}
@media(min-width: 768px) and (max-width:  810px) {
  .visible-sm {display: block!important;}
  .is-mobile {display: block!important;}
}
@media(min-width: 811px) and (max-width:  1023px) {
  .visible-md {display: block!important;}
  .is-desktop {display: block!important;}
}
@media(min-width: 1024px) {
  .visible-lg {display: block!important;}
  .is-desktop {display: block!important;}
}



#Header {background-color: #d0f4ff;}
#Header a {color: #164d7e;}

footer {color: #fff; background: #2b3336; padding-top: 30px; padding-bottom: 1px;}
.cols, .columns {margin-left: -12px; margin-right: -12px;}
[class~="col-"], .column {padding-left: 12px; padding-right: 12px;}

img.fullwidth {width: 100%; max-width: 100%; height: auto;}

#logo .logo-main {max-height: 90px; padding: 20px 0px; margin-left: -15px;}
header .navbar-section {    margin: 20px 0 18px;}



.app-configurations{background: #fff; position: relative; z-index: 20; }

.app-configurations-preview,
.app-configurations {padding-top: 30px; padding-bottom: 30px;}
.app-configurations > div {margin-bottom: 30px;}

.step .step-item a {outline: none; border-style: none;}

.app-configurations summary,
.app-configurations .form-label {color: #246993; font-weight: 500; text-transform: uppercase; padding-left: 0!important; padding-right: 0!important;}

/*.app-configurations .attach-label label {margin-bottom: 0; padding-bottom: 0;}*/
.app-configurations .step-container > div {margin-bottom: 20px;}

.form-horizontal .form-group .form-checkbox,
.form-horizontal .form-group .form-radio {font-size: 14px; font-weight: 500; margin-bottom: 0; padding-bottom: 0; padding: 40px 15px 40px 15px; border: 1px solid #ccc; margin-right: 15px; margin-bottom: 15px; text-align: center;}
.form-horizontal .form-group .form-checkbox.active,
.form-horizontal .form-group .form-radio.active {border-color: #5755d9; color: #5755d9;}
/*.form-horizontal .form-group .form-radio .form-icon {top: 50%; transform: translateY(-50%); left: 25px;}*/
.form-horizontal .form-group .form-checkbox .form-icon,
.form-horizontal .form-group .form-radio .form-icon { top: 2px; left: -4px; position: relative; }

.form-horizontal .form-group.radios {display: flex;}
.form-horizontal .form-group.pictures .form-checkbox,
.form-horizontal .form-group.pictures .form-radio {padding: 0px 0px 15px 0px;}
.form-horizontal .form-group.pictures picture {overflow: hidden; display: block; margin-bottom: 15px;}

.docs-shape {height: 4.8rem; line-height: 1.2rem; padding: 1.8rem 0; width: 4.8rem;}
.s-rounded {border-radius: 50%;}
/*.form-horizontal .form-group.radios.colors .form-radio {padding: 0;}*/
.form-horizontal .form-group.radios.colors .docs-shape {margin: 0 auto; margin-bottom: 20px; border: 1px solid #ccc;}

.app-configurations-preview .zoom {margin-top: 25px; margin-bottom: 25px;}
.app-configurations-preview .actions {margin-top: 15px; text-align: right;}
.app-configurations-total .price {color: #5755d9;}

.app-configurations > .actions {text-align: right; margin-bottom: 15px;}
.app-configurations .fileupload,
.app-configurations-preview .fileupload {display: inline-block;}
.app-configurations .fileupload-buttonbar .btn,
.app-configurations-preview .fileupload-buttonbar .btn {margin-bottom: 0!important;}
.app-configurations-preview #strumenti-img .zoom > .pomello2 {border: 1px solid #c5c5c5 !important; outline: none!important;}

/*.app-configurations-preview .pomello2 > div:before {content: "ZOOM"; position: relative; bottom: -13px; left: -7px; font-size: 10px;}*/
.app-configurations-preview .pomello2 .scrittapomello2 {position: relative; width: 62px!important; border-radius: 6px!important; font-size: 10px; color: #fff; line-height: 16px; text-align: center;}
.app-configurations-preview .pomello2 > div:before {content: "- ZOOM +";}

@media (max-width:  810px) {
  /*.app-configurations-preview #strumenti-img {width: calc(100% - 24px - 62px)!important;}*/
  .app-configurations-preview .zoom {margin-left: 24px; margin-right: 24px;}


  .app-configurations-preview {background: #f0f0f0;}
  .app-configurations:before {content: "\f102"; position: relative; left: 50%; top: -15px; font-family: "Font Awesome 5 Free"; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; color: #5755d9; font-size: 12px; font-weight: 900; transform: scaleX(3);}
  /*.app-configurations:before {background: #fff; padding: 4px 4px; content: "\f102"; border-radius: 11px 5px 0px 0px; position: relative; left: 50%; top: -48px; font-family: "Font Awesome 5 Free"; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; color: #483d8b; font-size: 12px; font-weight: 900; transform: scaleX(3);}*/
}


.app-configurations .price-box {display: block; font-weight: 400; font-size: 12px!important; color: #00B3DF;}
.app-configurations .price-box > em {font-style: normal;}
.app-configurations .price-box .price:before {content: "€";}

header .off-canvas .off-canvas-content {padding-left: 0;}


.scrittapomello2 {background-color: darkslateblue !important; border-radius: 50% !important; height: 18px !important; width: 18px !important; top: -8px !important; }
details summary {cursor: pointer;}

@media (max-width: 810px) {
  header .navbar-section {margin-top: 0; margin-bottom: 0;}
  #Header {position: fixed; top:  0; height: 86px; width: 100%;}
  #Header + .container {margin-top: 90px;}
}


@media (min-width: 809px) {
  #Header .off-canvas-toggle {display: none;}
}


.main-app > div {width: 100%;}

@media (min-width: 811px) {
  .main-app > div {width: 50%;}
}

@media (min-width: 810px) {
/*      .form-horizontal .form-group.radios {
      --gap: 12px;
      display: inline-flex;
      flex-wrap: wrap;
      margin: calc(-1 * var(--gap)) 0 0 calc(-1 * var(--gap));
      width: calc(100% + var(--gap));
    }

    .form-horizontal .form-group.radios > .form-radio {
      margin: var(--gap) 0 0 var(--gap);
    }*/

  .form-horizontal .form-group.radios > .form-checkbox,
  .form-horizontal .form-group.radios > .form-radio {width: 30%; width: calc(33.333% - 15px);}
  /*.form-horizontal .form-group.radios > .form-radio {width: 30%; width: calc(33.333% - 10px);}*/
  /*.form-horizontal .form-group.radios > .form-checkbox:nth-child(3n),
  .form-horizontal .form-group.radios > .form-radio:nth-child(3n) {margin-right: 0;}*/

  details.form-horizontal .form-group.radios > .form-checkbox,
  details.form-horizontal .form-group.radios > .form-radio {width: 30%; width: calc(33.333% - 12px);}

  .app-configurations-preview > .actions {display: block;}
}

/*@media (max-width: 810px) {
  .form-horizontal .form-group.radios > .form-checkbox,
  .form-horizontal .form-group.radios > .form-radio {width: 50%; width: calc(50% - 10px);}
  .form-horizontal .form-group.radios > .form-checkbox:nth-child(2n),
  .form-horizontal .form-group.radios > .form-radio:nth-child(2n) {margin-right: 0;}

  details.form-horizontal .form-group.radios > .form-checkbox,
  details.form-horizontal .form-group.radios > .form-radio {width: 50%; width: calc(50% - 12px);}
}*/

@media (max-width: 767px) {
  .form-horizontal .form-group.radios > .form-checkbox,
  .form-horizontal .form-group.radios > .form-radio {width: 50%; width: calc(50% - 10px);}
  .form-horizontal .form-group.radios > .form-checkbox:nth-child(2n),
  .form-horizontal .form-group.radios > .form-radio:nth-child(2n) {margin-right: 0;}

  details.form-horizontal .form-group.radios > .form-checkbox,
  details.form-horizontal .form-group.radios > .form-radio {width: 50%; width: calc(50% - 12px);}
}

.app-configurations-preview {position: relative;}
.app-configurations-preview > .actions {position: absolute; bottom:  120px; left:  0; right: 0; padding-top: 10px; padding-left: 15px; padding-right: 15px; background: #fff; z-index: 99;}
.app-configurations> .actions {display: none;}

@media (min-width:  811px) {
  .app-configurations-preview > .actions {bottom:  auto; top:  0px;}
}

@media (max-width: 810px) {
  /*.columns > .column {width: 100%;}*/
  .app-configurations-preview {order: -1; overflow: hidden; padding-bottom: 0;}
  .app-configurations-preview {position: relative;}
  /*.app-configurations-preview > .actions {position: absolute; bottom:  0; left:  0; right: 0; padding-top: 10px; padding-left: 15px; padding-right: 15px; background: #fff; z-index: 99;}*/
  .app-configurations-preview > .actions {display: none;}
  .app-configurations> .actions {display: block;}
}


@media (max-width: 810px) {
  .editor-wrapper {overflow: hidden; clip-path: inset(0px 0px 0px 0px);}
  .editor-wrapper > div {overflow: hidden;}
}