.curtain { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: inherit; transition: 0.3s all ease; z-index: 1; } .curtain:not(.hidden, .hidden-scale) { opacity: 1; } .curtain.open { background: transparent; opacity: 0; pointer-events: none; }  body.dark .card { background-color: #25282b !important; }  .el-card {  min-height: 250px; height: auto; margin: 15px 0px; padding: 0px 15px 15px; background: #EBE8E3; border-radius: 3px; box-shadow: 0px 0px 3px #bbb; text-align: left; opacity: 0; overflow: hidden; transform: scale(0); transition: 0.3s all ease;  } body.dark .el-card { background: #282A2F; box-shadow: 0px 0px 3px #333; } .el-card.slim { min-height: 64px; } .card-contents {  } .card-list > .alert { opacity: 0; transform: scale(0); transition: 0.3s all ease; will-change: transform; } .el-card.visible { opacity: 1; transform: none;  } .el-card .card-header { position: relative;  padding: 10px 0px; background: #ded7cd;  background: linear-gradient(to right, #ded7cd, #d9cdbc); color: #444; z-index: 5;  } body.dark .el-card .card-header { background: #333A42; color: #ccc; } .el-card .card-header img { width: 60px; height: 60px; border-radius: 50%; } .el-card.create-card, .el-card[data-uuid=""] { margin-left: 15px; margin-right: 15px;  box-shadow: 0px 0px 5px #3C7EB4; } body.dark .el-card.create-card, body.dark .el-card[data-uuid=""] { box-shadow: 0px 0px 3px #82959e; } .el-card.create-card .card-header, .el-card[data-uuid=""] .card-header { background: linear-gradient(to right, #82959e, #54707f);   color: #eee; } body.dark .el-card.create-card .card-header, body.dark .el-card[data-uuid=""] .card-header { background: linear-gradient(to right, #6b838f, #3d5e6f);  color: #ccc; } .el-card.employee-card { min-height: 265px;  } .el-card.expanded { min-height: 315px !important; overflow-y: auto; transition: 0.3s all ease; } .el-card .el-sub-card.expanded { height: 430px !important;   } .el-card .meta { margin-left: 1px; font-size: 18px; } .el-card .el-sub-card { position: absolute; top: 0px; left: 0px; width: 100%; min-height: 100px;  padding: 15px 25px; background: #EBE8E3; opacity: 0; transform: scale(0); transition: 0.3s all ease;  } body.dark .el-card .el-sub-card { background: #282A2F; } .el-card.create-card .el-sub-card { position: relative; background: transparent; } .el-card .el-sub-card.visible { position: relative; opacity: 1; transform: none;  z-index: 1; } .el-card .el-sub-card.accolade-nominations { height: 145px; padding: 12px 0px; overflow-y: auto; } .el-card .el-sub-card .d-flex.shift-forward { transform: translateX(-30%); } .el-card .el-sub-card .d-flex.shift-backward { transform: translateX(30%); } .el-card .el-sub-card .slant-accent {   z-index: 1; } .el-card .el-sub-card .slant-accent::before, .el-card .el-sub-card .slant-accent::after { content: ""; position: absolute; transform: translateX(-100%) skewX(27deg); transition: 0.75s all ease-in-out; } .el-card .el-sub-card .slant-accent::before { top: -45px; left: 0%; width: 110%; height: 200%; background: #dde2e0; box-shadow: 0px 0px 3px #c1d5df inset; } body.dark .el-card .el-sub-card .slant-accent::before { background: #2d3847; box-shadow: 0px 0px 3px #313133 inset; } .el-card .el-sub-card .slant-accent::after { top: -45px; left: 125%; width: 175%; height: 200%; background: #e6e2da; box-shadow: 0px 0px 3px #bababa inset; } body.dark .el-card .el-sub-card .slant-accent::after { background: #34363b; box-shadow: 0px 0px 3px #444 inset; } .el-card .el-sub-card .slant-accent > * { position: relative;  } .el-card .el-sub-card.visible .slant-accent { min-width: 365px; } .el-card .el-sub-card.visible .slant-accent::before, .el-card .el-sub-card.visible .slant-accent::after { transform: skewX(27deg); } .el-card .el-sub-card h4 { margin-bottom: 5px; } .el-card .el-sub-card label { min-width: 125px;  font-weight: bold; text-align: right; } .el-card input { margin-left: 3px; padding: 3px 10px; border-radius: 2px; border-style: dashed; outline: 0px; transition: 0.3s border ease; } @media (max-width: 499px) { .el-card .el-sub-card label { min-width: auto; width: 30%; } .el-card input { width: 65%; max-width: 173px; } } @media (min-width: 768px) and (max-width: 1313px) { .el-card .el-sub-card label { margin-top: 5px; margin-bottom: 5px; text-align: left; } .el-card .el-sub-card .slant-accent label { text-align: right;  } .el-card .el-sub-card input { margin-left: 0px; } } .el-card .el-sub-card code { position: absolute; top: 0; left: 0; display: block; width: 100%; padding: 5px; background: rgba(0, 0, 0, 0.15); border: 2px solid #fff; border-bottom: 0px; border-top-left-radius: 5px; border-top-right-radius: 5px; box-shadow: 0px 0px 3px transparent; font-weight: bold; text-align: center; transition: 0.3s all ease-in-out; } .el-card .el-sub-card [data-el="img2fa"] { position: relative; width: 160px; height: 160px; background: #aaa; box-shadow: 0px 0px 3px transparent; transition: 0.3s all ease-in-out; z-index: 1; } .el-card .el-sub-card div:hover > code { box-shadow: 0px 0px 3px #bbb; transform: translateY(-50%); } .el-card .el-sub-card div:hover > [data-el="img2fa"] { box-shadow: 0px 0px 3px #bbb; transform: translateY(15px); } .el-card button, button.btn-square, button.btn-mini-square { transition: 0.3s all ease; } button.btn-square { width: 75px; height: 75px; margin-top: 15px; margin-left: 15px; border: 1px solid transparent; border-radius: 7px; box-shadow: 0px 0px 5px transparent; color: #777; font-size: 20px; opacity: 0.85; } button.btn-square:not([data-action]):not([data-target]), button.btn-square[data-action=""][data-target=""] { background: #dfdfdf; } button.btn-square[disabled], button.btn-mini-square[disabled] { background: #ccc;  color: #aaa !important; cursor: not-allowed; opacity: 0.9 !important; } body.dark button.btn-square[disabled], body.dark button.btn-mini-square[disabled] { background: #555; } button.btn-square[disabled]:hover, button.btn-mini-square[disabled]:hover { box-shadow: 0px 0px 5px transparent !important;  } .el-card button.btn-mini-square { width: 45px; height: 45px; margin: 9px 0px 0px 15px; } button.btn-mini-square { width: 35px; height: 35px; margin: 15px 0px 15px 15px; padding: 0px; border: 3px solid transparent; border-radius: 7px; box-shadow: 0px 0px 5px transparent; color: #777; font-size: 20px; opacity: 0.7; transform: scale(0.9); vertical-align: middle; } button.btn-mini-square.hidden-scale { transform: scale(0) translateZ(0); } button.btn-mini-square:first-child { margin-left: 0px; } button.btn-mini-square:not([data-action]):not([data-target]), button.btn-mini-square[data-action=""][data-target=""] { background: #ccc; } button.btn-mini-square.active { transform: scale(1) translateZ(0);  } button.btn-mini-square:hover { opacity: 0.85; } button.btn-mini-square.unsaved { border: 3px solid #f9e614; animation: border-pulse-warning 4s infinite;  } button.btn-mini-square.saved { border: solid 3px #10C7EC; } button.btn-mini-square.active { box-shadow: 0px 0px 5px #599BCF; color: #fff !important; opacity: 1; } @media (min-width: 768px) { .el-card .card-contents .main-data-entry { height: 100px; } } .el-card .card-contents .main-actions { margin-top: 35px; text-align: right; } @media (max-width: 992px) { button.btn-mini-square { width: 40px; height: 40px; margin: 9px 0px 0px 5px; } .el-card .card-contents .main-actions {  text-align: center; } } @media (max-width: 1144px) { .el-card .card-contents .main-actions { margin-top: 5px; } } button.btn-square.text-invert:not([disabled]):not(.disabled), button.btn-mini-square.text-invert:not([disabled]):not(.disabled) { color: #333 !important; } .el-card button[data-action], .el-card button[data-target], button.btn-square[data-action], button.btn-mini-square[data-action], button.btn-square[data-target], button.btn-mini-square[data-target] { color: #eee; } .el-card button[data-action]:hover, .el-card button[data-target]:hover, button.btn-square[data-action]:hover, button.btn-mini-square[data-action]:hover, button.btn-square[data-target]:hover, button.btn-mini-square[data-target]:hover { box-shadow: 0px 0px 5px #777; color: #fff; opacity: 1; } .el-card button[data-action]:hover.btn-secondary, .el-card button[data-target]:hover.btn-secondary, button.btn-square[data-action]:hover.btn-secondary, button.btn-mini-square[data-action]:hover.btn-secondary, button.btn-square[data-target]:hover.btn-secondary, button.btn-mini-square[data-target]:hover.btn-secondary { color: #fff;  } .el-card button[data-action] > i, .el-card button[data-target] > i, button.btn-square[data-action] > i, button.btn-mini-square[data-action] > i, button.btn-square[data-target] > i, button.btn-mini-square[data-target] > i { transition: 0.3s all ease; } .el-card button[data-action] > i.overlay, .el-card button[data-target] > i.overlay, button.btn-square[data-action] > i.overlay, button.btn-mini-square[data-action] > i.overlay, button.btn-square[data-target] > i.overlay, button.btn-mini-square[data-target] > i.overlay { position: absolute; top: 7px; left: 5px; } .el-card button[data-action] > i.underlay, .el-card button[data-target] > i.underlay, button.btn-square[data-action] > i.underlay, button.btn-mini-square[data-action] > i.underlay, button.btn-square[data-target] > i.underlay, button.btn-mini-square[data-target] > i.underlay { position: absolute; bottom: 7px; right: 5px; opacity: 0.7; } .el-card button[data-action="create"], .el-card button[data-target="create"], .el-card button[data-action="clean"] { background: #75c277;  } .el-card button[data-action="save"], .el-card button[data-target="save"] { background: #408DCB;  } .el-card button[data-action="revert-all"], .el-card button[data-target="revert-all"] { background: #cb7e40; } .el-card button[data-action="delete"], .el-card button[data-target="delete"] { background: #D4423F;  } .el-card button[data-action="contact"], .el-card button[data-target="contact"], .el-card button[data-target="worker"] { background: #9b7dcb;  } .el-card button[data-action="notifications"], .el-card button[data-target="notifications"] { background: #ebb577;  } .el-card button[data-action="awards"], .el-card button[data-target="awards"], .el-card button[data-target="clock-times"] { background: #8094c1;  } .el-card button[data-action="security"], .el-card button[data-target="security"], .el-card button[data-target="documents"] { background: #7bcc7d; } .el-card button[data-action="calendar"], .el-card button[data-target="calendar"], .el-card button[data-target="notes"] { background: #64abb6; } .el-card button[data-action="comments"], .el-card button[data-target="comments"], .el-card button[data-action="spam"] { background: #BC7F24; } .participants { display: inline-block; } .participant-card { display: inline-block; margin-top: 10px; padding: 5px 15px 10px; min-height: 125px; background: #fafafa; border-radius: 3px; box-shadow: 0px 0px 3px #ddd; vertical-align: top; transition: 0.3s all ease; } body.dark .participant-card { background: #282A2F; box-shadow: 0px 0px 3px #333; } .participant-card.unsaved { background-color: #eee; } .btn-primary:hover { background: #2f71a9; } .confirm-btns {  } .confirm-btns button { width: 125px; font-size: 12px; } .btn-cancel { background: #c8c8c8; color: #555; } body.dark .btn-cancel { background: #555555; color: #ddd; } body.dark .btn-cancel:hover { background: #4c4c4c; color: #eee; } .btn-secondary:hover, .btn-cancel:hover { background: #e8e8e8; } .el-record { position: relative; display: inline-block; width: auto; padding-bottom: 5px; transition: 0.3s all ease; z-index: 1; } .el-record[data-id][data-id=""] input.form-control, .el-record[data-uuid][data-uuid=""] input.form-control { border-color: #2aa743; } .el-record > .btn-group > button.disabled { cursor: pointer !important; } .el-record > .btn-group > button > i { transition: 0.3s all ease; animation-duration: 0.5s; } .el-record > .btn-group > button > i.fa-check, .el-record > .btn-group > button > i.fa-plus { color: #28a745; } .el-record > :not(.p-beneath) { z-index: 1; } .el-record > .p-beneath { position: absolute !important; bottom: 0px; display: block; width: 100%; height: 75px; padding: 0px; opacity: 0; pointer-events: none; transition: 0.3s all ease; z-index: -1; } .el-record > .p-beneath > button { position: absolute; bottom: 0px; transform: translate(-50%, 50%); transition: 0.3s all ease; z-index: 2; } .el-record > .p-beneath .curtain { padding: 15px; background: #fafafa; overflow: auto; } body.dark .el-record > .p-beneath .curtain { background: #232323; } .el-record > .p-beneath .curtain > button:first-child { position: fixed; bottom: 0px; } .el-record > .p-beneath .curtain > div.contents { padding-bottom: 25px; } .el-record.pending-delete:not(.confirmed-delete) { padding-bottom: 100px; } .el-record.pending-delete:not(.confirmed-delete) input.form-control { border-color: #f47b67; } body.dark .el-record.pending-delete:not(.confirmed-delete) input.form-control { border-color: #f47b67; } .el-record.pending-delete:not(.confirmed-delete) .p-beneath {  opacity: 1; pointer-events: all; } .el-record > .btn-group > input.form-control, .el-record > .btn-group > button:not([data-action="delete"]) { transform-origin: right center; } .el-record.confirmed-delete > .btn-group > button:not([data-action="delete"]) { transition-delay: 0.3s; } .el-record.confirmed-delete > .btn-group > input.form-control, .el-record.confirmed-delete > .btn-group > button:not([data-action="delete"]) { transform: scaleX(0); }  .sheet { position: absolute; top: 0px; left: 0px; margin: 50px auto; padding: 25px; background: #f0f0f0; border-radius: 10px; transition: 0.3s all ease; } body.dark .sheet { background: #191B1C; } .sheet:first-child { margin-left: 50px; } .sheet.active { background: #e8f1fc; } body.dark .sheet.active { background: #282a2f; } .sheet .sheet { margin: 83px 5px; }   .modal-fullscreen .btn-dismiss, .material-prompt .btn-dismiss { position: absolute; top: 35px; right: 35px; width: 85px; height: 85px; padding: 25px !important; font-size: 35px; text-align: center; } .material-prompt .btn-dismiss { top: -10px; right: -10px; }  .prompt-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.25); z-index: 1050; transition: 0.3s all ease; } .material-prompt { position: absolute; top: 50%; left: 50%; width: 85%; max-width: 400px; min-height: 45px; padding: 20px; border-radius: 15px; text-align: center; box-shadow: 0px 0px 10px #000; overflow: hidden; opacity: 0; transform: translateX(-50%) translateY(-50%) scale(0); transition: 0.5s all ease; } @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) { .material-prompt { padding: 15px 13px; } .material-prompt > .btn-display > button { padding: 2px 10px 3px; } } .prompt-backdrop:not(.d-none) > .material-prompt { opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1); } .material-prompt::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; width: 100%; height: auto; background: #223947; box-shadow: 0px 0px 10px #000; filter: blur(25px); opacity: 0.95; z-index: -5; } .material-prompt > h3 { margin-bottom: 5px; } .material-prompt > span { display: block; margin-bottom: 10px; } .material-prompt > .btn-display { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 2px solid rgba(0, 0, 0, 0.15); } .material-prompt > .btn-display > button { min-width: 35%; margin: 0 5px; } .material-prompt > .btn-display > button:first-child { margin-left: 0px; } .material-prompt > .btn-display > button:last-child { margin-right: 0px; }  .overlay-revelation { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; padding: 10px; background: #202020; opacity: 1; overflow-y: scroll; transition: 0.3s all ease; z-index: 10; } .overlay-revelation.hidden, .overlay-revelation.hidden-scale { opacity: 0; } .overlay-revelation.fullscreen { position: fixed; height: 100vh; background: rgba(15, 15, 15, 0.75); } .overlay-revelation.quarter, .overlay-revelation.last-quarter { min-height: 25%; height: auto; } .overlay-revelation.third, .overlay-revelation.last-third { min-height: 33%; height: auto; } .overlay-revelation.half, .overlay-revelation.last-half { min-height: 50%; height: auto; } .overlay-revelation.last-quarter, .overlay-revelation.last-third, .overlay-revelation.last-half { top: auto; bottom: 0px; } .overlay-revelation.last-quarter > .notification, .overlay-revelation.last-third > .notification, .overlay-revelation.last-half > .notification { position: absolute; top: auto; bottom: 0px; } .overlay-revelation > button[data-action="close"] { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; padding-top: 5px; background: #282a2f; border: 0px; border-radius: 50%; z-index: 2; } .overlay-revelation > button[data-action="close"]:hover { background: #383a3f; } .overlay-revelation > button[data-action="close"] > i { color: #707070; font-size: 25px; transition: 0.3s all ease; } .overlay-revelation > button[data-action="close"]:hover > i { color: #a0a0a0; } .overlay-revelation.overlay-notify { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), transparent); } .overlay-revelation.overlay-notify.last-quarter, .overlay-revelation.overlay-notify.last-third, .overlay-revelation.overlay-notify.last-half { background: linear-gradient(to top, rgba(0, 0, 0, 0.15), transparent); } body.dark .overlay-revelation.overlay-notify { background: linear-gradient(to bottom, #101010, transparent); } body.dark .overlay-revelation.overlay-notify.last-quarter, body.dark .overlay-revelation.overlay-notify.last-third, body.dark .overlay-revelation.overlay-notify.last-half { background: linear-gradient(to top, #101010, transparent); } .overlay-revelation.overlay-notify .notification { display: block; width: calc(100% - 50px);  margin: 25px; padding: 15px 10px 20px; background: #202020; border-radius: 5px; box-shadow: 0 0 3px #101010; color: #fff; font-size: 16px;  pointer-events: none; text-align: center; word-wrap: break-word; transition: 3.5s all ease; z-index: 1; } .overlay-revelation.overlay-notify > button[data-action="close"] { transform: scale(0.75); } .overlay-revelation .actionable > h3 { max-width: 90%; margin-top: 5px; margin-bottom: 25px; } .overlay-revelation .actionable > span { display: block; margin-bottom: 25px; padding: 0px 10px; font-size: 18px; } .modal-fullscreen.information-overlay, .overlay-revelation.information-overlay { background: linear-gradient(to right, rgba(30, 49, 48, 0.65), rgba(39, 53, 43, 0.65)); } .modal-fullscreen.information-overlay.rounded-top { border-top-left-radius: 10px !important; border-top-right-radius: 10px !important; } .modal-fullscreen.information-overlay .container, .modal-fullscreen.information-overlay .container .row, .modal-fullscreen.information-overlay .container .row > div { height: 100%; } .modal-fullscreen.information-overlay .overlay-contents { position: absolute; bottom: 0px; left: 0px; width: 100%; padding: 15px; text-align: center; text-shadow: 0px 0px 5px #000; } .modal-fullscreen.information-overlay .overlay-contents h2 { font-size: 24px; } .modal-fullscreen.information-overlay .overlay-contents span { font-size: 20px; line-height: 1; }  .banner-stack { position: fixed; top: 25px; left: 0; width: auto; min-height: 75px; margin: 0 auto; z-index: 1150; } .banner-stack > .banner-actionable { width: calc(100% - 20px); max-width: 375px; display: flex; align-items: center; justify-content: center; margin: 0px auto 5px; padding: 10px; background: #223947; box-shadow: 0px 0px 10px #000; border-radius: 5px; opacity: 0; transform: translateY(-150px); transition: 0.3s all ease; } .banner-stack > .banner-actionable.visible { opacity: 1; transform: translateY(0px); } .banner-stack > .banner-actionable.danger { background: #f7a9ae; color: #BA1140; } .banner-stack > .banner-actionable > * { vertical-align: middle; } .banner-stack > .banner-actionable > div { max-width: 70%; } .banner-stack > .banner-actionable > b { display: block; } .banner-stack > .banner-actionable > span { display: block; line-height: 15px; } .banner-stack > .banner-actionable > button { width: 48px; height: 48px; border-radius: 3px; } .banner-stack > .banner-actionable > button > i { transition: 0.3s transform ease; }  .code-entry.time-input input { width: 40px; height: 24px; margin: 0px; padding: 10px 0px; font-size: 16px; } .code-entry > input { display: inline-block; width: 40px; margin: 5px 1px; padding: 10px; background: rgba(0, 0, 0, 0.1); border: 2px solid rgba(200, 255, 255, 0.2); border-radius: 7px; font-size: 25px; text-align: center; transition: 0.3s all ease-in-out; vertical-align: middle;  } body.dark .code-entry > input { color: #ccc; } .code-entry > input:hover, .code-entry > input:focus { background: rgba(0, 0, 0, 0.15); border: 2px solid #5c90d2; } .code-entry > .feedback { position: absolute; right: 0px; display: inline-block; padding: 10px; font-size: 25px; vertical-align: middle; } @media (min-width: 576px) { .code-entry > .feedback { transform: translateX(-60%); } } .code-entry > .feedback > i.hidden { transform: scale(0); } .code-entry > .feedback > i { transform: scale(1); transition: 0.4s all ease; } .code-entry > .feedback > i.hidden:not(:first-child) { transform: translateX(-50%) translateY(-50%) scale(0); } .code-entry > .feedback > i:not(:first-child) { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%) scale(1.25); } [data-state=affirmative] {  color: #339375; } [data-state=negative] {  color: #aa3333; }  .meta-hover { position: absolute; bottom: -2px; right: -1px; padding: 0px 10px; background: rgba(0, 0, 0, 0.65); border-radius: 3px; font-size: 15px; transition: 0.3s all ease; } .health-display { padding: 15px 15px 30px; background: #252239; text-align: center; } .health-display > div.status { position: relative; display: inline-block; padding: 10px; background: #3D4043; border: 1px solid #3a3a3a; border-radius: 5px; color: #ddd; font-size: 16px; z-index: 5; } .health-display > div.status > i { color: #fff; } .health-display > div.status[data-status="connected"] { background: #339375; } .health-display > div.status[data-status="connected"] span.connection { color: #339375; } .health-display > div.status[data-status="reconnecting"] { background: #FAC640; } .health-display > div.status[data-status="reconnecting"] span.connection { color: #FAC640; } .health-display > div.status[data-status="disconnected"] { background: #dc3545; } .health-display > div.status[data-status="disconnected"] span.connection { color: #dc3545; } .health-display > div.status > div { position: absolute; top: 100%; left: 50%; width: 250px; padding: 15px; background: #000; box-shadow: 0px 0px 3px #444; opacity: 0; transform: translateX(-50%) scale(0); transition: 0.3s all ease-in-out; } .health-display > div.status:hover > div { opacity: 1; transform: translateX(-50%) scale(1); } .health-display > div.status > div::before { content: ""; position: absolute; top: -5px; left: 50%; display: inline-block; width: 10px; height: 10px; background: #000; border-radius: 3px; transform: translateX(-50%) rotate(45deg);  } .health-display > div.status > div > span { display: block; }  .wheel-selection { position: relative; width: 100%; min-width: auto; max-width: 100%; height: 64px; margin: 0px; padding: 0px 15px; color: #CFCBC4; cursor: pointer; background: #fff; border: 2px solid transparent; border-radius: 5px; box-shadow: 0px 0px 5px #ccc; opacity: 1; user-select: none; transition: 0.3s all ease, 0s padding ease; -webkit-overflow-scrolling: touch;   } body.dark .wheel-selection { background: #1A1C1D; box-shadow: 0px 0px 5px #101010; } .wheel-selection.active { z-index: 10; } .wheel-selection > .wheel-hint, .wheel-selection > .wheel-active-hint { position: absolute !important; top: 30px; right: 10px; width: 40px; height: 40px; background: #ddd; color: #46c37b; border-radius: 50%; text-align: center; transform: translateY(-50%); transition: 0.3s all ease; z-index: 6; } body.dark .wheel-selection > .wheel-hint, body.dark .wheel-selection > .wheel-active-hint { background: #282a2f; } .wheel-selection > .wheel-hint > i, .wheel-selection > .wheel-active-hint > i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #649Dff;  font-size: 20px;  } .wheel-selection > .wheel-hint {  } .wheel-selection > .wheel-hint > i { color: #aaa; font-size: 32px; } body.dark .wheel-selection > .wheel-hint > i { color: #bbb; } .wheel-selection:not(.docked).active > .wheel-hint { color: #ddd;  transform: translateY(-50%) rotateX(180deg); } .wheel-selection > heading { position: absolute; top: 50%; left: 0px; width: calc(100% - 50px); padding: 0px 15px; color: #777; font-size: 17px; transform: translateY(-50%); transition: 0.3s all ease; z-index: 6; } .wheel-selection.active > heading, .wheel-selection > heading:has(~ .wheel-contents > .selected) { top: -25px; } .wheel-selection > .wheel-contents { position: absolute; top: 0px; right: 0px; width: 100%; height: 60px; background: #eee; overflow: hidden; transition: 0.3s all ease; z-index: 5; scrollbar-width: thin; scrollbar-color: #ccc #f7f7f7; } body.dark .wheel-selection > .wheel-contents { background: #222; } body.dark .wheel-selection > .wheel-contents { scrollbar-color: #232526 #1A1C1D; } .wheel-selection > .wheel-contents > div > div { padding: 3px; } .wheel-selection.docked { max-width: 316px; height: auto; min-height: 64px; padding: 0px; border: 0px; overflow: hidden; } .wheel-selection.docked > .wheel-contents { position: inherit; top: auto; right: auto; height: auto; border: 1px solid #ccc; overflow: visible; } .wheel-selection.docked > .wheel-contents > div { display: block; color: #444; } body.dark .wheel-selection.docked > .wheel-contents > div { color: #bbb; } .wheel-selection.docked > .wheel-active-hint { top: 6px; left: 9px; right: auto; width: 50px; height: 50px; margin-top: 0px; border-radius: 50%; transform: translateY(0px); transition: 0.4s all cubic-bezier(0.5, 1.5, 0.5, 0.9); } .wheel-selection > .wheel-active-hint + .wheel-contents > div > div { width: calc(100% - 52px); margin-left: 52px; } .wheel-selection:not(.disabled, .docked):hover > .wheel-contents, .wheel-selection:not(.disabled, .docked).active > .wheel-contents { border: 0px !important; box-shadow: 0px 0px 5px #ddd; z-index: 5; } body.dark .wheel-selection:not(.disabled, .docked):hover > .wheel-contents, body.dark .wheel-selection:not(.disabled, .docked).active > .wheel-contents { box-shadow: 0px 0px 5px #080808; } .wheel-selection.active:not(.docked) > .wheel-contents { height: 232px; overflow-y: scroll; } .wheel-selection > .wheel-contents > div { display: none !important; width: 100%; height: 64px; padding: 12px; background: #fff; border-bottom: 2px solid #eee; color: #444; transition: 0.3s all ease; } body.dark .wheel-selection > .wheel-contents > div { background: #1A1C1D; border-bottom: 2px solid #141414; } body.dark .wheel-selection > .wheel-contents > div { color: #CFCBC4; } .wheel-selection > .wheel-contents > div.d-flex { display: none; justify-content: center; } .wheel-selection > .wheel-contents > div > * {  line-height: 1.25; } .wheel-selection.active > .wheel-contents > div, .wheel-selection > .wheel-contents > div.selected { display: inline-block !important; } .wheel-selection.active > .wheel-contents > div.d-flex, .wheel-selection > .wheel-contents > div.selected.d-flex { display: flex !important; } .wheel-selection > .wheel-contents > div:not(.disabled):hover, .wheel-selection > .wheel-contents > div.selected { background: #f5f6f7; color: #4eb276; } body.dark .wheel-selection > .wheel-contents > div:not(.disabled):hover, body.dark .wheel-selection > .wheel-contents > div.selected { background: #1e2021; } .wheel-selection.docked > .wheel-contents > div:not(.selected):hover { color: #222; } body.dark .wheel-selection.docked > .wheel-contents > div:not(.selected):hover { color: #eee; } .wheel-selection > .hood-notification { position: absolute; top: 100%; left: -2px; width: calc(100% + 4px); padding: 10px 15px; background: #438adb;  border: 2px solid #438adb !important; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; color: #fff;  opacity: 0; pointer-events: none; transition: 0.3s all ease; z-index: 1; } .wheel-selection.notice { border: 2px solid #438adb !important; } .wheel-selection.notice > .hood-notification { opacity: 1; pointer-events: inherit; }  .slide-down-out { transform: translate(-50%, 400px) !important; } .cal-select { position: fixed; bottom: 0px; left: 50%; width: 100%; max-width: 525px; height: 450px; padding: 15px; background: #fff; border-top-left-radius: 10px; border-top-right-radius: 10px; box-shadow: 0px 0px 5px #aaa; overflow: hidden; transform: translateX(-50%); transition: 0.4s transform ease, 0.4s height ease; z-index: 10; } body.dark .cal-select { background-color: #32353B; box-shadow: 0px 0px 5px #151515; } .cal-select.datetime { height: 515px; } .cal-select.date-collapsible .cal-nav, .cal-select.date-collapsible .date-spread { transition: 0.3s all ease; } .cal-select.date-collapsible.collapsed { height: 215px; } .cal-select.date-collapsible.collapsed .cal-nav, .cal-select.date-collapsible.collapsed .date-spread { opacity: 0; } .cal-select > div.cal-nav { padding-bottom: 10px; transition: 0.3s transform ease-in-out; } .cal-select > div.cal-nav::before { content: ""; position: absolute; top: 0px; left: 0px; display: inline-block; width: 200px; height: 100%; background: linear-gradient(to right, #f9f9f9, transparent); opacity: 0; pointer-events: none; transition: 0.3s all ease-in-out; z-index: 1; } body.dark .cal-select > div.cal-nav::before { background: linear-gradient(to right, #32353B, transparent); } .cal-select > div.cal-nav.shift-left { transform: translateX(-25%); } .cal-select > div.cal-nav.shift-left::before { opacity: 1; transform: translateX(50px); } .cal-select > div.cal-nav.shift-left .month-hud { transform: scale(0.75) translateX(50px); } .cal-select > div.cal-nav > span { display: inline-block; width: 48%; padding: 5px; background: #f5f5f5; border: 1px solid #eee; border-radius: 5px; font-size: 18px; text-align: center; transition: 0.3s all ease-in-out; } body.dark .cal-select > div.cal-nav > span { background-color: #303030; border-color: #2c2c2c; } .cal-select > div.cal-nav > span:last-child { float: right; } .cal-select > div.cal-nav > span.disabled { background: #f3f3f3; color: #999; } .cal-select > div.cal-nav > span > span { transition: 0.3s all ease-in-out; vertical-align: middle; } body.dark .cal-select > div.cal-nav > span > span { color: #ccc; } .cal-select > div.cal-nav > span > i { float: left; padding: 5px; color: #408DCB; font-size: 18px; opacity: 0.75; transition: 0.3s all ease-in-out; vertical-align: middle; } .cal-select > div.cal-nav > span > i:hover { opacity: 1; } .cal-select > div.cal-nav > span > i:last-child { float: right; padding: 5px; } .cal-select > div.cal-nav > span.month-hud > i, .cal-select > div.cal-nav > span.year-hud { cursor: pointer; } .cal-select > div.cal-nav > span.month-hud.disabled > span { color: #aaa; } .cal-select > div.cal-nav > span.month-hud.disabled > i { color: #aaa; } .cal-select > div.cal-nav > span.year-hud { box-shadow: 0px 0px 3px transparent; } .cal-select > div.cal-nav > span.year-hud:not(.active) > i:first-child { color: transparent; } .cal-select > div.cal-nav > span.year-hud:not(.active) > i:last-child { transform: rotate(90deg); } .cal-select > div.cal-nav > span.year-hud.active { background: #f8f9fa; border: 1px solid #85b5d8; border-radius: 3px; box-shadow: 0px 0px 3px #eee; } body.dark .cal-select > div.cal-nav > span.year-hud.active { background: #353535; border: 1px solid #315877; box-shadow: 0px 0px 3px #222; } .cal-select > .cal-opt, .cal-select > .time-opt { width: 100%; margin-bottom: 15px; padding: 10px 15px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 10px; transition: 0.3s all ease-in-out; z-index: 1; } body.dark .cal-select > .cal-opt, body.dark .cal-select > .time-opt { background-color: #2c2c2c; } .cal-select > .cal-opt:last-child, .cal-select > .time-opt:last-child { position: fixed; left: 50%; bottom: 0px; width: calc(100% - 30px); margin-top: 15px; transform: translateX(-50%); } .cal-select > .cal-opt > ul, .cal-select > .time-opt > ul { margin: 6px; } .cal-select > .cal-opt > ul > li, .cal-select > .time-opt > ul > li { height: 44px; padding: 9px 9px 0px 9px; background: #fff; border-bottom: 1px solid #ccc; color: #408DCB; font-size: 19px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-select > .cal-opt > ul > li.msg, .cal-select > .time-opt > ul > li.msg { height: auto; min-height: 44px; padding: 13px; color: #999; font-size: 12px; } .cal-select > .cal-opt > ul > li:not(.msg), .cal-select > .time-opt > ul > li:not(.msg) { cursor: pointer; } .cal-select > .cal-opt > ul > li:first-child, .cal-select > .time-opt > ul > li:first-child { border-top-left-radius: 5px; border-top-right-radius: 5px; } .cal-select > .cal-opt > ul > li:last-child, .cal-select > .time-opt > ul > li:last-child { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-bottom: 0; } .cal-select > .cal-opt > span, .cal-select > .time-opt > span, .cal-select > .cal-opt > div[data-role="revert-value"], .cal-select > .time-opt > div[data-role="revert-value"], .cal-select > .cal-opt > button, .cal-select > .time-opt > button { display: inline-block; padding: 0px 10px; background: transparent; border: 0px solid transparent; border-radius: 5px; font-size: 16px; vertical-align: middle; transition: 0.3s all ease-in-out; } .cal-select > .cal-opt > span[data-role], .cal-select > .time-opt > span[data-role], .cal-select > .cal-opt > div[data-role="revert-value"][data-role], .cal-select > .time-opt > div[data-role="revert-value"][data-role], .cal-select > .cal-opt > button[data-role], .cal-select > .time-opt > button[data-role], .cal-select > .cal-opt > span[data-action]:hover, .cal-select > .time-opt > span[data-action]:hover, .cal-select > .cal-opt > div[data-role="revert-value"][data-action]:hover, .cal-select > .time-opt > div[data-role="revert-value"][data-action]:hover, .cal-select > .cal-opt > button[data-action]:hover, .cal-select > .time-opt > button[data-action]:hover { background: #f7f7f7; } body.dark .cal-select > .cal-opt > span[data-role], body.dark .cal-select > .time-opt > span[data-role], body.dark .cal-select > .cal-opt > div[data-role="revert-value"][data-role], body.dark .cal-select > .time-opt > div[data-role="revert-value"][data-role], body.dark .cal-select > .cal-opt > button[data-role], body.dark .cal-select > .time-opt > button[data-role], body.dark .cal-select > .cal-opt > span[data-action]:hover, body.dark .cal-select > .time-opt > span[data-action]:hover, body.dark .cal-select > .cal-opt > div[data-role="revert-value"][data-action]:hover, body.dark .cal-select > .time-opt > div[data-role="revert-value"][data-action]:hover, body.dark .cal-select > .cal-opt > button[data-action]:hover, body.dark .cal-select > .time-opt > button[data-action]:hover { background: #252525; } .cal-select > .cal-opt > span, .cal-select > .time-opt > span { color: #444; } body.dark .cal-select > .cal-opt > span, body.dark .cal-select > .time-opt > span { color: #eee; } .cal-select > .cal-opt > button, .cal-select > .time-opt > button { color: #408DCB; cursor: pointer; } .cal-select > .cal-opt > button[data-action="finish"], .cal-select > .time-opt > button[data-action="finish"] { font-weight: bold; } .cal-select > .year-spread { height: 250px; padding-top: 5px; overflow-y: scroll; -webkit-overflow-scrolling: touch; transition: 0.3s all ease-in-out; } .cal-select > .year-spread span { position: relative; display: block; padding: 20px; background: #eee; border: 1px solid transparent; border-radius: 5px; color: #888; cursor: pointer; font-size: 16px; overflow: hidden; vertical-align: middle; transition: 0.3s all ease-in-out; } body.dark .cal-select > .year-spread span { background: #2c2c2c; color: #ccc; } .cal-select > .year-spread span:hover, .cal-select > .year-spread span.active { background: #f8f9fa; color: #222; } body.dark .cal-select > .year-spread span:hover, body.dark .cal-select > .year-spread span.active { background: #252525; color: #eee; } .cal-select > .year-spread span:hover { border: 1px solid #dee2e6; } .cal-select > .year-spread span.active { border: 1px solid #85b5d8; } .cal-select > .year-spread span.active body.dark { border: 1px solid #408dcb; } .cal-select > .year-spread span > label { position: absolute; top: 0px; right: 0px; height: 100%; padding: 12px 20px; background: #f0efed; border-left: 2px solid #dadada; color: #bbb; font-size: 26px; font-style: italic; } body.dark .cal-select > .year-spread span > label { background: #292929; border-left-color: #252525; color: #555; } .cal-select > .date-spread { transition: 0.3s all ease-in-out; } .cal-select > .date-spread > ul { display: flex; align-items: stretch; flex-direction: row; justify-content: space-between; width: 100%; margin: 5px 0px; padding-left: 0px; } .cal-select > .date-spread > ul.header { margin-top: 15px; font-weight: bold; } .cal-select > .date-spread > ul > li { display: inline-block; width: 40px; height: 30px; cursor: pointer; font-size: 15px; text-align: center; vertical-align: middle; transition: 0.3s all ease-in-out; } body.dark .cal-select > .date-spread > ul > li { color: #ccc; } .cal-select > .date-spread > ul > li.sabbath, body.dark .cal-select > .date-spread > ul > li.sabbath { color: #dc3545; } .cal-select > .date-spread > ul.header > li { height: 25px; background: #f1f1f1; border-bottom: 2px solid #408DCB; } body.dark .cal-select > .date-spread > ul.header > li { background: #2c2c2c; } .cal-select > .date-spread > ul:not(.header) > li { border: 2px solid transparent; border-radius: 3px; } .cal-select > .date-spread > ul:not(.header) > li:hover { border: 2px solid #408DCB; } .cal-select > .date-spread > ul:not(.header) > li.active { background: #408dcb; color: #fff; } .cal-select > .date-spread > ul > li.today { position: relative; background-color: #eee; border: 2px solid #408DCB; border-radius: 3px; } body.dark .cal-select > .date-spread > ul > li.today { background-color: #313131; } body.dark .cal-select > .date-spread > ul > li.today.active { background: #408dcb; }  div[data-popover] { position: absolute; width: 100%; max-width: 300px; height: 40vh; min-height: 325px; margin: 15px 0px 15px 50%; background: #222; border-radius: 10px; box-shadow: 0px 0px 3px #111; color: #ccc; transform: translateX(-50%); transition: 0.3s all ease-in-out; z-index: 1; } div[data-popover].abs-xy-middle { left: 0px; box-shadow: 0px 0px 50px 25px #111; transform: translateX(-50%) translateY(-50%) scale(1); } div[data-popover].abs-xy-middle.hidden-scale { transform: translateX(-50%) translateY(-50%) scale(0); } div[data-popover].abs-x-middle { left: 0px; box-shadow: 0px 0px 50px 25px #111; transform: translateX(-50%) scale(1); } div[data-popover].abs-x-middle.top { top: 0px; } div[data-popover].hidden-scale { transform: translateX(-50%) scale(0); } div[data-popover].hidden-scale.top { transform: translateX(-50%) translateY(-50%) scale(0); } div[data-popover].hidden-scale.bottom { transform: translateX(-50%) translateY(50%) scale(0); } div[data-popover].hidden-scale.right { transform: translateX(0%) scale(0); } div[data-popover].hidden-scale.left { transform: translateX(-100%) scale(0); } div[data-popover] > button[data-action] { bottom: 10px !important;  width: 40%; max-width: 350px; height: 32px; padding: 5px; border-radius: 10px; opacity: 0.85; overflow: hidden; text-align: right; text-decoration: none; transition: 0.3s all ease-in-out; z-index: 2; } div[data-popover] > button[data-action]::after { content: ""; position: absolute; top: 0; left: -100%; width: calc(100% + 45px); height: 100%; background-color: rgba(0, 0, 0, 0.1); transform: skewX(-10deg); transition: 0.3s all ease-in-out; z-index: -1; } div[data-popover] > button[data-action].left { left: 10px; } div[data-popover] > button[data-action].right { right: 10px; } div[data-popover] > button[data-action]:not(.left, .right) { transform: translateX(-50%); } div[data-popover] > button[data-action] > * { transition: 0.3s all ease-in-out; } div[data-popover] > button[data-action] > i { position: absolute; top: 0%; left: 5px; width: 35px; margin-top: -8px; background: transparent; border-radius: 0px; opacity: 0.75; text-align: center; } div[data-popover] > button[data-action] > span { padding-right: 10px; color: #fff; font-size: 15px; text-decoration: none; text-transform: none; } div[data-popover] > button[data-action]:hover, div[data-popover] > button[data-action].pressed, div[data-popover] > button[data-action][disabled] { opacity: 1;  } div[data-popover] > button[data-action]:hover::after, div[data-popover] > button[data-action].pressed::after, div[data-popover] > button[data-action][disabled]::after { background: #217e68; transform: translateX(100%) skewX(-10deg); } div[data-popover] > button[data-action]:hover > i, div[data-popover] > button[data-action].pressed > i, div[data-popover] > button[data-action][disabled] > i { opacity: 1; } div[data-popover] > button[data-action="cancel-changes"] { background: linear-gradient(to right, #DC3545, #861B2D); text-align: left; } div[data-popover] > button[data-action="cancel-changes"]::after { left: auto; right: -100%; } div[data-popover] > button[data-action="cancel-changes"] > i { left: auto; right: 5px; } div[data-popover] > button[data-action="cancel-changes"] > span { padding-left: 10px; padding-right: auto; } div[data-popover] > button[data-action="cancel-changes"]:hover::after, div[data-popover] > button[data-action="cancel-changes"].pressed::after, div[data-popover] > button[data-action="cancel-changes"][disabled]::after { background: darkred; transform: translateX(-100%) skewX(-10deg); } div[data-popover] > button[data-action="accept-changes"] { background: linear-gradient(to right, #2A9F7F, #26735E); } div[data-popover] > button[data-action="accept-changes"]::after { background-color: #175C51; } .tab-page + div[data-popover] { top: 0px; left: 0px; max-width: none; margin: 0; transform: none; z-index: 15; } [data-popover] iframe { width: 100%; height: 100%; background: #242424; border: 0px; }  #btnTicketRequest.active > i { background: #3f93e3 !important; } #btnTicketRequest ~ [data-popover] { position: fixed; top: 50%; left: 5%; width: 70vw; max-width: none; height: 70vh; transform: translate(-50%, -50%); z-index: 750; } .ticket-case-card h2 { font-size: 20px; } .ticket-case-card input, .ticket-case-card textarea { margin: 15px auto 30px; }  .msg-status { position: absolute; bottom: calc(100% - 25px); right: 30px; max-width: 80%; padding: 4px 10px 6px;  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;  font-size: 1rem; font-weight: 400; line-height: 1; text-transform: none; transition: 0.3s all ease; z-index: 1; } .msg-status.top-left { left: 15px; right: auto; } .msg-status.top-left.shifted { left: 30px; right: auto; } .msg-status.bottom-left { top: calc(100% + 25px); left: 15px; right: auto; bottom: auto; } .msg-status.bottom-left.shifted { top: calc(100% + 25px); left: 30px; right: auto; bottom: auto; } .msg-status:before { content: ""; position: absolute; bottom: -8px; right: 7px; display: block; width: 0px; height: 0px; border-top: 8px solid #FFF3CD; border-left: 8px solid transparent; border-right: 8px solid transparent; } .msg-status.top-left:before, .msg-status.bottom-left:before { left: 7px; right: auto; } .msg-status.bottom-left:before { top: -8px; bottom: 0px; border-top: 0px; border-bottom: 8px solid #FFF3CD; } .msg-status.alert-info { background: #D9EDF7; color: #31708f; } .msg-status.alert-info.top-left:before { border-top-color: #D9EDF7; } .msg-status.alert-info.bottom-left:before { border-bottom-color: #D9EDF7; }  .filter-set { width: 750px; background: linear-gradient(to bottom, #212224, #1d1f21); user-select: none; } .filter-set > .actionable { display: inline-block; margin-top: 8px; margin-bottom: 8px; cursor: pointer; text-align: center; } .filter-set > .actionable > b { display: inline-block;  margin: 3px 2px 3px 8px; padding: 0px 15px 2px; background: #313131; border-radius: 15px; transition: 0.3s all ease; } .filter-set > .actionable:hover > b, .filter-set > .actionable.active > b { background: #048C73; color: #fff; }  .status-label { display: inline-block; margin: 0px; padding: 7px 15px; border-radius: 3px;  color: #ddd; font-weight: 400; text-align: inherit; white-space: nowrap; }  ul.navbar-nav.tab-control { display: flex; align-items: stretch; flex-direction: row; justify-content: space-around; width: 100%;   margin: 0 auto 5px;  border-radius: 5px; overflow: hidden;  } ul.navbar-nav.tab-control > li { flex-grow: 1; flex-basis: 0; background: rgba(92, 144, 210, 0.75);  border: #5c90d2; color: #eee; cursor: pointer; text-align: center; transition: 0.3s all ease; } ul.navbar-nav.tab-control.emerald > li { background: rgba(42, 159, 127, 0.75);  border: 1px solid #2a9f7f; } ul.navbar-nav.tab-control > li:hover, ul.navbar-nav.tab-control > li.active { background: #5c90d2; color: #fff; } ul.navbar-nav.tab-control.glass > li.active { background: linear-gradient(135deg, #005fb8, #5c90d2); } ul.navbar-nav.tab-control.emerald > li:hover, ul.navbar-nav.tab-control.emerald > li.active { background: #2a9f7f; }  ul.navbar-nav.tab-control > li > a.nav-link { position: relative; display: block; padding: 20px 5px; color: #eee; text-decoration: none; overflow: hidden; transition: 0.3s all ease; } ul.navbar-nav.tab-control > li > a.nav-link:hover, ul.navbar-nav > li.active > a.nav-link { color: #fff; } ul.navbar-nav.tab-control li i { position: absolute; top: 50%; left: 50%; font-size: 94px; opacity: 0.15; transform: translate3d(-50%, -45%, 0) rotateZ(-7deg) scale(0.65); transition: 0.3s all ease; } ul.navbar-nav.tab-control li.active i { transform: translate3d(-50%, -30%, 0) rotateZ(-7deg); } ul.navbar-nav.tab-control li i.symmetry { transform: translate3d(-50%, -50%, 0) scale(0.65); } ul.navbar-nav.tab-control li.active i.symmetry { transform: translate3d(-50%, -50%, 0) scale(0.85); } ul.navbar-nav.tab-control > li > a span:not(.badge) { font-size: 20px; font-weight: bold; } ul.navbar-nav.tab-control > li > a > span.badge { display: inline-block; width: auto; margin: -3px 0 0 10px; padding: 3px 8px 5px; background: rgba(55, 58, 61, 0.5); border-radius: 3px; color: #ddd; vertical-align: middle; } .pane-scope { box-sizing: border-box; margin: 0px auto 5px; padding: 0px; background: #fcfcfc; overflow-x: hidden; overflow-y: hidden; text-align: left; } body.dark .pane-scope { background: #282A2F; } body.dark .pane-scope.glass { backdrop-filter: blur(1px); background: linear-gradient(135deg, #282A2F, #1e1f20); } .pane-scope.rounded { border-radius: 5px; } .pane-scope.lifted { box-shadow: 0px 0px 3px #ccc; } body.dark .pane-scope.lifted { box-shadow: 0px 0px 5px #101010; } .pane-scope.inset { box-shadow: 0px 0px 5px #dfdfdf inset; } body.dark .pane-scope.inset { box-shadow: 0px 0px 5px #010101 inset; } .pane-scope > div.scrollable { box-sizing: border-box; height: 100%; overflow-y: hidden; transition: 0.3s all ease; } .pane-scope > div.scrollable > div { box-sizing: border-box; display: inline-block; width: 100vw; height: 75vh; align-items: center; flex-direction: row; overflow-y: scroll; -webkit-overflow-scrolling: touch; vertical-align: top; } .pane-scope.mini > div.scrollable > div { height: auto; } .tab-page { position: relative; } .tab-page.padded { padding: 15px 15px 350px; } .pane-scope.mini .tab-page.padded { padding: 15px 15px 150px; } .tab-page ul { list-style-type: none; }  .btn-mst-wrapper { position: relative; display: inline-flex; align-items: center; height: 54px; border: 2px solid #e2e2e5; border-radius: 50px; box-shadow: 0px 0px 3px #000; transition: 0.3s all ease; } .btn-mst-wrapper:hover { background: #dadada; } body.dark .btn-mst-wrapper { border-color: #111; } body.dark .btn-mst-wrapper:hover { background: #111; } .btn-mst-wrapper [data-role="reveal-details"] { position: absolute; margin-top: 15px; transition: 0.5s all ease; } .btn-mst-wrapper [data-role="reveal-details"].fade-out-right { width: 0px; } .btn-mst-wrapper [data-role="reveal-details"] > * { display: none; } .btn-mst-wrapper [data-role="reveal-details"].revealed { width: 165px; } .btn-mst-wrapper [data-role="reveal-details"].revealed > * { display: inherit; } .btn-mst-wrapper [data-role="reveal-details"] b, .btn-mst-wrapper [data-role="reveal-details"] span { display: block; margin: 0px 15px; transition: 0.3s all ease; } .btn-mst-wrapper [data-role="reveal-details"] b:has(+span.fade-out-down) { transform: translateY(10px); } .btn-mst-wrapper:first-child [data-role="reveal-details"] b, .btn-mst-wrapper:first-child [data-role="reveal-details"] span { margin-left: 0px; } .btn-mst-wrapper:last-child [data-role="reveal-details"] { right: 0px; text-align: right; } .btn-mst-wrapper:last-child [data-role="reveal-details"] b, .btn-mst-wrapper:last-child [data-role="reveal-details"] span { margin-right: 0px; } .btn-multistate { background: #e2e2e5; outline: 0; overflow: hidden; text-align: left; transition: 0.3s all ease-in-out; } body.dark .btn-multistate { background: #1E2021; } .btn-multistate:hover { background: #d6d6dc; } body.dark .btn-multistate:hover { background: #252728; } .btn-multistate[disabled] { background: #9c9c9e; filter: grayscale(100%); opacity: 0.75; } .dark .btn-multistate[disabled] { background: #2a2c2e; } .btn-multistate[data-error] { box-shadow: 0px 0px 5px red; } .btn-multistate > .states { transition: 0.3s transform ease; } .btn-multistate.snap > .states { transition: none; } .btn-multistate > .states > i { display: inline-block; width: 100%; } .btn-multistate[disabled] > .states > i { color: #555; } .toggles-list { list-style-type: none; padding-left: 0px; } .toggles-list > * { position: relative; display: flex; align-items: center; justify-content: space-between; margin: 0px 0px 15px; padding: 10px; background: #ebe8e3; border: 2px solid rgba(10, 132, 255, 0); border-radius: 5px; box-shadow: 0 0 5px #cdcdcd; color: #bbb; cursor: pointer; overflow: visible; user-select: none; transition: 0.3s all ease; } body.dark .toggles-list > * { background: #222; border: 2px solid rgba(10, 132, 255, 0); box-shadow: 0 0 5px #191919; } .toggles-list > *:last-child {  } .toggles-list.compact > * { margin: 0px 0px 8px; padding: 4px 7px 5px; } .toggles-list > *:hover { background: #dedede; } body.dark .toggles-list > *:hover { background: #252525; color: #eee; } .toggles-list.labelized > * { display: inline-block; } .toggles-list.labelized.compact > * { height: 30px; margin: 0px 15px 25px 7px; padding: 0px; background: transparent; border-width: 0px; box-shadow: none; } .toggles-list.labelized.compact > * > .btn-multistate { position: absolute; top: 0px; left: 0px; min-width: 40px; width: 40px; height: 40px; transform: translate3d(-25%, -5px, 0); z-index: 1; } .toggles-list.labelized.compact > * > .mst-captions { position: absolute; top: -20px; left: 0px; width: 100%; } .toggles-list.labelized.compact > * > .mst-captions > * { position: absolute; top: 0px; right: 0px; display: block; padding: 0px 10px 4px; background: linear-gradient(#333, #222); border-top-right-radius: 5px; border-top-left-radius: 5px; font-size: 13px; opacity: 0; transform: translateY(100%); transition: 0.3s all ease; } .toggles-list.labelized.compact > * > .mst-captions > .selected { transform: translateY(0); opacity: 1; } .toggles-list.labelized.compact > * > span { position: relative; display: block; padding: 2px 10px 2px 35px; background: #222; border-radius: 5px; } .toggles-list > .on { background: #252525; border: 2px solid rgba(10, 132, 255, 0.25); box-shadow: 0 0 7px #111; color: #eee; } .toggles-list > .success { background: #165435; } .toggles-list > .info { background: #1E3D5C; } .toggles-list > .danger { background: #5C1E1E; } .toggles-list > [data-state=active] { background: #355373; } .toggles-list > [data-state=inactive] {  } .toggles-list > * > * { vertical-align: middle; } .toggles-list > * > div.row { width: 100%; } .toggles-list .dropdown-menu { padding: 0; } .toggles-list .dropdown-item { padding: 10px 15px 10px; background-color: rgba(0, 0, 0, 0); background-image: linear-gradient(to right, #2a2c2e, #2a2c2e, #3f3359, #685593);  background-size: 200% 100%; border: 0px; transition: 0.3s all ease, 0.4s background-position ease; } .toggles-list .dropdown-menu.blue-base .dropdown-item { background-image: linear-gradient(to right, #2a2c2e, #2a2c2e, #326fa8, #42A6E8); } .toggles-list .dropdown-item:hover, .toggles-list .dropdown-item:active { background-position: 100% 50%; color: #fff; } .toggles-list .dropdown-item.selected { background-position: 50% 50%; color: #fff; } .toggles-list > * > button, .btn-multistate, .btn-sphere, .toggles-list .dropdown-item > i { min-width: 50px; width: 50px; height: 50px; padding: 0px; border: 0px !important; border-radius: 50%; text-align: center; } .toggles-list .dropdown-item > i { min-width: 35px; width: 35px; height: 35px; padding-top: 10px; background: rgba(255, 255, 255, 0.1); } .toggles-list > * > button[data-state=affirmative].selected { background: #38393a; box-shadow: 0px 0px 3px #339375; } .toggles-list > *:not(.participant) > button[data-state=negative].selected { background: #38393a; box-shadow: 0px 0px 3px #5C1E1E; }  .toggles-list > * > .item-description { display: inline-block; max-width: 62%; } .toggles-list > * > .item-description > span:not(.d-block) { display: block; font-size: 13px; } .toggles-list > * > .float-right { margin-left: auto !important; } .list-toggle { display: flex; margin: 0px; padding: 0px; background: transparent; color: #408DCB; border: 0px; border-radius: 5px; } .list-toggle span { margin: 0px; padding: 0px 7px; background: rgba(0, 0, 0, 0.1); border: 1px solid #408DCB; font-weight: bold; transition: 0.3s all ease; } .list-toggle span:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .list-toggle span:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .list-toggle span:not(:first-child) { border-left: 1px solid #408DCB; } .list-toggle span.active { background: #408DCB; color: #fff; }  .clipboard-agnostic {  }  .manage-navbar { position: relative; } .navigation-tree { width: 165px; padding: 5px 16px; -webkit-appearance: none; background: #F0F0F0; border: 1px solid #e3e3e3; border-radius: 2px; overflow: hidden; } .nav-branches { position: absolute; top: 0px; left: 0px;  min-width: 165px; background-color: #f9f9f9; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); opacity: 0; pointer-events: none; z-index: 1; transition: 0.3s all ease; } .navigation-tree:hover .nav-branches {  opacity: 1; pointer-events: auto; } .nav-branches a { float: none; display: block; padding: 12px 16px; background: #F0F0F0; color: black; text-align: left; text-decoration: none; } .nav-branches a:hover { background-color: #CDFF66;  } .section-title > #btnAddEmployee { padding: 5px 15px; background: #f5f5f5; border: 2px solid #aa92A7; border-radius: 2px; font-size: 18px; outline: 0px; } .section-title > #btnAddEmployee:hover { border: 2px dashed #5AC144; } .create-inactive { transform: translateY(-235px); } .el-card.employee-card { min-height: 265px;  } .expanded-card { min-height: 550px !important; overflow-y: auto; transition: 0.3s all ease; } .expanded-sub-card {   height: 430px !important; } .employee-awards button.btn-expand.btn-mini-square {    margin: 0px 0px 0px 35px;     border: 1px solid transparent; border-radius: 7px; box-shadow: 0px 0px 5px transparent;  font-size: 20px; opacity: 0.85; } .btn-switchboard { margin-top: 100px; } .el-card .accolade-nominations { margin-bottom: 15px; padding: 0px 10px 25px; background: #ededed; box-shadow: 0px 0px 3px #408DCB; border-radius: 3px;  transition: 0.3s all ease-in-out; } .el-card .accolade-nominations.is-primed { box-shadow: 0px 0px 3px #D4423F; background: #ead8d8; } .el-card .accolade-nominations.is-primed div.meta { border-bottom: 1px solid #D4423F; } body.dark .el-card .accolade-nominations { background: #1E1F23; } body.dark .el-card .accolade-nominations.is-primed { background: #2a2225; } .el-card .accolade-nominations div.meta { margin-bottom: 10px; padding: 10px 0px; border-bottom: 1px solid #3C7EB4; transition: 0.3s all ease-in-out; } .el-card .accolade-nominations div.meta h4 { margin: 0px; text-align: center; } .el-card .accolade-nominations div.meta h5 { margin: 0px; text-align: center; } button[data-action="expand"] { background: #758EB4 !important; } button[data-action="add-nomination"] { background: #7bcc7d !important;  } button[data-action="delete-nomination"] { background: #D4423F !important;   } button[data-action="delete-nomination"].is-primed { background: #8c8acf !important; } button[data-action="delete-accolade"] { background: #D4423F !important;   } button[data-action="delete-accolade"].is-primed { background: #8c8acf !important;   } .nomination-edit { margin-bottom: 3px; } .input-mutable.nomination { width: 90%; background: transparent; border: 2px dashed #7892A7; border-radius: 2px;  } .input-mutable.nomination:hover, .input-mutable.pending { border-style: solid; } .input-mutable.nomination:focus {   background: rgba(255, 255, 255, 0.65);  border: 2px solid #5AC144; border-radius: 2px; }  .delete-step-1 { opacity: 0; } .btn-add-nomination { margin: 0px 0px 0px 10px !important; border: 1px solid transparent; border-radius: 7px; box-shadow: 0px 0px 5px transparent;  font-size: 20px; opacity: 0.85; } .btn-delete-nomination { margin: 0px 0px 0px 10px !important; border: 1px solid transparent; border-radius: 7px; box-shadow: 0px 0px 5px transparent;  transition: opacity 1s; font-size: 20px; opacity: 0.85; } .btn-accolade-history { margin: 10px 0px 0px 0px !important; border: 1px solid transparent; border-radius: 7px; box-shadow: 0px 0px 5px transparent;  font-size: 20px; opacity: 0.85; } .input-mutable.nomination.is-primed { border-color: #D4423F; } .accolade-nominations .batch-entry {   } .accolade-nominations .batch-entry:focus {  } .prettydropdown > ul.active > li.is-primed { border-color: #D4423F !important; background-color: #CDFF66 !important;  } .prettydropdown { border: clear solid 3px; } .prettydropdown > ul.is-primed { border-color: #D4423F !important; } .prettydropdown > ul.active > li.is-current-event-val {   background-color: #CDFF66 !important; opacity: 0.8; color: #000 !important; }   button[data-target].btn-mini-square .tooltip { top: 50px; left: 50%; padding: 2px 10px; background: rgba(0, 0, 0, 0.5); border-radius: 5px; transform: translateX(-50%) scale(0); transition: 0.3s all ease; } button[data-target].btn-mini-square .tooltip::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -7px; border-width: 7px; border-style: solid; border-color: transparent transparent rgba(0, 0, 0, 0.5) transparent; } button[data-target].btn-mini-square:hover .tooltip { transform: translateX(-50%) scale(1); opacity: 1; } button[data-target].btn-mini-square.active .tooltip { padding: 2px 10px 5px; }  .actions, .step-actions { position: absolute; top: 0px; left: 0px; width: calc(100% + 65px); height: calc(100% + 65px); text-align: center; z-index: -1; } .actions div[data-side], .step-actions div[data-side] { position: absolute; } .actions div[data-side] button, .step-actions div[data-side] button { animation-duration: 0.3s; transition: 0.15s all ease-in-out; } .actions div[data-side][data-side="bottom"], .step-actions div[data-side][data-side="bottom"] { bottom: 16px; left: calc(50% - 32px); transform: translateX(-50%); } .actions div[data-side][data-side="bottom"] button, .step-actions div[data-side][data-side="bottom"] button {  } .actions div[data-side][data-side="right"], .step-actions div[data-side][data-side="right"] { top: calc(50% - 32px); left: calc(100% - 65px); display: flex; flex-flow: column-reverse; transform: translateY(-50%); } .actions div[data-side][data-side="right"] button, .step-actions div[data-side][data-side="right"] button { display: block; } .actions button, .step-actions button { padding: 10px; background: transparent; border: 0; color: #cdcdcd; transition: 0.25s color ease; } .actions button[disabled], .step-actions button[disabled] { color: #ccc !important; cursor: not-allowed; } :hover > .actions button:hover[data-view], :hover > .actions button.active[data-view] { color: #47C7AE; } :hover > .actions button:hover[data-export], :hover > .actions button.active[data-export] { color: #60CDD7; } :hover > .actions button:hover[data-edit], :hover > .actions button.active[data-edit] { color: #ffc107; } :hover > .actions button:hover[data-flag], :hover > .actions button.active[data-flag] { color: #D159A2; } :hover > .actions button:hover[data-delete], :hover > .actions button.active[data-delete] { color: #dc3545; } .controls { transform: scale(0.75); transition: 0.3s all ease; } .controls.unfocused { transform: translate(-50%, -75%) scale(0.65); } .controls.ongoing button[data-central] { transform: scale(0.75); } .controls.ongoing button[data-secondary] { opacity: 0; transform: scale(0.5); } .controls.ongoing:hover button[data-secondary] { opacity: 0.5; transform: scale(0.5); } .controls button { width: 150px; height: 150px; padding: 0px; background: rgba(25, 25, 25, 0.5) !important; border-radius: 50%; transition: 0.3s all ease; } .controls button.b-dock { top: 100%; border-radius: 25px / 25px; opacity: 0.5; transition: 0.5s all ease; } .controls button.b-dock:hover { opacity: 1; } .controls button.b-dock i { transform: translateY(-70%); transition: 0.75s all ease; } .controls button i { margin-left: 5px; font-size: 45px; } .controls button span { position: absolute; top: 75%; left: 50%; display: block; width: 125%; padding: 5px 15px; background: #282a2c;  border-radius: 10px; box-shadow: 0px 0px 5px #111; font-size: 20px; pointer-events: none; opacity: 0; transform: scale(0.5) translateX(-50%) perspective(150px) rotate3d(0, 1, 0, -45deg); z-index: 1; } .controls button:hover span { opacity: 1; transform: translateX(-50%); }  @keyframes rotate { to { transform: translate(-50%, -50%) rotate(1turn); } } .node-system-content > div { display: block; font-size: 0px;  overflow: hidden; text-align: center; } .node-system-content > div.vertical { margin-top: -500px;  } .node-system-content > div.vertical > node { display: block; opacity: 1 !important; } .node-system-content > div.vertical > node[data-pos-index="0"] { transform: translateY(25%) scale(0.5); } .node-system-content > div.vertical > node[data-pos-index="1"] { transform: scale(0.75); } .node-system-content > div.vertical > node[data-pos-index="3"] { transform: scale(0.75); } .node-system-content > div.vertical > node[data-pos-index="4"] { transform: translateY(-25%) scale(0.5); } node { position: relative; display: inline-block; min-width: 225px; width: 250px; max-width: 500px; min-height: 250px; max-height: 300px; margin: 15px auto; padding: 15px 25px; background: #1e1f20; border-left: 3px solid #222; border-top-right-radius: 3px; border-bottom-right-radius: 3px; box-shadow: 0px 0px 10px #111; cursor: default; font-size: 20px; overflow-x: hidden; overflow-y: auto; transform: translate(0px, 0px); scrollbar-width: thin; transition: 0.75s all ease; vertical-align: middle; opacity: 0; transform: scale(0);  } node:not(.active):hover { border-left: 3px solid #999; opacity: 0.85; } node.active { border-left: 3px solid #5940c6; } node[data-pos-index="0"] { opacity: 0.5; transform: translateX(25%) scale(0.5); } node[data-pos-index="1"] { opacity: 0.75; transform: scale(0.75); } node[data-pos-index="2"] { opacity: 1; transform: none; } node[data-pos-index="3"] { opacity: 0.75; transform: scale(0.75);  } node[data-pos-index="4"] { opacity: 0.5; transform: translateX(-25%) scale(0.5);  } node > b { display: block; margin: -15px -25px 25px; padding: 5px 15px; text-overflow: wrap; } node.full-width > div.path > input { display: block; width: 100%; } node div.path div.edit-options { display: flex; max-width: 100%; } node div.path div.edit-options button[data-action] { flex-grow: 1; width: 0px; padding: 0px; border: 0px; transition: 0.3s all ease; } node div.path div.edit-options button[data-action] i { opacity: 0; transition: 0.3s all ease; } node div.path.edit-mode div.edit-options button[data-action] { width: 75px; } node div.path.edit-mode div.edit-options button[data-action] i { opacity: 1; } node div.path input { max-width: 100%; padding: 5px 10px; background: rgba(0, 0, 0, 0.15); border: 1px solid rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 4px #141414 inset; color: #eee; outline: 0; transition: 0.25s all ease; } node div.path input.full-width { width: 100%; } node div.path input.disabled { background: transparent; color: #ccc; } node div.path input.form-control { background: transparent; border: 1px solid #444; color: #ccc; } node div.path.active input { border: 1px solid #5940c5; } node div.path[data-is-completed] input { opacity: 0.5; } node div.path[data-is-completed] input::before { content: "\f00c"; position: absolute; left: 0; display: inline-block; width: 35px; color: #99b467; font-family: FontAwesome; } node div.path button:not(.btn-multistate) { min-width: 100px; padding: 0px 15px; background: #4d74a5; border-radius: 0.25rem; color: #ddd; transition: 0.3s all ease; } node div.path button:hover, node div.path.active button { background: #5c90d2; } node .tc-heading ul.navbar-nav.tab-control { border: 2px solid transparent; transition: 0.3s all ease; } node .tc-heading ul.navbar-nav.tab-control > li > a.nav-link { padding: 5px 5px; } node .tc-heading.active ul.navbar-nav.tab-control { border-color: #5940c6; } node .pane-scope, node .tab-page { background: #1e1f20 !important; }  .keypad { width: 222px; } .overlay-revelation .keypad { position: absolute; } .keypad > div { display: flex; justify-content: space-evenly; } .keypad > div > button { width: 64px; height: 64px; margin: 5px; padding: 15px; background: #181a1b; border: 1px solid #3c4144; color: #ddd; border-radius: 10px; font-size: 17px; } .keypad > div > button[data-action="backspace"] { background: #f44b56; } .keypad > div > button[data-action="save"] { background: #5c90d2; }