/* Utility Classes */
 [x-cloak] { display: none !important; }
 #leadform .hidden { display: none; }
 #leadform .inline-block { display: inline-block; }
 #leadform .error { border: 1px solid red !important; }

 #leadform .debug .tab { display:block !important; border: 1px solid red !important; margin: 20px; padding:20px; }

  /* Form Defaults */
#leadform .input_text { font-size: 16px; border-radius: 5px; border: 1px solid #ccc; padding: 9px 10px; width: 100%; }
#leadform .input_text:focus, #leadform select:focus, #leadform textarea:focus, #leadform button:focus { outline: none; }
#leadform .input_text::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #6B7280; opacity: 1; /* Firefox */ }
#leadform .input_text:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #6B7280; }
#leadform .input_text::-ms-input-placeholder { /* Microsoft Edge */ color: #6B7280; }

#leadform .input_select{ position: relative; width: 100%; border: 1px solid #ccc; border-radius: 5px; padding:2px;}
#leadform .input_select::after { color: #6B7280; content: '▾'; margin-right: 10px; pointer-events: none; position: absolute; right: 5px; top: 5px; font-size: 20px; }
#leadform .input_select select { color: #6B7280; -moz-appearance: none; -webkit-appearance: none; background: white; border: none; border-radius: 0; cursor: pointer; padding: 6px; width: 100%; font-size: 16px; }
#leadform .input_select select:focus { color: #6B7280; }
#leadform .input_select select::-ms-expand { display: none; }

#leadform .input_radio_group{ display: flex; margin: 0 15px 10px 0; }
#leadform .input_radio_group input{ margin-right: 5px; }

 /* Progressbar */
#leadform .progressbar { width: 100%; display: flex; margin-bottom: 30px; }
#leadform .progress{ height: 4px; background: #e5e7eb; width: 100%;; }
#leadform .progress.active{ background: #0092c8; }

 /* Grid */
.row { width: 100%; display: flex; margin-bottom: 10px; }
.col { margin-right: 10px; }
.col:last-of-type { margin-right: 0px; }
.col-100 { width: 100%; }
.col-70 { width: 70%; }
.col-50 { width: 50%; }
.col-30 { width: 30%; }


 /* Tab Element Date */
 #leadform .te_date { font-size: 16px; border-radius: 5px; border: 1px solid #ccc; padding: 9px 10px; width: 100%; }
 #leadform .te_date:focus, #leadform select:focus, #leadform textarea:focus, #leadform button:focus { outline: none; }
 #leadform .te_date::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #6B7280; opacity: 1; /* Firefox */ }
 #leadform .te_date:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #6B7280; }
 #leadform .te_date::-ms-input-placeholder { /* Microsoft Edge */ color: #6B7280; }

  /* Tab Element Number */  
  #leadform .te_number { font-size: 16px; border-radius: 5px; border: 1px solid #ccc; padding: 9px 10px; width: 100%; }
  #leadform .te_number:focus, #leadform select:focus, #leadform textarea:focus, #leadform button:focus { outline: none; }
  #leadform .te_number::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #6B7280; opacity: 1; /* Firefox */ }
  #leadform .te_number:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #6B7280; }
  #leadform .te_number::-ms-input-placeholder { /* Microsoft Edge */ color: #6B7280; }

 /* Tab Element Icon Select */
#leadform .te_iconselect { margin: 10px; width: 100px; height: 120px; }
#leadform .te_iconselect .icon { width: 50px; height: 50px; }
#leadform .te_iconselect .label { transition: all 0.1s ease-in-out; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 120px; border-radius: 8px; font-size: 12px; border: 1px solid #e5e7eb; cursor: pointer; }
#leadform .te_iconselect .label_image { display: inline-block; }
#leadform .te_iconselect .label_text { margin-top: 10px; }
#leadform .te_iconselect .label{ background-color: #fff; }
#leadform .te_iconselect:hover .label{ background-color: #ccc; color:#fff; }
#leadform .te_iconselect .icon { fill: #033d53; }
#leadform .te_iconselect:hover .icon { fill: #ffffff; }

/* Tab Element Dropdown Select */
#leadform .te_select { appearance: none; border: 0; outline: 0; font: inherit; height: 38px; padding: 0 4em 0 1em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -256 1792 1792'%3E%3Cpath d='M1024 832q0-26-19-45L557 339q-19-19-45-19t-45 19L19 787Q0 806 0 832t19 45q19 19 45 19h896q26 0 45-19t19-45z' style='fill:%23fff' transform='matrix(1 0 0 -1 402.44068 1239.8644)'/%3E%3C/svg%3E") no-repeat right 0.8em center / 1.4em, linear-gradient(to left, #ccc 3em, #eee 3em); border-radius: 0.25em; cursor: pointer; }
#leadform .te_select option { color: inherit; background-color: #ccc; }
#leadform .te_select::-ms-expand { display: none; }

/* Tab Element Multicheck Ckeckbox */
#leadform .te_multicheck { display: block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 14px; font-weight: bold; border: 1px solid #ccc; width: 100%; text-align: left; padding: 12px 10px 10px 40px; margin: 8px; border-radius: 4px; }
#leadform .te_multicheck input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
#leadform .te_multicheck .checkmark { position: absolute; top: 6px; left: 6px; height: 25px; width: 25px; border-radius: 4px; background-color: #eee; }
#leadform .te_multicheck:hover input ~ .checkmark { background-color: #ccc; }
#leadform .te_multicheck input:checked ~ .checkmark { background-color: #999; }
#leadform .te_multicheck .checkmark:after { content: ""; position: absolute; display: none; }
#leadform .te_multicheck input:checked ~ .checkmark:after { display: block; }
#leadform .te_multicheck .checkmark:after { top: 3px; left: 2px; height: 20px; width: 20px; background-size: cover; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.6875.3125c.4063.375.4063 1.03125 0 1.40625l-8 8c-.375.40625-1.03125.40625-1.40625 0l-4-4c-.40625-.375-.40625-1.03125 0-1.40625.375-.40625 1.03125-.40625 1.40625 0L6 7.59375 13.2812.3125c.375-.40625 1.0313-.40625 1.4063 0Z' fill='%23fff'/%3E%3C/svg%3E") center no-repeat; }

 /* Tab Element Range Slider */
 #leadform .te_range_slider { width: 100%; }
 #leadform .te_range_slider .info { font-size: 20px; font-weight: 700; }
 #leadform .te_range_slider .hint { font-size: 14px; font-weight: 400; }
 #leadform .te_range_slider .slider { -webkit-appearance: none; margin: 10px 0; width: 100%; }
 #leadform .te_range_slider .slider:focus { outline: none; }
 #leadform .te_range_slider .slider::-webkit-slider-runnable-track { width: 100%; height: 12.8px; cursor: pointer; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; background: #ccc; border-radius: 25px; border: 0px solid #000101; }
 #leadform .te_range_slider .slider::-webkit-slider-thumb { box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; border: 0px solid #000000; height: 25px; width: 25px; border-radius: 25px; background: #053289; cursor: pointer; -webkit-appearance: none; margin-top: -5px; }
 #leadform .te_range_slider .slider:focus::-webkit-slider-runnable-track { background: #ccc; }
 #leadform .te_range_slider .slider::-moz-range-track { width: 100%; height: 12.8px; cursor: pointer; animate: 0.2s; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; background: #ccc; border-radius: 25px; border: 0px solid #000101; }
 #leadform .te_range_slider .slider::-moz-range-thumb { box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; border: 0px solid #000000; height: 20px; width: 39px; border-radius: 7px; background: #053289; cursor: pointer; }
 #leadform .te_range_slider .slider::-ms-track { width: 100%; height: 12.8px; cursor: pointer; animate: 0.2s; background: transparent; border-color: transparent; border-width: 39px 0; color: transparent; }
 #leadform .te_range_slider .slider::-ms-fill-lower { background: #ccc; border: 0px solid #000101; border-radius: 50px; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; }
 #leadform .te_range_slider .slider::-ms-fill-upper { background: #ccc; border: 0px solid #000101; border-radius: 50px; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; }
 #leadform .te_range_slider .slider::-ms-thumb { box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; border: 0px solid #000000; height: 20px; width: 39px; border-radius: 7px; background: #053289; cursor: pointer; }
 #leadform .te_range_slider .slider:focus::-ms-fill-lower { background: #ccc; }
 #leadform .te_range_slider .slider:focus::-ms-fill-upper { background: #ccc; }

/* Tab Element Button Next */
#leadform .btn_next { transition: all 0.2s ease-in-out; color: #fff; fill: #fff; display: flex; align-items: center; padding: 11px 20px; cursor: pointer; background-color: #ccc; border-radius: 6px; border:none }
#leadform .btn_next svg { margin-left: 10px; fill: inherit; }
#leadform .btn_next:hover{ background-color: #999; }

/* Tab Element Button Submit */
#leadform .btn_submit { transition: all 0.2s ease-in-out; border: 2px solid #FFFFFF; color: #fff; fill: #fff; border-radius: 25px; display: flex; align-items: center; box-shadow: 0px 1.22222px 2.44444px rgba(0, 0, 0, 0.15); margin-top: 30px; font-size: 24px; padding: 15px 20px; cursor: pointer; width: 100%; justify-content: center; }
#leadform .btn_submit svg { margin-left: 10px; fill: inherit; }
#leadform .btn_submit{ background-color: #032059; border: 2px solid #FFFFFF; box-shadow: 0px 1.22222px 2.44444px rgba(0, 0, 0, 0.15); border-radius: 122.222px; }
#leadform .btn_submit:hover{ background-color: #032059; }

  /* Funnel and Tab */
#leadform .funnel { width: 100%; }
#leadform .tab_title { text-align: center; font-weight: bold; margin-bottom: 25px; }
#leadform .tab_content_before, .tab_content_after { text-align: center; }
#leadform .tab_elements { text-align: center; }
#leadform .tab_elements_item { display: flex; align-items: center; justify-content: center; }
#leadform .tab_elements.grid { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
#leadform .tab_elements.grid.items-2 .tab_elements_item { width: 50%; }
#leadform .tab_elements.grid.items-3 .tab_elements_item { width: 33%; }
#leadform .tab_elements.grid.items-4 .tab_elements_item { width: 25%; }
#leadform .tab_elements.stack { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; flex-direction: column; }

  /* Loading Spinner */
  .spinner { animation: rotate 2s linear infinite; z-index: 2; position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; width: 150px; height: 150px; }
  .spinner.path { stroke: hsl(210, 70, 75); stroke-linecap: round; animation: dash 1.5s ease-in-out infinite; }
  @keyframes rotate { 100% { transform: rotate(360deg); } }
  @keyframes dash { 0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; } }

  .lds-ripple { margin: 50px 0; display: inline-block; position: relative; width: 80px; height: 80px; }
  .lds-ripple div { position: absolute; border: 4px solid rgb(10, 20, 107); opacity: 1; border-radius: 50%; animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; }
  .lds-ripple div:nth-child(2) { animation-delay: -0.5s; }
  @keyframes lds-ripple { 0% { top: 36px; left: 36px; width: 0; height: 0; opacity: 0; } 4.9% { top: 36px; left: 36px; width: 0; height: 0; opacity: 0; } 5% { top: 36px; left: 36px; width: 0; height: 0; opacity: 1; } 100% { top: 0px; left: 0px; width: 72px; height: 72px; opacity: 0; } }