*{
  box-sizing: border-box;
}

.cmsFormHolder2022{
  position:relative;
  width:800px;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
  display:block;
  min-height:60vh;

  #contactSuccess{
    transform:rotateX(90deg);
    height:0px;
    transition:all 0.5s linear;

    display:flex;
    justify-content: center;
    align-items:center;


    .successHolder{
      display:inline-block;
      text-align:center;
      font-size:14px;
      text-transform:uppercase;
      letter-spacing:1px;

      h1{
        font-size:30px;
        text-align:center;
        line-height:36px;
      }

      svg{
        display:block;
        width:200px;
        height:200px;
        color:#666;
        margin-left:auto;
        margin-right:auto;
      }
    }

    &.show{
      transform:rotateX(0deg);
      width:100%;
      position:absolute;
      top:0px;
      left:0px;
      height:100%;
    }
  }
.form{
    padding:50px;
    padding-top:20px;
    padding-bottom:20px;
    width:900px;
    display:block;
    margin-left:auto;
    margin-right:auto;
    max-width:100%;

    .formSuccess{
      display:block;
      box-shadow:0px 0px 10px rgba(0,0,0,0.1);
      font-size:14px;

      background-color:#c8e6c9;
      margin-bottom:20px;

      text-align:center;
      border-radius:3px;
      height:0px;
      transform:rotateX(90deg);
      transition:all 0.5s ease-in-out;
      &.show{
        transform:rotateX(0deg);
        height:auto;
                  padding:18px;
      }
    }

    h3{
      font-size:30px;
      font-weight:200;
      line-height:40px;
      margin-bottom:0px;
      padding-bottom:10px;
    }

    small{
      padding-left:14px;
      color:#666;

      &.disclaimer{
        text-align:center;
        padding-right:14px;
        display:block;

        a{

          color:#000;
        }
      }
    }




    .errorMessage{
      display:block;
      position:fixed;
      top:60px;
      right:0px;
      z-index:99999999;
      width:0px;
      font-size:14px;
      text-align:center;
      color:#fff;
      border-radius:3px;
      margin-bottom:20px;
      background-color:#f44336;
      transition:all 0.3s ease-in-out;

      &.show{
        padding:18px;
        width:300px;

      }
    }

    .dateField, .timeField{
      cursor:pointer;

      svg, span, input{
        cursor:pointer;
      }

      label{
        //padding-left:60px;
        //padding-top:24px;
        cursor:pointer;

        input{
          display:block;
          width:100%;
          padding-top:28px;
          border:0px;
          text-align:left;
          background:transparent;
          transition:all 0.3s ease-in-out !important;
          transform-origin:center left;
        }

        span{
          font-size:13px;
          white-space:nowrap;
        }

        .dateValue, .timeValue{
          text-align:left;
          padding-top:28px;
          padding-bottom:8px;
          padding-left:60px;
          font-size:14px;
          display:block;
        }


        &:hover{
          input{
            transform:scale(1.1);
          }
        }
      }
    }

    label{
      display:block;
      position:relative;

      background-color:#fff;
      box-shadow:0px 0px 10px rgba(0,0,0,0.1);
      font-size:14px;
      width:100%;
      border-radius:3px;
      margin-bottom:20px;
      font-family:monospace;
      font-size:10px;

      &.promoCodeField{
        width:400px;
        max-width:100%;
        position:relative;
        display:block;
        margin-left:auto;
        padding-right:100px;
        button{
          position:absolute;
          right:0px;
          top:0px;
          background-color:steelblue;
          height:100%;
          border-radius:3px !important;
          color:#fff;
          padding:3px;
          line-height:16px;
          font-size:12px;
          width:100px;
        }
      }

      &.withPrefix{
        .prefix{
          display:block;
          position:absolute;
          color:#666;
          top:0px;
          left:10px;
          padding-top:20px;
          padding-left:0px;
          font-family:monospace;
          font-size:10px;


        }
        input{
          padding-left:0px;
        }
      }

      input, select{
        font-size:16px;
        padding:18px;
        width:100%;
        background-color:#fff;
        border-radius:3px; border:0px;
        border:0px;
        outline:0px;
        padding-left:60px;
        transition:border 0.3s ease-in-out;
        -webkit-appearance: none;

        &[type="date"]{
          padding-top:24px;
          padding-bottom:12px;
        }

        &.error{
          border:1px solid red;
        }
      }
      &.error{
        border:1px solid red;
      }

      small{
        display:block;
        padding:5px;
        border-top:1px solid #ececec;
        background-color:#fcfcfc;
        padding-left:20px;
      }

      textarea{
        font-size:14px;
        padding:18px;
        width:100%;
        border-radius:3px; border:0px;
        border:0px;
        outline:0px;
        height:200px;
        font-family:sans-serif;
        padding-left:60px;
        transition:border 0.3s ease-in-out;

        &.error{
          border:1px solid red;
        }
      }

      ion-icon, svg.ionicon{
        position:absolute;
        top:18px;
        cursor:pointer;
        font-size:20px;
        width:20px;
        height:20px;
        left:14px;
      }
    }

      label.checkbox{
        display:block;
        position:relative;
        background-color:transparent;
        line-height:42px;
        box-shadow:none;
        font-size:14px;
        color:#333;

        width:100%;
        border-radius:3px;
        margin-bottom:20px;
        padding-left:60px;
        cursor:pointer;

        .checkboxText{
          font-weight:bold;
          i{
            display:block;
            font-weight:normal;
          } 
        } 

        input{

          width:24px;
          height:24px;
          //box-shadow:0px 0px 10px rgba(0,0,0,0.2);
          border-radius:3px;
          border:0px;
          outline:0px;
          background-color:#fff;
          cursor:pointer;
          padding-left:60px;
          position:absolute;
          top:6px;
          left:12px;
          -webkit-appearance: auto;



        }
        &.error{
          //border:1px solid red;
          color:red;
          border:0px;
        }


    }

    div.error{
      border:1px solid red;
    }

    button[type='submit']{
      display:block;
      color:#fff;
      background-color:#4caf50;
      border:0px;
      border-radius:3px;
      padding:14px;
      padding-right:20px;
      outline:none;
      text-align:left;
      font-size:14px;
      text-transform: uppercase;
      letter-spacing:2px;
      cursor:pointer;
      position:relative;
      padding-left:50px;
      margin-left:auto;
      transition:transform 0.3s ease-in-out;

      &:disabled{
        background-color:#ccc;
        cursor:default;

        &:hover{
          transform:none;
        }
      }

      &:hover{
        transform:scale(1.1);
      }

      ion-icon, svg.ionicon{
        position:absolute;
        top:14px;
        cursor:pointer;
        font-size:20px;
        width:20px;
        height:20px;
        left:14px;
      }

      &.rightIcon{
        padding-right:50px;
        padding-left:20px;
        margin-left:auto;
        display:block !important;
        width:fit-content;
        width:-webkit-fit-content;

        ion-icon, svg.ionicon{
          left:auto;
          right:14px;
        }
      }

    }

  }

  .checkboxHolder{
    padding-top:50px;
    label{
      margin-bottom:0px !important;
      border-bottom:1px solid #ececec;

    }
  }

  .checkboxLabel{
    span{
      opacity:1 !important;
      top:20px !important;
      text-transform:none !important;
      font-weight:bold !important;
      font-size:14px !important;

    }
  }

button[data-formSubmit]{
  display:block;
  color:#fff;
  background-color:#4caf50;
  border:0px;
  border-radius:3px;
  padding:14px;
  padding-right:20px;
  outline:none;
  text-align:left;
  font-size:14px;
  text-transform: uppercase;
  letter-spacing:2px;
  cursor:pointer;
  position:relative;
  padding-left:50px;
  margin-left:auto;
  transition:transform 0.3s ease-in-out;

  &:hover{
    transform:scale(1.1);
  }

  ion-icon, svg.ionicon{
    position:absolute;
    top:14px;
    cursor:pointer;
    font-size:20px;
    width:20px;
    height:20px;
    left:14px;
  }

}

.cmsForm{
  //transition:all 0.5s ease-in-out;
  overflow:hidden;
  .formSuccess{
    height:0px;
    transition:all 0.5s ease-in-out;
    transform:rotateX(90deg);

    &.show{
      transform:rotateX(0deg);
      height:auto;
    }
  }

  label{

    &.checkbox{
      padding-top:0px;
      padding-bottom:0px;
      span{
        opacity:0;
        transition:opacity 0.5s ease-in-out;
        position:absolute;
        left:60px;
        top:1px;
        padding-top:6px;
        font-size:10px;
        width:100%;
        width:calc(100% - 61px);
        color:#666;
        text-transform:uppercase;
      }
    }

    .requiredLabel{
      color:red;
      font-weight:bold;
      display:inline-block;
    }

    input, textarea{
      transition:padding 0.3s ease-in-out !important;
    }



    &.withLabel{

      &.large{
        span{
          font-size:1.3em;
        }
      }
      span{
        opacity:1;
        background-color:#fff;
      }
      input[type="text"], textarea,select{
        padding-top:26px !important;
      }
    }
  }



  &.hide{
    transform:rotateX(90deg);
  }
}

.datePicker, .timePicker{
  position:fixed;
  z-index:99999999;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color:rgba(255,255,255,0.2);
  display:flex;
  justify-content: center;
  align-items:center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:opacity 0.3s ease-in-out;


  &.hide{
    opacity:0;
  }


  .datePickerHolder, .timePickerHolder{
      width:600px;
      max-width:96%;
      display:inline-block;
      background-color:#fff;
      border-radius:20px;
      border:1px solid #ececec;
      padding:20px;
      box-shadow:0px 6px 12px rgba(0,0,0,0.3);

      .datePickerMonth, .datePickerYear{
        border:0px;
        font-size:20px;
        cursor:pointer;
      }
      .popupSelect_toggle{
        font-size:20px;
        line-height:20px;
        opacity:1;
        display: inline-block;
        width: 120px;
        padding:6px;

        &.datePickerYearSelect_toggle{
          float:right;
          text-align:right;
          width:60px;

        }
      }




      @media screen and (max-width:450px){
        .datePickerMonth, .datePickerYear,   .popupSelect_toggle
        {
          font-size:16px;
        }
      }

      .inputHolder{
        text-align:center;
        vertical-align:top;

        button{
          margin:5px;
          margin-left:auto;
          display:block !important;
          margin-right:auto;
          padding:10px;
          padding-left:20px;
          padding-right:20px;

          display:block;
          color:#fff;
          background-color:#4caf50;
          border:0px;
          border-radius:3px;
          padding:14px;
          padding-right:20px;
          padding-left:20px;
          outline:none;
          text-align:left;
          font-size:14px; 
          text-transform: uppercase;
          letter-spacing:2px;
          cursor:pointer;
          position:relative; 
          margin-left:auto;
          transition:transform 0.3s ease-in-out;

    
          &:hover{
            transform:scale(1.1);
          }
    


        }

      }



      .hourSelect, .minuteSelect, .timePickerHourSelect_toggle, .timePickerMinuteSelect_toggle{
        display:inline-block;
        font-size:30px;
        padding:10px;
        margin:4px;
        width:70px;
        border:1px solid #ccc;
        line-height:45px;
        background-color:#fff;
        outline:none;
        -webkit-appearance: none;
        border-radius:6px;

      }

      .separator{
        display:inline-block;
        padding:10px;
        font-size:20px;
        line-height:50px;
        font-weight:bold;
        vertical-align:top;
      }

      .suffixSelect{
        width:60px;
        margin-left:10px;
        display:inline-block;
        vertical-align:top;
        margin-top:5px;

        .option{
          height:30px;
          line-height:28px;
          border-radius:4px;
          width:60px;
          margin-bottom:5px;
          text-align:center;
          cursor:pointer;
          border:1px solid #ccc;
          display:inline-block;

          &.selected{
            background: #0575E6;  /* fallback for old browsers */
            background: -webkit-linear-gradient(to bottom right, #021B79, #0575E6);  /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to bottom right, #021B79, #0575E6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            box-shadow:0px 5px 10px rgba(0,0,0,0.5);
            text-shadow:inset 1px 1px 0px rgba(0,0,0,0.2);
            color:#fff;
            border:1px solid #0575E6;
          }
        }

      }



      .clearfix{
        clear:both;
      }

      .datePickerYear{
        float:right;
      }

      .datePickerMonth{
        float:left;
      }

      .datePickerPrevious, .datePickerNext{
        border:0px;
        background:0px;
        width:40px;
        cursor:pointer;
        position:relative;
        top:-6px;
        height:40px;
        text-align:center;
        border-radius:20px;
        font-size:20px;
        overflow:hidden;

        svg{
          width:20px;
        }
      }

      .datePickerPrevious{
          float:left;
          margin-right:20px;
      }

      .datePickerNext{
        float:right;
        margin-left:20px;
      }

      .datePickerCalendarHolder{

      }

      h3{
        text-align:center;
        margin-top:0px;
        padding-top:0px;
        font-size:18px;
        line-height:22px;
        border-bottom:1px solid #ececec;
        margin-bottom:15px;
        padding-bottom:10px;

      }



      .datePickerCalendar{
        display:grid;
        grid-template-columns:repeat(7,1fr);
        padding:1px;
        background-color:#f5f5f5;
        border-radius:10px;
        grid-column-gap:1px;
        grid-row-gap:1px;
        margin-top:5px;



        .datePickerDateHeader{
          text-align:center;
          text-transform:uppercase;
          font-size:12px;
          font-weight:normal;
          padding:4px;
          color:#666;

        }

        .datePickerDate{
          padding:8px;
          font-size:18px;
          aspect-ratio:1/1;


          @media screen and (max-width:450px){
            &{
              font-size:16px;
              text-align:center;
              display:flex;
              justify-content: center;
              align-items: center;
            }
          }

          &.datePickerDateOption{
            background-color:#fff;
            cursor:pointer;
            //transition:all 0.3s ease-in-out;
            z-index:3;

            &:hover, &.selected{
              background: #0575E6;  /* fallback for old browsers */
              background: -webkit-linear-gradient(to bottom right, #021B79, #0575E6);  /* Chrome 10-25, Safari 5.1-6 */
              background: linear-gradient(to bottom right, #021B79, #0575E6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
              box-shadow:0px 5px 10px rgba(0,0,0,0.5);
              text-shadow:inset 1px 1px 0px rgba(0,0,0,0.2);
              color:#fff;
              font-weight:bold;
              z-index:4;
              border-radius:6px;
              transform:scale(1.1);
            }

            &.inactive{
              background:transparent;
              cursor:default;
              color:#ccc;

              &:hover{
                background:transparent;
                box-shadow:none;
                font-weight:normal;
                color:#ccc;
              }
            }
          }

        }
      }
  }
}



.imageField{
  box-shadow:0px 0px 10px rgba(0,0,0,0.2);
  border-radius:3px;
  border:0px;
  outline:0px;
  background-color:#fff;
  padding:10px;
  padding-bottom:0px;
  text-align:center;
  margin-bottom:20px;

  .helpText{
    display:block;
    color:#666;
    font-size:14px;
    text-align:center;
    padding:5px;

    .ionicon{
      font-size:16px;
      width:22px;
      height:22px;
      position:relative;
      top:6px;
      display:inline-block;
    }
  }

  .imagePreviewHolder{
    display:block;
    justify-content: center;
    padding-bottom:10px;

    margin-top:10px;

    &.multiple{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      grid-column-gap:8px;
      grid-row-gap:8px;
    }


    .imagePreview{
      position:relative;
      cursor:pointer;
      display:flex;
      justify-content: center;
      align-items:center;
      background-color:#ececec;


      img, canvas{
        max-width:300px;
        max-height:150px;
        border-radius:3px;
        overflow:hidden;
        margin-top:0px !important;
      }

/*
        &::after{
          content:'REMOVE';
          color:red;
          font-weight:bold;
          font-size:13px;
          letter-spacing:1px;
          position:absolute;
          top:0px;
          left:0px;
          width:100%;
          height:100%;
          display:flex;
          justify-content: center;
          align-items:center;
          background:rgba(255,255,255,0.7);
        }
*/

        .remove{
          position:absolute;
          top:0px;
          right:0px;
          width:36px;
          height:36px;
          display:flex;
          justify-content: center;
          align-items:center; 
          border-bottom-left-radius:5px;
          color:#fff;
          background-color:#b71c1c;
          cursor:pointer;
        }
      

      img{
        max-width:100%;
        max-height:100%;
      }
    }
  }

  .imageUploadLoading{
    display:block;
    width:100%;
    height:16px;
    background-color:#fcfcfc;
    position:relative;
    top:-4px;
    border-radius:3px;
    overflow:hidden;





    span{
      display:block;
      height:16px;
      position:absolute;
      left:0px;
      top:0px;
      width:0px;
      background: #0575E6;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to bottom right, #021B79, #0575E6);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to bottom right, #021B79, #0575E6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      animation:imageLoader 1.5s linear infinite;
    }
  }

  button{
    width:100%;
    text-align:center;
    display:block;
    color:#fff;
    background-color:#0277bd;
    border:0px;
    border-radius:3px;
    padding:14px;
    padding-right:20px;
    outline:none;
    text-align:center;
    font-size:14px;
    text-transform: uppercase;
    letter-spacing:2px;
    cursor:pointer;
    position:relative;
    padding-left:50px;
    margin-left:auto;
    transition:transform 0.3s ease-in-out;

    &:hover{
      transform:scale(1.1);
    }

    &:disabled{
      background-color:#ccc;
      cursor:default;

      &:hover{
        transform:none;
      }
    }

    svg{
      color:#fff;
      position:absolute;
      top:14px;
      width:20px;
      height:20px;
      cursor:pointer;
      font-size:20px;
      left:14px;
    }
  }
}

select[multiple]{
  option{
    padding:20px;
    border-bottom:1px solid #ececec;
  }

}

button.tox-tbtn{
  color:#000 !important;
  text-align:center !important;
  span{

    opacity:1 !important;
  }
}

.tox-tbtn__select-chevron{
  display:inline-block !important;
  position:relative !important;
  top:5px !important;
}

@media screen and (max-width:500px){
  .form{
    padding:10px;
    padding-top:10px;
  }
}
}

.cmsLoader{
         transform:rotateX(90deg);
         height:0px;
         transition:all 0.5s linear;
         border-radius:3px;

         display:flex;
         justify-content: center;
         align-items:center;


         .loaderHolder{
           display:inline-block;
           text-align:center;
           font-size:14px;
           text-transform:uppercase;
           letter-spacing:1px;
         }

         &.show{
           transform:rotateX(0deg);
           width:100%;
           position:absolute;
           top:0px;
           left:0px;
           height:100% !important;
         }

         .sk-folding-cube {
            margin: 40px auto;
            width: 80px;
            height: 80px;
            position: relative;
            -webkit-transform: rotateZ(45deg);
                    transform: rotateZ(45deg);
          }

          .sk-folding-cube .sk-cube {
            float: left;
            width: 50%;
            height: 50%;
            position: relative;
            -webkit-transform: scale(1.1);
                -ms-transform: scale(1.1);
                    transform: scale(1.1);
          }
          .sk-folding-cube .sk-cube:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #333;
            -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
                    animation: sk-foldCubeAngle 2.4s infinite linear both;
            -webkit-transform-origin: 100% 100%;
                -ms-transform-origin: 100% 100%;
                    transform-origin: 100% 100%;
          }
          .sk-folding-cube .sk-cube2 {
            -webkit-transform: scale(1.1) rotateZ(90deg);
                    transform: scale(1.1) rotateZ(90deg);
          }
          .sk-folding-cube .sk-cube3 {
            -webkit-transform: scale(1.1) rotateZ(180deg);
                    transform: scale(1.1) rotateZ(180deg);
          }
          .sk-folding-cube .sk-cube4 {
            -webkit-transform: scale(1.1) rotateZ(270deg);
                    transform: scale(1.1) rotateZ(270deg);
          }
          .sk-folding-cube .sk-cube2:before {
            -webkit-animation-delay: 0.3s;
                    animation-delay: 0.3s;
          }
          .sk-folding-cube .sk-cube3:before {
            -webkit-animation-delay: 0.6s;
                    animation-delay: 0.6s;
          }
          .sk-folding-cube .sk-cube4:before {
            -webkit-animation-delay: 0.9s;
                    animation-delay: 0.9s;
          }
          @-webkit-keyframes sk-foldCubeAngle {
            0%, 10% {
              -webkit-transform: perspective(140px) rotateX(-180deg);
                      transform: perspective(140px) rotateX(-180deg);
              opacity: 0;
            } 25%, 75% {
              -webkit-transform: perspective(140px) rotateX(0deg);
                      transform: perspective(140px) rotateX(0deg);
              opacity: 1;
            } 90%, 100% {
              -webkit-transform: perspective(140px) rotateY(180deg);
                      transform: perspective(140px) rotateY(180deg);
              opacity: 0;
            }
          }

          @keyframes sk-foldCubeAngle {
            0%, 10% {
              -webkit-transform: perspective(140px) rotateX(-180deg);
                      transform: perspective(140px) rotateX(-180deg);
              opacity: 0;
            } 25%, 75% {
              -webkit-transform: perspective(140px) rotateX(0deg);
                      transform: perspective(140px) rotateX(0deg);
              opacity: 1;
            } 90%, 100% {
              -webkit-transform: perspective(140px) rotateY(180deg);
                      transform: perspective(140px) rotateY(180deg);
              opacity: 0;
            }
          }

      &.show{
        transform:rotateX(0deg);
        height:100%;
      }

}

@keyframes imageLoader{
  0%{
    width:0px;
  }

  100%{
    width:100%;
  }
}

  .form.v2 .cmsForm{
    label.v2{
      background-color:transparent;
      padding-left:0px !important;
      padding-top:7px !important;
      box-shadow:none !important;

      svg{
        display:none;
        padding-left:0px;
      }

      span{
        text-transform:none;
        left:0px;
        font-size:16px;
        top:0px;
        position:relative;
        color:rgb(48,49,61);
        line-height:18px; 
        font-family:  "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
      }

      input{ 
        border:1px solid #ececec;
        background-color:#fff;
        font-size:15px;
        position:relative;
        margin-bottom:4px;
        font-weight:400;
        line-height:18px; 
        margin:0px;
        padding:12px;
        padding-top:12px !important;
        border-radius:5px; 
        box-shadow:0px 1px 1px rgba(0,0,0,0.03);
      }
      
    }
  }