:root{
    --primary_light: rgb(121, 40, 202);
    --primary_dark: rgb(255, 0, 128);
    --dark_light: rgb(58, 65, 111);
    --dark_dark: rgb(20, 23, 39);
    --info_light: rgb(33, 212, 253);
    --info_dark: rgb(33, 82, 255);
    --warning_light: rgb(251, 207, 51);
    --warning_dark: #f53939;
    --success_light: rgb(50, 229, 127);
    --success_dark: rgb(2, 176, 116);
    --error_light: rgb(255, 106, 133);
    --error_dark: rgb(204, 0, 81);
    --neutral_light: rgb(209, 213, 219);
    --neutral_dark: rgb(75, 85, 99);
    --secondary_light: rgb(255, 164, 27);
    --secondary_dark: rgb(255, 103, 0);
    --pastel_light: rgb(255, 154, 158);
    --pastel_dark: rgb(250, 208, 196);
    --sunset_light: rgb(251, 194, 235);
    --sunset_dark: rgb(161, 140, 209);
    --ocean_light: rgb(86, 204, 242);
    --ocean_dark: rgb(47, 128, 237);
    --mint_light: rgb(206, 237, 207);
    --mint_dark: rgb(151, 215, 198);
    --amber_light: rgb(255, 213, 107);
    --amber_dark: rgb(255, 146, 43);
    --cloudflare_light: rgb(250, 173, 63);
    --cloudflare_dark: rgb(244, 129, 32);
        
    --grad_primary: linear-gradient(310deg, var(--primary_dark), var(--primary_light));
    --grad_secondary: linear-gradient(310deg, var(--secondary_dark), var(--secondary_light));
    --grad_dark: linear-gradient(310deg, var(--dark_dark), var(--dark_light));
    --grad_info: linear-gradient(310deg, var(--info_dark), var(--info_light));
    --grad_warning: linear-gradient(310deg, var(--warning_light), var(--warning_dark));
    --grad_success: linear-gradient(310deg, var(--success_dark), var(--success_light));
    --grad_error: linear-gradient(310deg, var(--error_dark), var(--error_light));
    --grad_neutral: linear-gradient(310deg, var(--neutral_dark), var(--neutral_light));
    --grad_pastel: linear-gradient(310deg, var(--pastel_dark), var(--pastel_light));
    --grad_sunset: linear-gradient(310deg, var(--sunset_dark), var(--sunset_light));
    --grad_ocean: linear-gradient(310deg, var(--ocean_dark), var(--ocean_light));
    --grad_mint: linear-gradient(310deg, var(--mint_dark), var(--mint_light));
    --grad_amber: linear-gradient(310deg, var(--amber_dark), var(--amber_light));
    --grad_cloudflare: linear-gradient(310deg, var(--cloudflare_dark), var(--cloudflare_light));

    --app_bg: #f8f9fa;
    --primary_text: #344767;
    --secondary_text: #e1e5eb;
    --form_color: #495057;
    --form_border: #d2d6da;
    --form_placeholder: #CCCCCC;
    --form_upload: #888888;
    --button_color: #67748e;

    --white: #FFFFFF;
    --black: #000000;
    --delete: #880000;
    --delete_hover: #550000;

    --loading_bg: #F6F6F6;
    --loading_bgalt: #F0F0F0;

    --table_headbg: #E0E0E0;
    --table_evenbg: #EFEFEF;
    --table_oddbg: #FFFFFF;

    --link_color: #15305b;
    --link_hover: #334f7a;
    --navlink_bg: #efefef;

    --grad_primary: linear-gradient(310deg, var(--primary_dark), var(--primary_light));
    --grad_dark: linear-gradient(310deg, var(--dark_dark), var(--dark_light));
    --grad_info: linear-gradient(310deg, var(--info_dark), var(--info_light));
    --grad_warning: linear-gradient(310deg, var(--warning_light), var(--warning_dark));

    --postit_grey: #AFBCCF;
    --postit_lightgrey: #E6E6E6;
    --postit_red: #ECA2C4;
    --postit_orange: #FFC470;
    --postit_pink: #FFCEE0;
    --postit_lightgreen: #DAF7A1;
    --postit_green: #C9DF56;
    --postit_darkgreen: #B6D7A8;
    --postit_violet: #D9B8FF;
    --postit_yellow: #FFF9B1;
    --postit_darkyellow: #FFC000;
    --postit_lightblue: #80CAFF;
    --postit_blue: #B1D3F6;
}

/* inter-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/google/inter-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/google/inter-v18-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/google/inter-v18-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: italic;
    font-weight: 700;
    src: url('../fonts/google/inter-v18-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ubuntu-sans-mono-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Ubuntu Sans Mono';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/google/ubuntu-sans-mono-v1-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

/* Main Styles */
*{ box-sizing: border-box; }
html, body{ height: 100%; margin: 0; padding: 0; position: relative; font-family: 'Inter', Arial, Helvetica, sans-serif; }
body{ background-color: var(--app_bg); color: var(--primary_text); }
img{ vertical-align: bottom; }
figure{ padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6, p, li, label{ margin: 0; padding: 0 0 10px; line-height: 1.6; }
p, li, blockquote, label{ font-family: 'Inter', Arial, Helvetica, sans-serif; font-weight: 400; font-size: 1rem; }
h1, h2, h3, h4, h5, h6{ font-family: 'Inter', Arial, Helvetica, sans-serif; font-weight: 700; }
h1{ font-size: 3.5rem; }
h2{ font-size: 2.75rem; }
h3{ font-size: 2.45rem; }
h4{ font-size: 2.1rem; }
h5{ font-size: 1.75rem; }
h6{ font-size: 1.5rem; }
a{ color: var(--link_color); }
a:hover{ color: var(--link_hover); }
a.delete{ color: var(--delete); }
a.delete:hover{ color: var(--delete_hover); }


#admin .page-title .title{ font-size: 2rem; }
#admin .section-title{ font-size: 1.6rem; color: var(--neutral_dark); }
#admin .title .title-text, #admin .title #star_item{ display: inline-block; vertical-align: middle; font-weight: 700; }
#admin .title #star_item{ width: 36px; height: 36px; background-color: transparent; border: none; outline: none; padding: 0; margin: 0 0 0 8px; color: var(--dark_dark); transition: all .2s ease; cursor: pointer; }
#admin .title #star_item .star-icon, #admin .title #star_item .star-icon::before{ transition: all .05s ease; }
#admin .title #star_item .star-icon{ display: block; width: 36px; height: 36px; line-height: 36px; text-align: center; font-family: "storybook"; font-size: 1.15rem; }
#admin .title #star_item:hover{ color: var(--link_hover); transform: scale(1.15); }
#admin .title #star_item:active, #admin .page-title .title #star_item:focus{ color: var(--dark_light); transform: scale(1.15); }
#admin .title #star_item.starred{ color: var(--amber_light); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
#admin .title #star_item.starred .star-icon::before{ content: "\ea73"; }
#admin .title #star_item.unstarred .star-icon::before{ content: "\ea72"; }

#admin #app_settings .settings:first-of-type{ padding-top: 6px; }
#admin #app_settings .settings:not(:first-of-type){ padding-top: 36px; }

.row { display: flex; flex-wrap: wrap; gap: 20px; width: calc(100% + 20px); }

.row [class^='col-'],
.row [class*=' col-'] { padding: 0; flex: 0 0 auto; }

.row [class^='col-'].nopadding,
.row [class*=' col-'].nopadding { padding: 0; /* Keep nopadding columns consistent */ }

.col-1 { width: calc(8.33% - 20px); } /* Adjusted widths */
.col-2 { width: calc(16.66% - 20px); }
.col-3 { width: calc(25% - 20px); }
.col-4 { width: calc(33.33% - 20px); }
.col-5 { width: calc(41.66% - 20px); }
.col-6 { width: calc(50% - 20px); }
.col-7 { width: calc(58.33% - 20px); }
.col-8 { width: calc(66.66% - 20px); }
.col-9 { width: calc(75% - 20px); }
.col-10 { width: calc(83.33% - 20px); }
.col-11 { width: calc(91.66% - 20px); }
.col-12 { width: calc(100% - 20px); }

button, input, optgroup, select, textarea{ margin: 0; font-family: 'Inter', Arial, Helvetica, sans-serif; font-size: 1rem; }

.form-field:not(:last-of-type){ padding: 0 0 10px; }
.form-field .label, .form-field label{ font-weight: 700; display: block; padding: 0 0 7px; color: var(--primary_text); font-size: 0.9rem; }
.form-field.form-switch{ padding-left: 3rem; }
.form-field.turnstile{ text-align: center; }

.form-field .form-control{ border-radius: 8px; display: block; width: 100%; padding: 8px 12px; font-size: 1rem; font-weight: 400; line-height: 30px; color: var(--form_color); background-color: var(--white); background-clip: padding-box; border: 1px solid var(--form_border); appearance: none; transition: box-shadow .15s ease, border-color .15s ease; }
.form-field .form-control::placeholder{ color: var(--form_placeholder); }

.form-field.form-switch .form-check-input{ border: 1px solid #e9ecef; position: relative; background-color: rgba(58, 65, 111, .1); height: 21px; width: 40px; margin-left: -48px; background-image: none; background-position: 0; border-radius: 40px; transition: background-color .25s ease, border-color .25s ease, background-position .15s ease-in-out, opacity .15s ease-out, box-shadow .15s ease-in-out; float: left; }
.form-field.form-switch .form-check-input:after{ transition: transform .25s ease-in-out, background-color .25s ease-in-out; content: ""; width: 16px; height: 16px; border-radius: 50%; position: absolute; background-color: var(--white); transform: translateX(1px); box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .12); top: 1px;
}
.form-field.form-switch .form-check-input:checked{ border-color: rgba(58, 65, 111, .95); background-color: rgba(58, 65, 111, .95); background-position: 100%; background-image: none; }
.form-field.form-switch .form-check-input:checked:after{ transform: translateX(21px); }
.form-field.form-switch label{ line-height: 25px; padding: 0; }

.form-field .form-check-input[type=checkbox]{ cursor: pointer; border-radius: 10px; }
.form-field .form-check-input{ -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: 2px; vertical-align: top; background-color: var(--white); background-repeat: no-repeat; background-position: 50%; background-size: contain; border: none; print-color-adjust: exact; transition: background-color .25s ease, border-color .25s ease, background-position .15s ease-in-out, opacity .15s ease-out, box-shadow .15s ease-in-out; }

.form-field.upload{ font-family: 'Inter', Arial, Helvetica, sans-serif; font-size: 1.3rem; color: var(--form_upload); padding: 80px 120px; text-align: center; border: solid 2px #808080; cursor: default; }
.form-field.upload + input[type="file"]{ display: none; }

.buttons-group{ padding: 24px 0 0; }

.button{ margin-bottom: 16px; box-shadow: 0 4px 7px -1px rgba(0, 0, 0, .11), 0 2px 4px -1px rgba(0, 0, 0, .07); background-size: 150%; background-position-x: 25%; text-transform: uppercase; display: inline-block; padding: 12px 24px; font-weight: 700; line-height: 1.4; color: var(--button_color); text-align: center; vertical-align: middle; cursor: pointer; user-select: none; border: 1px solid transparent; border-radius: 8px; background-color: var(--white); transition: all .15s ease-in; font-family: 'Inter', Arial, Helvetica, sans-serif; text-decoration: none;; }
.button:hover{ box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .09), 0 2px 3px -1px rgba(0, 0, 0, .07); transform: scale(1.02); }
.button-primary{ color: var(--white); background-image: var(--grad_primary); }
.button-info{ background-image: var(--grad_info); color: var(--white); }
.buton-warning{ background-image: var(--grad_warning); }
.button-dark{ color: var(--white); background-image: var(--grad_dark); }
.button.halfwidth{ width: calc( 50% - 10px ) !important; }
.button.halfwidth:first-of-type{ margin: 0 6px 0 0 !important; }
.button.halfwidth:last-of-type{ margin: 0 0 0 6px !important; }
.button.fullwidth{ width: 100% !important; }

.select-menu { position: relative; width: fit-content;  }
.select-menu select { appearance: none; width: 100%; font-size: 1rem; line-height: 30px; padding: 8px 50px 8px 12px; background-color: var(--white); border: 1px solid #caced1; border-radius: 4px; color: var(--black); cursor: pointer; }
.select-menu::before, .select-menu::after { --size: 5px; position: absolute; content: ""; right: 16px; pointer-events: none; }
.select-menu::before { border-left: var(--size) solid transparent; border-right: var(--size) solid transparent; border-bottom: var(--size) solid black; top: 40%; }
.select-menu::after { border-left: var(--size) solid transparent; border-right: var(--size) solid transparent; border-top: var(--size) solid black; top: 55%; }

/* Style the radio buttons */
input[type="radio"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; display: inline-block; width: 20px; height: 20px; border: 2px solid var(--dark_light); border-radius: 50%; margin-right: 10px; position: relative; cursor: pointer; background-color: var(--white); outline: none; transition: background-color 0.2s ease, border-color 0.2s ease; }

/* Inner circle with padding */
input[type="radio"]::before { content: ''; display: block; width: 10px; /* Adjust based on size */ height: 10px; border-radius: 50%; background-color: var(--white); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: background-color 0.2s ease; }

/* Selected state: Inner circle becomes gradient */
input[type="radio"]:checked::before { background: linear-gradient(310deg, var(--dark_dark), var(--dark_light)); }

/* Hover effect for radio buttons */
input[type="radio"]:hover { border-color: var(--dark_light); }

  
.addnew_placeholder .wrapper{ padding: 30px; width: 100%; background: var(--white); display: flex; flex-direction: column; }
.addnew_placeholder .wrapper-cell{ display: flex; margin-bottom: 30px; }
@-webkit-keyframes placeHolderShimmer {
    0% { background-position: -468px 0; }
    100% { background-position: 468px 0; }
}
@keyframes placeHolderShimmer {
    0% { background-position: -468px 0; } 
    100% { background-position: 468px 0; }
}
.addnew_placeholder p.heading{ font-size: 2.3rem; font-weight: 700; }
.addnew_placeholder.loading .text-line, .addnew_placeholder.loading .image { -webkit-animation-duration: 1.25s; animation-duration: 1.25s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: placeHolderShimmer; animation-name: placeHolderShimmer; -webkit-animation-timing-function: linear; animation-timing-function: linear; background: var(--loading_bg); background: linear-gradient(to right, var(--loading_bg) 8%, var(--loading_bgalt) 18%, var(--loading_bg) 33%); background-size: 800px 104px; height: 96px; position: relative; }
.addnew_placeholder .image { height: 60px; width: 60px; }
.addnew_placeholder .text { margin-left: 20px; }
.addnew_placeholder .text-line { height: 10px; width: 230px; margin: 4px 0; }


/* Login and Install */
#admin_login{ height: 100%; padding: 15px; background-color: var(--white); position: relative; display: flex; flex-wrap: wrap; }
#admin_login #loginwrap{ width: 45%; display: flex; align-items: center; justify-content: center; }
#admin_login #alert_notice, #admin #alert_notice{ margin: 0 0 20px; padding: 12px; border-radius: 5px; font-size: 0.875rem; font-weight: 700; }
#admin_login #alert_notice.success, #admin #alert_notice.success{ background: var(--grad_success); color: var(--white); }
#admin_login #alert_notice.epicfail, #admin #alert_notice.epicfail{ background: var(--grad_error); color: var(--white); }
#admin_login #preview_image{ background-image: url('../images/login_bg_writing.jpg'); background-position: center right; background-size: cover; background-repeat: no-repeat; width: 55%; border-radius: 5px; }
@media only screen and (min-width: 1024px){
    #admin_login .login_form{ width: 350px; }
    #admin_login .login_form #logo{ text-align: center; padding: 0 0 25px; }
    #admin_login .login_form img{ max-width: 270px; }
}
@media only screen and (max-width: 1023px) and (min-width: 700px){
}
@media only screen and (max-width: 699px){
}

/* Ensure both divs have the necessary positioning */
#admin_user, #turnstile { position: absolute; top: 0; left: 0; width: 100%; }

/* Initially position the #turnstile div off-screen to the right */
#turnstile {
    left: 110%;
    /* display: none; /* Keep the turnstile div hidden at first */
}


#admin_wrap{ padding: 0; position: relative; flex-wrap: row; gap: 50px; height: 100%; }
#admin #admin_header{ position: fixed; top: 20px; left: 20px; bottom: 20px; width: 275px; padding: 16px 6px 0; display: flex; flex-direction: column; }
#admin #admin_header .logo{ padding: 0 12px 32px; }
#admin #admin_header img{ width: 100%; }
#admin #admin_header .navbar{ flex: 1; height: calc( 100% - 99px ); }
#admin #admin_header .navbar .story-links{ flex: 1; overflow: auto; }
#admin #admin_header .navbar .admin-nav{ list-style: none; margin: 0; padding: 0; height: 100%; display: flex; flex-direction: column; }
#admin #admin_header .navbar .admin-nav .nav-link{ padding: 0; margin: 0 0 2px 0; }
#admin #admin_header .navbar .admin-nav .spacer{ height: 8px; }
#admin #admin_header .navbar .admin-nav .nav-link .navlink{ display: block; padding: 12px 15px; border-radius: 5px; text-decoration: none; }
#admin #admin_header .navbar .admin-nav .nav-link .navlink span{ display: inline-block; vertical-align: middle; }
#admin #admin_header .navbar .admin-nav .nav-link .navlink .icon, #admin #admin_header .navbar .admin-nav .nav-link.profile.current .navLink .icon{ width: 42px; height: 42px; line-height: 42px; text-align: center; border-radius: 5px; background-color: var(--white); box-shadow: 0 2px 4px rgba(0,0,0,.3); background-size: cover; background-position: center; background-repeat: no-repeat; color: var(--dark_light); font-size: 1.3rem; }
#admin #admin_header .navbar .admin-nav .nav-link .navlink .label{ font-size: 0.9125rem; color: var(--button_color); padding: 0 0 0 8px; }
#admin #admin_header .navbar .admin-nav .nav-link .navlink .post-count{ float: right; padding: 0 5px; min-width: 24px; height: 24px; line-height: 24px; margin: 6px 0; border-radius: 5px; text-align: center; color: var(--white); background-color: var(--dark_dark); font-size: 0.9rem; }
#admin #admin_header .navbar .admin-nav .nav-link.current .navlink{ background-color: var(--white); box-shadow: 0 2px 6px rgba(0,0,0,.35); }
#admin #admin_header .navbar .admin-nav .nav-link.current .navlink .icon{ background: linear-gradient(310deg, #cb0c9f, #cb0c9f); color: var(--white); }
#admin #admin_header .navbar .admin-nav .nav-link.current .navlink .label{ color: var(--primary_text); font-weight: 700; }
#admin #admin_header .navbar .admin-nav .story-links .nav-link .navlink{ padding: 10px 15px; }
#admin #admin_header .navbar .admin-nav .story-links .nav-link .navlink .icon, #admin #admin_header .navbar .admin-nav .story-links .nav-link.profile.current .navLink .icon{ width: 36px; height: 36px; line-height: 36px; font-size: 1.15rem; }

#admin #admin_area{ margin: 0; padding: 30px 30px 30px 345px; min-height: 100%; }
#admin .widget{ background-color: var(--white); border-radius: 8px; box-shadow: 0 3px 7px rgba(0,0,0,.2); padding: 24px 18px; margin-bottom: 20px; }
#admin .widget .title, #admin #cast_member .player-data .scores .label{ font-weight: 400; color: var(--button_color); }
#admin .widget .sub_title{ font-size: 1rem; color: var(--primary_text); font-weight: 400; }
#admin .widget .counter-title{ font-size: 1rem; padding: 0 0 4px; }
#admin .widget .widget-title{ font-size: 0.9125rem; padding: 0 0 10px; color: #717780; text-transform: uppercase; }
#admin .widget .description{ font-size: 0.8rem; padding: 0 0 10px; margin: -8px 0 0; color: #717780; font-style: italic; }

#admin .counter .widget, #admin #cast_member .player-data .scores .widget{ padding: 12px 18px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
#admin .counter .widget .data, #admin #cast_member .player-data .scores .widget .label{ flex: 1; }
#admin .counter .widget .icon, #admin #cast_member .player-data .scores .widget .score, #admin #cast_member .episode-list .episodes .score{ width: 62px; height: 62px; border-radius: 5px; color: var(--white); text-align: center; line-height: 62px; font-size: 1.75rem; background: var(--grad_primary); }
#admin .counter .widget .value{ font-size: 1.45rem; font-weight: 700; color: var(--primary_text); padding: 0; }

#admin #dashboard .counters{ display: flex; gap: 20px; flex-direction: column; }

#admin #dashboard .notices .notice{ margin: 0 0 18px; border-radius: 8px; padding: 15px 25px; box-shadow: 0 3px 7px rgba(0,0,0,.2); }
#admin #dashboard .notices .notice.install{ background: var(--grad_dark); color: var(--white); }
#admin #dashboard .notices .notice.turnstile{ background: var(--grad_cloudflare); color: var(--white); }
#admin #dashboard .notices .notice p{ padding: 0; margin: 0; font-weight: 700; }
#admin #dashboard .notices .notice a{ color: #eef3f7; }
#admin #dashboard .notices .notice a:hover{ color: #FFF; }

#admin #dashboard .top-row{ padding: 0 0 32px; }
#admin #dashboard .intro_block{ width: 65%; margin: 0; border-radius: 10px; position: relative; background: var(--grad_primary); background-blend-mode: normal; color: #FFF; box-shadow: 0 3px 7px rgba(0,0,0,.2); }
#admin #dashboard .intro_block.cover::before{ content: ""; position: absolute; left: 0px; top: 0px; right: 0; bottom: 0; background: radial-gradient(ellipse, #0a064e 0%, rgba(5,3,63,0) 100%); background-blend-mode: normal; z-index: 1; }
#admin #dashboard .intro_block.cover::after{ content: ""; position: absolute; left: 0px; top: 0px; right: 0; bottom: 0; background: radial-gradient(ellipse, #260225 0%, rgba(63,3,55,0) 100%); background-blend-mode: normal; z-index: 2; }
#admin #dashboard .intro_block .content{ padding: 30px; display: inline-block; vertical-align: top; width: calc( 100% - 405px ); }
#admin #dashboard .intro_block .content .title{ font-size: 1.6rem; font-weight: 400; padding: 0 0 15px; }
#admin #dashboard .intro_block .content .text{ padding: 0; }
#admin #dashboard .intro_block .image{ width: 400px; position: relative; display: inline-block; min-height: 190px; vertical-align: bottom; }
#admin #dashboard .intro_block .image .graphic{ position: absolute; bottom: 30px; right: 30px; width: 350px; }

#admin #dashboard .date_time{ border-radius: 10px; margin: 0; color: var(--primary_text); width: calc( 35% - 30px ); padding: 18px 25px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#admin #dashboard .date_time .clock{ text-align: center; }
#admin #dashboard .date_time .clock > span{ display: inline-block; vertical-align: top; line-height: 1; }
#admin #dashboard .date_time .clock .display{ font-size: 3.25rem; font-weight: 700; }
#admin #dashboard .date_time .clock .ap{ font-size: 1.4rem; text-transform: uppercase; padding: 5px 0 0 8px; }
#admin #dashboard .date_time .date{ padding: 18px 0 0; text-align: center; font-size: 1.25rem; }

#admin .bookshelf:not(:first-of-type), #admin #character .section:not(:first-of-type), #admin #evens .section:not(:first-of-type), #admin #item .section:not(:first-of-type), #admin #story .section:not(:first-of-type), #admin #location .section:not(:first-of-type), #admin #relationship .section:not(:first-of-type), #admin #theme .section:not(:first-of-type){ padding-top: 36px; }
#admin .no-stories{ text-align: center; padding: 36px 24px; }
#admin .no-stories img{ width: 300px; }
#admin .no-stories .text{ font-size: 1.65rem; padding: 24px 0 0; color: #9a9fa2; }

#admin .app-title{ font-size: 1.5rem; color: #717780; padding: 0 0 18px; }

#admin .story-link, #admin .character-link{ text-decoration: none; display: block; height: 100%; }
#admin .story-link .widget, #admin .character-link .widget, #admin #theme .themes .theme .theme-info, #admin #chapter .chapter .chapter-info, #admin #item .item .item-info, #admin #location .location .widget, #admin #event .event .widget{ padding: 0; margin: 0; display: flex; flex-direction: column; height: 100%; }
#admin .story-link .widget .data, #admin .character-link .widget .data, #admin #theme .themes .theme .theme-details, #admin #chapter .chapter .data, #admin #item .item .data, #admin #location .location .widget .data, #admin #event .event .widget .data{ padding: 24px 18px; flex: 1; }
#admin .character-link .widget .data .icon{ display: inline-block; width: 18px; margin: 0 6px 0 0; text-align: center; }
#admin #theme .themes .theme .theme-details, #admin #chapter .chapter .data, #admin #location .location .widget .data, #admin #event .event .widget .data{ display: flex; flex-direction: column; }
#admin .story-link .widget .data .genres{ padding: 0; font-size: 0.875rem; color: #717780; }
#admin .character-link .widget .data p:last-of-type{ padding-bottom: 0; }
#admin .story-link .widget .image, #admin .character-link .widget .image, #admin #theme .themes .theme .image, #admin #chapter .chapter .chapter-link .image, #admin #item .item .image, #admin #location .location .widget .image, #admin #event .event .widget .image{ position: relative; border-radius: 8px; }
#admin #theme .themes .theme .theme-details .notes, #admin #chapter .chapter .notes, #admin #item .item .notes, #admin #location .location .widget .notes, #admin #event .event .widget .notes, #admin #relationship .relationship-body .widget .notes{ padding: 0 0 25px; flex: 1; }
#admin .story-link .widget .image{ height: 200px; }
#admin .character-link .widget .image{ height: 125px; }
#admin #theme .themes .theme .image, #admin #chapter .chapter .image, #admin #item .item .image, #admin #location .location .widget .image, #admin #event .event .widget .image{ height: 150px; }
#admin .story-link .widget .status{ position: absolute; display: block; padding: 6px 10px; border-radius: 5px; top: 25px; left: 25px; width: fit-content; max-width: 250px; color: var(--primary_text); background-color: var(--white); font-weight: 700; font-size: 0.9rem; }
#admin .story-link .widget .story-title, #admin .character-link .widget .character-name, #admin #theme .themes .theme .theme-link .image .theme-title, #admin #chapter .chapter .chapter-link .image .chapter-title, #admin #item .item .image .item-title, #admin #location .location .widget .image .location-title, #admin #event .event .widget .image .event-title{ position: absolute; bottom: 20px; left: 20px; right: 20px; display: block; font-size: 1.35rem; margin: 0; padding: 0; }
#admin .story-link .widget .starred, #admin .character-link .widget .starred, #admin #chapter .chapter .chapter-link .image .starred, #admin #item .item .image .starred, #admin #location .location .widget .image .starred, #admin #event .event .widget .image .starred{ position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; display: block; border-radius: 50%; background-color: var(--dark_dark); }
#admin .story-link .widget .starred span, #admin .character-link .widget .starred span, #admin #chapter .chapter .chapter-link .image .starred span, #admin #item .item .image .starred span, #admin #location .location .widget .image .starred span, #admin #event .event .widget .image .starred span{ width: 32px; height: 32px; color: var(--amber_light); line-height: 32px; text-align: center; font-size: 0.8rem; display: block; }
#admin .library .story.color-primary .story-link .image, #admin .character-page .character.color-primary .character-link .image, #admin #story .characters .character.color-primary .char-icon, #admin #theme .themes .theme.color-primary .theme-link .image, #admin #chapter .chapter.color-primary .chapter-link .image, #admin #item .item.color-primary .item-link .image, #admin #location .location.color-primary .widget .image, #admin #event .event.color-primary .widget .image, #admin .page-header .banner.color-primary{ background: var(--grad_primary); color: var(--white); }
#admin .library .story.color-secondary .story-link .image, #admin .character-page .character.color-secondary .character-link .image, #admin #story .characters .character.color-secondary .char-icon, #admin #theme .themes .theme.color-secondary .theme-link .image, #admin #chapter .chapter.color-secondary .chapter-link .image, #admin #item .item.color-secondary .item-link .image, #admin #location .location.color-secondary .widget .image, #admin #event .event.color-secondary .widget .image, #admin .page-header .banner.color-secondary{ background: var(--grad_secondary); color: var(--dark_dark); }
#admin .library .story.color-dark .story-link .image, #admin .character-page .character.color-dark .character-link .image, #admin #story .characters .character.color-dark .char-icon, #admin #theme .themes .theme.color-dark .theme-link .image, #admin #chapter .chapter.color-dark .chapter-link .image, #admin #item .item.color-dark .item-link .image, #admin #location .location.color-dark .widget .image, #admin #event .event.color-dark .widget .image, #admin .page-header .banner.color-dark{ background: var(--grad_dark); color: var(--white); }
#admin .library .story.color-info .story-link .image, #admin .character-page .character.color-info .character-link .image, #admin #story .characters .character.color-info .char-icon, #admin #theme .themes .theme.color-info .theme-link .image, #admin #chapter .chapter.color-info .chapter-link .image, #admin #item .item.color-info .item-link .image, #admin #location .location.color-info .widget .image, #admin #event .event.color-info .widget .image, #admin .page-header .banner.color-info{ background: var(--grad_info); color: var(--white); }
#admin .library .story.color-warning .story-link .image, #admin .character-page .character.color-warning .character-link .image, #admin #story .characters .character.color-warning .char-icon, #admin #theme .themes .theme.color-warning .theme-link .image, #admin #chapter .chapter.color-warning .chapter-link .image, #admin #item .item.color-warning .item-link .image, #admin #location .location.color-warning .widget .image, #admin #event .event.color-warning .widget .image, #admin .page-header .banner.color-warning{ background: var(--grad_warning); color: var(--white); }
#admin .library .story.color-success .story-link .image, #admin .character-page .character.color-success .character-link .image, #admin #story .characters .character.color-success .char-icon, #admin #theme .themes .theme.color-success .theme-link .image, #admin #chapter .chapter.color-success .chapter-link .image, #admin #item .item.color-success .item-link .image, #admin #location .location.color-success .widget .image, #admin #event .event.color-success .widget .image, #admin .page-header .banner.color-success{ background: var(--grad_success); color: var(--white); }
#admin .library .story.color-error .story-link .image, #admin .character-page .character.color-error .character-link .image, #admin #story .characters .character.color-error .char-icon, #admin #theme .themes .theme.color-error .theme-link .image, #admin #chapter .chapter.color-error .chapter-link .image, #admin #item .item.color-error .item-link .image, #admin #location .location.color-error .widget .image, #admin #event .event.color-error .widget .image, #admin .page-header .banner.color-error{ background: var(--grad_error); color: var(--white); }
#admin .library .story.color-neutral .story-link .image, #admin .character-page .character.color-neutral .character-link .image, #admin #story .characters .character.color-neutral .char-icon, #admin #theme .themes .theme.color-neutral .theme-link .image, #admin #chapter .chapter.color-neutral .chapter-link .image, #admin #item .item.color-neutral .item-link .image, #admin #location .location.color-neutral .widget .image, #admin #event .event.color-neutral .widget .image, #admin .page-header .banner.color-neutral{ background: var(--grad_neutral); color: var(--white); }
#admin .library .story.color-pastel .story-link .image, #admin .character-page .character.color-pastel .character-link .image, #admin #story .characters .character.color-pastel .char-icon, #admin #theme .themes .theme.color-pastel .theme-link .image, #admin #chapter .chapter.color-pastel .chapter-link .image, #admin #item .item.color-pastel .item-link .image, #admin #location .location.color-pastel .widget .image, #admin #event .event.color-pastel .widget .image, #admin .page-header .banner.color-pastel{ background: var(--grad_pastel); color: var(--dark_dark); }
#admin .library .story.color-sunset .story-link .image, #admin .character-page .character.color-sunset .character-link .image, #admin #story .characters .character.color-sunset .char-icon, #admin #theme .themes .theme.color-sunset .theme-link .image, #admin #chapter .chapter.color-sunset .chapter-link .image, #admin #item .item.color-sunset .item-link .image, #admin #location .location.color-sunset .widget .image, #admin #event .event.color-sunset .widget .image, #admin .page-header .banner.color-sunset{ background: var(--grad_sunset); color: var(--white); }
#admin .library .story.color-ocean .story-link .image, #admin .character-page .character.color-ocean .character-link .image, #admin #story .characters .character.color-ocean .char-icon, #admin #theme .themes .theme.color-ocean .theme-link .image, #admin #chapter .chapter.color-ocean .chapter-link .image, #admin #item .item.color-ocean .item-link .image, #admin #location .location.color-ocean .widget .image, #admin #event .event.color-ocean .widget .image, #admin .page-header .banner.color-ocean{ background: var(--grad_ocean); color: var(--white); }
#admin .library .story.color-mint .story-link .image, #admin .character-page .character.color-mint .character-link .image, #admin #story .characters .character.color-mint .char-icon, #admin #theme .themes .theme.color-mint .theme-link .image, #admin #chapter .chapter.color-mint .chapter-link .image, #admin #item .item.color-mint .item-link .image, #admin #location .location.color-mint .widget .image, #admin #event .event.color-mint .widget .image, #admin .page-header .banner.color-mint{ background: var(--grad_mint); color: var(--dark_dark); }
#admin .library .story.color-amber .story-link .image, #admin .character-page .character.color-amber .character-link .image, #admin #story .characters .character.color-amber .char-icon, #admin #theme .themes .theme.color-amber .theme-link .image, #admin #chapter .chapter.color-amber .chapter-link .image, #admin #item .item.color-amber .item-link .image, #admin #location .location.color-amber .widget .image, #admin #event .event.color-amber .widget .image, #admin .page-header .banner.color-amber{ background: var(--grad_amber); color: var(--white); }
#admin #relationship .relationships .relationship-link{ text-decoration: none; }
#admin #relationship .relationships .relationship .row{ gap: 10px 40px; width: 100%; }
#admin #relationship .relationships .relationship .character-one, #admin #relationship .relationships .relationship .character-two{ font-size: 1.35rem; font-weight: 700; }
#admin #relationship .relationships .relationship .character-one{ text-align: right; }
#admin #relationship .relationships .relationship .connection{ text-align: center; padding: 0; width: 100%; }
#admin #character .profile-body .relationships .relationship:not(:last-of-type), #admin #character .profile-body .items .item:not(:last-of-type), #admin #character .profile-body .events .event:not(:last-of-type){ padding: 0 0 12px; }
#admin #character .profile-body .relationships .relationship .ship-link, #admin #character .profile-body .items .item .item-link, #admin #character .profile-body .events .event .event-link{ text-decoration: none; }
#admin #character .profile-body .relationships .relationship .ship-link:hover, #admin #character .profile-body .items .item .item-link:hover, #admin #character .profile-body .events .event .event-link:hover{ text-decoration: underline; }
#admin #character .profile-body .relationships .relationship .character-name, #admin #character .profile-body .items .item .item-name, #admin #character .profile-body .events .event .event-name{ font-weight: 700; font-size: 1.15rem; padding: 0 0 4px; }
#admin #character .profile-body .relationships .relationship .relationship-type, #admin #character .profile-body .items .item .item-desc, #admin #character .profile-body .events .event .event-desc{ padding: 0; font-size: 0.9rem; color: var(--dark_light); }

#admin .admin_nav{ background-color: var(--white); border-radius: 5px; box-shadow: 0 3px 5px rgba(0,0,0,.2); padding: 10px; margin: 0 0 24px; }
#admin .admin_nav .navitems{ list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 20px; }
#admin .admin_nav .navitems .item{ padding: 0; margin: 0; }
#admin .admin_nav .navitems .item.spacer{ flex: 1; }
#admin .admin_nav .navitems .item .link{ display: block; width: fit-content; text-decoration: none; padding: 10px 16px; border-radius: 5px; transition: all .2s ease; font-size: 0.925rem; }
#admin .admin_nav .navitems .item .link{ color: var(--link_color); }
#admin .admin_nav .navitems .item .link:hover{ background-color: var(--navlink_bg); }
#admin .admin_nav .navitems .item.delete .link{ color: var(--delete); }
#admin .admin_nav .navitems .item.delete .link:hover{ color: var(--white); background-color: var(--delete); }

#admin .table-display{ width: 100%; padding: 20px; background-color: var(--white); border-radius: 10px; }
#admin .table-display .display-table{ border-collapse: collapse; border: none; padding: 0; margin: 0; width: 100%; }
#admin .table-display .display-table thead th{ background-color: var(--table_headbg); }
#admin .table-display .display-table tbody tr:nth-of-type(even) td{ background-color: var(--table_evenbg); }
#admin .table-display .display-table thead th, #admin .table-display .display-table tbody td{ padding: 12px; border: none; margin: 0; }
#admin .table-display .display-table thead th{ padding: 16px 12px; }
#admin .table-display .display-table thead th p{ font-weight: 700; padding: 0; margin: 0; }

#admin #story .counts{ padding: 14px 18px;  }
#admin #story .counts .counter a{ text-decoration: none; display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 5px; transition: all .2s ease; }
#admin #story .counts .counter a:hover{ background-color: var(--navlink_bg); }
#admin #story .counts .counter .icon{ width: 32px; text-align: center; height: 32px; line-height: 32px; font-size: 1.15rem; }
#admin #story .counts .counter .data{ flex: 1; font-size: 1rem; }
#admin #story .counts .counter .data .count{ font-weight: 700; }
#admin #story .view-link{ float: right; font-size: 0.9rem; text-decoration: none; }
#admin #story .view-link .icon{ font-size: 0.8rem; padding: 0 0 0 5px; }
#admin #story .characters .data{ padding: 18px 0 0; }
#admin #story .characters .character{ text-decoration: none; display: flex; gap: 15px; flex-wrap: wrap; }
#admin #story .characters .character:not(:last-of-type){ padding: 0 0 15px; }
#admin #story .characters .character .char-icon{ width: 48px; height: 48px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,.2); display: block; }
#admin #story .characters .character .character-name{ font-size: 1.15rem; padding: 0 0 6px; }
#admin #story .characters .character .gender{ font-size: 0.9rem; padding: 0; }
#admin #story .characters .character .gender .icon{ padding: 0 8px 0 0; }

#admin #user .user-list .user .image{ width: 72px; height: 72px; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: cover; transition: all .2s ease; }
#admin #user .user-list .user:hover .image{ border: 3px solid #0073e6; box-shadow: 0 0 10px rgba(0, 115, 230, 0.5); }
#admin #user .user-list .user .widget{ height: fit-content !important; }
#admin #user .user-list .user-link{ text-decoration: none; }
#admin #user .user-list .user .row{ gap: 20px; width: 100%; }
#admin #user .user-list .user .user-data{ flex: 1; display: flex; flex-direction: column; justify-content: center; }
#admin #user .user-list .user .user-name{ font-size: 1.3rem; line-height: 1.4; font-weight: 700; color: var(--dark_dark); padding: 0 0 8px; }
#admin #user .user-list .user:hover .user-name{ color: var(--link_hover); }
#admin #user .user-list .user .user-username{ color: var(--dark_light); padding: 0; }

#admin #addnew_form #addnew_season .season_number{ display: inline-block; width: 200px; }
#admin #addnew_form #addnew_season #addnew_auto .wrapper{ max-width: 850px; }
#admin #addnew_form #addnew_season #addnew_auto .image{ width: 167px; height: 250px; }
#admin #addnew_form #addnew_season #addnew_auto .text{ flex: 1; }
#admin #addnew_form #addnew_season #addnew_auto .text-line{ width: 100%; margin: 0 0 8px; }
#admin #addnew_form #addnew_season #addnew_auto .heading{ height: 70px; line-height: 70px; }
#admin #addnew_form #addnew_season #addnew_auto .paragraph{ height: 32px; }
#admin #addnew_form #addnew_season #addnew_auto span{ display: inline-block; }
#admin #addnew_form #addnew_season #addnew_auto .label{ width: 130px; }
#admin #addnew_form #addnew_season #addnew_auto .data{ font-weight: 700; }

#admin #addnew_form #addnew_episode .season_number, #admin #addnew_form #addnew_episode .episode_number{ display: inline-block; width: 200px; }
#admin #addnew_form #addnew_episode .season_number .select-menu{ width: 100%; }
#admin #addnew_form #addnew_episode #addnew_auto .wrapper{ max-width: 1100px; }
#admin #addnew_form #addnew_episode #addnew_auto .image{ width: 300px; height: 169px; }
#admin #addnew_form #addnew_episode #addnew_auto .text{ flex: 1; }
#admin #addnew_form #addnew_episode #addnew_auto .text-line{ width: 100%; margin: 0 0 8px; }
#admin #addnew_form #addnew_episode #addnew_auto .heading{ height: 70px; line-height: 70px; }
#admin #addnew_form #addnew_episode #addnew_auto .paragraph{ height: 32px; }
#admin #addnew_form #addnew_episode #addnew_auto span{ display: inline-block; }
#admin #addnew_form #addnew_episode #addnew_auto .label{ width: 130px; }
#admin #addnew_form #addnew_episode #addnew_auto .data{ font-weight: 700; }

#admin #addnew_form .repeat-group{ border-collapse: 5px; margin: 0 0 18px; }
#admin #addnew_form .repeat-group thead th{ font-size: 1rem; font-weight: 700; font-family: 'Inter', Arial, Helvetica, sans-serif; }
#admin #addnew_form .repeat-group td, #admin #addnew_form .repeat-group th{ padding: 6px; }
#admin #addnew_form .repeat-group .remove-button{ border: none; border-radius: 8px; background-color: transparent; color: var(--delete); line-height: 30px; height: 46px; vertical-align: top; padding: 8px 12px; width: 46px; text-align: center; cursor: pointer; transition: all .2s ease; }
#admin #addnew_form .repeat-group .remove-button:hover{ background-color: var(--delete); color: var(--white); }
#admin #addnew_form .repeat-group .remove-button .label{ display: none; }

#admin #character .profile-header .banner, #admin #chapter .chapter-header .banner, #admin #item .item-header .banner, #admin #location .location-header .banner, #admin #event .event-header .banner, #admin #relationship .relationship-header .banner{ height: 325px; margin: 0 0 28px; border-radius: 8px; box-shadow: 0 3px 7px rgba(0,0,0,.2); position: relative; }
#admin #character .profile-header .banner .image{ position: absolute; left: 40px; bottom: 30px; width: 150px; height: 150px; border-radius: 5px; border: solid 10px var(--white); background: var(--grad_dark); z-index: 2; }
#admin #character .profile-header .banner .title, #admin #chapter .chapter-header .banner .title, #admin #item .item-header .banner .title, #admin #location .location-header .banner .title, #admin #event .event-header .banner .title, #admin #relationship .relationship-header .banner .title{ background-color: var(--white); color: var(--dark_dark); padding: 22px 28px 22px 220px; border-radius: 0 0 8px 8px; position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; }
#admin #chapter .chapter-header .banner .title, #admin #item .item-header .banner .title, #admin #location .location-header .banner .title, #admin #event .event-header .banner .title, #admin #relationship .relationship-header .banner .title{ padding-left: 28px; }
#admin #character .profile-header .banner .title .character-name, #admin #chapter .chapter-header .banner .title .chapter-name, #admin #item .item-header .banner .title .item-name, #admin #location .location-header .banner .location-name, #admin #event .event-header .banner .event-name, #admin #relationship .relationship-header .banner .relationship-names{ padding: 0; font-size: 2.3rem; }
#admin #chapter .chapter-header .banner .title .updated, #admin #location .location-header .banner .title .updated, #admin #event .event-header .banner .event_date, #admin #event .event-header .banner .updated, #admin #relationship .relationship-header .banner .relationship{ color: var(--dark_light); padding: 6px 0 0; }
#admin #chapter .chapter-header .banner .title .updated .date, #admin #location .location-header .banner .title .updated .date, #admin #event .event-header .banner .event_date .date, #admin #event .event-header .banner .updated .date{ font-weight: 700; }

#admin #event .sidebar .characters{ margin: 0; padding: 0 0 10px; list-style: none; }
#admin #event .sidebar .characters .character{ margin: 0; padding: 0 0 6px; }

#admin .postit-color .colors, #admin .story-color .colors{ display: flex; flex-wrap: wrap; gap: 10px; }
#admin .postit-color .colors input[type="radio"], #admin .story-color .colors input[type="radio"]{ display: none; }
#admin .postit-color .colors label, #admin .story-color .colors label{ width: 40px; height: 40px; display: inline-block; border-radius: 5px; cursor: pointer; border: 2px solid transparent; transition: border 0.2s ease-in-out; }
#admin .research-page .research .note, #admin .theme-page .theme .theme-info, #admin .character-link .widget, #admin #chapter .chapter-info, #admin #item .item .item-info, #admin #location .location .widget, #admin #event .event .widget, #admin #user .user-list .user .widget{ border: solid 3px transparent; transition: border .2s ease-in-out; height: 100%; display: flex; flex-direction: column; }
#admin .postit-color .colors label:hover, #admin .story-color .colors label:hover{ border-color: var(--white); }
#admin .research-page .research .research-link, #admin .theme-page .theme .theme-link, #admin #chapter .chapter .chapter-link, #admin #item .item .item-link, #admin #location .location .location-link, #admin #event .event .event-link{ height: 100%; display: block; text-decoration: none; }
#admin .research-page .research .research-link, #admin .research-body .note, #admin .theme-page .theme .theme-link, #admin .theme-body .theme{ color: var(--dark_dark); }
#admin .research-page .research .note .research-title, #admin .research-body .note .research-title, #admin .theme-page .theme .theme-info .theme-title, #admin .theme-body .theme-title{ font-size: 1.7rem; }
#admin .research-page .research .note .research-notes, #admin .research-body .note .research-notes, #admin .theme-page .theme .theme-info .theme-details, #admin .theme-body .theme-details{ padding: 10px 0 25px; flex: 1; }
#admin .research-page .research .note .updated, #admin .research-body .note .updated, #admin .theme-page .theme .theme-info .updated, #admin .theme-body .updated, #admin #chapter .chapter .updated, #admin #item .item .updated, #admin #location .location .widget .updated, #admin #event .event .widget .updated, #admin #event .event .widget .event_date, #admin #relationship .relationship-body .widget .updated{ font-size: 0.9rem; padding: 0; color: var(--dark_light) }
#admin #event .event .widget .event_date{ padding: 0 0 10px; }
#admin .research-page .research .note .updated .date, #admin .research-body .note .updated .date, #admin .theme-page .theme .theme-info .updated .date, #admin .theme-body .updated .date, #admin #chapter .chapter .updated .date, #admin #item .item .updated .date, #admin #location .location .widget .updated .date, #admin #event .event .widget .updated .date, #admin #event .event .widget .event_date .date, #admin #relationship .relationship-body .widget .updated .date{ font-weight: 700; }
/* Selected state */
#admin .postit-color .colors input[type="radio"]:checked + label, #admin .story-color .colors input[type="radio"]:checked + label{ border-color: var(--dark_dark); }
#admin .research-page .research .note:hover, #admin .theme-page .theme .theme-info:hover, #admin .character-link .widget:hover, #admin #chapter .chapter-info:hover, #admin #item .item-info:hover, #admin #location .location .widget:hover, #admin #event .event .widget:hover, #admin #user .user-list .user:hover .widget{ border-color: var(--link_hover); }

/* Colors */
#admin .postit-color .colors .postit-grey, #admin .research-page .research .note.postit-grey, #admin .research-body .note.postit-grey{ background: var(--postit_grey); }
#admin .postit-color .colors .postit-lightgrey, #admin .research-page .research .note.postit-lightgrey, #admin .research-body .note.postit-lightgrey{ background: var(--postit_lightgrey); }
#admin .postit-color .colors .postit-red, #admin .research-page .research .note.postit-red, #admin .research-body .note.postit-red{ background: var(--postit_red); }
#admin .postit-color .colors .postit-orange, #admin .research-page .research .note.postit-orange, #admin .research-body .note.postit-orange{ background: var(--postit_orange); }
#admin .postit-color .colors .postit-pink, #admin .research-page .research .note.postit-pink, #admin .research-body .note.postit-pink{ background: var(--postit_pink); }
#admin .postit-color .colors .postit-lightgreen, #admin .research-page .research .note.postit-lightgreen, #admin .research-body .note.postit-lightgreen{ background: var(--postit_lightgreen); }
#admin .postit-color .colors .postit-green, #admin .research-page .research .note.postit-green, #admin .research-body .note.postit-green{ background: var(--postit_green); }
#admin .postit-color .colors .postit-darkgreen, #admin .research-page .research .note.postit-darkgreen, #admin .research-body .note.postit-darkgreen{ background: var(--postit_darkgreen); }
#admin .postit-color .colors .postit-violet, #admin .research-page .research .note.postit-violet, #admin .research-body .note.postit-violet{ background: var(--postit_violet); }
#admin .postit-color .colors .postit-yellow, #admin .research-page .research .note.postit-yellow, #admin .research-body .note.postit-yellow{ background: var(--postit_yellow); }
#admin .postit-color .colors .postit-darkyellow, #admin .research-page .research .note.postit-darkyellow, #admin .research-body .note.postit-darkyellow{ background: var(--postit_darkyellow); }
#admin .postit-color .colors .postit-lightblue, #admin .research-page .research .note.postit-lightblue, #admin .research-body .note.postit-lightblue{ background: var(--postit_lightblue); }
#admin .postit-color .colors .postit-blue, #admin .research-page .research .note.postit-blue, #admin .research-body .note.postit-blue{ background: var(--postit_blue); }

#admin .story-color .colors .story-primary{ background: var(--grad_primary); }
#admin .story-color .colors .story-secondary{ background: var(--grad_secondary); }
#admin .story-color .colors .story-dark{ background: var(--grad_dark); }
#admin .story-color .colors .story-info{ background: var(--grad_info); }
#admin .story-color .colors .story-warning{ background: var(--grad_warning); }
#admin .story-color .colors .story-success{ background: var(--grad_success); }
#admin .story-color .colors .story-error{ background: var(--grad_error); }
#admin .story-color .colors .story-neutral{ background: var(--grad_neutral); }
#admin .story-color .colors .story-pastel{ background: var(--grad_pastel); }
#admin .story-color .colors .story-sunset{ background: var(--grad_sunset); }
#admin .story-color .colors .story-ocean{ background: var(--grad_ocean); }
#admin .story-color .colors .story-mint{ background: var(--grad_mint); }
#admin .story-color .colors .story-amber{ background: var(--grad_amber); }

/* User profile */
.avatar-selection { display: flex; gap: 10px; flex-wrap: wrap; }
.avatar-option { position: relative; display: inline-block; text-align: center; cursor: pointer; border-radius: 8px; padding: 5px; transition: 0.3s; border: 2px solid transparent; }
.avatar-option input { display: none; }
.avatar-option img { display: block; width: 80px; /* Adjust size */ height: 80px; border-radius: 50%; object-fit: cover; transition: 0.3s; }
/* Highlight effect when selected */
.avatar-option input:checked + img { border: 3px solid #0073e6; box-shadow: 0 0 10px rgba(0, 115, 230, 0.5); }


.mdeditor{ width: 100%; height: fit-content; display: flex; flex-direction: column; margin: 0; border: solid 1px; }
.mdeditor .toolbar{ display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.mdeditor .toolbar .spacer{ flex: 1; }
.mdeditor.size_large .toolbar{ line-height: 64px; min-height: 64px; padding: 0 12px; border-bottom: solid 1px; }
.mdeditor.size_normal .toolbar{ line-height: 48px; min-height: 48px; padding: 0 12px; border-bottom: solid 1px; }
.mdeditor.size_small .toolbar{ line-height: 32px; min-height: 32px; padding: 2px 12px; border-bottom: solid 1px; }
.mdeditor.size_mini .toolbar{ line-height: 36px; min-height: 36px; padding: 2px 12px; border-bottom: solid 1px; }
.mdeditor.size_large .toolbar .btn{ border: none; background-color: transparent; margin: 0; padding: 0; width: 48px; height: 48px; border-radius: 3px; cursor: pointer; }
.mdeditor.size_normal .toolbar .btn{ border: none; background-color: transparent; margin: 0; padding: 0; width: 36px; height: 36px; border-radius: 3px; cursor: pointer; }
.mdeditor.size_small .toolbar .btn{ border: none; background-color: transparent; margin: 0; padding: 0; width: 26px; height: 26px; border-radius: 2px; cursor: pointer; }
.mdeditor.size_mini .toolbar .btn{ border: solid 1px; background-color: transparent; margin: 0; padding: 0 8px; line-height: 2; height: 26px; border-radius: 3px; cursor: pointer; font-size: 12px; }
.mdeditor.size_large .toolbar .btn .icon{ line-height: 48px; text-align: center; width: 48px; font-size: 1.125rem; }
.mdeditor.size_normal .toolbar .btn .icon{ line-height: 32px; text-align: center; width: 32px; font-size: 0.95rem; }
.mdeditor.size_small .toolbar .btn .icon{ line-height: 26px; text-align: center; width: 26px; font-size: 0.8rem; }
.mdeditor .textarea{ flex: 1; }
.mdeditor .previewarea #preview{ padding: 12px; height: 500px; }
.mdeditor .textarea .editor{ border: none; outline: none; background-color: transparent; width: 100%; height: 100%; line-height: 1.6; padding: 12px; font-size: 0.95rem; font-family: 'Ubuntu Sans Mono', 'Courier New', Courier, monospace; resize: none; }

.mdeditor.light_mode{ background-color: #fbfbfb; border-color: #a0a0a0; }
.mdeditor.light_mode .toolbar{ background-color: #f1f1f1; border-bottom-color: #a0a0a0; }
.mdeditor.light_mode .toolbar .btn{ color: #6d6d6d; }
.mdeditor.light_mode .toolbar .btn:hover, .mdeditor.light_mode.preview-mode .btn-preview{ background-color: #e0e0e0; color: #323232; }
.mdeditor.light_mode.preview-mode .btn-preview{ background-color: #FFF; }

.mdeditor.dark_mode{ background-color: #1c1a1c; border-color: transparent; }
.mdeditor.dark_mode .toolbar{ background-color: #242024; border-bottom-color: transparent; }
.mdeditor.dark_mode .toolbar .btn{ color: #FFF; }
.mdeditor.dark_mode .toolbar .btn:hover, .mdeditor.dark_mode.preview-mode .btn-preview{ background-color: #6b5580; color: #FFF; }
.mdeditor.dark_mode.preview-mode .btn-preview{ background-color: #000; }
.mdeditor.dark_mode .textarea .editor{ color: #FFF; }
.mdeditor.dark_mode .previewarea #preview{ color: #FFF; }

.mdeditor .preview{ display: none; padding: 12px; overflow: auto; }
.mdeditor.preview-mode .textarea{ display: none; }
.mdeditor.preview-mode .preview{ display: block; }

.mdeditor.wp_mode{ background-color: #fff; border-color: #dcdcde; }
.mdeditor.wp_mode .toolbar{ background-color: #f6f7f7; border-bottom-color: #dcdcde; }
.mdeditor.wp_mode .textarea .editor, .mdeditor.wp_mode .preview{ border-top: solid 1px #dcdcde; }
.mdeditor.wp_mode.size_large .toolbar .btn, .mdeditor.wp_mode.size_normal .toolbar .btn, .mdeditor.wp_mode.size_small .toolbar .btn{ color: #595959; }
.mdeditor.wp_mode.size_mini .toolbar .btn{ border-color: #2271b1; color: #2271b1; }
.mdeditor.wp_mode .toolbar .btn:hover, .mdeditor.wp_mode.preview-mode .btn-preview{ background: #f6f7f7; color: #1d2327; box-shadow: 0 0 0 2px #2271b1; outline: 2px solid transparent; }
.mdeditor.wp_mode.preview-mode .btn-preview{ background-color: #FFF; }
.mdeditor.wp_mode.size_mini .toolbar .btn:hover, .mdeditor.wp_mode.size_mini.preview-mode .btn-preview{ background-color: #f0f0f1; border-color: #0a4b78; color: #0a4b78; }

#passwordstrength-wrap, #passwordmatch-wrap{ border: 1px solid var(--dark_light); display: none; padding: 10px; font-size: 14px; position: absolute; width: 320px; top: 30px; right: -340px; background-color: var(--white); }
#passwordstrength-wrap:before, #passwordstrength-wrap:after, #passwordmatch-wrap:before, #passwordmatch-wrap:after{ content: ' '; height: 0; position: absolute; width: 0; border: 10px solid transparent; }
#passwordstrength-wrap:before, #passwordmatch-wrap:before{ border-bottom: 7px solid rgba(0, 0, 0, 0); border-right: 7px solid var(--dark_light); border-top: 7px solid rgba(0, 0, 0, 0); content: ''; display: inline-block; left: -18px; position: absolute; top: 15px; }
#passwordstrength-wrap:after, #passwordmatch-wrap:after{ border-bottom: 6px solid rgba(0, 0, 0, 0); border-right: 6px solid #fff; border-top: 6px solid rgba(0, 0, 0, 0); content: ''; display: inline-block; left: -16px; position: absolute; top: 16px; }
#passwordstrength-wrap ul { list-style-type: none; margin: 0; padding: 15px 0 0; }
#passwordstrength-wrap ul li{ padding: 0 0 6px; }
#passwordstrength-wrap ul li:before { content: "\ea46"; font-family: 'storybook'; font-size: 0.9rem; width: 20px; padding: 0 6px 0 0; text-align: center; box-sizing: content-box; display: inline-block; vertical-align: middle; color: #d8d8d8; }
#passwordstrength-wrap ul li.valid:before { content: "\ea3e"; color: var(--success_dark); }
#passwordstrength-wrap ul li.valid { color: var(--success_dark); }
#passwordmatch-wrap .text-display{ padding: 0; font-weight: 700; }
#passwordmatch-wrap.fail{ font-weight: 700; color: var(--error_dark); border-color: var(--error_dark); }
#passwordmatch-wrap.fail:before{ border-right-color: var(--error_dark); }
#passwordmatch-wrap.success{ font-weight: 700; color: var(--success_dark); border-color: var(--success_dark); }
#passwordmatch-wrap.success:before{ border-right-color: var(--success_dark); }