/**
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 {
    --cm-content-color-rgb: var(--bs-dark-rgb);
    --cm-invert-color-rgb: var(--bs-light-rgb);
}
/* The following variables are used to style elements according to the background they are placed on */
.text-bg-info,
.text-bg-dark,
.text-bg-customcol1 {
    --cm-content-color-rgb: var(--bs-body-bg-rgb);
    --cm-invert-color-rgb: var(--bs-body-color-rgb);
}
.form-select,
.form-control {
    border-color: rgba(var(--bs-dark-rgb), 1);
    color: rgba(var(--bs-dark-rgb), 1);
}
img, video, picture, iframe {
    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: 4px solid var(--bs-primary);
    padding-left: .5rem;
    font-size: 1rem;
    font-weight: 500;
}
.caption {
    font-style: italic;
}
li::marker {
  color: var(--bs-primary);
}
p {
    line-height: 1.5;
}
h1, .h1 {
    font-family: instrument-serif, sans-serif;
    font-weight: 400;
    font-style: normal;
}
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5 {
    font-weight: 400;
    line-height: 1.5;
}
h6, .h6 {
    font-weight: 300;
    text-transform: uppercase;
}

/* Spesifikt for fonten som er brukt i dette nettstedet. Den har uønsket luft under bokstavene som betyr at vi må justere litt når den brukes i knapper og inputs */
.form-control,
.btn {
    padding-bottom: .5rem;
}
strong, b {
    font-weight: 500;
}

/* 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,
.formbuilder-container [type=submit]{
    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;
}

.btn-icon-start::before {
    content: var(--fa);
    font-weight: 300;
    font-family: "Font Awesome 6 Pro";
    font-size: 1.5em;
    line-height: 1;
    vertical-align: middle;
}
.btn-icon-end::after {
    content: var(--fa);
    font-weight: 300;
    font-family: "Font Awesome 6 Pro";
    font-size: 1.5em;
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
    margin-left: .25em;
    margin-right: -.5em;
    
}

/* Gjør ikon i knappene større uten å påvirke høyden på knappen */
#tinymce .btn i,
.rte-wrapper .btn i {
    padding-left: 0.25em;
    font-size: 1.5em;
    line-height: 1;
    vertical-align: middle;
}
#tinymce .btn:not(.btn-simple-link) i,
.rte-wrapper .btn:not(.btn-simple-link) i {
    margin-right: -.5em;
}



/* Setter gap mellom knappene som plasseres i Richtext */
p:has(> .btn + .btn) {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
}
p[style*="text-align: center"]:has(> .btn + .btn) {
    justify-content: center;
}
/*
#tinymce .btn:has(i),
.rte-wrapper .btn:has(i) {
    margin-right: .75rem;
}
*/
#tinymce .btn:hover i,
.rte-wrapper .btn:hover i,
a:hover .rte-wrapper .btn i {
    padding-left: 0.5em;
}
#tinymce > *,
.rte-wrapper > * {
    margin-bottom: 1.5rem;
}
#tinymce img,
.rte-wrapper img {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
#tinymce .caption,
.rte-wrapper .caption {
    margin-top: -2rem;
    margin-bottom: 2rem;
}
#tinymce > h5,
#tinymce > h6,
.rte-wrapper > h5,
.rte-wrapper > h6 {
    margin-bottom: .25rem;
}
.tpl-article .rte-wrapper h1 {
    margin-bottom: 2.5rem;
}

.form-check-input {
    margin-top: .1em;
}

/* 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: rgba(var(--cm-content-color-rgb), 1);
    border-color: rgba(var(--cm-content-color-rgb), 1);
    color: rgba(var(--cm-invert-color-rgb), 1);
}
.btn-inherit:hover {
    background-color: rgba(var(--cm-content-color-rgb), .8);
    border-color: rgba(var(--cm-content-color-rgb), .8);
    color: rgba(var(--cm-invert-color-rgb), .8);
}
.btn-outline-inherit {
    border-color: rgba(var(--cm-content-color-rgb), 1);
    color: rgba(var(--cm-content-color-rgb), 1);
    backdrop-filter: blur(6px);
}
.btn-outline-inherit:hover {
    border-color: rgba(var(--cm-content-color-rgb), .4);
    background-color: rgba(var(--cm-content-color-rgb), .2);
    color: rgba(var(--cm-content-color-rgb), 1);
}

.text-bg-dark h6,
.text-bg-customcol1 h6 {
    color: var(--bs-secondary);
}




/** ################################################## 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 {
	}
	h1, .h1 {
	    font-size: 4rem;
	}
}

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

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