:root {
    --daywidth:3rem;
    --cal_row_height:2rem;
    --gantt_height:2rem;
    --slideinwidth:35rem;
    --holt-bosse-green: #8DC441;
    --holt-bosse-middle-green: #6d9832;
    --holt-bosse-dark-green: #4B6821;
    --holt-bosse-off-white: #EFEFEF;
    --holt-bosse-red:#f05129;
    --holt-bosse-blue:#0f74bc;
    /* color-scheme: dark; */
    font-size: 16px;
}

body,html {
    background:#fdfdfd;
}

footer {
    clear:both;
    margin-top:3rem;
    padding:3rem;
    text-align:center;
    background:var(--holt-bosse-dark-green);
    color:white;
    box-shadow: 0 50vh 0 50vh var(--holt-bosse-dark-green);
}

body.search .buttons {
    flex:1em;
}
a.search_result_button.button.is-light.is-info {
    margin-top: 1em;
}

.push_down {
    margin-top:2rem;
}

.user_image_small {
    width:3rem;
    border-radius:100%;
    height:3rem;
    object-fit:cover;
    object-position:center;
}

body.whats-shaking h4.title {
    margin-top:2rem;
    margin-bottom:0.5em;
}
body.whats-shaking h5.title {
    margin-top:0;
    font-weight:normal;
    font-family:sans-serif;
    font-size:1rem;
    color:#888;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.see-all-shakin {
    text-align:center;
    margin-top:0;
}
.table {
    background:inherit;
}
#buckets {
    margin-top:2rem;
}
#buckets.columns {
    position:relative;
    display:flex;
    gap:2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    flex-wrap:wrap;
}
#buckets.columns > * {
    width:31%;
    min-width: 10rem;
    border-radius:1rem;
    box-shadow:0 0 10px rgba(0,0,0,0.1);
    background:#fff;
    flex-shrink: 0;
    flex-grow: 1;
}
.block.padded {
    background:#fff;
}
#buckets_container {
    margin-top:3rem;
}

.animlogowrap {
    display: flex;
    align-items: center;
    max-width: 600px;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    /* position: relative; */
}
.animlogowrap .animlogo {
    z-index:2;
    position:relative;
}
:is(.leftguy,.rightguy) {
    animation-duration:2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
.leftguy {
    animation-name:leftportal;
}
.rightguy {
    animation-name:rightportal;
}
@keyframes leftportal {
    from {
        transform:translateX(0%) translateY(-20px);
    }
    to {
        transform:translateX(100%) translateY(-20px);
    }
}
@keyframes rightportal {
    from {
        transform:translateX(-100%) translateY(-20px);
    }
    to {
        transform:translateX(0%) translateY(-20px);
    }
}

#smart_results {
    display:none;
    position: absolute;
    top: 3.75rem;
    left: 0;
    min-width: 24rem;
    padding: 2rem;
    padding-top: 0;
    background: white;
    box-shadow: 0 0 15px rgb(0 0 0 / 20%);
    border-radius: 0 0 1rem 1rem;
    color: #555;
}
#smart_results h5 {
    margin-top:2rem;
    text-align:left;
}
#smart_results ul {
    margin-top:1rem;
    display:flex;
    flex-direction:column;
    gap:1rem;
}

nav a.page_id_1 {
    display:none; /* hide home link - logo is fine */
}

p.swap_bucket_title {
    /* margin-bottom: 0.5em; */
    /* font-size: 115%; */
    display: flex;
    gap: 1rem;
}
p.swap_bucket_title > * {
    flex-shrink:1;
    flex-grow:0;
}

.swap_listen {
    position:sticky;
    top:5rem;
}

span.highlight {
    background:yellow;
    font-weight:bold;
    padding:0.5rem;
}


table.centered {
    margin-left:auto;
    margin-right:auto;
}
.title.centered, :is(h1,h2,h3,h4,h5) {
    text-align:center;
}
.container h3 {
    margin-top:1em;
    margin-bottom:1em;
}
:is(h1,h2,h3,h4,h5) {
    font-family:"Merriweather",serif;
}
p a, ul li a, table td a, .breadcrumb a, .tabs li.is-active a {
    color:var(--holt-bosse-middle-green);
    text-decoration:underline;
}
.title.is-1 {
    margin-top: 1em;
    margin-bottom:1em;
}
p a.button {
    text-decoration:none;
}

.readable {
    max-width:50em;
    margin-left:auto;
    margin-right:auto;
}

.breadcrumb {
    margin-top:2rem;
}
.tags a {
    text-decoration:none;
}

img.rounded {
    border-radius:100%;
    aspect-ratio:1/1;
    width: 10rem;
    height: 10rem;
    object-fit: cover;
}

div#messages {
    margin-top: 2rem;
}

span.new_tick {
    color: #f57;
    color:var(--holt-bosse-red);
    font-weight: bold;
    letter-spacing: -1px;
    font-size: 70%;
    margin-left: auto;
}

#homelogo {
    text-align:center;
    padding:2rem;
}
#homelogo img {
    max-width:50%;
}
ul.fun_date_list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.fun_date_list li {
    display: flex;
    gap:1rem;
    justify-content: space-between;
}
.fun_date_list .name_and_date {
    display: flex;
    flex-direction: column;
}
span.fundate_username {
    font-weight: bold;
}
span.fundate_date {
    font-style: italic;
    opacity: 0.8;
    text-align: right;
}

#sidebar .block:not(:last-child) {
    border-bottom: 2px solid #efefef;
}

nav#menu_main-menu {
    display:flex;
    align-items:center;
    padding-left:2rem;
    padding-right:2rem;
}
nav#menu_main-menu > ul {
    display:flex;
    align-items:center;
    gap:2rem;
}
nav#menu_main-menu > ul li a {
    color:white;
    text-decoration:none;
}
.navbar-item, .navbar-link{
    color:white;
}

div#controls_wrap {
    position: absolute;
    /* top: 0; */
}

div.fullwidth {
    margin-left:2rem;
    margin-right:2rem;
}

h5.title.is-5 {
    margin-top:1em;
}
.task_wrap {
    display:flex;
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #eee;
    border-top: 2px solid #eee;
    padding: 1rem;
}
.gantt_left {
    width:15rem;
    padding-right:2rem;
    margin-right:2rem;
    border-right:2px solid #eee;
}
.task_info_wrap {
    display:flex;
    gap:2rem;
    position:relative;
}
.phase_info_wrap {
    padding:1rem;
}

.phases_wrap {
    display:flex;
    width: 100%;
    overflow: hidden;
}
.phases_left .phase_wrap {
    gap:2rem;
}

li.cat_1::after {
    content:'🤫';
    opacity:0.5;
}

.phases_left {
    transform:translateY(var(--cal_row_height));
}

.phase_wrap h5.phase_title {
    min-width:8rem;
    margin-top:2rem !important;
    margin-bottom:1rem !important;
    font-size:1.5rem;
    font-weight:bold;
    display:flex;
    align-items:center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phases_right .phase_wrap h5.phase_title {
    position:relative;
}
.phase_marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 2rem !important;
    /* background: rgba(222,255,222,0.4); */
    pointer-events: none;
    /* transform: scale(1.1); */
    /* border: 2px dotted rgba(0,0,0,0.1); */
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 0.8rem;
    text-transform: uppercase;
    padding-left: 1rem;
    /* color: rgba(0,0,0,0.2); */
    /* box-shadow: 0 0 0.3rem rgb(0 0 0 / 10%); */
    z-index: 2;
    border-bottom: 5px solid rgba(0,0,0,0.2);
    background: white;
}
.phase_extra {
    font-weight:normal;
    text-transform:capitalize;
    margin-left:0.5em;
}
.phase_extra_wrap {
    /* position: absolute; */
    /* min-width: 18em; */
    /* right: 0; */
    /* transform: translateX(10em); */
    margin-left:1em;
}

.phase_task_wrap {
    height:3rem;
    overflow:auto;
    display: flex;
    align-items: center;
    line-height: 1;
}
.phase_task_gantt_wrap {
    height:3rem; /* same as phase_task_wrap */
    display: flex;
    align-items: center;
    /* overflow:hidden; */
}
.phases_right {
    flex-grow: 1;
    overflow-x:auto;
    overflow-y: hidden;
    position: relative;
}
h1 {
    margin-top:1rem;
}
.ss-multi-selected {
    min-width: 30rem;
    max-width: 90%;
}
#edit_task hr {
    display:none;
}

.gantt_bar {
    height:var(--gantt_height);
    border:2px solid rgba(0,0,0,0.3);
    background-color:rgb(171, 154, 230);
    position:relative;
    box-shadow: -3px 3px 3px rgb(0 0 0 / 20%);
    transition:all 0.2s ease;
    z-index:1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dependency_line {
    transition:all 0.2s ease;
    pointer-events:none;
}
.gantt_bar:hover {
    transform:scale(1.1);
    border:2px solid rgba(0,0,0,0.9);
    box-shadow:-6px 6px 10px rgba(0,0,0,0.1);
    cursor:pointer;
}
.gantt_bar_completion {
    position:absolute;
    height:var(--gantt_height);
    background: rgba(0,0,0,0.15);
    pointer-events: none;
    left:0; /* required or still treated like flex item, even though it's positioned absolutely */
}
.gantt_bar.f2s_violation {
    /* background: orange; */
    background:inherit;
}
.gantt_violation_moved {
    transition:all 0.2s ease;
    position:absolute;
    min-height:2rem;
    transform: translateY(1rem);
    pointer-events: none;
    opacity:0.2;
}



.task_date {
    display:block;
    position:absolute;
    top:-2em;
    font-size:0.8rem;
    font-weight:bold;
    min-width: 4em;
}
.task_date_left {
    left:0;
    left: -2.5em;
    /* display:none; */
    text-align:left;
}
.task_date_right {
    right:0;
    right: -2.5em;
    text-align: right;
}
.phase_task_gantt_wrap {
    height: 6rem;
}
.phase_task_wrap {
    height: 6rem;
}
.phase_task_gantt_wrap {
    height: 6rem;
}
.phase_task_wrap {
    height: 6rem;
}

.gantt_bar.behind_schedule {
    background-color:rgba(216, 172, 29, 0.603);
}
.gantt_bar.behind_schedule::before {
    content:'🕑';
    position:absolute;
    left:-1rem;
    top:-1rem;
    width:1.5rem;
    height:1.5rem;
    font-size:1rem;
    display:flex;
    justify-content: center;
    align-items: center;
    background:rgb(224, 166, 31);
    color:white;
    border-radius:3rem;
}
.gantt_bar.missed_deadline{
    background-color:rgba(216, 29, 29, 0.603);
}
.gantt_bar.missed_deadline::before {
    content:'!';
    position:absolute;
    left:-1rem;
    top:-1rem;
    width:1.5rem;
    height:1.5rem;
    font-size:1rem;
    display:flex;
    justify-content: center;
    align-items: center;
    background:red;
    color:white;
    border-radius:3rem;
}
.gantt_bar.completed {
    background-color:rgba(65, 195, 71, 0.603);
}
.gantt_bar.completed::before {
    content:'✓';
    position:absolute;
    left:-1rem;
    top:-1rem;
    width:1.5rem;
    height:1.5rem;
    font-size:1rem;
    display:flex;
    justify-content: center;
    align-items: center;
    background:rgb(57, 189, 57);
    color:white;
    border-radius:3rem;
}

.gantt_user_images {
    position:absolute;
    top:-4rem;
    left:0;
    width:100%;
    display: flex;
    justify-content: center;
    pointer-events: none;
}
.gantt_user_images img {
    display:block;
    object-fit:contain;
    object-position: center 4rem;
    width:4rem;
    height:4rem;
    transition:all 0.3s ease;
    opacity:0;
    pointer-events: none;
}
.gantt_bar:hover .gantt_user_images img {
    object-position: center bottom;
    opacity:1;
}

span.regular {
    font-size: 1rem;
    text-decoration: underline;
    font-family: sans-serif;
    font-weight: normal;
}
.news_flex {
    gap:2rem;
    display:flex;
}
.news_flex .news_left {
    width: 4rem;
    flex-shrink: 0;
}
.author_and_date {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.news_start {
    font-size: 0.6rem;
    font-weight: bold;
}
#latest_news_home h4, #latest_swaps h4, #latest_inouts h4, #fundates h4 {
    margin-bottom:0.1rem;
}
#latest_news_home h5 {
    margin-top:2rem;
    margin-bottom: 0;
    text-align:left;
}
#latest_news_home .is-light {
    margin-bottom:1rem;
}
#fundates > p:first-of-type {
    font-size:75%;
    opacity:0.5;
    margin-bottom:1em;
}

.image_and_status {
    /* margin-left:1rem;
    margin-bottom:1rem; */
    position:relative;
    width:5rem;
    height:5rem;
}

.status_icon {
    position: absolute;
    width: 44%;
    height: 44%;
    bottom: -10%;
    right: -10%;
    border-radius: 50%;
    background: #5f5;
    background: #8dc63f;
    border: 4px solid #666;
    border:4px solid white;
}
.status_icon {
    background:#eee;
}
.statuss_icon.state_, .status_icon.state_0, .user_card_full[data-state="0"] .status_icon  {
    background: #c77;
}
.user_card_full[data-state="0"][data-available="1"] .status_icon  {
    /* out but available */
    background: linear-gradient(to right, #8dc63f 0%, #8dc63f 50%, #c77 51%);
}
.user_card_full[data-state="1"][data-available="0"] .status_icon {
    /* in but not available */
    background: #eeaa55;
}
.user_card_full[data-state="1"][data-available="1"] .status_icon {
    /* in and available */
    background: #8dc63f;
}
.user_card_list, .diner_card_list {
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
    justify-content: center;
}
.user_card_full {
    min-width:21rem;
}
.user_card_list a, .diner_card_list a {
    text-decoration:none;
    box-shadow:0 0 1.5rem rgba(0,0,0,0.4);
    transition:all 0.3s ease;
    display:flex;
    justify-content: space-between;
    gap:1rem;
}

.mini_user_card_list {
    display:flex;
    flex-direction: column;
    gap:1rem;
    margin-top:1rem;
}
.inoutwidget_timestamp {
    margin-bottom:0.5em;
    font-size:75%;
    opacity:0.5;
}
.mini_user_card_list p.note {
    margin-top: 0;
    padding-top: 0;
    font-size: 85%;
}

/* diner timer */

.base-timer {
    position: relative;
    width: 300px;
    height: 300px;
  }
  
  .base-timer__svg {
    transform: scaleX(-1);
  }
  
  .base-timer__circle {
    fill: none;
    stroke: none;
  }
  
  .base-timer__path-elapsed {
    stroke-width: 7px;
    stroke: grey;
  }
  
  .base-timer__path-remaining {
    stroke-width: 7px;
    stroke-linecap: round;
    transform: rotate(90deg);
    transform-origin: center;
    transition: 1s linear all;
    fill-rule: nonzero;
    stroke: currentColor;
  }
  
  .base-timer__path-remaining.green {
    color: rgb(65, 184, 131);
  }
  
  .base-timer__path-remaining.orange {
    color: orange;
  }
  
  .base-timer__path-remaining.red {
    color: red;
  }
  
  .base-timer__label {
    position: absolute;
    width: 300px;
    height: 300px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
  }

/* end diner timer */

.static_rating.unrated {
    color: #aaa;
    font-style: italic;
    text-align: center;
}

.diner_card_list a {
    display:block; /* not flex as user card above */
}
.whoseating {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
}
.unrated_diner {
    margin-top:1em;
    font-size:80%;
    color:red;
    opacity:0.5;
}
.dd_filter_tags .tag:hover {
    cursor:pointer;
    opacity:0.8;
}
.small_user_multiselect {
    column-count: 2;
    padding: 2rem; 
}
.column.diner_users {
    width: 30rem;
    flex-basis: revert;
    flex-shrink: 0;
    flex-grow: 0;
}
#whoiseatingform h5 {
    margin:0;
}
.diner_card_list > li {
    transition:all 0.5s ease;
    max-width:20rem;
}
.diner_card_list:not(.walk_yes) > li:not(.walk_yes), .diner_card_list:not(.group_yes) > li:not(.group_yes), .diner_card_list:not(.veggie_yes) > li:not(.veggie_yes), .diner_card_list:not(.alcohol_yes) > li:not(.alcohol_yes) {
    opacity:0.1; 
    transform:scale(0.8) rotate(-5deg);
    max-width:0rem;overflow:hidden;
    margin:0;
    max-height:0;
}
.diner_card_list {
    margin:2rem;
    gap:0; /* important, fixed spacing when filtered */
    
}
.diner_card_list > li {
    margin:0.5rem;
    max-height:40rem;
}


.small_user_multiselect label.checkbox {
    display: flex;
    gap: 1rem;
    align-items: center;
}
li.user_select {
    padding: 0.5rem;
    break-inside: avoid;
}

.diner_rating_wrap {
    display:flex;
    gap:1rem;
    opacity:0.8;
}
.diner_rating_wrap span {
    width:3rem;
    opacity:0.8;
}
.diner_rating_wrap span.dynamic {
    width:auto;
}
.diner_tags {
    /* display: flex;
    flex-wrap: wrap;
    max-width: 11rem; */
    column-count: 2;
}
p.not_rated_heading {
    font-size: 80%;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.not_rated_userlist {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.not_rated_userlist img {
    width:1.5rem;
    height:1.5rem;
}

.card_username {
    font-weight:bold;
    font-size: 1.2rem;
}
span.card_label {
    opacity: 0.6;
    width: 5rem;
    display: inline-block;
}
.user_card_image {
    border-radius:1.5rem;
    width:5rem;
    height:5rem;
    object-fit: cover;
}
p.card_ext {
    margin-bottom: 1rem;
    font-style: italic;
    font-size: 0.8rem;
}
p.note.status_text {
    margin-top:1rem;
    max-width: 11rem;
}
.image_and_status_wrap {
    display: flex;
    flex-direction: column;
    align-items: end;
}

aside.user_page_info_container {
    max-width: 12rem;
    margin-left: auto;
    margin-right: auto;
}
aside.user_page_info_container p.card_ext {
    text-align: center;
}
p.best_song_attrib {
    font-size: 70%;
    opacity: 0.8;
}

aside.swaps {
    text-align: center;
    min-width: 25%;
}
.user_page_swaps {
    margin-top:2rem;
    gap:3rem;
    display:flex;
    justify-content: center;
}
aside.swaps .static_rating {
    opacity:0.5;
}

ul.swap_mini_list {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.swap_mini_list .rating_reminder {
    font-size:75%;
    opacity:0.5;
    color:red;
}

p.is-light {
    opacity:0.5;
    font-size:80%;
}

.padded {
    padding:2rem;
}
p.note {
    padding-top:0.5em;
    padding-left:1em;
    opacity:0.7;
}
aside#sidebar {
    box-shadow: 0 0 10px rgb(0 0 0 / 10%);
    border-radius:0 0 0 1rem;
    top:5rem;
    position:sticky;
}
.is-one-quarter {
    max-width:400px;
}
ul#useful_links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 2rem;
}
ul#useful_links li a {
    display:flex;
    text-decoration:none;
    align-items:center;
    gap:1rem;
}
ul#useful_links li a img {
    width:2rem;
    height:2rem;
    object-fit:contain;
    object-position:center;
}

#register {
    max-width:50rem;
    margin-left:auto;
    margin-right:auto;
}

.table.is-centered {
    margin-left:auto;
    margin-right:auto;
}

body.public nav {
    display:none;
}

nav.navbar {
    background:linear-gradient(var(--holt-bosse-green), var(--holt-bosse-dark-green))
}
.navbar-menu  ul {
    display:flex;
}

input[type=range] {
    -webkit-appearance: auto !important;
    /* fix bulma range in forms - for EH */
}

img.in_basecamp_icon {
    max-width: 1.5rem;
    position: absolute;
    bottom: -1rem;
    left: -1rem;
    opacity:0.5;
}
.gantt_marker {
    width:1rem;
    height:var(--gantt_height);
    /* background:#d84; */
    position:absolute;
    z-index:2;
    color:#aaa;
    font-size: 0.7rem;
    padding-left: 0.5em;
    line-height:1;
    text-transform:uppercase;
    border-left:4px solid rgba(221, 137, 68, 0.692);
}



#vault_trigger {
    position:fixed;
    bottom:2rem;
    right:2rem;
    z-index:99;
}
#vault_trigger:hover img {
    opacity:0.8;
}
#vault_trigger img {
    max-width:3rem;
}

#vault_slidein ul li {
    padding-top:2rem;
    /* font-size:125%; */
}

body.clients .column.is-one-quarter {
    width: 33%;
    max-width: 40rem;
}

.client_title_sr {
   /*  font-weight:bold; */
    text-transform: uppercase;
    
    color:#888;
    font-size:70%;
    position:absolute;
    transform:translateY(-2em);
    right:-1em;
    /* background: #eee; */
    padding: 0.25em 0.5em;
    border-radius: 0.5em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slidein {
    position:fixed;
    width:var(--slideinwidth);
    height:100vh;
    overflow-y: auto;
    overflow-x:hidden;
    top:0;
    right:calc(-1 * var(--slideinwidth));
    background: white;
    padding: 2rem;
    z-index: 99;
    box-shadow: 0 0 10px rgb(0 0 0 / 50%);
    transition:all 0.3s ease;
    opacity:0;
}
.slidein.active {
    right:0rem;
    opacity:1;
}
input#taskcompletion {
    width: 22rem;
}

div.flex {
    display:flex;
}
.clientview {
    gap:4rem;
}

span:is(.hbgreen,.hbgray) {
    font-weight:bold;
}
span.hbgreen {
    color:#8dc63f;
}
span.hbgray {
    color:#6d6e71;
}

:is(td,th).divider_right {
    border-right:2px solid #dbdbdb !important;
}

span.gantt_title {
    font-size: 0.7rem;
    color: white;
    text-shadow: 0 0 6px black;
    z-index: 1;
    line-height: 1;
    text-transform: uppercase;
    /* font-family: monospace; */
    white-space: nowrap;
    overflow: hidden;
    margin: 0.5em;
    padding: 0.5em;
    pointer-events:none;
}

#client_gantt_and_sitemap {
    gap:7rem;
    justify-content: center;
}

.pref_start_date {
    position: absolute;
    /* opacity: 0.1; */
    height: var(--gantt_height);
    background-color: rgba(0,0,0,0.1);
    overflow:hidden;
    display: flex;
    align-items: center;
    border: 2px solid rgba(0,0,0,0.05);
}

.gantt_bar, .pref_start_date {
    transition:all 0.2s ease;
}

#cal_row {
    display:flex;
    align-items: center;
    height:var(--cal_row_height);
    /* transform:translateX(calc(2*var(--daywidth))); */
    position: sticky;
    background: white;
    z-index: 2;
    top: 0;
}
/* adjust calendar styles if scale is small */
body.small .cal_row_day:nth-child(even)  { 
    display:none;
}
body.small .cal_row_day:nth-child(odd)  { 
    width:calc(var(--daywidth)*2);
}
/* end small cal scaling */

.cal_row_day {
    width:var(--daywidth);
    flex-shrink:0;
    flex-grow:0;
    font-size:0.5rem;
    opacity:0.7;
    font-weight:bold;
    transition:all 0.2s ease;
}
.cal_row_day:is(.Sat,.Sun) {
    opacity:0.3;
    font-style:italic;
    font-weight:normal;
}
.cal_row_day .date {
    opacity:0.5;
}
.today_marker {
    width: 100%;
    height: 2rem;
    /* border: 1px solid red; */
    position: absolute;
    width: var(--daywidth);
    width: 0.3rem;
    height: 3000rem;
    background: red;
    opacity: 0.1;
}

.fixed-control-bar {
	position:fixed;
	overflow:hidden;
	width:100vw;
	padding:1rem;
	border-bottom:1px solid #aaa;
	box-shadow:0 0 10px rgba(0,0,0,0.5);
	top:0;
	left:0;
	background:white;
	z-index:40;
}

/* form:is(#edit_task, #edit_phase) {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
} */
#task_small_fields {
    display:flex;
    gap:2rem;
    justify-content: space-between;
}

.button.is-addon {
    position:absolute;
    transform:translateX(2rem);
}

form .field.hidden {
    display:none;
}

.dependency_line {
    min-width:3px; /* ensure vertical lines are drawn */
}
.dependency_line .f2s_path {
    animation: dash 1s linear;
    animation-iteration-count:infinite;
}
.dependency_line.reversed.f2s .f2s_path{
    animation: dashreverse 2s linear;
    animation-iteration-count:infinite;
}
.dependency_line.reversed {
    transform:scale(-1,1); /* mirror horizontally */
}

@keyframes dash {
    to {
        stroke-dashoffset: -12;
    }
}
@keyframes dashreverse {
    to {
        stroke-dashoffset: 12;
    }
}

a[disabled] {
    pointer-events:none;
}
span.copyable_pw {
    background: #555;
    color: white;
    padding: 0.25em 0.5em;
    border-radius: 0.5em;
    font-size: 80%;
    margin-left: 1em;
    margin-right: 1em;
}
span.copyable_pw:hover {
    cursor:pointer;
    background:#000;
}

main {
    padding: 1rem;
}

#client_basecamp_projects .columns {
    justify-content: center;
}
#client_basecamp_projects .column {
    max-width:25vw;
}
#client_basecamp_projects p {
    padding:0.2em;
}
#client_basecamp_projects .column a {
    max-width:25vw;
}

.search_result_button {
    min-width:7rem;
}

.client_star::after {
    content:"☆";
}
.client_star.starred::after {
    content:"★";
}

@media screen and (max-width:1024px) {
    main {
        padding:20px;
    }
}

@media print {
    nav {display:none;}
    h1 a, h1 :is(.button) {display:none;}
    html {margin-top:0; padding-top:0 !important;}
    #scale {display:none;}
    footer {display:none;}
    .noprint {display:none;}
    /* :root {
        --daywidth:2rem;
    } */
}

/* bulma overrides */


.title:not(.is-spaced)+.subtitle {
    margin-top: -1.5rem;
}

.notification {
    margin-bottom:2rem;
}

.notification.is-success {
    background-color: #8bc240;
    color: #fff;
}
.notification.is-danger {
    background-color: var(--holt-bosse-red);
    color: #fff;
}

.button.is-info {
    background-color: var(--holt-bosse-blue);
}
.navbar-item img {
    max-height:2.75rem;
}
.navbar-link.is-active, .navbar-link:focus, .navbar-link:focus-within, .navbar-link:hover, a.navbar-item.is-active, a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover {
    background-color: rgba(255,255,255,0.2);
    background-color: rgba(255,255,255,0.0);
    color: inherit;
}
.navbar-item.has-dropdown.is-active .navbar-link, .navbar-item.has-dropdown:focus .navbar-link, .navbar-item.has-dropdown:hover .navbar-link {
    background-color: rgba(255,255,255,0.2);
    background-color: rgba(255,255,255,0.0);
}
.navbar-link:not(.is-arrowless)::after {
    border-color: var(--holt-bosse-green);
}
.navbar-dropdown {
    background-color: var(--holt-bosse-dark-green);
    border-top:none;
}
.navbar-dropdown a.navbar-item:focus, .navbar-dropdown a.navbar-item:hover {
    background-color: rgba(255,255,255,0.2);
    background-color: rgba(255,255,255,0.0);
    color: inherit;
}
.button.is-primary {
    background-color: var(--holt-bosse-green);
}
.button.is-primary:hover, .button.is-primary.is-hovered {
    background-color: var(--holt-bosse-dark-green);
}
.button.is-primary.is-light {
    background-color: rgba(222,250,222,0.9);
}
.button.is-primary.is-light:hover {
    background-color: rgba(222,250,222,1);
}

.notification_bell {
    display: flex;
    align-items: center;
}
.notification_bell i, .notification_bell i:hover {
    color: white;
}
.notification_bell p {
    transform: translate(0.1rem, -0.5rem);
    color: white;
}
#harvest_button {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 99;
}
#harvest_button div {
    padding: 1rem;
    background-color: #aaa;
    clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
    -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
    -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

ul.kudoss {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.kudos_from {
    text-align:right;
    opacity:0.7;
    font-size:75%;
    font-style:italic;
}
#kudos_modal {
    width:100vw !important;
    border-radius:0 !important;
    height:100vh;
    height:100dvh;
}
.modal footer {
    margin-top:0;
}
p.center {
    text-align:center;
}
.kudosfor {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}
.kudos_date {
    font-weight: 200 !important;
    opacity: 0.7;
    font-size: 75%;
}
div#kudos_block {
    display: flex;
    flex-direction: column;
    /* gap: 1rem; */
}
#kudos_add_wrap {
    margin-top:auto;
}

/* dark mode */

@media (prefers-color-scheme: dark) {
    ::-webkit-scrollbar { width: 0.5rem;}
    ::-webkit-scrollbar-button { background-color: #555; height: 0.5rem; }
    ::-webkit-scrollbar-track {  background-color: #555;}
    ::-webkit-scrollbar-track-piece { background-color: #333;}
    ::-webkit-scrollbar-thumb { height: 50px; background-color: #555; border-radius: 3px;}
    ::-webkit-scrollbar-corner { background-color: #555;}
    ::-webkit-resizer { background-color: #666;}

    /* other stuff */
    body,html{background:#222; color:#aaa;}
    pre{background:#444; color:white;}
    #buckets.columns > *, .block.padded, aside#sidebar {background:#111; color:#aaa; box-shadow:0 0 15px rgba(0,0,0,0.5)}
    .title {color:#aaa;}
    .button.is-primary {background-color:var(--holt-bosse-dark-green); color:#000;}
    .button.is-primary:hover {background-color:var(--holt-bosse-middle-green); color:#000;}
    footer {background:#111; color:#aaa; box-shadow: 0 50vh 0 50vh #111;}
    .box {background:#111; color:#aaa}
    .status_icon { border: 4px solid #111; }
    hr { background-color: #151515;}
    .input,.textarea {background-color:#222; color:#aaa;}
    input::placeholder { color:#777 !important; }
    .table {background: #111;}
    .table thead td, .table thead th {
        border-width: 0 0 2px;
        color: #aaa;
    }
    .table td {color:#aaa;}
    .table td, .table th {
        border: 1px solid #222;
    }
    .tabs.is-boxed li.is-active a {
        background-color: #333;
        border-color: #000;
        border-bottom-color: transparent!important;
    }
    .tabs li a {color:#aaa;}
    .tabs li a:hover {
        background-color:#111 !important;
        border-color: #000 !important;
        color:#aaa !important;
    }
    .tabs ul {border-bottom-color: #111;}
    p strong {color:white;}

    /* various tweaks -AE */
    #vault_slidein {
        background: #222;
        box-shadow: 0px 0px 1px 1px #111;
    }
    .client_star {
        background-color: #222;
        border: 1px solid #222;
    }
    .client_star::after {
        color: white;
    }
    .search .buttons .button.is-info.is-light {
        background-color: #111;
        color: #aaa;
    }
    .swap .tags a {
        background-color: #222;
        color: #aaa;
    }
    .swap caption {
        color: #aaa;
    }
    .swap .pagination a {
        background-color: #111;
        color: #aaa;
    }
    .diner-decider .tags span {
        background: #111;
        color: #aaa;
    }
    .diner-decider a.is-pulled-right {
        background: #111;
        color: #aaa;
    }
    .swap .fixed-control-bar {
        background-color: #111;
    }
    .swap form label {
        color: #aaa;
    }
    .swap a.is-pulled-left {
        background: #111;
        color: #aaa;
    }
    .swap span.tag {
        background-color: #111;
        color: #aaa;
    }
    .modal-card * {
        background-color: #222;
        color: #aaa;
    }
    #harvest_button div {
        background-color: #333;
    }
}