.main_container #compareOverview{
    display: 				none;
    position: 				fixed;
    bottom:					0px;
    right:					10px;
    background-color: 		var(--colorBlue);
    max-width:				350px;
    min-width:				310px;
    border-radius:			5px 5px 0px 0px;
    box-sizing: 			border-box;
}

    @media screen and (max-width: 800px) {
        .main_container #compareOverview{
            max-width:		unset;
            width:			100dvw;
            right:			0;
            left:			0;
            border-radius:	0px;
        }
    }

    .main_container #compareOverview.show{
        display: 		inline-block;
        z-index:		400;
    }
    .main_container #compareOverview #compareOverviewHeader{
        display: 		flex;
        align-items: 	center;
        position: 		relative;
        padding: 		8px;
        color: 			var(--colorWhite);
        line-height:	30px;
        cursor:			pointer;
        width: 			100%;
    }
        .main_container #compareOverview #compareOverviewHeader>.c_arrow {
            display: 		inline-block;
            text-align:		center;
            width:			30px;
            font-size:		20px;
        }
        .main_container #compareOverview #compareOverviewHeader>.c_arrow img{
            max-width: 		15px;
            max-height: 	15px;
            vertical-align: middle;
        }
        .main_container #compareOverview.open #compareOverviewHeader>.c_arrow{
            transform: rotate(180deg);
        }

        .main_container #compareOverview #compareOverviewHeader>.c_header{
            display: 			inline-block;
            font-size:			14px;
        }

        .main_container #compareOverview #compareOverviewHeader>.c_compare{
            display: 			none;
            position:			absolute;
            right:				8px;
            background-color: 	var(--colorWhite);
            color:				var(--colorBlue);
            border-radius:		5px;
            padding:			0px 5px 0px 5px;
            box-sizing:			border-box;
        }
            .main_container #compareOverview #compareOverviewHeader>.c_compare.show{
                display: inline-block;
            }
            .main_container #compareOverview #compareOverviewHeader>.c_compare:hover{
                cursor: pointer;
                background-color: 	var(--colorBlue);
                color:				var(--colorWhite);
                border: 			1px solid var(--colorWhite);
            }

    .main_container #compareOverview #compareOverviewContent{
        padding: 			0px;
        color: 				var(--colorDarkGray);
        background-color: 	var(--colorWhite);
        line-height:		15px;
        box-sizing:			border-box;
        border-left:		1px solid var(--colorGray);
        border-right:		1px solid var(--colorGray);
        max-height:			0px;
        overflow-y:			hidden;
        -webkit-transition: max-height 0.2s;
        -moz-transition: 	max-height 0.2s;
        transition: 		max-height 0.2s;
    }

    .main_container #compareOverview .compareLine{
        display:                grid;
        grid-template-columns:  70px auto 40px;
        grid-template-rows:     auto;
        grid-template-areas:    
            "compareOverviewImg compareOverviewTitle compareOverviewDelete";
        padding:				5px;
        border-bottom:			1px solid var(--colorMediumGray);
    }
        .main_container #compareOverview .compareLine div:nth-child(1){
            grid-area: 			compareOverviewImg;
        }
        .main_container #compareOverview .compareLine div:nth-child(1) img{
            max-width: 			60px;
            max-height: 		60px;
        }
        .main_container #compareOverview .compareLine div:nth-child(2){
            display: 			flex;
            align-items: 		center;
            justify-content: 	start;
            grid-area: 			compareOverviewTitle;
            padding:			0px 5px 0px 5px;
        }
        .main_container #compareOverview .compareLine div:nth-child(3){
            grid-area: 	compareOverviewDelete;
            display: 			flex;
            align-items: 		center;
            justify-content: 	center;
            font-weight:		900;
        }
            .main_container #compareOverview .compareLine div:nth-child(3):hover{
                cursor: 			pointer;
                box-sizing:			border-box;
                background-color: 	var(--colorBlue);
                color: 				var(--colorWhite);
                border-radius:		5px;
            }


/* productpagina compare button */
.compareContainer{
    position: 				absolute;
    bottom: 				0px;
    left: 					0px;
    display:                grid;
    grid-template-columns:  16px auto;
    grid-template-rows:     auto;
    grid-template-areas:    
        "compareStart compareStart"
        "compareCheckbox compareLabel";
    z-index: 300;
}
.compareContainer .compareCheck{
    grid-area:      compareCheckbox;
    display: 		inline-block;
    line-height:	38px;
    font-size: 		13px;
    color: 			var(--colorDarkGray);
    margin-right:	5px;
    vertical-align: bottom;
}
    .compareContainer .compareCheck input[type=checkbox]{
        position: 		relative;
        top: 			2px;
        accent-color: 	var(--colorBlue);
    }
    .compareContainer .compareCheck input[type=checkbox]:disabled{
        opacity: 		0.5;
        accent-color: 	var(--colorMediumGray);
    }

.compareContainer .compareLabel{
    grid-area:      compareLabel;
    display: 		inline-block;
    line-height:	38px;
    font-size: 		13px;
    color: 			var(--colorDarkGray);
    vertical-align: bottom;
}
    .compareContainer .compareStart{
        display: none;
    }
        .compareContainer.compare .compareStart{
            grid-area:          compareStart;
            display: 			block;
            position:			relative;
            left:				-6px;
            bottom:				-2px;
            padding:			5px;
            background-color:	var(--colorBlue);
            color:				var(--colorWhite);
            font-size:			13px;
            text-align:			center;
            border-radius:		3px;
            cursor: 			pointer;
        }
            .compareContainer.compare .compareStart .compareTriangel{
                position: 		absolute;
                bottom: 		-6px;
                left:			6px;
                border-top: 	6px solid var(--colorBlue);
                border-left: 	6px solid transparent;
                border-right: 	6px solid transparent;
            }
        
        .compareContainer.compare .compareStart:hover{
            background-color:	var(--colorBlue);
        }
        .compareContainer.compare .compareStart:hover .compareTriangel{
            border-top: 	6px solid var(--colorBlue);
        }

        .compareContainer label{
            user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
        .compareContainer .compareLabel .limit{
            opacity: 0.5;
        }