:root {
    --primary-color-dark:  #3C4952;
    --primary-color:       #8AA9BB;
    --primary-color-mid:   #D2E7F3;
    --primary-color-light: #E3EFF8;

    --secondary-color-dark:  #00e;
    --secondary-color: #00f;

    --light-grey: #F2F6f8;

    --body-bg: white;
    --text-color: #252525;

    --panel-default-bg: var(--primary-color-light);
    --panel-default-color: var(--text-color);
    --panel-default-hover-bg: var(--primary-color);
    --panel-default-hover-color: var(--text-color);

    --btn-default-bg: transparent;
    --btn-default-color: var(--primary-color);
    --btn-default-hover-bg: var(--primary-color-light);
    --btn-default-hover-color: var(--primary-color);

    --btn-primary-bg: var(--primary-color);
    --btn-primary-color: white;
    --btn-primary-hover-bg: var(--primary-color-light);
    --btn-primary-hover-color: var(--primary-color);

   	--table-row-bg: var(--light-grey);
	--table-clickable-row-bg: var(--primary-color-light);
	--table-clickable-row-color: var(--text-color);
	--table-clickable-row-hover-bg: var(--primary-color);
	--table-clickable-row-hover-color: var(--text-color);

    --info-bg: #047EA3;
    --info-color: #E6F2F6;
    --success-bg: #EBF5F2;
    --success-color: #356559;
    --warning-bg: #FFF9E7;
    --warning-color: #D17B15;
    --error-bg:#FFEDF2;
    --error-color:#A0002C;
}

/*
	This CSS overrides external.css

	Please add new CSS in external.css first and only add overrides in siteexternal.css
	for each deployment. If possible use the variables defined for primary and secondary
	colors as it makes it simpler in the future to modify colors.
*/


/* General */

@font-face {
    font-family: 'Diatype';
    src: url("kulturdir/KulturdirektoratetDiatype-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Diatype';
    src: url("kulturdir/KulturdirektoratetDiatype-RegularItalic.ttf") format("truetype");
    font-style: italic;
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Diatype';
    src: url("kulturdir/KulturdirektoratetDiatype-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: bold;
    font-display: swap;
}

@font-face {
    font-family: 'Diatype';
    src: url("kulturdir/KulturdirektoratetDiatype-BoldItalic.ttf") format("truetype");
    font-style: italic;
    font-weight: bold;
    font-display: swap;
}

* {
    font-family: Diatype, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a:hover, a:focus {
    color:var(--secondary-color);
}

body {
    background-color: var(--body-bg);
    color: var(--text-color);
}

.logodiv img {
    height:40px;
}

.form-control {
    border-color:var(--primary-color);
}

.select2-container.select2-container-active .select2-choice, .form-control:focus {
    box-shadow: none;
}


/* Panels */

.panel-default > .panel-heading {
    background:var(--panel-default-bg);
    color:var(--panel-default-color);
}
.panel-default .panel-heading .panel-icon {
    color:var(--panel-default-color);
}

.panel-primary .panel-heading {
    background:var(--btn-primary-bg);
    color:var(--btn-primary-color);
}
.panel-primary .panel-heading .panel-icon {
    color:var(--btn-primary-color);
}

.panel-group .panel-heading:hover {
    background:var(--panel-default-hover-bg);
    color:var(--panel-default-hover-color);
}


/* HTML form display overrides - default in cortadoform.css */

.html .section-heading {
    background:var(--table-clickable-row-bg);
    color:var(--table-clickable-row-color);
    padding:3px 10px 3px 10px;
    font-size:18px;
    min-height:32px;
    font-weight:bold;
    border-radius:0;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    margin-top:3px;
    box-shadow:none;
    border-top:0;
}
.html .section-heading.closed:hover,
.html .section-heading:hover {
    background:var(--table-clickable-row-hover-bg);
    color:var(--table-clickable-row-hover-color);
}
.html .section-heading:focus {
    outline:none;
}
.html .section-heading.closed {
    background:var(--table-clickable-row-bg);
    color:var(--table-clickable-row-color);
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}
.html .section {
    padding:10px 10px 5px 10px;
    margin:0;
    background:white;
    border:1px solid var(--table-clickable-row-bg);
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}
.html .section .section {
    border-left:1px dotted #ccc;
    border-right:1px dotted #ccc;
}
.html .section .section:last-child {
    border-bottom:1px dotted #ccc;
}
.html .section .section-heading {
    border:none;
    box-shadow:none;
}

.dl-tile {
    background:var(--light-grey);
}

/* ExternalCaseEditPage colour overrides */

.case-details {
    background:transparent;
    padding:0;
}
.alert-comments {
    background:var(--light-grey);
}
.docaction-tiles ul li {
    border-color:var(--primary-color);
}


.bordertiles a {
    border-color:var(--primary-color);
}
.bordertiles a:hover {
    background:var(--primary-color-light);
    border-color:var(--primary-color-dark);
}

.nav-tabs .badge {
    background:var(--primary-color-dark);
}

.search-block input {
    border-color:var(--primary-color);
}


footer {
    background:transparent;
    color:var(--text-color);
    border-top:0;
}
footer .pageclass,
footer .version a,
footer .version {
    color:#888;
}
footer .version a:hover {
    color:#666;
}


.case-details {
    border:0;
}

.atab-buttons {
    background:var(--light-grey);
}

.formtable > tbody > tr:hover > td {
    background:var(--light-grey);
}

.docaction-tiles li.hilight {
    background-color:var(--warning-bg);
    border-color:var(--warning-color);
}

.deadline-expired {
    color:var(--error-color);
}

.unread .message {
    background-color:var(--success-bg);
    border-color:var(--success-color);
}

span.green-bullet::before {
    background:var(--success-color);
}
span.red-bullet::before {
    background:var(--error-color);
}

.alert-message {
    color:var(--warning-color);
}
.alert-message::before {
    content: "\e81e";
}

@media (max-width: 1430px) {
    .mainmenu {
        width: 120px;
    }
    .maincontent {
        margin-left: 120px;
    }
}