h1.form_overskrift
{
	grid-column: 3 / 22; 
	grid-row:  7/8;
	color:#000;
	font-size:20px;
	text-align: left;
	font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

}

h1.form_privat_overskrift
{
	grid-column: 7/22; 
	grid-row:  4/5;
	color:#000;
	font-size:28px;
	text-align: left;

}
/* Existing CSS */
h1.valg_profil_title {
    grid-column: 1/-1; 
    grid-row: 2/3;
    text-align: center;
	margin: 0 auto;
		font-size: 2.5rem;
		line-height: 1;
		font-weight: 700;
		color: rgb(64 62 67 / var(--tw-text-opacity));
	font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	
}

a.valg_profil_type_1 {
    grid-column: 3;
    grid-row: 4/5;
    display: flex;
    flex-direction: column;
    padding: 30px; /* Corresponds to .p-2 */
    border: 1px solid hsl(var(--border, 214.3 31.8% 91.4%)); /* Corresponds to .border */
    border-radius: 16px; /* Corresponds to .rounded-lg */
    box-shadow: var(--tw-shadow, 0 1px 2px 0 rgb(0 0 0 / 0.05)); /* Corresponds to .shadow-sm */
    transition-property: box-shadow; /* Corresponds to .transition-shadow */
    transition-timing-function: cubic-bezier(.4, 0, .2, 1); /* Smooth shadow transition */
    transition-duration: 0.15s; /* Animation duration */
	width: 350px;
	margin: 0 auto; 
}


a.valg_profil_type_2 {
    grid-column: 5;
    grid-row: 4/5;
    display: flex;
    flex-direction: column;
    padding: 30px; /* Corresponds to .p-2 */
    border: 1px solid hsl(var(--border, 214.3 31.8% 91.4%)); /* Corresponds to .border */
    border-radius: 16px; /* Corresponds to .rounded-lg */
    box-shadow: var(--tw-shadow, 0 1px 2px 0 rgb(0 0 0 / 0.05)); /* Corresponds to .shadow-sm */
    transition-property: box-shadow; /* Corresponds to .transition-shadow */
    transition-timing-function: cubic-bezier(.4, 0, .2, 1); /* Smooth shadow transition */
    transition-duration: 0.15s; /* Animation duration */
	width: 350px;
	margin: 0 auto; 
}

.valg_type_subtext {
    grid-column: 1/-1;
grid-row: 6/7;
text-align: center; 
margin:0 auto;  

}

	
a.valg_profil_type {
    border-radius: 2px;	
    border: 2px solid #203354;
    text-align: center;
    color: #203354;
    font-size: 24px;
    text-decoration: none;
    padding-top: 10px;
    padding-bottom: 12px;
}	
	
a.valg_profil_type_1:hover {
    box-shadow: 0 4px 8px rgb(0 0 0 / 0.2); /* Elevate the box shadow on hover */
    cursor: pointer;
}

a.valg_profil_type_2:hover {
    box-shadow: 0 4px 8px rgb(0 0 0 / 0.2); /* Elevate the box shadow on hover */
    cursor: pointer;
}


/* New CSS for Cards */
.valg_1_description, .valg_2_description {
    margin-top: 20px;
    text-align: center;
}

.card {
    width: 300px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

a.valg_profil_type_1 h2 {
    font-size: 1.5rem; /* Larger font for the title */
    font-weight: 600;
	line-height: 2rem;
    color: hsl(var(--foreground, 222.2 84% 4.9%));
    margin-bottom: 0.5rem;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

a.valg_profil_type_2 h2 {
    font-size: 1.5rem; /* Larger font for the title */
    font-weight: 600;
	line-height: 2rem;
    color: hsl(var(--foreground, 222.2 84% 4.9%));
    margin-bottom: 0.5rem;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}


a.valg_profil_type_1 p {
    font-size: 1rem; /* Regular size for paragraph text */
    color: hsl(var(--foreground, 222.2 84% 4.9%));
    margin: 0;
	font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

a.valg_profil_type_2 p {
    font-size: 1rem; /* Regular size for paragraph text */
    color: hsl(var(--foreground, 222.2 84% 4.9%));
    margin: 0;
	font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* General button styling */
.valg_type_btn {
 display: inline-flex;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    gap: 0.5rem; /* Space between icon and text if applicable */
    padding: 1.75rem 1rem; /* Top & Bottom: 1.75rem, Left & Right: 1rem */
    background-color: rgba(64, 62, 67, var(--tw-bg-opacity, 1)); /* Background color */
    color: rgb(255, 255, 255); /* White text */
    font-size: 1.125rem; /* Text size: 18px */
    line-height: 1.75rem; /* Line height: 28px */
    font-weight: 500; /* Medium weight */
    border: none; /* No border */
    border-radius: 12px; /* Rounded corners */
    text-align: center; /* Center text */
    white-space: nowrap; /* Prevent text wrapping */
    cursor: pointer; /* Pointer cursor on hover */
    width: 100%; /* Full-width button */
    height: 2.5rem; /* Button height */
    transition: color, background-color, border-color, text-decoration-color, fill, stroke 0.15s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth transition */
	font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	margin-top: 15px;
}

/* Hover effect for the button */
.valg_type_btn:hover {
  background-color: #555;
    color: white; /* Optional: Changes the text color */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* Applies hover shadow */
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth transition */
}



a.valg_profil_type_extra
{
	background-color: #00abe4;
	border-radius: 2px;	
	border: 2px solid #fff;
	text-align:center;
	color:#fff;
	font-size:24px;
	text-align:center;
	text-decoration:none;
	padding-top:10px;
	padding-bottom:12px;
}	
	
a.valg_profil_type_extra:hover
{
	background-color: #203354;
	border: 2px solid #203354;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}	

.valg_1_description 
{	
	grid-column: 5/11;
	grid-row: 6/8;
	font-size:25px;
	text-align:center;
	}

.valg_2_description 
{	
	grid-column: 12/18;
	grid-row: 6/8;
	font-size:25px;
	text-align:center;
	}


.form_manchet
{
	grid-column: 3 / 22; 
	grid-row:  8/9;
	color:#000;
	font-size:18px;
	text-align: left;
	font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}


.form1_content_1
{
	grid-column: 7/17; 
	grid-row:  9/10;
	padding-top: 30px;
}

.form1_content_2
{
	grid-column: 7/17; 
	grid-row:  10/11;
	padding-bottom: 10px;                                                                                       
}

.form1_content_3
{
	grid-column: 7/17; 
	grid-row:  11/12;	
}

.form1_content_4
{
	grid-column: 7/17; 
	grid-row:  12/13;	
	padding-bottom: 10px;
}

.form1_content_5
{
	grid-column: 7/17; 
	grid-row:  13/14;	
	margin-bottom: 10px;
}

.form1_content_6
{
	grid-column: 7/17; 
	grid-row:  14/15;	
	margin-bottom: 10px;
}

a.formlink
{
	color:ccc;
	text-decoration:underline;
}

.form2_content_1
{
	grid-column: 7/17; 
	grid-row:  5/6;
	padding-top: 30px;
}

.form2_content_2
{
	grid-column: 7/17; 
	grid-row:  6/7;	
	padding-bottom: 10px;                                                                                       
}

.form2_content_3
{
	grid-column: 7/12; 
	grid-row:  7/8;	
}

.form2_content_4
{
	grid-column: 7/12; 
	grid-row:  8/9;	
	padding-bottom: 10px;
}

.form2_content_5
{
	grid-column: 13/17; 
	grid-row:  7/8;	
	padding-bottom: 10px;
}

.form2_content_6
{
	grid-column: 13/17; 
	grid-row:  8/9;	
	padding-bottom: 10px;
}

.form2_content_7
{
	grid-column: 7/17; 
	grid-row:  9/10;	
	padding-bottom: 10px;
}

.form2_content_8
{
	grid-column: 7/17; 
	grid-row:  10/11;	
	padding-bottom: 10px;
	}

.form2_content_9
{
	grid-column: 7/17; 
	grid-row:  11/12;	
	padding-bottom: 10px;
	}

.form2_content_10
{
	grid-column: 7/17; 
	grid-row:  12/13;	
	padding-bottom: 10px;
	}

.form2_content_11
{
	grid-column: 7/17; 
	grid-row:  13/14;	
	padding-bottom: 10px;
	}


.form2_content_12
{
	grid-column: 7/17; 
	grid-row:  14/15;	
	padding-bottom: 10px;
	}

.form2_content_13
{
	grid-column: 7/17; 
	grid-row:  19/20;	
	padding-bottom: 10px;
	}

.form2_content_14
{
	grid-column: 7/17; 
	grid-row:  20/21;	
	padding-bottom: 10px;
	}

.form2_content_15
{
	grid-column: 7/17; 
	grid-row:  21/22;	
	padding-bottom: 10px;
	}

.form2_content_16
{
	grid-column: 7/17; 
	grid-row:  22/23;	
	padding-bottom: 10px;
	}

.Opret_beskriv_form
{
	grid-column: 7/17; 
	grid-row:  22/23;	
	padding-bottom: 10px;
	}


h3.form2_fag_title
{
	grid-column: 7/17; 
	grid-row:  24/25;	
	}


.form2fag1
{
	grid-column: 15/27; 
	grid-row:  25/26;	
	margin: 20px 0px 0px 0px;
	}
	
.form2fag2
{
	grid-column: 10/15;
	grid-row:  25/26;
	margin: 20px 0px 0px 0px;
	}

.form2fag3
{
	grid-column: 7/10; 
	grid-row:  25/26;
	margin: 20px 0px 0px 0px;
	}


.form2fag4
{
	grid-column: 15/27; 
	grid-row:  26/27;	
	margin: 0px 0px 20px 0px;
	}
	
.form2fag5
{
	grid-column: 10/15;
	grid-row:  26/27;
	margin: 0px 0px 20px 0px;
	}

.form2fag6
{
	grid-column: 7/10; 
	grid-row:  26/27;
	margin: 0px 0px 20px 0px;
	}

h2.udlej_sprog_overskrift
{
	grid-column: 7/17; 
	grid-row:  27/28;
		}

.udlej_sprog_text
{
	grid-column: 2/22;
	grid-row: 23/24;
    }

.udlej_sprog1
{
	grid-column: 2/5;
	grid-row: 28/29;

    }

.udlej_sprog2
{
	grid-column: 5/8;
	grid-row: 28/29;
 
	}

.udlej_sprog3
{
	grid-column: 8/11;
	grid-row: 28/29;

	}

.udlej_sprog4
{
	grid-column: 11/14;
	grid-row: 28/29;

	}

.udlej_sprog5
{
	grid-column: 14/17;
	grid-row: 28/29;
 
	}

.udlej_sprog6
{
	grid-column: 17/20;
	grid-row: 28/29;

	}

.udlej_sprog7
{
	grid-column: 20/22;
	grid-row: 28/29;
 
	}

.udlej_sprog8
{
	grid-column: 2/5;
	grid-row: 29/30;

	}

.udlej_sprog9
{
	grid-column: 5/8;
	grid-row: 29/30;

	}



.form3fag1
{
	grid-column: 15/27; 
	grid-row:  10/12;	
	margin: 20px 0px 0px 0px;
	}
	
.form3fag2
{
	grid-column: 10/15;
	grid-row:  10/12;
	margin: 20px 0px 0px 0px;
	}

.form3fag3
{
	grid-column: 7/10; 
	grid-row:  10/12;
	margin: 20px 0px 0px 0px;
	}


.form3fag4
{
	grid-column: 4/8; 
	grid-row:  12/14;	
	margin: 0px 0px 20px 0px;
	}
	
.form3fag5
{
	grid-column: 10/15;
	grid-row:  12/14;
	margin: 0px 0px 20px 0px;
	}

.form3fag6
{
	grid-column: 16/27; 
	grid-row:  12/14;
	margin: 0px 0px 20px 0px;
	}

	
.form_knap_frem
{
	grid-column: 10 / 14; 
	grid-row:  30 / 31;	
	text-align: center;	
	margin-top: 10px;
}





.form_knap_logon
{
	grid-column: 7/12; 
	grid-row:  14;
}

a.form_knap_glemt
{
	grid-column: 13 / 18; 
	grid-row:  14;
	text-decoration: underline;
	margin-left: 10px;
}


.form_knap_opret_privat
{
	grid-column: 7/12; 
	grid-row:  15;
	margin: 25px 5px 0px 0px;
	}


.form_knap_opret_virk
{
	grid-column: 13/18; 
	grid-row:  15;
	margin: 25px 0px 0px 5px;	
}

  /* Privat oprettelse */
.privat_content_1
{
	grid-column: 7/17; 
	grid-row:  9/10;
	padding-top: 30px;
}

.privat_content_2
{
	grid-column: 7/17; 
	grid-row:  10/11;
	padding-bottom: 10px;                                                                                       
}

.privat_content_3
{
	grid-column: 7/17; 
	grid-row:  11/12;	
}

.privat_content_4
{
	grid-column: 7/17; 
	grid-row:  12/13;	
	padding-bottom: 10px;
}

.privat_content_5
{
	grid-column: 7/17; 
	grid-row:  13/14;	
	margin-bottom: 10px;
}
  
.privat_content_6
{
	grid-column: 7/17; 
	grid-row:  14/15;	
	margin-bottom: 10px;
}

.privat_content_7
{
	grid-column: 7/17; 
	grid-row:  15/16;	
	margin-bottom: 10px;
}

.privat_content_8
{
	grid-column: 7/17; 
	grid-row:  16/17;	
	margin-bottom: 10px;
}



  /* Glemt password */

.email_genskab
{
	grid-column: 8 / 16; 
	grid-row:  9/10;	
}
	
	
  /* New login page */
 /* Container */


/* App Title */
.app-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #403e43;
    margin-bottom: 1rem;
}

/* Heading and Subtext */
.login-heading {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #111827;
}

.login-subtext {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 1.5rem;
}

/* Input Group */
.input-group {
    margin-bottom: 1.5rem;
    text-align: left;
}

.input-label {
    display: block;
    font-size: 0.9rem;
    color: #374151;
    margin-bottom: 0.5rem;
}

.input-field {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    box-sizing: border-box;
    background-color: #ffffff;
    color: #333333;
}

.input-field:focus {
    border-color: #4338ca;
    box-shadow: 0 0 5px rgba(67, 56, 202, 0.5);
    outline: none;
}

/* Submit Button */
.submit-btn {
    width: 100%;
    padding: 0.8rem;
    font-size: 1rem;
    font-weight: bold;
    color: #ffffff;
    background-color: #4338ca;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.submit-btn:hover {
    background-color: #3b3b97;
}

/* Forgot Password */
.forgot-password {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: #4338ca;
    text-decoration: none;
    transition: color 0.3s ease;
}

.forgot-password:hover {
    color: #6b5fb6;
}

/* Signup Message */
.signup-message {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: #6b7280;
}

.signup-link {
    color: #4338ca;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.signup-link:hover {
    color: #6b5fb6;
}


/* Login form per 01.12.2025 */

/* General Container */
.login-container {
  grid-column: 1/-1;
  grid-row: 4/5;
  max-width: 800px;
  min-width: 400px;
  margin: 0 auto;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  margin-top: 50px; 
  margin-bottom: 50px; 
}

/* Header */
.login-header {
  margin-bottom: 20px;
   font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.login-title {
  font-size: 24px;
  font-weight: 700;
  color: #333333;
   font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.login-subtitle {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight:400;
  color: hsl(222.2, 84%, 4.9%);
   font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Input Fields */
.login-field {
  margin-bottom: 15px;
  text-align: left;
   font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.login-label {
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: #020817;
  margin-bottom: 5px;
  display: block;
   font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.login-input {
   font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-feature-settings: inherit !important;
    font-variation-settings: inherit !important;
    font-size: 1rem !important; /* Match parent font size */
    font-weight: inherit !important;
    line-height: 1.5rem !important;
    letter-spacing: inherit !important;
    color: inherit !important; /* Match parent color */
    margin: 0 !important;
    padding: 0 !important;
    appearance: auto !important; /* Default browser appearance */
    background-color: #fff !important; /* Match background variable */
	border: 0.5px solid #eee !important;
    padding-top: 0.5rem !important; /* Match spacing utility */
    padding-bottom: 0.5rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    display: inline-block !important;
    text-align: start !important;
    cursor: text !important; /* Cursor for text input */
    box-sizing: border-box !important; /* Includes padding and border in width/height */
    border-radius: 12px !important; /* Rounded corners */
    width: 100% !important; /* Full width */
    height: 3rem !important; /* Fixed height */
    transition: border-color 0.2s, box-shadow 0.2s !important; /* Smooth transitions */
}

/* Focus Style */
.login-input:focus {
    border: 1px solid #000 !important;

}

/* Hover Style */
.login-input:hover {
    border: 1px solid #eee !important; /* Slightly darker border on hover */
}

.login-input::placeholder {
    font-family: inherit !important; /* Match the font settings */
    font-size: 1rem !important; /* Matches .text-base size */
    line-height: 1.5rem !important; /* Matches .text-base line height */
    color: hsl(var(--muted-foreground)) !important; /* Placeholder color */
    letter-spacing: inherit !important; /* Match letter-spacing */
    opacity: 1 !important; /* Ensure placeholder is fully visible */
}

/* Optional: Add hover/focus styles for placeholder */
.login-input:focus::placeholder {
    color: hsl(var(--input-hover)) !important; /* Change color on focus */
    opacity: 0.75 !important; /* Slightly reduce visibility on focus */
}




/* Button */
.login-button {
 display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem; /* Top/Bottom: 8px, Left/Right: 16px */
    font-size: 1.125rem; /* 18px */
    font-weight: 500;
    color: rgba(255, 255, 255, 1); /* White text */
    background-color: rgba(64, 62, 67, 1); /* Accent background */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* Shadow */
    white-space: nowrap;
    width: 100%;
    height: 3rem; /* 48px */
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
   font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
}

.login-button:hover {
background-color: rgba(85, 85, 90, 1); /* Slightly darker on hover */
   font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
}

/* Links */
.login-links {
  margin-top: 20px;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
}

.forgot-password-link {
  font-size: 14px;
  color: #7a5fff;
  text-decoration: none;
  display: block;
  margin-bottom: 10px;
   font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
}

.forgot-password-link:hover {
  text-decoration: underline;
   font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
}

.signup-text {
  font-size: 14px;
  color: #777777;
   font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
}

.signup-link {
  color: #7a5fff;
  text-decoration: none;
   font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
}

.signup-link:hover {
  text-decoration: underline;
   font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
}