/* CSS Document */

/* =========================================================
   LAGSIDE.CSS
   Sola IBK – spesifikke justeringer for lagside.php
   ========================================================= */


/* =========================================================
   MODAL – TRENINGSTIDER
   Tvinger Bootstrap-modalene til å bruke hele viewporten
   og hindrer Porto/annen CSS i å begrense bredde/plassering.
   ========================================================= */

.modal {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;

	width: 100% !important;
	height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	overflow-x: hidden !important;
	overflow-y: auto !important;

	z-index: 1055 !important;
}


/* Når modal er åpen */
.modal.show {
	display: block !important;
}


/* Selve modalboksen */
.modal .modal-dialog {
	position: relative !important;

	width: auto !important;
	max-width: 500px;

	margin: 1.75rem auto !important;

	pointer-events: none;
}


/* Stor modal */
.modal .modal-dialog.modal-lg {
	width: calc(100% - 40px) !important;
	max-width: 900px !important;
}


/* Vertikal sentrering */
.modal .modal-dialog.modal-dialog-centered {
	display: flex !important;
	align-items: center !important;

	min-height: calc(100% - 3.5rem) !important;
}


/* Innhold */
.modal .modal-content {
	position: relative !important;

	width: 100% !important;

	margin: 0 !important;

	pointer-events: auto;

	background-clip: padding-box;
}


/* Sikrer at glass-cardmodal ikke arver en begrenset bredde */
.modal .glass-cardmodal {
	width: 100% !important;
	max-width: none !important;
}


/* Modal body */
.modal .modal-body {
	position: relative;
	width: 100%;
}


/* Backdrop */
.modal-backdrop {
	position: fixed !important;

	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;

	width: 100vw !important;
	height: 100vh !important;

	z-index: 1050 !important;
}


/* =========================================================
   RESPONSIV MODAL
   ========================================================= */

@media (max-width: 991.98px) {

	.modal .modal-dialog.modal-lg {
		width: calc(100% - 30px) !important;
		max-width: 720px !important;
	}

}


@media (max-width: 767.98px) {

	.modal .modal-dialog,
	.modal .modal-dialog.modal-lg {
		width: calc(100% - 24px) !important;
		max-width: none !important;

		margin: 12px auto !important;
	}

	.modal .modal-dialog.modal-dialog-centered {
		min-height: calc(100% - 24px) !important;
	}

}


/* =========================================================
   MODAL TYPOGRAFI / LUFT
   ========================================================= */

.modal .modal-body {
	padding: 1.5rem;
}


.modal .modal-footer {
	padding: 1rem 1.5rem;
}


@media (min-width: 768px) {

	.modal .modal-body {
		padding: 2rem;
	}

	.modal .modal-footer {
		padding: 1rem 2rem 1.5rem;
	}

}