.bg1{
    background-image: -webkit-gradient(linear, left top, right bottom, from(#ffedd5));
    background-image: linear-gradient(to bottom right, #ffedd5);
}
.bg2{
    background-image: -webkit-gradient(linear, left top, right bottom, from(#d1fae5));
    background-image: linear-gradient(to bottom right, #d1fae5);
}
.bg3{
    background-image: -webkit-gradient(linear, left top, right bottom, from(#eff6ff));
    background-image: linear-gradient(to bottom right, #eff6ff);
}

.bg4{
    background-image: -webkit-gradient(linear, left top, right bottom, from(#faf5ff));
    background-image: linear-gradient(to bottom right, #faf5ff);
}

.bg5{
    background-image: -webkit-gradient(linear, left top, right bottom, from(#ffe4e6));
    background-image: linear-gradient(to bottom right, #ffe4e6);
}
.bg6{
    background-image: -webkit-gradient(linear, left top, right bottom, from(#ffedd5));
    background-image: linear-gradient(to bottom right, #ffedd5);
}
.bg7{
    background-image: -webkit-gradient(linear, left top, right bottom, from(#f0fdfa));
    background-image: linear-gradient(to bottom right, #f0fdfa);
}
.autogrid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row
}

.autogrid>* {
    margin-bottom: 8px;
    margin-right: 8px;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.bg1 *,.bg2 *,.bg3 *,.bg4 *,.bg5 *,.bg6 *,.bg7 *{color:#333}

.scrollable {
    display: block!important;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.scrollable>* {
    overflow: hidden;
    display: inline-block!important;
    margin-right: 8px;
    float: none !important;
}


.columns2,.columns3,.columns4,.columns5,.columns6,[data-col]{
     display: -ms-grid!important;
  display: grid!important;
      gap: 10px;
}
.columns2 img,.columns3 img,.columns4 img,.columns5 img,.columns6 img,[data-col] img,
.columns2 iframe,.columns3 iframe,.columns4 iframe,.columns5 iframe,.columns6 iframe,[data-col] iframe,
.columns2 audio,.columns3 audio,.columns4 audio,.columns5 audio,.columns6 audio,[data-col] audio,
.columns2 video,.columns3 video,.columns4 video,.columns5 video,.columns6 video,[data-col] video
{
    width: 100%;
}

.columns2>*,.columns3>*,.columns4>*,.columns5>*,.columns6>*,
[data-col="2"]>*,[data-col="3"]>*,[data-col="4"]>*,[data-col="5"]>*,[data-col="6"]>*{
    margin: 0!important;
}

.columns2,[data-col="2"]{
 
    -ms-grid-columns: 50% 50%;
    grid-template-columns: 50% 50%;
    grid-auto-columns: 150px;
}
.columns4,[data-col="4"]{
  
    -ms-grid-columns: 25% 25% 25% 25%;
    grid-template-columns: 25% 25% 25% 25%;
    grid-auto-columns: 150px;
}

.columns3,[data-col="3"]{
  
    -ms-grid-columns: 33% 33% 33%;
    grid-template-columns: 33% 33% 33%;
    grid-auto-columns: 150px;
}

.columns5,[data-col="5"]{
  
    -ms-grid-columns: 12.5% 12.5% 12.5% 12.5% 12.5%;
    grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5%;
    grid-auto-columns: 150px;
}

.columns6,[data-col="6"]{
  
    -ms-grid-columns: 8% 8% 8% 8% 8% 8%;
    grid-template-columns: 8% 8% 8% 8% 8% 8%;
    grid-auto-columns: 150px;
}
.iphone img,.ios img,
.iphone .banner,.ios .banner{
  border-radius:8px;
  overflow: hidden;
}

.iphone .box-image img,.ios .box-image img{
  border-radius:0;
  overflow: hidden;
}
.iphone .box-image,.iphone .box-image{
  border-radius:8px 8px 0 0;
  overflow: hidden;
}

.iphone input,.ios select,.ios textarea{
  border-radius:16px; 
}



.iphone .viewmoretext,.ios .viewmoretext,
.iphone button,.ios button,
.iphone .button,.ios .button,
.iphone .btn,.ios .btn{
  border-radius:32px;
  overflow: hidden;
}


@media  (max-width: 1023px) {
        .modal-open .modal:not(.bootbox){
            overflow: hidden!important;
        }
        .modal:not(.bootbox) .modal-dialog{
            height: 98%;
    display: flex;
    overflow: hidden;
        }
        .modal.full:not(.bootbox) .modal-dialog{
          height: 100%;
          width: 100%;
        }
         .modal.full-half:not(.bootbox) .modal-dialog{
          height: 60%;
                 margin-top: 40%;
        }
        .modal.full-half:not(.bootbox) .modal-dialog{
          height: 60%;
                 margin-top: 40%;
        }
        .modal.sheetbottom:not(.bootbox) .modal-dialog {
            width: 100%;
            height: 60%;
            margin-top: 72%;
            margin-left: 0;
        }
        .sheetbottom.h75 .modal-dialog {
            height: 80% !important;
          margin-top: 36%!important;
        }
        .modal:not(.bootbox) .modal-dialog .modal-content{
              height: 100%;
    display: flex;
    overflow: hidden;
    flex-direction: column;
width: 100%;
        }
        .modal:not(.bootbox) .modal-dialog .modal-body{
          flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
        }
        body.modal-open{
          overflow: hidden;
        }
   .modal-footer{
    display: flex;
            justify-content: space-around;
      }
}