/*
  Custom CSS for quill editor behavior
 */

.ql-container {
    background: #fff;
    font-size:1.0em;
}
.ql-container.focus {
    border-color: #6FCF97;
}
.ql-tooltip {
    left: 0 !important;
    border-radius: 4px;
}
.ql-toolbar {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.ql-toolbar.focus {
    border-left-color:#6FCF97;
    border-right-color:#6FCF97;
    border-top-color:#6FCF97;
}
.ql-container,
.ql-editor {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
.ql-editor {
    max-height:65vh;
}

.ql-container p,
.ql-container ul,
.ql-container ol {
    font-size: 1em;
}

.ql-container ul,
.ql-container ol {
    margin:0;
    padding-bottom:8px;
    padding-left:0;
}

.ql-container p { margin:0; padding:0 0 0.5em 0; }
.ql-container h1 { font-weight:bold; font-size:2.1em !important; margin:0; padding:0.25em 0 0.5em 0; }
.ql-container h2 { font-weight:bold; font-size:1.7em !important; margin:0; padding:0.25em 0 0.5em 0; }
.ql-container h3 { font-weight:bold; font-size:1.4em !important; margin:0; padding:0.25em 0 0.5em 0; }
.ql-container h4 { font-weight:bold; font-size:1.2em !important; margin:0; padding:0.25em 0 0.5em 0; border-bottom: none; }
.ql-container h5 { font-weight:bold; font-size:1.0em !important; margin:0; padding:0.25em 0 0.5em 0; border-bottom: none; }

.ql-container a {
    font-size:1em;
}

.ql-container .mergevar {
    border:0;
    background:#fff4d5;
    border-radius:5px;
    padding:0 0.2em;
    margin:0;
    /*color:#333;*/
    font-style:normal;
}
.ql-container em .mergevar {
    font-style: italic;
}
.ql-container .mergeblockvar[data-param]::after,
.ql-container .mergevar[data-param]::after {
    font-family: 'Feather';
    content: "\e8c3";
    font-size: 0.8em;
    margin-left: 0.2em;
    cursor: pointer;
    opacity: 0.7;
    position:absolute;
    top:0.2em;
    right:1px;
}
.ql-container .mergeblockvar[data-param]:hover::after,
.ql-container .mergevar[data-param]:hover::after {
    opacity: 1;
    color:black;
    font-size:0.9em;
    top:0.1em;
}
.ql-container .mergeblockvar {
    border:0;
    padding:0px 2px;
    background:#fff4d5;
    border-radius:4px;
    margin:0 -2px 0.5em;
    color:#333;
    white-space:normal;
}
.ql-container .mergevar[data-param] {
    padding-right:1.1em;
}
.ql-container .mergeblockvar[data-param],
.ql-container .mergevar[data-param] {
    position:relative;
}

.ql-container .mergeblockvar table {
    width:100%;
    border-collapse: collapse;
    margin-bottom:5px;
    font-size:1em;
}
.ql-container .mergeblockvar table th,
.ql-container .mergeblockvar table td {
    padding:0 2px;
    border:0;
    font-size: 1em;
}

.ql-container .mergeblockvar table.table-auto-width {
	width: auto;
}
.ql-container .mergeblockvar table.table-auto-width th,
.ql-container .mergeblockvar table.table-auto-width td {
    padding: 4px 8px 2px 4px;
}

.ql-container .mergeblockvar table td span.icon-check {
    font-weight: bold;
}
.ql-container .mergeblockvar table thead tr th {
    vertical-align: bottom;
}
.ql-container .mergeblockvar table thead tr:last-child th {
    border-bottom:1px solid #00000080;
}
.ql-container .mergeblockvar table tbody td,
.ql-container .mergeblockvar table tfoot td {
    border-color:#00000020;
    vertical-align: top;
}
.ql-container .mergeblockvar table tfoot tr:first-child td {
    border-top:1px solid #00000080;
}
.ql-container .mergeblockvar table tfoot {
    font-size:1em !important;
}
.ql-container .mergeblockvar table tfoot td {
    padding-top:5px !important;
    font-weight: bold;
    font-size:1em;
    border-top:1px solid #00000080 !important;
}
.ql-container .align-right {
    text-align:right;
}
.ql-container .mergeblockvar table {

}
.ql-container .mergeblockvar table.smalltable,
.ql-container .mergeblockvar table.financialplan {
    font-size:1em;
}
.ql-container .mergeblockvar table.tinytable {
    font-size:0.9em;
}

textarea.rich-editor {
    display: none;
}

a.ql-action,
a.ql-remove {
    cursor:pointer !important;
    opacity: 1  !important;
    pointer-events: auto !important;
    font-style:normal !important;
}

.nb.ql-snow .ql-tooltip::before { content: "Åpne url:"; }
.nn.ql-snow .ql-tooltip::before { content: "Åpne url:"; }
.en.ql-snow .ql-tooltip::before { content: "Open url:"; }

.nb.ql-snow .ql-tooltip[data-mode="link"]::before { content: "Skriv url:"; }
.nn.ql-snow .ql-tooltip[data-mode="link"]::before { content: "Skriv url:"; }
.en.ql-snow .ql-tooltip[data-mode="link"]::before { content: "Write url:"; }

.nb.ql-snow .ql-tooltip a.ql-action::after { content: "Rediger"; }
.nn.ql-snow .ql-tooltip a.ql-action::after { content: "Rediger"; }
.en.ql-snow .ql-tooltip a.ql-action::after { content: "Edit"; }

.nb.ql-snow .ql-tooltip a.ql-remove::before { content: "Fjern"; }
.nn.ql-snow .ql-tooltip a.ql-remove::before { content: "Fjern"; }
.en.ql-snow .ql-tooltip a.ql-remove::before { content: "Remove"; }

.nb.ql-snow .ql-tooltip.ql-editing a.ql-action::after { content: "Lagre"; }
.nn.ql-snow .ql-tooltip.ql-editing a.ql-action::after { content: "Lagre"; }
.en.ql-snow .ql-tooltip.ql-editing a.ql-action::after { content: "Save"; }

.ql-divider:after {
    content:'';
    width:16px;
    border-bottom:2px solid #333;
    display: inline-block;
    margin-bottom:5px;
}
.ql-divider:hover:after {
    border-bottom:2px solid #06c;
}

.ql-if-start:after {
    content:'ƒ';
    font-weight: bold;
    font-style:italic;
    font-size: 1.3em;
    position: relative;
    top: -5px;
}

.ql-if-visible:after {
    content: "\e86a";
    font-family: 'Feather';
}

.ql-wrapper.if-hide-hidden .if-hidden {
    display:none;
}
.ql-wrapper.if-hide-hidden .if-start.if-hidden {
    display:block;
    padding: 4px 10px 2px 10px;
}
.ql-wrapper.if-hide-hidden .if-start.if-hidden .if-expr {
    font-size: 0.8em;
}
.ql-wrapper.if-hide-hidden .if-end.if-hidden {
    display:block;
}

.ql-container hr {
    border:0;
    border-top:1px dashed #ccc;
    border-bottom:1px dashed #ccc;
    padding:1px 0px;
    text-align:center;
    background: #def;
    font-style: italic;
    margin:10px 0;
}
.ql-container hr:after {
    content:'Ny side';
    text-align:center;
}

.error .ql-toolbar.ql-snow {
    border-color: var(--error-color);
}

.error .ql-container.ql-snow {
    border-color: var(--error-color);
    background-color: var(--error-color-light);
}

.ql-wrapper .ql-resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    opacity: .3;
    cursor: ns-resize;
}
.ql-wrapper .ql-resize-handle:after {
    content: ' ';
    display: block;
    width: 14px;
    height: 14px;
}
.ql-wrapper .ql-resize-handle:after {
    background: linear-gradient(
            -45deg,
            #000 10%, #000, #0000, #0000 20%,
            #000 20%, #000, #0000, #0000 30%,
            #000 30%, #000, #0000, #0000 40%,
            #000 40%, #000, #0000, #0000 50%
    )
}
.ql-wrapper .ql-resize-handle:hover {
    opacity: 1;
}
.ql-wrapper[disabled="disabled"] {
    pointer-events: none;
    background: var(--light-grey);
}
.ql-wrapper[disabled="disabled"] .ql-editor {
    background: var(--light-grey);
}

/* The Start Bar */
.ql-container .if-start {
    background-color: #e8f0fe;
    border-top: 1px solid #1a73e8;
    border-left: 1px solid #1a73e8;
    border-right: 1px solid #1a73e8;
    color: #1a73e8;
    padding: 5px 10px;
    margin: 0 -5px 0 -5px;
    font-family: monospace;
    cursor: pointer; /* Click to edit */
    border-radius: 4px 4px 0 0;
    user-select: none; /* Prevent cursor from entering the text inside the marker */
    position:relative;
}
.ql-container .if-start:hover {
    background-color: #d2e3fc;
}
.compose .ql-wrapper .if-start:hover {
    background-color: #e8f0fe !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* The End Bar */
.ql-container .if-end {
    background-color: #e8f0fe;
    border-bottom: 1px solid #1a73e8;
    border-left: 1px solid #1a73e8;
    border-right: 1px solid #1a73e8;
    color: #1a73e8;
    height:4px;
    margin: 0 -5px 0.75em -5px;
    font-family: monospace;
    font-size: 0.8em;
    border-radius: 0 0 4px 4px;
    user-select: none;
}

.ql-container .if-content {
    border-left: 1px solid #1a73e8;
    border-right: 1px solid #1a73e8;
    margin-left: -5px;
    margin-right: -5px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #f8faff; /* Optional: subtle highlight */
}
.ql-container .if-hidden {
    opacity: 0.5;
}

.ql-container .if-start + * {
    padding-top: 0.5em;
}


.if-label {
    font-weight: bold;
    font-style:italic;
}

/* Start marker that evaluated to false */
.if-start[data-eval="false"] {
    opacity:0.5;
}
/* Position a feather closed eye on false and an open on true
.icon-eye:before { content: "\e86a"; }
.icon-eye-off:before { content: "\e86e"; }
*/
.if-start[data-eval="false"]::after {
    content: "\e86e"; /* Feather icon for eye-off */
    font-family: 'Feather';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2em;
    color: #1a73e8;
}
.if-start[data-eval="true"]::after {
    content: "\e86a"; /* Feather icon for eye */
    font-family: 'Feather';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2em;
    color: #1a73e8;
}