﻿/* CSS for RFP */
:root {
        --text-color: #1a252f;
        --card-border: #cbd5e1;
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
        --radius: 8px;
    }

    /* Screen Reader Only */
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* Container (Max-width 980px) */
    .rfp-container {
        max-width: 980px;
        margin: 24px auto;
        padding: 0 16px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
        color: var(--text-color);
        box-sizing: border-box;
    }

 
    .rfp-header {
        color: #ffffff;
        padding: 30px;
        border-radius: var(--radius);
        margin-bottom: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    }

    .rfp-header h1 {
        margin: 0;
        font-size: 30px;
        font-weight: 700;
        letter-spacing: -0.3px;
        line-height: 1.2;
    }


    .rfp-header .rfp-date {
        font-size: 16px;
        font-weight: 600;
        color: #ffffff;
        background-color: rgba(0, 0, 0, 0.35);
        padding: 6px 14px;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        white-space: nowrap;
    }

    /* Section Styles */
    .rfp-section {
        background-color: #ffffff;
        border: 1px solid var(--card-border);
        border-radius: var(--radius);
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: var(--shadow-sm);
    }

    .rfp-section-title {
        font-size: 18px;
        font-weight: 700;
        color: var(--text-color);
        margin: 0 0 16px 0;
        padding-bottom: 8px;
        border-bottom: 2px solid #148f77;
    }

    /* File List Layout */
    .file-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .file-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        background-color: #f8fafc;
        border: 1px solid var(--card-border);
        border-radius: 6px;
        transition: border-color 0.2s ease, background-color 0.2s ease;
    }

    .file-item:hover {
        background-color: #ffffff;
        border-color: #148f77;
    }

    .file-info {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 600;
        font-size: 15px;
    }

    /* SVG PDF Icon */
    .pdf-icon {
        width: 22px;
        height: 22px;
        fill: #c53030; 
        flex-shrink: 0;
    }

    /* WCAG 2.4.13 Focus Appearance & 1.4.3 Contrast Button */
    .btn-download {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        font-size: 14px;
        font-weight: 700;
        color: #0e6251;
        background-color: #e8f8f5;
        border: 1px solid #0e6251;
        border-radius: 6px;
        text-decoration: none;
        white-space: nowrap;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .btn-download:hover {
        background-color: #0e6251;
        color: #ffffff;
        text-decoration: none;
    }


    .btn-download:focus-visible {
        outline: 3px solid #000000;
        outline-offset: 2px;
    }

    .btn-download .arrow-icon {
        width: 14px;
        height: 14px;
        fill: currentColor;
    }

/* ----------------------------------------------------
       Storage Storage Grid & Image Thumbnails
    ---------------------------------------------------- */
    .storage-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 16px;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .storage-card {
        background-color: #f8fafc;
        border: 1px solid var(--card-border);
        border-radius: 6px;
        padding: 14px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 10px;
    }

    .storage-card-title {
        font-weight: 700;
        font-size: 15px;
        color: var(--text-color);
    }

    .photo-list {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .photo-thumb-link {
        display: inline-block;
        border-radius: 6px;
        overflow: hidden;
        border: 2px solid transparent;
        transition: border-color 0.2s ease, transform 0.2s ease;
    }

    .photo-thumb-link:hover {
        border-color: var(--primary-color);
        transform: scale(1.03);
    }

    .photo-thumb-link:focus-visible {
        outline: 3px solid #000000;
        outline-offset: 2px;
    }

    .photo-list img {
        width: 100px;
        height: 80px;
        object-fit: cover;
        display: block;
        border-radius: 4px;
    }

    /* Lightbox Modal Styles */
    .modal {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.85);
        justify-content: center;
        align-items: center;
        z-index: 1000;
        padding: 20px;
    }

    .modal:target {
        display: flex;
    }

    .modal img {
        max-width: 90%;
        max-height: 85vh;
        border-radius: 8px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    }

    .close {
        position: absolute;
        top: 20px;
        right: 30px;
        color: #ffffff;
        font-size: 36px;
        font-weight: bold;
        text-decoration: none;
        line-height: 1;
        padding: 8px 12px;
    }

    .close:hover,
    .close:focus-visible {
        color: #e2e8f0;
        outline: 2px solid #ffffff;
    }








	/*  DON' USE IT ANYMORE OLD STYLE */
	
	body
	{
	  width:            100%;
	  height:           100%;
	  margin:           0.0em;
	  padding:          0.0em;
	  font-family:      Arial, sans-serif;
	  font-size:        12pt;
	  background-color:#f8f8f8;
	  border:           none;
	}
	
		/* GENERAL */
	
   .clear{
		clear:both;
	}

	div.floatLeft{
		float:left;
	}

	div.floatRight{
		float:right;
	}
		ul.lineHeight50{
	  line-height:50px;

	}
	

	.grayFont{
	   color:gray;
		font-size:14pt;
	}

   .smallerFont{
	   font-size:14pt;
	}

	.greenTitle{
       margin-top:.5em;
       color:darkgreen;
	}
	
    .textfield{
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		border:1px solid #808080;
		padding: 10px;
		margin:0px;
		-webkit-transition: all 0.30s ease-in-out;
		-moz-transition: all 0.30s ease-in-out;
		-ms-transition: all 0.30s ease-in-out;
		-o-transition: all 0.30s ease-in-out;
		outline: none;  
		width:190px;
		font-size:14pt;
    }

    .textfield:focus {
	   -moz-box-shadow: 0 0 8px #88D5E9;
		-webkit-box-shadow: 0 0 8px #88D5E9;
		box-shadow: 0 0 8px #88D5E9;
		border: 1px solid #88D5E9;
		background-color:antiquewhite;
	}
	.button_default, .button_default:visited {
		display: inline-block;
		overflow: hidden;
		padding: 10px 30px;
		background-color: #003399;
		border: 0px solid #000000;
		border-radius: 2px;
		text-decoration: none;
		color: #fff;
		text-align: center;
		box-shadow: 0 0px #da9622;
		font-weight: bold;
		font-size:14pt;
	}
	.button_default:hover
	{
	  text-decoration:  none;
	  color:            #FFFFFF;
	  background-color: #85C1E9;
	}	

   .tooltip{
           
        font-size:12pt;
        font-weight:normal;
        color:orangered;
    }



	div.outerFrame940{

	  width:            940px;
	  height:           100%;
	  margin:           auto;
	  padding:           0;
	  border:           none;
	}

	div.innerBoxWithBorder940{

		  width:            940px;
		  height:           100%;
		  margin:           auto;
		  padding:          50px;
		  border:           none;
	}
	
	/* RFP sites style*/
	 .circleBg2
	{
		border-radius: 50%;
		width: 120px;
		height: 120px; 
		-moz-border-radius: 50%; 
		-webkit-border-radius: 50%; 
		border:3px solid #78A22F;
		background-color:#fff;
		behavior:         url(/css/PIE.htc);
		margin:auto;
		text-align:center;
	}

	div.titleBox{
          
		width:100%;

		padding: 30px 0;
		color:#fff;
		font-size:25pt;
		font-weight:bold;
		margin-top: .5em;
		text-align:center;
		line-height:40px;
	}

	.bigFont18{

		font-size:16pt;
	}

	div.linkBox{
       padding:30px 50px;
       font-size:16pt;
    
       background-color:#fff;
       margin:1em 0;
	}


	.linkBox a, .linkBox a:visited{
		color:black;
		text-decoration:underline;
	}
	.linkBox a:hover{
	  color:blue;
	}


    hr.style1 {
		border-top: 1px solid #999;
		margin:1em 0;
	}
	
	/* list for RFP sites */
	ul
	{
	  margin-top: 0.0em;
	  list-style:square;
	}
	
	li{
		font-size:14pt;
		font-weight:bold;
	}

	ul.lineHeight30{
		 line-height:30px;

	}
	ul.topList{
		list-style-type:none;background-color:lightslategray;
		font-size:14pt;
		font-weight:bold;
		color:white;
		padding:4px 0px 0px 30px;
		border-radius:2px;
	}

	ul.topList > li > ul.subList{
		list-style-type:none;background-color:white;margin-left:-3em;padding-left: 4em;padding: .5em 0 .5em 4em;color:black;
	}



/* list style big number */

	.faq {
		counter-reset: my-badass-counter;
	}
	.faq dt {
		position: relative;
		font-weight:bold;
		font-size:14pt;
		padding: 4px 0 10px 0;
	}
	.faq dt:before {
		content: counter(my-badass-counter);
		counter-increment: my-badass-counter;
		position: absolute;
		left: 0;
		top: 0;
		font: bold 50px/1 Sans-Serif;
	}
	.faq dd {
		margin: 0 0 40px 0;
	}	
	.faq dt, .faq dd {
		padding-left: 60px;
		line-height:16pt;
	}
	


/* LOG IN BOX */
    div.titleInTitleBox{
	   text-align:center;font-weight:bold;border-bottom:1px solid #ccc;font-size:16pt;
		margin-bottom:1em;
	}

	div.loginBox{
	   display:table;
	   width:700px;
	   margin:auto;
	   font-size:16pt;
	}
	div.loginBox > div.row{
	   
	   display:table-row;
	}
	div.loginBox > div.row > div.leftColumn{
	   display:table-cell;
	   text-align:right;
	   width:300px;
	   padding-right:10px;
	   padding-bottom:5px;
	}
	div.loginBox > div.row > div.rightColumn{
	   display:table-cell;
	   padding-bottom:5px;
	}

	.errorMessage{
	   text-align:center;
	   font-weight:bold;
	   color:orangered;
	   font-size:14pt;
	   border:1px solid orangered;
	   padding:10px;
	   margin-bottom:10px;
	}
	

	
	
	
	
	/* START - DON' USE IT ANYMORE OLD STYLE */

	#dimBackgroundPanel
	{
	  position:         fixed;
	  top:              0px;
	  left:             0px;
	  width:            100%;
	  height:           100%;
	  background-color: #000000;
	  opacity:          0.5;
	  filter:           alpha(opacity=50);
	  z-index:          10000;
	}

	div.popupDiv
	{
	  position: absolute;
	  width:    100%;
	  left:     -2048px;
	  z-index:  10001;
	}

	div.contentBox
	{
	  color:            #000000;
	  background-color: #EEEEEE;
	  border:           1px solid #000000;
	  border-radius:    8px;
	  box-shadow:       -4px 4px 4px #000000;
	  behavior:         url(/css/PIE.htc);
	}

	div.linkButton
	{
	  display:          inline-block;
	  width:            auto;
	  text-decoration:  none;
	  color:            #000000;
	  background-color: #EEEEEE;
	  border:           1px solid #000000;
	  border-radius:    8px;
	  box-shadow:       -4px 4px 4px #000000;
	  cursor:           pointer;
	  behavior:         url(/css/PIE.htc);
	}

	div.linkButton:hover
	{
	  text-decoration:  underline;
	  color:            #FFFFFF;
	  background-color: #003399;
	}

	table.displayTable
	{
	  margin:         1.0em auto;
	  border-spacing: 3px;
	  empty-cells:    show;
	}

	table.displayTable > tbody > tr > th
	{
	  padding:          0.2em 1.0em;
	  font-weight:      bold;
	  color:            #000000;
	  background-color: #FFFFFF;
	  border:           1px solid #000000;
	  border-radius:    6px;
	  behavior:         url(/css/PIE.htc);
	}

	table.displayTable > tbody > tr > td
	{
	  padding:          0.2em 1.0em;
	  color:            #000000;
	  background-color: #FFFFFF;
	  border-radius:    6px;
	  behavior:         url(/css/PIE.htc);
	}

	table.layoutTable
	{
	  border-collapse: collapse;
	  border-spacing:  0px;
	}

	table.layoutTable > tbody > tr > td
	{
	  margin:         0px;
	  padding:        0px;
	}
	
/* END - DON' USE IT ANYMORE OLD STYLE */

