@charset "utf-8";
/* CSS Document */
 @import url("structure.css");
  @import url("reset.css");
    @import url("custom.css");
 
body {
	margin:auto;
	background-color: #FFFFFF;
	background-image: url(../images/bg.jpg);
	background-repeat: repeat-x;
	line-height: 1.5;
	font-family:Arial, Helvetica, sans-serif;
	font-size:75.00%;
	-webkit-text-size-adjust: none;
	color:#162636;

}


 

  p { line-height:1.5em; margin:0 0 1em 0; }
  blockquote, cite, q { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic;}
  q:before, q:after, blockquote:before, blockquote:after {content: "";}
  blockquote { margin:0 0 1em 1.6em; color:#666; }
  strong,b { font-weight:bold; }
  em,i { font-style:italic; }
  big { font-size:116.667%; }
  small { font-size:91.667%; }
  pre { line-height:1.5em; margin:0 0 1em 0; }
  pre, code, kbd, tt, samp, var { font-size:100%; }
  pre, code { color:#800; }
  kbd, samp, var, tt { color:#666; font-weight:bold; }
  var, dfn { font-style:italic; }
  acronym, abbr { border-bottom:1px #aaa dotted; font-variant:small-caps; letter-spacing:.07em; cursor:help;}
  sub, sup { font-size:91.6667%; line-height:0; }
  hr {color:#fff; background:transparent; margin:0 0 0.5em 0; padding:0 0 0.5em 0; border:0; border-bottom:1px #eee solid;}
  table {border-collapse: collapse; border-spacing: 0;}
  td, th{/**/line-height:2.1em;}
 
 /* All Headings
  ------------------------------------------------------------------------
*/

  h1,h2,h3,h4,h5,h6 { font-weight:bold; margin:0 0 0.25em 0;}
  h1 { font-size:250%; }                       /* 30px */
  h2 { font-size:200%; }                       /* 24px */
  h3 { font-size:150%; }                       /* 18px */
  h4 { font-size:133.33%; }                    /* 16px */
  h5 { font-size:116.67%; }                    /* 14px */
  h6 { font-size:116.67%; }                    /* 14px */
  
  
  /* Lists
   ----------------------------------------------------------------------------
  */

  ul, ol, dl { line-height:1.5em;}
  ul { list-style-type:none; }
  ul ul { list-style-type:none; margin-bottom:0; }
  ol { list-style-type:decimal; }
  ol ol { list-style-type:lower-latin; margin-bottom:0; }
  li {line-height:1.5em; }
  dt { font-weight:bold; }
  dd {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 1em;
}
  
   /* All Links 
    ----------------------------------------------------------------------------
   */

  a, a:link, a:visited, a:hover, a:active { text-decoration:none; outline: none; }
  :-moz-any-link:focus, div { outline:none; }
  img, img a, a img{border:none; outline:none; background:none;}
  a#skip_navigation { position: absolute; left: -99999px;}
  a#skip_navigation:focus, a#skip_navigation:active { left: 0; top: 0; }
  
 /* a:focus { text-decoration:underline; color:#000; background: #fff; outline: 3px #f93 solid; }*/
 /* Note: Most browsers handle focus with a dotted or glowing outline that allows users 
  * to easily navigate a page with their keyboard, it should therefore be styled with care
  * Can cause unwanted issues in Opera and Firefox
  ----------------------------------------------------------------------------------------
 */
 
 /* Additional base styles
  * These apply to when needed
  -------------------------------------------------------------------------------------------------
  */
  
  .txt_indent{ text-indent:10px;}
  .txt_shadow_down{text-shadow: 0 1px 0 #fff;}
  .txt_shadow_up{text-shadow: 0 -1px 0 #000;}
  .hidden_element{ font-size: 0; line-height: 0; overflow:hidden; text-indent:-99999px;}
  .hidden_element2{ position:absolute; left:-99999px;}
  .nowrap { white-space: pre;}
  .push_down{ margin-top:10px;}
  .expand{ padding:10px 0;}
  .clear {
  clear:both;
  }
h1 {
	height: 15px;
	font-family: Arial;
	font-size: 16px;
	color:#114057;
	padding-top: 12px;
	padding-right: 0px;
	padding-bottom: 5px;
	margin: 0;
	padding-left: 15px;
	font-weight: bold;
}
h2 {
	height: 15px;
	font-family: Arial;
	font-size: 14px;
	color:#114057;
	padding-top: 12px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 15px;
	font-weight: bold;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 10;
	margin-left: 0;
}

@media screen and (min-width: 1000px) and (max-width: 1900px) {
#main {
	width:1060px;
	margin:auto;
	
}

#header {
	width:100%;
	height:120px;
	background-image: url(../images/header.png);
	background-repeat: no-repeat;
}

#homebanner {
width:100%;
margin:auto;
}
}
@media screen and (min-width: 100px) and (max-width: 1000px) {
#main {
	width:320px;
	margin:auto;
	
}

#header {
	width:100%;
	height:120px;
	background-image: url(../images/headersmall.png);
	background-repeat: no-repeat;
}

#homebanner {
width:100%;
margin:auto;
}
}


@media screen and (min-width: 1000px) and (max-width: 1900px) {
#homelogin {
	width:380px;
	float:left;
}
#homeregister {
	width:550px;
	float:right;
	padding-top: 35px;
	
}
}
@media screen and (min-width: 100px) and (max-width: 1000px) {
#homelogin {
	width:380px;
	float:left;
}
#homeregister {
	width:550px;
	float:right;
	padding-top: 35px;
	
}
}
#bar {
	width:350px;
	height:58px;
	float:left;
	margin-bottom: 10px;
	background-image: url(../images/bar.png);
	background-repeat: no-repeat;
}
.newtext {
	width:400px;
	text-align:justify;
	font-size: 12px;
	padding-left: 15px;
	line-height: 25px;
}

.steps {
	width:100%;
	margin:auto;
	padding-top: 15px;
}
.step1 {
	width:159px;
	height:55px;
	float:left;
}
.steptext {
	width:159px;
	height:55px;
	float:left;
}
  .stext {
  padding:10px;
  color:#1b3b73;
  font-size:12px;
  }
  
  
  #footer {
	width:100%;
	padding-top: 10px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #afbdd2;
	margin-top: 100px;
  }
  #subfooter {
	width:100%;
	padding-top: 10px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #afbdd2;
	margin-top: 20px;
  }
.learnmore {
	color:#FFFFFF;
	background:#1877BA;
	font-size:12px;
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: 5px;
	font-family: Arial;
	text-transform: uppercase;
	margin-top: 10px;
	font-weight: normal;
	padding-right: 5px;
	width: 160px;
}
.learnmore a {
color:#FFFFFF;
}
@media screen and (min-width: 1000px) and (max-width: 1900px) {
#submaterial {
	width:724px;
	float:left;
	
}
#subright {
	width:280px;
	float:right;
	padding-top: 10px;
}
}

@media screen and (min-width: 100px) and (max-width: 1000px) {
#submaterial {
	width:320px;

	
}
#subright {
	width:320px;
	float:left;
	padding-top: 10px;
}

}


.slidedoormenu{
	list-style-type: none;
	width: 100%;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 20;
	padding-left: 0;
	margin: 0;

}

.slidedoormenu li{
border-bottom: 1px solid #bdd6e7; /* Gray border beneath each menu item */
}

.slidedoormenu li a{
	display: block;
	color: #5b5b68;
	width: auto; /* White border beneath each menu item link, to add depth */
	padding: 7px 0; /* Vertical (top/bottom) padding for each menu link */
	text-indent: 20px;
	text-decoration: none;
	font-size: 12px;
	font-weight: normal;
	
}

.slidedoormenu li a:hover{
	background-position: -387px 0; /* Shift background image horizontally 387px, or the start of the 2nd background image */
	color: #a71c23;
}

.slidedoormenu li.lastitem, .slidedoormenu li.lastitem a{
border-bottom-width: 0; /* For last menu item within menu, remove bottom border */
}

.slidedoormenu li.lastitem a{
padding: 8px 0; /* increase vertical border of last menu link by 2px (default is padding: 7px 0) to account for removed border width */
}

.completed {
color:#660000;
display:block;background:#a1c30e;border-radius:4px;font-size: 12px; 
line-height: 18px; color: #fff;
font-weight:normal;padding: 3px 0 3px;width:75px;
text-align:center;float:right;margin: 1px 20px 0 0;
margin-bottom:5px;
margin-top:10px;
}
.pending {
color:#660000;
display:block;background:#de0909;border-radius:4px;font-size: 12px;
line-height: 18px; color: #fff;
font-weight:normal;padding: 3px 0 3px;width:75px;
text-align:center;float:right;margin: 1px 20px 0 0;
margin-bottom:5px;
margin-top:10px;
}


.roundedboxfinal {
	-moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
	background:#F00!important;
	padding:3px;
	border:1px solid #bbbbbb;
	margin-bottom:5px;
	margin-top:5px;
	text-align:center;

	}
.roundedboxfinal a{ color:#ffffff;}

.roundedboxprint {
	-moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
	background:#06F!important;
	padding:3px;
	border:1px solid #bbbbbb;
	margin-bottom:5px;
	margin-top:5px;
	text-align:center;

	}
.roundedboxprint a{ color:#ffffff;}

.roundedbox {
	-moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
	background:#F4F4F4!important;
	padding:3px;
	border:1px solid #bbbbbb;
	margin-bottom:5px;
	margin-top:5px;
	text-align:center;

	}
	.roundedbox img { width: 100px; overflow:hidden;}
	.finished {
	-moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
	background:#F4F4F4;
	padding:3px;
	border:1px solid #bbbbbb;
	margin-bottom:5px;
	margin-top:5px;
	text-align:center;

	}
#myBtn{
	background-color:#F00;
color: white;
padding: 6px 10px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
text-transform:capitalize; font-size:14px;
	
	}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 50%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color:red!important;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #900;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 12px 16px;
    background-color: #cccccc;
    color: white;
	margin-top:40px;
	
}
.modal-header h3{text-align:left!important;}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #4CAF50;
    color: white;
}
.modal-body table {
    border-collapse: collapse;
    width: 100%;border:0px;
}

.modal-body table th{
    text-align: left; font-size:18px; font-weight:bold;
    padding: 8px; border:0px;
}
.modal-body table td {
    text-align: left;
    padding: 8px; border:0px;
}
.modal-body table tr:nth-child(even){background-color: #f2f2f2}

.modal-body table th {
    background-color: #999B9A;
    color: white;
}
.mtabutton {
    width: 180px;
	color: #fff !important;
background-color: #673ab7 !important;
border: none;
display: inline-block;
padding: 2px 6px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap; margin-bottom:10px;
}

.ammendmentsbutton {
    width: 150px;
	color: #fff !important;
background-color: #e91e63 !important;
border: none;
display: inline-block;
padding: 2px 6px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap;
}

.revisebutton {
    width: 150px;
	color: #fff !important;
background-color: #f44336 !important;
border: none;
display: inline-block;
padding: 2px 6px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap;
}

/* new css for the menus*/
/* =========================================
   Compact Profile Completion Menu
   Fits inside #subright (280px / 320px)
========================================= */

.profile-completion-wrapper{
	width:100%;
	max-width:100%;
	margin:0;
	padding:0;
	box-sizing:border-box;
}

.profile-completion-card{
	width:100%;
	box-sizing:border-box;
	background:#ffffff;
	border:1px solid #dbe4ee;
	border-radius:14px;
	padding:10px;
	box-shadow:none;
}

.pc-topbar{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	margin-bottom:10px;
}

.pc-topbar-left,
.pc-topbar-right{
	width:28px;
	flex-shrink:0;
	text-align:center;
}

.pc-circle-btn{
	width:28px;
	height:28px;
	border:1px solid #d9e2ec;
	border-radius:50%;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background:#fff;
	color:#243b63;
	font-size:12px;
	line-height:1;
}

.pc-title-block{
	flex:1;
	text-align:center;
}

.pc-title-block h2{
	margin:0;
	padding:0;
	height:auto;
	font-size:15px;
	line-height:1.2;
	font-weight:bold;
	color:#0f2350;
}

.pc-title-block p{
	margin:4px 0 0;
	font-size:10px;
	line-height:1.3;
	color:#7b8797;
}

.pc-progress-panel{
	display:flex;
	align-items:center;
	gap:10px;
	border:1px solid #ebf0f5;
	border-radius:12px;
	padding:10px;
	background:#fcfdff;
	margin-bottom:10px;
}

.pc-ring{
	--progress:0;
	width:66px;
	height:66px;
	border-radius:50%;
	display:grid;
	place-items:center;
	background:conic-gradient(#57b933 calc(var(--progress) * 1%), #edf3ea 0);
	position:relative;
	flex-shrink:0;
}

.pc-ring:before{
	content:"";
	position:absolute;
	width:50px;
	height:50px;
	border-radius:50%;
	background:#fff;
	box-shadow:inset 0 0 0 1px #edf1ed;
}

.pc-ring-content{
	position:relative;
	z-index:2;
	text-align:center;
}

.pc-ring-value{
	display:block;
	font-size:12px;
	font-weight:bold;
	line-height:1.1;
	color:#3ba82d;
}

.pc-ring-label{
	display:block;
	margin-top:2px;
	font-size:9px;
	line-height:1.1;
	color:#6b7280;
}

.pc-progress-info{
	flex:1;
	min-width:0;
}

.pc-progress-info h3{
	margin:0 0 8px;
	font-size:13px;
	line-height:1.25;
	font-weight:bold;
	color:#1e2a4a;
}

.pc-progress-bar{
	width:100%;
	height:8px;
	border-radius:999px;
	background:#e7ebf1;
	overflow:hidden;
}

.pc-progress-bar span{
	display:block;
	height:100%;
	border-radius:999px;
	background:#57b933;
}

.pc-progress-info p{
	margin:8px 0 0;
	font-size:10px;
	line-height:1.3;
	color:#7b8797;
}

.pc-menu-list{
	display:flex;
	flex-direction:column;
	gap:8px;
}

.pc-menu-item{
	display:flex;
	align-items:center;
	gap:10px;
	padding:10px;
	border:1px solid #e7edf3;
	border-radius:12px;
	background:#fff;
	text-decoration:none;
	box-sizing:border-box;
}

.pc-menu-item:hover{
	background:#fafcff;
	border-color:#d8e3ee;
}

.pc-menu-icon{
	width:38px;
	height:38px;
	border-radius:10px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
	font-size:15px;
}

.theme-blue{ background:#eaf4ff; color:#2196f3; }
.theme-green{ background:#edf7ea; color:#41a833; }
.theme-purple{ background:#f1ecff; color:#7c58d6; }
.theme-teal{ background:#e8fbf7; color:#14a38b; }
.theme-orange{ background:#fff1e9; color:#f97316; }
.theme-cyan{ background:#ebf8ff; color:#0ea5e9; }
.theme-pink{ background:#fff0f6; color:#db2777; }

.pc-menu-name{
	flex:1;
	min-width:0;
	font-size:12px;
	line-height:1.25;
	font-weight:bold;
	color:#1f2947;
}

.pc-status{
	display:inline-flex;
	align-items:center;
	gap:5px;
	padding:5px 8px;
	border-radius:999px;
	font-size:10px;
	line-height:1;
	font-weight:bold;
	white-space:nowrap;
}

.pc-status--completed{
	background:#edf8e9;
	color:#3ca82c;
}

.pc-status--pending{
	background:#fff0e8;
	color:#df6d1f;
}

.pc-arrow{
	color:#8b95a7;
	font-size:11px;
	margin-left:2px;
}

@media screen and (min-width: 100px) and (max-width: 1000px) {
	.profile-completion-card{
		padding:10px;
	}

	.pc-menu-name{
		font-size:13px;
	}

	.pc-progress-info h3{
		font-size:13px;
	}
}

/* Outer shell */
.profile-completion-wrapper{
	width:100%;
	max-width:100%;
	margin:0;
	padding:6px 0;
	box-sizing:border-box;
}

.profile-completion-card{
	width:100%;
	box-sizing:border-box;
	background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
	border: 1px solid #d9e5f2;
	border-radius: 18px;
	padding: 12px;
	box-shadow:
		0 10px 24px rgba(17, 64, 87, 0.08),
		0 2px 6px rgba(17, 64, 87, 0.05);
	position: relative;
	overflow: hidden;
}

.profile-completion-card:before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:4px;
	background: linear-gradient(90deg, #2f80ed 0%, #56ccf2 50%, #6fcf97 100%);
}

.profile-completion-card:after{
	content:"";
	position:absolute;
	top:-35px;
	right:-35px;
	width:90px;
	height:90px;
	border-radius:50%;
	background: rgba(47, 128, 237, 0.06);
}

/* top area */
.pc-topbar{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	margin-bottom:12px;
	padding-bottom:8px;
	border-bottom:1px solid #edf2f7;
	position:relative;
	z-index:2;
}

.pc-topbar-left,
.pc-topbar-right{
	width:28px;
	flex-shrink:0;
	text-align:center;
}

.pc-circle-btn{
	width:28px;
	height:28px;
	border:1px solid #d9e2ec;
	border-radius:50%;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background:#ffffff;
	color:#355070;
	font-size:12px;
	line-height:1;
	box-shadow:0 2px 4px rgba(0,0,0,0.04);
}

.pc-title-block{
	flex:1;
	text-align:center;
}

.pc-title-block h2{
	margin:0;
	padding:0;
	height:auto;
	font-size:15px;
	line-height:1.2;
	font-weight:bold;
	color:#102a43;
	letter-spacing:0.2px;
}

.pc-title-block p{
	margin:4px 0 0;
	font-size:10px;
	line-height:1.3;
	color:#7b8794;
}

/* progress container */
.pc-progress-panel{
	display:flex;
	align-items:center;
	gap:10px;
	border:1px solid #e6eef7;
	border-radius:14px;
	padding:10px;
	background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
	margin-bottom:12px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
	position:relative;
	z-index:2;
}

.pc-menu-item{
	display:flex;
	align-items:center;
	gap:10px;
	padding:10px;
	border:1px solid #e7edf3;
	border-radius:14px;
	background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
	text-decoration:none;
	box-sizing:border-box;
	box-shadow: 0 2px 6px rgba(17, 64, 87, 0.04);
	transition: all 0.2s ease;
}

.pc-menu-item:hover{
	background:#f8fbff;
	border-color:#cfe0f2;
	box-shadow: 0 6px 14px rgba(17, 64, 87, 0.08);
	transform: translateY(-1px);
}

/* VERY SAFE OUTER STATUS LOOK */
#column-styler{
	background:#ffffff;
	border:1px solid #d6e2ee;
	border-radius:10px;
	box-shadow: 0 6px 16px rgba(17, 64, 87, 0.08);
}

h4.curve-top{
	margin:0;
	padding:12px 14px;
	font-size:14px;
	font-weight:bold;
	color:#0f4c8a;
	background:#f4f9ff;
	border-bottom:1px solid #dbe6f0;
}

/* =========================================================
   ENLARGE LEFT SECTION ONLY
   Header untouched. Inner cards untouched.
========================================================= */

#main {
  width: 99% !important;
  max-width: 1900px !important;
  margin: 0 auto !important;
  position: relative !important;
}

#header {
  position: relative !important;
  overflow: visible !important;
}

/* Main row */
#homebanner {
  width: 100% !important;
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding-right: 175px !important; /* space for photo/buttons */
  clear: both !important;
  box-sizing: border-box !important;
}

/* LEFT SECTION - gets maximum remaining width */
#submaterial {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  float: none !important;
  margin: 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* STATUS SECTION - reduced to give left more room */
#subright {
  flex: 0 0 300px !important;
  width: 300px !important;
  max-width: 300px !important;
  min-width: 300px !important;
  float: none !important;
  margin: 0 !important;

  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;

  z-index: 2 !important;
  box-sizing: border-box !important;
}

/* FAR RIGHT PHOTO/BUTTONS */
.profile-box2 {
  width: 155px !important;
  max-width: 155px !important;
  min-width: 155px !important;

  position: absolute !important;
  top: 160px !important;
  right: 6px !important;

  margin: 0 !important;
  padding: 0 !important;
  z-index: 10 !important;
  box-sizing: border-box !important;
}

.profile-box2 img,
.roundedbox img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Buttons inside photo section */
.profile-box2 a,
.profile-box2 button,
.profile-box2 input[type="button"],
.profile-box2 input[type="submit"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Keep status internals fitting inside reduced width */
#column-styler,
.categorized-items,
.sidetext {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Prevent left content overflow */
#submaterial table,
#submaterial img,
#submaterial iframe,
#submaterial video,
#submaterial canvas {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#submaterial table {
  width: 100% !important;
}

/* =========================================================
   LARGE SCREENS
========================================================= */

@media screen and (min-width: 1500px) {
  #main {
    width: 99% !important;
    max-width: 1900px !important;
  }

  #homebanner {
    gap: 14px !important;
    padding-right: 175px !important;
  }

  #subright {
    flex: 0 0 300px !important;
    width: 300px !important;
    max-width: 300px !important;
    min-width: 300px !important;
  }

  .profile-box2 {
    width: 155px !important;
    max-width: 155px !important;
    min-width: 155px !important;
    top: 160px !important;
    right: 6px !important;
  }
}

/* =========================================================
   MEDIUM SCREENS
========================================================= */

@media screen and (max-width: 1400px) {
  #main {
    width: 99% !important;
  }

  #homebanner {
    gap: 12px !important;
    padding-right: 165px !important;
  }

  #subright {
    flex: 0 0 285px !important;
    width: 285px !important;
    max-width: 285px !important;
    min-width: 285px !important;
  }

  .profile-box2 {
    width: 150px !important;
    max-width: 150px !important;
    min-width: 150px !important;
    top: 160px !important;
    right: 5px !important;
  }
}

/* =========================================================
   SMALL DESKTOPS
========================================================= */

@media screen and (max-width: 1200px) {
  #homebanner {
    gap: 10px !important;
    padding-right: 160px !important;
  }

  #subright {
    flex: 0 0 270px !important;
    width: 270px !important;
    max-width: 270px !important;
    min-width: 270px !important;
  }

  .profile-box2 {
    width: 145px !important;
    max-width: 145px !important;
    min-width: 145px !important;
    top: 160px !important;
    right: 5px !important;
  }
}

/* =========================================================
   TABLETS / MOBILE
========================================================= */

@media screen and (max-width: 1050px) {
  #homebanner {
    display: block !important;
    padding-right: 0 !important;
  }

  #submaterial,
  #subright {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    margin: 0 !important;
  }

  #subright {
    margin-top: 15px !important;
  }

  .profile-box2 {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 220px !important;
    min-width: 0 !important;
    margin: 0 auto 15px auto !important;
  }
}

/* =========================================================
   FORCE LEFT SECTION TO FILL THE VACANT SPACE
   Do not affect right sections
========================================================= */

/* Make sure the left column itself expands */
#submaterial {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* Make all main containers inside the left section stretch */
#submaterial > div,
#submaterial > section,
#submaterial > article,
#submaterial > form,
#submaterial > table {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Common dashboard/card wrappers inside left section */
#submaterial .dashboard,
#submaterial .content,
#submaterial .main-content,
#submaterial .card,
#submaterial .panel,
#submaterial .box,
#submaterial .roundedbox,
#submaterial .submission,
#submaterial .submission-card,
#submaterial .submission-box,
#submaterial .my-submissions,
#submaterial .welcome-card {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* If old CSS used fixed pixel widths on left-side blocks */
#submaterial [style*="width"] {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* =========================================================
   INNER DASHBOARD UI IMPROVEMENT ONLY
   No HTML changes required
   Does NOT touch main page layout/header/sidebar
========================================================= */

:root {
  --uncst-primary: #2f3696;
  --uncst-primary-dark: #1e2a78;
  --uncst-blue: #3b82f6;
  --uncst-soft-bg: #f6f8fc;
  --uncst-card: #ffffff;
  --uncst-border: #dfe6f1;
  --uncst-border-soft: #edf1f7;
  --uncst-text: #1f2937;
  --uncst-muted: #667085;
  --uncst-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  --uncst-shadow-soft: 0 4px 14px rgba(15, 23, 42, 0.045);
  --uncst-radius: 16px;
  --uncst-radius-sm: 11px;
}

/* Make sizing predictable inside dashboard */
#description,
#description *,
#submaterial,
#submaterial * {
  box-sizing: border-box;
}

/* Main inner dashboard background */
#description.content2 {
  width: 100% !important;
  max-width: none !important;
  background: #f4f6fb !important;
  border: 1px solid var(--uncst-border) !important;
  border-radius: 0 !important;
  padding: 12px 12px 20px !important;
}

/* =========================================================
   WELCOME CARD
========================================================= */

.dashbord {
  width: 100% !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%) !important;
  border: 1px solid var(--uncst-border) !important;
  border-radius: 16px !important;
  padding: 22px 26px !important;
  margin: 0 0 18px 0 !important;
  box-shadow: var(--uncst-shadow-soft) !important;
}

.dashbord .name {
  font-size: 24px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  color: #2b2f38 !important;
  margin-bottom: 14px !important;
}

.dashbord .aff {
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: #111827 !important;
  margin: 6px 0 !important;
}

/* =========================================================
   GENERAL CONTENT BLOCKS
========================================================= */

.contactd {
  width: 100% !important;
  max-width: none !important;
  background: #ffffff !important;
  border: 0 !important;
  padding: 14px 14px 18px !important;
  margin: 0 !important;
  overflow: visible !important;
}

.contactd hr {
  border: 0 !important;
  border-top: 1px solid var(--uncst-border-soft) !important;
  margin: 14px -14px 18px !important;
}

/* Top two action buttons */
.contactd > a.button4 {
  margin: 0 12px 10px 0 !important;
  border-radius: 10px !important;
  padding: 12px 22px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08) !important;
}

/* Section title: My Submissions */
.headers {
  font-size: 23px !important;
  font-weight: 800 !important;
  color: #3294e9 !important;
  margin: 20px 0 18px !important;
  letter-spacing: -0.02em !important;
}

/* =========================================================
   SUBMISSIONS LIST
========================================================= */

.submissionsWrap {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  margin-top: 8px !important;
}

/* Submission card */
.subCard {
  width: 100% !important;
  background: var(--uncst-card) !important;
  border: 1px solid var(--uncst-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--uncst-shadow) !important;
  overflow: hidden !important;
}

/* Card top */
.subCardTop {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 18px !important;
  padding: 18px 22px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%) !important;
  border-bottom: 1px solid var(--uncst-border-soft) !important;
}

.subTitle {
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  color: #111827 !important;
}

.subTitle a,
.subTitle a:visited {
  color: #111827 !important;
  text-decoration: none !important;
}

.subTitle a:hover {
  color: var(--uncst-primary) !important;
  text-decoration: underline !important;
}

.subMeta {
  margin-top: 8px !important;
  font-size: 15px !important;
  color: var(--uncst-muted) !important;
}

.subMeta b {
  color: #111827 !important;
  font-weight: 800 !important;
}

/* =========================================================
   STATUS BADGES
========================================================= */

.badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  border: 1px solid transparent !important;
}

.badge.grey {
  background: #eef2ff !important;
  color: #2f3696 !important;
  border-color: #dbe2ff !important;
}

.badge.red {
  background: #fff1f1 !important;
  color: #b42318 !important;
  border-color: #ffc9c9 !important;
}

.badge.green {
  background: #edfdf3 !important;
  color: #067647 !important;
  border-color: #9ee2b8 !important;
}

.badge.orange {
  background: #fff5dc !important;
  color: #8a5b00 !important;
  border-color: #ffe1a3 !important;
}

.badge.blue {
  background: #eaf2ff !important;
  color: #1d4ed8 !important;
  border-color: #c8ddff !important;
}

/* =========================================================
   CARD BODY: ACTIONS + REMARKS
========================================================= */

/*
   This improves the internal layout only.
   Actions gets a little more room than Remarks.
*/
.subCardBody {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.28fr) minmax(260px, 0.72fr) !important;
  gap: 18px !important;
  padding: 18px 22px 22px !important;
  background: #ffffff !important;
}

/* Panels */
.panel {
  min-width: 0 !important;
  background: #ffffff !important;
  border: 1px solid var(--uncst-border) !important;
  border-radius: 15px !important;
  padding: 18px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.025) !important;
}

.panelTitle {
  font-size: 17px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  color: #0f1f3d !important;
  margin: 0 0 14px !important;
}

/* Remarks text */
.mutedText {
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: #667085 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* =========================================================
   ACTION BUTTONS
========================================================= */

.actionWrap {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px 12px !important;
  margin-top: 10px !important;
}

/* Normalize buttons without changing their original colors */
a.revisebutton,
a.mtabutton,
a.ammendmentsbutton,
a.button4 {
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: normal !important;
  text-align: center !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.10) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
}

a.revisebutton:hover,
a.mtabutton:hover,
a.ammendmentsbutton:hover,
a.button4:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 7px 16px rgba(15, 23, 42, 0.14) !important;
  filter: brightness(1.02) !important;
}

/* Extra spacing between action groups */
.blockGap {
  margin-top: 14px !important;
}

/* =========================================================
   IMPORTANT DATES
========================================================= */

.datesBox {
  width: 100% !important;
  background: linear-gradient(180deg, #243f91 0%, #1f3782 100%) !important;
  color: #ffffff !important;
  padding: 16px 18px !important;
  border-radius: 14px !important;
  margin-top: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16) !important;
}

.datesHeader {
  font-size: 14px !important;
  font-weight: 700 !important;
  padding-bottom: 11px !important;
  margin-bottom: 11px !important;
  border-bottom: 1px solid rgba(255,255,255,0.28) !important;
}

.dateRow {
  display: flex !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 6px 0 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
}

.dateLabel {
  font-weight: 700 !important;
  color: rgba(255,255,255,0.92) !important;
}

.dateValue {
  font-weight: 700 !important;
  color: #ffffff !important;
  text-align: right !important;
}

/* =========================================================
   MTA / RENEWAL ADDON BLOCKS
========================================================= */

.addonBlock {
  border-top: 1px solid var(--uncst-border-soft) !important;
  padding: 18px 22px !important;
  background: #fbfcff !important;
}

.addonBlock + .addonBlock {
  border-top: 1px solid var(--uncst-border) !important;
}

.addonTitle {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #111827 !important;
  margin-bottom: 12px !important;
}

.addonRow {
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 0.8fr) !important;
  gap: 14px !important;
  align-items: center !important;
}

.addonLeft,
.addonMid,
.addonRight {
  min-width: 0 !important;
}

.addonMid,
.addonRight {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.addonLabel {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #374151 !important;
}

.addonMain {
  font-size: 15px !important;
  color: #111827 !important;
}

.addonActions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

/* Addon status badge */
.statusBadge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px 13px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: capitalize !important;
  border: 1px solid #d7dbe7 !important;
  background: #f6f8ff !important;
  color: #344054 !important;
  white-space: nowrap !important;
}

.statusBadge.approved {
  background: #eafaf1 !important;
  color: #067647 !important;
  border-color: #a7e3bd !important;
}

.statusBadge.pending {
  background: #fff5dc !important;
  color: #8a5b00 !important;
  border-color: #ffe1a3 !important;
}

.statusBadge.rejected {
  background: #fff1f1 !important;
  color: #b42318 !important;
  border-color: #ffc9c9 !important;
}

/* Addon remarks */
.remarksText {
  display: inline-block !important;
  max-width: 100% !important;
  padding: 7px 11px !important;
  border-radius: 10px !important;
  border: 1px solid var(--uncst-border-soft) !important;
  background: #ffffff !important;
  color: #667085 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  white-space: normal !important;       /* wrap onto multiple lines */
  overflow-wrap: break-word !important; /* break long unbroken strings */
  word-break: break-word !important;
}

/* Purple uploaded pill */
.pillPurple {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 13px !important;
  border-radius: 999px !important;
  background: #efe7ff !important;
  color: #5b21b6 !important;
  font-weight: 800 !important;
  font-size: 14px !important;
}

/* =========================================================
   PAGINATION
========================================================= */

.nav_purgination {
  width: 100% !important;
  margin-top: 18px !important;
}

div.pagination {
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
  padding: 8px 0 !important;
  margin: 0 !important;
}

div.pagination a,
div.pagination span.current,
div.pagination span.disabled {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

/* =========================================================
   MANUAL SUBMISSION TABLE IMPROVEMENT
========================================================= */

.tabledata {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: #ffffff !important;
  border: 1px solid var(--uncst-border) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

.tabledata td,
.tabledata th {
  padding: 12px 14px !important;
  vertical-align: top !important;
  border-color: var(--uncst-border-soft) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

.tabledata tr:nth-child(even) td {
  background: #fbfcff !important;
}

.tabledata .bgmain,
.tabledata .tabletitle,
.tabledata .tabletitle2 {
  background: #3E9EE6 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* =========================================================
   RESPONSIVE INNER SECTIONS
========================================================= */

@media screen and (max-width: 1250px) {
  .subCardBody {
    grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr) !important;
    gap: 16px !important;
    padding: 16px !important;
  }

  .panel {
    padding: 15px !important;
  }

  a.revisebutton,
  a.mtabutton,
  a.ammendmentsbutton,
  a.button4 {
    font-size: 14px !important;
    padding: 9px 14px !important;
  }
}

@media screen and (max-width: 980px) {
  #description.content2 {
    padding: 10px !important;
  }

  .subCardTop {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .subCardBody {
    grid-template-columns: 1fr !important;
  }

  .addonRow {
    grid-template-columns: 1fr !important;
  }

  .addonMid,
  .addonRight {
    flex-wrap: wrap !important;
  }
}

@media screen and (max-width: 640px) {
  .dashbord {
    padding: 18px !important;
  }

  .dashbord .name {
    font-size: 20px !important;
  }

  .dashbord .aff {
    font-size: 14px !important;
  }

  .contactd {
    padding: 10px !important;
  }

  .contactd > a.button4 {
    display: block !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
  }

  .subCardTop,
  .subCardBody,
  .addonBlock {
    padding: 14px !important;
  }

  .actionWrap,
  .addonActions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  a.revisebutton,
  a.mtabutton,
  a.ammendmentsbutton,
  a.button4 {
    width: 100% !important;
  }

  .dateRow {
    flex-direction: column !important;
    gap: 2px !important;
  }

  .dateValue {
    text-align: left !important;
  }
}

/* =========================================
   SECTION TITLE BAR ONLY
   Affects only:
   .submaterial > h3
========================================= */

.submaterial {
  width: 100%;
  margin: 0 0 24px 0;
  padding: 0;
  box-sizing: border-box;
}

/* Main title bar */
.submaterial > h3 {
  position: relative;
  margin: 0 0 18px 0;
  padding: 18px 24px 18px 34px;

  background: linear-gradient(135deg, #4aa3e6 0%, #2d8fdb 55%, #2179ca 100%);
  color: #ffffff;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.2px;

  border: none;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(33, 121, 202, 0.22);

  overflow: hidden;
  box-sizing: border-box;
}

/* Soft shine effect */
.submaterial > h3::after {
  content: "";
  position: absolute;
  top: 0;
  right: -60px;
  width: 140px;
  height: 100%;
  background: rgba(255, 255, 255, 0.10);
  transform: skewX(-25deg);
  pointer-events: none;
}

/* Left accent line */
.submaterial > h3::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 14px;
  width: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
}

/* Optional hover feel */
.submaterial > h3:hover {
  box-shadow: 0 10px 26px rgba(33, 121, 202, 0.28);
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

/* Responsive */
@media screen and (max-width: 900px) {
  .submaterial > h3 {
    font-size: 19px;
    padding: 16px 20px 16px 30px;
    border-radius: 12px;
  }

  .submaterial > h3::before {
    top: 12px;
    bottom: 12px;
    left: 12px;
    width: 5px;
  }
}

@media screen and (max-width: 600px) {
  .submaterial > h3 {
    font-size: 17px;
    padding: 14px 16px 14px 26px;
    border-radius: 10px;
  }

  .submaterial > h3::before {
    top: 11px;
    bottom: 11px;
    left: 10px;
    width: 4px;
  }
}

/* =========================================================
   COMPACT WELCOME PROFILE CARD
========================================================= */

.dashbord {
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;

  background:
    radial-gradient(circle at top right, rgba(55, 156, 227, 0.10), transparent 220px),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;

  border: 1px solid #dfe7f2 !important;
  border-radius: 14px !important;

  padding: 18px 22px !important;
  margin: 0 0 18px 0 !important;

  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06) !important;
  box-sizing: border-box !important;
}

.dashbord::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 4px;
  height: calc(100% - 36px);
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, #379ce3 0%, #2f3696 100%);
}

.dashbord-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #edf1f7;
}

.dashbord-avatar {
  width: 42px;
  height: 42px;
  min-width: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;
  background: linear-gradient(135deg, #379ce3 0%, #2f3696 100%);
  color: #ffffff;

  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.03em;

  box-shadow: 0 5px 12px rgba(47, 54, 150, 0.18);
}

.dashbord-title-wrap {
  min-width: 0;
}

.dashbord .name {
  margin: 0 !important;
  padding: 0 !important;

  color: #1f2937 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 21px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

.dashbord-subtitle {
  margin-top: 2px;
  color: #667085;
  font-size: 12px;
  font-weight: 600;
}

.dashbord-details {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 10px;
}

.dashbord .aff {
  display: grid !important;
  grid-template-columns: 145px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;

  margin: 0 !important;
  padding: 8px 10px !important;

  background: rgba(246, 248, 252, 0.9) !important;
  border: 1px solid #edf1f7 !important;
  border-radius: 9px !important;

  box-sizing: border-box !important;
  min-width: 0 !important;
}

.dashbord .aff:hover {
  background: #f1f7ff !important;
  border-color: #d8eaff !important;
}

.aff-label {
  color: #53657d !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

.aff-value {
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* Make organisation rows span full width because labels/values are longer */
.dashbord .aff:nth-child(1),
.dashbord .aff:nth-child(2),
.dashbord .aff:nth-child(3),
.dashbord .aff:nth-child(4),
.dashbord .aff:nth-child(5) {
  grid-column: 1 / -1;
  grid-template-columns: 190px minmax(0, 1fr) !important;
}

/* Responsive */
@media screen and (max-width: 900px) {
  .dashbord-details {
    grid-template-columns: 1fr;
  }

  .dashbord .aff {
    grid-template-columns: 140px minmax(0, 1fr) !important;
  }
  .dashbord .aff:nth-child(1),
  .dashbord .aff:nth-child(2),
  .dashbord .aff:nth-child(3),
  .dashbord .aff:nth-child(4),
  .dashbord .aff:nth-child(5) {
    grid-template-columns: 140px minmax(0, 1fr) !important;
  }
}

@media screen and (max-width: 600px) {
  .dashbord {
    padding: 16px !important;
    border-radius: 12px !important;
  }

  .dashbord-header {
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }

  .dashbord-avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 10px;
    font-size: 14px;
  }

  .dashbord .name {
    font-size: 18px !important;
  }

  .dashbord-subtitle {
    font-size: 11px;
  }

  .dashbord .aff,
  .dashbord .aff:nth-child(1),
  .dashbord .aff:nth-child(2),
  .dashbord .aff:nth-child(3),
  .dashbord .aff:nth-child(4),
  .dashbord .aff:nth-child(5) {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
    padding: 8px 9px !important;
  }

  .aff-label {
    font-size: 12px !important;
  }

  .aff-value {
    font-size: 13px !important;
  }
}

/* Smaller rounded profile container only */
#header .profile-box .profile {
  width: 300px !important;
  min-height: 64px !important;
  border-radius: 32px !important;
  overflow: hidden !important;

  background: linear-gradient(135deg, #3046d8 0%, #4960ff 45%, #2c3fb8 100%) !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

#header .profile-box .section {
  padding: 10px 16px !important;
  gap: 12px !important;
}

#header .profile-box .section img {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 50% !important;
}

#header .profile-box .text-box span {
  font-size: 13px !important;
  line-height: 1.1 !important;
}

#header .profile-box .opener {
  width: 52px !important;
  min-width: 52px !important;
  background: rgba(0, 0, 0, 0.10) !important;
}

#header .profile-box .opener::after {
  border-left: 8px solid transparent !important;
  border-right: 8px solid transparent !important;
  border-top: 10px solid #ffffff !important;
}

/* ManualSubmission page table only */
.contactd .applyf .tabledata {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  margin: 18px 0;
  font-family: Arial, sans-serif;
}

/* Header cells */
.contactd .applyf .tabledata .bgmain,
.contactd .applyf .tabledata .tabletitle,
.contactd .applyf .tabledata .tabletitle2 {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: none;
}

/* Body cells */
.contactd .applyf .tabledata .displayinner,
.contactd .applyf .tabledata .displayinner2 {
  padding: 14px 16px;
  font-size: 14px;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
  background: #ffffff;
}

/* Zebra rows */
.contactd .applyf .tabledata tr:nth-child(even) .displayinner,
.contactd .applyf .tabledata tr:nth-child(even) .displayinner2 {
  background: #f9fafb;
}

/* Hover row */
.contactd .applyf .tabledata tr:hover .displayinner,
.contactd .applyf .tabledata tr:hover .displayinner2 {
  background: #eef4ff;
}

/* Status badges inside this table only */
.contactd .applyf .tabledata .scheduledmm,
.contactd .applyf .tabledata .approvedmm,
.contactd .applyf .tabledata .rejectedmm,
.contactd .applyf .tabledata .rejectedmmr {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

/* Status colors */
.contactd .applyf .tabledata .scheduledmm {
  background: #dbeafe;
  color: #1d4ed8;
}

.contactd .applyf .tabledata .approvedmm {
  background: #dcfce7;
  color: #166534;
}

.contactd .applyf .tabledata .approvedmm a {
  color: #166534 !important;
  text-decoration: none;
}

.contactd .applyf .tabledata .rejectedmm,
.contactd .applyf .tabledata .rejectedmmr {
  background: #fee2e2;
  color: #991b1b;
}

/* Buttons inside this page only */
.contactd .applyf .applyfbuttonmanual,
.contactd .applyf .applyfbuttonmanualmm {
  border: none;
  border-radius: 8px;
  background: #2563eb;
  color: #ffffff !important;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.contactd .applyf .applyfbuttonmanual:hover,
.contactd .applyf .applyfbuttonmanualmm:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

/* Pagination for this function only */
.contactd .applyf .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 16px;
}

.contactd .applyf .pagination a,
.contactd .applyf .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.contactd .applyf .pagination a {
  background: #ffffff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.contactd .applyf .pagination a:hover {
  background: #2563eb;
  color: #ffffff;
}

.contactd .applyf .pagination .current {
  background: #2563eb;
  color: #ffffff;
  border: 1px solid #2563eb;
}

.contactd .applyf .pagination .disabled {
  background: #f3f4f6;
  color: #9ca3af;
  border: 1px solid #e5e7eb;
}

/* Mobile */
@media (max-width: 768px) {
  .contactd .applyf {
    overflow-x: auto;
  }

  .contactd .applyf .tabledata {
    min-width: 760px;
  }

  .contactd .applyf .tabledata .bgmain,
  .contactd .applyf .tabledata .tabletitle,
  .contactd .applyf .tabledata .tabletitle2,
  .contactd .applyf .tabledata .displayinner,
  .contactd .applyf .tabledata .displayinner2 {
    padding: 11px 12px;
    font-size: 13px;
  }

  .contactd .applyf .pagination {
    justify-content: flex-start;
  }
}
/* Download button inside approved/status box */
.contactd .applyf .tabledata .approvedmm a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  padding: 10px 16px;
  border-radius: 10px;
  background: #f59e0b; /* orange */
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  white-space: normal;
  word-break: keep-all;
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.25);
  transition: background 0.2s ease, transform 0.2s ease;
}

.contactd .applyf .tabledata .approvedmm a:hover {
  background: #d97706;
  transform: translateY(-1px);
}

/* Action/status cell spacing */
.contactd .applyf .tabledata td:has(.approvedmm),
.contactd .applyf .tabledata td:has(.scheduledmm) {
  padding: 12px 14px !important;
}

/* Remove pale green background behind Download button only */
.contactd .applyf .tabledata .approvedmm:has(a) {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Download Approval button */
.contactd .applyf .tabledata .approvedmm:has(a) a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  min-width: 135px;
  box-sizing: border-box;
  padding: 11px 14px;
  border-radius: 10px;
  background: #f59e0b;
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none !important;
  white-space: normal;
  box-shadow: 0 6px 14px rgba(245, 158, 11, 0.22);
}

.contactd .applyf .tabledata .approvedmm:has(a) a:hover {
  background: #d97706;
  transform: translateY(-1px);
}

/* View Submission button */
.contactd .applyf .tabledata .scheduledmm a,
.contactd .applyf .tabledata a[href*="submission"],
.contactd .applyf .tabledata a[href*="Submission"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  min-width: 135px;
  box-sizing: border-box;
  padding: 11px 14px;
  border-radius: 10px;
  background: #2563eb;
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none !important;
  white-space: normal;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.22);
}

.contactd .applyf .tabledata .scheduledmm a:hover,
.contactd .applyf .tabledata a[href*="submission"]:hover,
.contactd .applyf .tabledata a[href*="Submission"]:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

/* Global style for every table in research  */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  margin: 18px 0;
  font-family: Arial, sans-serif;
}

table th,
table .bgmain,
table .tabletitle,
table .tabletitle2 {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: none;
}

table td,
table .displayinner,
table .displayinner2 {
  padding: 14px 16px;
  font-size: 14px;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
}

table tr:nth-child(even) td {
  background: #f9fafb;
}

table tr:hover td {
  background: #eef4ff;
}

table tr:last-child td {
  border-bottom: none;
}

@media (max-width: 768px) {
  table {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    border-radius: 10px;
  }

  table th,
  table td,
  table .bgmain,
  table .tabletitle,
  table .tabletitle2,
  table .displayinner,
  table .displayinner2 {
    padding: 11px 12px;
    font-size: 13px;
  }

  table a,
  table button,
  table input[type="submit"] {
    max-width: 100%;
    white-space: normal;
  }
}

@media (max-width: 480px) {
  table th,
  table td,
  table .bgmain,
  table .tabletitle,
  table .tabletitle2,
  table .displayinner,
  table .displayinner2 {
    padding: 9px 10px;
    font-size: 12px;
  }
}

/* =========================================================
   FIX STATUS COVERING CONTENT ON SMALL SCREENS
========================================================= */

@media screen and (max-width: 1050px) {
  #homebanner {
    display: block !important;
    width: 100% !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  #submaterial {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    clear: both !important;
    margin: 0 0 18px 0 !important;
    position: relative !important;
  }

  #subright {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    clear: both !important;
    margin: 18px 0 0 0 !important;

    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;

    z-index: 1 !important;
  }

  #column-styler,
  .categorized-items,
  .sidetext {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    position: relative !important;
  }

  .profile-box2 {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;

    width: 100% !important;
    max-width: 220px !important;
    min-width: 0 !important;

    margin: 0 auto 16px auto !important;
    clear: both !important;
  }
}

/* Final mobile fix for tables with form fields */
@media (max-width: 768px) {
  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    border-radius: 12px;
  }

  table th,
  table td,
  table .bgmain,
  table .tabletitle,
  table .tabletitle2,
  table .displayinner,
  table .displayinner2 {
    padding: 10px 12px;
    font-size: 13px;
    white-space: nowrap;
  }

  table input,
  table select,
  table textarea {
    max-width: 150px;
    box-sizing: border-box;
    font-size: 14px;
  }

  table input[type="text"],
  table input[type="email"],
  table input[type="tel"],
  table input[type="number"],
  table input[type="date"],
  table select {
    width: 135px;
    min-width: 110px;
    padding: 9px 12px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
  }

  table textarea {
    width: 160px;
    min-height: 38px;
    padding: 9px 12px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
  }
}

@media (max-width: 480px) {
  table th,
  table td,
  table .bgmain,
  table .tabletitle,
  table .tabletitle2,
  table .displayinner,
  table .displayinner2 {
    padding: 9px 10px;
    font-size: 12px;
  }

  table input[type="text"],
  table input[type="email"],
  table input[type="tel"],
  table input[type="number"],
  table input[type="date"],
  table select {
    width: 120px;
  }

  table textarea {
    width: 140px;
  }
}

/* Global button style */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
a.button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  min-height: 38px;
  padding: 9px 16px;
  margin: 5px 4px;

  border: none;
  border-radius: 9px;

  background: #2563eb;
  color: #ffffff !important;

  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;

  cursor: pointer;
  box-sizing: border-box;

  box-shadow: 0 5px 14px rgba(37, 99, 235, 0.22);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
a.button:hover,
.button:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(37, 99, 235, 0.3);
}

button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
a.button:active,
.button:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(37, 99, 235, 0.2);
}

button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
.button:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  opacity: 0.75;
}
 /* Mobile button fix */
@media (max-width: 768px) {
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  a.button,
  .button {
    min-height: 36px;
    padding: 8px 13px;
    margin: 4px 3px;
    font-size: 13px;
    border-radius: 8px;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  a.button,
  .button {
    width: auto;
    max-width: 100%;
    font-size: 12.5px;
  }
}

/* Buttons inside tables */
table button,
table input[type="button"],
table input[type="submit"],
table input[type="reset"],
table a.button,
table .button {
  white-space: nowrap;
  margin: 4px;
}

/* =========================================================
   DASHBOARD ACTION BUTTONS - COMPACT SIZE
========================================================= */

.subCard .actionWrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 9px 10px !important;
  align-items: center !important;
}

/* Compact all action buttons inside dashboard cards */
.subCard .actionWrap a,
.subCard .blockGap.actionWrap a,
.subCard a.revisebutton,
.subCard a.mtabutton,
.subCard a.ammendmentsbutton,
.subCard a.button4 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: auto !important;
  max-width: 100% !important;
  min-height: 34px !important;

  padding: 7px 12px !important;
  margin: 0 !important;

  border-radius: 9px !important;

  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;

  text-align: center !important;
  text-decoration: none !important;
  white-space: normal !important;

  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.10) !important;
  box-sizing: border-box !important;
}

/* Slightly smaller hover */
.subCard .actionWrap a:hover,
.subCard .blockGap.actionWrap a:hover,
.subCard a.revisebutton:hover,
.subCard a.mtabutton:hover,
.subCard a.ammendmentsbutton:hover,
.subCard a.button4:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 13px rgba(15, 23, 42, 0.14) !important;
}

/* Make long labels wrap nicely instead of becoming huge */
.subCard a.mtabutton,
.subCard a.revisebutton,
.subCard a.ammendmentsbutton {
  max-width: 260px !important;
}

/* Download button can be slightly wider */
.subCard a.button4 {
  max-width: 280px !important;
}

/* =========================================================
   RIGHT SIDE UTILITY PANEL
   Keeps same position and arrangement
   Only improves the look
========================================================= */

.profile-box2 {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  border: 1px solid #d9e4f2 !important;
  border-radius: 18px !important;
  padding: 14px 12px !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08) !important;
  box-sizing: border-box !important;
}

/* Top image box */
.profile-box2 .roundedbox {
  background: #f5f9ff !important;
  border: 1px solid #d8e4f3 !important;
  border-radius: 14px !important;
  padding: 10px !important;
  margin: 0 0 12px 0 !important;
  text-align: center !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

/* Image inside */
.profile-box2 .roundedbox img {
  display: block !important;
  width: 100% !important;
  max-width: 145px !important;
  height: auto !important;
  margin: 0 auto !important;
  border-radius: 10px !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.10) !important;
}

/* Generic buttons/links inside the panel */
.profile-box2 a,
.profile-box2 button,
.profile-box2 input[type="button"],
.profile-box2 input[type="submit"] {
  display: block !important;
  width: 100% !important;
  margin: 0 0 10px 0 !important;
  padding: 11px 12px !important;

  background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%) !important;
  color: #0b55b5 !important;
  border: 1px solid #cfdced !important;
  border-radius: 10px !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;

  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.06) !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

/* Remove last margin */
.profile-box2 a:last-child,
.profile-box2 button:last-child,
.profile-box2 input[type="button"]:last-child,
.profile-box2 input[type="submit"]:last-child {
  margin-bottom: 0 !important;
}

/* Hover effect */
.profile-box2 a:hover,
.profile-box2 button:hover,
.profile-box2 input[type="button"]:hover,
.profile-box2 input[type="submit"]:hover {
  background: linear-gradient(180deg, #0d6ddb 0%, #0a57b3 100%) !important;
  color: #ffffff !important;
  border-color: #0a57b3 !important;
  box-shadow: 0 6px 14px rgba(13, 109, 219, 0.20) !important;
  transform: translateY(-1px) !important;
}

/* Active click feel */
.profile-box2 a:active,
.profile-box2 button:active,
.profile-box2 input[type="button"]:active,
.profile-box2 input[type="submit"]:active {
  transform: translateY(0) !important;
}

/* Optional: make logout stand out a bit */
.profile-box2 a[href*="logout"],
.profile-box2 button.logout,
.profile-box2 .logout {
  background: linear-gradient(180deg, #fff6f6 0%, #ffeaea 100%) !important;
  color: #c62828 !important;
  border-color: #f0c6c6 !important;
}

.profile-box2 a[href*="logout"]:hover,
.profile-box2 button.logout:hover,
.profile-box2 .logout:hover {
  background: linear-gradient(180deg, #e53935 0%, #c62828 100%) !important;
  color: #ffffff !important;
  border-color: #c62828 !important;
}

/* Small screens */
@media screen and (max-width: 900px) {
  .profile-box2 {
    border-radius: 14px !important;
    padding: 12px 10px !important;
  }

  .profile-box2 .roundedbox {
    border-radius: 12px !important;
    padding: 8px !important;
  }

  .profile-box2 a,
  .profile-box2 button,
  .profile-box2 input[type="button"],
  .profile-box2 input[type="submit"] {
    font-size: 12px !important;
    padding: 10px 10px !important;
  }
}

/* =========================================================
   ALIGN RIGHT UTILITY PANEL WITH OTHER TWO SECTIONS
========================================================= */

.profile-box2 {
  margin-top: 0 !important;
  transform: translateY(-24px) !important;
}

/* =========================================================
   SIMPLE FORM SECTION IMPROVEMENT
   Only container + rows
   Does NOT style fields or buttons
========================================================= */

.form-main {
  background: #ffffff !important;
  border: 1px solid #d7e4f2 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05) !important;
  box-sizing: border-box !important;
}

/* Keep table compact */
.form-main table {
  width: 100% !important;
  border-collapse: collapse !important;
}


/* Label column only */
.form-main table tr td:first-child {
  width: 40% !important;
  font-weight: 700 !important;
  color: #173b68 !important;
}

/* Input/content column only */
.form-main table tr td:last-child {
  width: 60% !important;
}

/* Keep row dividers neat */
.form-main table tr {
  border-bottom: 1px solid rgba(120, 145, 175, 0.25) !important;
}

/* Section headings inside form e.g. Attachments */
.form-main h5,
.form-main h4,
.form-main .section-title {
  margin: 16px 0 8px !important;
  color: #10233f !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

/* Mobile only: stack rows cleanly */
@media screen and (max-width: 800px) {
  .form-main {
    padding: 10px !important;
  }

  .form-main table,
  .form-main tbody,
  .form-main tr,
  .form-main td {
    display: block !important;
    width: 100% !important;
  }

}

.roundedboxfinal {
	-moz-border-radius: 14px;
	-webkit-border-radius: 14px;
	border-radius: 14px;
	background: #d90000 !important;
	border: 2px solid #a80000 !important;
	margin-bottom: 12px;
	margin-top: 12px;
	text-align: center;
	box-shadow: 0 8px 18px rgba(217,0,0,0.20);
	padding: 0 !important;
	overflow: hidden;
}

.roundedboxfinal a{
	display: block;
	background: #d90000 !important;
	color: #ffffff !important;
	padding: 12px 10px !important;
	font-size: 12px !important;
	font-weight: bold !important;
	line-height: 1.2;
	text-decoration: none !important;
	border-radius: 12px;
}

.roundedboxfinal a:hover{
	background: #c40000 !important;
	color: #ffffff !important;
}

.modern-attachments-wrap {
    margin-top: 18px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.modern-attachments-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 14px;
}

.modern-attachments-heading h3 {
    margin: 0;
    font-size: 20px;
    color: #111827;
    font-weight: 800;
}

.modern-attachments-heading p {
    margin: 6px 0 0;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.5;
}

.modern-required-badge,
.modern-new-badge {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.modern-required-note {
    margin-bottom: 16px;
    padding: 12px 14px;
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
}

.modern-attachment-card {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 14px;
}

.modern-attachment-card:hover {
    border-color: #c7d2fe;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.new-attachment-card {
    background: #ffffff;
    border: 1px dashed #93c5fd;
}

.modern-attachment-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}

.modern-attachment-title,
.modern-attachment-title-text {
    color: #1d4ed8;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
}

.modern-attachment-title:hover {
    text-decoration: underline;
}

.modern-attachment-subtitle {
    margin-top: 4px;
    color: #6b7280;
    font-size: 12px;
}

.modern-delete-link {
    color: #dc2626;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 8px 12px;
    font-weight: 700;
    text-decoration: none;
    font-size: 13px;
}

.modern-delete-link:hover {
    background: #fee2e2;
}

.modern-attachment-grid {
    display: grid;
    gap: 14px;
    margin-bottom: 14px;
}

.existing-grid,
.new-grid {
    grid-template-columns: 2fr 0.7fr 1fr 1fr;
}

.modern-field label {
    display: block;
    margin-bottom: 6px;
    color: #374151;
    font-size: 12px;
    font-weight: 700;
}

.modern-field input,
.modern-field select {
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 8px 11px;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
    outline: none;
}

.modern-field input:focus,
.modern-field select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.attachment-other {
    margin-top: 8px;
}

.modern-file-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: #ffffff;
    border: 2px dashed #cbd5e1;
    border-radius: 14px;
}

.modern-file-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.modern-file-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #e0ecff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.modern-file-info strong {
    display: block;
    max-width: 500px;
    color: #111827;
    font-size: 14px;
    margin-bottom: 3px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.modern-file-info span {
    color: #6b7280;
    font-size: 12px;
}

.modern-file-btn {
    position: relative;
    display: inline-block;
    background: #2563eb;
    color: #ffffff;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.modern-file-btn:hover {
    background: #1d4ed8;
}

.modern-hidden-file {
    position: absolute;
    left: -9999px;
}

@media (max-width: 900px) {
    .existing-grid,
    .new-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .modern-attachments-heading,
    .modern-attachment-top,
    .modern-file-box {
        flex-direction: column;
        align-items: stretch;
    }

    .existing-grid,
    .new-grid {
        grid-template-columns: 1fr;
    }

    .modern-file-btn,
    .modern-delete-link {
        text-align: center;
    }
}

.content h2 {
    margin: 0 0 18px 0;
    padding: 0;
    line-height: 1.35;
    font-size: 22px;
    font-weight: 700;
    color: #111827;
}

.content fieldset {
    margin-top: 12px;
    padding: 22px 18px 18px 18px;
    border: 1px solid #d7dce2;
    border-radius: 8px;
}

.content fieldset legend {
    display: block;
    padding: 0 8px;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #4f7fdc;
    line-height: 1.4;
}

[id^="toggle-icon-"] {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #111827 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    margin-right: 6px;
}

/* Fix table inputs showing values properly */
table input[type="text"],
table input[type="number"],
table input[type="email"],
table input[type="tel"],
table select,
table textarea {
  color: #111827 !important;
  background: #ffffff !important;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 600;
}

/* Normal inputs inside tables */
table td input[type="text"],
table td input[type="number"] {
  width: 100%;
  min-width: 62px;
  height: 42px;
  padding: 8px 10px;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  text-align: center;
}

/* Make total fields wider */
table td input[readonly],
table td input[disabled] {
  min-width: 180px;
  color: #000000 !important;
  background: #ffffff !important;
  opacity: 1 !important;
  font-weight: 700;
}

/* Do not hide values in narrow year columns */
table td {
  overflow: visible;
}

/* Keep inputs readable on mobile */
@media (max-width: 768px) {
  table td input[type="text"],
  table td input[type="number"] {
    width: 100%;
    min-width: 70px;
    max-width: none;
    font-size: 13px;
    padding: 8px 9px;
  }

  table td input[readonly],
  table td input[disabled] {
    min-width: 160px;
  }
}

.modal {
    position: fixed !important;
    z-index: 999999 !important;
}
.modal-backdrop {
    z-index: 999998 !important;
}

/* Personnel-involved table: Status column holds RS6 links/messages, give it most of the width */
#rounded-corner.people-table{ table-layout:fixed; width:100%; }
#rounded-corner.people-table td{ word-break:break-word; overflow-wrap:anywhere; }
#rounded-corner.people-table th{ white-space:nowrap; }
#rounded-corner.people-table th:nth-child(1),
#rounded-corner.people-table td:nth-child(1){ width:3%; }
#rounded-corner.people-table th:nth-child(2),
#rounded-corner.people-table td:nth-child(2){ width:16%; }
#rounded-corner.people-table th:nth-child(3),
#rounded-corner.people-table td:nth-child(3){ width:16%; }
#rounded-corner.people-table th:nth-child(4),
#rounded-corner.people-table td:nth-child(4){ width:12%; }
#rounded-corner.people-table th:nth-child(5),
#rounded-corner.people-table td:nth-child(5){ width:41%; }
#rounded-corner.people-table th:nth-child(6),
#rounded-corner.people-table td:nth-child(6),
#rounded-corner.people-table th:nth-child(7),
#rounded-corner.people-table td:nth-child(7){ width:6%; }

/* Estimated-cost project list (Project title | Edit | Delete) — balance columns, align action buttons */
#rounded-corner.estcost-projlist{ table-layout:fixed; width:100%; }
#rounded-corner.estcost-projlist th,
#rounded-corner.estcost-projlist td{ vertical-align:middle; }
#rounded-corner.estcost-projlist th:nth-child(1),
#rounded-corner.estcost-projlist td:nth-child(1){ width:64%; text-align:left; }
#rounded-corner.estcost-projlist th:nth-child(2),
#rounded-corner.estcost-projlist td:nth-child(2){ width:18%; text-align:left; }
#rounded-corner.estcost-projlist th:nth-child(3),
#rounded-corner.estcost-projlist td:nth-child(3){ width:18%; text-align:left; }