/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
    box-sizing: border-box;
}
/* 2. Remove default margin */
* {
    margin: 0;
}
body {
    /* 3. Add accessible line-height */
    line-height: 1.5;
    /* 4. Improve text rendering */
    -webkit-font-smoothing: antialiased;
}
/* 5. Improve media defaults */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}
/* 6. Inherit fonts for form controls */
input, button, textarea, select {
    font: inherit;
}
/* 7. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}
/* 8. Improve line wrapping */
p {
    text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    margin-bottom:1em;
    text-align:center;
}
/*
9. Create a root stacking context
*/
#root, #__next {
    isolation: isolate;
}

/* simple overrides */

:root {
    --border : rgba(0,0,0,0.1);
    --standard-border-radius: 0.5rem;
    --primary: 
}
body {
    /* grid-template-columns: 1fr min(80rem, 90%) 1fr; */
    display:block; /* negates grid above for now 
    /* grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100dvh; */
}
input {
    width:100%;
}
aside {
    float:none;
    width:auto;
    margin-inline-start:0px;
    padding:var(--gap);
    font-size:inherit;
}
section {
    margin:0px;
    border-bottom:none;
    padding:0px;
}
section:first-of-type {
    margin-bottom:0px;
}
button, .button {
    margin-bottom:0px;
}
img, video {
    border-radius:0%;
}
body > footer {
    border:none;
    border-top:none;
    padding-bottom: 10rem; /* help visually */
}
h1:first-of-type {
    margin-top:1em;
}
.flex {
    display:flex;
    gap:var(--biggap);
    max-width:80rem;
    padding-left:var(--gap);
    padding-right:var(--gap);
    margin-left:auto;
    margin-right:auto;
}
.flex img {
    max-width:100%;
    height:auto;
    min-width: 0; /* wtf */
}
#traffic_chart {
    max-height:500px;
}
/* end simple overrides */

:root {
    --gap: 1rem;
    --biggap: 2rem;
    --cta: #008285;
    --bghover: #80c1c2;
    --bgdark: #006062;
    --bglight: #EAF5F5;
    --accent: #25A8E0;
    --accentdark: #197CA3;
    --gray1: #222222;
    --gray2: #777777;
    --gray3: #C4C4C4;
    --gray4: #E2E2E2;
    --gray5: #FFFFFF;
    --gray6: #f0f0f0;
    --paleblue: #d6f1f1;
    --paleaqua: #b5dddd;
    --mt:#ED9750;
    --danger: #D73E3E;
    --warning: #E8B931;
    --success: #14AE5C;
    /* overrides */
    --accent: var(--cta); 
    --accent-hover: var(--bghover);
    --text: var(--gray1);
    --primary:var(--cta);
    --secondary:black;
    --tertiary:#E3E3E3;
    --primary-hover: #006062;
    --secondary-hover: #3A3A3A;
    --tertiary-hover: #A7A7A7;
    --success-hover: #027B42;
    --warning-hover: #B8840D;
    --danger-hover: #98110F;

    /*
    --bg: #fff;
  --accent-bg: #f5f7ff;
  --text: #212121;
  --text-light: #585858;
  --border: #898EA4;
  --accent: #0d47a1;
  --accent-hover: #1266e2;
  --accent-text: var(--bg);
  --code: #d81b60;
  --preformatted: #444;
  --marked: #ffdd33;
  --disabled: #efefef;
  */


}
a, a:visited {
    color:var(--cta);
}
#topnav > .contain {
    display:flex;
    justify-content: space-between;
    align-items:center;
}
#logo {
    max-width:8rem;
    height:auto;
    object-fit:contain;
    object-position:center;
    /* filter: invert(1); */
}
#portalnav ul {
    list-style:none;
    display:flex;
    gap:2rem;
}
#logo_and_nav {
    display:flex;
    gap:var(--gap);
    align-items:center;
}
nav :is(a, a:visited) {
    text-decoration:none;
    color:var(--text);
}
nav a:hover {
    text-decoration:underline;
}
#portalusernav {
    display:flex;
    gap:var(--biggap);
    align-items: center;
}
.contain {
    max-width:80rem;
    padding-left:var(--gap);
    padding-right:var(--gap);
    margin-left:auto;
    margin-right:auto;
    left:0px;
    right:0px;
}

label.checkbox, .field_id_eventdescription label {
    position:relative !important;
}
form :is(a.button, button) {
    /* ensure buttons and anchors align vertically the same when inline - stupid chrome */
    display: inline-flex;
    align-items: center;
}
.form_field:has(#lng,#lat), p.admin_only {
    /* hide lat lng + helper text from front-end portal view */
    display:none;
}
form label {
    margin-bottom:0.5em;
    font-weight:bold;
}
:is(h1,h2,h3,h4,h5).pullup {
    margin-bottom:0.25em;
}
:is(h1,h2,h3,h4,h5).pullup + * {
    margin-top:0px;
}

h2 {
    font-weight:normal;
    opacity:0.8;
}

.form_contain {
    display:flex;
    flex-direction:column;
    gap:var(--gap);
}
form .help {
    font-size:80%;
    font-style:italic;
    opacity:0.8;
    margin-top:0px;
}

footer {
    background: var(--gray6);
    text-align:left;
}
footer > div {
    display:flex;
    justify-content: space-between;
    align-items: center;
}
#address_and_phone {
    display:flex;
    gap:var(--biggap);
    align-items: center;
}
.center {
    text-align:center;
}
button.close {
    display:none;
}
.button.is-info, .button.is-secondary {
    background-color:var(--secondary);
}
.button.is-warning {
    background-color:var(--warning);
}
.notification {
    display:flex;
    justify-content: space-between;
    padding:var(--gap);
    background:var(--gray2);
    margin-bottom: var(--biggap);
    /* flex-direction: row-reverse; */
    * {
        color:white;
        margin:0px;
        text-align:center;
    }
}
.notification.is-success {
    background-color:var(--accent);
    background-color:var(--success);
}
.notification.is-warning {
    background-color:var(--warning);
}
.notification.is-danger {
    background-color:var(--danger);
}
aside {
    background-color:inherit;
    border-color:none;
}
#member_choose, #activity_choose {
    margin-top:var(--biggap);
    display:flex;
    gap:var(--biggap);
    flex-wrap:wrap;
    justify-content: center;
}
.profile_picker_card {
    display:block;
    width:13rem;
    text-decoration: none;
    display:flex;
    flex-direction: column;
    gap:var(--biggap);
    justify-content: center;
    text-align: center;
    border:1px solid var(--gray6);
    border-radius:var(--standard-border-radius);
    padding:var(--biggap);
}
.profile_picker_card:hover {
    background-color:var(--gray6);
}

:is(
	[data-tooltip="Add Class"], 
	[data-tooltip="Underline"], 
	[data-tooltip="Image Atrributes"], 
	[data-tooltip="Image Author"], 
	[data-tooltip="Add Anchor"],
	[data-tooltip="Toggle External Link"],
	[data-tooltip="Justify Left"],
	[data-tooltip="Float Left"],
	[data-tooltip="Float Right"],  
	[data-tooltip="Clear Float"],  
	[data-tooltip="Super Script"],  
	[data-tooltip="Code View"],  
	[data-tooltip="Small"], 
	[data-tooltip="Image"],
    [data-tooltip="Heading 1"],
    [data-tooltip="Heading 2"],
    [data-tooltip="Heading 3"],
    [data-tooltip="Heading 4"]
	) {
	/* hide */
	display:none;
}


#toolbar {
    padding:var(--gap);
    background-color:var(--gray6);
    margin-bottom:var(--biggap);
    position:sticky;
    top:0px;
    z-index:2;
}
#toolbar > .contain {
    display:flex;
    gap:var(--biggap);
}
:is(button,.btn,.button) {
    border:none !important;
    color:white !important;
}
.is-secondary {
   /*  background-color:var(--gray2) !important; */
}
.is-primary {
    background-color:var(--cta);
    color:white !important;
}
.is-secondary:hover, .is-info:hover {
    background-color:var(--secondary-hover) !important;
}
:is(button,.btn,.button).is-warning {
    /* background-color:var(--mt) !important; */
}
.is-primary:hover {
    background-color:var(--primary-hover) !important;
}
.is-warning:hover {
    background-color:var(--warning-hover) !important;
}
.repeatable .is-warning {
    color: var(--text) !important;
    background-color: var(--gray4) !important;
}

.field_id_eventtowns, .field_id_usermembers, .field_id_uservendors, .field_id_membertowns, .field_id_alias, .field_id_memberbanner, .field_id_membergallery, .field_id_tags, .field_id_category, .field_id_note, .field_id_state, .profile .field_id_start, .profile .field_id_end, .field_id_meetingdescription, .field_id_eventmember, .field_id_featuredevent {
    display:none;
}
body.events .field_id_tags {
    display:block;
}

.main {
    min-height: calc(100dvh - 30rem);
}
.edit_event_list {
    list-style:none;
    display:flex;
    gap:var(--biggap);
    flex-wrap:wrap;
}
.edit_event_list li {
    width:15rem;
}

:is(.field_id_memberlogo, .field_id_memberbanner, .field_id_memberogimage, .field_id_eventimage, .field_id_eventsocialimage, .field_id_galleryimage) :is(button, a) {
    margin-right:var(--gap);
}
.selected_image_wrap img {
    display:none;
}
.selected_image_wrap.active p {
    display: none;
}
.selected_image_wrap.active img {
    display:block;
}
:is(.field_id_memberlogo, .field_id_memberbanner, .field_id_memberogimage, .field_id_eventimage, .field_id_eventsocialimage, .field_id_galleryimage) p {
    margin:0px;
    opacity:0.5;
    font-size:75%;
}
:is(.field_id_memberlogo, .field_id_memberbanner, .field_id_memberogimage, .field_id_eventimage, .field_id_eventsocialimage, .field_id_galleryimage):has(.active) p {
    display:none;
}
body.profile .extra_programs, body.gallery .extra_programs {
    display:none;
}
form h3 {
    margin-top:2em;
    text-align:left;
    margin-bottom:0px;
}
hr {
    width:100%;
}
form hr {
    height:2px;
    margin-bottom:var(--biggap);
}
.image_field_hr {
    display:none;
}
.selected_image_wrap {
    margin-bottom:1rem;
}
.selected_image_wrap  img {
    max-height:8rem;
}
form label {
    opacity:0.7;
}
svg#cogwheel, svg#letter {
    width: 1.5rem;
    height: auto;
}
svg#letter {
    scale:1.3;
}
svg#cogwheel:hover {
    opacity:0.5;
}
p.eventswitcher {
    margin-top:-2rem;
}
.hbcms_editor_toolbar {
    margin-bottom:0.5rem;
}
p.help {
    margin-top:0.5rem;
}
.edit_event_list {
    display:flex;
    flex-wrap:wrap;
    gap:var(--biggap);
}
.portal_event_card a {
    text-decoration:none;
    display:flex;
    flex-direction:column;
    gap:var(--gap);
    padding: 1rem;
    border: 1px solid #eee;
    border-radius:var(--standard-border-radius);
}
.portal_event_card a:hover {
    background-color:var(--gray6);
}
.portal_event_card a * {
    margin:0px;
    padding:0px;
    text-align:center;
    color:var(--text);
}
.portal_event_card_image {
    display:block;
    object-fit:cover;
    aspect-ratio:16/12;
    overflow-clip-margin: unset; /* fix pixelated object fit image */
}
.portal_event_card h5 {
    line-height:0.9em;
}

body.gallery :is(h3,hr) {
    display:none;
}
body.gallery form > .form_contain > .field {
    display:none;
}
body.gallery .field_id_membergallery, body.gallery #gallery {
    display:block !important;
} 
body.gallery .field > label {
    display:none;
}
body.gallery .repeatable {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}
body.gallery .add_new_repeatable {
    display:block;
    margin-left:auto;
    margin-right:auto;
    left:0px;
    right:0px;
}
body.gallery .repeatable .pull-right {
    height: 2rem;
    text-align: center;
    display: flex;
    justify-content: center;
    background-color: transparent !important;
    /* font-weight: bold; */
    font-size: 2rem;
}
body.gallery .selected_image_wrap {
    margin-bottom:1rem;
}
.profile_image {
    display:inline-block;
    margin-left:1em;
    margin-right:1em;
    width:3rem;
    height:3rem;
    border-radius:2rem;
    object-fit:cover;
    object-position:center;
    overflow-clip-margin: unset; /* fixes pixelated scaling on object-fit cover images */
}
#portalusernav p {
    display:flex;
    align-items: center;
}
.profile_image_preview {
    max-width:10rem;
    height:auto;
}
.flex_fields {
    display:flex;
    gap:var(--biggap);
}
.messages_icon_wrapper {
    position:relative;
}
.unread_count {
    position: absolute;
    background: red;
    color: white;
    display: block;
    width: 1rem;
    height: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.5em;
    font-size: 0.5em;
    border-radius: 1rem;
    text-align: center;
    right: -0.5em;
    bottom: -0.5em;
}
.unread_count_inline {
    display:inline-block;
    background: red;
    color: white;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 1.5rem;
    font-size:1rem;
    transform:translateY(-0.2rem);
}
.messages_wrap {
    list-style:none;
    margin:0px;
    padding:0px;
    display:flex;
    gap:var(--biggap);
    flex-direction:column;
}
.message_link {
    display:flex;
    border:1px solid var(--cta);
    border-radius:1em;
    text-decoration:none;
}
.message_date {
    background:var(--cta);
    color:white;
    display:flex;
    padding:var(--gap);
    justify-content: center;
    align-items:center;
    border-radius:1rem 0 0 1rem;
}
.message_info {
    padding:var(--gap);
}
.message_info * {
    color:var(--text);
    text-decoration:none !important;
}
.message_info h4 {
    margin-bottom:var(--gap);
}
.message_info *:hover {
    text-decoration:none !important;
}
p.plain {
    margin:0px;
}
.readable {
    max-width:50em;
    margin-left:auto;
    margin-right:auto;
}

.messages_picker_wrap {
    display:flex;
    justify-content: center;
    gap: var(--biggap);
    margin-bottom: var(--biggap);
}
.messages_picker_wrap button {
    background:transparent;
    color:var(--text) !important;
    font-weight:normal;
    font-size:1.5rem;
    border-radius:0px;
    opacity:0.6;
    border-bottom:2px solid transparent !important;
    position:relative;
}
.messages_picker_wrap button.active {
    border-bottom:2px solid var(--text) !important;
    opacity:1.0;
}
.messages_picker_wrap button:hover {
    background:transparent;
    border-bottom:2px solid var(--text) !important;
}
.messages_tab_contents {
    display:none;
}
.messages_tab_contents.active {
    display:block;
}
#read_messages .message_date {
    background:var(--gray2);
}
#read_messages .message_link {
    border-color:var(--gray2);
}
p.center {
    text-align:center;
}
.repeatable {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap:var(--gap);
    align-items: center;
}
.repeatable .form_contain {
    grid-column: span 5 / span 5;
    grid-row: span 3 / span 3;
    grid-column-start: 1;
    grid-row-start: 1;
}
#portal_event_search {
    max-width:20rem;
}
body.gallery .repeatable button.pull-right  {
    background-size: contain !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    background-color:transparent !important;
    color:transparent !important;
}
body.gallery .repeatable button.pull-right:nth-of-type(1) {
    background-image:url('/src/templates/portal/images/cross-svgrepo-com.svg') !important;
}
body.gallery .repeatable button.pull-right:nth-of-type(2) {
    background-image:url('/src/templates/portal/images/arrow-up-svgrepo-com.svg') !important;
}
body.gallery .repeatable button.pull-right:nth-of-type(3) {
    background-image:url('/src/templates/portal/images/arrow-sm-down-svgrepo-com.svg') !important;
}
body.gallery .repeatable button.pull-right:hover {
    opacity:0.6;
}
#media_selector h1 {
    font-size:100%;
}
.modal-close {
    background: none;
    height: var(--biggap);
    inset-inline-end: var(--biggap);
    position: fixed;
    top: var(--biggap);
    width: var(--biggap);
    color:white;
}
.modal-close:after, .modal-close:before {
    background-color: white;
    content: "";
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transform-origin: center center;
}
.modal-close:before {
    height: 2px;
    width: 50%;
}
.modal-close:after {
    height: 50%;
    width: 2px;
}
.button[aria-disabled=true], input:disabled, textarea:disabled, select:disabled, button[disabled] {
    display:none;
}
.media_selector {
    height: 90vh;
    overflow: auto;
}
.media_selector_list {
    display: flex;
    flex-wrap: wrap;
}
.media_selector_list li {
    padding: 0.5rem;
}
.media_selector_selection {
    display: flex;
    flex-direction: column;
    position: relative;
}
.media_selector_selection img, .media_selector_selection span {
    width: 200px;
}
.media_selector_selection span {
    pointer-events: none;
    width: 100%;
    background: rgba(0, 0, 0, 0.9);
    padding: 0.5rem;
    color: white;
    font-size: 0.9rem;
    position: absolute;
    bottom: 0;
    left: 0;
}
button[id^="trigger_image_crop"] {
    display:none !important;
}

.member-portal > .contain {
    min-height: 76vh;
}

.flex p {
    max-width:calc(50% - 1rem);
    text-wrap:pretty;
}

/* force light mode for now */
@media (prefers-color-scheme: dark) {
    :root {
      color-scheme: light;
      --bg: #fff;
      --accent-bg: #f5f7ff;
      --text: #212121;
      --text-light: #585858;
      --accent: #0d47a1;
      --accent-hover: #1266e2;
      --accent-text: var(--bg);
      --code: #d81b60;
      --preformatted: #444;
      --marked: #ffdd33;
      --disabled: #efefef;
    }
  }

body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;

    & > div.main {
        flex-grow: 1;
    }
}
p.unpublished {
    font-style:italic;
}
.portal_event_card.unpublished {
    background:#fed;
}

#brand {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-shrink: 0;
    background: #8AC6C8;
    color:black;
    .contain {
        padding-top:2rem;
        padding-bottom:2rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap:2rem;
        > * {
            margin:0px;
            padding:0px;
        }
    }
    margin-top:4rem;
    
}
body > footer {
    margin-top:0px;
}
div#assets {
    margin-top:4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    .asset_wrap {
        display:flex;
        flex-direction: column;
        align-items: center;
        
    }
}
.asset_wrap {
    margin-bottom:2rem;
}
.asset_wrap img {
    max-width:20rem;
    height:auto;
    padding:1rem;
    border-radius: 0.5rem;
    border: 2px solid #E3E3E3;
}
.asset_wrap.white img {
    background:#333;
}
.asset_wrap a.button {
    background:#222;
}
.buttons {
    display:flex;
    gap:1rem;
}
.asset_wrap a.button:nth-of-type(2) {
    background:#eee;
    outline:1px solid #777;
    color:#222 !important;
}
.asset_wrap a.button:nth-of-type(2):hover {
    background:#ddd !important;
}

section.editor_root_node {
    border-bottom: 1px solid black;

    .linetype {
        [value=heading1], [value=heading2], [value=heading3], [value=heading4], [value=quote], [value=code], [value=details] {
            display: none;
        }
        
        &::picker-icon {
            display: none;
        }
    }

    .fa.fa-puzzle-piece, .fa.fa-anchor {
        display: none;
    }

    .text-style.dropdown-wrapper {
        display: none;
    }

    .justifytype {
        display: none;
    }

    .insert-options.dropdown-wrapper {
        [value=hr], [value=youtube] {
            display: none;
        }
    }
}

.modal.is-active {
    position: fixed;
    top: 0;
    display: flex;
    width: 100dvw;
    height: 100dvh;
    justify-content: center;
    align-items: center;
    z-index: 99999999999999;

    .modal-background {
        position: fixed;
        height: 100dvh;
        width: 100dvw;
        background-color: black;
        opacity: 0.5;
    }

    .modal-content {
        z-index: 10;
        background-color: white;
        padding: 1rem;
        border-radius: 0.5rem;
        min-width: 25rem;
    }
}

.image-bubble-bar {
    display: none !important;
}