/*
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&family=Roboto:wght@400;500;700&display=swap');
*/

@tailwind base;
@tailwind components;

:root {
    --transition-time: 200ms;
    color-scheme: light dark; /* both supported */
    --main-bg-color: rgba(243,244,246,1);
    --transition-bg-color: rgba(218,241,250,1);
    --footer-bg-color: rgba(218,241,250,0);
    --dark-main-bg-color: rgba(17,24,39,1);
    --dark-transition-bg-color: rgba(8,12,23,1);
    --dark-footer-bg-color: rgba(8,12,23,0);
}

.debug {
    @apply px-2 py-1 bg-black text-white font-mono text-sm border border-white hidden;
}

.show-debug .debug {
    @apply block;
}

/* FOR BOTH SCREEN AND PRINT */

body {
    @apply text-gray-600 bg-gray-100 antialiased text-base overflow-y-scroll;
}

@media screen {
    .main-bg {
        background-image: linear-gradient(180deg, var(--main-bg-color) 75%, var(--transition-bg-color));
    }

    .transition-bg {
        background-image: linear-gradient(180deg, var(--transition-bg-color) 50%, var(--footer-bg-color) 78%);
    }

    .footer-bg {
        background-image: linear-gradient(180deg, var(--transition-bg-color), var(--footer-bg-color) 65%);
    }


    .dark .main-bg {
        background-image: linear-gradient(180deg, var(--dark-main-bg-color) 75%, var(--dark-transition-bg-color));
    }

    .dark .transition-bg {
        background-image: linear-gradient(180deg, var(--dark-main-bg-color) 50%, var(--dark-footer-bg-color) 78%);
    }

    .dark .footer-bg {
        background-image: linear-gradient(180deg, var(--dark-transition-bg-color), var(--dark-footer-bg-color) 65%);
    }
}

.can-hover a:hover, .can-hover .link:hover, .can-hover .cp:hover {
        @apply cursor-pointer;
}

.can-hover .sub-menu a {
    @apply border-b border-transparent;
}

.can-hover .sub-menu:hover a {
    @apply border-primary;
}

.can-hover .dark-toggle:hover {
    @apply bg-white text-gray-900;
}

.dark.can-hover .dark-toggle:hover {
    @apply bg-gray-700 text-gray-100;
}

.can-hover .livestream-container:hover {
    @apply bg-opacity-100;
}

.can-hover .photo-viewer-icon:hover {
    @apply scale-105 shadow-lg;
}

.can-hover .photo-viewer-icon:hover, .can-hover .modal-close-icon:hover, .can-hover .flip-icon:hover {
    @apply text-gray-600 cursor-pointer;
}

.dark.can-hover .photo-viewer-icon:hover, .dark.can-hover .modal-close-icon:hover, .dark.can-hover .flip-icon:hover {
    @apply text-white bg-gray-800;
}

.can-hover .staff-profile-list-grid-link:hover {
    @apply border-primary bg-white bg-opacity-50 shadow;
}

.dark.can-hover .staff-profile-list-grid-link:hover {
    @apply bg-black;
}

.can-hover .inquiry-livestream-list:hover {
    @apply text-gray-800;
}

.dark.can-hover .inquiry-livestream-list:hover {
    @apply text-gray-100;
}

.can-hover .add-content-button:hover {
    @apply bg-opacity-100 border-primary;
}

.dark.can-hover .add-content-button:hover {
    @apply bg-black border-gray-700 text-primary-dark-hover;
}

.can-hover .page-list:hover {
    @apply bg-white;
}

.dark.can-hover .page-list:hover {
    @apply bg-black;
}

.can-hover .page-list-content-container:hover {
    @apply shadow border-white border-opacity-50;
}

.can-hover .page-list-content-container:hover .page-list-content {
    @apply scale-50;
}

.can-hover .autocomplete-result:hover {
    @apply bg-white text-gray-900;
}

.dark.can-hover .autocomplete-result:hover {
    @apply bg-gray-700 text-gray-100;
}

.can-hover .course-link:hover {
    @apply bg-white bg-opacity-50 shadow;
}

.dark.can-hover .course-link:hover {
    @apply bg-black bg-opacity-40 shadow;
}

.can-hover .hover-wash:hover {
    background-size: 120% 120%;
}

.can-hover .remove-icon:hover {
    @apply bg-white border-gray-300;
}

.can-hover .remove:hover {
    @apply bg-white text-red-600;
}

.dark.can-hover .remove:hover {
    @apply bg-black text-red-500;
} 

.can-hover input::placeholder:hover, .can-hover .placeholder:hover {
    @apply opacity-100 italic;
}

.can-hover input[type=range]:hover {
    @apply border-transparent;
}

.can-hover button:hover:not(.menu):not([class*="vc-"]), .can-hover .button:hover, .can-hover .button.hover {
    @apply bg-primary-hover text-white shadow;
    border-top: 1px solid rgb(229, 64, 70);
    border-bottom: 1px solid rgb(191, 36, 42);
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
}

.dark.can-hover button:hover:not(.menu):not([class*="vc-"]), .dark.can-hover .button:hover, .dark.can-hover .button.hover {
    @apply bg-gray-500;
    border-top: 1px solid rgb(75, 85, 99);
    border-bottom: 1px solid rgb(0, 0, 5);
}

.can-hover .editing-button:hover {
    @apply bg-white text-green-600 cursor-pointer;
}

.dark.can-hover .editing-button:hover {
    @apply bg-gray-700 text-green-200;
}

.can-hover button:disabled:hover {
    @apply grayscale text-gray-500 bg-opacity-50;
}

.can-hover .button-secondary:hover {
    @apply text-gray-600;
}

.dark.can-hover .button-secondary:hover {
    @apply text-gray-100;
}

.can-hover .select-button:hover {
    @apply bg-opacity-100 text-gray-800 border-gray-400;
}

.dark.can-hover .select-button:hover {
    @apply bg-gray-900 text-gray-100 border-gray-600;
}

.can-hover .select-button-muted:hover {
    @apply bg-gray-100 border-gray-300 text-gray-600
}

.dark.can-hover .select-button-muted:hover {
    @apply bg-gray-700 text-gray-400 border-gray-600;
}

.can-hover .caret:hover {
    @apply text-gray-900;
}

.dark.can-hover .caret:hover {
    @apply text-gray-100;
}

.can-hover a.breadcrumb:hover {
    @apply text-primary;
}

.dark.can-hover a.breadcrumb:hover {
    @apply text-white;
}

.can-hover .breadcrumb-link:hover {
    @apply text-primary;
}
.can-hover .menu-sub-page-link:hover {
    @apply border-primary;
}

.can-hover .menubar-button:hover {
    @apply bg-white;
}

.dark.can-hover .menubar-button:hover {
    @apply bg-gray-700;
}

.can-hover .menubar-button:hover .add-icon {
    @apply text-green-500;
}

.can-hover .menubar-button:hover .minus-icon {
    @apply text-primary;
}

.can-hover .photo-viewer-icon, .can-hover .modal-close-icon, .can-hover  .flip-icon {
    @apply cursor-pointer;
}

.can-hover .add-content-button {
    @apply cursor-pointer;
}

.can-hover .remove-icon {
    @apply cursor-pointer;
}

.can-hover .form div.input-label label {
    @apply cursor-pointer;
}

.can-hover button:not(.menu):not([class*="vc-"]), .can-hover .button, .can-hover .button-active, .can-hover .button-secondary, .can-hover .button-icon, .can-hover .button-hint {
    @apply cursor-pointer;
}

.can-hover .select-button, .can-hover .select-button-muted {
    @apply cursor-pointer;
}

.can-hover .theme-button-icon {
    @apply cursor-pointer;
}

.can-hover .menubar-button, .can-hover .menubar_table_button {
    @apply cursor-pointer;
}

.can-hover .timetable-block:hover:not(.timetable-block-focused) {
    @apply translate-x-1 shadow-lg z-3 scale-[1.01];
}

.can-hover .timetable-block.timetable-block-focused:hover {
    @apply -translate-x-1 shadow-lg z-3 scale-[0.99];
}

.can-hover .video-text-link:hover {
    @apply border-b-2 border-primary translate-x-1;
}

.can-hover .video-text-links:hover {
    @apply opacity-80 cursor-pointer;
}

.can-hover a.choose-link:hover {
    @apply text-primary;
}

.page-link-photo-container {
    @apply relative w-full h-48 overflow-hidden;
}

@media (min-width: 768px) {
    .page-link-photo-container {
        @apply skew-x-6 -mr-4 pr-4 border-r-4 border-white border-opacity-70;
    }

    .page-link-photo {
        @apply right-[-8px] scale-105 -skew-x-6 -mt-[5px];
    }
}

.page-link-parent .page-link-parent-photo {
    @apply opacity-50;
}

.can-hover .page-link-parent:hover .page-link-parent-photo {
    @apply opacity-80;
}

.page-link-parent .page-link-line {
    @apply scale-x-0;
}

.can-hover .page-link-parent:hover .page-link-line {
    @apply scale-x-100;
}

@media (max-width: 768px) {
    .home-link {
        @apply py-1 px-2 whitespace-nowrap text-center;
    }
}

@media (min-width: 768px) {
    .home-link {
        @apply py-2 px-4 border-b-2 border-b-transparent whitespace-nowrap;
    }
}

.timetable-block {
    @apply translate-x-0 shadow-none overflow-visible z-2 scale-100;
}

.footer-bg-image img {
    mask-image: linear-gradient(to bottom, transparent 0%, black 25%);
}

.bg-color {
    @apply bg-gray-100;
}

.dark .bg-color {
    @apply bg-gray-900;
}

.bg-highlight {
    @apply bg-white;
}

.dark .bg-highlight {
    @apply bg-black;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4, .header {
    @apply font-light font-header;
}

h1, h2, h3, h4 {
    @apply p-0 m-0;
}

h1, .h1 {
    @apply text-3xl;
}

h2, .h2 {
    @apply text-2xl mt-4;
}

h3, .h3 {
    @apply text-xl mt-4;
}

.content-element-transition {
    @apply opacity-0;
}

@media (max-width: 768px) {
    .publication-thumbnail h3 {
        @apply mt-0 ml-2;
    }

    .publication-thumbnail p {
        @apply pt-2;
    }
}

h4, .h4 {
    @apply text-lg mt-2;
}

h2:first-child, .h2:first-child, h3:first-child, .h3:first-child {
    @apply mt-0;
}

hr {
    @apply border-t-4 border-gray-300 my-4;
}

ul, ol {
    @apply ml-8 my-2;
}

ul {
    @apply list-disc;
}

ol {
    @apply list-decimal;
}

li p {
    @apply pt-1;
}

p {
    @apply px-0 m-0 pt-4;
}

.video-text-body p {
    @apply pt-0 font-medium;
}

.video-text-body a {
    @apply text-primary-dark font-semibold;
}

@media (max-width: 768px) {
    .video-text-body p {
        @apply text-sm;
    }

    .video-text-body p.tag-line {
        @apply text-base leading-tight;
    }
}

p:empty {
    @apply p-0;
}

p.indent {
    @apply px-8;
}

p.tag-line {
    @apply text-2xl font-bold opacity-80;
}

p.tag-line:first-child {
    @apply pt-0;
}

.text-block-dash {
    @apply h-1 w-16 text-gray-400 mt-4 mb-2;
}

.quote-dash {
    @apply h-1 w-16 text-primary mb-4;
}

.dark .text-block-dash {
    @apply text-gray-500;
}

.photo {
    @apply absolute w-full h-full overflow-hidden;
}

.photo img {
    @apply w-full h-full;
}

.photo.fill img {
    @apply object-cover;
}

.photo.fit img {
    @apply object-contain;
}

.ProseMirror img, .body img:not(.text-block-dash) {
    max-height: 400px;
    @apply border-2 border-transparent rounded text-center mx-auto block w-full;
}

img.inline-image[src*="brentwood_logo"] {
    @apply max-w-[400px];
}

/* STYLES FOR JUST THE SCREEN */

@media screen {

.dark {
    @apply bg-black;
}

.dark div#main, .dark .modal-content {
    @apply text-gray-300 bg-gray-900;
}

.text-color {
    @apply text-gray-600;
}

.dark .text-color {
    @apply text-gray-300;
}

.page-bg {
    @apply bg-gray-100 bg-opacity-90 border-gray-300;
}

.dark .page-bg {
    @apply bg-gray-800 border-gray-700;
}

.instance-bg {
    @apply bg-gray-100 border-gray-300;
}

.dark .instance-bg {
    @apply bg-gray-800 border-gray-700;
}

.feedback-container, .not-found-container {
    @apply bg-white;
}

.dark .feedback-container, .dark .not-found-container {
    @apply bg-gray-800;
}

.modal-content {
    @apply bg-gray-100;
}

.dark .modal-content {
    @apply bg-gray-900;
}

.header-container, .footer-menu-container {
    @apply bg-white bg-opacity-90;
}

.dark .header-container, .dark .footer-menu-container {
    @apply bg-black;
}

.dark .footer-info {
    @apply bg-black bg-opacity-50 py-4;
}

.dark .footer-links {
    @apply bg-black bg-opacity-75 py-4;
}

a.choose-link {
    @apply text-gray-600;
}

.dark a.choose-link {
    @apply text-gray-300;
}

@media (max-width: 768px) {

    .footer-info {
        @apply py-4;
    }

}

.menu-container {
    @apply bg-gray-100 border-gray-200;
}

.dark .menu-container {
    @apply bg-gray-900 border-gray-800;
}

.top-menu-container {
    @apply border-gray-200;
}

.dark .top-menu-container {
    @apply border-gray-800;
}

.menu-sub-pages-container {
    @apply bg-white shadow;
}

.dark .menu-sub-pages-container {
    @apply bg-black;
}

.modules-menu {
    @apply bg-gray-200;
}

.dark .modules-menu {
    @apply bg-gray-800;
}

.apply-button {
    @apply font-bold py-1 px-4;
}

@media (min-width: 768px) {
    a.apply-button {
        @apply bg-primary text-white text-lg px-8;
    }

    .dark a.apply-button {
        @apply bg-primary text-white;
    }
}

.menu-item {
}

.menu-item a, .menu-item button {
    @apply block px-2 py-1;
}

.top-menu-item {
    @apply whitespace-nowrap;
}


@media (min-width: 768px) {

    .top-menu-item {
        @apply grid place-items-center text-lg;
    }

    .menu-item a {
        @apply py-1 px-4;
    }

    .top-menu-item {
        @apply transition-transform duration-200 translate-y-0;
    }

    .top-menu-item.menu-hover-active {
        /* @apply translate-y-[2px]; */
    }

    .menu-hover-active {
        @apply shadow-md;
    }

}

.dark #menu a {
    @apply text-gray-300;
}

.menu-item-active, .sub-menu-item-active {
    @apply font-semibold bg-white bg-opacity-60;
}

.dark .menu-item-active, .dark .sub-menu-item-active {
    @apply bg-black;
}

.menu-hover-active {
    @apply bg-white;
}

.dark .menu-hover-active {
    @apply bg-black;
}

.dark #menu .menu-item-active a {
    @apply text-white;
}

.dark .sub-menu {
}

.sub-menu-container {
    @apply bg-white bg-opacity-90;
}

.dark .sub-menu-container {
    @apply bg-gray-900;
}

.sub-page-active {
}

.dark .sub-page-active {
}

.youtube-container {
    transition: padding calc(var(--transition-time) * 2), margin calc(var(--transition-time) * 2);
}

.youtube-border-bottom {
    @apply border-white;
}

.dark .youtube-border-bottom {
    @apply border-gray-700;
}

.youtube-form-input {
    @apply bg-gray-200;
}

.dark .youtube-form-input {
    @apply bg-gray-800 bg-opacity-50;
}

.video-player-text {
    @apply text-white;
}

.video-text-form:nth-child(even) .video-text-header {
    @apply bg-white;
}

.video-text-form:nth-child(odd) .video-text-header {
    @apply bg-gray-200;
}

.dark .video-text-form:nth-child(even) .video-text-header {
    @apply bg-gray-900;
}

.dark .video-text-form:nth-child(odd) .video-text-header {
    @apply bg-gray-800;
}

.publication-nav-container {
    @apply bg-white;
}

.dark .publication-nav-container {
    @apply bg-black;
}

.text-block-full-width {
    @apply bg-white;
}

.dark .text-block-full-width {
    @apply bg-black bg-opacity-90;
}

.publication-list-header, .portal-header, .number-input {
    @apply bg-white bg-opacity-50;
}

.dark .publication-list-header, .dark .portal-header, .dark .number-input {
    @apply bg-black bg-opacity-90;
}

.photo-block-header {
    @apply bg-white bg-opacity-90;
}

.dark .photo-block-header {
    @apply bg-black;
}

.number-input-container {
    @apply border-gray-300;
}

.dark .number-input-container {
    @apply border-gray-800;
}

.publication-search-button, .calendar-search-button {
    @apply bg-white border-gray-200 text-gray-800
}

.dark .publication-search-button, .dark .calendar-search-button {
    @apply bg-gray-800 border-gray-700;
}

.publication-search, .calendar-search {
    
}

.dark .calendar-search, .dark .publication-search {

}

.page-tree-search {
    @apply bg-white rounded border border-gray-300;
}

.dark .page-tree-search {
    @apply bg-black border-gray-800;
}

.chat-message {
    @apply bg-white text-gray-600;
}

.dark .chat-message {
    @apply bg-black text-gray-300;
}

.chat-message-whisper {
    @apply bg-blue-100 text-gray-800;
}

.dark .chat-message-whisper {
    @apply bg-blue-900 text-gray-100;
}

.livestream-list-tags, .content-element-status {
    @apply bg-gray-200
}

.dark .livestream-list-tags, .dark .content-element-status {
    @apply bg-gray-800;
}

.text-color {
    @apply text-gray-600;
}

.dark .text-color {
    @apply text-gray-300;
}

.border-color {
    @apply border-gray-300;
}

.dark .border-color {
    @apply border-gray-700;
}

.content-element-draft {
    @apply bg-yellow-100 border-yellow-300;
}

.dark .content-element-draft {
    @apply border-gray-600 bg-opacity-20 bg-yellow-300;
}

.content-element-publishing-at {
    @apply bg-green-500 text-white;
}

.dark .content-element-publishing-at {
    @apply bg-opacity-50;
}

.content-element-permissions, .page-permissions, .content-element-warning {
    @apply bg-white;
}

.dark .content-element-permissions, .dark .page-permissions, .dark .content-element-warning {
    @apply bg-black;
}

.content-element-view-permissions {
    @apply bg-orange-200;
}

.dark .content-element-view-permissions {
    @apply bg-orange-700 bg-opacity-50;
}

.content-element-other-pages {
    @apply bg-fuchsia-200;
}

.dark .content-element-other-pages {
    @apply bg-fuchsia-700 bg-opacity-50;
}

.pagination-loading {
    @apply bg-white;
}

.dark .pagination-loading {
    @apply bg-black;
}

.content-element-warning {
    @apply border-gray-300;
}

.dark .content-element-warning {
    @apply border-gray-700;
}

.livestream-list-content {
    @apply bg-gray-100;
}

.dark .livestream-list-content {
    @apply bg-gray-900;
}

.livestream-container {
    @apply bg-white border-gray-300 bg-opacity-50;
}

.dark .livestream-container {
    @apply bg-gray-800 bg-opacity-50 border-gray-700;
}

.photo-border {
    @apply h-1 bg-gray-200 opacity-50 w-full absolute bottom-0 z-5;
}

.dark .photo-border {
    @apply bg-gray-600;
}

.photo-viewer-container, .photo-viewer-bg {
    @apply bg-white bg-opacity-90;
}

.dark .photo-viewer-container, .dark .photo-viewer-bg {
    @apply bg-black;
}

.photo-viewer-icon, .modal-close-icon, .flip-icon {
    @apply bg-gray-100 text-gray-700 w-8 h-8 flex items-center justify-center rounded-full;
}

.dark .photo-viewer-icon, .dark .modal-close-icon, .dark .flip-icon {
    @apply bg-gray-900 text-gray-200;
}

.add-content-icon {
    @apply bg-gray-100 text-gray-700;
}

.dark .add-content-icon {
    @apply bg-gray-900 text-gray-200;
}

.photo-preview {
    @apply bg-white bg-opacity-50;
}

.dark .photo-preview {
    @apply bg-black bg-opacity-50;
}

.photo-preview-text {
    @apply bg-gray-100;
}

.dark .photo-preview-text {
    @apply bg-gray-900;
}

.quote-container {
    @apply bg-white;
}

.dark .quote-container {
    @apply bg-black;
}

.quote-text {
    @apply text-gray-700 max-w-prose mx-auto;
}

.dark .quote-text {
    @apply text-gray-100;
}

.personalized-livestream-container {
    @apply bg-white;
}

.dark .personalized-livestream-container {
    @apply bg-black;
}

.side-menu-container {
    @apply bg-gray-200;
}

.dark .side-menu-container {
    @apply bg-gray-900;
}

.staff-profile-list-photo {
    @apply bg-gray-200;
}

.dark .staff-profile-list-photo {
    @apply bg-gray-800;
}

.staff-profile-list-grid-link {
    @apply border-gray-300;
}

.dark .staff-profile-list-grid-link {
    @apply border-gray-700;
}

.media-loader {
    @apply bg-gray-200;
}

.dark .media-loader {
    @apply bg-gray-800;
}

/* TAGS */

.tag {
    @apply bg-white border border-gray-300 rounded inline-flex items-center mr-4;
    min-height: 32px;
}

.tag:last-child {
    @apply mr-0;
}


.tag-name {
    @apply flex-1 px-2 whitespace-nowrap;
}

.dark .tag {
    @apply bg-black border border-gray-800;
}

.tag-container {
    @apply bg-white border-gray-300;
}

.dark .tag-container {
    @apply bg-black border-gray-800;
}

/* LOGIN */

.login-main-container {
    @apply bg-white;
}

.dark .login-main-container {
    @apply bg-gray-800;
}

.login-side-container {
    @apply bg-gray-200;
}

.dark .login-side-container {
    @apply bg-gray-900;
}

.inquiry-form-container {
    @apply bg-white;
}

.dark .inquiry-form-container {
    @apply bg-black bg-opacity-90;
}

.inquiry-container {
    @apply bg-gray-100 border-gray-200;
}

.dark .inquiry-container {
    @apply bg-gray-900 border-gray-800;
}

.inquiry-livestream-list, .publication-layout {
    @apply bg-white;
}

.inquiry-livestream-list:nth-child(odd), .publication-layout:nth-child(odd) {
    @apply bg-gray-200;
}

.inquiry-livestream-selected {
    @apply bg-green-100 text-gray-800;
}

.dark .inquiry-livestream-list, .dark .publication-layout {
    @apply bg-black bg-opacity-50;
}

.dark .inquiry-livestream-list:nth-child(odd), .dark .publication-layout:nth-child(odd) {
    @apply bg-black bg-opacity-100;
}

.dark .inquiry-livestream-selected {
    @apply bg-green-700 text-gray-100;
}

.changelog-container {
    @apply bg-gray-100 shadow border border-gray-300;
}

.dark .changelog-container {
    @apply bg-gray-800 border-gray-700;
}

.changelog {
    @apply bg-white border-b border-gray-300 bg-opacity-50;
}

.changelog:nth-child(odd) {
    @apply bg-gray-200 bg-opacity-50;
}

.changelog ins {
    @apply text-green-600 font-semibold no-underline bg-green-50;
}

.changelog del {
    @apply text-red-600 font-semibold line-through bg-red-50;
}

.avatar-bg {
    @apply bg-white;
}

.dark .avatar-bg {
    @apply bg-black;
}

.photo-upload-bg {
    @apply bg-gray-200;
}

.dark .photo-upload-bg {
    @apply bg-black bg-opacity-75 border-gray-700;
}

.permissions-list {
    @apply bg-white border-gray-300;
}

.dark .permissions-list {
    @apply bg-black bg-opacity-90 border-gray-800;
}

.permission-list-item {
    @apply bg-gray-100 border-gray-300;
}

.dark .permission-list-item {
    @apply bg-gray-800 border-gray-700;
}

.search-result {
    @apply bg-white;
}

.dark .search-result {
    @apply bg-black bg-opacity-90;
}

.search-result p {
    @apply mt-1 pt-0;
}

.search-bar-container {
    @apply bg-gray-100;
}

.dark .search-bar-container {
    @apply bg-black bg-opacity-90;
}

.search-bar-close-icon {
    @apply bg-gray-200 border-gray-300;
}

.dark .search-bar-close-icon {
    @apply bg-gray-800 border-gray-700;
}

.search-bar-input {
    @apply bg-white border-gray-300;
}

.search-bar-input:focus {
    @apply border-gray-400;
}

.dark .search-bar-input {
    @apply bg-gray-900 bg-opacity-75 border-gray-800;
}

.dark .search-bar-input:focus {
    @apply border-gray-700;
}

.calendar-header {
    @apply bg-white bg-opacity-50;
}

.dark .calendar-header {
    @apply bg-black;
}

.calendar-event {
    @apply bg-white border-gray-400 bg-opacity-50;
}

.calendar-event:nth-child(odd) {
    @apply bg-gray-200 bg-opacity-50;
}

.dark .calendar-event {
    @apply bg-black bg-opacity-90 border-gray-700;
}

.dark .calendar-event:nth-child(odd) {
    @apply bg-black bg-opacity-25;
}

.calendar-dash {
    @apply border-gray-400;
}

.dark .calendar-dash {
    @apply border-gray-700;
}

.calendar-description p:first-child, .calendar-description p:empty {
    @apply pt-0;
}

.livestream-register-modal {
    @apply bg-gray-200 border-gray-200;
}

.dark .livestream-register-modal {
    @apply bg-gray-800 border-gray-700;
}

.publication-thumbnail, .publication-preview, .publication-feature {
    @apply bg-white text-gray-700 border-gray-300;
}

.dark .publication-thumbnail, .dark .publication-preview, .dark .publication-feature {
    @apply bg-black bg-opacity-90 text-gray-200 border-gray-700;
}

.file-upload-container {
    @apply bg-gray-100;
}

.dark .file-upload-container {
    @apply bg-gray-900;
}

.file-upload-item {
    @apply bg-white text-gray-800;
}

.dark .file-upload-item {
    @apply bg-black text-gray-200;
}

.paginator-arrow-disabled {
    @apply text-gray-400 bg-gray-200;
}

.dark .paginator-arrow-disabled {
    @apply text-gray-600 bg-gray-800;
}

.pagintor-link {
    @apply bg-white;
}

.dark .pagintor-link {
    @apply bg-gray-900;
}

.pagintor-dots {
    @apply bg-gray-100;
}

.pagintor-dots {
    @apply bg-gray-900 bg-opacity-50;
}

.email-confirmer-container {
    @apply bg-white;
}

.dark .email-confirmer-container {
    @apply bg-black;
}

.loading-bar-bg {
    @apply bg-white;
}

.dark .loading-bar-bg {
    @apply bg-black;
}

.page-editor-container {
    @apply bg-gray-200;
}

.dark .page-editor-container {
    @apply bg-gray-800;
}

.page-echos {
    @apply bg-yellow-200;
}

.dark .page-echos {
    @apply bg-primary font-medium;
}

.meta-title-container {
    @apply bg-gray-100;
}

.dark .meta-title-container {
    @apply bg-gray-900;
}

.page-theme-picker {
    @apply bg-gray-100 bg-opacity-50 border-gray-300;
}

.dark .page-theme-picker {
    @apply bg-gray-900 bg-opacity-50 border-gray-700;
}

.page-versions {
    @apply bg-gray-200;
}

.dark .page-versions {
    @apply bg-gray-800;
}

.page-version {
    @apply bg-gray-100;
}

.page-version.page-version-active:nth-child(odd), .page-version.page-version-active:nth-child(even) {
    @apply bg-yellow-100;
}

.dark .page-version.page-version-active:nth-child(odd), .page-version.page-version-active:nth-child(even) {
    @apply bg-primary;
}

.dark .page-version {
    @apply bg-gray-900;
}

.page-version:nth-child(odd) {
    @apply bg-white;
}

.dark .page-version:nth-child(odd) {
    @apply bg-black;
}

.page-tags {
    @apply bg-gray-300;
}

.dark .page-tags {
    @apply bg-gray-800;
}

.link-menu {
    @apply bg-gray-200 text-gray-700;
}

.dark .link-menu {
    @apply bg-gray-800 text-gray-300;
}

.url-menu {
    @apply bg-white border-gray-300;
}

.dark .url-menu {
    @apply bg-black border-gray-700;
}

.photo-controls-container {
    @apply bg-gray-400 grid place-items-center;
    grid-template-columns: repeat(auto-fill, 24px);
}

.dark .photo-controls-container {
    @apply bg-gray-700;
}

.add-content-container {
    @apply bg-gray-200;
}

.dark .add-content-container {
    @apply bg-gray-900 bg-opacity-90;
}

.add-content-button {
    @apply flex items-center justify-center h-8 px-1 m-1 bg-white border border-gray-300 rounded text-primary bg-opacity-70;
}

.dark .add-content-button {
    @apply bg-black border-gray-800 text-primary-dark;
}


.select-buttons-container {
    @apply bg-white border-gray-300;
}

.dark .select-buttons-container {
    @apply bg-black bg-opacity-75 border-gray-800;
}

.titles-dash {
    @apply bg-gray-400;
}

.dark .titles-dash {
    @apply bg-gray-700;
}

/*
.expander-expanded {
    @apply bg-white;
}

.dark .expander-expanded {
    @apply bg-black bg-opacity-75;
}
*/

.page-list-content-container {
    @apply transition-[padding-bottom] pb-25p;
}

.page-list-content {
    @apply transition-transform scale-[0.45];
}

.page-list-content-info {
    @apply absolute right-0 top-0 z-4 text-xs bg-highlight border border-color rounded-bl shadow px-1;
}

.page-list-active {
    @apply font-semibold bg-white;
}

.dark .page-list-active {
    @apply bg-gray-800;
}

.page-list-active-bg {
    @apply bg-white;
}

.dark .page-list-active-bg {
    @apply bg-black;
}

.page-list-has-draft {
    @apply bg-yellow-100;
}

.dark .page-list-has-draft {
    @apply bg-yellow-300 bg-opacity-20;
}

.page-list-has-draft.page-list-active {
    @apply bg-white;
}

.dark .page-list-has-draft.page-list-active {
    @apply bg-yellow-400 bg-opacity-40;
}

.page-list {
    @apply border-gray-300;
}

.dark .page-list {
    @apply border-gray-700;
}

.page-list.page-list-insert {
    @apply border-gray-900;
}

.dark .page-list.page-list-insert {
    @apply border-gray-100;
}

.page-list-content-element-type {
    @apply bg-gray-100;
}

.dark .page-list-content-element-type {
    @apply bg-gray-900;
}

.page-list-hide {
    @apply text-gray-400;
}

.page-list-unpublished {
    @apply text-gray-500 italic;
}

.page-list-unlisted {
}

.page-list-normal {
    @apply text-gray-700;
}

.dark .page-list-hide {
    @apply text-gray-400;
}

.dark .page-list-unpublished {
    @apply text-gray-400 italic;
}

.dark .page-list-unlisted {
}

.dark .page-list-normal {
    @apply text-gray-200;
}

.form-error {
    @apply bg-gray-200 bg-opacity-50;
}

.dark .form-error {
    @apply bg-gray-800 bg-opacity-50;
}

.autocomplete-result {
    @apply bg-gray-100 text-gray-700;
}

.autocomplete-result:nth-child(odd) {
    @apply bg-gray-200;
}

.dark .autocomplete-result {
    @apply bg-gray-900 text-gray-200;
}

.dark .autocomplete-result:nth-child(odd) {
    @apply bg-gray-800;
}

.autocomplete-result-active {
    @apply bg-white text-gray-900;
}

.dark .autocomplete-result-active {
    @apply bg-gray-700 text-gray-100;
}

.autocomplete-default-model {
    @apply bg-gray-100;
}

.dark .autocomplete-default-model {
    @apply bg-gray-900;
}

[v-cloak] {
  display: none !important;
}

section {
    @apply p-4;
}

/*
.red-line {
    animation: red-line 1000ms linear;
    transform-origin: top;
}

.red-line-footer {
    animation: red-line 1000ms ease-out;
    transform-origin: top;
}

@keyframes red-line {
    0% {
        @apply opacity-0;
    }
    100%   {
        @apply opacity-100;
    }
}

@keyframes red-line-footer {
    0% {
        transform: scaleY(0);
    }
    50% {
        transform: scaleY(0);
    }
    100%   {
        transform: scaleY(1);
    }
}
*/


a, .link {
    @apply text-primary;
}

.dark a, .dark .link {
    @apply text-primary-dark;
}

.header-text {
    @apply text-gray-600;
}

.dark .header-text {
    @apply text-gray-300;
}

.content-text {
}

p a.button {
    @apply mx-2;
}

p a.button.float-right {
    @apply ml-4;
}

@media (max-width: 768px) {
    p img:first-child {
        @apply pt-0;
    }
}

table {
    @apply w-full p-4 my-4 table-fixed;
}

tr {
    min-height: 32px;
}

tr:nth-child(even) {
}

tr:nth-child(odd) {
}

tr:last-child td {
    @apply border-b-0;
}

td {
    @apply border-b border-r border-color;
}

td p {
    @apply px-2 py-1;
}

td:last-child {
    @apply border-r-0;
}

iframe {
    @apply absolute w-full h-full;
}

.BBFormTextbox:focus, .BBFormTextArea:focus {
    color: #000 !important;
}

.row:nth-child(even) {
}

.row:nth-child(odd) {
}

.hover-wash {
    background: radial-gradient(circle, rgba(25,25,25,0), rgba(54,128,187,0) 75%, rgba(54,128,187,0.2));
    background-size: 100% 100%;
    background-position: 50% 50%;
    transition: background-size 0.5s;
}

.form-content-element {
    @apply border-gray-400 border-dashed;
}

.dark .form-content-element {
    @apply border-gray-700;
}

/*
.form-content-element:not(.content-elements-enter-active, .content-elements-leave-active) {
    min-height: 325px;
}
*/

.remove-icon {
    @apply text-xl text-red-600 border border-transparent h-6 w-6 flex items-center justify-center;
}

.remove-gray {
    @apply bg-gray-100;
}

.dark .remove-gray {
    @apply bg-gray-900;
}

.input-icon {
    @apply absolute flex items-center justify-center px-2 py-2 text-gray-400;
}

div.date-picker-input input, div.time-picker-input input {
    @apply pl-8;
}

input, .editor {
    @apply bg-transparent border border-transparent px-2 -mx-2 outline-none w-full;
}

input.read-only, input.read-only:disabled {
    @apply text-gray-600;
}

.dark input.read-only {
    @apply text-gray-300;
}

textarea {
    @apply bg-white;
}

.dark textarea {
    @apply bg-black;
}

.form .editor {
    @apply px-0 mx-0;
}

.locked {
    @apply text-gray-500;
}

.locked::before {
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f023";
    @apply absolute text-gray-500 h-full flex items-center bg-gray-200 border-r border-gray-300 px-1;
    left: -32px;
}

.inline-form input {
    @apply w-auto;
}

input:focus {
    @apply outline-none;
}

.form input:focus, input:focus, .editor:focus {
    @apply border border-opacity-100 bg-white bg-opacity-50 rounded shadow-inner;
}

.photo-titles input:focus {
    @apply bg-opacity-0;
}

.photo-titles .photo-link input:focus {
    @apply bg-opacity-100;
}

.dark .form input:focus, .dark input:focus, .dark .editor:focus {
    @apply bg-gray-800;
}

input::placeholder, .placeholder {
    @apply opacity-100 italic;
}

input[type=range]::-moz-range-track, input[type=range]::-webkit-slider-runnable-track {
    background: rgba(255,255,255,0.75);
}

input[type=range] {
    @apply outline-none;
}

input[type=number] {
    @apply w-16 border border-gray-300 bg-white px-2 py-1 rounded mx-0;
}

.dark input[type=number] {
    @apply bg-gray-900 border-gray-800;
}

input.hex, input[type=search] {
    @apply mx-0;
}

input[type=date], input[type=time] {
    @apply mx-0 px-1;
}

input[type=date]:focus, input[type=time]:focus {
    @apply border border-gray-300 rounded;
}

.checkbox-unchecked {
    @apply text-white;
}

.dark .checkbox-unchecked {
    @apply text-black;
}

.form div.input-label {
    @apply my-1;
}

.form div.input, div.fake-input {
    @apply mb-4;
}

.form input, div.fake-input { 
    @apply border border-gray-400 border-opacity-50 bg-white py-1 w-full rounded mx-0;
}

.form .ProseMirror {
    @apply border border-gray-300 bg-white rounded px-2;
}

.dark .form input, .dark div.fake-input {
    @apply bg-black border-gray-800;
}

.form input:not(.icon), div.fake-input {
    @apply px-4;
}

.form input.icon { 
    @apply pl-8;
}

.form input.remover {
    @apply pl-4 pr-8;
}

.form-label {
    @apply text-sm text-gray-500 py-1 px-4 bg-gray-200 bg-opacity-50;
}

.dark .form-label {
    @apply text-gray-400 bg-gray-800 bg-opacity-50;
}

.content-number-input {
    @apply bg-gray-800 absolute z-3 text-3xl max-w-20 rounded-full font-bold grid place-items-center top-0 bg-opacity-25;
}

.content-number {
    @apply absolute z-50 text-white font-bold font-header text-xl grid place-items-center pointer-events-none bg-zinc-700 bg-opacity-80 px-2 py-1 text-shadow min-w-8 m-1;
}

.randomize-border {
    @apply border-gray-200 border-4;
}

/*
@media (min-width: 768px) {
    .form {
        min-width: 600px;
    }
}
*/

.dark-toggle {
}

.dark .dark-toggle {
}

button:not(.menu):not([class*="vc-"]), .button {
    @apply inline-flex bg-primary rounded text-gray-100 font-medium px-4 py-1 justify-center;
    border-top: 1px solid rgb(217, 65, 70);
    border-bottom: 1px solid rgb(179, 34, 39);
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
}

.dark button:not(.menu):not([class*="vc-"]), .dark .button {
    @apply bg-gray-600 text-white;
    border-top: 1px solid rgb(55, 65, 81);
    border-bottom: 1px solid rgb(17, 24, 39);
}

.button strong {
    @apply contents;
}

.button-active {
    @apply inline-flex bg-white shadow rounded text-gray-800 font-medium px-4 py-1 justify-center border border-gray-400;
}

.editing-button {
    @apply w-8 h-8 grid place-items-center border border-color rounded mx-1 bg-gray-100;
}

.dark .editing-button {
    @apply bg-gray-800;
}

.editing-button.editing-active {
    @apply bg-green-200 text-green-700 border-green-400;
}

.button-secondary {
    @apply inline-flex bg-white border border-gray-300 px-4 py-1 justify-center text-gray-500 rounded;
}

button:disabled {
    @apply grayscale text-gray-500 bg-opacity-50 border-transparent;
}

.dark .button-secondary {
    @apply bg-gray-800 text-gray-200;
}

.button-icon, .button-hint {
    @apply h-8 w-8 inline-flex justify-center items-center bg-white shadow-inner rounded text-gray-500 border border-gray-300;
}

.button-hint-text {
    @apply bg-white text-gray-700;
}

.dark .button-hint-text {
    @apply bg-gray-900 text-white;
}


/*
.button-hint-right {
    @apply w-full px-2 justify-start;
    transition-property: max-width;
    transition-duration: var(--transition-time);
    min-width: 2rem;
    max-width: 2rem;
}

.button-hint-left {
    @apply w-full px-2 justify-end;
    transition-property: max-width;
    transition-duration: var(--transition-time);
    min-width: 2rem;
    max-width: 2rem;
}
*/

.dark .button-icon, .dark .button-hint {
    @apply bg-gray-800 border-gray-700 text-gray-200;
}

.button-icon.toggle, .button-hint.toggle {
    @apply text-gray-400;
}

.dark .button-icon.toggle, .dark .button-hint.toggle {
    @apply text-gray-500;
}

.button-icon.active, .button-hint.active {
    @apply text-gray-900 border-gray-400 border shadow;
}

.dark .button-icon.active, .dark .button-hint.active {
    @apply text-white border-gray-500 border shadow bg-gray-600;
}

.button-icon.disabled, .button-icon-left.disabled, .button-icon-right.disabled {
    @apply bg-gray-200 text-primary border-primary border;
}

.dark .button-icon.disabled, .dark .button-icon-left.disabled, .dark .button-icon-right.disabled {
    @apply bg-gray-600 text-gray-500 border-primary border;
}

.select-button {
    @apply bg-white bg-opacity-50 text-gray-600 border-gray-300 flex items-center justify-center px-4 py-1 border rounded;
}

.dark .select-button {
    @apply bg-black border-gray-700 text-gray-400;
}


.select-button-muted {
    @apply text-gray-400 bg-gray-200 border-gray-200 flex items-center justify-center px-4 py-1 border rounded;
}

.dark .select-button-muted {
    @apply bg-gray-800 text-gray-600 border-gray-700;
}


.success {
    @apply text-green-500;
}

.error {
    @apply text-red-600;
}

.warning {
    @apply text-yellow-600;
}

.caret {
    transition: transform var(--transition-time) ease-out;
    @apply text-gray-600;
}

.dark .caret {
    @apply text-gray-400;
}

.caret.highlighted {
}

.rotate90 {
    transform: rotate(90deg);
}

/* MENU */

a.breadcrumb {
    @apply text-gray-600;
}

.breadcrumb-dash {
    @apply text-gray-500;
}

.dark a.breadcrumb {
    @apply text-gray-400;
}

/* GRID */

.grid {
    display: grid;
    grid-gap: 0;
}

@media (min-width: 768px) {
    div.grid-cell {
        @apply px-2 py-1;
    }
}

div.cell {
    @apply px-2 border-b border-l border-gray-500;
}

.contents.deleted .grid-cell{
    @apply line-through opacity-50;
}

.publication-list-name {
    @apply text-gray-800;
}

.dark .publication-list-name {
    @apply text-gray-100;
}

.publication-list-text {
    @apply text-gray-500;
}

.dark .publication-list-text {
    @apply text-gray-200;
}

.grid-row .contents > div, .row {
    @apply bg-white;
}


@media (min-width: 768px) {
    .grid-row .contents > div, .row {
        @apply border-b border-gray-300;
    }
}

.grid-row .contents.selected > div, .grid-row .contents.draft > div {
    @apply bg-yellow-100 bg-opacity-90;
}

.dark .grid-row .contents > div, .dark .row {
    @apply bg-black border-gray-700;
}

.grid-row .contents:nth-child(odd) > div, .row:nth-child(odd) {
    @apply bg-gray-200;
}

.grid-row .contents.selected:nth-child(odd) > div, .grid-row .contents.draft:nth-child(odd) > div {
    @apply bg-yellow-200 bg-opacity-90;
}

.dark .grid-row .contents:nth-child(odd) > div, .dark .row:nth-child(odd) {
    @apply bg-gray-800;
}

.grid-col-full-span {
    grid-column: 1/-1;
}

/* GRIDS */

.grid-inquiry-row {
    grid-template-columns: 1fr auto auto auto auto auto auto;
}

.grid-livestream-row {
    grid-template-columns: 1fr auto auto auto auto auto;
}

.grid-course-row {
    grid-template-columns: 1fr 1fr 165px 125px;
}

.grid-staff-profile-row {
    grid-template-columns: 1fr auto auto auto auto auto;
}

.grid-calendar-event-page {
    grid-template-columns: repeat(auto-fill, minmax(315px, 1fr));
}

.grid-tag-selector {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.grid-publication-row {
    grid-template-columns: 1fr 1fr 175px 175px 200px 130px;
}

.grid-publication-header {
    @apply bg-white gap-2 grid-cols-3 relative z-2 border-gray-300;
}

.dark .grid-publication-header {
    @apply bg-gray-800 border-gray-700;
}

.grid-publication-thumbnail {
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1rem;
}

.grid-user-row {
    grid-template-columns: auto 1fr;
}

@media (min-width: 768px) {
    .mobile-grid-spacer {
        @apply hidden;
    }
}

@media (max-width: 768px) {

    .mobile-grid-spacer:first-child {
        grid-column: 1/-1;
        @apply py-1 border-t-2 border-gray-300;
    }

    .mobile-grid-spacer:last-child {
        grid-column: 1/-1;
        @apply py-1 border-b-2 border-gray-300;
    }

    .mobile-grid-col-full-span {
        grid-column: 1/-1;
    }

    .grid-publication-row {
        grid-template-columns: 1fr 1fr 1fr auto;
    }

    .grid-course-row {
        grid-template-columns: 1fr auto;
    }

    .grid-inquiry-row {
        grid-template-columns: 1fr auto;
    }

    .grid-livestream-row {
        grid-template-columns: 1fr auto;
    }

    .grid-staff-profile-row {
        grid-template-columns: 1fr auto;
    }

}

/* CONTENT */

.theme-button-icon {
    @apply w-6 h-6 rounded;
}

.theme-normal-icon {
    @apply bg-gray-100;
}

.theme-dark-icon {
    @apply bg-gray-800;
}

.text-block {
    @apply py-0 w-full max-w-prose mx-auto;
}

/*
.text-block p:first-child {
    @apply pt-0;
}
*/

.text-style-white {
    @apply bg-white;
}

.dark .text-style-white {
    @apply bg-black;
}

.text-style-blue {
    background-color: #e6f3fc;
}

.dark .text-style-blue {
    background-color: #092437;
}

.text-style-green {
    background-color: #e6fcee;
}

.dark .text-style-green {
    background-color: #09381a;
}

.text-style-yellow {
    background-color: #f6f0d9;
}

.dark .text-style-yellow {
    background-color: #433e2a;
}

.text-style-purple {
    color: rgb(24,11,47);
    background-color: rgb(229,216,253);
}

.dark .text-style-purple {
    @apply text-violet-100;
    background-color: rgb(13,0,19);
}

.dark .text-style-purple:not(.text-curved-bg) {
    @apply border-b-2 border-violet-900;
}


/*
.text-style-blue ::selection {
    @apply bg-blue-700;
}
*/

.text-style-gray {
    @apply text-white;
    background-color: #425566;
}

.text-style-dark {
    @apply text-white;
    background-color: #1c1e1f;
}

.text-style-gray a:not(.button), .text-style-gray .link:not(.button) {
    @apply text-blue-200;
}

.text-style-dark a:not(.button), .text-style-dark .link:not(.button) {
    @apply font-medium;
    color: #ff4d52;
}

.text-shadow {
    text-shadow: 1px 1px 0px #222222; 
}

.text-shadow-white {
    text-shadow: 1px 1px 0px #ffffff; 
}

.drop-shadow {
    box-shadow: 1px 1px 0px #000000;
}

/* DAY BLOCKS */

.day-block .academics {
    @apply bg-rose-600 text-white;
}

.day-block-border-academics {
    @apply border-rose-600;
}

.day-block .prep, .day-block .tutorial, .day-block .advisor {
    @apply bg-red-500 text-white;
}

.day-block .athletics {
    @apply bg-emerald-500 text-white;
}

.day-block-border-athletics {
    @apply border-emerald-500;
}

.timetable-text.athletics {
    @apply bg-emerald-500 bg-opacity-70;
}

.day-block .arts {
    @apply bg-violet-500 text-white;
}

.day-block-border-arts {
    @apply border-violet-500;;
}

.timetable-text.arts {
    @apply bg-violet-500 bg-opacity-70;
}

.day-block .activities, .day-block .sleep-in, .day-block .free-time {
    @apply bg-sky-500 text-white;
}

.day-block .food {
    @apply bg-orange-400 text-white;
}

.day-block .brunch {
    @apply bg-yellow-500 text-white;
}

.day-block .assembly {
    @apply bg-blue-500 text-white;
}

.academic-block-title {
    @apply text-center text-sm;
}

.academic-block {
    @apply flex items-center justify-center rounded-sm leading-none text-white font-medium pt-px;
}

.block-a {
    @apply bg-orange-500;
}

.block-b {
    @apply bg-blue-500;
}

.block-c {
    @apply bg-violet-500;
}

.block-d {
    @apply bg-yellow-500;
}

.block-e {
    @apply bg-rose-500;
}

.block-f {
    @apply bg-green-500;
}

.timetable-grid {
    grid-template-columns: 1fr auto;
}

.timetable-content-container {
    @apply relative flex-1 flex items-center justify-center text-style-white;
}

.timetable-bg {
    @apply bg-gray-100;
}

.dark .timetable-bg {
    @apply bg-gray-900;
}

.timetable-block-bg {
    @apply bg-gray-200;
}

.dark .timetable-block-bg {
    @apply bg-gray-800;
}

.timetable-day-name {
    @apply bg-white border-gray-300;
}

.dark .timetable-day-name {
    @apply bg-black border-gray-700;
}


.crooks-menu {
    max-height: 1000px;
}


/* BLOG PREVIEW */

.publication-preview, .publication-feature {
    @apply text-gray-700;
}

.publication-preview .first-content-element.content-element-photo-block div {
    max-height: 0px;
}

.publication-preview .first-content-element.content-element-photo-block img {
    @apply opacity-0;
}

.publication-preview .content-element-text-block {
    @apply relative z-3;
}

.publication-preview div.publication-header {
    @apply z-4;
}

.publication-preview div.publication-tags {
    @apply hidden;
}

.publication-preview div:empty {
    
}

/* EDITOR */

.ProseMirror:focus {
    @apply outline-none;
}

.ProseMirror {
    @apply border border-transparent;
}

.editor:not(.read-only) .ProseMirror {
    min-height: 100px;
}

.ProseMirror-focused {
    @apply px-2 -mx-2 border-gray-400;
}

.form .ProseMirror-focused {
    @apply mx-0;
}

.menubar-container {
    top: 55px;
}

.form .menubar-container {
    top: 0;
}

.dark .menubar-container {
}

@media (max-width: 768px) {
    .menubar-container {
        top: 175px;
    }
}

.menubar-buttons {
    @apply bg-gray-100;
}

.dark .menubar-buttons {
    @apply bg-gray-900;
}

.dark .menubar-bg {
    @apply bg-gray-900;
}

.menubar-button, .menubar_table_button {
    @apply mx-1 mb-1 flex items-center justify-center border shadow-inner bg-gray-200 my-px;
}

.dark .menubar-button {
    @apply bg-gray-800 text-gray-300 border-gray-800 rounded;
}

.menubar-button {
    @apply w-6 h-6 relative;
}

.menubar-button.wide {
    @apply w-8 px-1;
}

.menubar-button.start {
    @apply justify-start;
}

.menubar-button.end {
    @apply justify-end;
}

.menubar-button.is-active {
    @apply bg-white shadow;
}

.dark .menubar-button.is-active {
    @apply bg-gray-700 shadow text-white;
}

.ProseMirror img.has-focus, .ProseMirror hr.has-focus {
    @apply border-blue-300 border-opacity-50;
}

.ProseMirror .selectedCell {
    @apply bg-blue-300 bg-opacity-20;
}

} /* END OF MEDIA SCREEN */

/* TRANSITIONS */

@keyframes fade {
    0% {
        opacity: 0;
    }
    100%   {
        opacity: 1;
    }
}

.fade-enter-active {
    animation: fade var(--transition-time) ease-out;
}

.fade-leave-active {
    animation: fade var(--transition-time) reverse;
}

.slow-fade-enter-active {
    animation: fade calc(var(--transition-time) * 3) ease-out;
}

.slow-fade-leave-active {
    animation: fade calc(var(--transition-time) * 3) reverse;
}

.spin {
    animation: rotating 1s linear infinite;
}

@keyframes rotating {
    0% {
        transform: rotate(0deg);
    }
    100%   {
        transform: rotate(360deg);
    }
}

@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100%   {
        opacity: 1;
        transform: translateY(0%);
    }
}

.slide-down-enter-active {
    animation: slide-down var(--transition-time) ease-out;
}

.slide-down-leave-active {
    position: absolute;
    animation: slide-down var(--transition-time) reverse;
}

@keyframes button-down {
    0% {
        opacity: 0;
        max-height: 0;
        @apply py-0;
    }
    100%   {
        opacity: 1;
        max-height: 32px;
        @apply py-1;
    }
}

.button-down-enter-active {
    animation: button-down var(--transition-time) ease-out;
}

.button-down-leave-active {
    animation: button-down var(--transition-time) reverse;
}

@keyframes input {
    0% {
        opacity: 0;
        max-height: 0;
        @apply mb-0;
    }
    100%   {
        opacity: 1;
        max-height: 42px;
        @apply mb-4;
    }
}

.input-enter-active {
    animation: input var(--transition-time) ease-out;
}

.input-leave-active {
    animation: input var(--transition-time) reverse;
}

.content-element img {
    /*
    @apply transition-all ease-out;
    transition-duration: 2500ms;
    */
}

.content-element.hide img {
    /*
    transform: scale(1);
    */
}

.content-element.show img {
    /*
    transform: scale(1.1);
    */
}

/* PRINT */

/* NOT SUPPORTED BY SAFARI OR FIREFOX 
@page {
  size: letter portrait;
}
*/

@media print {

    body {
        @apply bg-white;
        width: 1024px;
        /*
        width: 7in;
        height: 9.25in;
        */
    }

    .red-line, #header, #footer, #footer-menu, #page-setter, #feedback-container, #photo-viewer, #scroll-position, #email-confirmer, #timeout-check, #modal {
        @apply hidden;
    }

    #content-container {
        @apply bg-none !important;
    }

    #main {
        @apply shadow-none;
    }

    .avoid-page-break {
        break-inside: avoid-page;
        page-break-inside: avoid;
    }

    .text-block {
        @apply py-0 w-full mx-auto;
        max-width: 600px;
    }

    /*
    h1, .h1 {
        @apply text-2xl;
    }

    h2, .h2 {
        @apply text-xl;
    }

    h3, .h3 {
        @apply text-lg;
    }
    */

    a {
        @apply text-primary;
    }

    /*
    .photo {
        @apply absolute w-full h-full overflow-hidden;
    }

    .photo img {
        @apply w-full h-full;
    }

    .photo.fill img {
        @apply object-cover;
    }

    .photo.fit img {
        @apply object-contain;
    }

    p.tag-line {
        @apply text-xl;
    }

    */

    table {
        @apply w-full p-4 my-4 table-fixed;
    }

    tr:last-child td {
        @apply border-b-0;
    }

    td {
        @apply border-b border-r border-color;
    }

    td p {
        @apply px-2 py-1;
    }

    td:last-child {
        @apply border-r-0;
    }

    .grid-calendar-event-page {
        @apply grid grid-cols-3;
    }

    div.text-style-white, div.text-style-blue, div.text-style-green, div.text-style-yellow, div.text-style-purple, div.text-style-gray, div.text-style-dark {
        @apply border;
    }
}

/*

h1, h2, h3, h4 {
    break-after: avoid-page;
    page-break-after: avoid;
}

picture, img {
    page-break-before: auto; 
    page-break-after: auto;
    page-break-inside: avoid;
}
*/

/* COMPONENTS */

@keyframes feedback {
    0% {
        max-height: 0px;
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    100%   {
        max-height: 32px;
        opacity: 1;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }
}

.feedback-enter-active {
    animation: feedback var(--transition-time) ease-out;
}

.feedback-leave-active {
    animation: feedback var(--transition-time) reverse;
}

@keyframes global-search {
    0% {
        max-height: 0;
        overflow: hidden;
    }
    100%   {
        max-height: 62px;
        overflow: hidden;
    }
}

.global-search-enter-active {
    animation: global-search var(--transition-time) ease-out;
}

.global-search-leave-active {
    animation: global-search var(--transition-time) reverse;
}

@keyframes photo-next-in {
    0% {
        transform: translateX(1rem);
        opacity: 0;
    }
    100% {
        transform: translateX(0rem);
        opacity: 1;
    }
}

@keyframes photo-next-out {
    0% {
        transform: translateX(0rem);
        opacity: 1;
    }
    100% {
        transform: translateX(-1rem);
        opacity: 0;
    }
}

.photo-next-enter-active {
    animation: photo-next-in var(--transition-time) ease-out;
}

.photo-next-leave-active {
    animation: photo-next-out var(--transition-time) ease-out;
}


@keyframes photo-prev-in {
    0% {
        transform: translateX(-1rem);
        opacity: 0;
    }
    100% {
        transform: translateX(0rem);
        opacity: 1;
    }
}

@keyframes photo-prev-out {
    0% {
        transform: translateX(0rem);
        opacity: 1;
    }
    100% {
        transform: translateX(1rem);
        opacity: 0;
    }
}

.photo-prev-enter-active {
    animation: photo-prev-in var(--transition-time) ease-out;
}

.photo-prev-leave-active {
    animation: photo-prev-out var(--transition-time) ease-out;
}

@keyframes video-text {
    0% {
        opacity: 0;
    }
    100%   {
        opacity: 1;
    }
}

.video-text-enter-active {
    animation: video-text 750ms ease-out;
}

.video-text-leave-active {
    animation: video-text 500ms reverse;
}

@keyframes video-progress-bar {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

.video-progress-bar {
    animation-name: video-progress-bar;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes numbers {
    0% {
        opacity: 0;
        width: 0;
    }
    100%   {
        opacity: 1;
        @apply w-8;
    }
}

.numbers-enter-active {
    animation: numbers var(--transition-time) ease-out;
}

.numbers-leave-active {
    animation: numbers var(--transition-time) reverse;
}

@keyframes pagination-loading {
    0% {
        opacity: 0;
        height: 0;
        @apply py-0;
    }
    100%   {
        opacity: 1;
        height: 32px;
        @apply py-1;
    }
}

.pagination-loading-enter-active {
    animation: pagination-loading var(--transition-time) ease-out;
}

.pagination-loading-leave-active {
    animation: pagination-loading var(--transition-time) reverse;
}

.loading-bar {
    animation: loading-bar 5s linear infinite;
}

.loading-bar-clear {
    animation: loading-bar-clear 5s linear infinite;
}

@keyframes loading-bar {
    0% {
        transform: scaleX(0%);
    }
    50% {
        transform: scaleX(100%);
    }
    99% {
        transform: scaleX(100%);
    }
    100% {
        transform: scaleX(0%);
    }
}

@keyframes loading-bar-clear {
    0% {
        transform: scaleX(0%);
    }
    50% {
        transform: scaleX(0%);
    }
    100% {
        transform: scaleX(100%);
    }
}

@keyframes h1 {
    0% {
        opacity: 0;
        @apply h-0;
    }
    100%   {
        opacity: 1;
        @apply h-1;
    }
}

.h1-enter-active {
    animation: h1 var(--transition-time) ease-out;
}

.h1-leave-active {
    animation: h1 var(--transition-time) reverse;
}

@keyframes blogs-search {
    0% {
        opacity: 0;
        height: 0;
    }
    100%   {
        opacity: 1;
        height: 62px;
    }
}

.blogs-search-enter-active {
    animation: blogs-search var(--transition-time) ease-out;
}

.blogs-search-leave-active {
    animation: blogs-search var(--transition-time) reverse;
}

.slideshow-timer {
    animation-name: slideshow-timer;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in;
}

@keyframes slideshow-timer {
    0% {
        transform: scaleX(0);
            
    }
    100% {
        transform: scaleX(1);
    }
}

@keyframes expander {
    0% {
        opacity: 0;
        max-height: 0;
    }
    100%   {
        opacity: 1;
        max-height: 75vh;
    }
}

.expander-enter-active {
    animation: expander calc(var(--transition-time) * 2) ease-in;
}

.expander-leave-active {
    animation: expander var(--transition-time) reverse;
}

.content-element-expander {
    transition: opacity calc(var(--transition-time) * 2) ease-in, max-height calc(var(--transition-time) * 2) ease-in;
}


@media screen {

    .content-element-expanded {
        max-height: none;
        opacity: 1;
    }

    .content-element-collapsed {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
    }

    .content-element-expanding {
        max-height: 75vh;
        opacity: 1;
    }
}

@keyframes form-error {
    0% {
        opacity: 0;
        max-height: 0;
        @apply pt-0;
    }
    100%   {
        opacity: 1;
        max-height: 28px;
        @apply pt-1;
    }
}

.form-error-enter-active {
    animation: form-error var(--transition-time) ease-out;
}

.form-error-leave-active {
    animation: form-error var(--transition-time) reverse;
}

@keyframes label {
    0% {
        opacity: 0;
        max-height: 0;
        @apply py-0;
    }
    100%   {
        opacity: 1;
        max-height: 28px;
        @apply py-1;
    }
}

.label-enter-active {
    animation: label var(--transition-time) ease-out;
}

.label-leave-active {
    animation: label var(--transition-time) reverse;
}

@keyframes horizontal-label {
    0% {
        opacity: 0;
        max-width: 0;
        @apply px-0;
    }
    100%   {
        opacity: 1;
        max-width: 200px;
        @apply px-4;
    }
}

.horizontal-label-enter-active {
    animation: horizontal-label var(--transition-time) ease-out;
}

.horizontal-label-leave-active {
    animation: horizontal-label var(--transition-time) reverse;
}

@keyframes icon-width {
    0% {
        max-width: 0;
        opacity: 0;
    }
    100%   {
        max-width: 32px;
        opacity: 1;
    }
}

.icon-width-enter-active {
    animation: icon-width var(--transition-time) ease-out;
}

.icon-width-leave-active {
    animation: icon-width var(--transition-time) reverse;
}

@keyframes sub-menu {
    0% {
        max-height: 0;
    }
    100%   {
        max-height: 400px;
    }
}

@keyframes sub-menu-out {
    0% {
        opacity: 1;
    }
    100%   {
        opacity: 0;
    }
}

.sub-menu-enter-active {
    overflow: hidden;
    animation: sub-menu var(--transition-time) ease-out;
}

.sub-menu-leave-active {
    animation: sub-menu-out var(--transition-time) ease-out;
    position: absolute;
}

.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 103px;
  height: 103px;
  margin: 4px;
  border: 4px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.vc-day-popover-container {
    @apply m-0 !p-0 !border-0;
}

/*
.vc-vc-day-popover-row {
    @apply max-w-sm;
}
*/

.calendar-description p {
    @apply pt-2;
}

@keyframes calendar-search {
    0% {
        opacity: 0;
        height: 0;
    }
    100%   {
        opacity: 1;
        height: 62px;
    }
}

.calendar-search-enter-active {
    animation: calendar-search var(--transition-time) ease-out;
}

.calendar-search-leave-active {
    animation: calendar-search var(--transition-time) reverse;
}


@keyframes calendar-search-button {
    0% {
        opacity: 0;
        height: 0;
        @apply my-0;
    }
    100%   {
        opacity: 1;
        height: 34px;
        @apply my-2;
    }
}

.calendar-search-button-enter-active {
    animation: calendar-search-button var(--transition-time) ease-out;
}

.calendar-search-button-leave-active {
    animation: calendar-search-button var(--transition-time) reverse;
}

@keyframes calendar-page {
    0% {
        transform: translateX(-50px);
    }
    100%   {
        transform: translateX(0px);
    }
}

.calendar-page-enter-active {
    animation: calendar-page var(--transition-time) ease-out;
}

.calendar-page-leave-active {
    animation: calendar-page var(--transition-time) reverse;
}

@tailwind utilities;