:root { --white: #ffffff; --navy: #173c49; --cream: #EAE3D5; --burgundy: #4A1528; --wine-deep: #4A0E2E; --wine-rich: #6B1D3A; --wine-blush: #D4A0B5; --grayBack: #dbe0e5; --lightBack: #f1f3f5; --midBack: #dee2e6; --darkGray: #343a40; --accent: #4A1528; --burgundy-lt: #6B2340; --accentHover: #6B2340; --border: rgba(74,21,40,0.15); --messageBad: #B22222; --messageGood: #2E6F40; --bg-primary: #284194; --owner1: rgba(201,168,76,0.18); --owner2: rgba(74,21,40,0.09); --bs-btn-font-size: .5rem; --lightBlue: #4FC1FF; --gold-lt: #E2C97E; --cream: #F5F0E8; --ink: #1C1008; --ink-mid: #3D2B1A; --cream-dk: #EAE3D5; --bs-table-border-color: #a6b5cc; --bs-navbar-active-color: #1C1008; --shadow: 0 4px 24px rgba(28,16,8,.01); --mist: #f9f7f3; --border-light: rgba(74, 14, 46, 0.12); --shadow-soft: 0 2px 12px rgba(74, 14, 46, 0.06); --radius-md: 12px; --border-subtle: rgba(74, 14, 46, 0.08); --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --cream-warm: #F5F0EB; --gold-pale: #F0E6D0; --wine-pale: #F2E4EB; --row-hover: 74,21,40; --row-selected: 74,21,40; } .card-header.bg-primary, .bg-primary, .btn-primary, h5.mb-4.text-white.bg-primary, .bg-primary { background-color: var(--burgundy) !important; border-color: var(--burgundy) !important; color: var(--white) !important; } .text-primary {color: var(--ink) !important;} .card-header, .modal-header, .step-title {font-family: "Cormorant", serif;} i.bi-trash:before {color: #fff!important;} .btn {font: 400 14px/1.3 "DM Sans", sans-serif;} .btn-outline-primary { --bs-btn-color: var(--burgundy) !important; --bs-btn-border-color: var(--burgundy) !important; --bs-btn-hover-bg: var(--burgundy) !important; --bs-btn-hover-border-color: var(--burgundy) !important; --bs-btn-active-bg: var(--burgundy) !important; --bs-btn-active-border-color: var(--burgundy) !important; --bs-btn-disabled-color: var(--burgundy) !important; --bs-btn-disabled-border-color: var(--burgundy) !important; } .btn-primary:disabled, .btn-primary[disabled], .btn.btn-disabled {background: var(--darkGray)!important;border-color: var(--darkGray)!important; cursor: not-allowed!important; opacity: .8;} .btn-primary:disabled:hover, .btn-primary[disabled]:hover, .btn.btn-disabled:hover {cursor: not-allowed!important;} .grecaptcha-badge { visibility: hidden; } .btn:hover {opacity: .8;} .badge.bg-danger, span[style*="color:#8B1A3D"], .badge.rounded-pill { background-color: var(--darkGray) !important; color: white !important; } .btn.btn-accent { background: var(--accent)!important;border-color: var(--accent)!important; color: #fff; } .btn.withID {display: flex; flex-direction: row; justify-content: center;} .avatar {background: #6B2340; color: var(--gold-lt)!important;} html, body {margin: 0; padding: 0; -webkit-text-size-adjust: 100%;} html, body {width: 100%; height: 100%} body {background: var(--cream); font: 400 14px/1.3 "DM Sans", sans-serif; color: var(--ink); text-align: center;display: flex; flex-direction: column;} form {height: 100%; margin: 0; padding: 0; cursor: default; display: flex; flex-direction: column;} .form-select, .form-control, .dateFont {font-family: "DM Mono", mono;} .form-label, .col-form-label {font: 400 14px/1.3 "DM Sans", sans-serif;} .form-label {font-weight: 600;} h5.mb-4.text-white.bg-primary {padding: 10px;} .skip-to-content.visually-hidden-focusable:focus {background: rgba(255,255,255,.8)!important; padding: 1em 2em!important; border: solid 1px var(--burgundy)!important; position: absolute; top: 0; left: 0; z-index: 9999999;} /*ICON FONTS*/ i.icon {font-style: normal;} i.icon:before, i.icon:after, #good.alert ul:before, #bad.alert ul:before {font-family: bootstrap-icons !important;} /*QTIP HELP*/ a.help i:before {background: var(--messageGood); content: '\e88e'; width: auto; display: inline-block; font-family: "Material Symbols Outlined"; font-size: 18px; color: #fff; line-height: 1em; border-radius: 50%; transition-property: background, color; transition-duration: .5s; animation-timing-function: ease; font-style: normal;} a.help:hover i:before, a.help:active i:before, a.help:focus i:before {background: var(--burgundy);} .formNote {font-size: .8em; font-style: italic;} .formNote.block {display: block;} .required {color: var(--messageBad);} /*CONTENT*/ .containerMain {padding-top: 80px;} .containerMain > .card {} main.main {padding-bottom: 50px; /*flex-grow: 1;*/ /*overflow: auto;*/ position: relative;} .full.interior {padding: 1px 10px 0; text-align: left;} .interior .container {margin-top: 60px;} ul.summaryList li {padding-left: 0; padding-right: 7px 13px; color: var(--ink-mid); font-size: 12.5px;} ul.summaryList li span label {text-align: left;} .summaryClub ul.summaryList li i:before {opacity: .5;} ul.summaryList li a {font-family: 'DM Mono', monospace; color: var(--burgundy); font-size: 13px;} .textPrimary {color: var(--accent);} .consumptionTrackingList {font-size: .8em; color: var(--lightBlue);} .bevSavvyHelp h2 {font-size: 20px; font-weight: 700;} .bevSavvyHelp h3 {font-size: 18px; font-weight: 700;} .bevSavvyHelp h4 {font-size: 16px;} .bevSavvyHelp li {margin-bottom: 1em;} .form-monetary { position: relative;} .form-monetary:before {content: '$'; position: absolute; top: 2.25rem; left: .75rem;} .form-monetary .form-control {padding-left: 1.5rem} .row > .form-monetary:before {top: 1.7rem; left: 1.5rem;} h5.bg-light, .card .bg-light {background: var(--cream)!important; color: var(--ink);} /*LOGIN PAGES*/ body.pageLogin { background: #e7ddcf; } .RadCaptcha_Default .validation label {color:#391475;} .validation #oCaptcha_CaptchaTextBoxLabel {font-size: 12px; font-weight: normal; font-style: italic; padding-top: 5px; text-align: left; width: 100%; } #oCaptcha_ctl00 {font-size: 11px; font-style: italic; color: #842029; } #oCaptcha_CaptchaImage {margin-bottom: 5px; border: solid 1px rgba(0,0,0,.25)} .itemCaptcha .validation, .itemCaptcha .validate {position: relative;} .itemCaptcha input[type="text"] {display: block; width: 100%; padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--bs-body-color); -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--bs-body-bg); background-clip: padding-box; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;} body.pageLogin .alert {padding-bottom: 1rem!important;} @media (max-width: 768px) { .container, .container-md, .container-sm { max-width: 96%; } } .hideText {width: 1px; height: 1px; display: block; position: absolute; left: -999999em;} a {color: var(--accent);} a:visited {color: inherit;} a:hover, a:active {color: #000; text-decoration: none;} a:focus {outline: solid #000 1px;} /*TELERIK*/ .RadUpload.bottleUpload .ruBrowse, .RadUpload.bottleUpload #fileUpload { height: 26px !important; background-image: none !important; background: var(--accent) !important; border-radius: 0 6px 6px 0 !important; padding: 3px 20px 0px !important; width: auto !important; font-size: .9em !important; color: #fff !important; text-transform: uppercase !important; line-height: 24px !important; border: solid 1px var(--navy); display: inline-block !important; clear: both !important; white-space: nowrap; cursor: pointer; transition-property: background, color; transition-duration: .5s; animation-timing-function: ease; } .RadUpload.bottleUpload .ruRemove { height: 26px !important; background-image: none !important; background: #ffffff !important; border-radius: 6px !important; padding: 0px 10px 7px !important; width: auto !important; color: #dc3545 !important; text-transform: uppercase !important; line-height: 24px !important; border: solid 1px #dc3545; display: inline-block !important; clear: both !important; white-space: nowrap; cursor: pointer; transition-property: background, color; transition-duration: .5s; animation-timing-function: ease; } .RadUpload.bottleUpload .ruFileLI .ruButton.ruRemove::before { content: '\f659' !important; font-family: bootstrap-icons !important; font-size: 1em !important; height: 26px !important; display: inline-block; margin-right: 1em !important; margin-top: 2px; line-height: 28px; } .uploadLabel .formNote {font-size: .8em!important;} .card-header .sub-header {font-family: "DM Sans", Arial,Helvetica,sans-serif; font-size: 12px; color: rgba(255,255,255,0.55);} /*BUTTONS*/ .btn { padding: 6px 16px; border-radius: 6px; font-size: 12px; font-weight: 400; text-decoration: none; text-transform: uppercase; cursor: pointer;} .btn-primary {background-color: var(--accent); border-color: var(--accent);} .btn-accent { background: var(--accent); color: white; display: inline-block;} .btn-accent:hover { background: var(--accentHover); } .btn-accent i.icon:before {margin-left: .25em; font-size: 1.25em; display: block; float: right; line-height: 1.1em;} .btn-accent.btn-accent-add i.icon:before {content: '\e145';} .btn-sm i.icon:before {margin-right: .25em; display: inline-block;} .btn-sm.btn-sm-back i.icon:before {content: '\e5c4';} .btn-group-sm > .btn, .btn-sm { padding: .3rem .5rem; } a.btn.btn-light:visited {color: var(--burgundy);} .btn-cancel { background: transparent; color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; padding: 5px 14px; font-size: 12.5px; font-weight: 500; cursor: pointer; font-family: 'DM Sans', sans-serif; display: flex; align-items: center; gap: 5px; transition: background 0.15s, color 0.15s; } .btn-cancel:hover {background: rgba(255,255,255,0.1); color: #fff;} /*.btn-danger { background: rgba(255,100,100,0); }*/ .dropDown label {line-height: 2.2em} ul.formList, #askselectedTokens, #askavailableTags {margin: 0; padding: 0; list-style: none;} #askselectedTokens li, #askavailableTags li {margin: 0 5px 5px 0;} input[type='checkbox']:checked, input[type='radio']:checked {accent-color: var(--accent);} .checkboxList tr {display: flex; flex-direction: row;} .checkboxList tr td {padding: 5px 10px; display: flex; flex-direction: row; flex-basis: 33.3%; align-items: flex-start;} .checkboxList td input[type=checkbox] {margin-right: 5px;} .checkboxList td label, .aspNetDisabled, .checkboxList ul.myCBs li span.label {display: flex; flex-direction: row;} .checkboxList ul.myCBs { columns: 2; -webkit-columns: 2; -moz-columns: 2;} .checkboxList td label {width: 100%; flex-wrap: wrap; line-height: 1em;} .checkboxList td label span.umchName {flex: 1;} .checkboxList em.umchRole {font-size: .8em; padding: 2px 5px; flex-basis: 100%;} .checkboxList em.mainRole {background: rgb(25,135,84); margin: 0 .5em; padding: 2px 5px; border-radius: 4px;font-size: .8em; color: #fff; text-align: center; flex-basis: 10%; justify-content: flex-end;} @media (max-width: 910px) { .checkboxList tr td {flex-basis: 50%;} .checkboxList ul.myCBs { columns: 2; -webkit-columns:2; -moz-columns: 2;} } @media (max-width: 440px) { .checkboxList tr {flex-direction: column;} .checkboxList tr td {flex-basis: 100%;} .checkboxList ul.myCBs { columns: 1; -webkit-columns: 1; -moz-columns: 1;} } /*TELERIK CONTROLS*/ .RadComboBox_Default.form-select {margin: 0; padding: 0; overflow: hidden;} .RadComboBox_Default.form-select .rcbInner { border-color: transparent; color: var(--bs-body-color); background-color: #fff; border-radius: 0; padding: .375rem .75rem; border-width: 0px; border-style: solid; background-repeat: repeat-x; background-position: 0 0; display: block; position: relative; } .RadComboBox_Default.form-select .rcbInner .rcbActionButton { padding: 0px; width: auto; height: auto; color: inherit; border-width: 0 0 0 0; border-style: solid; box-sizing: content-box; background-color: transparent; background-repeat: repeat-x; background-position: 0 0; font: inherit; position: absolute; top: 0; bottom: 0; right: 0; left: auto; outline: 0; border-color: transparent; color: #333; background-color: transparent; background-image: none; border-radius: 0; } .RadComboBox .p-i-arrow-60-down:before {content: '\F282'; font-family: bootstrap-icons !important; font-size: 12px!important; font-weight: bold; color: #000; padding-right: 10px;} .RadUpload.bottleUpload .ruBrowse { height: 26px !important; background-image: none !important; background: var(--accent) !important; border-radius: 0 6px 6px 0 !important; padding: 3px 20px 0px !important; width: auto !important; font-size: .9em !important; color: #fff !important; text-transform: uppercase !important; line-height: 24px !important; border: solid 1px var(--burgundy); display: inline-block !important; clear: both !important; white-space: nowrap; cursor: pointer; transition-property: background, color; transition-duration: .5s; animation-timing-function: ease; } .RadUpload.bottleUpload .ruRemove { height: 26px !important; background-image: none !important; background: #ffffff !important; border-radius: 6px !important; padding: 0px 10px 7px !important; width: auto !important; color: #dc3545 !important; text-transform: uppercase !important; line-height: 24px !important; border: solid 1px #dc3545; display: inline-block !important; clear: both !important; white-space: nowrap; cursor: pointer; transition-property: background, color; transition-duration: .5s; animation-timing-function: ease; } .RadUpload.bottleUpload .ruFileLI .ruButton.ruRemove::before { content: '\f659' !important; font-family: bootstrap-icons !important; font-size: 1em !important; height: 26px !important; display: inline-block; margin-right: 1em !important; margin-top: 2px; line-height: 28px; } .uploadLabel .formNote {font-size: .8em!important;} ul.myCBs {width: 100%; margin: 0; padding: 0; list-style: none; columns: 4; -webkit-columns: 4; -moz-columns: 4;} ul.myCBs li {margin-bottom: .5em; padding: 0; float: none;} ul.myCBs li label {float: left; margin-right: .25em;} ul.myCBs li span.label {max-width: 80%; width: auto; display: inline-block;} ul.myCBs li span.label em.umchRole {font-size: .8em; font-weight: normal; text-transform: none;} .RadBarcode img.rbcImg {width: 100%; height: auto;} .RadButton_Default.rbButton.btn-primary, .RadButton_Default.rbButton.btn-danger {background-image: none!important; } .RadButton_Default.rbButton.btn-primary {background-image: none!important; background-color: var(--burgundy)!important; border-color: var(--burgundy)!important;} .RadButton_Default.rbButton.btn-danger {background-image: none!important; background-color: var(--messageBad)!important; border-color: var(--messageBad)!important;} @media (max-width: 910px) { ul.myCBs { columns: 2; -webkit-columns: 2; -moz-columns: 2;} } @media (max-width: 440px) { ul.myCBs { columns: 1; -webkit-columns: 1; -moz-columns: 1;} } /*ALERTS*/ .validation {font-size: .8em; font-style: italic; color: #842029;} #errorValidation {margin-top: 0; padding-left: 0;} .alert, .toast {background: transparent; padding: 10px; border: 0; box-shadow: none;} #errorValidation .alert {margin-top: 0!important;} .alert ul {width: 100%; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: row; align-content: flex-start; align-items: center;} .alert ul:before {font-size: 26px; margin-right: .25em; align-self: flex-start;} .toast {display: flex; flex-direction: row; column-gap: 10px;} .toast .toast-icon:before {content: '\F431'; font-family: bootstrap-icons !important;} #good.alert ul, .toast {color: var(--messageGood);} #good.alert ul:before {content: '\F431'} #bad.alert ul {color: var(--messageBad);} #bad.alert ul:before {content: '\f333'} .alert-danger {color: var(--messageBad)!important;} .alert.alert-danger {background: transparent; margin-top: .5rem;} .alert.alert-danger h4 {color: var(--messageBad); font-size: 18px; align-content: center; flex: 1; border-bottom: 0; line-height: 1em;} .alert.alert-danger .alert-icon {padding-top: 0!important; flex-basis:40px; color: var(--messageBad);align-content: flex-start; justify-content: center; vertical-align: 0;} .alert.alert-danger .bi:before {font-size: 26px;} .alert.alert-danger ul {display: flex; flex-basis: 100%!important; flex: 1; flex-wrap: wrap; list-style:disc; padding-left: 3em; margin-left: .5em;} .alert.alert-danger ul li {flex-basis: 100%;} .alert.alert-danger ul li a {color: var(--messageBad);} .has-danger .form-select, .has-danger .form-control {border-color: var(--messageBad);} .has-success .form-select, .has-success .form-control {border-color: var(--messageGood);} .btn-outline-danger {border-color: var(--messageBad); color: var(--messageBad);} .btn-outline-success {border-color: var(--messageGood); color: var(--messageGood);} .btn-check:checked + .btn.btn-outline-danger {border-color: var(--messageBad); color: var(--white);} .btn-check:checked + .btn.btn-outline-success {border-color: var(--messageGood); color: var(--white);} .btn-check:not(:checked) + .btn.btn-outline-danger, .btn-check:not(:checked) + .btn.btn-outline-success {color: #999;} .form-required {position: relative;} .form-required.has-danger:after{ content: "\F623"; color: var(--messageBad); font-family: bootstrap-icons !important; position: absolute; right: 25px; top: 52%; font-size: 15px; } .col-lg-3 .form-required.has-danger:after {right: 10px; top: 55%;} .form-required.form-required-select.has-danger:after {right: 45px; } .facilityRightRail .form-required.form-required.has-danger:after {right: 20px; } .facilityRightRail .form-required.form-required-select.has-danger:after {right: 35px; } .form-required.has-success:after { content: "\F26A"; color: var(--messageGood); font-family: bootstrap-icons !important; position: absolute; right: 25px; top: 52%; font-size: 15px; } .col-lg-3 .form-required.has-success:after {right: 10px; top: 55%;} .form-required.form-required-select.has-success:after {right: 45px; } .facilityRightRail .form-required.form-required.has-success:after {right: 20px; } .facilityRightRail .form-required.form-required-select.has-success:after {right: 35px; } /*HEADER*/ header {background: var(--white); width: 100%; padding: 5px 0 0; position: fixed;} header .container {position: relative; } .navbar > .container {justify-content: flex-start;} .navbar-nav .nav-link, .navbar-nav .dropdown-item {color: var(--ink-lt); font-size: .9rem;} .dropdown-item.active, .dropdown-item:active {background-color: var(--burgundy); color: var(--white);} header h1 {background: var(--burgundy); width: auto; margin: 0; padding: 9px 10px 9px 15px; font-size: 12px; color: var(--gold-lt); line-height: 1em; text-align: right; text-transform: uppercase; position: absolute; top: -8px; right: calc(.5em + 120px); border-radius: 0 0 6px 6px;} header h1 a {text-decoration: none;} header h1 a, header h1 a i.bi {color: var(--gold-lt)!important;} /*WITH HELP BUTTON*/ .infoButton {background: var(--burgundy-lt); width: 50px; height: 50px; border: 1px solid var(--burgundy-lt); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 18px; cursor: pointer; font-weight: 600; position: fixed; right: 25px; bottom: 50px; z-index: 1031;} .infoButton i:before {font-size: 20px; font-weight: 200 !important; color: var(--gold-lt); padding-top: 5px;} .btn-logout {height: 28px; border: 1px solid var(--border); border-radius: 0 0 4px 4px; display: flex; align-items: center; justify-content: center; color: var(--ink-lt); font-size: 12px; cursor: pointer;} #divQuickLinks {background: #fff; width: auto; padding: 0 0; clear: both; position: absolute; top: -10px; right: 10px;} .facilitySelector { background: var(--burgundy); height: 28px; font-size: 11px; font-weight: 500; color: var(--gold-lt); padding: 5px 13px; border-radius: 0 0 4px 4px; font-family: 'DM Mono', monospace; display: flex; align-items: center; } .facilitySelector a {color: var(--gold-lt);} #facilityDropdown .dropdown-menu[data-bs-popper] {min-width: 230px; left: unset; right: -8px; top: calc(100% + 6px); border-radius: 0.5rem 0 0.5rem 0.5rem; font-family: 'DM Sans';} #facilityDropdown h2 {background: var(--cream); width: calc(100% + 30px); margin: -15px 0 0 -15px; padding: 10px; font-size: 18px; border-radius: 0.5rem 0 0 0;font-family: 'Cormorant Garamond', serif;} #facilityDropdown h2 i.bi {margin-right: .5em;} #divSiteBrand {margin: 20px 0; font-size: 10px;} .navbar-expand-lg .navbar-nav .dropdown-menu {min-width: 12rem;} .nav-link.dropdown-toggle, .dropdown-item.dropdown-toggle {display: flex; flex-direction: row; } .dropdown-toggle:after { font-family: bootstrap-icons !important; content: '\F282'; border: 0; display: inline-block; } .dropdown-toggle.show:after {transform:rotate(270deg);} .listIssues ul {margin: 0; padding: 0; list-style: none;} .imageWrap img {max-width: 100px; margin: auto;} @media (min-width: 992px) { .navbar-expand-lg .navbar-nav .dropdown-menu li {position: relative;} .navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-menu {left: 100%; top: 0%;} /*.navbar .dropdown:hover > .dropdown-menu { display: block; margin-top: 0; } .navbar .dropdown > .dropdown-toggle:hover > .dropdown-menu { display: block; margin-top: 0; }*/ .dropdown-item:hover > .dropdown-menu {border: solid 1px red!important;} } @media (max-width: 991px) { header .container { padding-top: 15px; } header.navbar { padding-bottom: 0 !important; } header .container { max-width: none; padding-top: 5px; } .navbar-brand { padding-top: 10px; } .navbar-expand-lg .navbar-nav .dropdown-menu {padding-left: 1.5em;} .navbar-nav .dropdown-menu {padding-left: 1.5em;} .navbar-nav .dropdown-menu {background: transparent;} .navbar-expand-lg .navbar-nav .dropdown-menu li { position: relative; } .navbar-expand-lg .navbar-nav .dropdown-menu li ul.dropdown-menu[data-bs-popper] { left: 100%; top: 0%; } .navbar-toggler { padding: 5px !important; font-size: 16px !important; } .navbar { width: 100%; padding: 8px 0 0 0 !important; } .navbar-toggler { position: absolute; right: 0; top: -33px; } #facilityDropdown .dropdown-menu[data-bs-popper] { right: 0; left: unset; } /*#facilityDropdown.dropdown {background: #fff; }*/ .navbar-nav {width: 320px!important; float: right; text-align: left;} .dropdown-menu {background: #fff; border: 0!important;} .dropdown-menu .nav-item {padding-left: 1em;} .dropdown-menu .dropdown-menu {padding-left: 1em;} .containerMain {max-width: 98%; padding-top: 100px;} } @media (max-width: 440px) { .navbar-brand { padding-top: 20px !important; } header h1 {right: calc(.5em + 50px);} .btnLogout.btn-sm {margin-top: -0px;} .btnLogout span {width: 1px; height: 1px; display: block; position: absolute; left: -999999em;} btn.infoButton { } header h1 { right: calc(.5em + 95px); } .form-body .col {flex-basis: 100%;} .passwordGen .col-3, .passwordGen .col-9 {width: 100%; flex-basis: 100%;} .buttonRow .btn {padding: 6px 8px!important; } .buttonRow .btn.hideTextMobile span {width: 1px; height: 1px; display: block; position: absolute; left: -99999em;} .buttonRow .btn.hideTextMobile i.me-1 {margin-right: 0!important;} .buttonRow .btn.btn.hideTextMobile i:before {font-size: 1.5em;} } /*@media (max-width: 1080px) { .headerContent h1 {bottom: 0; right: calc(.5em + 60px);} } @media (max-width: 440px) { header { margin-top: 0; padding-top: 0; } header .headerContent { background: #fff; height: 62px; padding: 0 0 0 5px; } .headerContent img { width: 120px; margin: 0; padding: 0; } .quickLinks { right: 0; top: -10px; margin-right: 0; } .quickLinks ul li a { width: auto; height: auto; text-align: center; padding: 15px 5px 5px; font-size: .7em; line-height: 1em; border-radius: 0 0 0 6px; } .quickLinks ul li.quickLogout a::before { content: ''; } .headerContent h1 {margin-bottom: 0; padding: 10px 5px 0px 10px; bottom: 0; right: unset; left: 0; border-radius: 0 12px 0 0;} }*/ /*FOOTER*/ footer { background: var(--burgundy) !important; /*border-top: solid 4px var(--lightBlue);*/ width: 100%; padding: 10px !important; font-size: 10px !important; color: #fff; } footer .container { background: transparent; margin: 0 auto; border-radius: 0; } footer .container p { margin-bottom: 0; } footer .container a { color: #fff; } footer .row > * { background: transparent; border-radius: 0; } body footer .bevsavvyLogo, body fotter .legalText {display: none;} body.pageLogin footer.p-5 {padding-top: 20px !important; padding-bottom: 20px !important;} body.pageLogin footer .bevsavvyLogo {display: none;} body.pageLogin footer .legalText {display: inline;} /*CONTENT FRAMEWORK*/ /*.container { max-width: 1200px; margin: 100px auto 20px auto; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }*/ .boxHeader { background: var(--grayBack); padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .boxHeader h1 { margin: 0; font-size: 1.5rem; color: var(--darkGray); } .section { padding: 20px; } .flex { display: flex; gap: 30px; flex-wrap: wrap; } @media (max-width: 440px) { .interior .container { margin: 80px auto 20px auto; } .boxHeader { padding: 10px 10px; } .flex { flex-direction: column; } .form-grid { grid-template-columns: 1fr; } .section { padding: 10px; } } .members-box-wrap { background: var(--lightBack); padding: 10px; flex: 1; min-width: 260px; border-radius: 6px; } .members-box-wrap h3 { margin-bottom: 1em; } .members-box { background: var(--white); margin-bottom: 1em; padding: 15px; border-radius: 6px; } .members-box a, .members-box span { margin-bottom: .5em; text-decoration: none; line-height: 1em; display: flex; flex-direction: row; } .members-box a i, .members-box span i { line-height: 1em; } .members-box a i:before, .members-box span.otherLocations i:before { margin-right: .25em; font-size: 1.25em; } .members-box a.iconNewPage i:before { content: '\f710'; } .members-box a.iconEmail i:before { content: '\e158'; } .members-box a.iconPhone i:before { content: '\e9cd'; } .members-box span.otherLocations i:before { content: '\e228'; } .members-box a.iconEmail, .members-box a.iconPhone, .members-box span.otherLocations { font-style: italic; } .members-box span.otherLocations a { display: inline-block; text-decoration: underline; } .table { width: 100%; border-collapse: collapse; overflow-x: scroll; } .table th { background: var(--cream-dk); font-family: "DM Mono", monospace; font-weight: 400; text-align: left; padding: 12px 10px; font-size: 0.75rem; border-radius: 0; border-bottom: solid 1px rgba(74,21,40,0.15); text-transform: uppercase;} .table th:first-child { border-radius: 6px 0 0 0; } .table th:last-child { border-radius: 0 6px 0 0; } .table td { padding: 10px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; text-align: left;} .table td.dt-type-numeric, .table td.dt-type-date {font-family: "DM Mono", mono; font-size: 11.5px;} .table td.dt-type-numeric .badge {font-size: 12px; font-weight: 400;} .table > :not(caption) > * > * {color: var(--ink);} .table-hover > tbody > tr:hover {background: var(--mist);} table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1).selected > * { box-shadow: inset 0 0 0 9999px rgba(var(--row-hover), 0.25)!important; box-shadow: inset 0 0 0 9999px rgba(var(--row-hover), 0.25)!important; } table.table.dataTable.table-hover > tbody > tr.selected:hover > * { box-shadow: inset 0 0 0 9999px rgba(var(--row-hover), 0.25)!important; box-shadow: inset 0 0 0 9999px rgba(var(--row-hover), 0.25)!important; } table.table.dataTable > tbody > tr.selected > * { box-shadow: inset 0 0 0 9999px rgb(var(--row-selected),.25)!important; box-shadow: inset 0 0 0 9999px rgb(var(--row-selected), .25)!important; color: var(--burugundy)!important; color: var(--burugundy)!important; } .cb-wrap { display: flex; align-items: center; justify-content: center; } .cb { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid rgba(74,21,40,0.25); background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s; flex-shrink: 0; } .cb.checked { background: var(--burgundy); border-color: var(--burgundy); } .cb.checked::after { content: ''; width: 8px; height: 5px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg) translateY(-1px); } .selected-count { font-family: 'DM Mono', monospace; font-size: 0.7rem; color: var(--burgundy-lt); background: rgba(74,21,40,0.08); border-radius: 20px; padding: 0.2rem 0.65rem; } div.dt-container.dt-bootstrap5.dt-empty-footer div.dt-search {display: flex; align-items: center;} div.dt-container.dt-bootstrap5.dt-empty-footer div.dt-search input {padding: .25rem .5rem;} .btnSelectAll {} .wine-name { width: 75%; white-space: normal; line-height: 1.4; font-weight: 500;} .wine-producer {font-size: .8em;} .wine-name .bottleCount { background: var(--darkGray); padding: 5px 10px; border-radius: 6px; color: var(--white); white-space: nowrap; } .wine-name em { display: block; } .actions { width: 5%; white-space: nowrap; text-align: center; } .actions a.iconButton { background: none; border: none; cursor: pointer; padding: 4px; margin-left: 8px; text-decoration: none; transition: color ease .5s; } .actions a.iconButton i:before { font-size: 2.5em; } .actions a.iconButton:hover { color: var(--burgundy); } .actions a.iconButton.iconSwap i:before { content: '\e863'; } .actions a.iconButton.iconCopy i:before { content: '\e14d'; } .actions a.iconButton.iconDelete i:before { content: '\e92b'; } .counterWrap { width: 10%; } .counter { margin: 0px; display: flex; align-items: center; gap: 2px; background: var(--accent); padding: 4px 6px; border-radius: 6px; float: right; } .counter a { background: var(--white); width: 18px; height: 18px; font-size: 16px; font-weight: 700; border: none; border-radius: 50%; cursor: pointer; color: var(--accent); display: flex; align-items: center; justify-content: center; text-decoration: none; } .counter a i.icon { padding-top: 2px; } .counter a.minus i.icon { padding-top: 3px; } .counter a.minus i.icon:before { content: '\e15b'; } .counter a.plus i.icon:before { content: '\e145'; } .counter .value { color: var(--white); font-size: 18px; width: 30px; text-align: center; font-weight: 500; } .bottleCountMembers.bg-primary { background: var(--burgundy) !important; } .memberBottleCount { justify-content: center; } .memberBottleCount span.numberCount { min-width: 2em; text-align: center; font-family: 'MD Mono', monospace; } #bootstrapOverrides .memberBottleCount .btn-primary { background: var(--accent); padding: 8px 5px; width: 30px; height: 30px; /*border-radius: 50%;*/ border-color: var(--accent); font-size: 20px !important; font-weight: 700; line-height: .5em; transition: background ease .5s; } .memberBottleCount .btn-primary:hover { background: var(--accentHover); border-color: var(--accent); } /*.memberBottleCount .btn {width: 30px; height: 30px; } .memberBottleCount i:before {margin-top: -2px;}*/ .memberBottleCountCell .btn-sm {color: var(--burgundy);} .owner.Owner1.badge, td.Owner1 span.badge.owner, .owner.Owner2.badge, td.Owner2 span.badge.owner {color: var(--ink); display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 500; padding: 2px 9px; border-radius: 20px; font-family: 'DM Mono', monospace; letter-spacing: 0.03em; white-space: nowrap; } .owner.Owner1.badge, td.Owner1 span.badge.owner { background-color: var(--owner1) !important; } .owner.Owner2.badge, td.Owner2 span.badge.owner { background-color: var(--owner2) !important; } .pageContent ol, .pageContent ul {margin-left: 1.5em; margin-bottom: 1em; padding-left: .5em;} .pageContent strong {font-weight: 500!important;} @media (max-width: 991px) { .memberBottleCount .btn-primary { width: 44px; height: 44px; line-height: 1.25em; } } @media (max-width: 440px) { .table, .table tr, .table th, .table td { display: flex; flex-direction: column; } .table th:first-child { border-radius: 6px 6px 0 0; } .table th:last-child { border-radius: 0 0 6px 6px; text-align: center; } .table tr { background: var(--white); border: solid 1px var(--border); margin-bottom: 20px; border-radius: 6px 6px; } .table thead tr, .table td { border: 0; } .wine-name {width: 100%; border: 0; } .table td.actions { width: 33.3%; margin: 0; padding: 0; display: flex; flex-direction: row; clear: none; } .counterWrap { width: 100%; justify-content: center; display: flex; flex-direction: row;} .counter { float: left; } .memberBottleCount {flex-direction: column; } .memberBottleCounter {padding: .5rem; border: solid 1px var(--midBack); width: 100%; justify-content: center; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);} .memberBottleActions {} .lockerOwnerWrap { display: flex; flex-direction: column;} .lockerLocation.ms-2 { margin-left: 0!important} } @media (min-width: 441px) and (max-width: 990px) { .row > .bsWineCards { display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 1%; } .row > .bsWineCards > .card { display: flex; flex-direction: column; flex-basis: 32.3%; width: unset; max-width: unset; flex-wrap: wrap; } .row > .bsWineCards > .card .card-body { display: flex; flex-direction: column; } .row > .bsWineCards > .card .card-body .memberBottleCount { margin-top: auto; } } @media (max-width: 440px) { .bsWineCards .bottleName {flex-basis: 70%;} .bsWineCards .btnSwap, .bsWineCards .btnMove {flex-basis: 15%; } } /*PASSWORD RESET*/ .passWordT {width: 50%;} .password-rules { font-size: 0.85rem; margin-top: 8px; line-height: 1.4; } .rule { color: #dc2626; /* red-600 */ } .rule.met { color: #16a34a; /* green-600 */ text-decoration: line-through; } .strength-bar { height: 6px; margin-top: 8px; border-radius: 3px; background: #e5e7eb; overflow: hidden; } .strength-fill { height: 100%; width: 0%; transition: all 0.3s ease; background: linear-gradient(90deg, #dc2626, #f97316, #eab308, #16a34a); } /*SEARCH*/ div.dt-container div.dt-search input { padding: .375rem .75rem; } /*DATATABLES*/ /* Force sort icons to the right for all columns */ table.dataTable th.dt-type-numeric div.dt-column-header, table.dataTable th.dt-type-numeric div.dt-column-footer, table.dataTable th.dt-type-date div.dt-column-header, table.dataTable th.dt-type-date div.dt-column-footer, table.dataTable td.dt-type-numeric div.dt-column-header, table.dataTable td.dt-type-numeric div.dt-column-footer, table.dataTable td.dt-type-date div.dt-column-header, table.dataTable td.dt-type-date div.dt-column-footer {flex-direction:row!important;} table.dataTable tr.tag-not-assigned td {background: rgba(255,192,203,.25);} .table.dataTable th {border-right: solid 1px #c6c7c8;} .table.dataTable th:last-child {border-right: 0} .btnToggle i.bi-toggle2-on {font-size: 3em; color: rgb(25, 135, 84);} .btnToggle i.bi-toggle2-off {font-size: 3em; color: #dc3545;} /*PAGINATION*/ .dt-info, .dt-paging {padding: .5rem;} .dt-paging .active > .page-link, .page-link.active {background-color: var(--burgundy); color: var(--white);} .dt-paging .page-link {color: var(--burgundy); border-color: var(--burgundy);} .tableEmails td {width: 10%;} .tableEmails td:first-child {width: 70%;} /*FILTERS IN MOBILE*/ @media (max-width: 440px) { /*TABLES*/ table.tableGen.dataTable > tbody > tr {flex-direction: row; flex-wrap: wrap;} table.tableGen thead.table-light tr {background: var(--bs-table-bg);} table.tableGen thead.table-light {max-width: 100%; display: block;} table.tableGen thead.table-light tr {width: 100%;display: flex; flex-direction: row;} table.tableGen th.dt-type-numeric, table.tableBev th.dt-type-date, table.tableBev td.dt-type-numeric, table.tableBev td.dt-type-date {text-align: left!important;} table.tableGen > tbody > tr:nth-child(odd) {background: #f2f2f2!important;} table.tableGen > tbody > tr:nth-child(even) {background: #ffffff!important;} table.tableGen thead.table-light th {font-size: .75em; flex-basis: 20%; border: solid 1px var(----bs-table-border-color)!important;} div.dt-container div.dt-search {display: flex;} div.dt-container div.dt-search input {width: 100%;} /*BEV SPECIFIC TABLE*/ table.tableBev thead.table-light th:first-child, table.tableBev thead.table-light th:last-child, table.dataTable thead.table-light th:nth-child(7) {width: 1px; height: 1px; display: block; position: absolute; left: -99999em;} table.tableBev td:first-child {order: 7;} /*ID - Edit*/ table.tableBev td:nth-child(2) {order: 3;} /*Quatity*/ table.tableBev td:nth-child(3) {order: 1;} /*Vintage/Year*/ table.tableBev td:nth-child(4) {order: 2;} /*Wine Name, Maker, Region*/ table.tableBev td:nth-child(5) {order: 4;} /*Bottle Price*/ table.tableBev td:nth-child(6) {order: 5;} /*Glass Price*/ table.tableBev td:nth-child(7) {order: 6;} /*Modified*/ table.tableBev td:nth-child(8) {order: 8;} /*Delete*/ table.tableBev td:nth-child(3){flex-basis: 16%; padding-right: 0; text-align: right!important;} table.tableBev td:nth-child(4){flex-basis: 84%;} table.tableBev td:nth-child(7) {flex-basis: 100%;} table.tableBev td:nth-child(2), table.tableBev td:nth-child(5), table.tableBev td:nth-child(6) {flex-basis: 33.3%;} table.tableBev td:nth-child(5) {border-right: solid 1px var(--darkGray);} table.tableBev td:first-child, table.tableBev td:last-child {flex-basis: 50%;} table.tableBev td:nth-child(2) span {text-align: center; color: #fff; padding: 0.65em 0.35em; border-radius: .375rem; line-height: 2em; font-size: .75em;} table.tableBev td:nth-child(3), table.tableBev td:nth-child(4) {font-size: 1.25em; font-weight: 600;} table.tableBev td:nth-child(4) strong {font-weight: 600;} table.tableBev td:nth-child(4) .text-muted {font-style: italic;} table.tableBev td:nth-child(4) .text-secondary {font-size: .7em;} table.tableBev td:nth-child(5), table.tableBev td:nth-child(6) {display: flex; flex-direction: row; line-height: 2em;} table.tableBev td:nth-child(5):before, table.tableBev td:nth-child(6):before {width: 1.25em; font-family: "Material Symbols Outlined"; font-size: 2em; text-align: left;} table.tableBev td:nth-child(5):before {content: '\ea60';} table.tableBev td:nth-child(6):before {content: '\f1e8';} table.tableBev td:nth-child(7) {font-style: italic; display: block;} table.tableBev td:nth-child(7):before {content: 'Modified on: '; font-style: normal; display: block; width: auto; float: left;} table.tableBev td:first-child a:before {display: inline-block; font-weight: 600;} table.tableBev td:nth-child(2) span:after {content: 'Bottles'; display: inline-block; font-weight: 600; margin-left: .5em;} /*MEMBERS TABLE*/ table.tableMembers thead.table-light th:first-child, table.tableMembers thead.table-light th:last-child, table.tableMembers thead.table-light th:nth-child(6), table.tableMembers thead.table-light th:nth-child(9), table.tableMembers thead.table-light th:nth-child(10), table.tableMembers thead.table-light th:nth-child(8) {width: 1px; height: 1px; display: block; position: absolute; left: -99999em;} table.tableMembers td:nth-child(1) {order: 10;} table.tableMembers td:nth-child(2) {order: 1;} table.tableMembers td:nth-child(3) {order: 2;} table.tableMembers td:nth-child(4) {order: 3;} table.tableMembers td:nth-child(5) {order: 4;} table.tableMembers td:nth-child(6) {order: 5;} table.tableMembers td:nth-child(7) {order: 6;} table.tableMembers td:nth-child(8) {order: 7;} table.tableMembers td:nth-child(9) {order: 8;} table.tableMembers td:nth-child(10) {order: 9;} table.tableMembers td:nth-child(11) {order: 11;} table.tableMembers td.dt-type-numeric {text-align: left!important;} table.tableMembers tr {position: relative;} table.tableMembers td:first-child { } table.tableMembers td:nth-child(2) { } table.tableMembers td:nth-child(2) span:after {content: 'Bottles'; display: inline-block; font-weight: 600; margin-left: .5em;} table.tableMembers td.sorting_1, table.tableMembers td:nth-child(3) {padding-top: .75em; padding-bottom: 0; font-size: 1.5em; display: flex; flex-direction: row; flex-wrap: nowrap;} table.tableMembers td.sorting_1 {padding-right:.25em;} table.tableMembers td:nth-child(3) {padding-left: 0;} table.tableMembers td:nth-child(4) {flex-basis: 100%; flex-wrap: wrap; } table.tableMembers td:nth-child(5) {display: inline-block; text-align: left!important; font-weight: 700; font-style: italic;} table.tableMembers td:nth-child(5):before {content: 'Role: '; display: inline-block; font-weight: 200; font-style: normal;} table.tableMembers td:nth-child(5), table.tableMembers td:nth-child(6) {flex-basis: 50%; text-align: left!important; } table.tableMembers td:nth-child(6) { display: inline-block;text-align: right!important; font-weight: 700;} table.tableMembers td:nth-child(6):before {content: 'Primary: '; font-weight: 200; font-style: normal;} table.tableMembers td:nth-child(7) {display: none; } table.tableMembers td:nth-child(8), table.tableMembers td:nth-child(9) {flex-basis: 50%;} table.tableMembers td:nth-child(1), table.tableMembers td:nth-child(10), table.tableMembers td:nth-child(11) { flex-basis: 33.3%;} table.tableMembers td:nth-child(10) {padding-top:0; padding-bottom: 0; margin-top: -2px;} /*table.tableMembers td:nth-child(10),*/ table.tableMembers td:nth-child(10) .btn.btnToggle {padding: 0!important;} table.tableMembers td:nth-child(10) label {align-content: center;} /*ROLES*/ table.tableRoles thead.table-light th:first-child, table.tableRoles thead.table-light th:nth-child(5), table.tableRoles thead.table-light th:last-child {width: 1px; height: 1px; display: block; position: absolute; left: -99999em;} table.tableRoles td:nth-child(1) {order: 6;} /*Edit*/ table.tableRoles td:nth-child(2) {order: 1;} /*Name*/ table.tableRoles td:nth-child(3) {order: 2;} /*Members*/ table.tableRoles td:nth-child(4) {order: 3;} /*Events*/ table.tableRoles td:nth-child(5) {order: 4;} /*Modified By*/ table.tableRoles td:nth-child(6) {order: 5;} /*Modified On*/ table.tableRoles td:nth-child(7) {order: 7;} /*Delete*/ table.tableRoles td:nth-child(1), table.tableRoles td:nth-child(7) {flex-basis: 50%;} table.tableRoles td:nth-child(2) {flex-basis: 100%; font-size: 1.25em; font-weight: bold;} table.tableRoles td:nth-child(3) {font-size: 1.5em;} table.tableRoles td:nth-child(3):before { } table.tableRoles td:nth-child(3), table.tableRoles td:nth-child(4), table.tableRoles td:nth-child(5), table.tableRoles td:nth-child(6) {font-weight: 700; font-style: italic; flex-basis: 50%;} table.tableRoles td:nth-child(5):before {content: 'Modified By:';font-weight: 200; font-style: normal;} table.tableRoles td:nth-child(6):before {content: 'Modified On:'; font-weight: 200; font-style: normal;} table.tableRoles td:nth-child(3), table.tableRoles td:nth-child(4) {text-align: center!important; display: flex; flex-direction: row; line-height: 1em; font-size: 1.5em; font-weight: 200;} table.tableRoles td:nth-child(3):before {content: '\F4D7'; width: 1.25em; font-family: bootstrap-icons !important; font-size: 1.5em; text-align: left; color: var(--burgundy); font-style: normal; font-weight: 200;} table.tableRoles td:nth-child(4):before {content: '\F4DB'; width: 1.25em; font-family: bootstrap-icons !important; font-size: 1.5em; text-align: left; color: var(--burgundy); font-style: normal; font-weight: 200;} /*BEV LISTS TABLE*/ table.tableLists thead.table-light th:first-child, table.tableLists thead.table-light th:last-child, table.tableLists thead.table-light th:nth-child(2), table.tableLists thead.table-light th:nth-child(3) {width: 1px; height: 1px; display: block; position: absolute; left: -99999em;} table.tableLists td:first-child {order: 5;} /*Edit*/ table.tableLists td:nth-child(2) {order: 6;} /*View*/ table.tableLists td:nth-child(3) {order: 7;} /*Download*/ table.tableLists td:nth-child(4) {order: 1;} /*List Name*/ table.tableLists td:nth-child(5) {order: 2;} /*Description*/ table.tableLists td:nth-child(6) {order: 3;} /*Published*/ table.tableLists td:nth-child(7) {order: 4;} /*Active*/ table.tableLists td:nth-child(8) {order: 8;} /*Delete*/ table.tableLists td:nth-child(4) {padding-bottom: 0;font-size: 1.5em;flex-basis: 100%; font-weight: 700;} table.tableLists td:nth-child(6), table.tableLists td:nth-child(7) {flex-basis: 50%;} table.tableLists td:nth-child(7) {display: block;} table.tableLists td:nth-child(7):before {content: 'Active:'; font-style: normal; display: block; width: auto; float: left;} table.tableLists td.dt-type-date {font-style: italic; text-align: left!important;} table.tableLists td.dt-type-date:before {content: 'Modified on: '; font-style: normal;} table.tableLists td:nth-child(1), table.tableLists td:nth-child(2), table.tableLists td:nth-child(3), table.tableLists td:nth-child(8) {flex-basis: 25%;} /*LOCKERS LISTS TABLE*/ table.tableLockers thead.table-light th:first-child, table.tableLockers thead.table-light th:last-child, table.tableLockers thead.table-light th:nth-child(2) {width: 1px; height: 1px; display: block; position: absolute; left: -99999em;} table.tableLockers td:first-child {order: 6;} /*Edit*/ table.tableLockers td:nth-child(2) {order: 7;} /*Add*/ table.tableLockers td:nth-child(3) {order: 5;} /*Locker #*/ table.tableLockers td:nth-child(4) {order: 1;} /*Name*/ table.tableLockers td:nth-child(5) {order: 2;} /*Storage Location*/ table.tableLockers td:nth-child(6) {order: 3;} /*Bottles*/ table.tableLockers td:nth-child(7) {order: 4;} /*Members*/ table.tableLockers td:nth-child(8) {order: 8;} /*Delete*/ table.tableLockers thead.table-light th:nth-child(3) {white-space: nowrap;} table.tableLockers td:nth-child(1), table.tableLockers td:nth-child(2), table.tableLockers td:nth-child(8) {flex-basis: 33.3%;} table.tableLockers td:nth-child(4) {flex-basis: 100%; font-size: 1.5em; align-content: flex-start;text-align: left!important; padding-bottom: 0; font-weight: 700;} table.tableLockers td:nth-child(3) {display: flex; flex-direction: row;} table.tableLockers td:nth-child(4) {padding-right: 0; } table.tableLockers td.dt-type-numeric {text-align: left!important;} table.tableLockers td:nth-child(5) {flex-basis: 100%;font-style: italic; display: block; font-weight: 700;} table.tableLockers td:nth-child(5):before { content: 'Location: '; font-style: normal; float: left; font-weight: 200;} table.tableLockers td:nth-child(3), table.tableLockers td:nth-child(6), table.tableLockers td:nth-child(7) {flex-basis: 33.3%; display: block; font-size: 1.5em; line-height: 1em; display: block; } table.tableLockers td:nth-child(3):before, table.tableLockers td:nth-child(6):before, table.tableLockers td:nth-child(7):before {margin-top: -5px; margin-right: .25em; font-family: "Material Symbols Outlined"; font-size: 1.5em; text-align: left; line-height: 1em; color: var(--burgundy); float: left;} table.tableLockers td:nth-child(3):before {font-family: bootstrap-icons !important; content: '\F44F';} table.tableLockers td:nth-child(6):before {content: '\ea60'; margin-top: -5px; font-size: 1.4em;} table.tableLockers td:nth-child(7):before {font-family: bootstrap-icons !important; font-size: 1.25em; content: '\F4D7'; margin-right: .5em;} /*BOTTLE IN LOCKERS*/ table.tableBotLocks thead.table-light th:first-child, table.tableBotLocks thead.table-light th:last-child, table.tableBotLocks thead.table-light th:nth-child(5) {width: 1px; height: 1px; display: block; position: absolute; left: -99999em;} table.tableBotLocks td:first-child {order: 7;} /*Edit*/ table.tableBotLocks td:nth-child(2) {order: 2;} /*Name*/ table.tableBotLocks td:nth-child(3) {order: 6;} /*Locker*/ table.tableBotLocks td:nth-child(4) {order: 5;} /*Storage Location*/ table.tableBotLocks td:nth-child(5) {order: 4;} /*Bottles*/ table.tableBotLocks td:nth-child(6) {order: 3;} /*Varietal*/ table.tableBotLocks td:nth-child(7) {order: 1;} /*Vintage*/ table.tableBotLocks td:first-child {flex-basis: 100%;} table.tableBotLocks td:first-child .btn {width: 50%;} table.tableBotLocks td:nth-child(7) {flex-basis: 15%; font-size: 1.5em; font-weight: 700; } table.tableBotLocks td:nth-child(2) {flex-basis: 79%; font-size: 1.5em; font-weight: 700;padding-left: 0; } table.tableBotLocks td:nth-child(3), table.tableBotLocks td:nth-child(4) {flex-basis: 100%; font-style: italic; font-weight: 700;} table.tableBotLocks td:nth-child(5), table.tableBotLocks td:nth-child(6) {flex-basis: 50%; font-style: italic;} table.tableBotLocks td:nth-child(6) {font-weight: 700;} table.tableBotLocks td:nth-child(3):before {content: 'Locker: '; font-style: normal; color: var(--accent); font-weight: 200;} table.tableBotLocks td:nth-child(4):before {content: 'Location: '; font-style: normal; color: var(--accent); font-weight: 200;} table.tableBotLocks td:nth-child(5) {text-align: center!important; display: flex; flex-direction: row; line-height: 1em; font-size: 1.5em; font-weight: 200;} table.tableBotLocks td:nth-child(5):before {content: '\ea60'; width: 1.25em; font-family: "Material Symbols Outlined"; font-size: 1.5em; text-align: left; color: var(--burgundy); font-style: normal; font-weight: 200;} /*BOTTLE IN LOCKERS*/ table.tableLocations thead.table-light th:first-child, table.tableLocations thead.table-light th:last-child, table.tableLocations thead.table-light th:nth-child(6) {width: 1px; height: 1px; display: block; position: absolute; left: -99999em;} table.tableLocations td:first-child {order: 6;} /*Edit*/ table.tableLocations td:nth-child(2) {order: 1;} /*Name*/ table.tableLocations td:nth-child(3) {order: 2;} /*Description*/ table.tableLocations td:nth-child(4) {order: 3;} /*Locker Max*/ table.tableLocations td:nth-child(5) {order: 4;} /*Lockers Per Row*/ table.tableLocations td:nth-child(6) {order: 5;} /*Active*/ table.tableLocations td:nth-child(7) {order: 7;} /*Delete*/ table.tableLocations td:nth-child(1), table.tableLocations td:nth-child(6), table.tableLocations td:nth-child(7) {flex-basis: 33.3%;} table.tableLocations td:nth-child(2) {flex-basis: 100%; font-size: 1.5em; font-weight: 700; padding-bottom: 0;} table.tableLocations td:nth-child(3) { flex-basis: 100%; padding-top: 0;} table.tableLocations td:nth-child(4), table.tableLocations td:nth-child(5) {width: 1px; height: 1px; display: block; position: absolute; left: -99999em;} table.tableLocations td:nth-child(6), table.tableLocations td:nth-child(6) .btn.btnToggle {padding: 0; margin-top: -2px;} /*VARIETALS*/ table.tableVarietals thead.table-light th:first-child, table.tableVarietals thead.table-light th:last-child, table.tableVarietals thead.table-light th:nth-child(5), table.tableVarietals thead.table-light th:nth-child(7) {width: 1px; height: 1px; display: block; position: absolute; left: -99999em;} table.tableVarietals td:nth-child(1) {order: 7} /*Edit*/ table.tableVarietals td:nth-child(2) {order: 5} /*ID*/ table.tableVarietals td:nth-child(3) {order: 1} /*Varietal*/ table.tableVarietals td:nth-child(4) {order: 3} /*Parent*/ table.tableVarietals td:nth-child(5) {order: 4} /*Hide*/ table.tableVarietals td:nth-child(6) {order: 2} /*Bev. Count*/ table.tableVarietals td:nth-child(7) {order: 6} /*Mapping Count*/ table.tableVarietals td:nth-child(8) {order: 8} /*Delete*/ table.tableVarietals td:nth-child(2) {flex-basis: 50%;} table.tableVarietals td:nth-child(3) {flex-basis: 100%; font-size: 1.25em; font-weight: 700; } table.tableVarietals td:nth-child(2) {display: flex; flex-direction: row; justify-content: flex-start; text-align: left!important; } table.tableVarietals td:nth-child(5), table.tableVarietals td:nth-child(7) {width: 1px; height: 1px; display: block; position: absolute; left: -99999em;} table.tableVarietals td:nth-child(2), table.tableVarietals td:nth-child(4), table.tableVarietals td:nth-child(6) {display: flex; flex-basis: 33.3%; flex-direction: row; font-style: italic; font-weight: 700;} table.tableVarietals td:nth-child(2):before {content: 'ID: '; font-style: normal; font-weight: 200;} table.tableVarietals td:nth-child(4):before {content: 'Parent: '; font-style: normal; font-weight: 200;} table.tableVarietals td:nth-child(6):before {content: 'Count: '; font-style: normal; font-weight: 200;} table.tableVarietals td:nth-child(1), table.tableVarietals td:nth-child(8) {flex-basis: 50%;} /*QUICK INVENTORY*/ table.tableInventory thead.table-light th:first-child, table.tableInventory thead.table-light th:last-child, table.tableInventory thead.table-light th:nth-child(5), table.tableInventory thead.table-light th:nth-child(7) {width: 1px; height: 1px; display: block; position: absolute; left: -99999em;} table.tableInventory td:nth-child(1) {order: 8;} table.tableInventory td:nth-child(2) {order: 4;} table.tableInventory td:nth-child(3) {order: 1;} table.tableInventory td:nth-child(4) {order: 2;} table.tableInventory td:nth-child(5) {order: 3;} table.tableInventory td:nth-child(6) {order: 6;} table.tableInventory td:nth-child(1) {flex-basis: 100%;} table.tableInventory td:nth-child(1) a.btn {width: 50%;} table.tableInventory td:nth-child(3) {flex-basis:16%; font-size: 1.25em; padding-right: 0; font-weight: 600;} table.tableInventory td:nth-child(4) {flex-basis: 84%; font-size: 1.25em; font-weight: 600;} table.tableInventory td:nth-child(2), table.tableInventory td:nth-child(5) {display: flex; flex-basis: 50%; flex-direction: row; font-style: italic; font-weight: 700;} table.tableInventory td:nth-child(6) {display: flex; flex-basis: 100%; flex-direction: row; font-style: italic; font-weight: 700;} table.tableInventory td:nth-child(2):before {content: 'BIN# '; font-style: normal; margin-right: .5em; font-weight: 200;} table.tableInventory td:nth-child(5):after {content: 'Bottles'; font-style: normal; margin-left: .5em; font-weight: 200;} table.tableInventory td:nth-child(6):before {content: 'Default Re-Order: ';font-style: normal;display: block; width: auto; float: left; margin-right: .5em; font-weight: 200;} /*DISTRIBUTION LISTS*/ table.tableDistributions thead.table-light th:first-child, table.tableDistributions thead.table-light th:last-child, table.tableDistributions thead.table-light th:nth-child(5), table.tableDistributions thead.table-light th:nth-child(6) {width: 1px; height: 1px; display: block; position: absolute; left: -99999em;} table.tableDistributions td:first-child {flex-basis: 20%;} table.tableDistributions td:nth-child(2) {flex-basis: 57%; font-size: 1.25em;} table.tableDistributions td:nth-child(1) {order: 6;} table.tableDistributions td:nth-child(2) {order: 1; flex-basis: 100%;} table.tableDistributions td:nth-child(3) {order: 2; display: flex; flex-direction: row; line-height: 2em; font-size: 2em;} table.tableDistributions td:nth-child(4) {order: 3; display: flex; flex-direction: row; line-height: 2em; padding-top: 1.75em;} table.tableDistributions td:nth-child(5) {order: 4} table.tableDistributions td:nth-child(6) {order: 5} table.tableDistributions td:nth-child(7) {order: 7; flex-basis: 20%;} table.tableDistributions td:nth-child(1), table.tableDistributions td:nth-child(7) {flex-basis: 50%;} table.tableDistributions td:nth-child(4), table.tableDistributions td:nth-child(5), table.tableDistributions td:nth-child(6) {flex-basis: 50%; text-align: left!important; font-style: italic; font-weight: 700;} table.tableDistributions td:nth-child(4) {padding-top: 5px;} table.tableDistributions td:nth-child(3):before {font-family: bootstrap-icons !important; content: '\F4D7'; margin-right: .5em; font-size: 1em; text-align: left; color: var(--burgundy); font-style: normal;} table.tableDistributions td:nth-child(4):before {content: 'Active: '; font-style: normal; font-weight: 200;} table.tableDistributions td:nth-child(5):before {content: 'Modified By: '; font-weight: 200; font-style: normal;} table.tableDistributions td:nth-child(6):before {content: 'Modified On: '; font-weight: 200; font-style: normal;} table.tableDistributions td:nth-child(3) {flex-basis: 50%; text-align: center!important; display: flex; flex-direction: row; line-height: 1em; font-size: 1.5em; font-weight: 200;} table.tableDistributions td:nth-child(3):before {content: '\F4D7'; width: 1.25em; font-family: bootstrap-icons !important; font-size: 1.5em; text-align: left; color: var(--burgundy); font-style: normal; font-weight: 200;} /*FACILITY EMAIL HUB*/ table.tableEmails thead.table-light th:nth-child(2), table.tableEmails thead.table-light th:nth-child(3), table.tableEmails thead.table-light th:nth-child(4) {width: 1px; height: 1px; display: block; position: absolute; left: -99999em;} table.tableEmails td:nth-child(2) {order: 1;} table.tableEmails td:nth-child(2) {order: 3;} table.tableEmails td:nth-child(3) {order: 4;} table.tableEmails td:nth-child(4) {order: 2;} table.tableEmails td:first-child {flex-basis: 100%; font-size: 1.5em; font-weight: 700;} table.tableEmails td:nth-child(2), table.tableEmails td:nth-child(3) {flex-basis: 50%;} table.tableEmails td:nth-child(4) {flex-basis: 100%; display: flex; flex-direction: row;} table.tableEmails td:nth-child(4):before {content: 'Send email as text?'; align-self: center; margin-right: 1em;} table.tableEmails td:nth-child(4) select {flex-basis: 25%; text-align: right; justify-content: flex-end;} /*EMAIL LIST*/ table.tableEmail thead.table-light th:first-child, table.tableEmail thead.table-light th:nth-child(2), table.tableEmail thead.table-light th:nth-child(4), table.tableEmail thead.table-light th:last-child {width: 1px; height: 1px; display: block; position: absolute; left: -99999em;} table.tableEmail td:nth-child(1) {order: 7;} /*Edit*/ table.tableEmail td:nth-child(2) {order: 8;} /*Copy*/ table.tableEmail td:nth-child(3) {order: 1;} /*Subject*/ table.tableEmail td:nth-child(4) {order: 3;} /*Recipients*/ table.tableEmail td:nth-child(5) {order: 4;} /*Queued*/ table.tableEmail td:nth-child(6) {order: 2;} /*Sent*/ table.tableEmail td:nth-child(7) {order: 5;} /*Modified By*/ table.tableEmail td:nth-child(8) {order: 6;} /*Modified On*/ table.tableEmail td:nth-child(9) {order: 9;} /*Delete*/ table.tableEmail td.dt-type-date {text-align: left!important;} table.tableEmail td:nth-child(3) {flex-basis: 100%; font-size: 1.25em;font-weight: 600;} table.tableEmail td:nth-child(3):before {content: 'Subject'; font-size: .65em; font-weight: 200; text-transform: uppercase;} table.tableEmail td:nth-child(4) {flex-basis: 20%; display: block; font-size: 1.5em; font-weight: 700; font-style: italic; padding-top: 20px;} table.tableEmail td:nth-child(4):before {font-family: bootstrap-icons !important; content: '\F8AA'; margin-right: .5em; text-align: left; color: var(--burgundy); font-style: normal; font-weight: 200; float: left; margin-right: .25em;} table.tableEmail td:nth-child(5) {flex-basis: 100%; font-weight: 700; font-style: italic;} table.tableEmail td:nth-child(5):before {content: 'Queued'; font-style: normal; font-weight: 200;} table.tableEmail td:nth-child(6) {flex-basis: 70%; text-align: left!important; font-weight: 700; font-style: italic;} table.tableEmail td:nth-child(6):before {content: 'Sent'; font-style: normal; font-weight: 200;} table.tableEmail td:nth-child(7) {flex-basis: 40%; font-weight: 700; font-style: italic;} table.tableEmail td:nth-child(8) {flex-basis: 60%; font-weight: 700; font-style: italic;} table.tableEmail td:nth-child(7):before {content: 'Modified By:'; font-weight: 200; font-style: normal;} table.tableEmail td:nth-child(8):before {content: 'Modified On:'; font-weight: 200; font-style: normal;} table.tableEmail td:nth-child(1), table.tableEmail td:nth-child(2), table.tableEmail td:nth-child(9) {flex-basis: 33.3%;} /*FACILITIES*/ table.tableFacilities thead.table-light th:first-child, table.tableFacilities thead.table-light th:nth-child(3), table.tableFacilities thead.table-light th:nth-child(6) {width: 1px; height: 1px; display: block; position: absolute; left: -99999em;} table.tableFacilities td:nth-child(1) {order: 6} table.tableFacilities td:nth-child(2) {order: 1} table.tableFacilities td:nth-child(3) {order: 2} table.tableFacilities td:nth-child(4) {order: 3} table.tableFacilities td:nth-child(5) {order: 4} table.tableFacilities td:nth-child(6) {order: 5} table.tableFacilities td:nth-child(1) {flex-basis: 100%;} table.tableFacilities td:nth-child(1) a.btn {width: 50%;} table.tableFacilities td:nth-child(2) {flex-basis: 100%; font-size: 1.25em; font-weight: 700; padding-bottom: 0;} table.tableFacilities td:nth-child(4) {flex-basis: 100%;} table.tableFacilities td:nth-child(4), table.tableFacilities td:nth-child(5), table.tableFacilities td:nth-child(6) {display: flex; flex-basis: 50%; flex-direction: row; font-style: italic; font-weight: 700;} table.tableFacilities td:nth-child(4):after {content: 'Storage Location(s)'; margin-left: .5em; font-style: normal; font-weight: 400;} table.tableFacilities td:nth-child(5):before {content: 'Active: ';font-style: normal; font-weight: 400;} table.tableFacilities td:nth-child(6):before {content: 'Created: ';font-style: normal; font-weight: 400;} /*LOCKER HISTORY*/ table.tableHistory thead.table-light th:first-child, table.tableHistory thead.table-light th:nth-child(2), table.tableHistory thead.table-light th:nth-child(6), table.tableHistory thead.table-light th:nth-child(8), table.tableHistory thead.table-light th:nth-child(9) {width: 1px; height: 1px; display: block; position: absolute; left: -99999em;} table.tableHistory td:nth-child(1) {order: 9} table.tableHistory td:nth-child(2) {order: 10} table.tableHistory td:nth-child(3) {order: 1} table.tableHistory td:nth-child(4) {order: 4} table.tableHistory td:nth-child(5) {order: 5} table.tableHistory td:nth-child(6) {order: 2} table.tableHistory td:nth-child(7) {order: 3} table.tableHistory td:nth-child(8) {order: 6} table.tableHistory td:nth-child(9) {order: 7} table.tableHistory td:nth-child(10) {order: 8} table.tableHistory td:nth-child(11) {order: 11} table.tableHistory td:nth-child(3) {flex-basis: 100%; font-size: 1.25em; font-weight: 700;} table.tableHistory td:nth-child(4), table.tableHistory td:nth-child(5) {flex-basis: 50%; font-weight: 700;} table.tableHistory td:nth-child(6), table.tableHistory td:nth-child(7), table.tableHistory td:nth-child(8), table.tableHistory td:nth-child(9) {display: flex; flex-basis: 50%; flex-direction: row; font-style: italic; font-weight: 700;} table.tableHistory td:nth-child(10) {display: flex; flex-basis: 100%; flex-direction: row; font-style: italic; font-weight: 700;} table.tableHistory td:nth-child(4):before {content: 'Purchased:'; margin-right: .5em; font-style: normal; font-weight: 400;} table.tableHistory td:nth-child(5):before {content: 'Consumed:'; margin-right: .5em; font-style: normal; font-weight: 400;} table.tableHistory td:nth-child(7):before {content: 'Price: ';font-style: normal; font-weight: 400;} table.tableHistory td:nth-child(8):before {content: 'Quota: ';font-style: normal; font-weight: 400;} table.tableHistory td:nth-child(9):before {content: 'History: ';font-style: normal; font-weight: 400;} table.tableHistory td:nth-child(10):before {content: 'Modified on: ';font-style: normal; font-weight: 400;} table.tableHistory td:nth-child(6) {flex-basis: 50%; text-align: center!important; display: flex; flex-direction: row; line-height: 1em; font-size: 1.5em; font-weight: 200;} table.tableHistory td:nth-child(6):before {content: '\F4D7'; width: 1.25em; font-family: bootstrap-icons !important; font-size: 1.5em; text-align: left; color: var(--burgundy); font-style: normal; font-weight: 200;} table.tableHistory td:nth-child(1), table.tableHistory td:nth-child(2), table.tableHistory td:nth-child(11) {flex-basis: 33.3%;} table.tableHistory td.dt-type-date {text-align: left!important;} /*LOCKER MOVE*/ .btnSelectAll span {width: 1px; height: 1px; display: block; position: absolute; left: -99999em;} table.tableMove thead.table-light th:first-child, table.tableMove thead.table-light th:nth-child(2) {width: 1px; height: 1px; display: block; position: absolute; left: -99999em;} table.table.tableMove > tbody > tr {overflow: hidden;} table.tableMove td {padding: .5rem .5rem;} table.tableMove td:nth-child(1) {order: 1} table.tableMove td:nth-child(2) {order: 2} table.tableMove td:nth-child(3) {order: 3} table.tableMove td:nth-child(4) {order: 4} table.tableMove td:nth-child(5) {order: 5} table.tableMove td:nth-child(1) {flex-basis: 10%; display: inline-block;} table.tableMove td:nth-child(2) {flex-basis: 90%; display: inline-block;} table.tableMove td:nth-child(3), table.tableMove td:nth-child(4) {flex-basis: 50%; font-weight: 700; display: inline-block;} table.tableMove td:nth-child(5) {flex-basis: 100%; display: inline-block;} table.tableMove td:nth-child(3):before {content: 'Vintage: '; margin-right: .5em; font-style: normal; font-weight: 400; display: inline-block;} table.tableMove td:nth-child(4):before {content: 'Varietal: '; margin-right: .5em;;font-style: normal; font-weight: 400; display: inline-block;} table.tableMove td:nth-child(5):before {content: 'ID: '; margin-right: .5em; font-style: normal; font-weight: 400; display: inline-block;} table.tableMove td.dt-type-numeric {text-align: left!important;} } .aiSuggestion {margin-top: 2px; line-height: 1em; display: block;} .aiSuggestion a {margin: .5em .5em 0 6px; padding: .5em 1em; font-size: .8em; font-style: italic; background-color: #097242; color: #fff; border-radius: 0 0 6px 6px; text-decoration: none;} .aiSuggestion a:before {content: '\F286 '; margin-right: .5em; font-family: bootstrap-icons !important; font-style: normal; line-height: 1em; color: #fff; display: inline-block;} /*.aiSuggestion a:after {content: '\F589 '; margin-left: .5em; font-family: bootstrap-icons !important; font-style: normal; line-height: 1em; color: #284194; text-decoration: none!important; display: inline-block;}*/ /*LOCKER GRID*/ .storageLocation {margin-bottom: 1rem; align-items: center; column-gap: 10px;} .storageLocation label { white-space: nowrap; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-lt); white-space: nowrap; } .storageLocation .form-select {flex-basis: 50%; font-size: 13px; font-family: "DM Sans", Arial,Helvetica,sans-serif;} .wcLockerGrid {margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, auto); grid-column-gap: 6px; grid-row-gap: 6px; justify-items: stretch; align-items: stretch; list-style-position: inside; font-size: 2em; font-weight: bold; list-style-type: none; grid-template-columns: repeat(var(--items-per-row), 1fr); background: transparent; } .wcLockerGrid .wcLockerCell {background: var(--white); min-height: 88px; margin: 0;background: #fff; border: 1px solid var(--border); padding: 0; position: relative; cursor: pointer; transition: box-shadow 0.15s, border-color 0.15s, transform 0.12s;} .wcLockerGrid .wcLockerCell:hover {box-shadow: var(--shadow-md); border-color: rgba(74,21,40,0.28); transform: translateY(-1px);} .wcLockerGrid .wcLockerCell.open {background: rgba(36,250,1,.05);} .wcLockerGrid .wcLockerCell.open:hover {box-shadow: var(--shadow-md); border-color: rgba(74,21,40,0.28); transform: translateY(-1px);} .wcLockerGrid .wcLockerCell a {width: 100%; height: 100%; border-radius: 6px; padding: 15px 15px 12px 15px; font-size: .5em; font-weight: normal; text-align: left; line-height: 1em; display: inline-block; text-decoration: none;} .wcLockerGrid .wcLockerCell a:focus {outline-color: var(--burgundy);} .wcLockerGrid .wcLockerCell a h2 {background: transparent; margin-bottom: 0; padding: 0; font-size: 12px;font-weight: 400; text-align: left; position: absolute; left: 10px; bottom: 11px;border-width: 0;} .wcLockerGrid > .wcLockerCell span.wcLockerNumber {font-variant-numeric: lining-nums tabular-nums; position: absolute; right: 10px; top: calc(70% - 20px); transform: translateY(-52%); font-family: 'Cormorant Garamond', serif; font-size: 40px; font-weight: 600; line-height: 1; color: var(--cream-dk); pointer-events: none; user-select: none; letter-spacing: -2px; } .wcLockerGrid:first-child {counter-reset: customlistcounter;} .wcLockerGrid .wcLockerCell ul.wcGridWineList {font-size: .8em; line-height: 1.2em; margin-left: 1em;} .wcLockerGrid .wcLockerCell ul.wcGridWineList li {margin-bottom: 0;} .wcLockerGrid .wcLockerCell .wcCount { background: var(--burgundy); font-size: 14px; line-height: 1em; color: var(--white); display: block; text-align: center; position: absolute; left: 6px; top: 6px; font-family: 'DM Mono', monospace; font-size: 10.5px; font-weight: 500; padding: 2px 7px; border-radius: 3px; line-height: 1.6; } /*.wcLockerGrid .wcLockerCell .wcCount:after {content: '\F1CE'; font-size: 2em; color: #391475; position: absolute; left: 3px; top: 0; z-index: 9;}*/ /* Subtle fill bar at bottom of card */ .locker-fill-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--cream-dk); border-radius: 0 0 6px 6px; } .locker-fill-bar-inner { height: 100%; border-radius: 0 0 0 6px; background: #6B2340; transition: width 0.3s ease; opacity: 0.55; } .locker-fill-bar-inner.near-full { background: #B87333; opacity: 0.7; } .locker-fill-bar-inner.full { background: #8B0000; opacity: 0.8; } @media only screen and (max-width: 680px) { .wcLockerGrid { margin: 0; padding: 1em 2em; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, auto); } } @media only screen and (max-width: 480px) { .wcLockerGrid { margin: 0; padding: .25em; display: grid; grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(1, auto); } .adminHome .wcLockerGrid { grid-template-columns: repeat(2, 1fr); } } @media only screen and (max-width: 1080px) { .bsLockCompWrap.wcLockerGrid .bsLockCompItem.wcLockerCell .bsLockCompContent h3 { font-size: 12px;} .bsLockCompItemVarietal, .bsLockCompItemAppellation {font-size: 11px;} .bsLockCompItemVarietal i:before {content: '\F5CE'; margin-right: 5px;} .bsLockCompItemAppellation i:before {content: '\F3C5'; margin-right: 2px;} } @media only screen and (max-width: 1000px) { .wcLockerGrid { margin: 0; padding: .5em .5em; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, auto); } } @media only screen and (max-width: 812px) and (orientation: landscape) { .bsLockCompWrap.wcLockerGrid .bsLockCompItem.wcLockerCell .bsLockCompContent {padding: 5px;} .bsLockCompWrap.wcLockerGrid .bsLockCompItem.wcLockerCell .bsLockCompContent h3 {font-size: 10px;} } @media only screen and (max-width: 810px) { .bsLockCompWrap.wcLockerGrid .bsLockCompItem.wcLockerCell .bsLockCompContent {padding: 5px;} .bsLockCompWrap.wcLockerGrid .bsLockCompItem.wcLockerCell .bsLockCompContent h3 {height: 3.5em;} } @media only screen and (max-width: 680px) { .wcLockerGrid { margin: 0; padding: 1em 2em; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, auto); } } @media only screen and (max-width: 480px) { .wcLockerGrid { margin: 0; padding: .25em; display: grid; grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(1, auto); } .adminHome .wcLockerGrid {grid-template-columns: repeat(2, 1fr);} .rightHalf .noDrag .bsLockCompItemAdd i:before {content: '\F35B';} .bottleCount a.bottleRemove {line-height: .75em;} .bottleCount a.bottleAdd {line-height: .9em;} .bsLockCompWrap.wcLockerGrid .bsLockCompItem.wcLockerCell {margin-bottom: 5px;} .bsLockCompWrap.wcLockerGrid .bsLockCompItem.wcLockerCell .bsLockCompContent {padding-bottom: 5px; padding-right: 50px;} .bottleCount {width: 45px; height: calc(100% - 30px); padding-right: 13px; left: unset; right: 0; top: 30px; } .bottleCount a.bottleRemove, .bottleCount a.bottleAdd {width: 100%; border-radius: 4px 0 0 4px; float: none; } .bottleCount a.bottleAdd {position: absolute; top: 10px; right: 0px; } .bottleCount a.bottleRemove {position: absolute; bottom: 0px; right: 0px; border-radius: 4px 0 0 0;} .bottleValue {width: 100%;position: absolute; top: 42%; right: 0px; text-align: center; padding-right: 0;} .bsLockCompWrap.wcLockerGrid .bsLockCompItem.wcLockerCell .bsLockCompContent h3 {margin-bottom: 3px; font-size: 1em;} .bsLockCompItemVarietal, .bsLockCompItemAppellation, .bsLockCompItemAltName {margin-bottom: 0;} .bsLockCompItemYear {font-size: 1em;} #divLockCompGridAI.bsLockCompWrap.wcLockerGrid .bsLockCompItem.wcLockerCell .bsLockCompContent {padding-bottom: 0;} .rightHalf .noDrag .bsLockCompItemAdd i:before {top: 7px;} i.icon.iconRightArrow:before {content: '\F358';} } /*CONSUPMTION CONTROLS*/ .activeConsumption.col-lg-3 {display: none;} .lockerDetails.col-lg-9 {width: 100%;} .consumptionTracking .lockerDetails.col-lg-9 {width: 75%!important;} .consumptionTracking .activeConsumption.col-lg-3 {display: block;} .bottle-container { /*width: 120px; margin: 2em auto; text-align: center;*/ } .neck { width: 60px; margin: auto; height: 30px; background: #e6e6e6; border: 1px solid #ccc; border-radius: 3px; line-height: 30px; font-size: 12px; } .neck:after {content: ''; display: block; width: 30px; height: 50px; margin-left: 14px; border-left: 3px solid #ccc;border-right: 3px solid #ccc; } .bottle { width: 100px; height: 220px; margin: auto; border: 3px solid #ccc; border-radius: 30px 30px 2px 2px; position: relative; overflow: hidden; margin-top: 50px; } .bottleWhiskey .bottle {border-radius: 10px;} .liquid { position: absolute; bottom: 0; width: 100%; background: #CF7F1D; opacity: .5; transition: height 0.25s ease; z-index: 9; } .bottlePercent {position: absolute; top: calc(50% - 18px); z-index:10;} .bottleVodka .bottle {border-radius: 6px;} .bottleVodka .liquid {background: #e6f2f8; opacity: .75;} .bottleTaquila .bottle {border-radius: 10px 10px 2px 2px; } .bottleTaquila .liquid {background: #CF7F1D; opacity: .75;} .bottlePort .liquid {background: #450a23; opacity: .75;} .bottleSparkling .liquid {background: #F7E7CE; opacity: .75;} /* buttons inside the bottle */ .btnConsumption { width: 28px; height: 28px; background: var(--accent); color: white; font-size: 20px; border-radius: 50%; line-height: 28px; position: absolute; left: 50%; transform: translateX(-50%); cursor: pointer; z-index: 10; } #plusBtn { top: 25px; } #minusBtn { bottom: 25px; } .amount-label { margin-top: 8px; font-size: 14px; } .consumption-bar { display: inline-flex; align-items: center; gap: 6px; } .consumption-track { width: 60px; height: 8px; background-color: #e9ecef; border-radius: 4px; overflow: hidden; } .consumption-fill { height: 100%; border-radius: 4px; transition: width 0.3s ease; } .consumption-fill.high { background-color: #198754; } /* green: > 60% */ .consumption-fill.medium { background-color: var(--gold-lt); } /* yellow: 30-60% */ .consumption-fill.low { background-color: var(--burgundy); } /* red: < 30% */ .consumption-label { font-size: 0.75rem; color: #198754; font-weight: 600; } .consumption-label.high { color: #198754; } .consumption-label.medium { color: var(--gold-lt); } .consumption-label.low { color: var(--burgundy); } /*FRONT OF THE HOUSE*/ .FOHpage .col-md-8.mb-4 {width: 100%; } .FOHpage .col-md-4.mb-4 {display: none;} /*COLOR CHANGES .card, .card-body {background: transparent; } .card.shadow-lg {box-shadow: none!important;} .card-body {padding-left: 0; padding-right: 0;} .col-12.col-lg-9 > .d-lg-block {box-shadow: var(--shadow); border-radius: 0 0 10px 10px!important;} .col-12.col-lg-3 > .d-flex.flex-column {background: #fff!important; padding-left: 10px; padding-right: 10px; border-radius: 0 0 10px 10px;} .card.border-0.shadow-sm.h-100 {box-shadow: none!important;} */ .lockerOwnerWrap .lockerLocation {font-family: "DM Sans", sans-serif; font-size: } h5.text-white.bg-primary {margin-bottom: 0!important; border-radius:10px 10px 0 0 ; font-family: "Cormorant", serif;} .summary-block { background: var(--white); border: 1px solid var(--border); } .summary-block-move { background: var(--cream); border-radius: 8px; padding: 1rem; border: 1px solid var(--border); } .summary-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.82rem; margin-bottom: 0.5rem; } .summary-row:last-child { margin-bottom: 0; } .summary-key { color: var(--ink-lt); font-weight: 300; } .summary-val { font-family: 'DM Mono', monospace; font-size: 0.78rem; color: var(--ink-mid); font-weight: 500; text-align: right; max-width: 60%; } .summary-val.accent { color: var(--burgundy); } .capacity-bar-wrap { margin: 1.25rem 0; } .capacity-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.4rem; } .capacity-label { font-family: 'DM Mono', monospace; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-lt); } .capacity-nums { font-family: 'DM Mono', monospace; font-size: 0.72rem; color: var(--ink-mid); } .capacity-nums strong { color: var(--burgundy); } .bar-track { height: 8px; background: var(--cream-dk); border-radius: 99px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 99px; background: var(--burgundy-mid); transition: width 0.4s cubic-bezier(.4,0,.2,1); } .bar-fill.warning { background: #B87333; } .bar-fill.full { background: #8B0000; } .bar-incoming { height: 100%; border-radius: 99px; background: var(--gold); opacity: 0.6; transition: width 0.4s cubic-bezier(.4,0,.2,1); margin-left: 1px; } .bar-track-inner { display: flex; height: 100%; } .capacity-message { margin-top: 0.5rem; font-size: 0.75rem; border-radius: 5px; padding: 0.5rem 0.65rem; display: none; } .capacity-message.show { display: block; } .capacity-message.ok { background: rgba(74,21,40,0.06); color: var(--burgundy-mid); } .capacity-message.warn { background: rgba(184,115,51,0.1); color: #7A4A10; } .capacity-message.error { background: rgba(139,0,0,0.08); color: #8B0000; } .divider { height: 1px; background: var(--border); margin: .75rem 0 .75rem; } /*HOME PAGE*/ /* ── Right sidebar ── */ .sidebar { background: var(--mist); border-left: 1px solid var(--border); padding: 16px 15px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; } .sidebar-card { background: #fff; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; box-shadow: var(--shadow-sm); } .sidebar-card-head { background: var(--burgundy); padding: 8px 13px; } .sidebar-card-title { font-family: 'Cormorant Garamond', serif; font-size: 14.5px; font-weight: 600; color: #fff; letter-spacing: 0.01em; } .sidebar-card-body { padding: 4px 0; } /* Metric rows */ .metric-row { display: flex; align-items: center; padding: 7px 13px; border-bottom: 1px solid rgba(74,21,40,0.06); gap: 9px; } .metric-row:last-child { border-bottom: none; } .metric-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0.45; } .metric-label { flex: 1; font-size: 12.5px; color: var(--ink-mid); font-weight: 300; } .metric-value { font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 500; color: var(--burgundy); } /* Chart */ .chart-body { padding: 10px 13px 12px; } .chart-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .chart-row:last-child { margin-bottom: 0; } .chart-label { font-size: 11.5px; color: var(--ink-lt); text-align: right; width: 130px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 300; } .chart-bar-wrap { flex: 1; background: var(--cream-dk); border-radius: 3px; height: 14px; overflow: hidden; } .chart-bar { height: 100%; background: var(--burgundy-mid); border-radius: 3px; opacity: 0.7; transition: width 0.5s ease; } .chart-bar:hover { opacity: 0.9; } .chart-num { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--ink-lt); width: 22px; text-align: right; flex-shrink: 0; } :root { --burgundy-mid: #6B2340; /* add the others while you're there */ } /*LOCKER PAGE*/ .column-right { background: var(--mist); border-left: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 16px 14px; display: flex; flex-direction: column; border-radius: 0 0 6px 6px;} /* Locker summary stats */ .locker-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--border); } .locker-stat { background: #fff; padding: 10px 8px; text-align: center; } .locker-stat-val { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 600; color: var(--burgundy); line-height: 1; } .locker-stat-label { font-size: 9.5px; color: var(--ink-lt); font-weight: 300; margin-top: 2px; font-family: 'DM Mono', monospace; letter-spacing: 0.05em; text-transform: uppercase; } /* Owner breakdown */ .owner-breakdown { padding: 10px 13px; } .owner-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; font-size: 12.5px; border-bottom: 1px solid rgba(74,21,40,0.06); } .owner-row:last-child { border-bottom: none; } .owner-row-name { color: var(--ink-mid); font-weight: 400; } .owner-row-count { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--ink-lt); } /* Capacity bar — sits flush at the bottom of each locker cell */ .wcLockerCell { position: relative; /* needed for absolute bar positioning */ } .wcCapacityBar { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: var(--cream-dk, #EAE3D5); border-radius: 0 0 6px 6px; overflow: hidden; z-index: 9; } .wcCapacityFill { height: 100%; background: #6B2340; opacity: 0.55; border-radius: 0 0 0 6px; transition: width 0.3s ease; position: relative; z-index: 10; } /* Amber when >= 80% full */ .wcCapacityFill.near-full { background: #B87333; opacity: 0.7; } /* Red when 100% full */ .wcCapacityFill.full { background: #8B0000; opacity: 0.8; } .wcLockerCell.empty { background: #fff; opacity: .5; border: 1px dashed rgba(74, 21, 40, 0.2) !important; box-shadow: none; } .wcLockerCell.empty a { opacity: 0.45; } .wcLockerCell.empty h2 { color: var(--ink-lt, #6B5240); font-weight: 300; } .wcLockerCell.empty .wcLockerNumber { opacity: 0.4; } .wcLockerCell.empty .wcCapacityBar { display: none; } /* ── Table footer ── */ .table-footer { background: var(--burgundy); padding: 9px 14px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.75); border-radius: 0 0 6px 6px; } .table-footer strong { color: var(--gold-lt); } .table-footer-links { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 12px; } .table-footer-link { color: rgba(255,255,255,0.5); text-decoration: underline; cursor: pointer; background: none; border: none; font-family: 'DM Sans', sans-serif; font-size: 12px; transition: color 0.15s; } .table-footer-link:hover { color: rgba(255,255,255,0.8)!important;} .table-footer-link.footer-text-danger { color: rgba(255,100,100,0.55); } .table-footer-link.footer-text-danger:hover { color: rgba(255,100,100,0.85); } .table-footer-sep { color: rgba(255,255,255,0.15); } @media (max-width: 810px) { .column-content { padding-right: 0 !important; } .column-right { background: transparent; padding: 0; border: 0; } } /*CHAT SLIDER*/ /* ── Overlay ── */ .chat-overlay { position: fixed; inset: 0; background: rgba(44, 36, 38, 0.25); backdrop-filter: blur(2px); z-index: 999; opacity: 0; pointer-events: none; transition: opacity var(--transition-smooth); } .chat-overlay.active { opacity: 1; pointer-events: auto; } /* ── Floating trigger button ── */ .chat-trigger { position: fixed; bottom: 28px; right: 28px; z-index: 1001; width: 60px; height: 60px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--wine-deep) 0%, var(--wine-rich) 100%); color: white; cursor: pointer; box-shadow: 0 4px 20px rgba(74, 14, 46, 0.3), 0 0 0 0 rgba(74, 14, 46, 0.2); transition: all var(--transition-smooth); display: flex; align-items: center; justify-content: center; } .chat-trigger:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(74, 14, 46, 0.4), 0 0 0 6px rgba(74, 14, 46, 0.08); } .chat-trigger.hidden { opacity: 0; pointer-events: none; transform: scale(0.8); } .chat-trigger svg { width: 26px; height: 26px; } /* ── Panel ── */ .chat-panel { display: flex; flex-direction: column; height: 100%; } .chat-panel.open { transform: translateX(0); } /* ── Panel header ── */ .chat-header { flex-shrink: 0; padding: 20px 24px 16px; background: linear-gradient(180deg, var(--wine-deep) 0%, var(--wine-rich) 100%); position: relative; overflow: hidden; } .chat-header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.4; } /* Decorative grape vine pattern */ .chat-header::before { content: ''; position: absolute; top: -20px; right: -20px; width: 140px; height: 140px; background: radial-gradient(circle at center, rgba(197, 162, 101, 0.06) 0%, transparent 70%); border-radius: 50%; } .chat-header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .chat-brand { display: flex; align-items: center; gap: 12px; position: relative; z-index: 9; } .chat-logo { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; } .chat-logo svg { width: 32px; height: 32px; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.15)); } .chat-brand-text h2 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 18px; color: #fff; letter-spacing: 0.5px; line-height: 1.1; } .chat-brand-text span { font-size: 11px; color: var(--wine-blush); font-weight: 300; letter-spacing: 1.5px; text-transform: uppercase; } .chat-close { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition-smooth); position: relative; z-index: 10; } .chat-close:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.25); } .chat-close svg { width: 16px; height: 16px; } /* ── Search / Input (pinned below header) ── */ .chat-input-area { flex-shrink: 0; padding: 16px 20px; background: var(--cream); border-bottom: 1px solid var(--border-subtle); position: relative; z-index: 2; } .chat-input-wrapper { display: flex; align-items: flex-end; gap: 10px; background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 6px 6px 6px 16px; transition: all var(--transition-smooth); box-shadow: var(--shadow-soft); } .chat-input-wrapper:focus-within { border-color: var(--wine-light); box-shadow: 0 0 0 3px rgba(74, 14, 46, 0.06), var(--shadow-soft); } .chat-input { flex: 1; border: none; outline: none; font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--text-primary); background: transparent; resize: none; min-height: 22px; max-height: 100px; line-height: 1.5; padding: 4px 0 8px; } .chat-input::placeholder { color: var(--text-muted); font-weight: 300; } .chat-send { flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px; border: none; background: linear-gradient(135deg, var(--wine-deep), var(--wine-rich)); color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition-smooth); opacity: 0.4; pointer-events: none; } .chat-send.active { opacity: 1; pointer-events: auto; } .chat-send:hover { background: linear-gradient(135deg, var(--wine-rich), var(--wine-mid)); transform: scale(1.04); } .chat-send svg { width: 16px; height: 16px; } /* ── Messages area (scrollable) ── */ .chat-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--wine-blush) transparent; } .chat-messages::-webkit-scrollbar { width: 5px; } .chat-messages::-webkit-scrollbar-thumb { background: var(--wine-blush); border-radius: 10px; } /* Welcome message */ .chat-welcome { text-align: center; padding: 30px 16px; animation: fadeUp 0.6s ease-out both; } .chat-welcome-icon { width: 48px; height: 48px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--wine-pale), var(--gold-pale)); border-radius: 50%; } .chat-welcome-icon svg { width: 24px; height: 24px; color: var(--wine-rich); } .chat-welcome h3 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 20px; color: var(--wine-deep); margin-bottom: 6px; } .chat-welcome p { font-size: 13px; color: var(--text-muted); line-height: 1.6; max-width: 280px; margin: 0 auto; } /* Quick actions */ .chat-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; } .quick-action { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 400; color: var(--wine-rich); background: #fff; border: 1px solid var(--border-light); border-radius: 20px; padding: 7px 14px; cursor: pointer; transition: all var(--transition-smooth); white-space: nowrap; } .quick-action:hover { background: var(--wine-pale); border-color: var(--wine-blush); color: var(--wine-deep); } /* Message bubbles */ .message { display: flex; gap: 10px; max-width: 95%; animation: fadeUp 0.35s ease-out both; } .message.user { align-self: flex-end; flex-direction: row-reverse; } .message.bot { align-self: flex-start; } .message-avatar { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 2px; } .message.bot .message-avatar { background: linear-gradient(135deg, var(--wine-pale), var(--gold-pale)); } .message.bot .message-avatar svg { width: 14px; height: 14px; color: var(--wine-rich); } .message.user .message-avatar { background: var(--wine-deep); color: white; font-size: 11px; font-weight: 600; } .message-bubble { padding: 10px 14px; font-size: 13.5px; line-height: 1.6; border-radius: var(--radius-md); position: relative; text-align: left; } .message.user .message-bubble { background: var(--wine-deep); color: rgba(255,255,255,0.95); border-top-right-radius: 0px; } .message.bot .message-bubble { background: #fff; color: var(--text-primary); border: 1px solid var(--border-subtle); border-top-left-radius: 0px; box-shadow: var(--shadow-soft); } .message.bot .message-bubble strong { color: var(--wine-deep); font-weight: 600; } /* Typing indicator */ .typing-indicator { display: flex; gap: 10px; align-self: flex-start; max-width: 95%; animation: fadeUp 0.3s ease-out both; } .typing-avatar { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--wine-pale), var(--gold-pale)); display: flex; align-items: center; justify-content: center; } .typing-avatar svg { width: 14px; height: 14px; color: var(--wine-rich); } .typing-bubble { padding: 12px 18px; background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); border-bottom-left-radius: 4px; box-shadow: var(--shadow-soft); display: flex; align-items: center; gap: 5px; } .typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wine-blush); animation: typingPulse 1.4s ease-in-out infinite; } .typing-dot:nth-child(2) { animation-delay: 0.15s; } .typing-dot:nth-child(3) { animation-delay: 0.3s; } /* Wine pour loading animation */ .wine-pour-loader { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 22px; background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); border-bottom-left-radius: 4px; box-shadow: var(--shadow-soft); } .wine-glass-anim { width: 28px; height: 36px; position: relative; } .wine-glass-anim .glass-outline { width: 100%; height: 100%; } .wine-fill { position: absolute; bottom: 8px; left: 5px; right: 5px; height: 0; background: linear-gradient(180deg, var(--wine-mid), var(--wine-deep)); border-radius: 0 0 7px 7px; animation: pourWine 2s ease-in-out infinite; opacity: 0.8; } .pour-text { font-size: 11px; color: var(--text-muted); font-style: italic; letter-spacing: 0.3px; } /* ── Footer ── */ .chat-footer { flex-shrink: 0; padding: 10px 20px; text-align: center; border-top: 1px solid var(--border-subtle); background: var(--cream-warm); margin-top: auto; } .chat-footer span { font-size: 10.5px; color: var(--text-muted); letter-spacing: 0.5px; } .chat-footer a { color: var(--wine-light); text-decoration: none; } /* ── Animations ── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes typingPulse { 0%, 60%, 100% { opacity: 0.3; transform: scale(0.85); } 30% { opacity: 1; transform: scale(1); } } @keyframes pourWine { 0% { height: 0; } 40% { height: 16px; } 60% { height: 16px; } 100% { height: 0; } } /* ── Responsive ── */ @media (max-width: 480px) { .chat-panel { width: 100vw; } } .ee-recipient-quickload { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .ee-quickload-label { font-size: 11.5px; color: var(--ink-mid); font-weight: 300; white-space: nowrap; } /* ── TOKEN WRAP ── */ .ee-token-wrap { width: 100%; background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); margin: 0 auto; } .ee-token-pills { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 10px; min-height: 52px; border-bottom: 1px solid var(--border-subtle); } .ee-pills-empty { font-size: 12.5px; color: var(--ink-mid); opacity: 0.45; align-self: center; font-style: italic; } .ee-pill { display: inline-flex; align-items: center; gap: 5px; background: var(--wine-pale); border: 1px solid var(--border-light); border-radius: 20px; padding: 3px 8px 3px 10px; transition: background var(--transition-smooth); } .ee-pill:hover { background: var(--cream-dk); } .ee-pill-name { font-size: 12.5px; color: var(--ink); white-space: nowrap; } .ee-pill-remove { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: none; background: rgba(74,21,40,0.12); color: var(--burgundy); cursor: pointer; padding: 0; font-size: 11px; line-height: 1; transition: background 0.15s, color 0.15s; } .ee-pill-remove:hover { background: var(--burgundy); color: #fff; } .ee-token-input-row { position: relative; padding: 10px 14px; } .ee-token-input-wrap { display: flex; align-items: center; gap: 8px; background: var(--mist); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 7px 12px; transition: border-color 0.2s, box-shadow 0.2s; } .ee-token-input-wrap:focus-within { border-color: var(--border-light); box-shadow: 0 0 0 3px rgba(74,14,46,0.06); background: var(--white); } .ee-token-search-icon { color: var(--ink-mid); opacity: 0.4; font-size: 13px; } .ee-token-input { flex: 1; border: none; outline: none; background: transparent; font-family: 'DM Sans', sans-serif; font-size: 13.5px; color: var(--ink); } .ee-token-input::placeholder { color: var(--ink-mid); opacity: 0.4; font-weight: 300; } .ee-token-results { position: absolute; top: calc(100% - 6px); left: 14px; right: 14px; background: var(--white); border: 1px solid var(--border-light); border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: 0 8px 24px rgba(74,14,46,0.10); z-index: 200; } .ee-result-item { display: flex; align-items: center; padding: 9px 14px; cursor: pointer; border-bottom: 1px solid var(--border-subtle); transition: background 0.1s; gap: 8px; } .ee-result-item:last-child { border-bottom: none; } .ee-result-item:hover { background: var(--mist); } .ee-result-item.selected { background: var(--gold-pale); } .ee-result-name { flex: 1; font-size: 13px; color: var(--ink); } .ee-result-role { font-family: 'DM Mono', monospace; font-size: 10.5px; color: var(--ink-mid); opacity: 0.6; } .ee-result-icon { font-size: 15px; } .ee-result-add { color: var(--messageGood); } .ee-result-check { color: var(--messageGood); } .ee-token-summary { padding: 8px 14px 10px; font-family: 'DM Mono', monospace; font-size: 11.5px; color: var(--ink-mid); opacity: 0.6; border-top: 1px solid var(--border-subtle); } /* ── SIDEBAR ── */ .ee-sidebar-card { background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-soft); } .ee-sidebar-card-head { background: var(--burgundy); padding: 9px 14px; } .ee-sidebar-card-title { font-family: 'Cormorant Garamond', serif; font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.85); letter-spacing: 0.01em; } .ee-detail-row { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 14px; border-bottom: 1px solid var(--border-subtle); gap: 12px; } .ee-detail-row:last-child { border-bottom: none; } .ee-detail-key { font-size: 11.5px; color: var(--ink-mid); font-weight: 300; } .ee-detail-val { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--ink); } /* ── MOBILE TOGGLE ── */ .mock-responsive-toggle { display: flex; gap: 8px; align-items: center; margin: 20px 0 0 0; } .mock-responsive-toggle button { font-size: 11px; font-family: 'DM Mono', monospace; padding: 4px 10px; border: 1px solid var(--border); background: transparent; border-radius: 4px; cursor: pointer; color: var(--ink-mid); } .mock-responsive-toggle button.active { background: var(--burgundy); color: #fff; border-color: var(--burgundy); } .mock-label { font-size: 11px; color: var(--ink-mid); font-family: 'DM Mono', monospace; opacity: 0.6; } #mockFrame { transition: max-width 0.35s cubic-bezier(0.4,0,0.2,1); max-width: 100%; } #mockFrame.mobile { max-width: 390px; margin: 0 auto; } #mockFrame.mobile .ee-layout { grid-template-columns: 1fr; } #mockFrame.mobile .ee-side { border-radius: 0; border-bottom: 1px solid var(--border-subtle); order: -1; } #mockFrame.mobile .ee-main { border-right: none; } #mockFrame.mobile .mock-nav-links { display: none; }