@charset "UTF-8";
/* CSS Document */

/* ALL COVER SHEETS */

:root {
    --bordergrey: #ccc;
    --inputbkgnd: #F3F3F3;
    --mainblue: #013A81;
    --textcolor: #333;    
    --secblue: #7587AD;
    --whiteblue: #C1CBE0;
    --tooltipcolor: #485A7F;
    --warnred: #B00002;
    --warnorange: #E77E03;
    --warnviolet: #8338BD;
} 

.main {
    max-width: 1300px;
}
td.content table:first-of-type { 
    border-color: white; 
    max-width: 1100px;
} 
td.content table tr, td.content .data-c tr {
    background-color: white;
}
td.content table tr:last-of-type { 
    border-bottom: none;
}      
td.content table td {
    width: 120px;
    vertical-align:top;
}
td.content table:first-of-type td {
    padding: 0 2px; 
    margin: 0; 
    width: 120px;
    vertical-align: top;
}    
td.content table td input {
    max-width: 200px;
} 
td.content table td input#s1, td.content table td input#s2 {
    max-width: 50px;
}
td.content table input[type=text], td.content table input[type=email], td.content table input[type=number] {
    padding: 13px 5px; 
    margin-bottom: 0
} 
td.content table .styled-select  {
    padding: 0.5px 5px; 
    margin-bottom: 0
}  
div + label {
  display:block;
}
#PIname, #PIemail, #PIphone, #progtitle {
    padding: 10px;
}   
#abstract {
    overflow: hidden;
    resize: vertical;
    max-height: 300px;
}
#tel, #format {
    width: 200px;
    margin: 0 auto; 
    text-align: center;
}  
select, option {
    text-align: -webkit-center;    
    text-align: center; 
    text-align-last: center;    
}       
input[type=date] { 
    width: 170px; 
    padding: 10px 5px; 
    margin-bottom: 0
}

.wrapper-left, .wrapper-right {
    display: inline-block; vertical-align: top; min-width: 49.7%; max-width: 49.7%; padding: 0 10px 0 0; 
}
.wrapper-right {
    padding: 0 0 0 10px;
}
.wrapper-middle {
    display: table;
    vertical-align: top;  
    width: 100%; 
}
button {
    background-color: var(--secblue); 
    color: white;
    font-size: x-small;
}
button:hover {
    background-color: var(--mainblue); 
    color: white;   
}
input[type=button], button.print {
    background-color: var(--mainblue);
    display:block;
    color: white;
    padding: 12px 20px;
    margin: 12px auto;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    font-size: small;
}
input[type=button]:hover, button.print:hover {
    background-color: var(--secblue);
}
.highlight, input[type=text].highlight, input[type=email].highlight, 
input.highlight, input[type=button].highlight, 
td.content table input[type=text].highlight,
td.content table input[type=email].highlight {
    border: 1px solid var(--warnred);
    border-color: var(--warnred);
}
.tooltip {
    position: relative;
    cursor: help;
    color: var(--tooltipcolor);
    //text-decoration: underline dashed var(--secblue); /* leave these for future reference */
    //text-decoration-thickness: 1px;
    //text-underline-offset: 2px;    
}
.tooltip sup {
    line-height: 8px;
    margin: -3px 0 0 2px;
    font-size: x-small;
//    text-decoration: underline dashed #F3F3F3; /* leave these for future reference */
//    text-decoration-thickness: 2px;
//    text-decoration-color: #F3F3F3 important!;
}    

/*.tooltip:after{
    content: "\f059";
    line-height: 8px;
    font-size: small;
    padding: 0;
    margin: -3px 0 0 2px;
    font-family: "fontawesome";
    vertical-align: super;
    color: var(--secblue);
}*/
.tooltip .tooltiptext {
    visibility: hidden;
    width: 260px;
    background-color: var(--whiteblue); 
    color: var(--textcolor);   
    font-weight: normal;
    text-align: center;
    font-size: small;
    border-radius: 4px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    bottom: 120%;
    left: 50%;
    margin-left: -130px;
    box-shadow: 0px 0px 1px 0px #444;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--whiteblue) transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

#widthCheck {
    background: rgba(0,0,0,0.75); 
    width:      100%;
    height:     100%; 
    z-index:    10;
    top:        0; 
    left:       0; 
    position:   fixed;
    color: white;
    font-size: xx-large;
    text-align: center;
    display: none;
}
#widthCheck span  {  
    position: absolute;
    top: 50%;
    width:100%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);

}




/* DATE SPECIFIC COVER SHEET */

#data {
    min-width:100%;
}

#data td input {
    max-width: 100%;
}
tr:nth-child(2) > th {   /* ==== SEE IF THIS CAUSES ISSUES IN NON DS FORMS ====*/
	border-bottom: none;
	border-top: none;
    background-color: transparent;
    padding: 14px 0 10px 0;
} 
#data td:first-of-type  {
    width: 30px;    
    vertical-align: middle;
}
#data td:nth-child(2){
    width:10px;
}     
#data td:nth-child(3){
    width:160px;
}
#data td:nth-child(4),#data td:nth-child(8) {
    width:40px;
}
td {
    vertical-align: middle;
}
#UTC, #edtUTC, #MJD, #edtMJD {
    display: none;
}
#UTC, #JDT, #MJD { 
    width:220px;
    min-width: 200px;
    vertical-align:top;
}    
#JDT input {
    width:100%;
}    
#UTC #month {
    width: 29%;
}
#UTC #year {
    width: 17%;    
} 
#tel, #format, #epoch {
    display: table-cell;
    padding: 0 4.2%;
    width: 200px;
    margin: 0 30px; 
    text-align: center;
    vertical-align: bottom;
} 
#megroup, #group {
    display: none;
}  
#priority, #Night {
    width: 70px;
}
#inst {
    width: 170px;
}
#p60inst, #p48inst {
    display: none;
}
#repeatrow, .hiderow  {
    display:none;
}
#chars {
    text-align: right; 
    font-size: 10pt; 
    font-style: italic; 
    margin-top: -20px; 
    padding: 0; 
    color: #666666;
}
.tooltip.rangewarning,.tooltip.datewarning {
    color: var(--warnred); 
}
.tooltip.daylightwarning {
    color: var(--warnorange);
}
.tooltip.twilightwarning {
    color: var(--warnviolet);
}         
.tooltip.rangewarning:after{
    content: "  \f071";
    font-family: FontAwesome;
    white-space: pre;
    font-style: normal;
}
.tooltip.datewarning:after{
    content: "  \f273";
    font-family: "Font Awesome 5 Free";
    white-space: pre;
    font-weight: 900;
    font-style: normal;
}    
.tooltip.daylightwarning:after, .tooltip.twilightwarning:after {
    content: "  \f185";
    font-family: "Font Awesome 5 Free";
    white-space: pre;
    font-weight: 900;
    font-style: normal;
}        
.tooltip.twilightwarning:after {
    -webkit-clip-path: inset(0% 0% 40% 0%);
    clip-path: inset(0% 0% 40% 0%);
    vertical-align: sub;
    line-height: 4px;
}    
.tooltiptext.rangewarning:before, .tooltiptext.datewarning:before, .tooltiptext.daylightwarning:before, .tooltiptext.twilightwarning:before {
    content: "OUT OF SEMESTER RANGE\a\a";
    color: var(--warnred);
    font-weight: bold;
    white-space: pre;  
}    
.tooltiptext.datewarning:before {
    content: "BLOCKED-OUT DATE\a\a";
}    
.tooltiptext.daylightwarning:before {
    content: "DAYTIME EVENT\a\a";
    color: var(--warnorange);
}
.tooltiptext.twilightwarning:before {
    content: "TWILIGHT EVENT\a\a";
    color: var(--warnviolet);
} 





/* CToO COVER SHEET */

td.content #toor td:nth-child(2) {
    vertical-align: middle;
}

td.content #toor td:nth-child(1) .styled-select, td.content #toor td:nth-child(2) .styled-select {
    max-width:60px;
    display: inline-block;
    vertical-align: middle;
}
td.content #toor td:nth-child(3) {
    width:inherit;
}
td.content #toor td:nth-child(3) input {
    max-width:inherit;
}     
td.content #toor td:nth-child(4) {
    width:500px;
}
td.content #toor td:nth-child(4) input, td.content #toor td:nth-child(4) .styled-select {
    max-width:500px;
} 

#toor input {max-width: 70px}
 
#collaborators {width:50%;}





/* C200 COVER SHEET */

#who input {
    width:180px;
    max-width:inherit;
}
#who tr:nth-child(2) > th {   /* ==== SEE IF THIS CAUSES ISSUES IN NON DS FORMS ====*/
    padding: 5px;
}
#who #PIemail1, #who #LOemail {
    width:300px;
}
#c200 #collaborators, #c200 #observers {
    width:98%;
}
#collaborators input, #observers input  {
    width: 100%;
    max-width: inherit;
}
#semester {
    width:166px
}
#semester .styled-select {
    max-width:46px;
    display: inline-block;
    vertical-align: middle;
}
#start {
    width: 160px;
}
#status {
    width: 220px;
}
#instsel1, #instsel2 {width: 100%;} 
#instsel1 td, #instsel2 td {
    max-width: calc(100% / 17); /*original for 7 runs*/
    width: calc(100% / 19); /* with 8 runs */
    font-size: small; 
    vertical-align:middle;
}
#instsel1 input[type=text], #instsel2 input[type=text] {padding: 14px 5px; margin-bottom: 0}
#instsel1 select, #instsel2 select { font-size: small;}

#instsel1 #cassinst, #instsel1 #primeinst, #instsel2 #cassinst, #instsel2 #primeinst {
    min-width: 72px;
    max-width: 90px;
}

#instsel1 td:nth-of-type(4) .styled-select, #instsel2 td:nth-of-type(4) .styled-select {background-color: #DBDBDB;}
#dark, #dark div {display: inline-block; text-align: center}
#dark div {padding: 10px;}
.L {background-color: hsl(120, 0%, 72%);} 
.DE, .DL {background-color: hsl(120, 0%, 50%);}
.D {background-color: hsl(120, 0%, 28%);} 
.DE, .DL, .D {color: white;}
.L, .DE, .DL, .D {font-size: small;}



#instsel1 .tooltip sup, #instsel2 .tooltip sup {
    line-height: 6px;
    font-size: xx-small;
}






/* C48 and C60 COVER SHEETs */

#months tr:nth-child(3) td {font-size: x-small;} 




/* these were added because Chrome changed things Oct 2023 */
@page{size:letter; margin:0.5in 0 0 0;}
@page :first {margin:0 0 0 0;}
@media print {     
html,body {background-color: white;}
body *, .noprint, .noprint * {
    visibility: hidden;
    background-color: white;
  }
.left, .top { /* these were added because Chrome changed things Oct 2023 */
    display: none;
}
.content{	/* these were added because Chrome changed things Oct 2023 */
    padding-left: 10px;
	padding-right: 30px;
}
h1,h2{	
    margin-top: 0px; 
    color: black;
    }
.tooltip {
    color: inherit;
    }    
#printme, #printme *, p.attribution, p.attribution * {
    visibility: visible;
  }
#printme {
 //   position: absolute;  /* these were changed because Chrome changed things Oct 2023 */
//    left: 0;
//    top: 0;
  }
#printme:after {
content: " --- end of cover sheet ---";
font-size: xx-small;    
  }    
 p.attribution {
    //display: inline;
    //position:absolute;
    //left: 0;
    //bottom: 0;
}
.noprint, .noprint *, .tooltiptext, sup, input[type=button], #feedback, #widthCheck {
    visibility: hidden; 
    display:none;
} 

input[type=text], textarea, input[type=date], .styled-select, .data-c th, .data-l th {
	background-color: transparent;
}    
.L, .DE, .DL, .D {color: inherit; background-color: transparent;} 
.data-c th, .data-l th {
	border-color: var(--bordergrey);
}    
#instsel1 td, #instsel2 td {font-size: x-small;}
#instsel1 {
    page-break-before: always;        
}   
.pagebreak { 
    page-break-before: always;
    page-break-after: always; 
}
td.content table {
    page-break-inside: avoid;
    break-inside: avoid;
}
.hiderow {display: table-row;}
::-webkit-input-placeholder { /* WebKit browsers */
      color: transparent;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color: transparent;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
      color: transparent;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
   color: transparent;
}
}