/* 
 * This file contains custom styles for the SmartAss web application.
 * A declaration made here will override a corresponding declaration in in 
 * standard.css. This way the SmartAss administrator can customize the 
 * appearance and also keep the changes when the application is beeing 
 * updated. Note: The application must be updated through the configuration
 * module to make sure this file isn't replaced.
 */


/* Typografiska justeringar */
/* @import url("/custom/css/typografisk_justering_gbg.css"); */

@font-face {
    font-family: 'icomoon';
    src:
        url('../../../custom/fonts/icomoon.ttf?aczl1j') format('truetype'),
        url('../../../custom/fonts/icomoon.woff?aczl1j') format('woff'),
        url('../../../custom/fonts/icomoon.svg?aczl1j#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}


/**********************************************************
 * Begin bootstrap
 **********************************************************/
:root {
    --dh-base-font-size: 16px;
    --dh-line-height: 1.5;
    --dh-leading: calc(var(--dh-base-font-size) * var(--dh-line-height));

    --dh-color-blue: #0076bc;
    --dh-color-dark-blue: #3f5564;
    --dh-color-turquoise: #008391;
    --dh-color-green: #008767;
    --dh-color-yellow: #ffcd37;
    --dh-color-red: #d24723;
    --dh-color-pink: #d53878;
    --dh-color-purple: #674a99;

    --dh-color-dark-blue-light: #e3e8e9;
    --dh-color-blue-light: #dbeff8;
    --dh-color-green-light: #dbede2;
    --dh-color-pink-light: #fbe1ec;
    --dh-color-purple-light: #ece2f1;
    --dh-color-red-light: #fde3d6;
    --dh-color-turquoise-light: #d6ebed;
    --dh-color-yellow-light: #fff2b0;

    --dh-color-dark-blue-lightest: #f5f7f8;
    --dh-color-blue-lightest: #f2fafc;
    --dh-color-green-lightest: #f0f9f3;
    --dh-color-pink-lightest: #fdf4f8;
    --dh-color-purple-lightest: #f6f1f9;
    --dh-color-red-lightest: #fef5f1;
    --dh-color-turquoise-lightest: #f2f9fa;
    --dh-color-yellow-lightest: #fffcef;
    --dh-color-overlay: rgb(255 255 255 / 85%);

    --dh-color-action-blue: #005799;
    --dh-color-action-blue-dark: #004172;
    --dh-color-action-red: #ad1d24;
    --dh-color-action-red-dark: #83161c;
    --dh-color-action-yellow: #ffd23c;
    --dh-color-action-yellow-dark: #ddb42a;
    --dh-color-action-green: #00664a;
    --dh-color-action-green-dark: #004d38;
    --dh-color-visited-link: var(--dh-color-purple);

    --dh-color-action-blue-light: #f5f7f8;
    --dh-color-action-red-light: #fde3d6;
    --dh-color-action-yellow-light: #fff7d2;
    --dh-color-action-green-light: #dbede2;
    --dh-color-blue-light: #dbeff8;
    --dh-color-green-light: #dbede2;
    --dh-color-yellow-light: #fff7d2;
    --dh-color-pink-light: #fbe1ec;
    --dh-color-purple-light: #ece2f1;
    --dh-color-dark-dark-light: #e3e8e9;
    --dh-color-turquoise-light: #d6ebed;
    --dh-color-red-light: #fde3d6;
    --dh-color-violet: #ece2f1;
    --dh-color-apricot: #fde3d6;

    --dh-color-white: #fff;
    --dh-color-grey-lightest: #fafafa;
    --dh-color-grey-lighter: #f5f5f5;
    --dh-color-grey-light: #e5e5e5;
    --dh-color-grey: #ccc;
    --dh-color-grey-dark: #959595;
    --dh-color-grey-darkest: #595959;
    --dh-color-black: #333;
    --dh-color-black-dark: #262626;
    --dh-color-grey-opaque: rgb(0 0 0 / 10%);
    --dh-color-grey-opaque-light: rgb(0 0 0 / 5%);

    --dh-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

.dh-blue { color: var(--dh-color-blue) !important; }
.dh-dark-blue { color: var(--dh-color-dark-blue) !important; }
.dh-blue-light { color: var(--dh-color-blue-light) !important; }
.dh-turquoise { color: var(--dh-color-turquoise) !important; }
.dh-turquoise-light { color: var(--dh-color-turquoise-light) !important; }
.dh-green { color: var(--dh-color-green) !important; }
.dh-green-light { color: var(--dh-color-green-light) !important; }
.dh-yellow { color: var(--dh-color-yellow) !important; }
.dh-yellow-light { color: var(--dh-color-yellow-light) !important; }
.dh-red { color: var(--dh-color-red) !important; }
.dh-apricot { color: var(--dh-color-apricot) !important; }
.dh-pink { color: var(--dh-color-pink) !important; }
.dh-pink-light { color: var(--dh-color-pink-light) !important; }
.dh-purple { color: var(--dh-color-purple) !important; }
.dh-violet { color: var(--dh-color-violet) !important; }
.dh-grey { color: var(--dh-color-grey) !important; }
.dh-grey-light { color: var(--dh-color-grey-light) !important; }
.dh-white { color: var(--dh-color-white) !important; }
.dh-black { color: var(--dh-color-black) !important; }

.dh-bkg-blue { background-color: var(--dh-color-blue) !important; }
.dh-bkg-blue-light { background-color: var(--dh-color-blue-light) !important; }
.dh-bkg-dark-blue { background-color: var(--dh-color-dark-blue) !important; }
.dh-bkg-dark-blue-light { background-color: var(--dh-color-dark-blue-light) !important; }
.dh-bkg-turquoise { background-color: var(--dh-color-turquoise) !important; }
.dh-bkg-turquoise-light { background-color: var(--dh-color-turquoise-light) !important; }
.dh-bkg-green { background-color: var(--dh-color-green) !important; }
.dh-bkg-green-light { background-color: var(--dh-color-green-light) !important; }
.dh-bkg-yellow { background-color: var(--dh-color-yellow) !important; }
.dh-bkg-yellow-light { background-color: var(--dh-color-yellow-light) !important; }
.dh-bkg-red { background-color: var(--dh-color-red) !important; }
.dh-bkg-red-light { background-color: var(--dh-color-red-light) !important; }
.dh-bkg-apricot { background-color: var(--dh-color-apricot) !important; }
.dh-bkg-pink { background-color: var(--dh-color-pink) !important; }
.dh-bkg-pink-light { background-color: var(--dh-color-pink-light) !important; }
.dh-bkg-purple { background-color: var(--dh-color-purple) !important; }
.dh-bkg-violet { background-color: var(--dh-color-violet) !important; }
.dh-bkg-grey { background-color: var(--dh-color-grey) !important; }
.dh-bkg-grey-light { background-color: var(--dh-color-grey-light) !important; }
.dh-bkg-white { background-color: var(--dh-color-white) !important; }
.dh-gradient {  background-image: var(--dh-gradient) !important; }

.dh-bkg-blue,
.dh-bkg-dark-blue,
.dh-bkg-turquoise,
.dh-bkg-green,
.dh-bkg-red,
.dh-bkg-pink,
.dh-bkg-purple {
    color: var(--dh-color-white) !important;
}

.dh-bkg-blue-light,
.dh-bkg-turquoise-light,
.dh-bkg-green-light,
.dh-bkg-yellow,
.dh-bkg-yellow-light,
.dh-bkg-apricot,
.dh-bkg-pink-light,
.dh-bkg-violet,
.dh-bkg-grey,
.dh-bkg-grey-light,
.dh-bkg-white {
    color: var(--dh-color-black) !important;
}

.d-none {
    display: none !important;
}

/**********************************************************
 * End bootstrap
 **********************************************************/



.tinymce,                           /* Text guide */
.faq-item,                          /* FAQ cell */
.faq-item .question-text,           /* FAQ cell (header) */
-faq-item .answer-text,             /* FAQ cell (content) */
main#contents-display #description, /* Outline introduction */
.intro-player > div > div           /* Outline introduction (new beta) */
{}


/**********************************************************
 * Begin fixes for various issues and adjustments
 **********************************************************/

/* Customized search container in admin */
/* body#AdminGuidesPage .admin-guides #searchtop {
    background-color: var(--dh-color-green) !important;
} */
body#AdminGuidesPage .admin-guides #searchtop::before {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    content: "Administration";
    font-size: 200px;
    color: rgba(255, 255, 255, .04);
    line-height: 1.2;
    font-weight: 600;
    overflow: hidden;
}

/* System message customization */
#systemMessage * {
    color: #333;
}
#systemMessage.card-error *,
#systemMessage.card-success * {
    color: #fff;
}
#systemMessage h2 {
    max-width: 50em;
    margin: 0 0 .2em 0;
    font-size: 2em !important;
    line-height: 1.4;
}
#systemMessage p {
    max-width: 50em;
    font-size: 1.2em !important;
    line-height: 1.6;
}
#systemMessage:after {
    content: '\e670' !important;
}

/* Fix formatting of lists */
.tinymce :where(ul, ol),
.answer-text :where(ul, ol) {
    margin: 0 0 1em 0 !important;
    padding: 0 0 0 2.5em !important;
    font-size: 1em;
    list-style-position: outside !important;
}
.tinymce li,
.answer-text li {
    font-size: 1em;
    /* line-height: var(--dh-leading) !important; */
    line-height: var(--dh-line-height) !important;
    margin: 0 !important;
    padding: 0;
}
.tinymce li :where(ul, ol),
.answer-text li :where(ul, ol) {
    padding-left: 1.25em !important;
    margin: 0 !important;
}

/* Fix missing styling of pre element */
pre {
    font-family: consolas, monospace;
}

/* Fix missing styling of blockquote */
.tinymce blockquote {
    margin: 1em 0 1em 50px;
    padding-left: 15px;
    border-left: 3px solid #ccc;
}


/**
 * Fix margins on elements in textguides
 * Set in /prosydo/css/super-main.css
 */
.html-widget .tinymce > *:last-of-type:not(.mce-resizehandle) {
    margin-bottom: revert;
}
.html-widget .tinymce > *:last-child:not(.mce-resizehandle) {
    margin-bottom: 0;
}


/* Fix for width in receiver management in PT:s */
.email-content {
    width: 100% !important;
    max-width: 100% !important;
}
/* Fix to allow group container (and userrights container) to expand vertically in PT:s */
.email-content .chosen-container-multi .chosen-choices {
    display: block;
}


/* Fix for spacing in knowledge test (embedded in textguide with multiple questions in same test) */
#knowledgeTestPage.custom-checkboxes .questionSeparator {
    border-top: 0;
    height: 1em;
}


/* Fix width of settings page for owners (and authors?) */
body#AdminSetAuthorForGuidesPage #contentPage,
body#AdminSetOwnerForGuidesPage #contentPage {
    max-width: 600px !important;
}


/* Fix for too small icons in buttons */
[class^=icon-], [class*=" icon-"] {
    font-size: 24px;
}

/* Fix jumping FAQ-widget
   Occurs when the elements collapsed height is less than 80px (min-height for widgets) */
.sections .section .cells .cell:has(.faq-widget) {
    min-height: auto;
}

/* Fix background-color on textguides with max width */
body:has(.sections-container[style*="max-width"]) {
    background: #fff !important;
}


/* Hide subscription settings on profile page */
#subscriptionsHolder {
    display: none;
}

/* Fix embedded movie guides in FAQ-widgets */
.answer-text iframe[src*="stepListMode"] {
    border: 0;
    aspect-ratio: 16/10;
    width: 100%;
    height: auto !important;
}

/* Fix correct font in trigger code textarea */
textarea[name="actionScript"] {
    font-family: consolas, monospace;
}

/* Fix height of dropdown list in multi select field */
.chosen-container .chosen-results {
    max-height: 50vh;
}

/* Hide arrow in faq if the question contains the class .dh-faq-hidearrow */
.faq-container:has(.dh-faq-hidearrow) .toggle-answer {
    display: none;
}    

/* Fix cursor in TinyMCE in textguides */
.primary-editor .tinymce {
    cursor: auto;
}

/* Fix for underlined links in various places */
.ui-datepicker-header a {    /* Navigation buttons in PT datepicker */
    text-decoration: none;
    color: inherit;
}

/* Hide marketing modal and inactivated menu items */
#ic-marketing-modal,
.menu-item-group .licensedisabled,
#ic-feedback-modal {
    display: none !important;
}

/* Remove height on empty text cells in textguides */
@media screen and (max-width: 700px) {
    .sections .section .cells .cell:has(.tinymce:empty) {
        min-height: 0 !important;
        margin: 0 10px !important;
    }
}

/* Fix image modal in textguides */
.textguide-editor div.file-list ol.file-list-content.tile-list {
    max-height: calc(100vh - 275px) !important;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 6px;
    
    li.list-item {
        position: relative;
        width: auto !important;
        margin: 0 !important;
        border: 0;
        padding-bottom: 28px;
        
        .list-thumbnail {
            /*height: 107px !important;*/
            width: 100%;
            height: auto;
            aspect-ratio: 16/10;
            
            
            .list-thumbnail-icon {
                padding: 0 !important;
                left: 50% !important;
                top: 50% !important;
                transform: translate(-25px, -20px);
            }
        }
        
        &.entity-selected {
            .list-thumbnail-icon {
                transform: translate(-31px, -24px);
                color: inherit;
            }
        }
        
        .list-name {
            max-height: none;
            min-height: auto;
            word-break: break-all;
            margin-bottom: .5em;
        }
        
        .list-content {
            
            .list-title {
                .list-name {
                    font-size: 13px !important;
                }
                
                .list-date {
                    font-size: 12px !important;
                    font-weight: normal !important;
                    color: rgba(0, 0, 0, .87) !important;
                }
            }
            
            .list-actions {
                width: auto;
                position: absolute;
                bottom: 0;
                right: 0;
            }
        }
        
        .dropdown-menu {
            inset: auto 0 0 auto !important;
            transform: translate(-40px, 0) !important;
            width: auto !important;
            
            a {
                text-decoration: none;
                padding: 3px 1em 3px 24px;

                [class^=icon-] {
                    font-size: 18px;
                    top: 3px;
                    left: 3px;
                }
            }
            
        }
        
        .show {
            display: inline-block !important;
        }
    }
}





/**********************************************************
 * End fixes for various issues
 **********************************************************/





/**********************************************************
 * Begin general classes for use in textguides
 **********************************************************/

/* Reset styles of base elements in text guides */
.cell .tinymce {
    div,
    p,
    span,
    a,
    ol,
    li,
    td {
        font-family: revert;
        font-size: revert;
        line-height: revert;
        font-weight: revert;
        letter-spacing: revert;
        text-decoration: revert;
        text-transform: revert;
        color: revert;
    }
}

/* Extra small section width, add anywhere, needs to be added in every section */
.cells:has(.dh-xsmall) {
    max-width: 800px !important;
}
/* Extra small section width, add anywhere, sets width of every section */
.sections:has(.dh-xsmall-all) .cells {
    max-width: 800px !important;
}

/* Hide arrow in faq if the question contains the class .dh-faq-hidearrow */
.faq-container:has(.dh-faq-hidearrow) .toggle-answer {
    display: none;
}    

/* Decrease section height on sections that contain .dh-logo */
.dh-logo img {
    width: 145px;
    border-radius: 0 !important;
}
.sections .section .cells:has(.dh-logo) .cell {
    min-height: 40px;
    margin-top: 12px;
    margin-bottom: 7px;
}
.sections .section .cells:has(.dh-logo) .cell:first-child {
    min-width: 100px;
    width: auto !important;
    margin-right: 0;
}
.sections .section .cells:has(.dh-logo) .cell:nth-child(2) {
    margin-left: 0;
}
@media screen and (max-width: 700px) {
    .dh-logo img {
        width: 122px;
    }
    .sections .section .cells:has(.dh-logo) .cell:nth-child(2) .tinymce * {
        font-size: 14px !important;
    }
    
    /* Fix margins in textguides on mobile when using .dh-logo class */
    .sections .section .cells:has(.dh-logo) .cell .widget:not(:has(.dh-logo)) {
        padding: 0 !important;
    }
    .sections .section .cells .cell:first-child .widget:has(.dh-logo) {
        padding-left: 0 !important;
    }
    .sections .section .cells .cell:last-child .widget:has(.dh-logo) {
        padding-right: 0 !important;
    }

}
@media screen and (max-width: 980px) {
    .sections .row:not(.no-stacking-on-mobiles) .cells:has(.dh-logo) .column {
        width: auto !important;
    }
}
.sections .section .cells:has(.dh-logo) .cell .html-widget {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.sections .section .cells:has(.dh-logo) .cell .html-widget .tinymce p {
    line-height: 1.2 !important;
}



.dh-code {
    background: #f4f4f4;
    padding: 1em;
    margin: 1em;
    font-family: consolas, terminal, monaco, monospace;
    font-size: .9em;
}

@media (min-width: 500px) {
    .dh-media {
        display: flex;
        align-items: flex-start;
        margin: 1em 0;
    }
    .dh-media-center {
        align-items: center;
    }
    .dh-media > :first-child {
        margin: 0 1.5em 0 0 !important;
    }
    .dh-media.dh-media-gap-lg > :first-child {
        margin: 0 4em 0 0 !important;
    }
    .dh-media > :last-child {
        margin: 0 !important;
    }
    .dh-media > :not(img) {
        flex: 1;
    }
    .dh-media-reverse > :first-child {
        order: 1;
        margin: 0 0 0 1.5em !important;
    }
    .dh-media-reverse.dh-media-gap-lg > :first-child {
        margin: 0 0 0 4em !important;
    }
    .dh-media > :first-child p,
    .dh-media > :last-child p {
        margin: 0 !important;
    }
    .dh-media p a {
        line-height: inherit;
    }
    .dh-media img {
        border-radius: 6px;
        max-width: 200px !important;
    }
    .dh-media img.dh-media-img-border-white {
        border: 4px solid #fff;
    }
}

.dh-media.dh-media-link {
    align-items: center;
}
.dh-media.dh-media-link a {
    text-decoration: none !important;
    color: inherit !important;
    /* display: block; */

    position: relative;

}
.dh-media.dh-media-link a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background-color: currentcolor;
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
}
.dh-media.dh-media-link a:hover::before {
    transform-origin: left;
    transform: scaleX(1);
}

.dh-media.dh-profile-card {
    img {
        max-width: 50% !important;
        height: 100% !important;
        border-radius: 8px 0 0 8px !important;
        margin: 0 !important;
    }
    p {
        padding: 1em 2em 1em 2em;
        font-size: 14pt;
        line-height: 1.5;
    }
    @media (max-width: 600px) {
        p {
            font-size: 14pt;
            color: blue;
        }
    }
}

.dh-medialink {

	a {
	    text-decoration: none;
	    color: currentcolor;
	    display: flex;
	    align-items: center;
	    padding: 1em;
	    transition: box-shadow .2s;
	    min-height: 80px;
	    border-radius: 8px;
	
		&:visited {
		    color: currentcolor;
		}
		&[data-mce-selected="inline-boundary"] {
		    background: transparent !important;
		}
		&:hover {
		    box-shadow: 0px 0px 8px rgba(0, 0, 0, .5);
		}
		& > :first-child {
		    margin: 0 1.5em 0 0 !important;
		}
		& > :last-child {
		    margin: 0 !important;
		}
		& > :not(img) {
		    /* flex: 1; */
		}
		img {
		    border-radius: 6px;
		    max-width: 100px;
		    max-height: 100px;
		}
		/* span {
		    position: relative;
		    display: inline-block;
		
			&::before {
			    content: '';
			    position: absolute;
			    width: 100%;
			    height: 3px;
			    border-radius: 3px;
			    background-color: currentcolor;
			    bottom: 0;
			    left: 0;
			    transform-origin: right;
			    transform: scaleX(0);
			    transition: transform .3s ease-in-out;
			}
		}
		&:hover span::before {
		    transform-origin: left;
		    transform: scaleX(1);
		} */
	}
}


.dh-img-shadow {
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .5);
}
.dh-img-circle {
    border-radius: 50%;
}

.dh-circle {
    border-radius: 50%;
    width: 1.75em;
    height: 1.75em;
    text-align: center;
    line-height: 1.75 !important;
    font-size: 34px !important;
    font-weight: bold !important;
    margin: 0 auto;

    &.dh-circle-wide {
        width: 2.5em;
        height: 2.5em;
        line-height: 2.5 !important;
    }
    &.dh-circle-lg {
        font-size: 64px !important;
    }
    &.dh-circle-xl {
        font-size: 96px !important;
    }
}

.dh-filelist,
.dh-filelist ul {
    list-style-type: none !important;
    margin: 1.5em 0 !important;
    padding: 0 0 0 .7em !important;
}
.dh-filelist ul {
    margin: 0 !important;
    padding: .5em 0 0 1.9em !important;
}
.dh-filelist li {
    margin: 0 0 .5em 0 !important;
}
.dh-filelist li a {
    display: inline-block;
    padding: .1em .8em .1em 2em !important;
    text-decoration: none !important;
    color: inherit !important;
    line-height: 1.4 !important;
    border-radius: 4px;
    position: relative;
}
.dh-filelist li a:before {
    font-family: 'FontAwesome';
    content: "\f016"; /* empty page */
    margin-right: .5em;
    font-size: 1.2em;
    font-weight: normal;
    line-height: 1;
    color: inherit;
    position: absolute;
    top: .14em;
    left: .2em;
}
.dh-filelist li a[href*=".txt" i]:before {
    content: "\f0f6";
}
.dh-filelist li a[href*=".pdf" i]:before {
    content: "\f1c1";
}
.dh-filelist li a[href*=".doc" i]:before,
.dh-filelist li a[href*=".docx" i]:before,
.dh-filelist li a[href*=".dotx" i]:before {
    content: "\f1c2";
}
.dh-filelist li a[href*=".xls" i]:before,
.dh-filelist li a[href*=".xlsx" i]:before {
    content: "\f1c3";
}
.dh-filelist li a[href*=".ppt" i]:before,
.dh-filelist li a[href*=".pptx" i]:before {
    content: "\f1c4";
}
.dh-filelist li a[href*=".jpg" i]:before,
.dh-filelist li a[href*=".png" i]:before,
.dh-filelist li a[href*=".gif" i]:before {
    content: "\f1c5";
}
.dh-filelist li a[href*=".mp4" i]:before {
    content: "\f1c8";
}
.dh-filelist li a[href*=".wav" i]:before {
    content: "\f1c7";
}
.dh-filelist li a.dh-link:before {
    content: "\f0ac"; /* globe */
}
.dh-filelist li a:hover {
    background-color: rgba(255, 255, 255, .5);
}
.dh-filelist.dh-lightbkg li a:hover {
    background-color: rgba(0, 0, 0, .05);
}

a.dh-signlanguage {
    display: inline-block;
    background: no-repeat .4em center/1.5em url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%23333333" d="M91.434 483.987c-.307-16.018 13.109-29.129 29.13-29.129h62.293v-5.714H56.993c-16.021 0-29.437-13.111-29.13-29.129C28.16 404.491 40.835 392 56.428 392h126.429v-5.714H29.136c-16.021 0-29.437-13.111-29.13-29.129.297-15.522 12.973-28.013 28.566-28.013h154.286v-5.714H57.707c-16.021 0-29.437-13.111-29.13-29.129.297-15.522 12.973-28.013 28.566-28.013h168.566l-31.085-22.606c-12.762-9.281-15.583-27.149-6.302-39.912 9.281-12.761 27.15-15.582 39.912-6.302l123.361 89.715a34.287 34.287 0 0 1 14.12 27.728v141.136c0 15.91-10.946 29.73-26.433 33.374l-80.471 18.934a137.16 137.16 0 0 1-31.411 3.646H120c-15.593-.001-28.269-12.492-28.566-28.014zm73.249-225.701h36.423l-11.187-8.136c-18.579-13.511-20.313-40.887-3.17-56.536l-13.004-16.7c-9.843-12.641-28.43-15.171-40.88-5.088-12.065 9.771-14.133 27.447-4.553 39.75l36.371 46.71zm283.298-2.103l-5.003-152.452c-.518-15.771-13.722-28.136-29.493-27.619-15.773.518-28.137 13.722-27.619 29.493l1.262 38.415L283.565 11.019c-9.58-12.303-27.223-14.63-39.653-5.328-12.827 9.599-14.929 28.24-5.086 40.881l76.889 98.745-4.509 3.511-94.79-121.734c-9.58-12.303-27.223-14.63-39.653-5.328-12.827 9.599-14.929 28.24-5.086 40.881l94.443 121.288-4.509 3.511-77.675-99.754c-9.58-12.303-27.223-14.63-39.653-5.328-12.827 9.599-14.929 28.24-5.086 40.881l52.053 66.849c12.497-8.257 29.055-8.285 41.69.904l123.36 89.714c10.904 7.93 17.415 20.715 17.415 34.198v16.999l61.064-47.549a34.285 34.285 0 0 0 13.202-28.177z"/></svg>');
    padding: .5em 1em .5em 2.5em !important;
    text-decoration: none;
    color: inherit !important;
    line-height: 1.4 !important;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 4px;
}
a.dh-signlanguage.dh-lightbkg {
    border-color: rgba(0, 0, 0, .1);
}
a.dh-signlanguage:hover {
    background-color: rgba(255, 255, 255, .5);
}
a.dh-signlanguage.dh-lightbkg:hover {
    background-color: rgba(0, 0, 0, .05);
}

.dh-icon {
    display: inline-block;
    font-size: 68px !important;

    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1 !important;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.dh-icon span {
    display: none;
}
.dh-icon-center {
    display: block;
    text-align: center;
    padding-left: .5em; /* negate the nbsp */
}
.dh-icon-target:before {
  content: "\e900";
}
.dh-icon-hamburger:before {
  content: "\e901";
}
.dh-icon-dots:before {
  content: "\e902";
}
.dh-icon-help:before {
  content: "\e903";
}
.dh-icon-check:before {
  content: "\e904";
}
.dh-icon-time:before {
  content: "\e905";
}
.dh-icon-question-answer:before {
  content: "\e911";
}
.dh-icon-sequence:before {
  content: "\e912";
}
.dh-icon + :is(h2,h3,h3,h4,h5,h6) {
    margin-top: .75em !important;
}

/* Skapa en länkpuff i en textcell */
.dh-puff {
    min-height: 80px;
    display: flex;
    flex: 1;
    border-radius: 8px;

    img {
        display: block;
    }
    span:has(a),
    strong:has(a) {
        display: flex;
        flex: 1;
    }
    a {
        flex: 1;
        flex-direction: column;
        display: flex;
        align-items: center;
        justify-content: center;
        color: inherit !important;
        font-size: 24px;
        line-height: 1.4;
        padding: 16px;
        font-weight: inherit;
        text-decoration: none;
        border-radius: 8px;
        /* min-height: 116px; */
        text-align: center;
    }
    &.dh-puff-imgtxt {
        a {
            padding: 0 0 16px 0;
        }
        img {
            margin: 0 0 16px 0;
            border-radius: 0 !important;
        }
    }
    &.dh-puff-top a {
        justify-content: start;
    }
}
.content:has(.dh-puff:not(.dh-puff-top)),
.widget:has(.dh-puff:not(.dh-puff-top)),
.tinymce:has(.dh-puff:not(.dh-puff-top)) {
    display: flex;
    flex: 1;
    align-self: stretch !important;
    padding: 0 !important;
}
.textguide-page:not(.textguide-editor) .cell:has(.dh-puff) {
    overflow: hidden;
}
.cell:has(.dh-puff):hover {
    box-shadow: 
        0 0px 0.9px rgba(0, 0, 0, 0.3),
        0 0px 7px rgba(0, 0, 0, 0.6) !important;
}
.cell:has(.dh-puff[class*="dh-bkg"]) {
    background-color: transparent !important;
}
.mce-content-body .dh-puff [data-mce-selected=inline-boundary] {
    background: transparent;
}

/* Skapa en länkpuff i en textcell */
.dh-textpuff {
    min-height: 80px;
    border-radius: 8px;
    
    &.dh-border {
        border: 1px solid var(--dh-color-grey-light);
    }

    span:has(a),
    strong:has(a) {
        display: flex;
        flex: 1;
    }
    a {
        flex: 1;
        flex-direction: column;
        display: flex;
        align-items: center;
        justify-content: center;
        color: inherit !important;
        font-size: 24px;
        line-height: 1.4;
        padding: 16px;
        font-weight: inherit;
        text-decoration: none !important;
        border-radius: 8px;
        /* min-height: 116px; */
        text-align: left !important;
        
        span {
            display: block;
            width: 100%;
            
            &:first-child {
                font-size: 28px;
                font-weight: bold;
                &:not(:last-child) {
                    margin: 0 0 .25em 0;
                }
            }
            &:not(:first-child) {
                
            }
        }
    }
}
.cell:has(.dh-textpuff):hover {
    box-shadow: 
        0 0px 0.9px rgba(0, 0, 0, 0.3),
        0 0px 7px rgba(0, 0, 0, 0.6) !important;
}
.cell:has(.dh-textpuff[class*="dh-bkg"]) {
    background-color: transparent !important;
}
.mce-content-body .dh-textpuff [data-mce-selected=inline-boundary] {
    background: transparent;
}

/* Skapa en inforuta med ikon */
.dh-infobox {
    --size: 56px;
    --icon-padding: 24px;

    position: relative;
    min-height: calc(var(--icon-padding) * 2 + var(--size));
    padding: 1.5em 2em 1.5em calc(var(--icon-padding) * 2 + var(--size));
    border-radius: 6px;
    line-height: 1.5;
    margin: 0 0 1em 0;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); 

    &::before {
        content: '';
        width: var(--size);
        height: var(--size);
        position: absolute;
        top: var(--icon-padding);
        left: var(--icon-padding);

        --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath style='fill:%23333333;' d='M12,0C5.373,0,0,5.373,0,12s5.373,12,12,12s12-5.373,12-12S18.627,0,12,0z M12,19.66%0Ac-0.938,0-1.58-0.723-1.58-1.66c0-0.964,0.669-1.66,1.58-1.66c0.963,0,1.58,0.696,1.58,1.66C13.58,18.938,12.963,19.66,12,19.66z%0AM12.622,13.321c-0.239,0.815-0.992,0.829-1.243,0c-0.289-0.956-1.316-4.585-1.316-6.942c0-3.11,3.891-3.125,3.891,0%0AC13.953,8.75,12.871,12.473,12.622,13.321z'/%3E%3C/svg%3E");
        mask: var(--svg);
        background: var(--dh-color-black);
    }
    
    p { margin: 0; }
    &.dh-infobox-center::before {
        top: calc(50% - (var(--size) / 2));
    }
    &.dh-infobox-with-bar {
        border-left: 14px solid;
    }
    &.dh-infobox-icon-pink {
        border-color: var(--dh-color-pink);
        &::before { background: var(--dh-color-pink) !important; }
    }
}

/**********************************************************
 * End general classes for use in textguides
 **********************************************************/





/**************************************************************************
 * Begin styling of predefined formats (success, warning, error) in TinyMCE
 **************************************************************************/

p:is(.card-success, .card-error, .card-warning, .card-info, .card-custom) {
    padding-left: 70px !important;
    box-shadow: none;
    color: var(--dh-color-black) !important;
    &::after {
        left: 21px !important;
        font-size: 20px !important;
        color: var(--dh-color-white) !important;
    }
}
/* p.card-success {
    background-color: var(--dh-color-green);
    color: var(--dh-color-white) !important;
}
p.card-error {
    background-color: var(--dh-color-red);
    color: var(--dh-color-white) !important;
}
p.card-warning {
    background-color: var(--dh-color-yellow);
    color: var(--dh-color-black) !important;
}
p.card-warning::after {
    color: #EBB000;
} */

p.card-success {
    background-color: var(--dh-color-green-light);
    &::after {
        background-color: var(--dh-color-green);
    }
}
p.card-error {
    background-color: var(--dh-color-red-light);
    &::after {
        background-color: var(--dh-color-red);
    }
}
p.card-warning {
    background-color: var(--dh-color-yellow-light);
    &::after {
        background-color: var(--dh-color-yellow);
        color: var(--dh-color-black) !important;
    }
}
p.card-info, p.card-custom {
    background-color: var(--dh-color-blue-light);
    padding: 16px;
    margin: 16px 0;
    position: relative;
    font-size: 16px;
    border-radius: 4px;
    
    &::after {
        position: absolute;
        background-color: var(--dh-color-blue);
        color: var(--dh-color-white) !important;
        content: "\e670";
        transform: rotate(180deg);
        border-radius: 20px;
        font-family: "infocaption-icomoon";
        top: 50%;
        border: 1px solid rgba(0, 0, 0, 0);
        border-radius: 20px;
        text-align: center;
        line-height: normal;
        box-sizing: content-box;
        width: 20px;
        height: 20px;
        margin-top: -15px;
        margin-right: 0px;
        padding: 4px 4px;
        line-height: 20px;
    }
}
p.card-custom {
    &.card-custom-green { background-color: var(--dh-color-green-light); &::after { background-color: var(--dh-color-green); color: var(--dh-color-white) !important; } }
    &.card-custom-red { background-color: var(--dh-color-red-light); &::after { background-color: var(--dh-color-red); color: var(--dh-color-white) !important; } }
    &.card-custom-yellow { background-color: var(--dh-color-yellow-light); &::after { background-color: var(--dh-color-yellow); color: var(--dh-color-black) !important; } }
    &.card-custom-blue { background-color: var(--dh-color-blue-light); &::after { background-color: var(--dh-color-blue); color: var(--dh-color-white) !important; } }
    &.card-custom-dark-blue { background-color: var(--dh-color-dark-blue-light); &::after { background-color: var(--dh-color-dark-blue); color: var(--dh-color-white) !important; } }
    &.card-custom-pink { background-color: var(--dh-color-pink-light); &::after { background-color: var(--dh-color-pink); color: var(--dh-color-white) !important; } }
    &.card-custom-purple { background-color: var(--dh-color-purple-light); &::after { background-color: var(--dh-color-purple); color: var(--dh-color-white) !important; } }
    &.card-custom-turquoise { background-color: var(--dh-color-turquoise-light); &::after { background-color: var(--dh-color-turquoise); color: var(--dh-color-white) !important; } }

    &.card-custom-icon-success::after { content: "\f00c"; transform: rotate(0); }
    &.card-custom-icon-error::after { content: "\f00d"; transform: rotate(0); }
    &.card-custom-icon-warning::after { content: "\e670"; transform: rotate(0); }
    &.card-custom-icon-info::after { content: "\e670"; }
}



p:is(.card-success2, .card-error2, .card-warning2, .card-info2, .card-custom2) {
    box-shadow: none;
    padding: 16px 20px;
    border-width: 2px 2px 2px 58px;
    border-style: solid;
    border-radius: 6px;
    position: relative;
    color: var(--dh-color-black) !important;
    margin: 2em 0;
}
p:is(.card-success2, .card-error2, .card-warning2, .card-info2, .card-custom2)::after {
    left: calc(-29px - 13px) !important;
    font-size: 26px !important;
    font-family: "infocaption-icomoon";
    position: absolute;
    top: calc(50% - 13px);
    text-align: center;
    width: 26px;
    background-color: transparent;
    color: var(--dh-color-white) !important;
}
p.card-success2 {
    background-color: var(--dh-color-green-lightest);
    border-color: var(--dh-color-green);
    &::after {
        content: "\f00c";
    }
}
p.card-error2 {
    background-color: var(--dh-color-red-lightest);
    border-color: var(--dh-color-red);
    &::after {
        content: "\f00d";
    }
}
p.card-warning2 {
    background-color: var(--dh-color-yellow-lightest);
    border-color: var(--dh-color-yellow);
    &::after {
        content: "\e670";
        top: calc(50% - 12px);
    }
}
p.card-info2 {
    background-color: var(--dh-color-blue-lightest);
    border-color: var(--dh-color-blue);
    &::after {
        content: "\e670";
        top: calc(50% - 14px);
        transform: rotate(180deg);
    }
}
p.card-custom2 {
    &.card-custom-green { background-color: var(--dh-color-green-lightest); border-color: var(--dh-color-green); }
    &.card-custom-red { background-color: var(--dh-color-red-lightest); border-color: var(--dh-color-red); }
    &.card-custom-yellow { background-color: var(--dh-color-yellow-lightest); border-color: var(--dh-color-yellow); }
    &.card-custom-blue { background-color: var(--dh-color-blue-lightest); border-color: var(--dh-color-blue); }
    &.card-custom-dark-blue { background-color: var(--dh-color-dark-blue-lightest); border-color: var(--dh-color-dark-blue); }
    &.card-custom-pink { background-color: var(--dh-color-pink-lightest); border-color: var(--dh-color-pink); }
    &.card-custom-purple { background-color: var(--dh-color-purple-lightest); border-color: var(--dh-color-purple); }
    &.card-custom-turquoise { background-color: var(--dh-color-turquoise-lightest); border-color: var(--dh-color-turquoise); }

    &.card-custom-icon-success::after { content: "\f00c"; }
    &.card-custom-icon-error::after { content: "\f00d"; }
    &.card-custom-icon-warning::after { content: "\e670"; }
    &.card-custom-icon-info::after { content: "\e670"; top: calc(50% - 14px); transform: rotate(180deg); }
}

/************************************************************************
 * End styling of predefined formats (success, warning, error) in TinyMCE
 ************************************************************************/



/**********************************************************
 * Begin startpage menu for collections
 **********************************************************/

.sections:not(.ui-sortable) { /* prevent styles when editing */
    .dh-startmenu {
        --dh-startmenu-bkg: var(--dh-color-grey);
        margin: 0 0 16px 0 !important;
        padding: 0 !important;
        list-style-type: none !important;
        
        li {
            padding: 0;
            margin: 8px 0 0 0 !important;
            
            a {
                --icc-row-outline-color: #ebebeb;
                display: flex;
                align-items: center;
                box-shadow: 0 1px 3px #0000000f, 0 1px 2px #00000008;
                width: 100%;
                text-decoration: none !important;
                font-size: 14px !important;
                line-height: 1.4 !important;
                font-weight: 700 !important;
                color: #333 !important;
                padding: 8px 60px 8px 0;
                outline: 1px solid var(--icc-row-outline-color);
                border-radius: 8px;
                min-height: auto;
                background-color: #f8f8f8;
                min-height: 52px;
                
                &::before {
                    display: inline-block;
                    content: '';
                    margin: 0 16px 0 8px;
                    width: 8px;
                    height: 28px;
                    border-radius: 4px;
                    background: var(--dh-startmenu-bkg);
                }
                * {
                    line-height: inherit !important;
                }
                &:hover {
                    --icc-row-outline-color: #b1bbc8;
                    box-shadow: 0 1px 3px #f6f7f9, 0 1px 2px #f6f7f9;
                }
            }
        }
        
        &.dh-startmenu-blue { --dh-startmenu-bkg: var(--dh-color-blue); }
        &.dh-startmenu-dark-blue { --dh-startmenu-bkg: var(--dh-color-dark-blue); }
        &.dh-startmenu-turquoise { --dh-startmenu-bkg: var(--dh-color-turquoise); }
        &.dh-startmenu-green { --dh-startmenu-bkg: var(--dh-color-green); }
        &.dh-startmenu-yellow { --dh-startmenu-bkg: var(--dh-color-yellow); }
        &.dh-startmenu-red { --dh-startmenu-bkg: var(--dh-color-red); }
        &.dh-startmenu-apricot { --dh-startmenu-bkg: var(--dh-color-apricot); }
        &.dh-startmenu-pink { --dh-startmenu-bkg: var(--dh-color-pink); }
        &.dh-startmenu-purple { --dh-startmenu-bkg: var(--dh-color-purple); }
        &.dh-startmenu-violet { --dh-startmenu-bkg: var(--dh-color-violet); }
    }
}

/**********************************************************
 * End startpage menu for collections
 **********************************************************/





/**********************************************************
 * Begin mobile
 * For use in single page text guides 
 **********************************************************/
.dh-mobileheader {
    .dh-mobilelogoheader {
        background: no-repeat left center/150px url(../custom/gbg/gbg_li.svg);
        height: 50px;
        font-size: 24px;
        line-height: 50px !important;
        text-align: center;
        max-width: 1160px;
        margin: 0 auto;
    }
    h1 {
        margin: 12px 0 0 0;
        padding: 36px 24px;
    }
    h1[class=""] {
        padding: 36px 0 0 0;
    }

    @media only screen and (max-width: 600px) {
        .dh-mobilelogoheader {
            background-size: 115px auto;
            height: 38px;
            font-size: 18px;
            line-height: 38px !important;
            text-align: right;
        }
        h1 {
            margin: 12px -30px 0 -30px;
            padding: 12px 30px;
        }
    }
}

/**********************************************************
 * End mobile
 **********************************************************/





/**********************************************************
 * Begin experiments...
 **********************************************************/

.dh-media.dh-profile-card {
    img {
        max-width: 50% !important;
        height: 100% !important;
        border-radius: 8px 0 0 8px !important;
        margin: 0 !important;
    }
    p {
        padding: 1em 2em 1em 2em;
        font-size: 14pt;
        line-height: 1.5;
    }
    @media (max-width: 600px) {
        p {
            font-size: 14pt;
        }
    }
}


/* Create a menu from a header and a ul element */
.dh-menu {
    &:is(h2, h3, h4, h5, h6) {
        margin: 0 !important;
        padding: 12px !important;
    }
    
    &:is(ul) {
        list-style-type: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    li {
        margin: 0 !important;
        padding: 0;
    
        &:not(:last-child) {
            border-bottom: 1px solid #d9d9d9;
        }
        a {
            display: block;
            padding: 12px;
            text-decoration: none !important;
            color: inherit !important;
            /* background: #d9d9d9;*/
        }
        /*&:nth-child(even) a {
            background: #bfbfbf;
        }*/

        a:hover {
            background: rgba(0, 0, 0, .05);
        }
    }
}

/**********************************************************
 * End experiments
 **********************************************************/