@charset "UTF-8";


@import url('https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,500;0,600;0,700;1,400&display=swap');

/*Variabili*/
:root {
	--main:#254563;
	--secondary:#0070C0;
	--warning:#FF0000;
	--success:#00B050;
	--waiting:#e39a1a;
	--info:#00B0F0;
    --backgroud_light:#f8f7f6;
	
}

.signature-pad{
	border: 1px solid black;
}

.event-stripes {
    border-radius: 3px 3px 0 0;
    height: 8px;
    margin-bottom: 2px;
}

.event {
    margin: 2px 0;
    border-radius: 4px;
    overflow: hidden;
}

.event-text a {
    font-size: 12px;
    padding: 2px 4px;
    display: block;
    text-decoration: none;
    color: #000;
}


html {font-size:13px;}

body {
    padding: 0;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    font-family: 'Rethink Sans', sans-serif;
}

a {
	color: inherit ;
	text-decoration: none ;
}

th .form-control {
    padding: 0.25rem !important
}

.col-overflow-x{
    overflow-x: auto;
}


#wrapper {
  position: relative;
  width: 100%;
  padding:0 2%;
  /*min-height: 600px;*/
  min-height: 75vh;
  margin: 0 auto;
  overflow: hidden;
  z-index: 1;
  margin-top: 20px;
}

.header_nav{
    padding:0.5rem 4%;
    margin-bottom:2rem
}

.myresponsive {
    position:relative; 
    float:left; 
    width:100%;
    padding: 0 4%;
    margin: 0 auto;
}

.link {
	color:blue !important;
	text-decoration: underline !important;
    cursor: pointer
}

/*Ui Dialog*/
/*min-width:42.85rem !important;*/
.ui-dialog {position:fixed!important; font-family:inherit !important; z-index:10000 !important}
.ui-widget {font-family:inherit !important}

.ui-dialog :focus {
    outline: -webkit-focus-ring-color auto 0px !important;
}

.ui-dialog .ui-dialog-titlebar-close {
    background-color: var(--main)
}

.bi-eye-slash {
    width:16px;
    height:16px;
}


.account-wall
{
	margin-top: 10px;
	padding: 40px 0px 20px 0px;
	background-color: #f7f7f7;
	-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}

.form-signin
{
	max-width: 330px;
	padding: 15px;
	margin: 0 auto;
}
.form-signin .form-signin-heading, .form-signin .checkbox
{
	margin-bottom: 10px;
}
.form-signin .checkbox
{
	font-weight: normal;
}
.form-signin .form-control
{
	position: relative;
	font-size: 16px;
	height: auto;
	padding: 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.form-signin .form-control:focus
{
	z-index: 2;
}
.form-signin input[type="text"]
{
	margin-bottom: -1px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.form-signin input[type="password"]
{
	margin-bottom: 10px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.page-link {
    height:100%;
}

/*OVERLAY*/
#blocca_schermo {position:fixed; width:100%; height:100%; left:0; top:0; background:rgba(1,1,1,0.7); display:none; z-index:110;}
#loading {position:fixed; width:5.71rem; height:5.71rem; left:50%; top:50%; margin-left:-2.85rem; margin-top:-2.85rem; border-radius:10px; z-index:111; color:#fff; background: url('../images/icons/loader.gif') no-repeat; background-size:cover; display:none }
#blocca_schermo h6 {position:relative; width:300px; height:300px; left:50%; top:50%; margin-left:-150px; margin-top:60px; color:#fff !important; text-align:center}

.pointer {
    cursor:pointer !important
}


.chat_box1 {
    width:90%; 
    margin-left:10%; 
    padding:0.25rem 1rem; 
    border-radius:10px; 
    border:1px dotted #cacaca; 
    background-color: var(--main); 
    color:#fff
}

.chat_box2{
    width:90%; 
    margin-right:10%; 
    padding:0.25rem 1rem; 
    border-radius:10px; 
    border:1px dotted #cacaca; 
    background-color: #fff; 
    color:#000
}

.chat_input_text{
    width:100%;
}


.danger-badge {
    background-color: red;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	display: inline-block;
}

.warning-badge {
    background-color: orange;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	display: inline-block;
}

.success-badge {
    background-color: green;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	display: inline-block;
}

table td {
	vertical-align: middle;
}

.sub_parent_track td:first-child{
    padding-left: 2%;
}

.td-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

tr .riduci-lunghezza {
    width: 0%;
    /* white-space: nowrap; */
}

.modal-backdrop.show{
	display: none !important;
}

.modal.fade.show{
	background-color: rgba(0, 0, 0, 0.5);
}

.modal-dialog.modal-dialog-centered {
    width: fit-content;
}

/* Posiziona i sotto-menu a destra */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    display: none;
    position: absolute;
}

/* Mostra il sotto-menu al passaggio del mouse o clic */
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

.nav-item .nav-link:first-child {
    padding-left: 5px !important;
}


.nav-link.active{
	background-color: transparent !important;
	color: #0d6efd !important;
}

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

.d-none-custom{
	width: 50px !important;
	background-color: white !important;
    border-right: 1px solid #edeaea;
}

.d-none-custom *{
	display: none !important;
}

.button-hide-show{
	display: none !important;
}

.d-none-custom .button-hide-show{
	display: flex !important;
    position: fixed;
	top: 10px;
    height: 25px;
    width: 25px;
    align-items: center;
}

.bi-star-fill, .bi-star{
	color: #ffd250;
}

.filler{
	width: 100%;
    height: 19.5px;
}

.container-fluid{
	min-height: 100vh
}

.container-fluid > .row:first-child {
  min-height: 100vh
}

#menu{
	min-height: 100vh
}

#div_timbratura{
	min-height: 25vh;
}

#div_timbratura .card{
	display: flex;
    justify-content: center;
    align-items: center;
}

.p-timbratura{
	color: white;
	font-size: 40px;
	font-weight: 700;
	text-align: center;
	line-height: 45px;
}

.bg-warning .p-timbratura{
	color: black;
}

#form_seleziona_commessa .form-check-input{
	width: 25px;
    height: 25px;
}
#form_seleziona_commessa .form-check {
    display: flex;
    align-items: center;
}
#form_seleziona_commessa .form-check-label {
    margin-left: 10px;
}

.table-custom td{
	background-color: inherit !important;
	position: relative;
}

.table-custom .btn-modal-posizione{
	position: absolute;
    right: 0px;
    bottom: 0px;
}

.col-form-check {
    display: flex;
    align-items: flex-end;
}

.pallino {
	width: 20px;
    height: 20px;
	background-color: #00cc00; /* verde acceso */
	border-radius: 50%;
	box-shadow: 0 0 0 rgba(0, 204, 0, 0.7);
	animation: pulsa 1.5s infinite;
}
.pallino-small {
	width: 10px;
    height: 10px;
	border-radius: 50%;
	
}

 @keyframes pulsa {
	 0% {
		 box-shadow: 0 0 0 0 rgba(0, 204, 0, 0.7);
	 }
	 70% {
		 box-shadow: 0 0 0 10px rgba(0, 204, 0, 0);
	 }
	 100% {
		 box-shadow: 0 0 0 0 rgba(0, 204, 0, 0);
	 }
}

#menu .dropdown-menu{
	position: relative;
    background-color: inherit;
    border: none;
}

.bootstrap-select .dropdown-toggle .filter-option {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legenda {
    display: flex;
    gap: 15px;
}

.pallino-legenda {
    width: 25px;
    height: 25px;
    background: var(--first-color);
    border-radius: 50%;
    margin-right: 8px;
	border: 1px solid var(--second-color);
	display: flex;
    justify-content: center;
    align-items: center;
}

.item-legenda {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
}

.data-attuale{
	text-decoration: underline;
	font-weight: bold;
	color: #0052cc;
}

.testata-calendario{
	display: flex;
	gap: 15px;
	align-items: center;
	flex-direction: row;
}

.table-calendar{
	border-collapse: collapse;
	width: 100%;
}

.table-calendar th, .table-calendar td {
	border: 1px solid #ccc;
	padding: 5px;
	text-align: center;
	width: 80px;
}

.table-calendar th {
	background-color: #f2f2f2;
}
.table-calendar td.invalid {
	background-color: #eee;
}

.table-calendar td,
.table-calendar th {
    user-select: none; /* Disabilita selezione testo */
}

.div-calendar{
	display: flex;
	justify-content: center;
}

.table-calendar td.selectable:hover {
    background-color: #e0f1eb;
    cursor: pointer;
}
.table-calendar td.selected {
    background-color: #e0f1eb !important;
}
.table-calendar td.invalid {
    background-color: #eee;
}

.div-permission{
	padding: 2px;
	color: white;
	font-weight: bold;
	border-radius: 5px;
}

.note-timbratura {
    position: absolute;
    right: 5px;
	font-weight: bold;
    font-size: 16px;
}

.org-box-user.selected {
    border: 2px solid #007bff;
    box-shadow: 0 0 10px #007bff;
}

#svg-lines line:hover {
    stroke: red;
    stroke-width: 3;
}

.ui-draggable-dragging {
    opacity: 1 !important;
    z-index: 9999 !important;
    pointer-events: none;
}

.th-ordinamento{
	cursor: pointer;
}

.bg-malattia {
	background-color: #581987 !important;
}

.table-calendar-mobile{
	display: flex !important
}

scroll-container {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory; /* Per far scorrere in modo fluido */
	-webkit-overflow-scrolling: touch; /* Per migliorare la fluidità su iOS */
	position: relative;
}

.scroll-container {
	display: flex;
	width: -webkit-fill-available;
    flex-direction: row;
    align-items: flex-start;
}

.scroll-container-fissata{
	min-width: 5%;
}

.scroll-item {
	background-color: #f3f3f3;
	flex: 1 1; /* Ogni elemento occupa il 100% della larghezza */
    scroll-snap-align: start; /* Allinea ogni div in modo che venga visualizzato correttamente durante lo scorrimento */
}

.column-calendar {
    width: 100%;
}

.single-cell-calendar{
	background-color: white;
	border: 1px solid #cacaca;
	padding: 5px;
	height: 35px;
	user-select: none; /* Disabilita selezione testo */
}

.single-cell-calendar.invalid {
	background-color: #eee;
}

.single-cell-calendar.selected {
    background-color: #e0f1eb !important;
}

.single-cell-calendar.selectable:hover {
    background-color: #e0f1eb;
    cursor: pointer;
}

.change-mese{
	display: none !important;
}

.badge {
    top: 0;
    right: 0px;
    /* border-radius: 50%;
    transform:
	 translate(50%, -50%); */
}

.card .badge{
	transform: translate(50%, -50%);
}

.file-input .input-group {
    display: flex;
    align-items: stretch;
}
 
.file-input .form-control {
    background-color: #f5f5f5;
    border: 1px solid #28a745;
	border-right: 0;
    border-radius: 0.375rem 0 0 0.375rem;
    font-style: italic;
}

#result_list td{
	min-width: 100px;
}

.min-width td{
	min-width: 100px;
}

.no-wrap-custom{
	min-width: unset !important;
	width: 1%;
	white-space: nowrap;
}

.table-visualizza-name{
	width: 25%;
}

.table-visualizza-value{
	width: 75%;
}

.form-control-visualizza {
    border: none !important;
    background-color: transparent !important;
	cursor: unset !important;
}


.form-control-visualizza .dropdown-toggle{
    border: none !important;
    background-color: transparent !important;
	cursor: unset !important;
	opacity: 1 !important;
}



.form-control-visualizza .dropdown-toggle:after{
    display: none !important;
}

.tr-link{
	cursor: pointer;
}

.btn-purple{
	background-color: #7460ee;
    border: 1px solid #7460ee;
	color: white;
}


.btn-purple:hover{
	background-color: #7460ee;
    border: 1px solid #7460ee;
	color: white;
}

.tr-totale td, .tr-totale th{
	background-color: #ffeeba;
	box-shadow: none !important;
	border-color: #ffeeba !important;
}

.calendar .days .day_num{
    position: relative;
    color: black !important;
    font-weight: 400 !important;
}

.day-date-month{
    position: relative;
    top: 2.5px;
    left: 2.5px;
    font-size: 9px !important;
    color: black;
    z-index: 1000;
}

.calendar_week .week {
    display: flex;
    flex-flow: wrap;
}

.calendar_week .day_week{
    width: calc(100% / 7);
}

.calendar_week .day_week  .day_num {
    
    border-right: 1px solid #2c7aca;
    padding: 20px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background-color: #448cd6;
}

.calendar_day .day  .day_num {
    
    border-right: 1px solid #2c7aca;
    padding: 20px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background-color: #448cd6;
}

.slot-day{
    min-height: 100vh;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 5px;
}

.week .day_week:nth-child(7n+1) .slot-day
{
    border-left: 1px solid #ddd;
}

.drag-risorsa{
    padding: 7.5px;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-bottom: 2.5px;
    position: relative;
}

.scroll-area {
    max-height: 50vh;          /* limita l’altezza al 50% della viewport */
    overflow-y: auto;          /* attiva lo scroll verticale quando serve */
    overflow-x: hidden;        /* evita scroll orizzontale */
    -webkit-overflow-scrolling: touch; /* scroll fluido su iOS */
    padding-right: .25rem;     /* piccolo spazio per non coprire il testo con la scrollbar */
}

/*
.btn-view-detail{
    position: absolute;
    top: 0px;
    right: 2px;
    padding: 0px;
}
*/

.modal-xl{
    --bs-modal-width: 90vw;
}

.calendar .days .day_num{
    padding: 5px !important;
}

.pianificazione-allocazione {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.pianificazione-div{
    display: flex;
}

.custom-modal-mobile{
    background-color: white;
}

.calendar_day .day .day_num{
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

.calendar_week .day_week .day_num{
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

.calendar .days .day_name{
    
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

@media (max-width: 768px) {
	  /* Stili per dispositivi mobili */
	  .testata-calendario {
		  display: flex;
		  gap: 15px;
		  align-items: flex-start;
		  flex-direction: column;
	}
	
	.table-calendar-mobile{
		display: flex !important
	}

	.table-calendar {
		width: 100%;
		display: block;
		overflow-x: auto; /* Aggiungi la scrollabilità orizzontale */
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
		display: none !important;
	}
	
	.table-calendar th, .table-calendar td{
		width: 33vw;
		display: inline-block;
	}

	.scroll-container {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory; /* Per far scorrere in modo fluido */
		-webkit-overflow-scrolling: touch; /* Per migliorare la fluidità su iOS */
		position: relative;
		scroll-behavior: smooth; /* Abilita lo scroll fluido */
	}

	.scroll-container-fissata{
		min-width: 25%;
	}

	.scroll-item {
		flex: 0 0 100%; /* Ogni div occupa il 100% della larghezza */
		scroll-snap-align: start; /* Per allineare correttamente ogni elemento durante lo scorrimento */
		background-color: #f3f3f3;
	}

	.scroll-item.half {
		flex: 0 0 25%; /* Ogni div occupa il 100% della larghezza */
	}

	.single-cell-calendar{
		background-color: white;
		border: 1px solid #cacaca;
		padding: 5px;
	}

	.single-cell-calendar.invalid {
		background-color: #eee;
	}

	.change-mese{
		display: block !important;
	}

	.cell-mese{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
	
	.div-permission{
		padding: 0px;
	}
	.custom-modal-mobile {
		position: absolute;
		top: 0px;
		height: 100vh;
		background-color: white;
	}
	
	.cella-fissata{
		position: absolute;
		background-color: white;
		white-space: nowrap;
		width: fit-content;
	}
	
	.legenda{
		flex-wrap: wrap;
	}
	
}




/* -------- Tipografia documento -------- */
.doc {
  font-family: "Times New Roman", Times, serif;
  color: #000;
  font-size: 12pt;
  line-height: 1.3;
  padding: 0;
}

.label { font-weight: bold; }

.riga { margin: 0 0 3mm 0; }

.fill,
.fill-multi {
  display: inline-block;
  min-width: 30mm;
  border-bottom: 1px solid #000;
  padding: 0 2mm 1mm;
  color: #d00;
}

.fill[contenteditable="true"]:focus,
.fill-multi[contenteditable="true"]:focus {
  outline: 2px solid #d0e3ff;
}

.fill-multi {
  display: block;
  min-height: 12mm;
  margin-top: 2mm;
  white-space: pre-wrap;
}

.oggetto {
  margin-top: 4mm;
  margin-bottom: 6mm;
  font-weight: bold;
}

ul { margin: 2mm 0 2mm 6mm; padding: 0; }
li { margin: 1mm 0; }

.dash { list-style-type: "– "; margin-left: 8mm; }

.separator { text-align: left; margin: 4mm 0; }
.separator::before { content: "***"; letter-spacing: 1mm; }

.firme { margin-top: 10mm; }

.grid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8mm;
}

.firma-box {
  min-height: 22mm;
  border-top: 1px solid #000;
  padding-top: 2mm;
  text-align: center;
  font-size: 11pt;
}

.firma-tit { font-weight: bold; display: block; margin-bottom: 1mm; }

.page-footer {
  margin-top: 8mm;
  display: flex;
  justify-content: space-between;
  gap: 8mm;
  font-size: 11pt;
  border-top: 1px solid #000;
  padding-top: 2mm;
}

.ol-alpha { list-style: lower-alpha; margin: 2mm 0 2mm 8mm; padding: 0; }

.box-intestazione {
  border: 1px solid #000;
  padding: 4mm 6mm 6mm 6mm;
  margin: 0 0 6mm 0;
  font-family: "Times New Roman", Times, serif;
  color: #000;
  font-size: 12pt;
  line-height: 1.35;
}

.box-intestazione .box-title { font-weight: 700; margin: 0 0 5mm 0; }
.box-intestazione .riga { margin: 0 0 6mm 0; }

.fill-line {
  display: inline-block;
  min-width: 45mm;
  border-bottom: 1px solid #000;
  padding: 0 2mm 1mm 2mm;
  color: #d00;
}

.fill-inline {
  display: inline-block;
  min-width: 30mm;
  color: #d00;
}


/* -------- Tabelle documento -------- */
.doc-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #000;
  font-size: 10pt;
  line-height: 1.3;
}

.doc-table th,
.doc-table td {
  border: 1px solid #000;
  padding: 8px;
  vertical-align: top;
  text-align: left;
}

.header-cell { text-align: center; font-weight: bold; vertical-align: middle; }
.section-title { background-color: #f2f2f2; font-weight: bold; text-align: center; }
.no-border { border: none !important; }
.text-center { text-align: center; }
.font-bold { font-weight: bold; }

.footer-logo {
  text-align: right;
  font-size: 9pt;
  padding-top: 20mm;
}

.image-placeholder {
  border: 1px dashed #ccc;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-style: italic;
}



  /* -------- SOLO SEZIONE PAGINE -------- */
.a4-container {
  width: 210mm;
  margin: 10mm auto;
  background: transparent;      /* mostra lo sfondo body tra le pagine */
  padding: 0;
  box-shadow: none;
}

.page {
  width: 210mm;
  min-height: auto ;
  height: auto ;
  box-sizing: border-box;
  padding: 22mm 20mm;
  background: #fff;
  position: relative;
  margin-bottom: 10mm;          /* stacco 1 cm */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* ombra per singola pagina */
}

.page:last-child {
  margin-bottom: 0;
}



    /* -------- Base + Card (immutati) -------- */
    body {
      font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      margin: 16px;
      line-height: 1.5;
      background: #ffffff;
    }

    /* solo sfondo grigio */
    .card {
      border: 1px solid #ccc;
      border-radius: 12px;
      padding: 1rem;
      max-width: 800px;
     /*max-width: var(--page-w);*/
      margin: 0 auto 16px;
      background: #fff;
    }

    label {
      display: block;
      font-weight: 600;
      margin: .5rem 0 .25rem;
    }

    input[type="file"],
    select,
    input[type="text"] {
      width: 100%;
      padding: .5rem;
    }

    button {
      padding: .6rem 1rem;
      border-radius: 8px;
      border: 0;
      background: #0d6efd;
      color: #fff;
      cursor: pointer;
    }

    .muted {
      color: #666;
      font-size: .9rem;
    }

    .error {
      background: #ffe3e3;
      border: 1px solid #ffb3b3;
      padding: .75rem;
      border-radius: 8px;
      color: #8a0000;
    }

    .success {
      background: #e7f7e7;
      border: 1px solid #a3e1a3;
      padding: .75rem;
      border-radius: 8px;
      color: #0a6c0a;
    }

    pre,
    textarea {
      width: 100%;
      min-height: 140px;
      padding: .75rem;
      border: 1px solid #ddd;
      border-radius: 8px;
      white-space: pre-wrap;
      font-family: ui-monospace, Consolas, Menlo, monospace;
    }

    audio {
      width: 100%;
      margin-top: .5rem;
    }

    .form-grid {
      display: grid;
      gap: 1rem;
      grid-template-columns: 1fr;
    }

    @media (min-width:880px) {
      .form-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    .toggle {
      margin: .25rem 0;
    }

    .toolbar {
      position: sticky;
      top: 0;
      z-index: 10;
      background: #fff;
      border: 1px solid #ccc;
      padding: 8px 10px;
      margin: 0 auto 10mm;
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      /*max-width: var(--page-w);*/
      max-width: 800px;
      border-radius: 12px;
    }

    .toolbar textarea {
      width: 100%;
      height: 80px;
      font-family: ui-monospace, Consolas, Menlo, monospace;
      font-size: 12px;
    }

    .hint {
      font-size: 11px;
      color: #333;
    }

    /* Bottoni personalizzati (come prima) */
    .btn {
      display: inline-block;
      padding: .6rem 1rem;
      border-radius: 8px;
      border: 1px solid transparent;
      text-decoration: none;
    }

    .btn-primary {
      background: #0d6efd;
      border-color: #0d6efd;
      color: #fff !important;
    }

    .btn-primary:hover {
      filter: brightness(.92);
    }

    /* Form extra (immutati) */
    .form-grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      align-items: start;
    }

    .form-section label {
      display: block;
      font-weight: 600;
      margin-bottom: 0.5rem;
    }

    .form-section input[type="file"],
    .form-section input[type="text"] {
      width: 100%;
      padding: 0.6rem;
      border: 1px solid #ccc;
      border-radius: 6px;
      box-sizing: border-box;
    }

    .form-options {
      display: flex;
      gap: 1.5rem;
      align-items: center;
      margin-bottom: 1.25rem;
    }

    .form-actions button {
      
      padding: 0.8rem;
      font-size: 1rem;
      font-weight: 600;
      border: none;
      border-radius: 8px;
      background-color: #0d6efd;
      color: white;
      cursor: pointer;
      transition: background-color 0.2s;
    }

    .form-actions button:hover {
      background-color: #0b5ed7;
    }

    @media (max-width: 768px) {
      .form-grid-container {
        grid-template-columns: 1fr;
      }
    }