.notification {

	position: relative;
	color: black;
	display: flex;
	align-items: center;
	justify-content: center;
	align-content: center;

	.content {
		width: 600px;
		background-color: #d8d4d0;
		border: 3px solid #f6f4da;
		border-radius: 4px;
		padding: 30px;
		padding-left: 30px;
		transform: translate( -40px, 0px );
		font-size: 22px;
		box-shadow: 0px 10px 5px black;
        
        .body{
            
        }
	}
	
	&.with-illustration .content {
		padding-left: 100px;
	}


	
	.illustration {
		transform: translate( 40px, 0px );
		z-index: 1;
		min-width: 250px;
	}
	
	.notification-options {
		display: flex;
		width: 100%;
		justify-content: end;
		gap: 10px;
		margin-top: 20px;
		
		.notification-button {
            position:relative;
			background-color: #9A2A32;
			color: white;
			padding: 8px 28px;
			border-radius: 10px;
            font-family:var(--button-font-family);
            font-weight:bold;
            letter-spacing: .05rem;
            border:3px solid black;
            box-shadow:inset -3px 3px 0 rgba(255,255,255,.3), inset 3px -3px 0 rgba(0,0,0,.3);
            text-shadow: 2px 2px 0 rgba(0,0,0,.3);
            &:before {
                content:'';
                position:absolute;
                left:-3px;
                top:-3px;
                bottom:-3px;
                right:-3px;
                border-radius:11px;
                border:2px solid red;
            }
            &:after {
                content:'';
                position:absolute;
                left:0;
                top:0;
                bottom:0;
                right:0;
                background-image:url(../images/buttons/button-texture.png);
                background-size:auto 100%;
                background-repeat:space repeat;
        }
			&.tab-highlighted {
				outline: 4px dashed black;
                outline-offset:3px;
			}
			
			&.disabled {
				opactiy: 0.5;
				filter: brightness( 0.5 );
			}
			
			&.blue { background-color: #2f6c8d; }
			&.green { background-color: #3c8c74; }
			&.red { background-color: #9A2A32; }
			 &.blue:before { border-color: #2f6c8d; }
			&.green:before { border-color: #3c8c74; }
			&.red:before { border-color: #9A2A32; }
		}
		
	}

}