.mvTagRow {
    cursor: pointer;
}

.mvTagRow div {
    pointer-events: none;
}

.mvTagRow:hover {
    background-color: #b96500;
    color: antiquewhite;
}

#signature-container,#signature-pad {

    width: 600px !important;
    height: 125px !important;

}

.sigChoice {
    font-weight: 400; 
    font-style:normal; 
    font-size:2.25rem;
    cursor: pointer;
}

.sigChoice:hover {
    color: lime;
}

.mv-head {
    font-size: 1.2rem;
    font-family: 'Poppins Light';
}

.mv-head-aqua {
    color: aqua; 
}

.mv-head-orange {
    color: orange; 
}

.mv-head-red {
    color: rgb(101, 17, 17); 
}

.mv-head-gold {
    color: #FFD700; 
}

.mv-content-dark {
    color: rgb(26, 26, 26);
    font-family: 'Poppins Light';
}

.mv-content-light {
    color: antiquewhite;
    font-family: 'Poppins Light';
}

.form-parent {

    container-name: form-container;
    container-type: inline-size;

}

.mv-icon  {
    vertical-align:middle; 
    height: 35px;
    cursor: pointer;
}

.pdf-cnt:hover {
    color: hotpink;
}

.formContainer {

    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 10px;
    align-items: center;

}

.official-tag {

    width: 80% !important;

}

#Alt_Email {

    width: 50%;

}
  
.form-section-container {

    border-radius: 5px; 
    min-height: 100px;
    box-shadow: 0px 0px 3px black;
    width: 100%; 
    background-color: lightgray;
    padding: .3rem;

}

.form-section-content {

    margin-top: 10px;
    font-family: 'Poppins Light';
    font-size: .9rem;

}

.span-section {
    grid-column: 1 / 3;
}

.section-field-container {

    margin-top: 10px;
    display: grid;
    grid-template-columns: 20% 80%;
    font-family: 'Poppins Light';
    font-size: .9rem;

}

.section-text-input {

    border-radius:5px; 
    border: none !important;
    box-shadow: 0px 0px 2px black !important;
    color: rgb(0, 71, 71) !important;
    background: white !important;
        
}

.section-text-input-req {

   background-color: pink !important;

}

.form-section-header {

    background-color: saddlebrown;
    text-align: left;
    padding: 4px;
    font-family: 'RocknRoll One';
    border-radius: 5px;
    font-size: .9rem;
    font-weight: 500;
    color: antiquewhite;

}

.tag-container {

    display: grid; 
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 10px;
    align-items: center;
    margin-top: 15px;

}

.tag-wrap {

    display: flex;
    gap: 5px;

}
@media only screen and (max-width: 1500px) {

    .formContainer {

        display: block !important; 
    
    }

    .form-section-container {

        margin-top: 10px;

    }

    .tag-container {

        display: block !important; 
         
    
    }

    .tag-wrap {

        margin-bottom: 8px !important;

    }

    #signature-container,#signature-pad {

        width: 300px !important;
        height: 125px !important;

    }

    .official-tag {

        width: 80% !important;
    
    }

    #Alt_Email {

        width: 90% !important;

    }

    .form-section-header,.section-field-container {

        font-size: .8rem !important;

    }

    .form-section-content {

        font-size: .75rem !important;

    }
    

}


.count-row {

	display:flex; 
	align-items:center; 
	width: 100%; 
	height: 40px; 
	background-color: rgb(26, 26, 26);
	color:#b96500;
	font-weight: 700;

}


/*************************** CSS Table **********************************/

:root {
    --zebraLight: rgb(102, 102, 102);
    --zebraDark: rgb(75, 75, 75);
    --text-color: antiquewhite;
    --zebraLight: rgb(102, 102, 102);
    --zebraDark: rgb(75, 75, 75);
    --text-color: antiquewhite;
    --table-border-all: none;
    --table-border-bottom: 1px solid rgb(128, 128, 128);
    --table-border-color: rgb(128, 128, 128);
    --table-row-height: 40px;
    --th-background-color: black;
}

/* table-container

   Optional wrapper for the table. use ".sticky" below on header row in conjunction with this
   to have fixed heads with scrolling body. Height will need to be adjusted as well.
*/
.table-container {

    overflow: auto;

}

.sticky {

    position: sticky; 
    top: 0;

}

.tr {

	color:var(--text-color);
	height: var(--table-row-height);
	display: flex;
	align-items: center;
	justify-content: left;
	padding:0px;
    border-bottom:var(--table-border-bottom);

}

/* table cell */
.tr > div {

    /* width: 100%; */ 
    /* 
    uncomment above line for an "even grid" table where all cells are equal width. 
    
    Otherwise the div widths must be defined for this to work. And this option will need
    to be used when you have tables where particular cells need to be larger to fit more content.
    Just use percentage widths on the divs and make sure it adds up to 100%
    
    */
    text-align: left; /* cell alignment */
	height: var(--table-row-height);
	border: var(--table-border-all);
	border-color: var(--table-border-color);
	padding: 5px;
	overflow: hidden;
	display: flex;
	align-items: center;
    border-bottom:var(--table-border-bottom);
	
}


.th {

    color:var(--text-color);
	background-color:var(--th-background-color);
	font-weight: bold;
	line-height: 28px;

}

.result-row:nth-child(odd) {

    background-color: var(--zebraLight);

}

.result-row:nth-child(even) {

    background-color: var(--zebraDark);
}


.eqCol > div {

    width:100%;

}


/*************************** END CSS Table **********************************/
input[type="text"][list] {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  border: 2px solid #ccc;
  border-radius: 6px;
  background-color: #ffffff;
  outline: none;
  transition: border-color 0.3s ease;
}

/* Change style when the user clicks/focuses inside */
input[type="text"][list]:focus {
  border-color: #0066cc;
  box-shadow: 0 0 8px rgba(0, 102, 204, 0.2);
}