@import url('/resources/css/libraries/bootstrap.min.css');
@import url('/resources/css/libraries/fontawesome/css/all.min.css');

@import url('/resources/css/default.css?v=3q662qc');
@import url('/resources/css/colours.css?v=3q662qc');
@import url('/resources/css/header.css?v=3q662qc');
@import url('/resources/css/footer.css?v=3q662qc');

@import url('/resources/css/popover.css?v=3q662qc');
@import url('/resources/css/box-link.css?v=3q662qc');
@import url('/resources/css/pills.css?v=3q662qc');
@import url('/resources/css/buttons.css?v=3q662qc');

@import url('/resources/css/kiapNy.css?v=3q662qc');

@import url('/resources/css/overwrites/custom-switch-right.css?v=3q662qc');

* {
	/* Variabler til brug i nyt design */
	--spacing-spacing-sm: 8px;
	--spacing-spacing-md: 12px;
	--spacing-spacing-lg: 16px;
	--spacing-spacing-xl: 24px;
	--spacing-spacing-2xl: 32px;
	--spacing-spacing-3xl: 40px;
	--spacing-spacing-4xl: 60px;
	--radius-standard: 6px;
	--color-black: #212529;
	--color-black-muted: #57534E;
	--color-klynge-green: #297A77;
	--color-klynge-green-hover: #214E4D;
	--color-light-grey: #F3F5F7;
	--color-button-hover-grey: #EBEEF0;
	--color-white: #FFF;
	--color-border-grey: #DCDFE2;
	--color-disabled: #bebebe;
	--color-grey: #888;
	--color-red: #D1380D;
	--color-red-hover: #AC2D0A;

	--color-green-100: #D6F1ED;
	--color-green-200: #ACE3DB;
	--color-green-300: #7BCDC4;
	--color-green-500: #359791;
	--color-green-600: #297A77;
	--color-green-700: #24615F;
	--color-green-800: #214E4D;
	--color-green-900: #1F4242;
	--color-green-950: #0D2526;

	--color-grey-300: #C2C4C5;

	--color-yellow: #F5DD89;
	--color-orange: #FFC17A;
	--color-blue: #3581F9;

	--color-deepblue-700: #524F60;

	--color-sand-100: #E1D8C1;
	--color-sand-300: #D1C4A0;
}

.bg-light {
	background-color: var(--color-white) !important;
}

.bg-light-grey {
	background-color: var(--color-light-grey) !important;
}

*, html, body {
	font-family: "Inter", "Arial Bold";
}

body {
	display: flex;
	flex-direction: column;
	background-color: var(--color-light-grey);
}

.grey-link-hover {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-spacing-sm);
	padding: var(--spacing-spacing-sm, 8px);

	text-decoration: none !important;
	color: var(--color-black);
	font-family: Inter;
	font-weight: 600;
	font-size: 1rem;
	line-height: 20px;
	letter-spacing: 0%;
	cursor: pointer;
}

.grey-link-hover:hover {
	background-color: var(--color-button-hover-grey);
	border-radius: var(--radius-standard);
	text-decoration: none !important;
	color: var(--color-black);
}

.grey-link-hover.selected {
	background-color: var(--color-button-hover-grey);
	border-radius: var(--radius-standard);
}

.green-link-hover {
	background-color: var(--color-green-600);

	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-spacing-sm);
	padding: var(--spacing-spacing-sm, 8px);
	border-radius: var(--radius-standard);

	text-decoration: none !important;
	color: var(--color-white);
	font-family: Inter;
	font-weight: 600;
	font-size: 1rem;
	line-height: 20px;
	letter-spacing: 0%;
	cursor: pointer;
}

.green-link-hover:hover {
	background-color: var(--color-green-800);
	border-radius: var(--radius-standard);
	text-decoration: none !important;
	color: var(--color-white);
}

.green-link-hover.selected {
	background-color: var(--color-green-800);
	border-radius: var(--radius-standard);
}

.disabled-color {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-spacing-sm);
	padding: var(--spacing-spacing-sm, 8px);

	text-decoration: none;
	color: var(--color-disabled);
	font-family: Inter;
	font-weight: 600;
	font-size: 1rem;
	line-height: 20px;
	letter-spacing: 0%;
	cursor: unset;
}

.gap-sm {
	gap: var(--spacing-spacing-sm);
}

.gap-md {
	gap: var(--spacing-spacing-md);
}

.gap-lg {
	gap: var(--spacing-spacing-lg);
}

.gap-xl {
	gap: var(--spacing-spacing-xl);
}

.gap-2xl {
	gap: var(--spacing-spacing-2xl);
}

.gap-3xl {
	gap: var(--spacing-spacing-3xl);
}

.gap-4xl {
	gap: var(--spacing-spacing-4xl);
}

.margin-b-lg {
	margin-bottom: var(--spacing-spacing-lg);
}

.margin-b-xl {
	margin-bottom: var(--spacing-spacing-xl);
}

.margin-b-4xl {
	margin-bottom: var(--spacing-spacing-4xl);
}

.tableList {
	display: table;
	width: 100%;

	border-collapse: unset;
	border-radius: var(--radius-standard);
	border: 1px solid var(--color-border-grey);
	background: var(--color-white);

	/* shadows/sm-strong */
	box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(16, 24, 40, 0.10);
}

.tableList tbody {
	border: 0px;
}

.tableList th {
	padding: var(--spacing-spacing-lg) var(--spacing-spacing-xl);
	align-items: center;

	border: 0px;
	border-bottom: 1px solid var(--color-border-grey);

	overflow: hidden;
	color: var(--color-black);
	text-overflow: ellipsis;

	/* text-sm/font-semiBold */
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 20px; /* 142.857% */
}

.tableList td {
	padding: var(--spacing-spacing-lg) var(--spacing-spacing-xl);
	align-items: center;

	border: 0px;
	border-bottom: 1px solid var(--color-border-grey);

	overflow: hidden;
	color: var(--color-black);
	text-overflow: ellipsis;

	/* text-sm/font-regular */
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px; /* 142.857% */
}

.tableList tbody tr:last-child td {
	border: 0;
}

.tableList .tableList-icons-td {
	text-align: end;
}

.tableList .tableList-center-content {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-spacing-sm);
}

.promoteText {
	overflow: hidden;
	color: var(--color-black);
	text-overflow: ellipsis;
	/* text-base/font-semiBold */
	font-family: Inter;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 24px; /* 150% */
}

.title-h1 {
	font-family: Inter;
	font-weight: 600;
	font-size: 24px;
	line-height: 38px;
	letter-spacing: 0%;
}

.title-h2 {
	/* Text sm/Semibold */
	font-family: Inter;
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: 20px; /* 142.857% */
}

.text-grey {
	color: var(--color-grey);
}

.text-white {
	color: var(--color-white);
}

.button-white {
	display: inline-flex;
	height: 40px;
	padding: var(--spacing-spacing-sm) var(--spacing-spacing-lg);
	justify-content: center;
	align-items: center;
	gap: var(--spacing-spacing-sm);

	border-radius: var(--radius-standard);
	background: var(--color-white);

	color: var(--color-black);
	/* text-sm/font-semiBold */
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 20px; /* 142.857% */
	text-decoration: none;
}

.button-white:hover {
	background: var(--color-button-hover-grey);
	color: var(--color-black);
	text-decoration: none;
}

.link-white {
	color: #FFF;

	/* text-sm/font-bold */
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 20px; /* 142.857% */
	text-decoration: none;

	margin-right: var(--spacing-spacing-sm);
}

.link-white:hover {
	text-decoration: none;
	color: var(--color-button-hover-grey); /* TODO: find ud af om det er en anden farvekode til hover på hvide links */
}

.reg-text {
	margin: 0;
	padding: 0;

	/* text-sm/font-medium */
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 20px; /* 142.857% */
}

.small-text {
	font-family: Inter;
	font-size: 12.8px;
	font-style: normal;
	font-weight: 400;
	line-height: 16px; /* 125% */
}

.content-container {
	background-color: var(--color-white) !important;
	box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(16, 24, 40, 0.10);

	flex-grow: 1;
    flex-basis: auto;
    display: inline-flex;
    flex-direction: column;

	margin-top: var(--spacing-spacing-2xl);

    padding-top: var(--spacing-spacing-2xl);
    padding-bottom: var(--spacing-spacing-2xl);
    padding-left: var(--spacing-spacing-3xl);
    padding-right: var(--spacing-spacing-3xl);
    gap: var(--spacing-spacing-xl);
}

.content-fill {
	width: 100%;
}

.content-tabs {
	display: inline-flex;
	flex-direction: row;
}

.content-tabs div:not(.active) {
	border-bottom: 1px solid var(--color-border-grey);
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;

	color: var(--color-black-muted);

	/* text-sm/font-semiBold */
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 20px; /* 142.857% */
}

.content-tabs .active {
	border-bottom: 2px solid var(--color-black);
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	color: var(--color-black);

	/* text-sm/font-semiBold */
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 20px; /* 142.857% */
}

.tabs-spacer {
	flex: 1;
}

@media only screen and (max-width: 916px) { /* MOBILVISNING */
	.content-container {
		width: 100%;
		display: inline-flex;
		flex-direction: column;
		padding: var(--spacing-spacing-sm);
		gap: var(--spacing-spacing-sm);
	}

	.mob-margin-b-xl {
		margin-bottom: var(--spacing-spacing-xl);
	}
}

/* ----------------------------------------- Mobilvisning misc ------------------------------------------- */

.mobil-container {
	max-width: 100%;
	border: 1px solid var(--color-border-grey);
	border-radius: var(--radius-standard);
	box-shadow: 0px 1px 3px 0px #1018281A;
	box-shadow: 0px 1px 2px -1px #0000001A;
	gap: var(--spacing-spacing-sm);
	padding: var(--spacing-spacing-sm);
	display: inline-flex;
	flex-wrap: wrap;
	flex-direction: column;

	word-break: break-all;
}

.mobile-table-row {
	display: inline-flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-spacing-lg);

	overflow: hidden;
	color: var(--color-black);
	text-overflow: ellipsis;
	/* text-sm/font-regular */
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px; /* 142.857% */
}

.mobile-table-row span {
	display: flex;
	flex-direction: row;
	align-items: anchor-center;
}

/* ----------------------------------------- Knapper misc ------------------------------------------- */

.btn-clear {
	background: unset;
	border: unset;
	outline: none;
}

.btn-clear:focus {
	outline: none;
}

.btn-green-600 {
	background-color: var(--color-green-600);
	color: var(--color-white);

	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-spacing-sm);
	padding: var(--spacing-spacing-sm, 8px);
	border-radius: var(--radius-standard);

	text-decoration: none !important;
	font-family: Inter;
	font-weight: 600;
	font-size: 1rem;
	line-height: 20px;
	letter-spacing: 0%;

	cursor: pointer;
}

.btn-green-600:hover {
	background-color: var(--color-klynge-green-hover);
	color: var(--color-white);
    text-decoration: none;
}

.btn-p-lg {
	padding: var(--spacing-spacing-lg) !important;
}

.btn-red-delete {
	background-color: var(--color-red);
	color: var(--color-white);

	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-spacing-sm);
	padding: var(--spacing-spacing-sm, 8px);
	border-radius: var(--radius-standard);

	text-decoration: none !important;
	font-family: Inter;
	font-weight: 600;
	font-size: 1rem;
	line-height: 20px;
	letter-spacing: 0%;

	cursor: pointer;
}

.btn-red-delete:hover {
	background-color: var(--color-red-hover);
    text-decoration: none;
}

.btn-red-border {
	background-color: var(--color-white);
	color: var(--color-red);

	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-spacing-sm);
	padding: var(--spacing-spacing-sm, 8px);

	border: 2px solid var(--color-red);
	border-radius: var(--radius-standard);

	text-decoration: none !important;
	font-family: Inter;
	font-weight: 600;
	font-size: 1rem;
	line-height: 20px;
	letter-spacing: 0%;

	cursor: pointer;
}

.btn-red-border:hover {
	background-color: var(--color-red-hover);
	color: var(--color-white);
	border: 2px solid var(--color-red-hover);
}


@media (min-width: 576px) {
    .modal-dialog:not(.infotekstModal) {
        max-width: 550px !important;
        margin: 1.75rem auto;
    }
}

/*
 * .font-calender bruges til datepicker felter på bestilklyngepakke og opret klynge siderne
 */
.font-calender {
    position: relative;
}

.font-calender i{
    position: absolute;
    right: 15px;
    top: 11px;
}