/**** style css v:1.0.00 ****/
*{
	font-size: 1.05rem;
    /* Use Apple's system font for a native iOS look */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.app-version {
    position: fixed;
    top: 4px;
    left: 6px;
    z-index: 9999;
    font-size: 0.6rem;
    line-height: 1;
    color: rgba(0, 0, 0, 0.45);
    background: rgba(255, 255, 255, 0.7);
    padding: 1px 4px;
    border-radius: 3px;
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    user-select: none;
}
html,body {
	margin: 0;
	padding: 0;
	-webkit-overflow-scrolling: touch;
	}

/* --- DEFINITIVE FIX: iOS Input Field Normalization --- */
/* This ensures consistent height and removes default iOS appearance */
#floattext input, .modal-content input, .floattext-content input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box; 
    height: 44px; 
    font-size: 1rem; /* Prevents iOS from zooming in on focus */
}

/* --- DEFINITIVE FIX: Global Toggle Switch Styles --- */
/* This will style all checkboxes that are converted to sliders */
.switch {
  position: relative;
  display: inline-block;
  width: 50px; /* Smaller width */
  height: 28px; /* Smaller height */
  vertical-align: middle;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px; /* Smaller circle */
  width: 20px;  /* Smaller circle */
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: #28a745;
}

input:focus + .slider {
  box-shadow: 0 0 1px #28a745;
}

input:checked + .slider:before {
  transform: translateX(22px); /* Adjusted translation */
}

.slider.round {
  border-radius: 28px;
}

.slider.round:before {
  border-radius: 50%;
}
/* --- End Toggle Switch Styles --- */	


#menu-toggle {
  position: fixed; 
  top: 15px; 
  left: 15px; 
  z-index: 1000; 
  font-size: 28px; 
  cursor: pointer; 
  color: #333;
  transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
}

#menu-toggle:hover {
  color: #00000;
}

#menu-toggle.active {
  transform: rotate(180deg);
  color: #d9534f;
}

#u_Settings {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	background-color: #1c64b6;
	color: #fff;
	max-width:1000px;
	transform: translateY(-100vh);
	transition: transform 0.3s ease-in-out;
}


/* Accordion content. Uses direct-child combinator so a master's
   accordion-open/closed state only controls its own qbottom + qdetails,
   not nested details (each detail is its own .qmain with its own
   accordion-open class). Hiding qdetails together with qbottom means
   closing the master truly collapses the whole "equipment + findings"
   block instead of leaving findings dangling under a closed master. */
.accordion-active > .qbottom,
.accordion-active > .qdetails,
.accordion-active > .collapse-to-top-wrap {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
}

.accordion-open > .qbottom,
.accordion-open > .qdetails,
.accordion-open > .collapse-to-top-wrap {
    max-height: 3000px;
    opacity: 1;
    transition: max-height 0.4s ease-out, opacity 0.3s ease-out 0.1s;
    overflow: auto;
}

/* Icon rotation — scoped to the button inside THIS .qmain's qtop so
   a master being open doesn't flip the detail's own button. */
.qmain > .qtop .accordion-toggle-btn,
.qmain > .qtop i.icofont-rounded-down {
    transform: rotate(0deg);
    transition: transform 0.3s ease-out;
}

.qmain.accordion-open > .qtop .accordion-toggle-btn,
.qmain.accordion-open > .qtop i.icofont-rounded-down {
    transform: rotate(180deg);
    transition: transform 0.3s ease-out;
}

.accordion-toggle-btn {
    background:none;
    border:unset;
    box-shadow:unset;
}

/* Bottom-of-question "collapse to top" button. Inherits the
   .file-action-button look (pill, neutral background) and lives inside
   a centered wrapper so it doesn't stretch across the .qbottom width. */
.collapse-to-top-wrap {
    display: flex;
    justify-content: center;
    margin-top: 0.75rem;
}
.collapse-to-top-btn {
    /* font-size override — the icon-only button reads better slightly
       larger than the text+icon photo/attach buttons. */
    font-size: 1.1rem;
}


.layout-right .accordion-toggle-btn {
   
    margin-right: 0px;
}
.layout-left .accordion-toggle-btn {
   
    margin-left: 0px;
}

/* --- New Styles for Accordion Menu --- */




/* Container for search and add button */
#menu-controls {
    display: flex;
    padding: 10px;
    gap: 10px;
    align-items: center;
    background-color: #114a8e;
    position: sticky;
    top: 0;
    z-index: 10;
}
#menu-controls {
    position: relative;
}

/* This creates the icon inside the container */
#menu-controls::before {
    content: '\ed11'; /* This is the unicode for the icofont search icon */
    font-family: "icofont";
    position: absolute;
    left: 20px; /* Position from the left */
    top: 50%;   /* Center vertically */
    transform: translateY(-50%);
    color: #888; /* Icon color */
    z-index: 11; /* Ensure it appears above other elements */
}

/* This adds space on the left of the text for the icon */
#menu-search {
    padding-left: 35px;
}
#menu-search {
    flex-grow: 1;
    border: 1px solid #1c64b6;
    background-color: #f0f8ff;
}


/* Main container for the accordion list */
#accordion-menu {
    height: calc(100vh - 200px); /* Adjust based on other elements */
    overflow-y: auto;
}

/* Individual accordion item (header + panel) */
.accordion-item {
    border-bottom: 2px solid #1f5695;
}

/* Style for the clickable header of each accordion section */
.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    cursor: pointer;
    background-color: #1c64b6;
    transition: background-color 0.2s ease-in-out;
}

.accordion-header:hover {
    background-color: #185aa1;
}

.accordion-title {
    font-weight: bold;
}

.accordion-counter {
    background-color: #0d3e79;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
}

/* The panel that contains the list of entries (hidden by default) */
.accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: #277cdd;
}

/* Style for when the accordion is active/open */
.accordion-header.active + .accordion-panel {
    max-height: 500px; /* Adjust as needed, should be larger than any possible content */
    transition: max-height 0.4s ease-in;
}

/* Styles for the list items inside the accordion (reusing s_menu styles) */
.accordion-panel .s_menu {
    padding: 0.25rem;
    border: solid 0.2rem white;
	user-select: none;
	border-radius:.5rem;
}


#cqid {
	font-size: 0.7rem; 
	}

.accordion-panel .s_menu .an_detail {
    display: flex;
    flex-direction: initial;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 0.7rem;
}
span.detail-maid {
    font-size: small;
    font-weight: lighter;
    color: gray;
}

.accordion-header-right {
    display: flex;
    align-items: center;
    gap: 10px; /* Adds space between counter and icon */
}

/* Styling for the new icon */
.accordion-icon {
    font-size: 1.2rem;
    transition: transform 0.3s ease-in-out;
}

/* When the header has the 'active' class, rotate the icon */
.accordion-header.active .accordion-icon {
    transform: rotate(180deg);
}


.an_peri {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.an_peri .icofont-ui-edit {
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
    /* CORRECTED: Darker icon color for visibility */
    color: #555;
    transition: color 0.2s;
}

.an_peri .icofont-ui-edit:hover {
    /* CORRECTED: Darker hover color */
    color: #000;
}
.accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: #fff;
    color: #333;
}

/* This rule ensures text inside the list items is dark for readability */
.accordion-panel .s_menu {
    color: #000;
}


/* Alternating row colors for the items inside the panel */
.accordion-panel .s_menu:nth-child(odd) {
    /* User requested color */
    background-color: #c4c4c4; 
}

.accordion-panel .s_menu:nth-child(even) {
    /* User requested color */
    background-color: #dcdcdc; 
}
.accordion-panel .s_menu.active {
    background-color: #00003c;
	color:#fff;
}
div#container {
    display: flex;
    flex-direction: initial;
    justify-content: space-between;
}		
div#qview {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: -webkit-fill-available;
    justify-content: space-evenly;
    padding-left: 3rem;
}
button#right-menu-toggle-btn {
    margin: unset;
}
i#setting {
    padding: 0.5rem 1rem;
	margin-right:3rem;
	font-size: 1.7rem;
}
#content {
	    padding-top: 3rem;
    min-height: 100vh;
	max-width:1000px;
	margin: auto;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
	
}
hr {
    border-width: 0.3rem;
    border-style: solid;
}
ul#m_menu li {
    
    border-bottom: 2px solid #1f5695;
    display: flex;
    justify-content: space-between;
}
ul#m_menu {
    overflow: auto;
    height: 35vh;
	border-bottom:1px solid whitesmoke;
}
ul#s_menu {
    overflow-y: scroll;
	background:#277cdd;
	display: flex;
    flex-direction: column;
    
}

ul#s_menu .an_detail {
    display: flex;
    flex-direction: initial;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 0.7rem;
}
.s_menu div {
    padding: 0.3rem;
}
#s_menu li {
    padding: 0.25rem;
    border-bottom: solid 0.2rem white;
	user-select: none;
}
#m_menu li.active,#s_menu li.active, #m_menu ul li span:hover {
	background-color: #00003c;
	cursor: pointer;
}
 li.sarea.sinactive input {
    display: none;
	animation: fadein .8s;
}
li.sarea.sactive input {
    display: unset;
	animation: fadein .8s;
}
li.sarea input{
	width:100%;
}
li.sarea i.icofont-ui-search {
    padding: 0.5rem 0.8rem;
}
li.sarea {
    display: flex;
}
a {
	color: #fff;
	text-decoration: none;
}

h1 {
	margin-top: 0;
}
h1,p{
	color:#000;}
div#u_info {
    font-size: small;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0em 1rem 0px 1rem;
}
#menu-button {
	position: fixed;
	top: 0.5rem;
	left: 0.8rem;
	font-size: 2rem;
	color: #000;
	cursor: pointer;
	transition: transform 0.3s ease-in-out;
	}
	
#menu-button.active {
	transform: rotate(90deg);
	transition: transform 0.3s ease-in-out;
	color: #fff;
	text-shadow: 0px 0px 3px gray;
	}
#menu-top {
    position: fixed;
    top: 0px;
    right: 0.8rem;
    font-size: 2rem;
    color: #000;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    background: #b9b9b9;
    border-radius: 0px 0px 0.5rem 0.5rem;
}

i#menu-top {
    font-size: 2.5rem;
}

#menu-top.active {
	transform: rotate(180deg);
	transition: transform 0.3s ease-in-out;
	color: #fff;
	background:unset;
	text-shadow: 0px 0px 3px gray;
	border-radius: 0.5rem 0.5rem 0px 0px;
	}



#u_Settings.active {
	transform: translateY(0);
	z-index:1;}

#content.active {
	margin-left: 0;
}
div#img_logo {
    display: flex;
    justify-content: center;
	    padding: 1.5em;
}

div#img_logo img {
    max-width: 10rem;
}
	  
.synq_info {
	background: green;
	color: white;
	padding: 20px;
	text-align: center;
	font-size: 1.1em;
	font-weight: bold;
	border: 2px solid black;    
	margin-top: 10px;
	}
p#questions a {
	display: block;
	font-weight:bold;
	padding: 10px;
	background: white;
	margin-bottom: 11px;
	color:blue;
	}   
p#questions a:hover{
	background:gray;
	color:white;
	} 
.add_new_q button:nth-child(1) 
	{
	width: calc(100% - 53px)!important;
	font-weight: bold;
	vertical-align: bottom;
	font-size: 19px;
	padding: 6px!important;
	}
.add_new_q button:nth-child(2) 
	{
	width: 50px!important;
	font-size: 30px;
	font-weight: bold;
	padding: 0px!important;
	vertical-align: bottom;
	margin-left:3px;
	}

.pollSlider{
	position:fixed;
	height:100%;
	background:whitesmoke;
	width:400px;
	left:0px;
	margin-left: -400px;
	border: 1px solid gray;
	border-radius: 0px 5px 5px 0px;
	border-left: none;
	box-shadow: 0px 0px 23px gray;
	opacity: 0.7;
	height: 100%;
	overflow: auto;
	}   
#menu 
	{
	padding: 10px;
	overflow: hidden;
	margin: 0px;
	}
#menu .m_top button
	{
	width:100%;
	padding:10px; margin-top:3px;
 
	}
	
#m_menu ul li span {
    text-align: center;
	padding: 0.5rem;
	align-self: center;
	cursor: default;
	user-select: none;
}	
#m_menu ul li span.m_val {
    
    width: 80%;
	
    
}
#m_menu ul li span.m_new {
    
    width: 20%;
	border-left: 1px solid #1f5695;
	    font-size: 2rem;
 
}

 
#pollSlider-button span
	{
	 color: gray;
	 font-size: 1.3em;
	 cursor: pointer;
	}
#pollSlider-button
	{
	background: whitesmoke;
	border: 1px solid gray;
	position: fixed;
	left: 0px;
	top: 50px;
	padding: 7px 8px;
	border-radius: 0px 5px 5px 0px;
	border-left: none;
	}

.qright,.qleft, .qmain {
    display: flex;
    flex-direction: column;
}
.qmain input, .qmain select {
    line-height: 1;
    height: 2rem;
	max-width: 250px;
}
.qbottom {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}
.qleft {
    width: 70%;
}
.qright {
    justify-content: space-around;
    /*width: 30%;*/
    align-items: center;
}

.textqdiv {
	margin:.3rem  .5rem;
    display: flex;
    justify-content: space-between;
    align-items: center; /* Aligns span and switch vertically */
}

.textqdiv.required_sw .qalf {
    background-image: linear-gradient(135deg, #d32f2f 10px, transparent 10px);
    background-repeat: no-repeat;
    background-position: top left;
}
.textqdiv.required_sw select.qalf {
    background-image:
        linear-gradient(135deg, #d32f2f 10px, transparent 10px),
        var(--select-arrow, none);
    background-position: top left, right center;
    background-repeat: no-repeat, no-repeat;
}
.textqdiv.required_sw.required-filled .qalf {
    background-image: linear-gradient(135deg, #2e7d32 10px, transparent 10px);
}
.textqdiv.required_sw.required-filled select.qalf {
    background-image:
        linear-gradient(135deg, #2e7d32 10px, transparent 10px),
        var(--select-arrow, none);
}

/* Select2 renders its own DOM and hides the original <select>. Paint the
   triangle on the visible widget. */
.textqdiv.required_sw .select2-container .select2-selection {
    background-image: linear-gradient(135deg, #d32f2f 10px, transparent 10px);
    background-repeat: no-repeat;
    background-position: top left;
}
.textqdiv.required_sw.required-filled .select2-container .select2-selection {
    background-image: linear-gradient(135deg, #2e7d32 10px, transparent 10px);
}

/* Question-level required marker on the header. Red when at least one
   required field is empty, green when all required fields are filled. */
.qmain.required-pending > .qtop,
.qmain.required-filled  > .qtop {
    position: relative;
}
.qmain.required-pending > .qtop::before,
.qmain.required-filled  > .qtop::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 12px 0 0;
    border-color: #d32f2f transparent transparent transparent;
    pointer-events: none;
    z-index: 2;
}
.qmain.required-filled > .qtop::before {
    border-color: #2e7d32 transparent transparent transparent;
}

/* Questionnaire-level marker on #content. Red while any question is
   pending; green once every required-bearing question is filled. */
#content.required-pending,
#content.required-filled {
    position: relative;
}
#content.required-pending::before,
#content.required-filled::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 18px 18px 0 0;
    border-color: #d32f2f transparent transparent transparent;
    pointer-events: none;
    z-index: 100;
}
#content.required-filled::before {
    border-color: #2e7d32 transparent transparent transparent;
}
div#sSpace {
    background: linear-gradient(to right, #800000 0%, #009900 100%);
    width: 90vw;
    margin-left: 8vw;
}
div#spcLine {
    background: #fff;
    font-size: 0.8rem;
    text-align: right;
}
.qmain {
    background: white;

	border-bottom:2px solid #00003c;
	border-top:1px solid #ffffff;
	padding: 0.3rem 1rem;
	margin-top: 2px;
    border-radius: .3rem;
    /* scrollIntoView from the collapse-to-top button + any future
       anchor scrolling lands here. Leave a small visual gap above so
       the header isn't flush with the viewport edge. */
    scroll-margin-top: 1rem;
}
  .qmain:nth-child(odd) {
    background: #cae3ff;
} 
.qmain.synced{ box-shadow: #327e2d inset 0px 0px 0px 2px;}

/* Details container: holds detail questions inside their master .qmain.
   Narrow indent + left rule so it reads as a nested block without
   eating valuable horizontal space on phones. */
.qdetails {
    margin: 0.4rem 0 0 0.4rem;
    padding-left: 0.4rem;
    border-left: 3px solid #4a72b0;
}
.qdetails .qmain {
    background: #f5f8ff;
    border-bottom: 1px solid #99b3d6;
    border-top: 0;
    margin-top: 0.4rem;
    padding: 0.25rem 0.75rem;
}
.qdetails .qmain:nth-child(odd) { background: #eaf1fb; }
.qdetails .qmain:first-child    { margin-top: 0; }

/* The top-level .qtop is a grid with a 10%-wide "actions" column. Inside
   a nested .qmain (master padding + .qdetails indent) that 10% is too
   small to fit the action icons + the accordion button, so on narrow
   screens the rightmost button slides off the visible area. Replace
   the grid with a flex row scoped to .qdetails — title takes the
   leftover space, action container is pushed to the right and never
   clipped. !important defends against the per-layout grid rules and
   the @media mobile override. */
/* Nested .qtop becomes a single flex row: title shrinks, action group
   stays right-aligned on the same line as the title. nowrap forces
   everything onto one row; min-width:0 + overflow:hidden lets the
   title shrink instead of pushing the buttons down. */
.qdetails .qtop {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 0.5rem;
    grid-template-areas: none !important;
    grid-template-columns: none !important;
}
.qdetails .qtop-title-group {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}
.qdetails .qtop-title-group .qleftIn,
.qdetails .qtop-title-group h2 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qdetails .qrightIn {
    flex: 0 0 auto;
    grid-area: auto !important;
    justify-self: auto !important;
}
.qdetails .q-actions-container {
    flex: 0 0 auto;
    flex-shrink: 0;
    flex-wrap: nowrap;
    margin-left: auto;
    grid-area: auto !important;
    justify-self: auto !important;
}
.qdetails .accordion-toggle-btn { flex-shrink: 0; }

.qleftIn, .qrightIn {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    padding: 1rem;
    border-radius: 8px;
}  
.qleftIn {
   
    justify-content: flex-start;
}
.qleftIn span {
    font-size: .9rem;
}
div.qrightIn.rdyes {
    background: #00c400;
    color: white;
}
div.qrightIn.rdno {
	background:red;	
    color: white;
}
div.qrightIn.rdna {
	background:gray;	
    color: white;
}


.top {
	background: white;
    padding: 25px 50px;
    border-radius: 3px;
}
.h_info {padding: 25px 0px;}
.lmnt{max-width:45%;}
button {
    background: #f0f0f0;
    border: 1px solid #0b2849;
    padding: 10px;
    border-radius: 3px;
    margin: auto;
    box-shadow: 0px 0px 3px gray;
    color: #113c6d;
}
button:hover{background: #727272;color:white;}
#menu {
    position: fixed;
    top: 0px;
    width: 100%;
    background: #3289d6;
    padding: 2px;
    box-shadow: 0px 0px 5px gray;
    left: 0px;
}
.menu-in{text-align: center;    width: calc(100% - 105px);
    float: left;}
.elmnt {
  display: inline-block;width: 100%;margin:10px;min-width:350px;
}
.elmnt input,.elmnt prompt,.elmnt textarea{width:45%;display: inline-block;margin:2px;vertical-align:middle;}
.elmnt prompt{text-align: right;}
.elmnt prompt:after{ content: " :";}


.elmnt_out:nth-child(1){width:50px;float:left;}
.elmnt_out:nth-child(2){width: calc(100% - 267px);float:left;}
.elmnt_out:nth-child(3){width:70px;float:left;}
.elmnt_out:nth-child(4){width:73px;float:right;text-align: left;}

.elmnt_out {padding:7px;margin:1px;
    display:inline-block;
}

h2,h3{
	font-size: clamp(0.9rem, 0.9vw + 1rem, 1.4rem);
	margin: 0px;padding: 0.5rem;
	flex-grow: 1;
	align-self: center;color:#00003c;
	}
.jh {
    color: white;
}
.tr:nth-child(2n+1) {
   background-color: #e0e0e0 !important;
overflow: hidden;
}
.tr:nth-child(2n) {
    background: white;
    overflow: hidden;
}

.hidden{display: none;}

.trH1,.tr{margin-top: 10px;border-radius: 3px;box-shadow: 0px 0px 5px black;padding:3px}
body {background:linear-gradient(#338ad7,#1c64b6);    border-bottom: 5rem solid #0b294b;}
.divout{margin-top: 70px;margin-left:auto;margin-right:auto;}
select, input, textarea{background-color:white;border:1px solid #dddddd;border-radius:3px;padding:5px;}
textarea.bignote {min-height: 8rem;}

.cam-button,.hbtn{float:right;vertical-align: top;background:linear-gradient(#338ad7,#1c64b6);border: 1px solid gray;border-radius: 2px;color:white;font-size:0.9em;margin-left: 10px;vertical-align:top;}

.divin qtitle3{float:left;max-width:600px;backgrou nd-color:red;}
prompt{left;display:inline;width:80px;}
.intextrequired{background:linear-gradient(to left,#f8e9d4,#f8d29d);}

.trn0{background-color:#d4d4d4;}
.trH1{background:linear-gradient(#338ad7,#1c64b6);color:white;}
.trH2{background-color:#999999;color:white;}
.red {background-color:red;color:white;}
.green{background-color:green;color:white;}
.blue{background-color:blue;color:white;}
.gray{background-color:gray;color:white;}
.orange{background-color:orange;color:white;}
.optionyn{display: block;
    margin-bottom: 40px;}

#camera{margin-right:auto;margin-left:auto;width:500px;margin-top:10%;}
#camera-video {
   
    height: 70vh;
}
.camera_show{position:fixed;top:0px;left:0px;width:100%;height:100%;text-align:center;}
.camera_hide{position:fixed;top:-10px;left:-10px;width:0px;height:0px;overflow:hidden;}
.close-img{position:relative;left:-20px;top:20px;float:left;background-color:white;border-radius:30px;}
.thub{margin:5px;width:100px;height:auto;}
#floatslide_modal .floatslide-info-bar ,input#camera-description-input {
    display: none;
}

.welcome-screen {
	background-image: url(../tuvloggo.svg);
    background-repeat: no-repeat;
    background-position: center;
	background-position-y: 35vh;
    background-size: 10em;
  animation: fadein 2s;
}
div#cinfo {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
	margin-top:1.4rem;
}



video#video {
    position: absolute;
    width: 100vw;
    height: 100vh;
    z-index: 150;
}
.contentarea {
    position: fixed;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    z-index: 100;
    width: 100vw;
    background: #000;
    height: 100vh;
}

.output {
    position: absolute;
    display: flex;
    height: 15vh;
    width: 100vw;
    bottom: .45rem;
    z-index: 200;
    background: gray;
    overflow: scroll;
}

div#controls {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 10vh;
    z-index: 250;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}
select#camselect {
    
    width: 90vw;
    font-size: xx-large;
}
input[type="submit"] {
   
  
    font-size: xx-large;
   
    border-radius: 9rem;
}
#captureButton {width: 3rem;height: 3rem;background:red;position:fixed;bottom: 22vh;left:45vw;z-index:10000;border-radius: 5rem;border: 8px double white;}


canvas {
display:none;
}


div#floatInfo {
    display: flex;
    position: fixed;
    top: 1.5rem;
    left: 10vw;
    flex-direction: column;
    z-index:100000;
    width: 76vw;
}
div#floatInfo p {
    width: 93%;
    padding: .5rem .8rem;
    background: #09213c;
    color: #fff;
    border-radius: .4rem;
    border: .1em solid #2196F3;
    margin: 0px 0px .4rem 0px;
    box-shadow:0em 0em .5rem #a5d7ff;
	overflow-wrap: break-word;
	hyphens: auto;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.3s ease-out;
}
div#floatInfo p.fading { opacity: 0; }

.welcome-container {
    text-align: center;
    min-height: 60vh;
}
#login-overlay .pin-inputs {
    display: flex
;
    justify-content: space-around;
    gap: .5rem;
    padding: 0rem 1rem 1rem 1rem;
}
@keyframes floatInfo-animation {
  0% {
    opacity: 1;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
  
}

/* --- ADDED: Animation for hiding the info message --- */
@keyframes floatInfo-animation-out {
  0% {
    opacity: 1;
    transform: translateX(0%);
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}






/* IMPROVED POPUP STYLES */
div#floattext {
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    z-index: 5000;
}

.floattext-content {
    background: #ffffff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 500px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.floattext-content h3 {
    text-align: center;
    margin-top: 0;
    color: #333;
}

.floattext-content #floatexit {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    color: #888;
}

.floattext-content input, .floattext-content select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Ensures padding doesn't affect width */
    color: #000;
}

.searchable-select-wrapper {
    position: relative;
    width: 100%;
}

.date-input-wrap {
    position: relative;
    width: 100%;
    margin-bottom: 8px;
}
.date-input-wrap > #popup-input-date {
    width: 100%;
    box-sizing: border-box;
    padding-right: 38px;
    margin-bottom: 0;
}
.date-input-wrap > .date-pick-btn {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.date-input-wrap > .date-pick-btn:hover { color: #000; }
.date-input-wrap > #popup-input-date-native {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    opacity: 0;
    pointer-events: none;
    border: 0;
    padding: 0;
    margin: 0;
}

.searchable-select-wrapper #floatSearch {
    width: 100%;
    box-sizing: border-box;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
}

.searchable-select-wrapper #floatfid {
    /* display: none; Hide by default 
    position: absolute;*/
    top: 100%; /* Position right below the input */
    left: 0;
    width: 100%;
    z-index: 5001; /* Must be higher than the popup's z-index */
    margin-top: -1px; /* Overlap border */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top-color: #e0e0e0;
}
.q-actions-container .dnifodiv p {
    overflow: auto;
	padding-bottom:2rem;
	font-size:1.1rem;
	font-weight: initial;
	height: 77vh;
}
.q-actions-body i.q-action-icon {
    font-size: 2rem;
    margin-left: 1rem;
}
.floattext-content input[type=submit] {
    background: #1c64b6;
    color: #fff!important;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}
.floattext-content input[type=submit]:hover {
    background: #175092;
}

.floattext-content input[type=submit]:disabled {
    background-color: #a9b9c8;
    cursor: not-allowed;
}

.floattext-active,div#floattext {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #d5deff;
    display: flex;
    align-self: center;
    flex-flow: column;
    top: 0px;
    left: 0px;
	z-index: 1000;
    
}
.qtop-title-group {
    display: flex
;
    flex-direction: row;
}
.floattext-active, div#floattext * {
    
    text-align: center;
    color: #000;
	background:#fff;
    
   
}
.textqdiv.TEXTAREA textarea {
    width: 80vw;
    min-height: 8rem;
    max-width: 500px;
}

 .pin-inputs input[type='number']::-webkit-outer-spin-button,
 .pin-inputs input[type='number']::-webkit-inner-spin-button {
	 -webkit-appearance: none;
	 margin: 0;
	 }

.hidden{display: none;}
div#floatslide {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    overflow: hidden;
    height: 100vh;
    z-index: 999999;
    background: #d5defff5;
	display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}


i#floatexit {
    text-align: right;
    width: auto;
    background: unset;
}
#floattext input {
    /*margin: 4rem 0rem;*/
	border: 3px solid #1c64b6;
}
#floattext #floatSearch {
    margin: 1rem auto;
    width: 80%;
    padding: 10px;
    border: 2px solid #1c64b6;
    border-radius: 5px;
    box-sizing: border-box;
}
@media screen and (min-width: 600px) {
    /* Use CSS Grid for a responsive, multi-column layout */
    .accordion-panel {
        display: grid;
        /* This creates as many columns as can fit, each at least 200px wide */
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 10px; /* This creates space between the grid items */
    }

    /* Remove properties that conflict with the grid layout */
    .accordion-panel .s_menu {
        max-width: none; /* The grid handles the width now */
        overflow: visible; /* Ensure content is never hidden */
    }

    /* Ensure the detail section remains horizontal */
    .an_detail {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
		
    }
	.an_detail span {
    /* text-wrap: auto; */
    word-wrap: break-word;
    width: 100%;
}

    /* Fix for text wrapping within the flex container */
    .s_peri {
        word-break: break-word; /* Allows long text to wrap correctly */
    }
}


input[type=submit] {
    background: #1c64b6;
    color: #fff!important;
}
input[type=submit]:hover {
    background: #175092;
	border-color:#175092;
}
#floattext p {
    padding: 4rem 0rem;
}
 #floattext .icofont-info-circle:before {
    content: "\ef4e";
    font-size: 3rem;
}
.floattext-active .icofont-info-circle:before {
    content: "\eedd";
    font-size: 3rem;
}


.icofont-camera,  .icofont-attachment, div.q-actions-container i {
    font-size: 2rem;
	margin-left: 1rem;
}

.qtop .dnifodiv .icofont-camera {
    font-size: 2rem;
	margin-left: 0rem;
	
}
.icofont-bubble-left, .icofont-bubble-right{
	font-size:4rem;
	background:#f5f5f573;
	position:fixed;
	
	top:50vh;
	
}
.icofont-bubble-right{
	border-radius: 1rem 0rem 0rem 1rem;
	right:0px;
	
}
.icofont-bubble-left{
	border-radius: 0rem 1rem 1rem 0rem;
	left:0px;
	
}
.icofont-close-circled {
	font-size:2rem;
	background:#f5f5f573;
	position:fixed;
	right:0;
	top:0;
	border-radius: 0rem 0rem 0rem 1rem;
}
#floatslide_modal .icofont-edit {
 
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    
}
.icofont-ui-delete {
	border-radius: 0rem 0rem 1rem 0rem;
	font-size:2rem;
	background:#f5f5f573;
	position:fixed;
	color:red;
	left:0;
	top:0;
	
	
}


.layout-left .dnifodiv {align-self: self-start;padding: 0.7rem 0.3rem;}
.layout-right .dnifodiv {align-self: self-end;padding: 0.7rem 0.3rem;}

.dnifodiv i {font-size: 2rem;}


i.icofont-info-circle {
    padding: 0.7rem 0.3rem;
}
.icofont-info-circle.inactive {
    
    color:#919191;
}
div#floatslide img {
	max-width: 100vw;
	max-height: 100vh;
}
.flcon_cont {
    display: flex;
    justify-content: space-around;
    flex-direction: initial;
    align-items: center;
    flex-wrap: wrap;
}
.file_img {
    max-width: 150px;
	margin: 0.3rem
}

.spinner {
  width: 48px;
  height: 48px;
  display: block;
  margin:15px auto;
  position: relative;
  color: #d3d3d3;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
.spinner::after,
.spinner::before {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  width: 24px;
  height: 24px;
  top: 0;
  background-color: #d3d3d3;
  border-radius: 50%;
  animation: scale50 1s infinite ease-in-out;
}
.spinner::before {
  top: auto;
  bottom: 0;
  background-color: #7586ff;
  animation-delay: 0.5s;
}
div#anicube {
    width: 150px;
    height: 150px;
    background: #1c63b5;
    animation: rotatezoom 1.5s ease-in-out infinite;
    position: absolute;
    top:calc(50vh - 75px);
	left: calc(50vw - 75px);
    border: 0.6rem solid whitesmoke;
    border-radius: 80px;
}
div#loader {
    position: fixed;
	top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background: #1c64b6;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}

div#loader, div#loader p {
	color:#fff;
}
select#camselece {
    width: 100%;
}
#welcmsg i {
    margin-right: 1rem;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* @keyframes changecolor{ */
	
	/* 0%{ color:#fff;left: calc(50vw - 59px);top: 63vh;} */
	/* 25% { color:#ffffff4f;left: calc(40vw - 59px);top: 43vh;} */
	/* 75% { color:#ffffff4f;left: calc(60vw - 59px);top: 43vh;} */
	/* 100% { color:#fff;left: calc(50vw - 59px);top: 63vh;} */
 /* } */
 
@keyframes rotatezoom {
  0% { transform: rotate(0deg) scale(1) ;  border-radius: 4rem;}
  
  50% { transform: rotate(80deg) scale(1.4) ;border-radius: 40px;} 
  
  100% { transform: rotate(360deg) scale(1) ; border-radius: 4rem;}
}
@keyframes scale50 {
  0%, 100% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
} 

@keyframes fadein {
  from {
    opacity: 0;
	
	  background-size: 15em;
  }
  to {
	  
	  background-size: 10em;
    opacity: 1;
  }
}



@media screen and (max-width: 600px) {
	div#floatInfo p {
		/*width: 90vw;*/
	}
	.qbottom {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		text-align:center;
	}
	.qleft {
		width:unset;
	}
	.qright {
		justify-content: space-around;
		
		align-items: center;
		flex-direction: row;
		width:unset;
	}
	.qalf {
		margin: .9rem 0.2rem;
	}

	.qmain {
		padding:.5rem;
		overflow:hidden;
	}

	div#cinfo {
		flex-direction: column;
		align-items: center;
	}
	
.qrightIn {
		grid-column: 1 ;
  grid-row: 2;
}
.qtop-title-group {
	grid-column: 1 ;
  grid-row: 1;
}
.q-actions-container {
	FONT-WEIGHT: 200;
	grid-area: 1 / col1-start / last-line / 4;
	flex-direction: column-reverse;
}

	.qrightIn {
		flex-direction:row!important;
		/*border-bottom:1px solid gray;*/

	}

	/* Make select2 widgets comfortably tappable on phones — native
	   selects get the OS picker (already chunky), select2 uses our
	   custom widget so we have to enlarge it ourselves. */
	.select2-container--default .select2-selection--single {
		height: 2.6rem;
		min-height: 2.6rem;
		font-size: 1rem;
	}
	.select2-container--default .select2-selection--single .select2-selection__rendered {
		line-height: 2.4rem;
		padding-left: 0.75rem;
		padding-right: 2.2rem;
	}
	.select2-container--default .select2-selection--single .select2-selection__arrow {
		height: 2.4rem;
		width: 2rem;
	}
	.select2-container--default .select2-selection--single .select2-selection__clear {
		margin-top: 0.4rem;
		font-size: 1.4rem;
	}
	.select2-container--default .select2-search--dropdown .select2-search__field {
		font-size: 1rem;
		padding: 0.5rem 0.6rem;
		min-height: 2.4rem;
	}
	.select2-container--default .select2-results__option {
		padding: 0.7rem 0.8rem;
		font-size: 1rem;
		min-height: 2.4rem;
	}
	.select2-dropdown {
		font-size: 1rem;
	}
}

.cnfdiv {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    border-right: 1px solid gray;
}
/*** media screen more than 800px ***/
@media screen and (min-width: 800px) {
 
	ul#m_menu li.m_m_filter {
		display: flex;
		width: 25%;
		background: #09213c;
		flex-direction: column;
		margin: 0.5rem;
		justify-content: space-between;
		border-radius: 15px;
		overflow: hidden;
	}

	#m_menu ul li span.m_new {
		width: 99%;
		border-left: 1px solid #1f5695;
		font-size: 2rem;
		background: #1f955d;
	}
	ul.m_m_container {
		display: flex;
		flex-direction: row;
		width: 100%;
		flex-wrap: wrap;
		justify-content: space-around;
		}	
	
	#u_Settings {
		max-width:100vw;
	}
	#m_menu ul li span.m_val {
		width: 100%;
		flex-grow: 1;
		}
	
}
span.counter {
    font-size: 0.8rem;
    
    font-weight: bolder;
}
/*** media screen less than 800px ***/
@media screen and (max-width: 800px) {
	elmnt_out:nth-child(1),.elmnt_out:nth-child(2),.elmnt_out:nth-child(3),.elmnt_out:nth-child(4){width:unset;float:unset;}
    .optionyn {display:inline;padding: 10px;}
	.elmnt_out {
    display:block;
    text-align: center;
    
	}
	.qmain input, .qmain select {
		margin: 0.1rem 0rem 1rem 0rem;
		width: 80vw;
	}
	.qmain input[type="radio"] {
		margin:unset;
		width:1.2rem;
	}
	.elmnt input,.elmnt prompt,.elmnt textarea{display :block;margin:auto;	width:95%;  }
	  .elmnt prompt{text-align: center;}
	  
	 .textqdiv {
		 
		flex-direction: column;
	}
	.qrightIn{
		
		padding:.3rem;
		}
	.qleftIn {
		width: unset;
		justify-content: unset;
		padding:unset;
	}
	.textqdiv.CHECKBOX {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid gray;
    padding: .7rem .1rem;
    justify-content: space-between;
    margin: unset;
	text-align:left;
	}
	

}
@media screen and (min-width: 1200px) {
	ul#m_menu li.m_m_filter {
		width: 15%;
	}
}

/*** end of media screen***/

.layout-right .qtop {
    display: grid;
    align-items: center; /* Vertically aligns all items in the center of their grid cell */
    grid-template-areas:
        "title radios actions";
    grid-template-columns: auto 40% 10%;
}
.layout-left .qtop {
    display: grid;
    align-items: center; /* Vertically aligns all items in the center of their grid cell */
    grid-template-areas:
        "actions title radios";
    grid-template-columns:  10% auto auto;
}

/* --- LOCATION control type --- */
/* Wrap the input + clear + pick buttons in a single bordered shell so
   they read as one control. The inner input/buttons drop their own
   borders and share the wrap's border instead. The wrap is NOT flex:1
   so it sits at its natural width like other inputs (TEXT, NUMBER) and
   stays right-aligned in the .textqdiv's space-between layout. */
.textqdiv.LOCATION .location-wrap {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #bbb;
    border-radius: 4px;
    background: #f5f5f5;
    overflow: hidden;
}
.textqdiv.LOCATION .location-input {
    width: 14ch;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0 .4rem;
    margin: 0;
    color: #333;
    cursor: default;
    box-shadow: none;
}
.textqdiv.LOCATION .location-input:focus { outline: none; }
.textqdiv.LOCATION .location-pick-btn,
.textqdiv.LOCATION .location-clear-btn {
    flex: 0 0 auto;
    padding: 0 .8rem;
    border: none;
    border-left: 1px solid #ddd;
    background: transparent;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #555;
}
.textqdiv.LOCATION .location-pick-btn:hover,
.textqdiv.LOCATION .location-clear-btn:hover {
    background: #eef3ff;
    color: #003;
}
/* Hide the clear button when there is no value. :placeholder-shown
   matches when the input is empty (placeholder attr is always set in
   the LOCATION renderer, even if blank). */
.textqdiv.LOCATION .location-input:placeholder-shown ~ .location-clear-btn {
    display: none;
}

/* --- Map picker modal --- */
/* The base .modal-content uses display:flex/flex-direction:column with
   max-height:82vh. Override to use dynamic viewport units (dvh) so the
   modal accounts for the mobile browser's URL bar, and let the map fill
   whatever vertical space is left after header + coords + footer. */
.modal-content.location-modal {
    max-width: 720px;
    width: 94%;
    max-height: 90dvh;
    padding-bottom: 12px;
    box-sizing: border-box;
}
.location-map {
    width: 100%;
    flex: 1 1 auto;
    min-height: 180px;
    margin: 12px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.location-coords {
    flex: 0 0 auto;
    text-align: center;
    font-family: monospace;
    margin-bottom: 8px;
    color: #333;
    min-height: 1.2em;
}
/* On narrow screens the three-button footer (Use my location / Cancel
   / Save) gets squeezed and the leftmost button's text is truncated.
   Let buttons wrap to two rows and give "Use my location" its own row
   so its Greek label (Η τοποθεσία μου) fits. */
.modal-content.location-modal .modal-footer {
    flex-wrap: wrap;
    flex: 0 0 auto;
}
.modal-content.location-modal #location-here-btn {
    flex: 1 1 100%;
}
/* Leaflet renders the map inside a div whose own stacking context can
   collide with the modal's z-index. Pin tile/pane layers below modal
   chrome (close icon, buttons) so they don't poke through. */
.location-map .leaflet-pane,
.location-map .leaflet-top,
.location-map .leaflet-bottom { z-index: 1; }

/* --- SIGNATURE control type --- */
/* Bordered shell with a tall preview thumbnail and a thin vertical
   button column on the right (Sign on top, Clear below). The preview
   gets most of the width and a generous height so the saved signature
   is readable at a glance on the main questionnaire page. */
.textqdiv.SIGNATURE .signature-wrap {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    border: 1px solid #bbb;
    border-radius: 4px;
    background: #f5f5f5;
    overflow: hidden;
    min-height: 160px;
}
.textqdiv.SIGNATURE .signature-preview {
    flex: 1;
    min-width: 0;
    background: #ffffff;
    background-image:
        linear-gradient(45deg, #fafafa 25%, transparent 25%),
        linear-gradient(-45deg, #fafafa 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #fafafa 75%),
        linear-gradient(-45deg, transparent 75%, #fafafa 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 6px;
}
.textqdiv.SIGNATURE .signature-placeholder {
    color: #888;
    font-style: italic;
    font-size: 1rem;
}
.textqdiv.SIGNATURE .signature-thumb {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    background: #fff;
}
/* Vertical button column to the right of the preview: Sign sits on
   top, Clear underneath, both filling the column's full width so the
   targets are big enough for finger taps on mobile. */
.textqdiv.SIGNATURE .signature-actions {
    display: flex;
    flex-direction: column;
    flex: 0 0 56px;
    border-left: 1px solid #ddd;
    background: #fafafa;
}
.textqdiv.SIGNATURE .signature-actions .signature-sign-btn,
.textqdiv.SIGNATURE .signature-actions .signature-clear-btn {
    flex: 1 1 0;
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #555;
    padding: 0;
}
.textqdiv.SIGNATURE .signature-actions .signature-clear-btn {
    border-top: 1px solid #ddd;
    color: #b33;
}
.textqdiv.SIGNATURE .signature-actions .signature-sign-btn:hover {
    background: #eef3ff;
    color: #003;
}
.textqdiv.SIGNATURE .signature-actions .signature-clear-btn:hover {
    background: #fdecec;
    color: #800;
}
/* Hide the Clear button while the hidden input is empty. The :has()
   selector on the wrap lets us reach back up from the empty input
   without restructuring the DOM. */
.textqdiv.SIGNATURE .signature-wrap:has(.signature-input:placeholder-shown) .signature-clear-btn {
    display: none;
}

/* --- Signature capture modal --- */
.modal-content.signature-modal {
    max-width: 720px;
    width: 94%;
    padding-bottom: 12px;
}
.signature-pad-wrap {
    position: relative;
    margin: 12px 0;
    width: 100%;
    height: 50vh;
    min-height: 240px;
    border: 1px dashed #aaa;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}
.signature-pad {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: crosshair;
    background: #fff;
}
.signature-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: #bbb;
    font-style: italic;
}

/* Assign each child element to its named grid area */
.qtop-title-group {
    grid-area: title;
}

.qrightIn {
    grid-area: radios;
    /* justify-self: center; */ /* Center the radio buttons within their grid area */
}

.q-actions-container {
    grid-area: actions;
    justify-self: end; /* Pushes the icons to the far right of their grid area */
    display: flex;
	align-items: center;
	gap:.5rem;
}
.layout-left .q-actions-container{flex-direction: row-reverse;justify-self: left;align-items: center;}
select#qcfilter {
    max-width: 10rem;
}

.field-saved {
	transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out;
}
input.field-saved, textarea.field-saved, select.field-saved, .textqdiv.field-saved {
	background-color: #d4edda !important;
}
.qrightIn.field-saved {
	box-shadow: inset 0 0 0 3px #28a745;
}
.file-actions-container {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
    justify-content: space-around;
}
.file-action-button {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: .2rem;
    padding: 0.5rem 0.7rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem 15.12px;
}
.file-action-button i {
	font-size: 1.2rem;
}
    
/* --- Responsive Control for Smaller Screens --- */
@media screen and (max-width: 800px) {
   .layout-right .qtop {
      
        grid-template-areas:
            "title title actions"
            "radios radios actions";
        grid-template-columns: auto auto;
        
    }
	.layout-left .qtop {
      
        grid-template-areas:
            "actions title title "
            "actions radios radios ";
        grid-template-columns:  auto 1fr;
        
    }
	
	layout-right .qtop-title-group h2 {
		padding:.2rem;
	}
	  
	layout-right .qrightIn{
		border-radius: .2rem;
		justify-self:unset;
		margin-right: 1.5rem;
	}
    
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
  font-size: 16px;
}

/* AI revision button — appears top-right of any field row that has a
   matching row in QS_AI_FIELD_CFG. Made position:relative on the row so
   absolute placement sticks to the field, not the page. */
.textqdiv { position: relative; }
.ai-revise-btn {
    position: absolute;
    top: 2px;
    right: 4px;
    z-index: 2;
    background: transparent;
    border: none;
    padding: 0 4px;
    margin: 0;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.75;
}
.ai-revise-btn:hover { opacity: 1; }
.ai-revise-btn:disabled { opacity: 0.4; cursor: wait; }

/* Notes wrapper for question0-level notes textarea so the AI button can
   anchor to it the same way it anchors to per-field rows. Slightly
   tighter horizontal margin than .textqdiv (.25rem vs .5rem) so the
   notes field reads a touch wider than the per-field rows above it. */
.notes-wrap {
    position: relative;
    margin: .3rem .25rem;
}
.notes-wrap .notes-textarea {
    width: 100%;
    box-sizing: border-box;
}

.ai-revise-ask-btn { display: inline-flex; align-items: center; gap: 4px; }

/* Suggestion chips inside the AI revise dialog. Each chip is one line
   from QS_AI_FIELD_CFG.SUGGESTIONS; clicking it inserts the phrase on
   its own line in the textarea so the user can stack rough notes
   before asking the AI to polish them. */
.ai-revise-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 4px;
    max-height: 160px;
    overflow-y: auto;
}
.ai-suggestion-chip {
    background: #eef3fb;
    color: #1c64b6;
    border: 1px solid #c8d8ee;
    border-radius: 14px;
    padding: 4px 10px;
    font-size: 0.9rem;
    line-height: 1.2;
    cursor: pointer;
}
.ai-suggestion-chip:hover {
    background: #dbe6f6;
}
.ai-suggestion-chip:active {
    background: #c8d8ee;
}

/* --- PTEXT (predefined text) control type ---
   Layout: the wrap occupies the full width of the .textqdiv and stacks
   the checkbox+prompt row on top of the textarea. Override the
   default space-between row layout on .textqdiv so the wrap can
   span full width and the textarea isn't squeezed into the right
   column. */
.textqdiv.PTEXT {
    flex-direction: column;
    align-items: stretch;
}
.textqdiv.PTEXT .ptext-wrap {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    width: 100%;
}
.textqdiv.PTEXT .ptext-checkbox-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    user-select: none;
    text-align: left;
}
.textqdiv.PTEXT .ptext-toggle {
    margin: 0;
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
}
.textqdiv.PTEXT .ptext-prompt {
    flex: 1 1 auto;
    min-width: 0;
}
/* When the checkbox is checked, collapse the prompt to a single
   ellipsised line — the editable text below carries the full content,
   so the label only needs to remind the user which item it is. */
.textqdiv.PTEXT .ptext-wrap:has(.ptext-toggle:checked) .ptext-prompt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.textqdiv.PTEXT .ptext-text {
    width: 100%;
    min-height: 6rem;
    box-sizing: border-box;
    resize: vertical;
}
.textqdiv.PTEXT .ptext-text[hidden] {
    display: none;
}