.bonjour-popup {
    width: 190px;
    background-color: var(--color-bggray);
    border: 0.5px solid var(--color-lightgray);
    display: flex;
    padding: 20px 0 10px 10px;
    flex-direction: column;
    position: relative;
    top: -90px;

    h2 {
        padding: 0 0 20px 0;
        font-size: 16px;
    }

    .link-container {
        padding-left: 10px;
        margin-bottom: 10px;

        p {
            margin-top: 0;
        }
    }

	.button-white {
		background-color: var(--color-white);	
        width: 160px;
        margin-top: 5px;
        
        .text-gray {
        	color: var(--color-gray);
        	font-family: 'Arial-Regular';
        	font-size: 12px;
        }		
	}
	
	.button-green {
		background-color: var(--color-rparts);	
        width: 160px;
        margin-top: 5px;
        
        .text-gray {
        	color: var(--color-white);
        	font-family: 'Arial-Regular';
        	font-size: 12px;
        }		
	}

    .connect-container {
        display: flex;
        align-items: center;
        position: relative;
        top: -15px;
        
        .text-md {
		    font-size: 10px;
		    font-family: 'Arial-Regular';
		    margin-left: 15px;
		    text-decoration: none;
		}
		
        .arrow-right-gray {
            position: absolute;
            left: 0;

            &::before {
                position: absolute;
                content: '';
                left: 0px;
                bottom: -5px;
                width: 10px;
                height: 10px;
                background-image: url('../img/fleche-gray.svg');
                background-repeat: no-repeat;
            }
        }

    }

    .icon-accent-container {
        display: flex;
        align-items: center;
        position: relative;
        padding: 10px 20px;

        .arrow-right-white {
            position: absolute;
            left: 0;

            &::before {
                position: absolute;
                content: '';
                left: 10px;
                bottom: -5px;
                width: 10px;
                height: 10px;
                background-image: url('../img/fleche-white.svg');
                background-repeat: no-repeat;
            }
        }

        .arrow-right-gray {
            position: absolute;
            left: 0;

            &::before {
                position: absolute;
                content: '';
                left: 10px;
                bottom: -5px;
                width: 10px;
                height: 10px;
                background-image: url('../img/fleche-gray.svg');
                background-repeat: no-repeat;
            }
        }
    }
}