/* DECORATIONS
 * 
 * Contains styling for the available decorations. 
---------------------------------------------------------------------------- */

/* Dark panel
---------------------------------------------------------------------------- */

.jor-decoration-dark-panel {
    background-color: var(--jor-decoration-dark-panel-background-color);
    color: var(--jor-decoration-dark-panel-font-color);
    padding: 4rem 1.5rem;
}

.sv-fluid-grid .jor-decoration-dark-panel,
.sv-fixed-fluid-grid .jor-decoration-dark-panel,
.sv-grid .jor-decoration-dark-panel {
    position: relative;
}

.sv-fluid-grid .jor-decoration-dark-panel:before,
.sv-fixed-fluid-grid .jor-decoration-dark-panel:before,
.sv-grid .jor-decoration-dark-panel:before {
    background-color: var(--jor-decoration-dark-panel-background-color);
    content: "";
    left: calc((100vw - 100%) * -0.5);
    height: 100%;
    position: absolute;
    top: 0;
    width: 100vw;
}


/* Information box
---------------------------------------------------------------------------- */

.jor-information-box,
.jor-decoration-white-box {
    background: var(--jor-information-box-background-color, #F8F6E8);
    border-left: 1rem solid var(--jor-information-box-accent-color, transparent);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    margin-bottom: 1.5rem;
    max-width: 680px;
    padding: 1.5rem;
}

.jor-information-box__heading,
.jor-information-box h1,
.jor-information-box h2,
.jor-information-box h3,
.jor-information-box h4,
.jor-information-box h5,
.jor-information-box h6,
.jor-decoration-white-box h2,
.jor-decoration-white-box h3,
.jor-decoration-white-box h4,
.jor-decoration-white-box h5, 
.jor-decoration-white-box h6 {
    align-items: baseline;
    display: flex;
    font-size: 1.4375rem !important;
    margin: 0 0 0.75rem 0 !important;
    letter-spacing: -0.5px;
    line-height: 1.5;
}

.jor-information-box__heading::before,
.jor-information-box h1::before,
.jor-information-box h2::before,
.jor-information-box h3::before,
.jor-information-box h4::before,
.jor-information-box h5::before,
.jor-information-box h6::before {
    font-weight: 900;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    content: var(--jor-information-box-heading-icon);
    color: var(--jor-information-box-accent-color, currentColor);
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    position: relative;
    margin-right: 0.8em;
}


/* Variants */

.jor-information-box--warning {
    --jor-information-box-accent-color: #965B1D;
    --jor-information-box-heading-icon: "\f071";
}

.jor-information-box--tip {
    --jor-information-box-accent-color: #2E614C;
    --jor-information-box-heading-icon: "\f05a";
}

.jor-information-box--light {
    --jor-information-box-background-color: #fff;
}

.jor-information-box-success {
    --jor-information-box-background-color: #2e614c;
    --jor-heading-font-color: #fff;
    --jor-font-color: #fff;
    --jor-link-font-color: #fff;
    --jor-link-hover-font-color: #fff;

    display: flex;
}

.jor-information-box-success h1,
.jor-information-box-success h2,
.jor-information-box-success h3,
.jor-information-box-success h4,
.jor-information-box-success h5,
.jor-information-box-success h6,
.jor-information-box-success p,   
.jor-information-box-success a {
    color: #c2ddb0 !important;
}



/* Varning */
.con-decoration-warning__heading {
    color: #a24a0f;
}

/*
 .con-decoration-warning__heading::before {
 content: "\f071";
 font-family: "Font Awesome 5 Free";
 font-weight: 900;
 }
 */

/* Informationsruta Varning - dekoration för varning med bara CSS */


/* Informationsruta Tips - dekoration för tips med bara CSS */

/* Tips */
.con-decoration-tip__heading {
    color: #2f651a;
}

/* Informationsruta Positiv (Success) - dekoration för positiv med bara CSS */

.con-decoration-success__icon {
    color: #c2ddb0;
    font-size: 2.5em;
    margin-right: 0.3em;
}