/*********************************************************************/
/***** BEGIN DESIGNPLUS THEME IMPORT & CUSTOMIZATION  ****************/
/*********************************************************************/
/*** Legacy Sidebar ***/
/* For Main CSS file */
@import url(https://designtools.ciditools.com/css/themes.css);
/* For Mobile app CSS file */
/*@import url(https://designtools.ciditools.com/css/app.css);*/
/* Institution color customizations */
@import url(https://designtools.ciditools.com/css/inst_theme_overrides.css);

/*** New Sidebar ***/
/* For Main CSS files */
@import url(https://designplus.ciditools.com/css/content.css);
@import url(https://designplus.ciditools.com/css/editor.css);
/* For Mobile app CSS file */
/*@import url(https://designplus.ciditools.com/css/mobile.css);*/

:root {
    --dt-color-primary: #361E40;
    --dt-color-primary-contrast: #FFFFFF;
    --dt-color-primary-dark-text: #361E40;
    --dt-color-secondary: #FDEBB0;
    --dt-color-secondary-contrast: #000000;
    --dt-color-secondary-dark-text: #000000;
    --dt-color-accent: #3C35F2;
    --dt-color-accent-contrast: #FFFFFF;
    --dt-color-accent-dark-text: #3C35F2;
    --dt-color-gray: #CCCCCC;
    --dt-color-gray-contrast: #000000;
    --dt-color-gray-dark-text: #636363;
    --dt-color-white: #FFFFFF;
    --dt-color-white-contrast: #000000;
    --dt-color-white-dark-text: #707070;
    --dt-color-graybg: #E6E6E6;
    --dt-color-graybg-contrast: #000000;
}

/*********************************************************************/
/***** END DESIGNPLUS THEME IMPORT & CUSTOMIZATION   *****************/
/*********************************************************************/

@media only screen and (max-width: 828px) {
    /* ==============================
    Årsak og virkning
   ============================== */
   .aarsak_virkning i.dp-icon.fas.fa-arrow-right{
transform: rotate(90deg);
  transform-origin: center; 

}
}




@media only screen and (max-width: 1000px) {
    .dp-wrapper blockquote {
        margin: 1rem 1rem 1rem !important;
    }

    .refleksjonboks-to,
    .refleksjonboks-tre,
    .modulboks-tre,
    .modulboks-to,
    .tekstbokser-tre,
    .tekstbokser-to {
        flex-direction: column;
    }

    .boks-tom {
        display: none;
    }

    .refleksjon-en,
    .refleksjon-to,
    .refleksjon-tre,
    .moduloversikt-en,
    .moduloversikt-to,
    .moduloversikt-tre,
    .boks-en,
    .boks-to,
    .boks-tre {
        width: 100%;
        margin: 1%;
    }

    .bildebokskontainer {
        flex-direction: column;
    }

    figure {
        width: 100%;
    }

    .dp-wrapper .dp-progress-icons {
        display: none;
    }
}



/* ==============================
   Diverse
   ============================== */
/*Remove space in conten block*/
.dp-wrapper .dp-content-block {
    margin-bottom: 0;
    padding-bottom: 0;
}

/*Adding distance to escription list*/
.dp-box-left dd {
    padding-bottom: 1.5%;
    margin-left: 0 !important;
}

/* Alphabet snippet*/
.alfabet {
    text-align: center;
    font-size: 1.5em;
    scroll-behavior: smooth;
}

/*VGO - Kilder*/
.kilde p {
    font-size: 10pt;
    font-style: italic;
}



/* ==============================
   Headings
   ============================== */

/*H2*/
h2.dp-heading {
    background-color: #361E40;
    color: #FFFFFF !important;
    padding: 2% !important;
}

/*H2 Remove purple box to the left- H2*/
.dp-box-left span.dp-header-pre {
    display: none !important;
}

/*H2 Purple backgroun- H2*/
.dp-wrapper .dp-box-left h2 {
    background-color: #361E40;
    color: #FFFFFF !important;
    padding: 2% !important;

}

.dp-box-left h2.dp-heading {
    margin-bottom: 1rem !important;
}

.dp-wrapper .dp-header.dp-box-left .dp-heading {
    border-bottom: 1px solid rgba(0, 0, 0, .3);
    border-top: 1px solid rgba(0, 0, 0, .3);
}

/*H3*/
.dp-box-left h3 {
    color: #361E40;
    margin: 3rem 0rem 0.7rem 0rem;
}

/*H3, H4, H5, H6 Purple color*/
.dp-box-left h4,
.dp-box-left h5,
.dp-box-left h6 {
    color: #361E40;
    margin: 2rem 0rem 0.7rem 0rem;
}



/* ==============================
   Lenker/Links
   ============================== */
/*NEW CODE: Show visited- Links */
.dp-box-left a:visited {
    color: #361E40;
}

.dp-box-left a {
    color: #3C35F2;
}



/* ==============================
   Sitater/Quotes
   ============================== */
/*Purple line to the left- Quotes*/
.dp-box-left blockquote {
    border-left: 4px solid #361E40 !important;
}

.dp-wrapper blockquote {
    margin: 2rem 5rem 2rem;
}

.dp-box-left blockquote p {
    font-weight: 500;
    font-style: italic;
}



/* ==============================
   Bilder/Images
   ============================== */
/*Place images to the right */
.dp-wrapper figure {
    float: right !important;
}

/*Changing text apperance- Caption under pictures*/
.dp-box-left figure>figcaption {
    font-size: 0.8rem;
}




/* ==============================
   Styling av modulene i Canvas/Canvas modules styling
   ============================== */
.item-group-condensed .ig-header {
    background-color: #E8E7FD;
}



/* ==============================
   Progresjonsbar/Progress bar
   ============================== */
.dp-wrapper .dp-progress-icons li .dp-colored-bar,
.dp-tools-wrapper .dp-progress-icons li .dp-colored-bar,
#content .dp-wrapper .dp-progress-icons li .dp-colored-bar {
    background: #f5f5f5;
}

nav.dp-progress-partial-sub-nav {
    margin-bottom: 1.5rem;
}

.dp-wrapper .dp-progress-partial-circles .dp-progress-partial-sub-ul,
.dp-tools-wrapper .dp-progress-partial-circles .dp-progress-partial-sub-ul,
#content .dp-wrapper .dp-progress-partial-circles .dp-progress-partial-sub-ul {
    flex-wrap: wrap;
    padding: 0 !important;
    justify-content: center;
}

.dp-wrapper .dp-progress-partial-circles .dp-progress-partial-sub-ul li,
.dp-tools-wrapper .dp-progress-partial-circles .dp-progress-partial-sub-ul li,
#content .dp-wrapper .dp-progress-partial-circles .dp-progress-partial-sub-ul li {
    max-width: 70px;
    min-width: 70px;
}

.dp-wrapper .dp-progress-partial-circles .dp-progress-partial-sub-ul .dp-progress-partial-itemname,
.dp-tools-wrapper .dp-progress-partial-circles .dp-progress-partial-sub-ul .dp-progress-partial-itemname,
#content .dp-wrapper .dp-progress-partial-circles .dp-progress-partial-sub-ul .dp-progress-partial-itemname {
    display: none;
}

a.nav-item.nav-link.dp-progress-partial-title.fw-bold,
#content .dp-wrapper .dp-progress-partial-circles .dp-progress-partial-sub-ul li.active i {
    background: #3C35F2 !important;
}

/*Remove button over progress bar*/
a.nav-item.nav-link.dp-progress-partial-title.fw-bold {
    display: none;
}



/* ==============================
   Buttons
   ============================== */

button.Button.Button--primary.Button--block {
    border-radius: 48px;
}

span.css-1ta5ds2-baseButton__content {
    border-radius: 40px;
    border: solid 3px #FDEBB0;
    background-color: #FDEBB0;
    border-color: #FDEBB0;
}



/*"Neste", "Forige" maks bredde */
.module-sequence-footer {
    max-width: 1100px !important;
}

/*Mark as done button*/
button#mark-as-done-checkbox {
    border: solid 3px #3C35F2 !important;
    border-radius: 40px !important;
}

.btn-info,
.Button--secondary {
    border: 3px solid #361e40;
    border-radius: 48px;
}

a.Button.Button--secondary.dp-qc-submit.binded {
    background-color: #361E40 !important;
    color: white !important;
}


/* ==============================
   Overskrifter i kolonner
   ============================== */
.dp-column-container h3,
.dp-column-container h4,
.dp-column-container h5,
.dp-column-container h6 {
    font-size: 1.2rem;
}

.dp-column-container h3 {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/* ==============================
   Bilder
   ============================== */

.dp-box-left img{
    height: auto !important; 
}

/* ==============================
   Modulboks/Molulebox snippet
   ============================== */
.bs-col-md .modul h4 {
    background-color: #361E40;
    color: #FFFFFF !important;
    padding: 2%;
}

.modul {
    margin-bottom: 2%;
}

.modul p {
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 1%;
}

.modulboks-en {
    margin: 1% 0 1% 0;
    padding: 2%;
    background-color: #E8E7FD;
    color: #000000;
    border: solid 1px #B2B2B2;
}

.moduloversikt-en,
.moduloversikt-to,
.moduloversikt-tre {
    align-self: stretch;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 2%;
    background-color: #FFFBEF;
    flex: 1;
    color: #000000;
    border: solid 1px #B2B2B2;
}

.modulboks-en h4,
.modulboks-to h4,
.modulboks-tre h4,
.modulboks-en h5,
.modulboks-to h5,
.modulboks-tre h6,
.modulboks-en h6,
.modulboks-to h6,
.modulboks-tre h6 {
    font-size: 1rem !important;
    margin: 0 0 1em 0;
    color: #000000 !important;
    border-top: 0px !important;
    border-bottom: 0px !important;
}



/* ==============================
   Refleksjonsboks/reflextionbox snippet
   ============================== */

.refleksjonboks-en {
    margin-bottom: 1%;
    padding: 2%;
    color: #000000;
    border: solid 1px #B2B2B2;
}

.refleksjon-en,
.refleksjon-to,
.refleksjon-tre {
    align-self: stretch;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 2%;
    flex: 1;
    color: #000000;
    border: solid 1px #B2B2B2;
}

.refleksjonboks-en h3,
.refleksjon-en h3,
.refleksjon-to h3,
.refleksjon-tre h3,
.refleksjonboks-en h4,
.refleksjon-en h4,
.refleksjon-to h4,
.refleksjon-tre h4,
.refleksjonboks-en h5,
.refleksjon-en h5,
.refleksjon-to h5,
.refleksjon-tre h5,
.refleksjonboks-en h6,
.refleksjon-en h6,
.refleksjon-to h6,
.refleksjon-tre h6 {
    font-size: 1.5rem !important;
    margin: 0 0 1em 0;
    border-top: 0px !important;
    border-bottom: 0px !important;
}



/* ==============================
   Tektboks/textbox snippet
   ============================== */

.boks-en,
.boks-to,
.boks-tre {
    align-self: stretch;
    padding: 2%;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    background-color: #FDEBB0;
    border: solid #FDEBB0;
    flex: 1;
}

.tekstboks-en {
    padding: 2%;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    background-color: #FDEBB0;
    border: solid #FDEBB0;
}

/*Styling headings of textbox*/
.tekstboks-en h3,
.tekstbokser-to h3,
.tekstbokser-tre h3,
.tekstboks-en h4,
.tekstbokser-to h4,
.tekstbokser-tre h4,
.tekstboks-en h5,
.tekstbokser-to h5,
.tekstbokser-tre h6,
.tekstboks-en h6,
.tekstbokser-to h6,
.tekstbokser-tre h6 {
    font-size: 1.2rem !important;
    margin: 0 0 1em 0;
    border-top: 0px !important;
    border-bottom: 0px !important;
    color: #000000;
}
/* ==============================
   Oppgave bokser i kolonner
   ============================== */
   
.row {
  display: flex;
  flex-wrap: wrap; 
  align-items: stretch; 
}

.col-md {
  flex: 1;
  display: flex; 
}

 
.dp-qc.dp-qc-built {
  flex: 1; 
}


/* ==============================
   Deles av boksene over/ Shared by the boxes above
   ============================== */

.tekstbokser-to,
.modulboks-to,
.refleksjonboks-to {
    margin-top: 0.5rem;
    display: flex;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
}

.kolonneboks-to {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.tekstbokser-tre,
.modulboks-tre,
.refleksjonboks-tre {
    display: flex;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
}

.kolonne-en,
.kolonne-to {
    align-self: stretch;
    flex: 1
}

.boks-tom {
    align-self: stretch;
   margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 2%;
    background-color: #fdebb000;
    border: solid 1px #fdebb000;
    flex: 1;
}



/* ==============================
   Expander
   ============================== */
.dp-wrapper .dp-expander-default>.dp-panel-heading a,
.dp-wrapper .dp-expander-plus>.dp-panel-heading a {
    background-color: #FFFFFF !important;
    border-radius: 0px;
    border-radius: 0px;
}

#dp-tools-wrapper .dp-accordion-default>.dp-panel-content,
#dp-tools-wrapper .dp-accordion-plus>.dp-panel-content,
#dp-tools-wrapper .dp-expander-default>.dp-panel-content,
#dp-tools-wrapper .dp-expander-plus>.dp-panel-content,
.dp-wrapper .dp-accordion-default>.dp-panel-content,
.dp-wrapper .dp-accordion-plus>.dp-panel-content,
.dp-wrapper .dp-expander-default>.dp-panel-content,
.dp-wrapper .dp-expander-plus>.dp-panel-content {
    background-color: #FFFFFF;
    color: #000000;
}

#dp-tools-wrapper .dp-accordion-default .dp-panel-icon,
#dp-tools-wrapper .dp-accordion-plus .dp-panel-icon,
#dp-tools-wrapper .dp-expander-default .dp-panel-icon,
#dp-tools-wrapper .dp-expander-plus .dp-panel-icon,
.dp-wrapper .dp-accordion-default .dp-panel-icon,
.dp-wrapper .dp-accordion-plus .dp-panel-icon,
.dp-wrapper .dp-expander-default .dp-panel-icon,
.dp-wrapper .dp-expander-plus .dp-panel-icon {
    top: 20% !important;
}

/*Turn the icon*/
i.dp-panel-icon.fas.fa-caret-up,
i.dp-panel-icon.fas.fa-caret-down {
    transform: rotate(180deg);
}

/*when open. */
.dp-wrapper .dp-expander-default>.dp-panel-heading.active a {
    background-color: #361E40 !important;
    color: #FFFFFF !important;
}


.dp-wrapper .dp-expander-default>.dp-panel-heading {
    margin: 0rem 0rem 0.7rem 0rem;
}

/*Remove "expand/collapse" button over expander*/
.btn-group.dp-expander-controls {
    display: none;
}



/* ==============================
   Accordion
   ============================== */
.dp-wrapper .dp-accordion-default>.dp-panel-heading a,
.dp-wrapper .dp-accordion-plus>.dp-panel-heading a {
    background-color: #E8E7FD !important;
    border: none;
    border-radius: 0px;
}

.dp-wrapper .dp-accordion-default>.dp-panel-heading a:hover,
.dp-wrapper .dp-accordion-plus>.dp-panel-heading a:hover {
    border: 0px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px !important;
    transition: box-shadow 0.4s ease-in-out;
}

.dp-wrapper .dp-accordion-default>.dp-panel-heading.active a {
    background-color: #361E40 !important;
}

.dp-wrapper .dp-accordion-default>.dp-panel-heading h3,
.dp-wrapper .dp-accordion-plus>.dp-panel-heading h3 {
    margin: 0rem 0rem 0.7rem 0rem;
}



/* ==============================
   Popover
   ============================== */
.dp-wrapper a.dp-tooltip-trigger,
.dp-wrapper a.dp-popover-trigger,
.dp-wrapper .dp-tooltip-trigger,
.dp-wrapper .dp-popover-trigger {
    border: none;
    background-color: #E8E7FD;
    padding: 0.3%;
    color: #000000;
    text-decoration: none !important;
}



/* ==============================
   Faner/Tabs
   ============================== */
.dp-box-left .tab-content {
    background-color: #FFFFFF;
    border: solid 1px #361E40 !important;
    border-radius: 0 !important;
}

.dp-box-left ul#myTab>li>a[aria-selected="true"] {
    background-color: #FFFFFF;
    border: solid 1px #361E40;
    border-bottom: solid 2px #FFFFFF;
}

.dp-box-left ul#myTab>li>a[aria-selected="false"] {
    background-color: #361E40 !important;
    color: #FFFFFF !important;
}

.dp-box-left ul#myTab>li {
    margin-left: 1px;
}

.dp-box-left ul#myTab {
    border-bottom: solid 0px !important;
}



/* ==============================
   Tabeller/Table
   ============================== */
.dp-box-left table {
    border: 0;
    caption-side: top;
}

.dp-box-left table>caption {
    background-color: #FDEBB0;
    font-weight: bold;
    text-align: center;
}

/* Cellegrenser og polstring */
.dp-box-left th,
.dp-box-left td {
    border: 1px solid #CCCCCC;
    padding: 8px 7px;
    text-align: left;
}

/* Zebra-effekt */
.dp-box-left tr:nth-child(odd) {
    background-color: #F2F2F2;
}

.dp-box-left tr:nth-child(even) {
    background-color: #FFFFFF;
}

/* Unntak: .no-zebra */
.dp-box-left .no-zebra .regnskap,
.dp-box-left .no-zebra tr:nth-child(odd),
.dp-box-left .no-zebra tr:nth-child(even) {
    background-color: #FFFFFF !important;
}

/* Hover-effekt */
.dp-box-left tr:hover {
    background-color: #E8E7FD !important;
}

/* Spesiell celleklasse */
.dp-box-left .blue_td {
    background-color: #3C35F2 !important;
    color: #FFFFFF;
}

.dp-box-left .blue_td:hover {
    color: #000000;
}



/* ==============================
   Test deg selv/Quck check
   ============================== */
.dp-box-left .dp-qc {
    margin-top: 1%;
    margin-bottom: 1%;
    border: solid 1px #B2B2B2;
}

/*Remove icon over quick check */
.dp-box-left h3.dp-has-icon {
    display: none;
}



/* ==============================
   Diskusjoner/Discussions 
   ============================== */
.css-1k1nh1j-view.css-1k1nh1j-view.css-1k1nh1j-view.css-1k1nh1j-view.css-1k1nh1j-view.css-1k1nh1j-view.css-1k1nh1j-view.css-1k1nh1j-view.css-1k1nh1j-view.css-1k1nh1j-view,
.css-8m7z11-view.css-8m7z11-view.css-8m7z11-view.css-8m7z11-view.css-8m7z11-view.css-8m7z11-view.css-8m7z11-view.css-8m7z11-view.css-8m7z11-view.css-8m7z11-view,
.css-7hzcsx-view--block.css-7hzcsx-view--block.css-7hzcsx-view--block.css-7hzcsx-view--block.css-7hzcsx-view--block.css-7hzcsx-view--block.css-7hzcsx-view--block.css-7hzcsx-view--block.css-7hzcsx-view--block.css-7hzcsx-view--block {
    max-width: 1200px;
}

.css-kuunbm-text {
    display: none;
}



/* ==============================
   Oppgaver/Assigments
   ============================== */
.tool_content_wrapper,
form.form-horizontal.bootstrap-form.display-only,
.ic-Table {
    max-width: 1200px;
}



/* ==============================
   Skjule elementer fra DesignPlus-menyen
   ============================== */
#dp-tools-wrapper [data-id="divider"],
#dp-tools-wrapper [data-id="text"],
#dp-tools-wrapper [data-id="button"],
#dp-tools-wrapper [data-id="table"],
#dp-tools-wrapper [data-id="userDetails"],
#dp-tools-wrapper [data-id="modal"],
#dp-tools-wrapper [data-id="calloutBlock"],
#dp-tools-wrapper [data-id="shortcuts"],
#dp-tools-wrapper [data-id="linkGrid"],
#dp-tools-wrapper [data-id="listNav"],
#dp-tools-wrapper [data-id="objective"],
#dp-tools-wrapper [data-id="questions"],
#dp-tools-wrapper [data-id="moduleList"],
#dp-tools-wrapper [data-id="tooltip"],
#dp-tools-wrapper [data-id="background"],
#blockComponent.dp-panels-wrapper {
    display: none;
}


/* ==============================
   Årsak og virkning / Fra til 
   ============================== */
.aarsak_virkning h3,
.aarsak_virkning h4,
.aarsak_virkning h5,
.aarsak_virkning h6 {
    border-bottom: 0;
    border-top: 0;
    font-size: 1.2rem;
    margin: 0 0 1em 0;
    border-top: 0px !important;
    border-bottom: 0px !important;
    color: #000000;
    background-color: #FFFFFF;
}


.aarsak_virkning {
    margin-bottom: 1%;
    padding: 2%;
    color: #000000;
    border: solid 1px #B2B2B2;

}

/* ==============================
    Hva ville du gjort
   ============================== */

.hva_ville_du_gjort {
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hva_ville_du_gjort i.dp-icon.fas.fa-question {
    font-size: 48px;
    font-weight: 700;
    color: #361E40;
}

.hva_ville_du_gjort h3,
.hva_ville_du_gjort h4,
.hva_ville_du_gjort h5,
.hva_ville_du_gjort h6 {
    font-size: 1.5rem !important;
}

.hva_ville_du_gjort h3 {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/* ==============================
   Case eksempel
   ============================== */
.case_eksempel blockquote {
    margin: 2rem 0rem;
}

.case_eksempel .dp-qc.dp-qc-built {
    margin: 0;
    padding: 0;
}


/* ==============================
   Ikke i bruk/Not in use
   ============================== */
/*NEW CODE: Style - End of every module*/
/* 
   .end {
    padding: 2%;
    color: #FFFFFF;
    background-color: #361E40;
}

.end>h2 {
    color: #FFFFFF;
}

.bildebokskontainer {
    display: flex;
    justify-content: space-around;
}

.bildeboks-en {
    display: flex;
    justify-content: space-between;
    border: solid 2px #361E40;
    background-color: #FFFFFF;
    margin: 1%;
    padding: 2%;
}
*/

/* Style- "Oppleser"- button
span.fQfxa_eoCh{
    display: none;
}

.fQfxa_dqAF.fQfxa_buuG{
    background: #361E40;
    border-color: #361E40;
    color: #FFFFFF;
}*/
/*
body .dp-box-left{
    font-family: Arial, Helvetica, sans-serif !important;
}

#content .css-1rpus1y-baseButton__content {
    background: #3C35F2 !important;
    color: #FFFFFF !important;
    border-color: #3C35F2;
    border: solid 3px #3C35F2 !important;
    border-radius: 40px !important;
}
*/


/* ==============================
   MÃ¥ finne 
   ============================== */
.container-fluid .dp-rce-highlight {
    margin: 0;
}