div#scroll {
   padding: 80px 0;
 }

 #btmBar ul {
   display: flex;
   justify-content: center;
   align-items: center;
 }

 /* Use data-attr attributes for styling hooks */
 [data-attr="form-container"] {
   max-width: 820px;
   margin: 0 auto;
   padding: 0px;
   border-radius: 4px;
   width: 100%;
   align-items: center;
   display: flex;
   justify-content: center;
 }

 [data-attr="form-container"] form {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: flex-start;
 }

 [data-attr="form-title"] {
   font-size: 28px;
   margin-bottom: 10px;
   text-align: center;
 }

 [data-attr="form-subtitle"] {
   font-size: 16px;
   margin-bottom: 20px;
   color: #555;
   text-align: center;
   line-height: 20px;
 }

 [data-attr="form-container"] .product-select {
   width: 100%;
 }

 [data-attr="form-field"].inputgroup {
   margin: 10px 15px;
   position: relative;
   max-width: 350px;
   width: 100%;
   display: inline-block;
 }

 [data-attr="form-field"].inputgroup label {
   display: block;
   width: max-content;
   position: absolute;
   top: 15px;
   left: 12px;
   font-weight: 300;
   color: #696969;
   font-size: 15px;
   transform-origin: left;
   transition: all 350ms ease-out;
   transform: translate(0px, 0px);
   pointer-events: none;
 }

 [data-attr="form-field"] input,
 [data-attr="form-field"] select,
 [data-attr="form-field"] textarea {
   width: 100%;
   display: block;
   box-sizing: border-box;
   border: 1px solid rgb(223, 223, 223);
   font-size: 16px;
   width: 100% !important;
   border-radius: 6px !important;
   margin: 0px 0px 0px 0px !important;
   min-height: 52px;
 }

 [data-attr="form-field"] input:focus,
 [data-attr="form-field"] select:focus {
   border-color: #007bff;
   outline: none;
 }

 [data-attr="form-note"] {
   font-size: 13px;
   line-height: 18px;
   width: 100%;
   border-radius: 6px;
   margin: 10px 0px;
 }

 [data-attr="form-note"] strong {
   font-weight: 500;
 }

 [data-attr="form-field"] select {
   padding: 16px 6px 4px 14px !important;
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   background-color: #fff;
   border: 1px solid #ccc;
   font-size: 16px;
   color: #333;
   background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='12' viewBox='0 0 24 24' width='12' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
   background-repeat: no-repeat;
   background-position: right 8px center;
   background-size: 26px;
   cursor: pointer;

 }

 [data-attr="form-field"] span.error-field,
 [data-attr="form-field"] span.error-field1,
 [data-attr="form-field"] span.error-field {
   display: none;
 }

 [data-attr="form-field"] select#ukcountry_region,
 [data-attr="form-field"] select#country_state {
   margin-top: 10px !important;
   padding-top: 6px !important;
 }


 [data-attr="form-field"] input#Submit, [data-attr="form-field"].inputgroup input[type=submit] {
   width: 100% !important;
   border-radius: 6px !important;
   background: #e9152b !important;
   min-height: 40px;
   font-size: 16px !important;
   text-align: center;
   color: #fff;
   cursor: pointer;
   border: none !important;
   text-transform: uppercase;
   padding: 14px 32px;
   font-family: 'ZohoPuvi';
   max-width: fit-content;
   min-width: 200px;
   margin: 15px auto !important;
 }

 [data-attr="form-field"].inputgroup.focus label {
   transform: translate(3px, -11px) scale(.7, .7);
 }

 [data-attr="form-field"] input[type="text"],
 [data-attr="form-field"] input[type="number"],
 [data-attr="form-field"] textarea {
   height: 52px;
   padding: 20px 6px 4px 14px !important;
   color: #313131;
   border-radius: 6px;
   background: #FFF !important;
   line-height: 20px;
 }

 [data-attr="form-field"] textarea {
   width: 100%;
   max-height: 150px;
   min-height: 100px;

 }


 [data-attr="form-field"].inputgroup.focus label.textarea {
   background: #fff;
   line-height: 20px;
 }

 [data-attr="form-container"] .dwn-priv.tac {
   font-size: 12px;
   color: #444;
 }

 [data-attr="form-field"] label sup {
   vertical-align: middle;
   color: red;
 }

 [data-attr="form-field"].inputgroup.focused label {
   color: #2a79bb;
 }

 [data-attr="form-field"] input[type="number"]::-webkit-outer-spin-button,
 [data-attr="form-field"] input[type="number"]::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }

 [data-attr="form-field"].error span.error-field {
   display: block;
   color: red;
   position: relative;
   font-size: 13px;
   line-height: normal;
   margin-left: 13px;
   top: 5px;
   font-weight: 300;
 }

 [data-attr="form-field"].inputgroup .country-code {
   height: 50px;
   position: absolute;
   top: 0px;
   left: 0px;
   margin: auto;
   width: 70px;
   display: flex;
   justify-content: center;
   align-items: center;
   border: 1px solid rgb(223, 223, 223);
   border-radius: 6px 0px 0px 6px !important;
   font-size: 16px;
   color: #000;
   background: #fff;
 }

 [data-attr="form-field"] input[type="text"][data-attr="phone"] {
   width: 80% !important;
   margin-left: 70px !important;
   border-radius: 0px 6px 6px 0px !important;
 }

 [data-attr="form-field"] label[data-attr="phone-label"] {
   left: 82px;
 }

 [data-attr="form-field"].inputgroup.error .error-field::before,
 [data-attr="form-field"].inputgroup.error .error-field1::before,
 [data-attr="form-field"].inputgroup.error .error-field2::before {
   content: '';
   position: absolute;
   top: 0px;
   left: -14px;
   height: 12px;
   width: 12px;
   background-image: url(https://www.manageengine.com/ems/images/icon/error-symbol.svg);
   background-size: 12px 12px;
   background-repeat: no-repeat;
   background-position: center;
   filter: invert(21%) sepia(87%) saturate(2732%) hue-rotate(352deg) brightness(93%) contrast(96%);
 }


 [data-attr="form-field"].error input[type="text"],
 [data-attr="form-field"].error input[type="number"] {
   border-color: red;
 }

 [data-attr="form-field"].error label,
 [data-attr="form-field"].error label {
   color: red;
 }

 /* Tabs container */
 [data-attr="form-container"] .tabs {
   display: flex;
   position: relative;
   background-color: #F7F7F7;
   padding: 8px;
   border-radius: 26px;
   width: 250px;
   margin: 0 auto 24px;
 }

 /* Ensure elements sit above glider */
 [data-attr="form-container"] .tabs * {
   z-index: 2;
 }

 /* Hide the actual radio buttons */
 [data-attr="form-container"] .tabs input[type="radio"] {
   display: none;
 }

 /* Label styling (tabs) */
 [data-attr="form-container"] label.tab {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 30px;
   font-size: 14px;
   color: #2753C1;
   font-weight: 500;
   border-radius: 99px;
   cursor: pointer;
   transition: color 0.15s ease-in;
   width: 50%;
   /* evenly split tabs */
   z-index: 6;
 }

 /* Checked tab text color */
 [data-attr="form-container"] input[type="radio"]:checked+label {
   color: #FFF;
 }

 /* The animated background glider */
 [data-attr="form-container"] .tabs .glider {
   position: absolute;
   height: 30px;
   width: 125px;
   background-color: #2753C1;
   border-radius: 26px;
   top: 8px;
   left: 8px;
   z-index: 5;
   transition: transform 0.25s ease-out;
 }

 /* Move glider to On-Prem tab */
 [data-attr="form-container"] input[id="onpremise-tab"]:checked~.glider {
   transform: translateX(0);
 }

 /* Move glider to Cloud tab */
 [data-attr="form-container"] input[id="cloud-tab"]:checked~.glider {
   transform: translateX(100%);
 }

 [data-attr="form-field"].inputgroup.multi-select label {
   position: static;
   transform: none !important;
   display: inline-block;
   transition: none;
 }

 [data-attr="form-field"].inputgroup.multi-select input[type="checkbox"] {
   height: 12px;
   width: 12px !important;
   display: inline-block;
   position: relative;
   min-height: auto;
   margin-right: 5px !important;
 }

 [data-attr="form-field"].inputgroup.multi-select inputgroup {
   width: 100%;
   display: block;
   margin: 5px;
 }

 [data-attr="form-field"].inputgroup.multi-select inputgroup label {
   pointer-events: auto;
 }


 [data-attr="form-field"].inputgroup.multi-select inputgroup label a {
   color: #2753c1;
 }

 @media screen and (max-width:500px) {

   [data-attr="form-field"].inputgroup label[for="datetimepicker"] {
     display: none !important;
   }

 }

 @media screen and (max-width:350px) {

   [data-attr="form-field"] input[type="text"][data-attr="phone"] {
     width: 78% !important;
   }
 }