/* * {
    margin: 0;
    padding: 0;

} */

:root {
  --bottleList-ColorNormal: rgb(0, 18, 219);
  --leftContent-BorderColorInner: rgb(206, 212, 255);
  --leftContent-BorderColorOuter: rgb(176, 176, 255);
  --leftContent-BorderColorOuter: rgb(177, 194, 255);
    /* border-bottom: 1px solid rgb(135, 159, 255); */
  --rightContent-BorderColorOuter: rgb(135, 159, 255);


}


html, body {
    height: 100%;
    background-color: rgb(240, 240, 240);
    background-color: rgb(230, 230, 230);
    background-color: rgb(243, 244, 255);


}



.container {
    display: grid;
    /* background-color: rgb(255, 255, 255); */
    grid-template-columns: 350px 660px;
    grid-template-rows: 100px 930px 160px;
    grid-template-areas: 
        'header header'
        'left right'
        'left rightStats'
    ;
    margin: 10px;

    /* gap: 10px; */


}




.header {
    grid-area: header;

    display: grid;
    /* font-family: sans-serif; */
    /* font-family: Helvetica; */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    text-align: center;
    /* text-align: left; */
    /* padding: 30px; */
    border: 1px solid rgb(117, 133, 255) ;
    border-radius: 8px;

    box-shadow: 6px 4px 4px -3px hsl(245, 100%, 80%);

    /* border-radius: 4px ; */
    /* box-shadow: 2px 3px rgb(176, 184, 255); */
    color: rgb(255, 255, 255);
    font-weight: bold;
    background-color: rgb(0, 18, 180);
    /* display: flex; */
    align-items: center;
    justify-content: center;
    justify-content: left;
    user-select: none;
    padding-left: 30px;
    /* width: auto; */
    /* margin: 10px; */
    /* gap: 10px; */
}





.bottleLink:hover, .bottleLink-Name:hover{
    cursor: pointer;
    color: rgb(185, 195, 255);
    /* font-weight: bold; */
}


.bottleLink-Name {
    font-size: 14px;
    /* font-style: italic; */
    /* color: var(--bottleList-ColorNormal); */
    color: rgb(84, 115, 255);
}


.bottleLink {
    font-size: 18px;
    color: rgb(0, 11, 211);
    color: var(--bottleList-ColorNormal);

}




.leftBottleList {
    grid-area: leftBottleList;
    color: rgb(0, 14, 169);
    /* color: rgb(255, 0, 13); */
    /* border: 1px solid var(--leftContent-BorderColorInner); */
    /* border: 1px solid rgb(252, 6, 129); */
    /* border-radius: 8px; */
    /* border-radius:  8px 8px 8px 8px; */
    background-color: rgb(255, 255, 255);

    overflow: auto;
    overflow-x: auto;
    padding: 20px;
    /* box-shadow: 1px 2px 9px -3px rgb(30, 53, 255); */
    
}

.leftBottleRule-1:hover {
    cursor: pointer;
    color: blue;
}

.leftBottleRule-2:hover {
    cursor: pointer;
    color: blue;
}

.leftBottleRule-3:hover {
    cursor: pointer;
    color: blue;
}

.leftBottleRule-1 {
    color: rgb(255, 255, 255);

    border-top: 1px solid rgb(192, 193, 255);
    border-left: 1px solid rgb(213, 222, 255);
    border-bottom: 1px solid rgb(64, 102, 255);
    border-right: 1px solid rgb(94, 126, 255);   

    /* box-shadow: 2px 2px 9px -3px rgb(255, 30, 150); */
    
    background-color: rgb(255, 245, 202);
    background-color: rgb(145, 135, 255);

    padding: 6px;
    /* justify-self: center; */
    align-content: center;
    text-align: center;
    border-radius: 8px 0px 0px 0px;


}

.leftBottleRule-2 {
    color: rgb(255, 255, 255);
    border-top: 1px solid rgb(192, 193, 255);
    border-left: 1px solid rgb(213, 222, 255);
    border-bottom: 1px solid rgb(64, 102, 255);
    border-right: 1px solid rgb(94, 126, 255);    

    /* box-shadow: 2px 2px 9px -3px rgb(45, 30, 255); */


    background-color: rgb(255, 245, 202);
    background-color: rgb(116, 106, 254);
    /* background-color: rgb(255, 239, 168); */
    padding: 6px;
    align-content: center;
    text-align: center;
}

.leftBottleRule-3 {
    color: rgb(255, 255, 255);
  
    border-top: 1px solid rgb(192, 193, 255);
    border-left: 1px solid rgb(213, 222, 255);
    border-bottom: 1px solid rgb(64, 102, 255);
    border-right: 1px solid rgb(94, 126, 255);       

    /* box-shadow: 2px 2px 9px -3px rgb(34, 30, 255); */

    background-color: rgb(255, 245, 202);
    background-color: rgb(116, 106, 254);

    padding: 6px;

    align-content: center;
    border-radius: 0px 8px 0px 0px;
    text-align: center;    
}

.leftBottleRule {
    grid-area: leftBottleRule;
    display: grid;

    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 34px;

    grid-template-areas: 
    'leftBottleRule-1 leftBottleRule-2 leftBottleRule-3'
    ;    


    background-color: rgb(255, 245, 202);
    color: rgb(113, 113, 255);
    border: 1px solid var(--leftContent-BorderColorInner);
    border-radius: 8px;


    /* padding: 7px; */
    user-select: none;

    /* visibility: hidden; */



}

.leftContent {
    display: grid;
    grid-area: left;


    grid-template-columns: auto;
    grid-template-rows: 30px 1042px;

    grid-template-areas: 
    'leftBottleRule'
    'leftBottleList'
    ;



    /* border-radius: 5px; */
    /* border: 3px solid rgb(171, 171, 254) ; */

    /* box-shadow: 2px 2px 9px -3px rgb(179, 188, 255); */

    font-family: sans-serif;
    /* font-size: 17 px; */
    
    color: rgb(5, 5, 5);
    /* box-shadow: 2px 2px 9px -3px rgb(109, 126, 255); */
    background-color: rgb(249, 249, 255);
    border: 1px solid var(--leftContent-BorderColorOuter);
    /* border: 1px solid rgb(255, 0, 0); */
    border-radius: 8px;

    
    /* border-radius: 17px; */

    white-space: nowrap;
    user-select: none;
    /* gap: 10px; */
    /* padding-top: 10px; */
    margin-top: 10px;


    line-height: 0.8;
    /* overflow-x: scroll visible;     */
    /* overflow: auto; */
    /* padding: 20px; */
}








.storyline-header {

    grid-area: storyLine-header;
    display: grid;
    color: rgb(6, 26, 255);
    color: rgb(255, 10, 14);
    color: #0d2cf0da;

    /* color: rgb(255, 255, 255); */
    background-color: rgb(254, 254, 255);
    /* background-color: rgb(241, 241, 255); */
    border-left: 1px solid var(--leftContent-BorderColorOuter);
    border-right: 1px solid var(--leftContent-BorderColorOuter);
    /* border-top: 1px solid rgb(226, 226, 255); */
    /* border-bottom: 1px solid rgb(219, 219, 255); */
    font-weight: 600;
    font-size: 16px;
    

    padding-top: 25px;
    /* padding-bottom: 20px; */
    padding-left: 50px;
    /* align-items: end; */
    /* justify-content: center; */
    /* margin: 40px 40px 0px 40px; */


}

/* color for small numbers on stats */
.stats_numberColor {
    color: rgb(167, 172, 255);

}
.fineline {

    /* grid-area: fineLine; */
    display: grid;
    color: rgb(0, 15, 225);
    /* color: rgb(255, 255, 255); */
    /* background-color: rgb(255, 255, 255); */
    /* background-color: rgb(248, 224, 255); */
    /* border-left: 1px solid rgb(176, 193, 255); */
    /* border-right: 1px solid rgb(176, 193, 255); */
    border-top: 1px solid rgb(225, 225, 255);
    /* border-bottom: 1px solid rgb(223, 223, 255); */
    /* border-bottom: 1px solid rgb(233, 237, 255); */
    /* border-top: 1px solid rgb(163, 163, 255); */
    /* border-top: 1px solid rgb(127, 127, 255); */
    /* border-bottom: 1px solid rgb(197, 197, 251); */
    /* box-shadow: 3px 3px 4px -4px rgb(158, 169, 255); */
    font-size: 16px;
    font-weight: 600;
    width: 547px;
    height: 25px;
    /* font-style: italic; */

    /* padding-top: 2px; */
    /* padding-bottom: 10px; */
    padding-top: 4px;
    /* padding-left: 57px; */
    /* padding-left: 8px; */
    /* align-items: end; */
    /* justify-content: center; */
    /* margin: 40px 40px 0px 40px; */


}
.storyline-header2 {

    grid-area: storyLine-header2;
    display: grid;
    color: rgb(10, 18, 255);
    color: #0d2cf0da;
    /* color: rgb(193, 70, 255); */
    background-color: rgb(255, 255, 255);
    border-left: 1px solid var(--leftContent-BorderColorOuter);
    border-right: 1px solid var(--leftContent-BorderColorOuter);
    /* border-top: 1px solid rgb(226, 226, 255); */
    /* border-bottom: 1px solid rgb(219, 219, 255); */
    font-size: 16px;
    font-weight: 600;
    /* text-align: center; */
    /* align-self: center; */
    /* width: 480px; */
    

    /* padding-top: 19px; */
    /* padding-bottom: 10px; */
    /* padding-left: 50px; */
    /* padding-left: 10px; */
    /* align-items: end; */
    justify-content: center;
    /* margin: 40px 40px 0px 40px; */


}
.fineline2 {

    /* grid-area: fineLine; */
    display: grid;
    color: rgb(255, 255, 255);
    color: rgb(0, 225, 22);
    /* color: rgb(255, 255, 255); */
    color: rgb(0, 15, 225);
    /* color: rgb(255, 255, 255); */
    /* color: rgb(255, 255, 255); */
    /* background-color: rgb(254, 254, 254); */
    /* background-color: rgb(226, 226, 255); */
    /* background-color: rgb(248, 248, 255); */
    /* background-color: rgb(241, 255, 234); */
    /* background-color: rgb(246, 245, 255); */
    /* background-color: rgb(205, 255, 214); */
    /* border-left: 1px solid rgb(176, 193, 255); */
    /* border-right: 1px solid rgb(176, 193, 255); */
    border-top: 1px solid rgb(225, 225, 255);
    /* border-top: 1px solid rgb(173, 184, 255); */
    /* border-top: 1px solid rgb(178, 255, 178); */
    /* border: 1px solid rgb(221, 229, 255); */
    /* border-top: 1px solid rgb(225, 225, 255); */
    /* border-top: 1px solid rgb(127, 127, 255); */
    /* border-bottom: 1px solid rgb(225, 232, 255); */
    /* border-bottom: 1px solid rgb(238, 238, 255); */
    /* border-bottom: 1px solid rgb(223, 223, 255); */
    /* border-bottom: 1px solid rgb(241, 244, 255); */
    /* box-shadow: 3px 3px 4px -4px rgb(158, 169, 255); */
    /* box-shadow: 3px 3px 4px -4px rgb(186, 190, 251); */
    /* border-radius: 8px 8px 0px 0px; */
    /* border-radius: 8px 8px 0px 0px; */
    /* box-shadow: 3px 3px 2px -2px rgb(224, 225, 255); */
    font-size: 16px;
    font-weight: 600;
    /* width: 547px; */
    width: 450px;
    /* width: 480px; */
    height: 25px;

    padding-top: 4px;
    margin-top: 8px;
    /* padding-top: 6px; */
    /* padding-bottom: 10px; */
    /* padding-top: 4px; */
    padding-left: 80px;
    /* align-items: center; */
    /* justify-content: left; */
    /* justify-content: center; */
    /* margin: 40px 40px 0px 40px; */


}



.rightContainer {
    grid-area: right;

    display: grid;
    /* gap: 10px; */
    /* row-gap: 10px; */
    /* padding-top: 40px; */

    grid-template-columns: 350px 200px 100px;
    grid-template-rows: 190px 50px 620px 40px 180px;
    grid-template-areas: 
        'rightSummary       rightSummary        rightSummary        '
        'storyLine-header   storyLine-header    storyLine-header    '
        'rightInfo          rightInfo           rightInfoMore       '
        'storyLine-header2  storyLine-header2   storyLine-header2   '
        'rightStats         rightStats          rightStats          '
    ;    

    
    /* border-radius: 5px; */
    /* box-shadow: 2px 2px 9px -3px rgb(120, 136, 255); */

    /* color: blue; */
    font-family: sans-serif;
    /* background-color: rgb(255, 255, 255); */
    /* background-color: rgb(255, 142, 142); */

    /* background-color: rgb(249, 249, 255); */
    /* background-color: rgb(255, 255, 255); */
    /* border-right: 1px solid rgb(145, 167, 252); */
    /* background-color: rgb(240, 240, 240); */
    /* border: 1px solid rgb(187, 187, 255); */
    /* border: 1px solid rgb(1, 14, 255);     */
    /* padding: 18px; */
    line-height: 1.6;
    margin-top: 10px;
    margin-left: 10px;

    border-radius: 5px;
    
}
.rightSummary {
    grid-area: rightSummary;

    display: grid;

    grid-template-columns: 120px 500px;
    grid-template-rows: 170px;
    /* gap: 10px; */

    grid-template-areas: 
        'rightHeader rightHeaderText'
    ;      

    background-color: rgb(255, 255, 255);


    border-top: 1px solid var(--leftContent-BorderColorOuter);
    border-left: 1px solid var(--leftContent-BorderColorOuter);
    /* border-bottom: 1px solid rgb(135, 159, 255); */
    border-right: 1px solid var(--leftContent-BorderColorOuter);
    /* box-shadow: 2px 1px 3px -1px rgb(165, 176, 255); */
    border-radius: 8px 8px 0px 0px;
    
    /* padding: 26px; */
    padding-left: 20px;
    padding-top: 10px;
    user-select: none;
    color: blue;
}
.rightHeader {
    grid-area: rightHeader;
    /* background-color: rgb(246, 247, 255); */
    border-right: 1px solid rgb(224, 227, 255);
    /* width: 140px; */
    
    /* padding: 26px; */
    /* padding-right: 10px; */
    padding-top: 10px;
    color: rgb(0, 0, 179);
    /* user-select: none; */
    
}

.rightHeaderText {
    grid-area: rightHeaderText;
    /* background-color: rgb(246, 247, 255); */
    /* border: 1px solid rgb(129, 142, 255); */
    border-left: 1px solid rgb(240, 241, 255);

    width: fit-content;
    font-size: 16px;
    /*  */
    padding-left: 40px;
    padding-top: 10px;
    /* margin-left: 1px; */
    color: rgb(0, 0, 255);
    /* user-select: none; */
    
}




.ageLevel {
    color: rgb(6, 0, 182);
    /* background-color: rgb(79, 79, 255); */
    background-color: rgb(243, 255, 13);
    box-shadow: 1px 1px 4px 2px rgb(198, 198, 255);
    border: 1px solid rgb(164, 167, 255);

    border-radius: 5px;

    font-size: 14px;
    width: 60px;
    height: 60px;
    font-weight: 500;

    align-content: center;
    text-align: center;

    /* padding: 20px 15px 20px 15px; */
    margin-top: 15px;


    /* white-space: nowrap; */
    /* display: inline; */

}
.statsButton {
    color: rgb(109, 104, 255);
    /* background-color: rgb(79, 79, 255); */
    background-color: rgb(243, 245, 255);
    box-shadow: 1px 1px 5px 1px rgb(234, 234, 255);
    border: 1px solid rgb(222, 223, 255);
    border: 1px solid rgb(209, 210, 255);

    border-radius: 5px;

    font-size: 14px;
    width: 500px;
    height: 20px;
    font-weight: 500;

    align-content: center;
    text-align: center;
    padding-left: 50px;

    /* padding: 20px 15px 20px 15px; */
    /* margin-top: 15px; */


    /* white-space: nowrap; */
    /* display: inline; */

}
.rating-number {
    color: white;
    /* background-color: rgb(79, 79, 255); */
    background-color: rgb(97, 105, 255);
    box-shadow: 1px 1px 4px 2px rgb(198, 198, 255);
    border: 1px solid rgb(0, 4, 108);
    border: 1px solid rgb(164, 167, 255);

    border-radius: 5px;

    font-size: 14px;
    width: 60px;
    height: 60px;
    font-weight: 500;

    align-content: center;
    text-align: center;
    margin-top: 15px;

    /* padding: 20px 15px 20px 15px; */
    /* margin-top: 40px; */


    /* white-space: nowrap; */
    /* display: inline; */

}

.volumeLevel {
    color: rgb(255, 254, 254);
    /* background-color: rgb(79, 79, 255); */
    background-color: rgb(23, 197, 0);
    box-shadow: 1px 1px 4px 2px rgb(198, 198, 255);
    border: 1px solid rgb(0, 4, 108);
    border: 1px solid rgb(164, 167, 255);

    border-radius: 5px;

    font-size: 14px;
    width: 60px;
    height: 60px;
    font-weight: 500;

    align-content: center;
    text-align: center;

    /* padding: 20px 15px 20px 15px; */
    margin-top: 15px;


    /* white-space: nowrap; */
    /* display: inline; */

}



.rightInfoMore {
    grid-area: rightInfoMore;
    display: grid;
    background-color: white;
    /* align-items: center; */
    justify-content: center;
    align-content: start;
    /* padding-top: 20px; */
    /* margin-left: 10px; */
    /* background-color: rgb(236, 237, 255); */

    /* border-top: 1px solid rgb(169, 169, 255); */
    /* border-left: 1px solid rgb(230, 234, 255); */
    /* border-bottom: 1px solid rgb(135, 159, 255); */
    border-right: 1px solid var(--leftContent-BorderColorOuter);

}


.rightInfo {
    grid-area: rightInfo;    
    display: grid;

    grid-template-columns: 140px 450px;
    grid-template-rows: 600px;
    /* gap: 10px; */

    /* padding-top: 30px; */

    grid-template-areas: 
        /* 'rightHeader rightHeaderText' */
        'rightColName rightColValue'
    ;      

    background-color: rgb(255, 255, 255);
    /* background-color: rgb(236, 237, 255); */
    /* border: 1px solid rgb(212, 221, 255); */
    /* width: max-content; */
    /* border-top: 1px solid rgb(169, 169, 255); */
    border-left: 1px solid var(--leftContent-BorderColorOuter);
    /* border-bottom: 1px solid rgb(135, 159, 255); */
    /* border-right: 1px solid rgb(145, 167, 252); */
    /* box-shadow: 2px 1px 3px -1px rgb(165, 176, 255); */
    /* border-radius: 5px; */

    /* padding: 20px; */
    /* padding-left: 30px; */
    /* user-select: none; */
    white-space: nowrap;
    overflow: hidden; 
    /* margin-top: 40px; */
    align-items: start;
    padding-top: 20px;

}

.rightColName {
    grid-area: rightColName;

    /* background-color: rgb(240, 255, 242); */
    /* border-left: 1px solid rgb(237, 238, 255); */
    /* box-shadow: 3px 3px 4px -4px rgb(167, 165, 255); */
    /* border-left: 1px solid rgb(233, 237, 255); */
    color: rgb(125, 130, 255);
    /* text-align: right; */
    /* justify-self: right; */
    /* padding-top: 50px; */
    padding-right: 5px;
    /* margin-left : 45px; */
    text-align: right;
    /* margin-top: 40px; */
    /* border: 1px solid rgb(212, 221, 255); */
    
}
.addEffect-red {
    color: rgb(45, 66, 255); /* Färgen du vill tona till */

    animation: red-fade 1.3s ease-in-out forwards;
}
.addEffect-blue {
    color: rgb(45, 66, 255); /* Färgen du vill tona till */

    animation: blue-fade 1.3s ease-in-out forwards;
}
@keyframes blue-fade {
    from {
    color: rgb(71, 89, 255); /* Färgen du vill tona till */
    }
    to {
    color: #12d201;

    }
}
@keyframes red-fade {
    from {
    color: rgb(71, 89, 255); /* Färgen du vill tona till */
    }
    to {
    color: #ff2828;

    }
}


.rightColValue {
    grid-area: rightColValue;
    
    
    /* background-color: aliceblue; */
    transition: color 1.5s ease-in-out; 
    color: #0e1eff;
    /* font-weight: bold; */
    padding-left: 5px;
    border-right: 1px solid rgb(255, 124, 229);
    /* margin-top: 40px; */
    /* text-align: left; */
    /* z-index: 100; */
   
    /* border: 1px solid rgb(212, 221, 255); */
    
    /* justify-self: left; */

}


.header-graphic {

    grid-area: header-stats;

    display: grid;
    width: 650px;
    height: 20px;
    font-size: 10px;
    /* font-weight: 600; */
    border-radius: 6px 6px 0px 0px;

    /* border-top-left-radius: 13px; */
    /* border-top-right-radius: 13px; */

    color: white;
    /* border: 1px solid rgb(214, 214, 255); */
    background-color: rgb(89, 89, 255);
    /* border-radius: 15px; */
    justify-content: center;
    align-items: center;
    /* text-align: center; */
    /* overflow: hidden; */
    white-space: nowrap;
    /* margin-top: 10px; */
    overflow: hidden;
}



.rightStats {
    grid-area: rightStats;    
    display: grid;
    /* gap: 10px; */
    /* padding-top: 30px; */

    grid-template-columns: 220px 450px;
    grid-template-rows: 330px;

    grid-template-areas: 
        /* 'rightHeader rightHeaderText' */
        /* 'statsButton    statsButton' */
        'rightStatsName rightStatsValue'
    ;      

    background-color: rgb(255, 255, 255);
    /* border: 1px solid rgb(212, 221, 255); */
    /* width: max-content; */
    /* border-top: 1px solid rgb(169, 169, 255); */
    border-left: 1px solid var(--leftContent-BorderColorOuter);
    border-bottom: 1px solid var(--leftContent-BorderColorOuter);
    border-right: 1px solid var(--leftContent-BorderColorOuter);
    /* box-shadow: 2px 1px 3px -1px rgb(165, 176, 255); */
    border-radius:  0px 0px 8px 8px;
  /* transition: color 0.5s ease-in-out;  */
    /* color: rgb(125, 130, 255); */
    /* padding: 20px; */
    overflow: hidden;
    /* padding-left: 70px; */
    /* align-items: center; */
    justify-content: center;
    user-select: none;
    /* margin-left: 10px; */
    /* margin-top: 10px; */

}

.rightStatsName {
    grid-area: rightStatsName;

    /* background-color: rgb(224, 226, 255); */
    color: rgb(125, 130, 255);
    /* border-left: 1px solid rgb(226, 228, 255); */
    /* color: rgb(103, 255, 76); */
    /* text-align: right; */
    /* justify-self: right; */
    /* padding-top: 50px; */
    padding-right: 5px;
    /* padding-left: 70px; */
    margin-left: 5px;
    text-align: right;
    margin-top: 10px;
    /* border: 1px solid rgb(212, 221, 255); */
    
}

.rightStatsValue {
    grid-area: rightStatsValue;
    
    
    /* transition: color 1.5s ease-in-out;  */
    color: #0e1eff;
    /* background-color: rgb(196, 199, 255); */
    color: oklab(46.499% -0.01466 -0.30389);
    /* border-left: 1px solid rgb(226, 228, 255); */
    /* font-weight: bold; */
    padding-left: 5px;
    margin-top: 10px;
    /* text-align: left; */
    /* background-color: aliceblue;
    */
    /* border: 1px solid rgb(212, 221, 255); */
    
    /* justify-self: left; */

}

.rightInfo-headerGraphic {
    grid-area: headerGraphic;
    
    display: grid;
    /* width: 710px; */
    height: 50px;
    font-size: 20px;
    font-weight: 600;
    border-radius: 13px 13px 0px 0px;

    /* border-top-left-radius: 13px; */
    /* border-top-right-radius: 13px; */

    color: white;
    /* border: 1px solid rgb(214, 214, 255); */
    background-color: rgb(89, 89, 255);
    /* border-radius: 15px; */
    justify-content: center;
    align-items: center;
    /* text-align: center; */
    /* overflow: hidden; */
    white-space: nowrap;
    overflow: hidden;
}