/**
This file includes rules that are used in the RTE-editor in MODX to make it look and feel the same as the site. The following CSS is loaded into the TinyMCE in the following order:

  -Custom fonts (if applicable)
  -Font Awesome
  -bootstrap-custom.min.css
  -rte.ccs

Keep this file simple. Include only rules that are needed to keep a consistent look and feel in RTE, such as font-familiy, sizes, bullets, tables, etc.
The files above, including rte.css will also be loaded into the site as a basis, before site.css
**/

:root {
}
html,body {
}
img, video, picture {
    max-width: 100%;
    height: auto;
    border-radius: var(--bs-border-radius-xl);
}
table {
    border-collapse: collapse;
	width: 100% !important;
	height: auto !important;
	border: none;
	margin-bottom: 1.5rem;
}
table tr {
	border-top: 1px solid var(--bs-border-color);
	width: auto !important;
	height: auto !important;
}
table tr:first-child {
	border-top: none;
}
table tr:hover td {
	filter: brightness(0.97)
}
table td {
    background-color: white;
	padding: .5rem;
	width: auto !important;
	height: auto !important;
	vertical-align: top;
}
table td:first-child {
    padding-left: 0;
}
table td > *:last-child {
    margin-bottom: 0;
}
table thead tr {
	border-bottom: 1px solid var(--bs-primary);
	font-weight: 700;
}
table thead tr td {
    vertical-align: bottom;
}
table tfoot tr td {
	font-weight: 600;
	border-top: 1px solid var(--bs-primary);
	border-bottom: 1px solid var(--bs-primary);
}
table tr.row-subheading {}
table tr.row-summary {}
table td.cell-highlighted {
    background-color: var(--bs-light);
}
blockquote {
    border-left: .25rem solid var(--bs-primary);
    padding-left: .5rem;
    font-size: 1.2rem;
    font-weight: 600;
}
.unbreakable {
    white-space: nowrap;
}
.caption {
    font-style: italic;
}
li::marker {
  color: var(--bs-primary);
}
.btn {
    text-transform: uppercase;
}

/* Styles only applied inside Rich text editor */
#tinymce .btn-light,
#tinymce .btn-outline-light,
#tinymce .btn-outline-white {
    filter: brightness(80%);
}
#tinymce .btn,
.rte-wrapper .btn {
    border-radius: var(--bs-border-radius-pill) !important;
}
.btn-simple-link {
    color: inherit;
    border-color: transparent !important;
    padding-left: 0;
    padding-right: 0;
}
.btn-simple-link:hover {
    color: inherit;
    text-decoration: underline;
}
#tinymce .btn i,
.rte-wrapper .btn i {
    padding-left: 0.25em;
}


/* Setter gap mellom knappene som plasseres i Richtext */
#tinymce p:has(> .btn + .btn),
.rte-wrapper p:has(> .btn + .btn) {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1rem;
}
#tinymce p:has(> .btn + .btn),
.rte-wrapper p[style*="text-align: center"]:has(> .btn + .btn) {
    justify-content: center;
}



/* Many times, buttons are placed dynamically on different background. Just use the class .btn-inherit or .btn-outline-inherit and a color will be chosen in the same style as the text. */
.btn-inherit {
    background-color: #000;
    border-color: #000;
    color: #FFF;
}
.btn-inherit:hover {
    background-color: var(--bs-dark);
    border-color: var(--bs-dark);
    color: var(--bs-light);
}
.btn-outline-inherit {
    border-color: #000;
    color: #000;
}
.btn-outline-inherit:hover {
    background-color: #000;
    color: #FFF;
}
.text-bg-info,
.text-bg-dark,
.text-bg-primary,
.text-bg-info a,
.text-bg-dark a,
.text-bg-primary a {
    color: var(--bs-secondary) !important;
}
.text-bg-info a:hover,
.text-bg-dark a:hover,
.text-bg-primary a:hover {
    color: #FFF !important;
}
.text-bg-info li::marker,
.text-bg-dark li::marker,
.text-bg-primary li::marker {
    color: var(--bs-secondary);
}
.text-bg-info .btn-inherit,
.text-bg-dark .btn-inherit,
.text-bg-primary .btn-inherit {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: var(--bs-dark) !important;
}
.text-bg-info .btn-inherit:hover,
.text-bg-dark .btn-inherit:hover,
.text-bg-primary .btn-inherit:hover{
    background-color: var(--bs-light);
    border-color: var(--bs-light);
    color: var(--bs-dark) !important;
}
.text-bg-info .btn-outline-inherit,
.text-bg-dark .btn-outline-inherit,
.text-bg-primary .btn-outline-inherit {
    border-color: #FFF;
    color: #FFF;
}
.btn-outline-inherit:hover {
    background-color: rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);
    color: #000;
}
.btn-outline-white:hover,
.text-bg-info .btn-outline-inherit:hover,
.text-bg-dark .btn-outline-inherit:hover,
.text-bg-primary .btn-outline-inherit:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(6px);
    color: #FFF;
}

h1, .h1,
h2, .h2,
h3, .h3 {
    font-family: the-seasons, sans-serif;
    font-weight: 700;
    font-style: normal;
}


/** ################################################## MEDIA QUERIES ################################################## **/

/** Small devices (landscape phones, 576px and up) **/
/** Bootstrap: -sm **/
@media (min-width: 576px) {
	html,body {
	}
}

/** Medium devices (tablets, 768px and up) **/
/** Bootstrap: -md **/
@media (min-width: 768px) {
	html,body {
	}
}

/** Large devices (desktops, 992px and up) **/
/** Bootstrap: -lg **/
@media (min-width: 992px) {
	html,body {
	}
}

/** Extra large devices (large desktops, 1200px and up) **/
/** Bootstrap: -xl **/
@media (min-width: 1200px) {
	html,body {
	}
}

/** Extra Extra large devices (extra large desktops, 1400px and up) **/
/** Bootstrap: -xxl **/
@media (min-width: 1400px) {
	html,body {
	}
}