body {
margin: 0;
font-family: arial;
background-color: #fff;
}
@keyframes popup {
0% {
opactiy: 0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
@keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
@media print {
body * {
visibility: hidden;
}
#printDiv, #printDiv * {
visibility: visible;
}
#printDiv {
position: absolute;
right: 3mm;
top: 0;
margin: auto;
padding: 3mm;
width: 70mm;
box-sizing: border-box;
font-size: 10pt;
}
}
:root {
--main-font-color: #555;
--lead-dark-color: #005151;
--lead-dark-gray: #49566a;
--lead-light-color: #fcf5eb;
--lead-very-light-blue: aliceblue;
--lead-med-blue: cadetblue;
}
/*
Room calendar table
*/
.tooltip {
position: absolute;
padding: 6px 8px;
background: rgba(0,0,139,0.7);
border: 1px solid #0f0d0d;
border-radius: 4px;
font-size: 12px;
color: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
z-index: 10;
cursor: pointer;
white-space: nowrap;
}
.static-footer-container {
position: fixed;
min-height: 50px;
border-top: 1px solid #ccc;
background-color: #fff;
bottom: 0;
left: 0;
width: 100%;
z-index: 1000;
box-sizing: border-box;
padding: 10px;
}
/* scroll gallery buttons */
.overlay-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.button-overlay {
display: flex;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
}
.arrow-container {
width: 50px;
height: 50px;
background-color: rgba(255,255,255,0.5);
border-radius: 50%;
cursor: pointer;
}
.arrow-container.left {
margin: 0 auto 0px 10px;
}
.arrow-container.right {
margin: 0 10px 0px auto;
}
.arrow-button {
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
opacity: 0.9;
}
.arrow-button.left {
background-image: url(/media/left-arrow-backup-2.svg);
}
.arrow-button.right {
background-image: url(/media/right-arrow-backup-2.svg);
}
.arrow-cadetblue-right {
background-image: url(https://samahita-media.ams3.cdn.digitaloceanspaces.com/media/svg/right-arrow-cadetblue.svg);
background-repeat: no-repeat;
background-size: 18px 18px;
background-origin: content-box;
}
.arrow-white-right {
background-image: url(https://samahita-media.ams3.cdn.digitaloceanspaces.com/media/svg/right-arrow-white.svg);
background-repeat: no-repeat;
background-size: 18px 18px;
background-origin: content-box;
}
.arrow-button-white-right {
background-image: url(https://samahita-media.ams3.cdn.digitaloceanspaces.com/media/svg/right-arrow-white.svg);
background-repeat: no-repeat;
background-size: 18px 18px;
background-position: center right 10px;
background-origin: content-box;
border: 0px;
padding: 8px;
}
.arrow-button-white-right.submitted {
background-image: none;
background-color: #ccc;
color: #666;
}
.arrow-button-cadetblue-right {
background-image: url(https://samahita-media.ams3.cdn.digitaloceanspaces.com/media/svg/right-arrow-cadetblue.svg);
background-repeat: no-repeat;
background-position: center right 10px;
background-size: 18px 18px;
background-origin: content-box;
background-color: #fff;
border: 1px solid cadetblue;
color: cadetblue;
border-radius: 20px;
padding: 8px;
cursor: pointer;
}
.round-button-right-arrow-white {
background-image: url(https://samahita-media.ams3.cdn.digitaloceanspaces.com/media/svg/right-arrow-white.svg);
background-position: center;
background-repeat: no-repeat;
background-origin: content-box;
cursor: pointer;
}
.round-button-right-arrow-white.bg-25 {
background-size: 25px 25px;
}
.round-button-right-arrow-white.bg-20 {
background-size: 20px 20px;
}
.round-button-right-arrow-white.bg-18 {
background-size: 18px 18px;
}
/* rotate bg arrow button 45deg */
.arrow-button-cadetblue-right.rotated-top-right {
background-image: none;
position: relative;
}
.arrow-button-cadetblue-right.rotated-top-right::before {
content: '';
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
width: 18px;
height: 18px;
background-image: url(https://samahita-media.ams3.cdn.digitaloceanspaces.com/media/svg/right-arrow-cadetblue.svg);
background-repeat: no-repeat;
background-size: 18px 18px;
background-position: center;
}
.bg-hourglass-white {
background-image: url(/static/white-hourglass.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-size: 25px 25px;
}
.bg-hourglass-white.sq40 {
background-size: 40px 40px;
}
@media only screen and (max-width: 600px) {
.arrow-container {
width: 40px;
height: 40px;
}
.arrow-button {
width: 30px;
height: 30px;
}
}
/* end */
.cell-basic {
font-size: 12px;
}
.cell-available {
background-color: #ccc;
color: #666;
}
.cell-booked-paid {
background-color: #0fb9b9;
color: #fff;
}
.cell-booked-notpaid {
background-color: #f56962;
color: #fff;
}
.cell-retreat-paid {
background-color: #77e85d;
color: #fff;
}
.cell-retreat-notpaid {
background-color: #f8b333;
color: #fff;
}
.cell-blocked-maintainence {
background-color: #00008b;
color: #fff;
}
.cell-blocked-tt {
background-color: darkviolet;
color: #fff;
}
.cell-blocked-in-house-retreat {
background-color: darkred;
color: #fff;
}
.cell-blocked-private-retreat {
background-color: #006400;
color: #fff;
}
.cell-blocked-guest {
background-color: crimson;
color: #fff;
}
.cell-blocked-other {
color: #fff;
background-color: cornflowerblue;
}
.horizontal-menu {
display: flex;
flex-wrap: wrap;
background-color: #fff;
}
.horizontal-menu button {
margin: 10px auto;
width: 140px;
}
.blue-link {
color: dodgerblue;
cursor: pointer;
}
/*
.horizontal-menu a {
text-decoration: none;
color: #000;
}
*/
/* horizontal-menu active link */
.horizontal-menu .active {
background-color: aliceblue;
border: 1px solid #a9a9a9;
border-bottom: none;
color: #000;
}
.horizontal-menu .inactive {
background-color: #fff;
color: #666;
border: none;
border-top: 1px solid #a9a9a9;
border-right: 1px solid #a9a9a9;
border-left: 1px solid #a9a9a9;
border-bottom: 1px solid #a9a9a9;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.pos-menu {
display: flex;
}
.pos-menu > div {
flex: 1;
text-align: center;
font-size: 20px;
cursor: pointer;
padding-top: 20px;
padding-bottom: 20px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.pos-menu .active {
background-color: aliceblue;
color: #333;
border-right: 1px solid cadetblue;
border-left: 1px solid cadetblue;
border-top: 1px solid cadetblue;
}
.pos-menu .inactive {
background-color: #fff;
color: #666;
border: 1px solid #ccc;
border-bottom: 1px solid cadetblue;
}
/* media query only below 600px width */
@media only screen and (max-width: 600px) {
.horizontal-menu > a {
width: 100%;
display: block;
}
}
.horizontal-menu > a {
font-size: 17px;
text-align: center;
color: #000;
padding: 10px;
flex: 1;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: #fff;
max-width: 200px;
}
.horizontal-menu > .blank {
background-color: transparent;
flex: 1;
border-bottom: 1px solid #ccc;
width: auto;
}
.horizontal-menu a:visited {
text-decoration: none;
}
@media only screen and (max-width: 400px) {
.horizontal-menu {
display: block;
height: auto;
}
.horizontal-menu > div {
border-bottom: 1px solid #ccc;
text-align: left;
padding: 15px;
margin: 0;
}
}
.search-bar {
display: flex;
flex-wrap: wrap;
}
.search-bar label {
margin-right: 10px;
font-size: 16px;
line-height: 2;
min-width: 100px;
}
/*
ADMIN MENU TOP - the form bar at the top of an admin page
Standard pattern (examples: reservations/bookings.html, wellness/therapy_packages.html):
anything else goes OUTSIDE the bar
Rules
1. The bar is .admin-menu-top (aliceblue background + bottom border, defined in book_retreats.css) with
.search-bar (wrapping flex row). Use both, plus .display-flex.
2. Cards are .selector divs and DIRECT children of the bar. No wrapper column div between bar and card.
3. Never set a width on a card, field or button (no max-width-215, no fixed widths) and do not add
mar-10 / mar-top-0 to a card. The rules below size them: fields and buttons are 215px wide above
500px and 100% wide at 500px and below, cards go full width at 500px and below.
4. Fields are .siadmin-input, buttons are .siadmin-button (.white for a secondary button). Put each field or
button in its own div so it takes the full card width on mobile.
5. Card titles are a plain div (txt-444) inside the card.
6. A card with its own padding or border (e.g. .siadmin-form-box) also needs .border-box or it overflows
the screen on mobile.
7. Titles, headings and tables are not children of the bar. Put them below it.
Breakpoints (existing .search-bar rules below and in the media queries further down this file):
700px and up cards centre in the row (auto left/right margin)
700px and below cards have no margin
500px and below cards, fields and buttons are 100% wide, button padding grows
400px and below .search-bar > div > div is 90% wide and centred
*/
/* the bar wraps its cards instead of overflowing, with or without .search-bar */
.admin-menu-top {
flex-wrap: wrap;
}
/* a .selector card that is a direct child of .admin-menu-top follows the same responsive rules as inside
.search-bar, so every admin-menu-top bar sizes its cards the same way (keep these in step with the
.search-bar > div rules in the media queries below) */
@media only screen and (min-width: 700px) {
.admin-menu-top > .selector {
margin-left: auto;
margin-right: auto;
}
}
@media only screen and (max-width: 700px) {
.admin-menu-top > .selector {
margin: 0px;
}
}
@media only screen and (max-width: 500px) {
.admin-menu-top > .selector {
width: 100%;
}
}
.room-detail-box {
}
.guest-box-outer {
/*
min-width: 350px;
max-width: 600px;
*/
width: 100%;
/*
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin: 20px auto 0px auto;
*/
border-top: 0px;
/*
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
*/
border: 1px solid #ccc;
background-color: #fff;
box-sizing: border-box;
}
@media only screen and (min-width: 600px) {
/* .guest-box-outer {
width: 500px;
}
*/
}
@media only screen and (max-width: 599px) {
/*
.guest-box-outer {
width: 350px;
}
*/
}
.guest-box-header {
flex-wrap: nowrap;
background-color: cadetblue;
padding: 15px;
color: #fff;
/*
border-top-left-radius: 10px;
border-top-right-radius: 10px;
*/
}
/* mini tab styles */
.mini-tab-container {
width: 100%;
background-color: cadetblue;
display: flex;
box-sizing: border-box;
}
.mini-tab-header-active {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #fff;
padding: 7px;
width: 50%;
min-width: 50%;
font-size: 14px;
background-color: #fff;
color: #333;
text-align: center;
box-sizing: border-box;
cursor: pointer;
}
.mini-tab-header-inactive {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
border-bottom: 1px solid #dedede;
padding: 7px;
width: 50%;
min-width: 50%;
font-size: 14px;
background-color: #efefef;
color: #666;
text-align: center;
box-sizing: border-box;
cursor: pointer;
}
.room-notification-panel {
width: auto;
display: flex;
flex-wrap: wrap;
}
@media only screen and (max-width: 500px) {
.room-detail-box {
width: 100%;
padding: 10px;
}
.scroll-table {
margin-top: 50px;
}
.room-notification-panel {
width: 100%;
}
}
.bg-no-repeat {
background-repeat: no-repeat;
}
.bg-size-auto {
background-size: auto;
}
.scroll-parent-container {
/*
display: flex;
flex-wrap: wrap;
*/
}
.scroll-table {
box-sizing: border-box;
max-height: 700px;
margin-bottom: 40px;
}
.scroll-table-header {
box-sizing: border-box;
}
.scroll-table-body {
box-sizing: border-box;
height: 700px;
}
.scroll-table-data {
box-sizing: border-box;
}
.scroll-sidebar {
box-sizing: border-box;
max-height: 700px;
width: 50px;
min-width: 50px;
}
.sq-cell-50-top {
box-sizing: border-box;
min-width: 52px;
max-width: 52px;
min-height: 52px;
max-height: 52px;
height: 52px;
width: 52px;
padding: 5px;
border-right: 1px solid #dedede;
border-top: 1px solid #dedede;
border-bottom: 1px solid #dedede;
}
.sq-cell-25 {
min-width: 25px;
max-width: 25px;
max-height: 25px;
max-width: 25px;
width: 25px;
height: 25px;
padding: 2px;
}
.sq-cell-50 {
box-sizing: border-box;
min-width: 52px;
max-width: 52px;
max-height: 52px;
max-width: 52px;
width: 52px;
height: 52px;
padding: 5px;
border-right: 1px solid #dedede;
border-bottom: 1px solid #dedede;
}
/* square headers for rect- table */
.sq-headers-cell-50 {
min-width: 50px;
max-width: 50px;
min-height: 50px;
max-height: 50px;
box-sizing: border-box;
}
/* sub header strip under the room codes (rate sheet increment row) */
.sq-subheader-cell-50 {
min-width: 50px;
max-width: 50px;
min-height: 26px;
max-height: 26px;
box-sizing: border-box;
}
.rect-subheader-left-corner-cell {
min-width: 100px;
max-width: 100px;
min-height: 26px;
max-height: 26px;
box-sizing: border-box;
}
/* narrow column left of the room grid: a row's vertical (day bracket) adjustment */
.rect-cell-bracket-panel-h60 {
min-width: 70px;
max-width: 70px;
width: 70px;
min-height: 60px;
max-height: 60px;
height: 60px;
box-sizing: border-box;
}
.sq-bracket-header-50 {
min-width: 70px;
max-width: 70px;
min-height: 50px;
max-height: 50px;
box-sizing: border-box;
}
.sq-bracket-subheader {
min-width: 70px;
max-width: 70px;
min-height: 26px;
max-height: 26px;
box-sizing: border-box;
}
.rect-cell-h52-w80 {
min-width: 80px;
max-width: 80px;
width: 80px;
height: 80px;
min-height: 52px;
max-height: 52px;
box-sizing: border-box;
}
/* header cell of side panel for rect - table */
.rect-header-left-corner-cell {
box-sizing: border-box;
min-width: 100px;
max-width: 100px;
min-height: 50px;
max-height: 50px;
}
.rect-sidebar {
box-sizing: border-box;
width: 100px;
min-width: 100px;
max-width: 100px;
}
.rect-scroll-sidebar {
box-sizing: border-box;
width: 100px;
min-width: 100px;
max-width: 100px;
overflow: hidden;
}
.rect-cell-side-panel {
box-sizing: border-box;
max-width: 100px;
min-width: 100px;
width: 100px;
max-height: 80px;
min-height: 80px;
height: 80px;
}
.rect-cell {
box-sizing: border-box;
max-width: 50px;
min-width: 50px;
width: 50px;
max-height: 80px;
min-height: 80px;
height: 80px;
}
.rect-cell-side-panel-h60 {
box-sizing: border-box;
max-width: 100px;
min-width: 100px;
width: 100px;
max-height: 60px;
min-height: 60px;
height: 60px;
}
.rect-cell-h60 {
box-sizing: border-box;
max-width: 50px;
min-width: 50px;
width: 50px;
max-height: 60px;
min-height: 60px;
height: 60px;
}
@media only screen and (min-width: 700px) {
.search-bar > div {
margin-left: auto;
margin-right: auto;
}
}
@media only screen and (min-width: 800px) {
.scroll-parent-container {
/*
flex-wrap: wrap;
*/
}
.scroll-table {
overflow: hidden;
}
.room-detail-box {
min-width: 300px;
}
.scroll-table-header {
overflow: hidden;
}
.scroll-table-body {
}
.scroll-table-data {
overflow: hidden;
}
.scroll-sidebar {
overflow: hidden;
}
}
@media only screen and (man-width: 800px) {
.scroll-table {
width: 90%;
}
}
@media only screen and (max-width: 700px) {
.search-bar > div {
margin: 0px;
}
}
@media only screen and (max-width: 799px) {
.scroll-table {
overflow: hidden;
}
.scroll-table-header {
overflow: hidden;
}
.scroll-table-body {
overflow: hidden;
}
.scroll-table-data {
overflow: hidden;
}
.scroll-sidebar {
overflow: hidden;
}
}
.mini-table {
margin: auto;
}
.mini-table > div {
width: 100%;
border-bottom: 1px solid #ccc;
display: flex;
flex-wrap: nowrap;
overflow-wrap: break-word;
}
.mini-table > div > div {
width: 50%;
padding: 5px;
}
@media only screen and (max-width: 400px) {
.search-bar > div > div{
width: 90%;
margin: 5px auto;
}
}
@media only screen and (max-width: 800px) and (min-width: 600px) {
.room-detail-box {
padding: 10px;
}
}
@media only screen and (min-width: 801px) {
}
.box-center-600-wide {
margin-left: auto;
margin-right: auto;
width: 600px;
margin-bottom: 50px;
}
@media only screen and (max-width: 600px) {
.box-center-600-wide {
width: 90%;
}
}
.basic-table {
background-color: #fff;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.table-title {
font-size: 25px;
background-color: #f3928c;
color: #fff;
text-align: center;
padding: 10px 0 10px 0;
}
.table-sub-title {
padding: 8px 0 8px 0;
font-size: 18px;
text-align: center;
}
.basic-table .top-row {
display: flex;
flex-wrap: wrap;
padding: 8px 0 8px 0;
text-align: center;
box-sizing: border-box;
}
.basic-table > .top-row > .cell {
border: 0;
}
.basic-table .row {
display: flex;
flex-wrap: wrap;
text-align: center;
width: 100%;
border-bottom: solid 1px #ccc;
box-sizing: border-box;
}
.basic-table .row .cell {
margin-left: auto;
margin-right: auto;
padding: 8px 0 8px 0;
width: 150px;
}
.basic-table .top-row .cell {
margin-left: auto;
margin-right: auto;
width: 150px;
padding: 8px 0 8px 0;
}
.basic-table .row .w-a {
width: 50%;
text-align: left;
}
.w40 {
width: 40%;
}
.w48 {
width: 48%;
}
.w50 {
width: 50%;
}
.w80 {
width: 80%;
}
.w20 {
width: 20%;
}
.w23 {
width: 23%;
}
.w25 {
width: 25%;
}
.w75 {
width: 75%;
}
.w70 {
width: 70%;
}
.w30 {
width: 30%;
}
.wid-10pc {
width: 10%;
}
.top-bar {
margin-left: 0;
}
.siadmin-payments-form {
/*
display: flex;
flex-wrap: wrap;
*/
box-sizing: border-box;
}
.siadmin-payments-form > div {
box-sizing: border-box;
padding: 10px;
}
.siadmin-payments-form > div {
margin: 0;
}
.siadmin-collapse-title {
text-align: left;
font-size: 18px;
cursor: pointer;
background-repeat: no-repeat;
background-position: right;
background-image: url('data:image/svg+xml;charset=utf8,')
}
.siadmin-payments-form > div > div {
width: 100%;
}
.siadmin-payments-form > div > div > input {
width: 100%;
margin: 0;
box-sizing: border-box;
}
.siadmin-payments-form > div > div > select {
width: 100%;
}
.siadmin-logo-title {
background-size: 210px;
background-image: url(/media/samahita-international-grey-horiz.svg);
background-position: right 20px top 30px;
/* background right with 20px padding */
background-repeat: no-repeat;
color: #fff;
text-align: center;
font-size: 28px;
font-family: serif;
letter-spacing: 2px;
height: 80px;
line-height: 2.5;
}
.siadmin-logo {
background-color: #fff;
}
.logo-title {
color: #fff;
text-align: center;
font-size: 28px;
font-family: serif;
letter-spacing: 2px;
height: 68px;
line-height: 2.5;
}
@media only screen and (max-width: 600px) {
.logo-title {
padding-left: 20px;
font-size: 18px;
line-height: 3.8;
}
.siadmin-logo-title {
background-size: 160px;
}
}
.side-menu {
width: 200px;
height: 100%;
background-color: #000;
color: #fff;
position: fixed;
top: 0;
left: 0;
padding-left: 0;
}
.side-menu ul {
list-style-type: no-none;
margin-top: 200px;
margin-left: 15px;
}
.side-menu li {
padding: 0 0 15px 5px;
font-size: 18px;
}
.side-menu a {
color: #fff;
text-decoration: none;
}
.side-menu a:visited {
color: #fff;
text-decoration: none;
}
.title-1 {
text-align: right;
font-size: 28px;
}
.float-title {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
margin-left: auto;
margin-right: 10px;
text-align: center;
min-width: 250px;
}
@media only screen and (max-width: 600px) {
.float-title {
margin-left: auto;
margin-right: auto;
}
}
.grad-blk-gry {
background: linear-gradient(#000 60%, #989898);
}
.info-box-name {
padding: 4px 2px;
margin-bottom: 2px;
word-break: break-word;
font-weight: bold;
font-size: 18px;
}
.info-box-row {
display: flex;
flex-wrap: nowrap;
box-sizing: border-box;
}
.info-box-row > div {
width: 50%;
padding: 5px;
/*
border-bottom: #ccc solid 1px;
*/
word-break: break-word;
}
.info-box-row-2 {
display: flex;
flex-wrap: nowrap;
box-sizing: border-box;
}
.info-box-row-2 div {
width: 50%;
padding-bottom: 7px;
padding-top: 7px;
text-align: left;
border-bottom: #ccc solid 1px;
word-break: break-word;
}
.info-box-row-3 {
display: flex;
flex-wrap: nowrap;
box-sizing: border-box;
}
.info-box-row-3 div {
width: 50%;
padding-bottom: 2px;
padding-top: 2px;
text-align: left;
word-break: break-word;
}
.info-box-row .lr {
font-size: 14px;
}
.info-box-title {
font-weight: bold;
font-size: 20px;
text-align: center;
padding-top: 10px;
border-bottom: solid #ccc 1px;
margin-bottom: 5px;
}
.info-box-sub-title {
font-weight: bold;
padding: 10px 5px;
/*
border-bottom: solid #ccc 1px;
*/
margin-bottom: 5px;
}
.notice {
color: #666666;
font-size: 20px;
padding: 10px 0 10px 0;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}
.error-notice {
color: red;
font-size: 18px;
padding: 10px 0 10px 0;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
text-align: center;
}
.floating-div {
background-color: #fff;
position: absolute;
z-index: 1001;
animation-name: popup;
animation-duration: 0.8s;
animation-fill-mode: forwards;
animation-play-state: running;
opacity: 0.1;
box-shadow: 7px 7px 30px #222;
}
.popup-message {
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
font-size: 24pt;
color: #000;
text-align: center;
}
.popup-message a {
text-decoration: none;
color: #000;
font-weight: bold;
}
.popup-message a:visited {
text-decoration: none;
color: #000;
font-weight: bold;
}
.popup-close {
font-size: 30pt;
color: #000;
float: right;
padding: 5px 15px 5px 5px;
}
.vertical-scroll-container {
overflow: auto;
padding: 0;
margin-top: 0;
/*
min-height: 200px;
border-bottom: 1px solid #989898;
*/
}
.vertical-scroll-list-cell {
min-width: 150px;
max-width: 150px;
/*
min-height: 40px;
max-height: 40px;
*/
overflow: hidden;
margin: 0 auto;
padding: 8px 8px;
text-align: center;
font-size: 14px;
}
.vertical-scroll-list-header-cell {
min-width: 150px;
max-width: 150px;
padding: 10px 5px 10px 0px;
text-align: center;
font-size: 15px;
margin-left: auto;
margin-right: auto;
}
.vertical-scroll-list-header-cell:hover {
background-color: #3a8688;
}
.vertical-scroll-list-header-cell.sorted-asc {
background-image: url(https://samahita-media.ams3.cdn.digitaloceanspaces.com/media/svg/up-arrow-white.svg);
background-position: center right;
background-repeat: no-repeat;
background-size: 10px 10px;
background-origin: content-box;
}
.vertical-scroll-list-header-cell.sorted-desc {
background-image: url(https://samahita-media.ams3.cdn.digitaloceanspaces.com/media/svg/down-arrow-white.svg);
background-position: center right;
background-repeat: no-repeat;
background-size: 10px 10px;
background-origin: content-box;
}
.vertical-scroll-list-cell-100 {
box-sizing: border-box;
min-width: 100px;
max-width: 100px;
/*
min-height: 40px;
max-height: 40px;
*/
overflow: hidden;
margin: 0 auto;
padding: 8px 8px;
text-align: center;
font-size: 14px;
}
.vertical-scroll-list-header-cell-100 {
box-sizing: border-box;
min-width: 100px;
max-width: 100px;
margin: auto;
padding: 5px 8px;
text-align: center;
font-size: 15px;
}
.vertical-scroll-list-row {
animation-name: fade;
animation-duration: 0.8s;
animation-fill-mode: forwards;
animation-play-state: running;
display: flex;
flex-wrap: nowrap;
margin: 1px 0;
cursor: pointer;
}
.vertical-scroll-list-headers {
display: flex;
flex-wrap: nowrap;
border-bottom: 1px solid #ccc;
cursor: pointer;
color: #fff;
overflow: hidden;
}
.side-scroll-title {
font-size: 30px;
background-color: #efefef;
color: #666666;
margin-top: 50px;
padding: 10px 0 0 0;
text-align: center;
}
.side-scroll-container {
overflow: auto;
padding: 20px 0 20px 0;
display: flex;
flex-wrap: nowrap;
margin-top: 0;
min-height: 270px;
}
.side-scroll-outer-box {
opacity: 0;
animation-name: fade;
animation-duration: 0.8s;
animation-fill-mode: forwards;
animation-play-state: running;
display: inline-block;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.side-scroll-inner-box {
background-color: #fff;
min-height: 330px;
margin-left: 10px;
margin-right: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding: 10px;
box-sizing: border-box;
}
@media only screen and (min-width: 401px) {
.side-scroll-inner-box {
min-width: 270px;
max-width: 270px;
}
}
@media only screen and (max-width: 400px) {
.side-scroll-inner-box {
}
.side-scroll-header {
width: 100%;
}
.side-scroll-outer-box {
width: 100%;
}
}
.side-scroll-inner-header {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
min-width: 270px;
margin-left: 10px;
margin-right: 10px;
}
.block-selector-container {
display: flex;
border-top: 1px solid #989898;
border-bottom: 1px solid #989898;
}
.block-selector {
padding: 10px;
}
.block-selector div {
}
/*
.block-selector select {
border-radius: 15px;
border: none;
background-color: #ffffff;
padding: 7px;
box-shadow: 2px 2px 0px 0px #c1c1c1 inset;
outline: none;
margin: 5px;
}
.block-selector input[type=text] {
border-radius: 15px;
border: none;
background-color: #ffffff;
padding: 7px;
box-shadow: 2px 2px 0px 0px #c1c1c1 inset;
outline: none;
margin: 5px;
}
*/
.block-selector label {
width: 50px;
}
.block-selector > div > label {
width: 50px;
}
@media only screen and (min-width: 601px) {
.block-selector-container {
flex-wrap: no-wrap;
}
.block-selector input[type=text] {
width: 100px;
}
.block-selector select {
width: 120px;
}
.block-selector {
width: 50vw;
}
}
@media only screen and (max-width: 600px) {
.block-selector-container {
flex-wrap: wrap;
}
.block-selector input[type=text] {
width: 100px;
}
.block-selector select {
width: 120px;
}
.block-selector {
width: 100vw;
}
}
.sq-form {
}
.sq-form > div {
}
.selector {
padding: 12px;
margin-top: 10px;
margin-bottom: 10px;
/* display: flex;
flex-wrap: wrap;
*/
}
.selector select {
background-color: #ffffff;
padding-top: 8px;
padding:left: 8px;
padding-bottom: 8px;
outline: none;
margin: 5px 5px 5px 0;
}
.selector input {
padding: 8px;
margin: 5px 5px 5px 0;
outline: none;
}
.siadmin-form-box {
background-color: antiquewhite;
padding: 20px;
border-radius: 5px;
border: 1px solid #ccc;
}
@media only screen and (min-width: 501px) {
.selector select {
width: 215px;
}
.siadmin-button {
width: 215px;
}
.selector input {
width: 215px;
}
.selector input.w-50 {
width: 50px;
}
.selector input.w-auto {
width: auto;
}
.siadmin-input {
width: 215px;
}
}
.round-white-button {
border: 1px solid #989898;
background-color: #fff;
color: #333;
cursor: pointer;
padding: 5px;
min-width: 100px;
max-width: 150px;
text-align: center;
border-radius: 5px;
}
@media only screen and (max-width: 500px) {
.selector select {
width: 100%;
}
.siadmin-button {
width: 100%;
padding: 10px;
margin-top: 10px;
}
.selector input {
width: 100%;
}
.search-bar div {
width: 100%;
}
.mob-width-100pc {
width: 100%;
}
.siadmin-input {
width: 100%;
}
}
.upper {
text-transform: uppercase;
}
.siadmin-box-header {
background-color: cadetblue;
max-width: 270px;
box-sizing: border-box;
}
.siadmin-bgcolor {
background-color: cadetblue;
border: 0px;
}
.siadmin-bg-dark {
background-color: #3a8688;
}
.bg-alice-grad {
background: linear-gradient(180deg, aliceblue, transparent);
}
.bg-lead-dark-gray {
background-color: #49566a;
}
.bg-transparent {
background-color: rgba(0,0,0,0);
}
.bg-emerald {
background-color: #47857d;
}
.bg-emerald-light {
background-color: #47857dd6;
}
.bg-seafoam {
background-color: #90b5b6;
}
.bg-e9 {
background-color: #e9e9e9;
}
.siadmin-input {
box-sizing: border-box;
border: 1px solid #9dbaba;
background-color: #fff;
}
.siadmin-button {
text-align: center;
border: 0;
background-color: cadetblue;
color: #fff;
font-size: 16px;
padding: 7px;
box-sizing: border-box;
cursor: pointer;
}
.siadmin-button.white {
background-color: #ffffff;
color: #333;
border: 1px solid #ccc;
}
.siadmin-button.bg-red {
background-color: red;
color: #fff;
}
.siadmin-button.bg-orange {
background-color: #ff5800;
color: #fff;
}
.detail-container {
background-color: #efefef;
min-height: 500px;
word-break: break-word;
}
.brk-all {
word-break: break-all;
}
.simple-flex-box {
display: flex;
flex-wrap: wrap;
}
.simple-flex-box > .centered-row {
margin-left: auto;
margin-right: auto;
padding: 5px;
}
.centered-row > div {
text-align: center;
padding: 5px;
}
.centered-row > .tr {
font-size: 14px;
font-weight: bold;
}
.detail-container > .detail-item {
opacity: 0;
animation-name: fade;
animation-duration: 0.8s;
animation-fill-mode: forwards;
animation-play-state: running;
background-color: #fff;
margin: 0 10px 10px 10px;
padding: 20px;
border-radius: 10px;
min-height: 250px;
}
.detail-bill {
margin: 5px 0;
}
.detail-bill-title {
padding: 10px;
color: #000;
}
.bill-item a {
color: #fff;
}
.bill-item a:visited {
color: #fff;
}
.bill-item div {
width: 25%;
margin: 0 auto;
border-bottom: 1px solid #efefef;
}
.detail-mini-item {
padding: 15px;
width: 250px;
border-radius: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-left: auto;
margin-right: auto;
}
.detail-title {
padding: 10px 0;
color: #000;
text-align: center;
font-size: 20px;
border-bottom: 1px solid #ccc;
}
.detail-mini-row {
display: flex;
}
.detail-mini-item > div > div{
border-bottom: solid 1px #ccc;
padding: 5px 0;
}
.detail-mini-row > div {
width: 130px;
padding: 3px 0;
}
.detail-mini-row > .lr {
font-weight: bold;
font-size: 14px;
}
.detail-mini-row > .rr {
}
.detail-list-box-header {
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
padding: 15px;
}
.detail-list-outer-box {
width: 100%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
border: 1px solid #ccc;
}
.detail-list-box {
width: 100%;
padding: 15px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.guest-photo {
width: 200px;
height: 300px;
border: 3px solid #989898;
border-radius: 10px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}
.no-shad {
box-shadow: none;
}
/* resize div */
.resize-parent-container {
position: absolute;
box-sizing: border-box;
margin: 0px;
top: 0px; /* Same as .header height */
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
max-width: 100vw;
}
.resize-container {
display: flex;
height: 100%;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.left-menu-container {
width: 200px;
min-width: 100px;
height: 100%;
position: relative;
flex-shrink: 0;
}
.left-menu-header {
width: 100%;
height: 50px;
}
.left-menu-header-title {
width: 100%;
height: 50px;
}
.left-panel {
width: 73%;
min-width: 10%;
overflow-y: hidden;
overflow-x: auto;
/* */
}
.resizer-vertical {
width: 5px;
background: #ccc;
cursor: ew-resize;
}
.right-panel {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.center-panel {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 200px;
max-width: 100%;
}
.right-menu-container {
color: whitesmoke;
background-color: #010103;
width: 400px;
min-width: 400px;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.agent-response-container {
display: flex;
flex: 1;
width:100%;
padding: 20px;
box-sizing: border-box;
overflow: auto;
}
.agent-input-container {
height: 100px;
width:100%;
display: flex;
}
.agent-input {
font-family: arial;
padding: 10px;
border-radius: 20px;
width: 90%;
border: none;
box-sizing: border-box;
resize: none;
margin: auto;
}
.agent-input.dark {
background-color:#353566;
color: #fff;
}
.top-panel {
display: flex;
overflow: hidden;
flex-direction: column;
}
.resizer-horizontal {
height: 5px;
background: #ccc;
cursor: ns-resize;
}
.bottom-panel {
display: flex;
flex: 1;
height: 40%;
min-height: 10%;
overflow: hidden;
flex-direction: column;
}
.panel-header {
flex-shrink: 0; /* Prevent it from shrinking */
min-height: 30px;
}
.panel-header > div {
margin-top: auto;
margin-bottom: auto;
}
.panel-header > div.mar-top-0 {
margin-top: 0px;
}
.panel-body {
flex: 1;
overflow-y: auto;
}
/* end resize div */
/* Advanced Graph Styles – graph fills container (e.g. #graph_container), axes at edges */
.legend {
display: block;
position: absolute;
top: 65px;
left: 10px;
z-index: 10;
width: 200px;
}
.legend-body-container {
display: block;
overflow: auto;
max-height: 600px;
padding: 5px;
width: 100%;
box-sizing: border-box;
border: 1px solid #dedede;
}
.legend-body-container.hidden {
display: none;
}
.legend-header-bar {
padding: 5px;
cursor: pointer;
background-color: #dedede;
font-size: 14px;
color: #000;
}
.legend-row {
margin-right: 10px;
display: flex;
align-items: center;
padding-bottom: 5px;
}
.chart-menu-wrapper {
position: relative;
}
.chart-menu-list {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 20;
border: 1px solid #dedede;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.chart-menu-list.hidden {
display: none;
}
.chart-menu-item {
display: block;
padding: 8px 10px;
text-align: left;
cursor: pointer;
font-size: 12px;
}
.chart-menu-item:hover {
background-color: #f5f5f5;
}
.chart-with-legend {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 16px;
}
.chart-legend-labels {
min-width: 180px;
max-width: 280px;
font-size: 12px;
color: #333;
}
.chart-legend-row {
display: flex;
align-items: center;
margin-bottom: 6px;
}
.chart-legend-label-text {
display: flex;
justify-content: space-between;
gap: 12px;
flex: 1;
}
.advanced-graph-container {
position: relative;
width: 100%;
min-width: 0;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.graph-box,
.graph-inner-container {
width: 100%;
min-width: 0;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.svg-graph-advanced-container {
position: relative;
display: block;
width: 100%;
min-width: 0;
flex: 1;
min-height: 0;
overflow: hidden;
}
/* Prevent SVG viewBox from imposing min-height and forcing vertical expansion */
.svg-graph-advanced-container svg {
display: block;
min-height: 0;
max-height: 100%;
box-sizing: border-box;
padding: 40px;
}
.svg-graph-advanced-container .crosshair-line {
transition: opacity 0.1s ease;
}
.svg-graph-advanced-container .volume-bar {
transition: opacity 0.15s ease;
}
.svg-graph-advanced-container .volume-bar:hover {
opacity: 1 !important;
}
.svg-graph-advanced-container .average-line {
transition: opacity 0.2s ease;
}
.svg-graph-advanced-container:hover .average-line {
opacity: 0.8 !important;
}
/* Crosshair Labels */
.crosshair-label,
.crosshair-value-label {
position: absolute;
pointer-events: none;
white-space: nowrap;
z-index: 15;
}
.crosshair-label {
background: rgba(0,0,0,0.75);
color: #fff;
padding: 2px 6px;
border-radius: 3px;
font-size: 10px;
}
.crosshair-value-label {
background: rgba(0,0,139,0.85);
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 11px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.crosshair-label.hidden,
.crosshair-value-label.hidden {
display: none;
}
/* Staff agent chat (content AI Gen) — scroll transcript + floating composer */
.staff-agent-shell {
position: relative;
width: 100%;
padding: 0 40px;
margin-left: auto;
margin-right: auto;
min-height: 72vh;
box-sizing: border-box;
}
.staff-agent-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
padding: 8px 4px 12px;
border-bottom: 1px solid #e0e0e0;
margin-bottom: 4px;
}
.staff-agent-scroll {
padding: 12px 8px 160px;
box-sizing: border-box;
line-height: 1.55;
font-size: 15px;
color: #333;
}
.staff-agent-scroll .staff-agent-msg-user {
background: #efefef;
border-radius: 18px;
padding: 10px 14px;
margin-bottom: 10px;
max-width: 95%;
white-space: pre-wrap;
word-break: break-word;
}
.staff-agent-scroll .staff-agent-msg-assistant {
margin-bottom: 28px;
padding: 4px 2px 12px;
word-break: break-word;
}
.staff-agent-scroll .staff-agent-msg-assistant pre {
overflow-x: auto;
padding: 10px;
background: #f4f4f4;
border-radius: 8px;
font-size: 13px;
}
.staff-agent-composer-outer {
position: fixed;
bottom: 10px;
left: 0;
right: 0;
display: flex;
justify-content: center;
padding: 12px 16px 16px;
pointer-events: none;
box-sizing: border-box;
z-index: 2;
}
.staff-agent-composer {
pointer-events: auto;
display: flex;
align-items: center;
gap: 8px;
width: 100%;
max-width: 560px;
margin: 0;
padding: 6px 8px 6px 12px;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 999px;
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
}
.staff-agent-composer #llm_engine_selector {
flex-shrink: 0;
}
.staff-agent-composer input[type="text"],
.staff-agent-composer textarea.staff-agent-composer-input {
flex: 1;
min-width: 0;
border: 0;
outline: none;
font-size: 15px;
padding: 10px 8px;
color: #222;
background: transparent;
font-family: inherit;
line-height: 1.35;
}
/* ~2× previous single-line height; grows up to cap */
.staff-agent-composer textarea.staff-agent-composer-input {
resize: none;
min-height: 50px;
font-size: 12px;
max-height: 280px;
overflow-y: auto;
}
/* Staff agent send: round-button-right-arrow-white + main-bg-dark (book_retreats utilities) */
.main-bg-dark {
background-color: #1a1a2e;
}
.bg10 {
background-color: #f3f3f5;
}
.staff-agent-composer button.round-button-right-arrow-white {
flex-shrink: 0;
display: block;
}
button.staff-agent-send-wait {
flex-shrink: 0;
line-height: 1;
font-size: 16px;
background-image: none !important;
}
button.staff-agent-send-wait:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* --- si_admin Agents page (agents.js) ----------------------------------- */
.agent-chat-toolbar {
display: flex;
justify-content: flex-end;
align-items: center;
flex-shrink: 0;
padding: 8px 12px 4px;
border-bottom: 1px solid #2a3040;
background: #1a1d28;
}
.agent-clear-chat-btn {
appearance: none;
border: 1px solid #4a525b;
background: #252a38;
color: #c8cdd6;
font-size: 12px;
line-height: 1.2;
padding: 5px 10px;
border-radius: 6px;
cursor: pointer;
}
.agent-clear-chat-btn:hover {
background: #323848;
color: #f0f2f6;
border-color: #6a7484;
}
.agent-clear-chat-btn:active {
background: #1e2230;
}
.agent-welcome-card {
border-left: 3px solid #6aa9ff;
}
.agent-welcome-intro p {
margin: 0 0 0.65em;
}
.agent-welcome-intro p:last-of-type {
margin-bottom: 0.35em;
}
.agent-welcome-starters-title {
margin-top: 0.85em !important;
font-size: 13px;
color: #a8b0bc;
}
.agent-welcome-starters {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.agent-welcome-starter {
appearance: none;
border: 1px solid #4a525b;
background: #2a3040;
color: #e8ecf2;
font-size: 12px;
line-height: 1.3;
padding: 7px 11px;
border-radius: 999px;
cursor: pointer;
text-align: left;
}
.agent-welcome-starter:hover:not(:disabled) {
background: #354055;
border-color: #6aa9ff;
color: #fff;
}
.agent-welcome-starter:disabled {
opacity: 0.55;
cursor: default;
}
.agent-response-container {
flex-direction: column;
gap: 10px;
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 0;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
background: #1e2230;
/* Firefox */
scrollbar-width: thin;
scrollbar-color: #4a525b #1e2230;
}
.agent-response-container::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.agent-response-container::-webkit-scrollbar-track {
background: #1e2230;
}
.agent-response-container::-webkit-scrollbar-thumb {
background: #3a4149;
border: 2px solid #1e2230;
border-radius: 8px;
}
.agent-response-container::-webkit-scrollbar-thumb:hover {
background: #4a525b;
}
.agent-response-container::-webkit-scrollbar-corner {
background: #1e2230;
}
.agent-bubble {
max-width: 100%;
width: auto;
box-sizing: border-box;
padding: 8px 12px;
border-radius: 12px;
font-size: 13px;
line-height: 1.45;
word-wrap: break-word;
overflow-wrap: anywhere;
word-break: break-word;
}
.agent-bubble-user {
align-self: flex-end;
background: #5681c3;
color: #f4f7ff;
max-width: 85%;
}
.agent-bubble-assistant {
align-self: stretch;
background: #2a2f3d;
color: #e6e8ee;
width: 100%;
border: 1px solid #3a4053;
}
.agent-bubble-assistant a {
color: #8ab4ff;
}
.agent-bubble-text {
overflow-wrap: anywhere;
word-break: break-word;
}
.agent-bubble-text pre {
white-space: pre-wrap;
overflow-x: auto;
max-width: 100%;
}
.agent-bubble-text code {
background: #1a1d28;
color: #e6e8ee;
padding: 1px 4px;
border-radius: 4px;
}
.agent-bubble-text table {
border-collapse: collapse;
margin: 6px 0;
font-size: 12px;
max-width: 100%;
table-layout: fixed;
word-break: break-word;
}
.agent-bubble-text th,
.agent-bubble-text td {
border: 1px solid #3a4053;
padding: 4px 8px;
text-align: left;
}
.agent-bubble-status {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 6px;
}
.agent-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 8px;
border-radius: 999px;
font-size: 11px;
background: #232838;
border: 1px solid #3a4053;
color: #c8ccd6;
}
.agent-chip-running {
border-color: #4a78d1;
background: #1f2c47;
color: #cfdcf6;
}
.agent-chip-done {
border-color: #2f6f4a;
background: #1d3327;
color: #b9e2c4;
}
.agent-chip-error {
border-color: #8a3232;
background: #3a1d1d;
color: #f1b5b5;
}
.agent-chip-spinner {
display: inline-block;
width: 10px;
height: 10px;
text-align: center;
line-height: 10px;
font-size: 10px;
}
.agent-chip-running .agent-chip-spinner {
border: 2px solid #4a78d1;
border-top-color: transparent;
border-radius: 50%;
animation: agent-chip-spin 0.8s linear infinite;
}
@keyframes agent-chip-spin {
to { transform: rotate(360deg); }
}
.agent-chip-note {
color: inherit;
opacity: 0.75;
}
/* While a run is in flight the composer's send button becomes the stop
button, so the arrow image is swapped for a square. Two classes to
outrank the bg-lead-dark / .gc-composer-send background utilities. */
.gc-composer-send.gc-composer-send-stop {
background-color: #8a2a2a;
background-image: none;
}
.gc-composer-send.gc-composer-send-stop:hover {
background-color: #a33434;
}
.gc-composer-send.gc-composer-send-stop::before {
content: "";
display: block;
width: 11px;
height: 11px;
border-radius: 2px;
background: #fff;
}
.agent-error {
color: #8a2a2a;
}
.agent-bubble-actions {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
}
.agent-bubble-actions:empty {
display: none;
}
/* Re-run + Download PDF: nowrap/no-shrink keeps "Re-run" on one line in a
narrow bubble; icon spacing is a margin so it holds without flex too */
.agent-rerun-btn,
.agent-pdf-btn {
display: inline-flex;
align-items: center;
flex-shrink: 0;
white-space: nowrap;
padding: 4px 12px;
border-radius: 999px;
font-size: 11px;
background: #1f2c47;
border: 1px solid #4a78d1;
color: #cfdcf6;
cursor: pointer;
line-height: 1;
text-decoration: none;
}
.agent-rerun-btn:hover,
.agent-pdf-btn:hover {
background: #2a3a5e;
color: #ffffff;
}
.agent-rerun-icon {
font-size: 13px;
line-height: 1;
margin-right: 5px;
}
.agent-rerun-summary {
font-size: 11px;
color: #8e96a8;
}
/* Workspace-rendered cards from ui_actions */
.agent-images-card,
.agent-bookings-card {
margin: 12px;
padding: 12px;
background: #fff;
border: 1px solid #e3e3e7;
border-radius: 8px;
}
.agent-images-card-header,
.agent-bookings-card-header {
font-weight: 600;
margin-bottom: 8px;
font-size: 14px;
color: #2a2a2a;
}
.agent-bookings-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
color: #222;
}
.agent-bookings-table th,
.agent-bookings-table td {
border: 1px solid #e3e3e7;
padding: 6px 8px;
text-align: left;
vertical-align: top;
}
/* zebra rows use the soft grey; the header sits one step darker */
.agent-bookings-table tbody tr:nth-child(even) td {
background: #f3f4f7;
}
.agent-bookings-table thead th {
background: #e6e8ee;
color: #444;
font-weight: 600;
position: sticky;
top: 0;
}
.agent-bookings-row {
cursor: pointer;
}
.agent-bookings-row:hover {
background: #eef4ff;
}
.agent-graph-card {
margin: 12px;
padding: 12px;
background: #fff;
border: 1px solid #e3e3e7;
border-radius: 8px;
}
.agent-graph-card-header {
font-weight: 600;
margin-bottom: 8px;
font-size: 14px;
color: #2a2a2a;
}
.agent-graph-target {
width: 100%;
overflow-x: auto;
}
.agent-graph-target svg {
max-width: 100%;
height: auto;
}
.agent-graph-legend {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid #ececf0;
}
.agent-graph-legend-row {
display: inline-flex;
align-items: center;
font-size: 12px;
color: #333;
}
.agent-graph-legend-swatch {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 2px;
margin-right: 6px;
border: 1px solid #ccc;
}
.agent-graph-legend-name {
color: #333;
}
.agent-graph-legend-total {
margin-left: 6px;
color: #777;
font-variant-numeric: tabular-nums;
}
.agent-graph-legend-more {
display: inline-flex;
align-items: center;
font-size: 12px;
color: #999;
font-style: italic;
}
.agent-images-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px;
overflow: auto;
/*
max-height: 600px;
min-height: 600px;
*/
}
.agent-images-cell {
margin: 0;
border-radius: 6px;
overflow: hidden;
}
.agent-images-cell img {
width: 100%;
height: 120px;
object-fit: cover;
display: block;
}
.agent-images-cell figcaption,
.agent-images-caption {
padding: 4px 6px;
font-size: 11px;
color: #555;
background-color: #efefef;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.agent-images-caption-title {
font-weight: 500;
}
.agent-images-dimensions {
font-size: 10px;
font-weight: 400;
color: #888;
}
.agent-images-cell a {
display: block;
cursor: zoom-in;
}
.agent-images-url-row {
display: flex;
gap: 4px;
padding: 4px 6px 6px;
background: #1a1d24;
border-top: 1px solid #2b3138;
}
.agent-images-url-input {
flex: 1 1 auto;
min-width: 0;
padding: 3px 6px;
font-size: 11px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
background: #0f1116;
color: #cfd3d8;
border: 1px solid #2b3138;
border-radius: 4px;
outline: none;
}
.agent-images-url-input:focus {
border-color: #3a72c5;
}
.agent-images-copy-btn {
flex: 0 0 auto;
padding: 3px 8px;
font-size: 11px;
background: #2f5fa3;
color: #f3f4f7;
border: 1px solid #3a72c5;
border-radius: 4px;
cursor: pointer;
}
.agent-images-copy-btn:hover { background: #3a72c5; }
.agent-images-copy-btn:disabled {
background: #4a4f59;
border-color: #4a4f59;
cursor: default;
}
/* Image library page — reuses agent tile grid + pagination bar */
.image-lib-card {
max-width: 100%;
margin-left: 10px;
margin-right: 10px;
}
.image-lib-pagination {
flex-wrap: wrap;
align-items: center;
gap: 2px;
}
.image-selector-cell {
cursor: pointer;
}
.image-selector-cell:hover {
outline: 2px solid #4a90d9;
outline-offset: 2px;
}
.image-selector-popup {
max-width: 920px;
width: 90vw;
box-sizing: border-box;
}
.image-url-selector-row {
align-items: center;
}
.image-url-selector-row > .siadmin-input {
flex: 1;
min-width: 0;
}
/* Gallery viewer (explore/gallery scroll popup) */
.full-width-scroll-parent {
width: 100%;
}
.scroll-container {
overflow-x: auto;
touch-action: pan-y;
display: flex;
flex-wrap: nowrap;
}
.full-width-scroll-section {
min-width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bg-img {
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bg-img.contain {
background-size: contain;
}
.circle-navigator-container {
display: flex;
flex-wrap: nowrap;
position: relative;
margin: auto;
height: 40px;
max-width: 300px;
min-width: 100px;
}
.circle-navigator {
margin: auto;
border-radius: 50%;
width: 6px;
height: 6px;
cursor: pointer;
}
.circle-navigator.active {
background-color: var(--lead-dark-color);
border: 1px solid var(--lead-dark-color);
}
.circle-navigator.inactive {
background-color: #fff;
border: 1px solid var(--lead-dark-color);
}
.agent-images-cell img.point {
cursor: pointer;
}
.image-gallery-slide-wrap {
position: relative;
box-sizing: border-box;
}
.image-gallery-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
padding: 10px 50px;
line-height: 1.4;
word-break: break-word;
box-sizing: border-box;
pointer-events: none;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.agent-images-edit-btn {
background: #4a5568;
border-color: #5c677a;
}
.agent-images-edit-btn:hover {
background: #5c677a;
}
.agent-note {
margin: 12px;
padding: 8px 12px;
background: #fffbe6;
border: 1px solid #f0e5a8;
border-radius: 6px;
font-size: 12px;
}
/* ── Agent clarification (ask_question) card ───────────────────────── */
.agent-ask-card {
align-self: flex-start;
margin: 6px 12px 10px 12px;
padding: 10px 14px;
background: #2b3138;
color: #f3f4f7;
border: 1px solid #3b4148;
border-left: 3px solid #6aa9ff;
border-radius: 8px;
max-width: 88%;
font-size: 14px;
line-height: 1.45;
}
.agent-ask-question {
font-weight: 600;
margin-bottom: 8px;
}
.agent-ask-options {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.agent-ask-option {
appearance: none;
background: #3a4149;
color: #f3f4f7;
border: 1px solid #4a525b;
border-radius: 999px;
padding: 5px 12px;
font-size: 13px;
cursor: pointer;
transition: background .12s ease, border-color .12s ease;
}
.agent-ask-option:hover:not(:disabled) {
background: #485058;
border-color: #6aa9ff;
}
.agent-ask-option:disabled {
opacity: .55;
cursor: default;
}
.agent-ask-hint {
margin-top: 8px;
font-size: 11px;
color: #aab1b9;
}
/* ── Agent HTML (CMS / blog) workspace card — light workspace ─────── */
.agent-html-card .agent-html-body {
padding: 14px 18px 18px;
color: #2a2a2a;
font-size: 14px;
line-height: 1.55;
overflow-x: auto;
}
.agent-html-body h1,
.agent-html-body h2,
.agent-html-body h3,
.agent-html-body h4 {
color: #1a1a1a;
margin: 1.1em 0 .45em;
line-height: 1.25;
}
.agent-html-body h1 { font-size: 20px; border-bottom: 1px solid #e3e3e7; padding-bottom: 4px; }
.agent-html-body h2 { font-size: 17px; }
.agent-html-body h3 { font-size: 15px; }
.agent-html-body p,
.agent-html-body li,
.agent-html-body td,
.agent-html-body blockquote,
.agent-html-body .agent-html-block {
color: #2a2a2a;
}
.agent-html-body p { margin: .5em 0; }
.agent-html-body ul,
.agent-html-body ol { margin: .4em 0 .6em 1.2em; padding-left: 1em; }
.agent-html-body li { margin: .15em 0; }
.agent-html-body .agent-html-block {
margin: .75em 0 1em;
}
.agent-html-body .agent-html-block h3 {
margin-top: 0;
}
.agent-html-body code {
background: #f3f4f7;
border: 1px solid #e3e3e7;
border-radius: 4px;
padding: 1px 5px;
font-size: 12.5px;
color: #8b3a00;
}
.agent-html-body pre {
background: #f8f9fb;
border: 1px solid #e3e3e7;
border-radius: 6px;
padding: 10px 12px;
overflow-x: auto;
color: #2a2a2a;
}
.agent-html-body table {
border-collapse: collapse;
margin: .6em 0;
font-size: 13px;
width: 100%;
color: #2a2a2a;
}
.agent-html-body th,
.agent-html-body td {
border: 1px solid #e3e3e7;
padding: 5px 8px;
text-align: left;
vertical-align: top;
}
.agent-html-body th {
background: #f3f4f7;
color: #1a1a1a;
font-weight: 600;
}
.agent-html-body a { color: #2f5fa3; text-decoration: none; }
.agent-html-body a:hover { text-decoration: underline; }
.agent-html-body hr { border: 0; border-top: 1px solid #e3e3e7; margin: 1em 0; }
.agent-html-body blockquote {
border-left: 3px solid #2f5fa3;
margin: .5em 0;
padding: .3em 0 .3em 12px;
color: #444;
background: #f8f9fb;
}
.agent-html-body img {
max-width: 100%;
height: auto;
}
/* ── Agent download (CSV / JSON / future PDF) card ─────────────────── */
.agent-download-card .agent-download-meta {
padding: 4px 14px 0;
color: #aab1b9;
font-size: 12px;
}
.agent-download-btn {
margin: 10px 14px 12px;
padding: 8px 16px;
appearance: none;
background: #2f5fa3;
color: #f3f4f7;
border: 1px solid #3a72c5;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
transition: background .12s ease;
}
.agent-download-btn:hover { background: #3a72c5; }
.agent-download-preview {
margin: 0 14px 14px;
padding: 8px 10px;
max-height: 220px;
overflow: auto;
background: #161a23;
border: 1px solid #2b3138;
border-radius: 6px;
color: #cfd3d8;
font-size: 12px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
white-space: pre;
}