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 {
     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: 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"].inputgroup label[data-attr="country-label"] {
     top: 2px;
     left: 13px;
     scale: .7 .7;
 }

 [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"] 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%);
 }


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

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