/* Temporary styles for development */

@font-face {
    font-family: 'Akkurat-Regular';
    src: url('fonts/AkkuratStd-Regular.woff2') format('woff2'),
        url('fonts/AkkuratStd-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Akkurat-Regular';
    src: url('fonts/AkkuratStd-Bold.woff2') format('woff2'),
        url('fonts/AkkuratStd-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


#snv-graphic-container {
    width: 60%;
    margin:auto;
    font-family: 'Akkurat-Regular', Helvetica, Arial, sans-serif;
    min-height: 500px;
    position: relative;
}

/* Definitive styles for realisation */

/* Variables */
:root {
    --snv-graphic-orange: #ff8c14;
    --snv-graphic-orange-light: #fae1a5;
    --snv-graphic-pink: #f02878
    --snv-graphic-pink-light: #ef78ae;
    --snv-graphic-blue: #b914ff;
    --snv-graphic-blue-light: #d197ff;
    --snv-graphic-yellow: #ffc850;
    --snv-graphic-yellow-light: #fff6a6;
    --snv-graphic-green: #00c43c;
    --snv-graphic-grey: #6e7682;
}

/* Buttons */
.snv-graphic-btn > button {
    background-color: white;
}

.snv-graphic-btn > button:hover,
.snv-graphic-submenu > button:hover{
    cursor: pointer;
}

.snv-graphic-btn-orange-light > button {
    border: 1px solid var(--snv-graphic-orange-light);
}

.snv-graphic-btn-pink-light > button {
    border: 1px solid var(--snv-graphic-pink-light);
}

.snv-graphic-btn-blue-light > button{
    border: 1px solid var(--snv-graphic-blue-light);
}

.snv-graphic-btn-yellow-light > button {
    border: 1px solid var(--snv-graphic-yellow-light);
}

.snv-graphic-btn-orange > button {
    border: 1px solid var(--snv-graphic-orange);
}

.snv-graphic-btn-pink > button {
    border: 1px solid var(--snv-graphic-pink);
}

.snv-graphic-btn-blue > button {
    border: 1px solid var(--snv-graphic-blue);
}

.snv-graphic-btn-yellow > button {
    border: 1px solid var(--snv-graphic-yellow);
}

.snv-graphic-btn-orange-light:hover > button,
.snv-graphic-btn-orange-light .btn-active  {
    background-color: var(--snv-graphic-orange-light);
}

.snv-graphic-btn-pink-light:hover > button,
.snv-graphic-btn-pink-light .btn-active  {
    background-color: var(--snv-graphic-pink-light);
}


.snv-graphic-btn-blue-light:hover > button,
.snv-graphic-btn-blue-light .btn-active  {
    background-color: var(--snv-graphic-blue-light);
}

.snv-graphic-btn-yellow-light:hover > button,
.snv-graphic-btn-yellow-light .btn-active  {
    background-color: var(--snv-graphic-yellow-light);
}


.snv-graphic-icon-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.snv-graphic-icon-btn > svg {
    width: 20px;
    height: 20px;
}

/* Select */
#snv-graphic-container select,
#snv-graphic-container button {
    font-family: 'Akkurat-Regular', Helvetica, Arial, sans-serif;
    color: black;
}

#snv-graphic-container select:focus {
    outline: none;
}

/* Header */
#snv-graphic-header {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 16px;
    width: 100%;
}

#snv-graphic-header > .snv-graphic-button-wrapper {
    width: calc( (100% - 16px) / 2 );
}

#snv-graphic-header button {
    font-family: 'Akkurat-Regular', Helvetica, Arial, sans-serif;
    color: black;
    border-radius: 5px;
    width: 100%;
}

#snv-graphic-main button {
    font-family: 'Akkurat-Regular', Helvetica, Arial, sans-serif;
}

.header-max button {
    height: 60px;
    font-size: 20px;
    transition: 0.4s ease;
}

.header-min button {
    height: 40px;
    font-size: 14px;
    transition: 0.4s ease;
}

.header-max {
    top: 50%;
    transform: translateY(-40%);
}

.header-min {
    top: 0;
    transform: normal;
    transition: 0.4s ease;
}

.snv-graphic-button-info {
    width: 100%;
    text-align: center;
    font-size: 12px;
    opacity: 0;
    transition: 0.2s ease;
    padding-top: 16px;
    display: none;
}

.header-max > .snv-graphic-button-wrapper:hover .snv-graphic-button-info {
    opacity: 1;
    transition: 0.2s ease;
}

.header-min .snv-graphic-button-info {
    display: none;
}

/* Start item */
.snv-graphic-start-item {
    background-color: white;
    position: relative;
    width: 100%;
    height: 50px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px dashed var(--snv-graphic-orange-light); 
    position: absolute;
    text-align: center;
    transition: 0.4s ease;
}

.snv-graphic-start-item:hover {
    background-color: var(--snv-graphic-orange-light);
    transition: 0.4s ease;
}

.snv-graphic-start-item .snv-graphic-arrow {
    opacity: 0;
    transition: 0.4s ease;
}

.snv-graphic-start-item:hover .snv-graphic-arrow {
    opacity: 1;
    transition: 0.4s ease;
}

.item-top {
    top: 0;
}

.item-bottom {
    bottom: 0;
}

.snv-graphic-arrow {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 60px;
    width: 1px;
    background-color: black;
}

.arrow-down {
    top: 70px;
}

.snv-graphic-arrow span {
    border-top: 10px solid black;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.arrow-up {
    bottom: 70px;
}

/* Main */
#snv-graphic-main {
    width: 100%;
    padding-top: 96px;
}

.main-hide {
    transform: translateY(300px);
    opacity: 0;
    transition: 0.4s ease;
}

.main-show {
    transform: normal;
    opacity: 1;
    transition: 0.4s ease;
}

.snv-graphic-layer {
    width: 100%;
    padding-top: 16px;
}

.snv-graphic-sidebar {
    width: 100%;
}

.snv-graphic-sidebar p,
.snv-graphic-sidebar a {
    margin-top: 0px;
    font-size: 12px;
    line-height: 1.5;
}

.layer-hide {
    display: none;
}

.layer-show {
    display: block;
}

.snv-graphic-main-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 32px;
}

.snv-graphic-layer select {
    width: 100%;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 5px;
    background-color: white;
}

.snv-graphic-layer select > option {
    background-color: white;
}

#snv-graphic-plan select {
    border: 1px solid var(--snv-graphic-orange-light);
}

#snv-graphic-scenarios select {
    border: 1px solid var(--snv-graphic-pink-light);
}

#snv-graphic-measure select {
    border: 1px solid var(--snv-graphic-blue-light);
}

#snv-graphic-measure select.measure-audit {
    border: 1px solid var(--snv-graphic-blue);
}

#snv-graphic-measure select.measure-element {
    border: 1px solid var(--snv-graphic-orange);
}

#snv-graphic-evaluate select {
    border: 1px solid var(--snv-graphic-yellow-light);
}

#snv-graphic-plan select:hover,
#snv-graphic-measure select.measure-element:hover {
    background-color: var(--snv-graphic-orange-light);
}

#snv-graphic-scenarios select:hover {
    background-color: var(--snv-graphic-pink-light);
}

#snv-graphic-measure select:hover,
#snv-graphic-measure select.measure-audit:hover {
    background-color: var(--snv-graphic-blue-light);
}

#snv-graphic-evaluate select:hover {
    background-color: var(--snv-graphic-yellow-light);
}

.snv-graphic-content {
    width: 100%;
}

/* Graphic elements */
.snv-graphic-element-btn {
    fill: white;
}

.snv-graphic-element-text {
    opacity: 0;
    transition: 0.2s ease;
}

.snv-graphic-element:hover .snv-graphic-element-text {
    opacity: 1;
    transition: 0.2s ease;
}

.snv-graphic-element-orange {
    stroke: var(--snv-graphic-orange);
    fill: white;
}

.snv-graphic-element:hover .snv-graphic-element-orange,
.snv-graphic-element-orange:hover {
    fill: var(--snv-graphic-orange-light);
}

.snv-graphic-element-pink {
    stroke: var(--snv-graphic-pink);
    fill: white;
}

.snv-graphic-element:hover .snv-graphic-element-pink,
.snv-graphic-element-pink:hover {
    fill: var(--snv-graphic-pink-light);
}

.snv-graphic-element-blue {
    stroke: var(--snv-graphic-blue);
    fill: white;
}

.snv-graphic-element:hover .snv-graphic-element-blue,
.snv-graphic-element-blue:hover {
    fill: var(--snv-graphic-blue-light);
}

.snv-graphic-element-yellow {
    stroke: var(--snv-graphic-yellow);
    fill: white;
}

.snv-graphic-element:hover .snv-graphic-element-yellow,
.snv-graphic-element-yellow:hover {
    fill: var(--snv-graphic-yellow-light);
}

#snv-graphic-scenarios-define #scenarios-define-01 {
    opacity: 1;
    transition: 0.4s ease;
} 

#snv-graphic-scenarios-define #scenarios-define-02 {
    opacity: 0;
    transition: 0.4s ease;
} 

#snv-graphic-scenarios-define:hover #scenarios-define-02 {
    opacity: 1;
    transition: 0.4s ease;
} 

#snv-graphic-scenarios-define:hover #scenarios-define-01 {
    opacity: 0;
    transition: 0.4s ease;
} 

.snv-graphic-measure-prioritize-text,
.snv-graphic-measure-prioritize-element {
    opacity: 0;
    transition: 0.4s ease;
}

.snv-graphic-measure-prioritize-container:hover .snv-graphic-measure-prioritize-text,
.snv-graphic-measure-prioritize-container:hover .snv-graphic-measure-prioritize-element {
    opacity: 1;
    transition: 0.4s ease;
}

.snv-graphic-measure-prioritize-container:hover .snv-graphic-element-pink {
    fill: var(--snv-graphic-pink-light);
}

.snv-graphic-measure-prioritize-container:hover .snv-graphic-element-yellow {
    fill: var(--snv-graphic-yellow-light);
}

#snv-graphic-measure-audits {
    width: 100%;
}

#snv-graphic-measure-audits-header > p {
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 14px;
}

#snv-graphic-measure-audits-body > p {
    margin-bottom: 8px;
    font-size: 14px;
    margin-top: 14px;
}

#snv-graphic-measure-audits-body {
    padding-bottom: 80px;
}

#snv-graphic-measure-audits-header,
#snv-graphic-measure-audits-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#snv-graphic-measure-audits-header > select,
#snv-graphic-measure-audits-body .snv-graphic-measure-button {
    width: 200px;
    height: 40px;
    font-size: 12px;
    border-radius: 5px;
}

.snv-graphic-measure-element {
    margin-bottom: 8px;
}

.snv-graphic-measure-button {
    display: flex;
    align-items: center;
    justify-content: center;
}

.measure-audit {
    border: 1px solid var(--snv-graphic-blue);
}

.measure-audit:hover {
    background-color: var(--snv-graphic-blue-light);
}

.measure-element {
    border: 1px solid var(--snv-graphic-orange);
}

.measure-element:hover {
    background-color: var(--snv-graphic-orange-light);
}

.snv-graphic-measure-text {
    width: 176px;
    padding: 8px;
    border: 1px solid black;
    opacity: 0;
    text-align: center;
    margin-top: 5px;
    font-size: 12px;
    transition: 0.4s ease;
    position: absolute;
    bottom: 0;
}

.snv-graphic-measure-text:before {
    content: "Example:";
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    color: black;
}

.snv-graphic-measure-element:hover > .snv-graphic-measure-text {
    opacity: 1;
    transition: 0.4s ease;
}

/* Submenu */
.snv-submenu-button {
    border-radius: 5px;
    height: 28px;
    width: calc( (100% - 16px) / 2 );
}

.snv-graphic-submenu {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 16px;
}

#snv-graphic-plan .snv-submenu-button {
    background-color: white;
    border: 1px solid var(--snv-graphic-orange-light);
}

#snv-graphic-plan .snv-submenu-button:hover,
#snv-graphic-plan .btn-active {
    background-color: var(--snv-graphic-orange-light);
}

#snv-graphic-scenarios .snv-submenu-button {
    background-color: white;
    border: 1px solid var(--snv-graphic-pink-light);
}

#snv-graphic-scenarios .snv-submenu-button:hover,
#snv-graphic-scenarios .btn-active {
    background-color: var(--snv-graphic-pink-light);
}

#snv-graphic-measure .snv-submenu-button {
    background-color: white;
    border: 1px solid var(--snv-graphic-blue-light);
}

#snv-graphic-measure .snv-submenu-button:hover,
#snv-graphic-measure .btn-active {
    background-color: var(--snv-graphic-blue-light);
}

#snv-graphic-evaluate .snv-submenu-button {
    background-color: white;
    border: 1px solid var(--snv-graphic-yellow-light);
}

#snv-graphic-evaluate .snv-submenu-button:hover,
#snv-graphic-evaluate .btn-active {
    background-color: var(--snv-graphic-yellow-light);
}

/* SVG classes */
.st0{fill:none;}
.st1{fill:none;stroke:#FAE1A5;stroke-miterlimit:10;}
.st2{fill:none;stroke:#000000;stroke-linecap:round;stroke-miterlimit:10;}
.st3{font-size:18px;}
.st4{font-size:14px;}
.st5{fill:#1E2124;}
.st6{font-size:12px;}
.st7{fill:#FF8C14;}
.st8{fill:#B914FF;}
.st9{fill:#F02878;}
.st10{fill:#6E7682;}
.st11{fill:#00C43C;}
.st12{fill:#FFFFFF;}
.st13{fill:#FAE1A5;}
.st14{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
.st15{fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:16.6667;}
.st16{font-size:10px;}
.st17{fill:#B914FF;stroke:#B914FF;stroke-miterlimit:10;}
.st18{fill:#EFC5DC;}
.st19{fill:#F9F1CA;}
.st20{fill:none;stroke:#1E2124;stroke-width:0.5;stroke-miterlimit:10;}
.st21{fill:none;stroke:#F02878;stroke-miterlimit:10;}
.st22{fill:none;stroke:#FFC850;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:16.6667;}
.st23{fill:#1E2124;}
.st24{fill:none;stroke:#1E2124;stroke-width:1.5;stroke-miterlimit:10;}
.st25{fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:16.6667;}
.st26{fill:none;stroke:#FAE1A5;stroke-linecap:round;stroke-linejoin:round;}
.st28{fill:none;stroke:#1E2124;stroke-miterlimit:10;}
.st30{fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:16.6667;}
.st32{stroke:#1E2124;stroke-linecap:round;stroke-miterlimit:10;}
.st34{fill:none;stroke:#000000;stroke-miterlimit:10;}
.st35{fill:none;stroke:#000000;stroke-linecap:round;stroke-miterlimit:10;}

@media screen and (min-width: 800px) {
    #snv-graphic-main {
        width: 100%;
        padding-top: 40px;
    }

    .snv-submenu-button {
        width: calc( (100% - 48px) / 4 );
    }

    .header-max button {
        height: 100px;
    }

    .snv-graphic-button-info {
        display: block;
    }

    .snv-graphic-main-container {
        flex-direction: row;
    }

    .snv-graphic-sidebar {
        width: 25%;
    }

    .snv-graphic-content {
        width: calc(75% - 16px);
    }

    #snv-graphic-header > .snv-graphic-button-wrapper {
        width: calc( (100% - 48px) / 4 );
    }

    .snv-graphic-layer select {
        width: calc( (100% - 48px) / 4 );
    }

    .snv-graphic-arrow {
        height: 100px;
    }
}