/*************** LEVELS PROGRESS LINE ******************/

.level-line-number {
    font-size: smaller;
    color: darkblue;
    justify-items: center;
    height: 50px;
    font-weight: bold;
    display: grid;
    place-items: center;
}

.circle-line-number {
    width: 25px;
    height: 25px;
    background-color: white;
    border-radius: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    position: absolute;
    justify-content: center;
}

.selected-number {
    border: solid red 3px;
    width: 35px;
    z-index: 2;
    margin: unset !important;
    height: 35px;
    font-size: x-large;
}

.rounded-at-top {
    border-radius: 10px 10px 0px 0px;
}


#progressline {
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: 10px 10px 10px 10px;
}

    #progressline .level-line-number:first-child:after {
        width: 50%;
        height: 3px;
        background: red;
        position: relative;
        left: -25%;
        z-index: 0;
    }

    #progressline .level-line-number:after {
        content: '';
        width: 100%;
        height: 3px;
        z-index: 1;
        background: #ffffff54;
        position: relative;
        left: -50%;
        z-index: 0;
    }

    #progressline .active-number:after {
        content: '';
        width: 100%;
        height: 3px;
        z-index: 1;
        background: red;
        position: relative;
        left: -50%;
        z-index: 0;
    }


.level-line-name {
    font-weight: bolder;
    text-align: center;
}


.level-line-1-1 {
    background: linear-gradient(to right, #ddae2c47, #ddae2c61);
}
.level-line-1-2 {
    background: linear-gradient(to right, #ddae2c61, #ddae2c66);
}
.level-line-1-3 {
    background: linear-gradient(to right, #ddae2c66, #ddae2c80);
}
.level-line-1-4 {
    background: linear-gradient(to right, #ddae2c80, #ddae2c99);
}
.level-line-1-5 {
    background: linear-gradient(to right, #ddae2c99, #ddae2cb3);
}
.level-line-1-6 {
    background: linear-gradient(to right, #ddae2cb3, #ddae2ccc);
}
.level-line-1-7 {
    background: linear-gradient(to right, #ddae2ccc, #ddae2ce6);
}
.level-line-1-8 {
    background: linear-gradient(to right, #ddae2ce6, #ddae2c);
}





.level-line-2-1 {
    background: linear-gradient(to right, #55bdeb47, #55bdeb61);
}

.level-line-2-2 {
    background: linear-gradient(to right, #55bdeb61, #55bdeb66);
}

.level-line-2-3 {
    background: linear-gradient(to right, #55bdeb66, #55bdeb80);
}

.level-line-2-4 {
    background: linear-gradient(to right, #55bdeb80, #55bdeb99);
}

.level-line-2-5 {
    background: linear-gradient(to right, #55bdeb99, #55bdebb3);
}

.level-line-2-6 {
    background: linear-gradient(to right, #55bdebb3, #55bdebcc);
}

.level-line-2-7 {
    background: linear-gradient(to right, #55bdebcc, #55bdebe6);
}

.level-line-2-8 {
    background: linear-gradient(to right, #55bdebe6, #55bdeb);
}






.level-line-3-1 {
    background: linear-gradient(to right, #f4952b47, #f4952b61);
}

.level-line-3-2 {
    background: linear-gradient(to right, #f4952b61, #f4952b66);
}

.level-line-3-3 {
    background: linear-gradient(to right, #f4952b66, #f4952b80);
}

.level-line-3-4 {
    background: linear-gradient(to right, #f4952b80, #f4952b99);
}

.level-line-3-5 {
    background: linear-gradient(to right, #f4952b99, #f4952bb3);
}

.level-line-3-6 {
    background: linear-gradient(to right, #f4952bb3, #f4952bcc);
}

.level-line-3-7 {
    background: linear-gradient(to right, #f4952bcc, #f4952be6);
}

.level-line-3-8 {
    background: linear-gradient(to right, #f4952be6, #f4952b);
}



.level-line-4-1 {
    background: linear-gradient(to right, #9cbf3347, #9cbf3361);
}

.level-line-4-2 {
    background: linear-gradient(to right, #9cbf3361, #9cbf3366);
}

.level-line-4-3 {
    background: linear-gradient(to right, #9cbf3366, #9cbf3380);
}

.level-line-4-4 {
    background: linear-gradient(to right, #9cbf3380, #9cbf3399);
}

.level-line-4-5 {
    background: linear-gradient(to right, #9cbf3399, #9cbf33b3);
}

.level-line-4-6 {
    background: linear-gradient(to right, #9cbf33b3, #9cbf33cc);
}

.level-line-4-7 {
    background: linear-gradient(to right, #9cbf33cc, #9cbf33e6);
}

.level-line-4-8 {
    background: linear-gradient(to right, #9cbf33e6, #9cbf33);
}



.level-line-5-1 {
    background: linear-gradient(to right, #ec6a6447, #ec6a6461);
}

.level-line-5-2 {
    background: linear-gradient(to right, #ec6a6461, #ec6a6466);
}

.level-line-5-3 {
    background: linear-gradient(to right, #ec6a6466, #ec6a6480);
}

.level-line-5-4 {
    background: linear-gradient(to right, #ec6a6480, #ec6a6499);
}

.level-line-5-5 {
    background: linear-gradient(to right, #ec6a6499, #ec6a64b3);
}

.level-line-5-6 {
    background: linear-gradient(to right, #ec6a64b3, #ec6a64cc);
}

.level-line-5-7 {
    background: linear-gradient(to right, #ec6a64cc, #ec6a64e6);
}

.level-line-5-8 {
    background: linear-gradient(to right, #ec6a64e6, #ec6a64);
}

/*********************************/







path.section:hover {
    stroke: #000; /* Black outline */
    stroke-width: 3; /* Thickness of the outline */
}
.other{
    opacity: 0.2;
}
.current {
    opacity: 1;
}

.item-1 {
    background-color: #fff2cd;
}

.item-2 {
    background-color: #f0f8ff;
}

.item-3 {
    background-color: #ffdcb5;
}

.item-4 {
    background-color: #e2eec0;
}

.item-5 {
    background-color: #ffe4e3;
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    font-family: Arial, sans-serif;
}

svg {
    max-width: 100%;
    height: auto;
}

.shadow {
    drop-shadow(2px 4px 6px grey);
}

.section {
    filter: drop-shadow(2px 4px 6px grey);
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.2s;
}

    .section:hover {
        opacity: 1;
    }

.hovered {
    opacity: 0.4;
}

.dimension4-title {
    font-size: larger;
}

.selectable {
    cursor: pointer;
}
.no-selectable {
    cursor:auto;
}

.not-selected .level-description,
.not-selected .level-radio,
.not-selected .level-abilities {
    --bs-text-opacity: 0.58;
    color: #6c757d !important;
}

.selected .level-description {
    color: midnightblue;
    background-color: #ffffdd;
}


.selected .level-radio,
.selected .level-abilities {
    color: black;
    background-color: #ffffdd;
}

.area-1-table-head {
    padding-bottom: 10px;
    padding-top: 10px;
    border-left: none;
    border-right: none;
    border-top: 2px solid #ddae2c;
    border-bottom: 2px solid #ddae2c;
}
.area-2-table-head {
    padding-bottom: 10px;
    padding-top: 10px;
    border-left: none;
    border-right: none;
    border-top: 2px solid #55bdeb;
    border-bottom: 2px solid #55bdeb;
}
.area-3-table-head {
    padding-bottom: 10px;
    padding-top: 10px;
    border-left: none;
    border-right: none;
    border-top: 2px solid #f4952b;
    border-bottom: 2px solid #f4952b;
}
.area-4-table-head {
    padding-bottom: 10px;
    padding-top: 10px;
    border-left: none;
    border-right: none;
    border-top: 2px solid #9cbf33;
    border-bottom: 2px solid #9cbf33;
}
.area-5-table-head {
    padding-bottom: 10px;
    padding-top: 10px;
    border-left: none;
    border-right: none;
    border-top: 2px solid #ec6a64;
    border-bottom: 2px solid #ec6a64;
}

.level-name {
    writing-mode: vertical-lr;
    text-align: center;
    transform: rotate(180deg);
    white-space: nowrap;
    font-weight: bold;
    height: 250px;
}

.level-number {
    font-size: smaller;
    color: darkblue;
    justify-items: center;
    height: 125px;
    font-weight: bold;
}

.circle-number {
    width: 25px;
    height: 25px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.level-radio {
    justify-items: center;
    min-width: 50px;
    border-right: 1px solid midnightblue;
    border-bottom: 1px solid midnightblue;
}

.level-description {
    font-size: smaller;
    color: midnightblue;
    text-align: left;
    max-width: 150px;
    border-left: 1px solid midnightblue;
    border-bottom: 1px solid midnightblue;
}

.level-abilities {
    text-align: left;
/*    width: 100%;
*/    border-bottom: 1px solid midnightblue;
}

.level-1-1 {
    justify-items: center;
    background-color: #ddae2c2e;
}

.level-1-2 {
    justify-items: center;
    background-color: #55bdeb2e;
}

.level-1-3 {
    justify-items: center;
    background-color: #f4952b2e;
}

.level-1-4 {
    justify-items: center;
    background-color: #9cbf332e;
}

.level-1-5 {
    justify-items: center;
    background-color: #ec6a642e;
}

.level-2-1 {
    justify-items: center;
    background-color: #ddae2c69;
}

.level-2-2 {
    justify-items: center;
    background-color: #55bdeB69;
}

.level-2-3 {
    justify-items: center;
    background-color: #f4952b69;
}

.level-2-4 {
    justify-items: center;
    background-color: #9cbf3369;
}

.level-2-5 {
    justify-items: center;
    background-color: #ec6a6469;
}

.level-3-1 {
    justify-items: center;
    background-color: #ddae2ca6;
}

.level-3-2 {
    justify-items: center;
    background-color: #55bdeba6;
}

.level-3-3 {
    justify-items: center;
    background-color: #f4952ba6;
}

.level-3-4 {
    justify-items: center;
    background-color: #9cbf33a6;
}

.level-3-5 {
    justify-items: center;
    background-color: #ec6a64a6;
}

.level-4-1 {
    justify-items: center;
    background-color: #ddae2cf2;
}

.level-4-2 {
    justify-items: center;
    background-color: #55bdebf2;
}

.level-4-3 {
    justify-items: center;
    background-color: #f4952bf2;
}

.level-4-4 {
    justify-items: center;
    background-color: #9cbf33f2;
}

.level-4-5 {
    justify-items: center;
    background-color: #ec6a64f2;
}


.hr-1 {
    height: 2px !important;
    color: #ddae2Cc
}

.hr-2 {
    height: 2px !important;
    color: #55bdeb;
}

.hr-3 {
    height: 2px !important;
    color: #f4952b;
}

.hr-4 {
    height: 2px !important;
    color: #9cbf33;
}

.hr-5 {
    height: 2px !important;
    color: #ec6a64;
}

.area-color-1 {
    color: #917018;
    /*color: #ddae2c;*/
}

.area-color-2 {
    color: #147ca9;
    /*color: #55bdeb;*/
}

.area-color-3 {
    color: #ae6109;
    /*color: #f4952b;*/
}

.area-color-4 {
    color: #667d21;
    /*color: #9cbf33;*/
}

.area-color-5 {
    color: #e42a21;
    /*color: #ec6a64;*/
}

.area-background-color-1 {
    background-color: #ddae2C;
}

.area-background-color-2 {
    background-color: #55bdeb;
}

.area-background-color-3 {
    background-color: #f4952b;
}

.area-background-color-4 {
    background-color: #9cbf33;
}

.area-background-color-5 {
    background-color: #ec6a64;
}


.btn.light.red {
    background-color: white;
    color: red;
    border: 3px solid red;
    padding: 18px 40px;
}

    .btn.light.red:hover {
        color: white;
        border-color: red;
        background-color: red;
        z-index: 2;
    }

        .btn.light.red:hover::before {
            background-color: red;
            background: red;
        }

    .btn.light.red::before {
        background-color: white;
    }