@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');


:root {
    --urgent: #FC4444;
    --high: #FFE779;
    --moderate: #1B7D54;
    --low: #B8DFAA;
    --border-type-risk: #BBBBBB;
    --rectangle-type-risk: #F5F5F5;
    --border-square: #555555;
	--risk-color: #222222;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
	font-family: 'Inter', sans-serif;
	color: var(--risk-color);
}

/* REUSABLE CLASSES */
.align-center {
    display: flex;
    align-items: center;
}

.align-middle {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex {
    display: flex;
}

.urgent {
    background-color: var(--urgent);
}

.high {
    background-color: var(--high);
}

.moderate {
    background-color: var(--moderate);
}

.low {
    background-color: var(--low);
}

/* INITIAL TITLE */
.risk-map-title {
	text-align: center;
	margin-top: 2rem;
	margin-bottom: 0.5rem;
}

/* MAIN CONTAINER OF THE MAP */
.risk-heatmap-main-container {
    height: calc(100vh - 250px);
}

/* MAP LEGEND AND MAP GRID*/
.risk-map-grid {
    list-style: none;
}

/* AREA CRITICALLY */
.criticality-container {
    transform: rotate(-90deg);
	margin-right: -30px;
}

/* TEXT OF AREA CRITICALLY */
.impact-and-critical-text {
    text-transform: uppercase;
}

.criticality-type-container, .impact-type-container {
    background-color: var(--rectangle-type-risk);
    border: 1px solid var(--border-type-risk);
}

/* TEXT OF CRITICALLY CONTAINER */
.criticality-type-container {
    width: 133px;
	transition: width 0.7s ease-in;
}

.impact-type-container {
    width: 133px;
    height: 80px;
}

/* TEXT OF CRITICALLY AND IMPACT */
.criticality-type, .impact-type {
	font-size: 15px;
    width: 100%;
    text-align: center;
	font-weight: normal;
}

/* COLORFUL SQUARES OF GRID */
.square {
    flex-wrap: wrap;
    width: 133px;
    height: 80px;
    border: 1px solid var(--border-square);
    padding: 5px;
	font-size: 20px;
	color: var(--risk-color);
	transition: width 0.7s ease-in;
}

/* IMPACT CONTENT CONTAINER*/
.impact-content-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

/* TEXT IMPACT CONTAINER */
.impact-container {
    width: 75%;
}

/* TEXT OF IMPACT CONTAINER*/
.impact-text {
    text-align: center;
}

@media(max-height: 800px) {
    .risk-heatmap-main-container {
    	height: calc(100vh - 78px);
	}
	
	.risk-map-title {
		font-size: 25px;
	}
	
	.square, .impact-type-container {
		width: 105px;
		height: 70px;
		transition: width 0.7s ease-in;
	}
	
}

@media(max-width: 600px) {
    .risk-heatmap-main-container {
    	height: calc(100vh - 62px);
	}
		
	.square, .impact-type-container {
		width: 80px;
		height: 80px;
		transition: width 0.7s ease-in;
	}
	
	.risk-map-title {
		padding-top: 2rem;
	}
}

@media(max-width: 535px) {
    .criticality-type-container {
    	width: 80px;
    }
		
	.risk-heatmap-container {
		margin-left: -35px;
	}
}


@media(max-width: 435px) {
    .square, .impact-type-container {
		width: 60px;
		height: 60px;
	}
}