/* ------------------------------------------------------------ *\

Author : Jayant
Version : v5.1

- two Column form layout using colTwo class 
- brochureForm class for brochure form two column layout

Form theme classes
  - defaultTheme
  - blackTheme
  - whiteTheme
  - materialTheme

Footer theme classes
  - dark-theme
  - white-theme
  - grey-theme

arbMkt class for arabic market

fullDOB class for DOB field if form is rendered in half screen


\* ------------------------------------------------------------ */




/* ------------------------------------------------------------ *\
     Fonts
\* ------------------------------------------------------------ */
 
@font-face {
    font-family: 'EFCircular';
    src: url('EFcircular/EFCircular-Book.eot');
    src: url('EFcircular/EFCircular-Book.eot?#iefix') format('embedded-opentype'), url('EFcircular/EFCircular-Book.woff') format('woff'), url('EFcircular/EFCircular-Book.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
   }
  
   
   @font-face {
    font-family: 'EFCircular';
    src: url('EFcircular/EFCircular-Medium.eot');
    src: url('EFcircular/EFCircular-Medium.eot?#iefix') format("embedded-opentype"), url('EFcircular/EFCircular-Medium.woff') format("woff"), url('EFcircular/EFCircular-Medium.woff2') format("woff2");
    font-weight: normal;
    font-style: normal;
   }
   
   
   @font-face {
    font-family: 'EFCircular';
    src: url('EFcircular/EFCircular-Bold.eot');
    src: url('EFcircular/EFCircular-Bold.eot?#iefix') format("embedded-opentype"), url('EFcircular/EFCircular-Bold.woff') format("woff"), url('EFcircular/EFCircular-Bold.woff2') format("woff2");
    font-weight: bold;
    font-style: normal;
   }
   
   
   @font-face {
    font-family: 'EFCircular';
    src: url('EFcircular/EFCircular-Black.eot');
    src: url('EFcircular/EFCircular-Black.eot?#iefix') format("embedded-opentype"), url('EFcircular/EFCircular-Black.woff') format("woff"), url('EFcircular/EFCircular-Black.woff2') format("woff2");
    font-weight: 900;
    font-style: normal;
   }

/* ------------------------------------------------------------ *\
     Basic Setup
\* ------------------------------------------------------------ */
abbr[title]{
  text-decoration: none;
}
   *,
   :after,
   :before {
     box-sizing: border-box;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
     margin: 0;
     outline: 0 none;
     padding: 0;
   }
   
   *:focus {
     outline: 0;
   }

   
.defaultTheme,
.blackTheme,
.dark-theme,
.white-theme,
.grey-theme{
    font-family: 'EFCircular', Helvetica, Arial;
}

/* ------------------------------------------------------------ *\
    Footer
\* ------------------------------------------------------------ */

.dark-theme{
    width: 100%;
    float: left;
    margin-top: 0;
    padding:30px 0 0;
    position: relative;
    z-index: 3;
    background: rgba(0,0,0,1);
} 

.white-theme{
    width: 100%;
    float: left;
    margin-top: 0;
    padding:30px 0 0;
    position: relative;
    z-index: 3;
    background: #fff;
} 

.grey-theme{
    width: 100%;
    float: left;
    margin-top: 0;
    padding:30px 0 0;
    position: relative;
    z-index: 3;
    background: #e4eaee;
}

.dark-theme .darkLogo{
    display: none;
}

.dark-theme .whiteLogo
{
    display: inline-block;
}

.grey-theme .darkLogo,
.white-theme .darkLogo{
    display: inline-block;
}

.grey-theme .whiteLogo,
.white-theme .whiteLogo{
    display: none;
}

.footer-container{
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
  }
  
  
  .footer-row{
    width: 100%;
    float: left;
    padding:15px 0;
   
  }
  
  .foot-logo{
    width: auto;
    float: left;
  }
  
  .foot-logo img{
    width: 55px;
    height: 32px;
    float: left;
   
  }
  
  .foot-country{
    width: auto;
    float: left;
  }
  
  .foot-country img{
    width: 17px;
    height: 10px;
    float: left;
    margin-top: 4px;
  }

  .foot-country img.globalFlag{
    width: 15px;
    height: 15px;
    float: left;
    margin-top: 1px;
  }
  
  .foot-country span{
    width: auto;
    float: left;
    padding-left: 10px;
    font-family: 'EFCircular', Helvetica, Arial;
    font-size: 12px;
    font-weight: 300;
    
  }

  .dark-theme .foot-country span{
    color: #fff;
  }

  .grey-theme .foot-country span,
  .white-theme .foot-country span{
      color:#191919;
  }
  
  .foot-privacy{
    width: 84%;
    float: right;
  }
  
  .foot-privacy ul{
    margin: 0;
    padding: 0;
    list-style: none;
    float: right;
  }
  
  .foot-privacy ul li{
    width: auto;
    float: left;
    padding-left: 20px;
  }

  .foot-pl50 ul li{
      padding-left: 50px;
  }
  
  .foot-privacy ul li a{
    width: 100%;
    float: left;
    text-align: right;
    font-size: 12px;
    font-family: 'EFCircular', Helvetica, Arial;
    font-weight: 300;
   
  }

.foot-privacy p.foot-addr{
    width: 100%;
    float: left;
    text-align: right;
    font-size: 12px;
    font-family: 'EFCircular', Helvetica, Arial;
    font-weight: 300;
    padding-top: 10px;
}

  .dark-theme .foot-privacy ul li a,
  .dark-theme .foot-privacy p.foot-addr{
    color: #fff;
  }

  .white-theme .foot-privacy ul li a,
  .grey-theme .foot-privacy ul li a,
  .white-theme .foot-privacy p.foot-addr,
  .grey-theme .foot-privacy p.foot-addr{
    color:#191919;
}
  
  .foot-p13{
    padding-top: 13px;
  }

  .cnFoot img{
      padding-right: 10px;
      float: left;
  }
  
  
  @media all and (max-width: 768px) {
    

    .footer-container{
        width: 100%;
       float: left;
       padding: 50px 24px;
     }
  
    .footer-row{
      padding: 0;
    }
  
    .foot-top{
      padding-bottom: 50px;
    }
    
    .foot-logo{
      width: 100%;
      float: left;
      text-align: center;
      margin-bottom: 20px;
    }
  
    .foot-logo img{
      float: none;
    }
  
    .foot-country{
      width: 100%;
      float: left;
      padding-bottom: 30px;
    }
  
    .foot-privacy{
      width: 100%;
      float: left;
    }
  
    .foot-privacy ul{
        width: 100%;
      float: left;
    }
  
    .foot-privacy ul li{
      width: 100%;
      float: left;
      padding-left: 0;
      padding-bottom: 24px;
    }
  
    .foot-country span{
      font-size: 14px;
    }
  
    .foot-privacy ul li a{
      text-align: left;
      font-size: 14px;
    }
  
    .foot-p13{
      padding-top: 0;
    }
  }

  @media all and (min-width:769px) and (max-width: 999px) {
    .footer-container{
      width: 100%;
     float: left;
     padding: 0 24px;
   }
   
  }

  @media all and (min-width:1000px) and (max-width: 1200px) {
    .footer-container{
        max-width: 960px;
    }
   
  }
  
  @media all and (min-width: 1201px) and (max-width:1299px) {
    .footer-container{
      max-width: 1100px;
    }
    
   }


/* ------------------------------------------------------------ *\
     Form X Section
\* ------------------------------------------------------------ */
  .ef-form-group,
  .ef-form-control {
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    float: left;
    padding: 0 0 15px 0;
    position: relative;
  }

  .ef-form-label {
    width: 100%;
    margin-right: 6px;
    line-height: 28px;
    vertical-align: middle;
    color: #000;
    font-size: 14px;
    font-family: 'EFCircular', Helvetica, Arial;
    font-weight: 300;
    float: left;
  }

  .ef-form-label label{
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    color: inherit;
    line-height: inherit;
  }

  .ef-form-deliveryPreference-wrapper p.ef-form-label {
    width: 100%;
    margin-right: 6px;
    line-height: 28px;
    vertical-align: middle;
    color: #000;
    font-size: 14px;
    font-family: 'EFCircular', Helvetica, Arial;
    font-weight: 300;
    float: left;
    text-align: left;
  }
  
  .ef-form-richtext-wrapper{
   
    font-size: 14px;
    font-family: 'EFCircular', Helvetica, Arial;
    font-weight: 300;
  }
  
  .ef-form-richtext-wrapper a{
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-decoration: underline;
    font-family: inherit;
  }
  
  
  
  
  .ef-form-label span, 
  .ef-form-control label span, 
  .ef-form-group label span,
  .ef-form-control label span a,
  .ef-form-group label span a{
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    color: inherit;
  }
  
  
  
  
  label[for="campaign-birthDate"],
  label[for="campaign-qq-lang-birthDate"],
  label[for="campaign-countryCode"],
  label[for="campaign-userSelectedSourceCode"]{
    display: inline-block;
  }
  
  .ef-form-control label span a,
  .ef-form-group label span a{
    text-decoration: underline;
  }
  
  .ef-form-control label{
    font-size: 14px;
    line-height: 28px;
    vertical-align: middle;
    font-family: 'EFCircular', Helvetica, Arial;
    font-weight: 300;
  }
  
  .ef-form-group input{
    width: 100%;
    float: left;
    padding: 6px 12px;
      font-size: 14px;
      color: #191919;
      background-color: #fff;
      border-radius: 4px;
      height: 48px;
      font-family: 'EFCircular', Helvetica, Arial;
      font-weight: 300;
  }

  .ef-form-group textarea,
  .ef-form-control textarea{
    width: 100%;
    float: left;
    padding: 6px 12px;
      font-size: 14px;
      color: #191919;
      background-color: #fff;
      border-radius: 4px;
      font-family: 'EFCircular', Helvetica, Arial;
      font-weight: 300;
  }
  
  .ef-form-group select {
    width: 100%;
    display: block;
    float: left;
    padding: 6px 12px;
    font-size: 14px;
    color: #191919;
    background-image: none;
    border-radius: 4px;
    height: 48px;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #fff;
    background: rgba(255, 255, 255, 1) url('chevronDown.svg') no-repeat scroll 98% center;
    font-family: 'EFCircular', Helvetica, Arial;
    font-weight: 300;
    background-size: 16px;
  }
  
  .ef-form-birthDate-wrapper{
    padding: 0 0 15px 0;
    margin: 0;
    justify-content: initial;
    flex-wrap: initial;
    width: 100%;
    float: left;
  }
  
  .ef-form-birthDate-wrapper select{
    width: 15%;
    float: left;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 14px;
    color: #191919;
    height: 48px;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #fff;
    background: rgba(255, 255, 255, 1) url('chevronDown.svg') no-repeat scroll 98% center;
    font-family: 'EFCircular', Helvetica, Arial;
    font-weight: 300;
    background-size: 12px;
    margin-right: 10px;
  }

  .fullDOB .ef-form-birthDate-wrapper select{
    width: 30%;
  }
  
  .ef-form-input-group-list{
    padding: 0;
  }
  
  .ef-form-group.-inline>* {
    margin-left: 0;
    width: 50%;
    float: left;
    padding-right: 0;
  }
  
  .label-text{
    padding-left: 15px;
  }
  
  .ef-boolean__label {
    padding: 0;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: 20px;
    cursor: pointer;
    width: auto;
  }
  
  
  .ef-boolean__element {
    position: relative;
    width: 24px;
    height: 24px;
    float: left;
    background-color: #fff;
    transition: background-color 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    overflow: hidden;
  }
  .ef-boolean__element:before {
    content: "";
    width: 12px;
    height: 12px;
    z-index: 1;
    display: block;
    position: absolute;
      top: 5px;
      left: 5px;
  }
  .ef-boolean__element:after {
    content: "";
    position: absolute;
    top: 0;
    left: -20%;
    width: 140%;
    height: 100%;
    z-index: 0;
    display: block;
    border-radius: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
    box-shadow: inset 0 12px 24px hsla(0, 0%, 100%, 0.2);
  }
  .ef-boolean__element.-checkbox {
    border-radius: 4px;
  }
 
  .ef-boolean__element.-radio {
    border-radius: 50%;
  }
 
  
  .ef-boolean__input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    margin: -1px;
    padding: 0;
    clip: rect(0 0 0 0);
    border: 0;
  }
  
  
 
  .ef-boolean__input:checked:not(:disabled):not([disabled]) ~ .-checkbox:after,
  .ef-boolean__input:checked:not(:disabled):not([disabled]) ~ .-radio:after,
  .ef-boolean__input:checked:not(:disabled):not([disabled]) ~ .-switch:after {
      opacity: 1;
  }
  .ef-boolean__input:checked ~ .-checkbox,
  .ef-boolean__input:checked ~ .-radio,
  .ef-boolean__input:checked ~ .-switch {
      box-shadow: none;
  }
 
  
  .ef-boolean__input:checked ~ .-switch:before {
      transform: translateX(32px);
      background-color: #fff;
  }
  .ef-boolean__input:disabled ~ .ef-boolean__element,
  .ef-boolean__input[disabled] ~ .ef-boolean__element {
      pointer-events: none;
  }
  .ef-boolean__input:disabled ~ .ef-boolean__label,
  .ef-boolean__input[disabled] ~ .ef-boolean__label {
      color: #000;
      pointer-events: none;
  }
  .ef-boolean__input:disabled ~ .-checkbox,
  .ef-boolean__input:disabled ~ .-radio,
  .ef-boolean__input:disabled ~ .-switch,
  .ef-boolean__input[disabled] ~ .-checkbox,
  .ef-boolean__input[disabled] ~ .-radio,
  .ef-boolean__input[disabled] ~ .-switch {
      background-color: #fff;
      border-color: #fff;
      box-shadow: none;
  }
  .ef-boolean__input:disabled ~ .-switch:before,
  .ef-boolean__input[disabled] ~ .-switch:before {
      opacity: 0.3;
  }
  .ef-boolean__input:disabled:checked ~ .-radio:before,
  .ef-boolean__input[disabled]:checked ~ .-radio:before {
      background-color: rgba(var(--color-text, #191919), 0.15);
  }
  .ef-boolean__input:disabled:checked ~ .-checkbox:before,
  .ef-boolean__input[disabled]:checked ~ .-checkbox:before {
      background-image: url('https://cdn.ef.design/libs/web-ui/latest/svg/icons/check--disabled.svg');
      background-size: 16px;
      background-repeat: no-repeat;
      background-position: 50%;
  }
  .ef-boolean__input:disabled:checked ~ .-switch:before,
  .ef-boolean__input[disabled]:checked ~ .-switch:before {
      transform: translateX(30px);
      background-color: var(--color-text--disabled, #999);
  }
  .ef-boolean__input.-focus ~ .-checkbox,
  .ef-boolean__input.-focus ~ .-radio,
  .ef-boolean__input.-focus ~ .-switch,
  .ef-boolean__input:focus ~ .-checkbox,
  .ef-boolean__input:focus ~ .-radio,
  .ef-boolean__input:focus ~ .-switch {
      border-color: var(--color-ui-accent, #009eeb);
      box-shadow: var(--focus--box-shadow);
      transition: box-shadow 0.15s ease;
  }
  
  .submitArea {
    width: 100%;
    float: left;
    text-align: left;
    padding-top: 15px;
  }
  
  .ef-form-submit{
    width: 156px;
      padding: 13px 24px;
      border-radius: 100px;
      font-size: 15px;
      font-family: 'EFCircular', Helvetica, Arial;
      font-weight: bold;
      letter-spacing: 0;
      line-height: 22px;
      text-align: center;
      border: none;
      outline: none;
      cursor: pointer;
      transition: background 0.3s ease-in-out;
}
  
  .ef-form-control strong{
    font-family: 'EFCircular', Helvetica, Arial;
    font-weight: 300;
  }
  

  /** default theme **/
  .defaultTheme .ef-form-group input,
  .defaultTheme .ef-form-group select,
  .defaultTheme .ef-form-birthDate-wrapper select,
  .defaultTheme .ef-boolean__element,
  .defaultTheme .ef-boolean__input:checked:not(:disabled):not([disabled]) ~ .-checkbox,
  .defaultTheme .ef-boolean__input:checked:not(:disabled):not([disabled]) ~ .-radio,
  .defaultTheme .ef-boolean__input:checked:not(:disabled):not([disabled]) ~ .-switch{
    border: 1px solid rgba(25, 25, 25, 0.5);
  }

  
  .defaultTheme .ef-boolean__element{
    background: #fff;
   }

   .defaultTheme .ef-boolean__input:checked:not(:disabled):not([disabled]) ~ .-radio{
    overflow: hidden;
    position: relative;
    background-color: #fff;
   }

   .defaultTheme .ef-boolean__input:checked:not(:disabled):not([disabled]) ~ .-checkbox,
   .defaultTheme .ef-boolean__input:checked:not(:disabled):not([disabled]) ~ .-switch {
     overflow: hidden;
     position: relative;
     background-color: #009eeb;
     border: none;
    }

  

    .defaultTheme .ef-boolean__element.-checkbox:before {
        transform: scale(0);
        visibility: hidden;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        background-image: url('checkWhite.svg');
        background-size: 16px;
        background-repeat: no-repeat;
        background-position: 50%;
      }
    
     
    
    .defaultTheme .ef-boolean__input:checked ~ .-checkbox:before {
        background-image: url('checkWhite.svg');
        background-size: 16px;
        background-repeat: no-repeat;
        background-position: 50%;
    }

    .defaultTheme .ef-boolean__input:checked ~ .-checkbox:before, 
    .defaultTheme .ef-boolean__input:checked ~ .-radio:before{
       transform: scale(1);
       visibility: visible;
    }


.defaultTheme .ef-boolean__element.-radio:before {
    transform: scale(0);
    visibility: hidden;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background-color: #009eeb;
    
  }

  .defaultTheme .ef-form-group input:focus,
  .defaultTheme .ef-form-group input:hover{
      outline:none;
    border:1px solid #191919;
}

  .defaultTheme .ef-form-submit{
    background-color: #009eeb;
    color: #FFFFFF;
  }

  .defaultTheme .ef-form-submit:hover{
    opacity: 0.8;
  }

  .defaultTheme .ef-form-control label{
      color: #191919;
  }

  .defaultTheme .ef-form-richtext-wrapper{
    color:#191919;
  }

  /** black theme **/
  .blackTheme .ef-form-group input,
  .blackTheme .ef-form-group select,
  .blackTheme .ef-form-birthDate-wrapper select,
  .blackTheme .ef-boolean__element,
  .blackTheme .ef-boolean__input:checked:not(:disabled):not([disabled]) ~ .-checkbox,
  .blackTheme .ef-boolean__input:checked:not(:disabled):not([disabled]) ~ .-radio,
  .blackTheme .ef-boolean__input:checked:not(:disabled):not([disabled]) ~ .-switch{
    border: 1px solid #000;
  }

  .blackTheme .ef-boolean__element{
      background: #fff;
  }

  .blackTheme .ef-boolean__input:checked:not(:disabled):not([disabled]) ~ .-checkbox,
   .blackTheme .ef-boolean__input:checked:not(:disabled):not([disabled]) ~ .-radio,
   .blackTheme .ef-boolean__input:checked:not(:disabled):not([disabled]) ~ .-switch {
     overflow: hidden;
     position: relative;
     background-color: #fff;
    }

  .blackTheme .ef-boolean__element.-checkbox:before {
    transform: scale(0);
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background-image: url('checkBlack.svg');
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: 50%;
  }

 

.blackTheme .ef-boolean__input:checked ~ .-checkbox:before {
    background-image: url('checkBlack.svg');
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: 50%;
}

.blackTheme .ef-boolean__input:checked ~ .-checkbox:before, 
.blackTheme .ef-boolean__input:checked ~ .-radio:before{
  transform: scale(1);
  visibility: visible;
}

.blackTheme .ef-boolean__element.-radio:before {
    transform: scale(0);
    visibility: hidden;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background-color: #000;
    
  }

  
  .blackTheme .ef-form-submit{
    background-color: #191919;
    color: #FFFFFF;
  }

 
  .blackTheme .ef-form-control label{
      color: #191919;
  }

  .blackTheme .ef-form-richtext-wrapper{
    color:#191919;
  }

  /** white theme **/
  .whiteTheme .ef-form-label{
    color: #fff;
  }

  .whiteTheme .ef-form-group input,
  .whiteTheme .ef-form-group select,
  .whiteTheme .ef-form-birthDate-wrapper select,
  .whiteTheme .ef-boolean__element,
  .whiteTheme .ef-boolean__input:checked:not(:disabled):not([disabled]) ~ .-checkbox,
  .whiteTheme .ef-boolean__input:checked:not(:disabled):not([disabled]) ~ .-radio,
  .whiteTheme .ef-boolean__input:checked:not(:disabled):not([disabled]) ~ .-switch{
    border: none;
  }

  .whiteTheme .ef-boolean__element{
      background: #fff;
  }

  .whiteTheme .ef-boolean__input:checked:not(:disabled):not([disabled]) ~ .-checkbox,
   .whiteTheme .ef-boolean__input:checked:not(:disabled):not([disabled]) ~ .-radio,
   .whiteTheme .ef-boolean__input:checked:not(:disabled):not([disabled]) ~ .-switch {
     overflow: hidden;
     position: relative;
     background-color: #fff;
    }

  .whiteTheme .ef-boolean__element.-checkbox:before {
    transform: scale(0);
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background-image: url('checkBlack.svg');
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: 50%;
  }

 

.whiteTheme .ef-boolean__input:checked ~ .-checkbox:before {
    background-image: url('checkBlack.svg');
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: 50%;
}

.whiteTheme .ef-boolean__input:checked ~ .-checkbox:before, 
.whiteTheme .ef-boolean__input:checked ~ .-radio:before{
  transform: scale(1);
  visibility: visible;
}

.whiteTheme .ef-boolean__element.-radio:before {
    transform: scale(0);
    visibility: hidden;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background-color: #000;
    
  }

  
  .whiteTheme .ef-form-submit{
    background-color: #fff;
    color: #191919;
  }
 
  .whiteTheme .ef-form-control label{
      color: #fff;
  }

  .whiteTheme .ef-form-richtext-wrapper{
    color:#fff;
  }

  .whiteTheme .telArea .ef-form-invalid #campaign-mobilePhone,
  .whiteTheme .telArea .ef-form-invalid #campaign-homePhone,
  .whiteTheme .telArea .ef-form-invalid #brochure-mobilePhone,
  .whiteTheme .telArea .ef-form-invalid #brochure-homePhone{
    background:#d1334a;
  }

  /** two column layout **/
  .colTwo .ef-form-group,
  .colTwo .ef-form-control{
    margin-top: 0;
    margin-bottom: 0;
    width: 50%;
    float: left;
    padding: 0 7px 15px;
    position: relative;
  }

  .colTwo .ef-form-deliveryPreference-wrapper{
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    float: left;
    padding: 0 7px 15px;
    position: relative;
  }

  .colTwo .telArea{
    margin-top: 0;
    margin-bottom: 0;
    width: 50%;
    float: left;
    padding: 0 7px;
    position: relative;
  }

  .colTwo .ef-form-input-group-list{
    width: 100%;
    float: left;
    padding: 0;
    position: relative;
  }

  .colTwo .ef-form-phoneRadio-wrapper{
    width: 100%;
    float: left;
    padding: 0 0 1px;
    position: relative;
  }

  .colTwo .camPhone{
    width: 100%;
    float: left;
    padding: 0;
    position: relative;
  }

  .brochureForm.colTwo .ef-form-birthDate-wrapper{
    padding-bottom: 0;
  }


  .colTwo label[for="campaign-mobilePhone"],
  .colTwo label[for="campaign-homePhone"],
  .colTwo label[for="brochure-mobilePhone"],
  .colTwo label[for="brochure-homePhone"]{
    display: none;
  }

  .colTwo .ef-form-birthDate-wrapper select{
    width: 28%;
  }
  
  .colTwo .ef-form-richtext-wrapper,
  .colTwo .ef-form-checkbox-wrapper{
    width: 100%;
    float: left;
    padding: 0 15px 15px;
    position: relative;
  }

  .colTwo .submitArea{
    padding: 15px 15px 0;
  }

  abbr[title] {
    text-decoration: none !important;
}


/** material theme **/


.materialTheme .ef-form-group input{
  padding: 19px 12px 9px;
  height: 55px;
}

.materialTheme .form-placeholder{
    position: absolute;
    top:18px;
    left:10px;
    margin-right: 0;
    line-height: normal;
    transition: all 0.1s ease-in-out;
    cursor: text;
}

.materialTheme .activeLabel{
  top:7px;
  opacity: 0.7;
  font-size: 12px;
  transition: all 0.2s ease-in-out;
}

  /** validation **/
  .ef-form-validation{
    width: 100%;
    float: left;
    position: absolute;
    bottom: 5px;
  }
  
  .ef-form-validation p.ef-form-validation{
    width: 100%;
    float: left;
    color: #b90000;
      text-align: left;
      font-size: 11px;
      font-family: 'EFCircular', Helvetica, Arial;
      font-weight: 300;
      padding-bottom: 0;
      line-height: 0;
  }
  
  
  .ef-form-invalid ::placeholder{
    color: #d1334a;
    opacity: 1;
  }
  
  .ef-form-invalid .ef-form-label,
  .ef-form-invalid label[for="campaign-birthDate"],
  .ef-form-invalid label[for="campaign-qq-lang-birthDate"]{
    color: #d1334a;
  }
  
  .ef-form-invalid .ef-boolean__element{
    background: #d1334a;
  }

  .telArea .ef-form-invalid #campaign-mobilePhone,
  .telArea .ef-form-invalid #campaign-homePhone,
  .telArea .ef-form-invalid #brochure-mobilePhone,
  .telArea .ef-form-invalid #brochure-homePhone{
    border:1px solid #d1334a;
  }

  
  @media all and (max-width: 768px) {
   
    .ef-form-group,
    .ef-form-control,
    .colTwo .ef-form-group,
    .colTwo .ef-form-control,
    .colTwo .telArea{
      width: 100%;
      float: left;
      padding: 0 0 15px;
    }

    .ef-form-input-group-list{
      padding: 0;
    }

    .brochureForm.colTwo .ef-form-birthDate-wrapper{
      padding-bottom: 15px;
    }
  
    #campaign-birthDate{
      width: 100%;
      padding: 6px 12px;
      font-size: 14px;
      color: #191919;
      background-color: #fff;
      background-image: none;
      border-radius: 4px;
      height: 48px;
      font-family: 'EFCircular', Helvetica, Arial;
      font-weight: 300;
    }

    .blackTheme #campaign-birthDate{
        border: 1px solid #000;
    }
  }
  
  
  @media screen and (-webkit-min-device-pixel-ratio:0) {
    select, textarea, input {
      font-size: 16px;
    }
  }

/* ------------------------------------------------------------ *\
    arabic market
\* ------------------------------------------------------------ */
.arbMkt{
    direction: rtl;
}

.arbMkt .foot-logo{
    float: right;
}

.arbMkt .foot-privacy{
    float: left;
}

.arbMkt .foot-privacy ul{
    float: left;
}



.arbMkt .foot-privacy ul li{
    float: right;
    padding-left: 0;
    padding-right: 20px;
}

.arbMkt .foot-pl50 ul li{
    float: right;
    padding-left: 0;
    padding-right:50px
}

.arbMkt .foot-country{
    float: right;
}

@media all and (max-width: 768px) {
    .arbMkt .foot-privacy ul li{
        padding-left: 0;
        padding-right: 0;
    }

    .arbMkt .foot-pl50 ul li{
        padding-left: 0;
        padding-right: 0;
    }

    .arbMkt .foot-privacy ul li a{
        text-align: right;
    }

    .arbMkt .foot-country img{
        float: right;
    }
    .arbMkt .foot-country span{
        padding-right: 10px;
        float: right;
    }
}

.arbMkt .ef-form-label, 
.arbMkt .ef-form-control label, 
.arbMkt .ef-form-group label{
  text-align: right;
}

.arbMkt .ef-form-label span, 
.arbMkt .ef-form-control label span, 
.arbMkt .ef-form-group label span,
.arbMkt .ef-form-submit-container{
  float: right;
}

.arbMkt .ef-form-group, 
.arbMkt .ef-form-control{
  float: right;
  text-align: right;
}


.arbMkt .ef-input-w:not(.ef-boolean).-is-invalid:after, 
.arbMkt .ef-input-w:not(.ef-boolean).-is-valid:after{
  left: 25px;
}

.arbMkt .ef-form-birthDate-gud-wrapper.ef-input-w:not(.ef-boolean).-is-invalid:after, 
.arbMkt .ef-form-birthDate-gud-wrapper.ef-input-w:not(.ef-boolean).-is-valid:after{
  margin-right: 0;
  left: 35px;
}

.arbMkt .ef-input-w.-select:after{
  margin-left: 0;
}

.arbMkt .ef-form-group.-inline>*{
  float: right;
  padding-right: 0;
}

.arbMkt .ef-form-group.-inline{
  padding-right: 0;
}

.arbMkt .ef-input-w.-select:after{
  position: absolute;
  left: 15px;
}

.arbMkt .label-text{
  padding-right: 20px;
}

.arbMkt .ef-form-group select{
    background: rgba(255, 255, 255, 1) url('chevronDown.svg') no-repeat scroll 1% center;
    background-size: 16px;
}

.arbMkt .ef-form-birthDate-wrapper select{
    background: rgba(255, 255, 255, 1) url('chevronDown.svg') no-repeat scroll 7% center;
    background-size: 12px; 
}

.arbMkt .ef-form-birthDate-wrapper select{
  float: right;
  margin-left: 10px;
  margin-right: 0;
}

.arbMkt .ef-boolean__label{
  margin-right:10px;
  float:right;
}

.arbMkt .materialTheme .form-placeholder{
  left:initial;
  right:10px;
}