.customer_selector_main { position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; display: flex; align-items: center; align-content: center; justify-items: center; justify-content: center; flex-direction: column; font-size: 12pt; font-weight: 400 !important; transition: var(--transition-slow); z-index: 0; } .customer_selector, .customer_selector * { box-sizing: content-box; } .customer_selector { margin: auto; --cs-height: 1rem; --cs-width: 16rem; width: var(--cs-width); left: 50%; transform: translateX(-50%) translateY(calc(-100% + 1rem)); font-family: "Calibri"; position: fixed; padding: calc(var(--mp) * 0); transition: var(--transition-fast); text-align: center; border-bottom-left-radius: calc(var(--mp) * 1); border-bottom-right-radius: calc(var(--mp) * 1); display: flex; flex-direction: column; z-index: 100000; overflow: hidden; background-color: #24242480; color: white !important; opacity: .5; } .customer_selector:hover { width: var(--cs-width); top: 0px; transform: translateX(-50%) translateY(0%); background-color: #242424 !important; border: 2pt solid black !important; opacity: 1; background-color: #24242480; } .customer_selector_icon { width: -moz-fit-content; width: fit-content; margin: auto; padding: calc(var(--mp) * 0); position: relative; margin-top: 1rem; } .customer_selector_icon * { max-width: 1rem; max-height: 1rem; } .customer_selector_label *, .customer_selector_label { display: flex; flex-direction: column; padding: 0px !important; margin: 0px !important; min-height: unset !important; height: unset !important; height: -moz-fit-content; height: fit-content; text-align: center; align-items: center; align-content: center; justify-items: center; justify-content: center; color: var(--elements-fg-color) !important; } .customer_selector:hover .customer_selector_label { color: white; width: 100%; } .customer_selector_dropdown { visibility: hidden; max-height: 0px; overflow: hidden; opacity: 0; position: relative; transition: var(--transition-fast); border-radius: calc(var(--mp) * .5); text-align: left; margin: 0px; padding: 0px; padding-left: var(--mp); padding-right: var(--mp); } .customer_selector:hover .customer_selector_dropdown { visibility: visible; opacity: .8; max-height: 100vh; border: 1px solid var(--bg-deendet-fg-color); } .customer_id_button { cursor: pointer; color: gray; transition: var(--transition-fast); padding: calc(var(--mp) * .5); padding-left: calc(var(--mp) * 1); padding-right: calc(var(--mp) * 1); } .customer_id_button:hover { color: white; } .customer_id_button:active { color: white; opacity: .75; } .customer_selector_icon, .customer_selector_icon * { margin: auto; color: var(--elements-fg-color) !important; font-size: 1rem !important; opacity: 0.75; padding: 0px !important; margin-top: 0px !important; }