.form-hidden, .hidden { display: none !important; } .radio-button input[type=radio], .registration-form-builder .upload-photo + input[type=file] { display: none; } /* step-hidden use for hide step and make autofill form work */ .step-hidden { padding: 0 !important; margin: 0 !important; height: 0 !important; max-height: 0 !important; overflow: hidden !important; opacity: 0 !important; } .modal-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; background-color: rgba(0, 0, 0, 0.7); } /* dropdown select */ .html-dropdown { position: relative; z-index: 1; background-color: #ffffff; border: 1px solid #000000; color: #000000; } .html-dropdown > span { display: block; padding: 5px 25px; text-align: center; } .html-dropdown > ul { position: absolute; left: 0; right: 0; top: 100%; margin: 0 -1px; max-height: 200px; overflow-x: hidden; overflow-y: auto; background-color: #ffffff; border: 1px solid #000000; } .html-dropdown > ul > li { padding: 5px 10px; cursor: pointer; } .html-dropdown > ul > li.selected, .html-dropdown > ul > li:hover { background-color: #ebebeb; } .html-dropdown-prev, .html-dropdown-next { position: absolute; top: 0; bottom: 0; width: 25px; cursor: pointer; } .html-dropdown-prev { left: 0; } .html-dropdown-next { right: 0; } .html-dropdown-prev:before, .html-dropdown-next:before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; width: 0; height: 0; border-style: solid; } .html-dropdown-prev:before { border-width: 7px 7px 7px 0; border-color: transparent #000000 transparent transparent; } .html-dropdown-next:before { border-width: 7px 0 7px 7px; border-color: transparent transparent transparent #000000; } /* loading */ .lds-ripple { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10000; background-color: rgba(0, 0, 0, 0.7); } .lds-ripple span { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; } .lds-ripple span:before, .lds-ripple span:after { content: ''; box-sizing: content-box; position: absolute; border-width: 12px; border-style: solid; opacity: 1; border-radius: 50%; -webkit-animation: lds-ripple 2s cubic-bezier(0, 0.2, 0.8, 1) infinite; animation: lds-ripple 2s cubic-bezier(0, 0.2, 0.8, 1) infinite; } .lds-ripple span:before { border-color: #ffffff; } .lds-ripple span:after { border-color: #ffffff; -webkit-animation-delay: -1s; animation-delay: -1s; } /* end loading */ /* birthdate */ input[type="date"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url(/img/_btns/icon_calendar.png); background-repeat: no-repeat; background-position: right center; background-size: auto 80%; border: 1px solid #cccccc; } input[type="date"]::-webkit-calendar-picker-indicator, input[type="date"]::-webkit-inner-spin-button { opacity: 0; } input[type="date"]::-ms-clear { display: none; } /* end birthdate */ /* age select slider */ .age-select-slider-wrapper { position: relative; max-width: 500px; padding: 0 30px; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .age-select-slider::-webkit-scrollbar { display: none; } .age-select-slider { overflow: hidden; overflow-x: scroll; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; color: #000000; } .age-select-slider-btn { position: absolute; top: 0; bottom: 0; width: 30px; cursor: pointer; } .age-select-slider-btn:before, .age-select-slider-btn:after { content: ''; position: absolute; width: 60%; height: 15%; background-color: #000000; } .age-select-slider-btn:before { top: 0; } .age-select-slider-btn:after { bottom: 0; } .age-select-slider-btn.age-select-slider-prev { left: 0; } .age-select-slider-btn.age-select-slider-prev:before, .age-select-slider-btn.age-select-slider-prev:after { right: 10%; } .age-select-slider-btn.age-select-slider-prev:before { top: 25%; transform: rotate(-45deg); } .age-select-slider-btn.age-select-slider-prev:after { bottom: 25%; transform: rotate(45deg); } .age-select-slider-btn.age-select-slider-next { right: 0; } .age-select-slider-btn.age-select-slider-next:before, .age-select-slider-btn.age-select-slider-next:after { left: 10%; } .age-select-slider-btn.age-select-slider-next:before { top: 25%; transform: rotate(45deg); } .age-select-slider-btn.age-select-slider-next:after { bottom: 25%; transform: rotate(-45deg); } .age-select-slider li { display: inline-block; cursor: pointer; } .age-select-slider li.selected { cursor: default; } /* end age select slider */ /* visual checked */ .visual-checked { position: relative; } .visual-checked:after { content: '\2713\fe0e'; position: absolute; top: 7px; right: 10px; font-size: 25px; color: #ff0000; } .visual-checked.visual-checked-success:after { color: #228B22; } /* end visual checked */ /* ANIMATION */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes slideFadeIn { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 300px; } } @keyframes slideDown { from { max-height: 0; } to { max-height: 4000px; } } /* loading */ @keyframes lds-ripple { 0% { top: 88px; left: 88px; width: 0; height: 0; opacity: 1; } 100% { top: 4px; left: 4px; width: 168px; height: 168px; opacity: 0; } } /* END ANIMATION */ @media (min-width: 1800px) { .lds-ripple { font-size: 0.73vw; } .lds-ripple span { width: 14.28em; height: 14.28em; } .lds-ripple span:before, .lds-ripple span:after { border-width: 0.86em; } @keyframes slideFadeIn { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 24.43em; } } @keyframes slideDown { from { max-height: 0; } to { max-height: 285.71em; } } /* loading */ @keyframes lds-ripple { 0% { top: 6.29em; left: 6.29em; width: 0; height: 0; opacity: 1; } 100% { top: 0.28em; left: 0.28em; width: 12em; height: 12em; opacity: 0; } } }