:root { --privacy-cols: 2; --form-cols: 2; --form-width: calc(var(--contents-width) * 1); } .form_box, .form_box * { font-family: var(--text-font); } .form_box { display: flex; flex-direction: column; position: relative; z-index: 100; width: var(--form-width); margin: auto; background-color: var(--bg-dependent-bg-color-trans); -webkit-backdrop-filter: var(--backdrop-filter); backdrop-filter: var(--backdrop-filter); color: var(--bg-dependent-fg-color); padding: calc(var(--mp) * 2); border-radius: calc(var(--mp) * 2); flex: 1; } .form_dashboard button.submit, .form_dashboard button.reset, .form_dashboard button.edit_form, .form_box button.submit, .form_box button.reset, .form_box button.edit_form, .form_box input[type=submit], .form_box input[input=reset], .form_box button { position: relative; cursor: pointer; opacity: .75; transition: var(--transition-super-fast); background-color: var(--bg-dependent-bg-color-flat); border-width: 0px; box-shadow: var(--box-shadow-soft); color: var(--bg-dependent-fg-color); padding: calc(var(--mp) * 1); border-radius: calc(var(--mp) * .5); margin: calc(var(--mp) * .5); } .form_box select, .form_box textarea, .form_box input[type=email], .form_box input[type=password], .form_box input[type=date], .form_box input[type=tel], .form_box input[type=text], .form_box input[type=password], .form_box input[type=email] { background-color: var(--input-bg-color); } .form_dashboard button.submit, .form_dashboard button.reset, .form_dashboard button.edit_form, .form_box button.submit, .form_box button.reset, .form_box button[type=submit], .form_box button[type=reset], .form_box input[type=submit], .form_box input[input=reset] { font-size: 1rem; } .form_dashboard button:hover, .form_box button:hover { opacity: 1; } .form_dashboard button:active, .form_box button:active { opacity: .5; transform: scale(.95); } .form_box input, .form_box select, .form_box textarea { position: relative; font-size: 1rem; padding: calc(var(--mp) * 1); border-radius: calc(var(--mp) * .5); z-index: 100; } .form_box input, .form_box select, .form_box textarea { border: var(--input-borders-size) solid var(--input-borders-color); ; } .form_box *:focus { box-shadow: var(--box-glow); } .form_box *:required:focus { box-shadow: var(--box-shadow-required); border-color: red; outline: none; } .form_box input[type=range]:focus { box-shadow: none !important; } .form_row { margin-bottom: calc(var(--mp) * 2); transition: var(--transition-mid); max-height: 100% !important; } .form_row_privacy { max-width: 100%; } .form_row_privacy, .form_row_switch { display: flex; flex-direction: row-reverse; align-items: center; align-content: center; justify-items: center; justify-content: flex-end; } .form_row_privacy .switch_checkbox, .form_row_switch .switch_checkbox { position: relative !important; width: var(--switch-size) !important; height: var(--switch-size) !important; margin-left: calc(var(--switch-size) * -1.5); margin-right: calc(var(--mp)); padding: 0px !important; opacity: 0; z-index: -1; pointer-events: none !important; } .form_row_privacy label, .form_row_switch label { padding-left: var(--mp); } .form_row_privacy_policy_switch { display: inline-flex; flex-direction: row-reverse; padding: calc(var(--mp) * 1); } .form_row_privacy_policy_comment { grid-column: 1 / calc(var(--form-cols) + 1); width: 100%; padding-bottom: calc(var(--mp) * 1); padding-left: calc(var(--mp) * 2); padding-right: calc(var(--mp) * 2); } .form_row_compress { max-height: 0px !important; overflow: hidden !important; pointer-events: none !important; padding: 0px !important; margin: 0px !important; pointer-events: none !important; display: none; } .form_row_compress * { transition: var(--transition-mid) !important; opacity: 0 !important; padding: 0px !important; margin: 0px !important; max-width: 0px; width: 0px; max-height: 0px; visibility: hidden !important; pointer-events: none; } .form_row_caption { margin-bottom: calc(var(--mp) * 1); } .form_row_input input.currency { text-align: right; border-radius: var(--mp) 0px 0px var(--mp); } .form_row_input div.currency_units { text-align: center; padding: var(--mp); border-radius: 0px var(--mp) var(--mp) 0px; background-color: #cccccc60; border: var(--input-borders-size) solid #cccccc60; font-size: 1rem; display: inline-flex; } .form_row_input input.generic, .form_row_input textarea, .form_row_input select { width: calc(100% - var(--mp) * 1); } .form_row_input input.privacy, .form_row_input input.switch { box-sizing: content-box !important; padding: 0px; margin: 0px; appearance: none; background-color: transparent; cursor: pointer; width: calc(var(--switch-size) * 2); height: var(--switch-size); border-radius: var(--switch-size); background-color: #00000020; border: var(--switch-borders-size) solid var(--bg-dependent-fg-color-trans); overflow: hidden; padding: calc(var(--switch-borders-size) * .5); } .form_row_multiswitch_list { display: flex; flex-direction: column; } .form_row_multiswitch_item { display: flex; align-items: center; align-content: center; justify-items: center; justify-content: flex-start; padding: calc(var(--switch-borders-size) * .5); } .form_row_multiswitch_item label { padding-left: var(--mp); } input.privacy_on::-webkit-slider-runnable-track, input.switch_on::-webkit-slider-runnable-track { -webkit-appearance: none; } input.privacy_on::-webkit-slider-thumb, input.privacy::-webkit-slider-thumb, input.switch_on::-webkit-slider-thumb, input.switch::-webkit-slider-thumb { -webkit-appearance: none; position: relative; appearance: none; margin-top: 0px; background-color: transparent; border-radius: var(--switch-size); height: calc(var(--switch-size)); width: calc(var(--switch-size)); border: var(--switch-borders-size) solid var(--bg-dependent-fg-color-trans); } input.switch_on::-webkit-slider-thumb { background-color: var(--bg-dependent-fg-color); } input.privacy_on::-webkit-slider-thumb { background-color: var(--bg-dependent-fg-color); } .form_row_section .form_row_caption { font-size: 1.25rem; padding: var(--mp); border-bottom: 1px dashed var(--bg-dependent-fg-color); } .form_row_section .form_row_comment { font-size: 85%; padding-left: calc(var(--mp) * 2); } .form_row_field_required *, .form_row_field_required { position: absolute; display: inline !important; padding: 0px !important; margin: 0px !important; margin-left: calc(var(--mp)*.25) !important; width: -moz-fit-content !important; height: -moz-fit-content !important; width: fit-content !important; height: fit-content !important; color: var(--bg-dependent-fg-color-hsl-compl) !important; fill: var(--bg-dependent-fg-color-hsl-compl) !important; stroke: var(--bg-dependent-fg-color-hsl-compl) !important; } .form_row_privacy_policy_container { overflow: hidden; max-height: 10rem; width: auto; padding: var(--mp); transition: var(--transition-fast); border: 1px solid var(--bg-dependent-fg-color-trans); background-color: #00000020; border-radius: var(--mp); color: var(--bg-dependent-fg-color); display: flex; flex-direction: column; flex: 1; } .form_row_privacy_policy_container a:visited, .form_row_privacy_policy_container a { color: var(--bg-dependent-fg-color); font-weight: 600; opacity: .75; } .form_row_privacy_policy_container a:hover { opacity: 1; } .form_row_privacy_policy_container a:active { opacity: .5; } .form_row_privacy_policy_container a.anchor { width: 0px; overflow: hidden; height: 0px; position: relative; } .form_row_privacy_policy_container button { border-radius: calc(var(--mp) * .5); padding: calc(var(--mp) * .5); margin-bottom: calc(var(--mp) * 1); border: 0px; box-shadow: var(--box-shadow-tiny); cursor: pointer; background-color: var(--bg-dependent-bg-color-flat); opacity: .75; transition: var(--transition-super-fast); } .form_row_privacy_policy_container h1 { margin: 0px; padding: var(--mp); font-weight: 600 !important; font-size: 1.25rem !important; } .form_row_privacy_policy_container button:hover { opacity: 1; } .form_row_privacy_policy_container button:active { opacity: .5; transform: scale(.95); } .form_row_privacy_policy_container_expand { max-height: 75vh !important; opacity: 1; } .form_row_privacy_policy { opacity: .5; max-width: inherit !important; max-height: inherit !important; overflow-y: scroll; padding: var(--mp); font-size: 85%; line-height: 150%; border-top: 1px solid var(--bg-dependent-fg-color-trans); } .form_row_privacy_policy, .form_row_privacy_policy * { hyphens: auto !important; } .form_row_privacy_policy_container_expand .form_row_privacy_policy { opacity: 1 !important; } .form_row_buttons_panel { text-align: right; padding: calc(var(--mp) * 1); grid-column: 1 / calc(var(--form-cols) + 1); } .form_verifier .form_verifier_background, .form_verifier { display: flex; align-items: center; align-content: center; justify-items: center; justify-content: space-between; top: 0px; bottom: 0px; left: 0px; right: 0px; background-color: transparent; transition: var(--transition-fast); transform: translateY(0%); transform-origin: 50% 50%; } .form_verifier { position: fixed; } .form_verifier .form_verifier_background { position: absolute; background-color: var(--bg-dependent-bg-color-trans); -webkit-backdrop-filter: var(--backdrop-filter-header); backdrop-filter: var(--backdrop-filter-header); z-index: -1; } .form_verifier .close_button { float: right; display: flex; align-items: center; align-content: center; justify-items: center; justify-content: center; width: var(--form-buttons-size); height: var(--form-buttons-size); border-radius: var(--form-buttons-size); text-align: center; cursor: pointer; border: 1px solid var(--bg-dependent-fg-color-trans); color: var(--bg-dependent-fg-color-trans); fill: var(--bg-dependent-fg-color-trans); stroke: var(--bg-dependent-fg-color-trans); } .form_verifier_hide { pointer-events: none !important; visibility: hidden !important; transform: translateY(100%) !important; } .form_dashboard { margin: auto; background-color: var(--bg-dependent-bg-color-trans); -webkit-backdrop-filter: var(--backdrop-filter); backdrop-filter: var(--backdrop-filter); border-radius: calc(var(--mp) * 2); padding: calc(var(--mp) * 2); border: 2pt solid var(--bg-dependent-bg-color-flat); color: var(--bg-dependent-fg-color); box-shadow: var(--box-shadow-soft); transform-style: preserve-3d; } .form_verifier .form_dashboard .form_dashboard_scroller { overflow-y: auto; height: calc(100% - var(--form-dashboard-panel-height) - var(--form-dashboard-title-height) - var(--mp) * 2); padding: calc(var(--mp) * 2); margin-top: calc(var(--mp) * 1); margin-bottom: calc(var(--mp) * 1); width: 100%; } .form_dashboard_title { font-size: 1.25rem; padding: var(--mp); border-bottom: 1px dashed var(--bg-dependent-fg-color); height: var(--form-dashboard-title-height); } .form_dashboard_scroller .content { display: grid; grid-template-columns: 30% 1rem auto; width: 100%; } .form_dashboard_scroller .content div { border-bottom: 1px dotted var(--bg-dependent-fg-color-trans); padding: var(--mp); } .form_dashboard_panel { text-align: right; padding: calc(var(--mp) * 1); height: var(--form-dashboard-panel-height); } .roman_title { font-weight: 600; margin-bottom: calc(var(--mp) * 1); text-decoration: underline !important; text-transform: uppercase; hyphens: auto !important; } .roman li { margin-bottom: .5rem; } .roman h3 { margin-top: 0px; margin-bottom: 0px; } @media screen and (min-width:721px) { .form_row_privacy, .form_row_privacy_policy_container, .form_row_section, .form_row_textarea { grid-column: 1 / calc(var(--form-cols) + 1); } .form_box { display: grid; grid-template-columns: repeat(var(--form-cols), 1fr) !important; } .form_dashboard { height: 75%; width: calc((var(--contents-width) * .75) - var(--mp) * 2); } li.roman { padding: 1rem; columns: var(--privacy-cols); column-fill: balance; column-gap: 1rem; column-rule-width: 1px; column-rule-style: dotted; column-rule-color: var(--bg-dependent-fg-color); hyphens: auto; } .popup_win li.roman { column-rule-color: var(--elements-fg-color-trans); } li.roman .roman_title { border-top: 1px dotted var(--elements-fg-color-trans); padding-top: calc(var(--mp) * 1); column-span: all !important; hyphens: none !important; } .form_row_privacy_policy_container_header { display: flex; display: flex; align-items: center; align-content: center; justify-items: center; justify-content: space-between; } } @media screen and (max-width:720px) { .form_box { display: flex !important; flex-direction: column; width: 100%; max-width: calc(100vw - var(--mp) * 4) !important; } .form_row_textarea { grid-column: auto; } .form_row_privacy_policy { max-width: calc(100vw - var(--mp) * 8); hyphens: auto; word-break: break-all; } .form_dashboard { height: calc(100% - var(--mp) * 4); width: calc(100vw - var(--mp) * 4); } } .form_row_privacy_policy ul, .form_row_privacy_policy ol { margin: calc(var(--mp) * 2.5); padding: calc(var(--mp) * 0); } li.roman { list-style-type: upper-roman; margin-left: calc(var(--mp) * .5); margin-top: calc(var(--mp) * 2); margin-bottom: calc(var(--mp) * 1); }