/* Shared psrsearch design tokens (WVU palette, radius, shadow) on :root — the
   same tokens the admin console uses, so the front end can modernize onto one
   palette. Must stay first: @import precedes all other rules. */
@import url('psrsearch-tokens.css');

.trail {
    font-size: 90%;
    line-height: 1em;
    color: #999;
    background-color: rgb(243, 244, 248);
    padding-top: 10px;
    padding-bottom: 10px;
    z-index: 0 !important;

}

#acontent-header-extra {
    position: absolute;
    top: 1.5rem;
    right: 7rem;
    padding: 0;
    margin: 0;
}

body {
    min-width: 280px;
}

p {
    margin: 0.5em 0;
}

.apage-head > .inner > header {
    padding: 0.5rem 0 0.5rem;
}
#ppsrsearch-head > .inner > header {
    padding: 0.25rem 0 0.25rem;
}
#appsrsearch-head > div > header > div > div > a > img {
    width: 30px;
    height: 25px;
}

.contentpane {
	background: #F3F4F8;
}

article {
    display: flex;
    flex-direction: column;
    background-color: #f3f4f8;
    width: 100%;
}

section.flex > article {
    background-color: white;
    padding-left: 2vw;
    padding-right: 2vw;
}


section.flex {
    display: flex;
    margin-top: 2%;
    padding-top: 10px;
}

section.column {
    flex-direction: column;
}

section.wrap {
    flex-wrap: wrap;
}

section.first {
    margin-top: 0px;
}

section.last {
    margin-bottom: 25px;
}

section.hidden {
    display: none;
}

.light {                 
    background-color: white;
}                                       
.dark {
    background-color: #f3f4f8;
}

.space-around {
    justify-content: space-around;
}

.space-between {
    justify-content: space-between;
}

.center {
    justify-content: center;
}
.right {
    justify-content: right;
}

label {
    font-weight: bold;
    font-size: 0.8em;
    display: block;
    color: black;
}

label.left {
    text-align: left;
    margin-left: 3%;
    width: 150px;
}

adiv label {
    width: fit-content;
    text-align: left;
}

div.column {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    margin-right: 10px; 
}

div.row {
    display: flex;
    flex-direction: row;
    margin-left: 10px;
    margin-right: 10px;
}

div.nomargin {
    margin: 0;
}

.valign-middle {
    vertical-align: middle;
}

.align-center {
    align-items: center;
}


div.title {
    margin-top: 15px;
    margin-bottom: 15px;
}

div.contentpane div.content-header h2, div.contentpane header h2, .contentpane #content-header h2 {
    padding-top: .7em;
    padding-bottom: .7em;
    font-size: 200%;
    font-weight: bold;
}

.contentpaneopen h1:first-child, .contentpaneopen h2:first-child, .contentpaneopen h3:first-child, .contentpaneopen h4:first-child, .contentpaneopen h5:first-child, .contentpaneopen h6:first-child 
{
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 100%;
    font-weight: bold;
}

ol {
    margin-left: 1em;
}


div.button a {
    color: white;
}

button, .button {
    border-radius: 5px;
    color: white;
    background-color: #0A99D8;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-top: 6px;
    margin-bottom: 6px;
    width: fit-content;
}

td button
{
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
}

div.divider {
    border-width: 2px;
    border-top-style: solid;
    border-color: #e3e4e8;
}


div.bottom-border {
    border-bottom: 1px solid #e3e4e8;
}                      
                                        
div.width33 {
    width: 33%;
}


input[type=text] {
    background-color: white;
    border-color: black;
    border: solid 1px;
}

textarea {
    resize: none;
    background-color: white;
    border-color: black;
    border: solid 1px;
    font-size: min(1vw,1em);
    padding: min(0.5vw,0.4em);
    line-height: 1.2em;
    width: fit-content
}

select { padding: min(0.5vw,0.4em); }
textarea:required, select:required, input:required {  border: 1px dashed red;}


nav.psr {
    display: flex;
    background-color: #f1f1f1;
}

nav.psr div {
    cursor: pointer;
    flex: auto;
    justify-content: center;
    text-align: center;
    padding: .5em 0;
    font-size: 1.2rem;
    width: 150px;
}

nav.psr div#nav-active {
    background-color: white;
}

nav.psr div:hover {
    font-weight: bold;
}

nav.activity {
    display: flex;
    background-color: white;
}

nav.activity div {
    cursor: pointer;
    justify-content: center;
    margin-bottom: 1%;
    margin-right: 1.5em;
}

nav.activity div#nav-active {
    border-width: 2px;
    border-bottom-style: solid;
    border-color: #FFCB00;
}

nav.activity div:hover {
    font-weight: bold;
}

nav.teams {
    display: flex;
    background-color: white;
}

nav.teams div {
    cursor: pointer;
    justify-content: center;
    margin-bottom: 0.5em;
    margin-right: 1.5em;
}

nav.teams div#nav-active {
    border-width: 2px;
    border-bottom-style: solid;
    border-color: #FFCB00;
}

nav.admin {
    display: flex;
    background-color: white;
}

nav.admin div {
    cursor: pointer;
    justify-content: center;
    margin-bottom: 1%;
    margin-right: 1.5em;
}

nav.admin div#nav-active {
    border-width: 2px;
    border-bottom-style: solid;
    border-color: #FFCB00;
}


nav.teams div:hover {
    font-weight: bold;
}

nav.register {
    display: flex;
    background-color: white;
}

nav.register div {
    cursor: pointer;
    justify-content: center;
    padding: .5em 0;
    margin-right: 1.5em;
}

nav.register > div > label {
    display: inline;
}

nav.register div.register-active {
    border-width: 2px;
    border-bottom-style: solid;
    border-color: #FFCB00;
    margin-bottom: 5%;
}

nav.register div:hover {
    font-weight: bold;
}

a:link {
text-decoration: underline;
}

nav a:link, a:visited {
  text-decoration: none;
}

.sr-only {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}

.cell {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
}

.cell.left {
    border-width: 2px;
    border-right-style: solid;
    border-color: #f3f4f8;
}

.cell.right {
    border-width: 2px;
    border-right-style: solid;
    border-color: #f3f4f8;
}

table.admin {
    width: fit-content;
}

th.name {
    width: 200px;
}

.l-cell {
    border-width: 2px;
    border-left-style: solid;
    border-color: #f3f4f8;
}
.m-cell {
    border-width: 2px;
    border-right-style: solid;
    border-left-style: solid;
    border-color: #f3f4f8;
}
.r-cell {
    border-width: 2px;
    border-right-style: solid;
    border-color: #f3f4f8;
}

.summary-data {
    font-size: 2.5em;
    color: #FFCB00;
    font-weight: bold;
    padding: 0px;
}

.summary-data a:link, .summary-data a:visited {
    text-decoration: underline;
    color: #FFCB00;
}

table th {
        width: 1%;
}

.summary-hdr {
    padding-top: 10px;
    padding-bottom: 0px;
    border-bottom: 0;
    width: 1%;
}

tr {
    padding-bottom: 40px;
}

td a .link {
    display:block;
    width:100%;
}

select:invalid {
    color: gray;
}

option {
    color: black;
}


.chip{
	padding: 8px 10px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 12px;
	box-shadow: 0 2px 5px rgba(0,0,0,.25);
	margin: 0 10px;
	text-align: center;
	cursor: pointer;
    vertical-align: middle;
    white-space: nowrap;
}

.chip.red {
	background: red;
	color: ghostwhite;
    width: fit-content;
    padding-top: 4px;
    padding-bottom: 4px;
}

.chip.student{
	background: #2F4058;
	color: ghostwhite;
}

.chip.teacher1{
	background: #242933;
	color: #777;
}

.chip.teacher{
	background:#FEB904;
        color: ghostwhite;
	o-color: whitesmoke;
}
.chip.astronomer{
	background: #DA605B;
	color: whitesmoke;
}

.chip.admin{
	background: #5FD6D4;
	color: whitesmoke;
}

.chip.unknown{
	background: #5FD6D4;
	color: whitesmoke;
}

.chip-avatar{
	border-radius: 30px;
	justify-content: center;
	display: flex;
	align-items: center;
}
.chip-avatar img{
	height: 25px;
	width: 25px;
	border-radius: 50px;
}

.chip-avatar label{
	margin-left: 5px;
	font-size: 12px;
}

.row-reverse {
    flex-direction: row-reverse;
}

.page-head > .inner > header nav.nav nav.main > ul > li > a {
    padding: 0;
    margin-right: 20px;
}

.page-head > .inner > header nav.nav nav.main > ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

nav.nav > nav.main > ul > li.selected > a  {
    border-width: 2px;
    border-bottom-style: solid;
    border-color: #FFCB00;
}


.default:before {
    content: "*";
}
td .normal:before {
    content: "  ";
}

.underline {
    text-decoration: underline;
    display: inline-block;
}

div.grade-label {
    white-space:nowrap;

}


#blah {
    border-radius: 5px;
    color: white;
    background-color: #0A99D8;
    width: fit-content;
    height: 12px;
}
/*plots*/
#copyplotlink svg path { fill: black; }
#copyplotlink { 
    padding-top: 2px;
    padding-bottom: 0px;
    padding-right: 5px;
    padding-left: 5px;
    margin-left: 5px;
    fill: black;
    background-color: white;
    width: 24px;
    border-radius: 5px;
}

table.t-meta  td { padding: 0px; padding-right: 1vw;}



section#plots-links { margin: 0; padding: 0; }
#input-file2  { vertical-align: middle; }
div#plot-type   { width: 22vw;   margin-top: 0;    padding: .5vw; margin-right: 1vw !important; flex-grow: 0; flex-shrink: 1; }
div#comments    { width: 22vw;              padding: .5vw; margin-right: 1vw !important; flex-grow: 1; flex-shrink: 1; padding-top: 1px; border-color: white; border-width: 1px;}
div#knownpulsar { width: 22vw;              padding: .5vw; margin-right: 1vw !important; flex-grow: 1; flex-shrink: 1; padding-top: 1px; border-color: white; border-width: 1px;}
div#buttons     { width: fit-content;       margin-right: 0vw !important; flex-grow: 1; flex-shrink: 1; padding-top: 1px; padding-right: .75vw; border-color: black; border-width: 0px; border-style: solid; white-space: nowrap; align-items: center; justify-content: center;}
#submitit       { width: 3.5vw; height: 2.5vw;  border-width: 1px; border-style: solid; border-color: white; margin-bottom: .2vw; padding-left: .2vw; padding-right: .2vw; display: none; }
form#f-grade #skip           { width: 4.5vw; height: 2.5vw;  border-width: 1px; border-style: solid; border-color: white; margin-top: .2vw; padding-left: .2vw; padding-right: .2vw; font-size: min(1vw,1em);}
form#view button { margin-left: 1vw; margin-right: 1vw; }

#buttons > div > button            { width: 4.5vw; height: 2.5vw;  border-width: 1px; border-style: solid; border-color: white; margin-top: .2vw; padding-left: .2vw; padding-right: .2vw; font-size: min(1vw,1em);}


div#pulsar-type { margin-top: 0px; margin-left: 25px; margin-right: 25px; margin-bottom: 25px; visibility: hidden; }

#your-grade, #view-buttons { margin-top: 1vh;}

#knownpulsar > div.column { flex-grow: 0 !important;}
div#atnf-link { margin-top: 1%; display: flex; flex-shrink: 1; flex-grow: 0;}

table caption { text-align: center; font-weight: bold; padding-bottom: 2vh; }
#knownpulsar > div.column > label,
#comments > label,
#submitit,
#meta > div > table > tbody > tr > td,

#atnf-link > a { font-size: min(.75vw,1em); line-height: 1vw; vertical-align: top; flex-shrink: 1; flex-grow: 0;}

div#ispulsar { margin-right: 10%; }
div#aknownpulsar { visibility:hidden; }
input#exclude-pulsars { margin-left: 110px;}
input#exclude-rfi { margin-left: 110px;}

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

input[type=radio] + label>div>div { border: 1px dashed #444; transition: transform 500ms; }
input[type=radio]:checked + label>div>div { border: 1px solid black; transform: rotateZ(0deg) rotateX(0deg); }
/*input[type=radio]:focus + label>div>div { border: 1px solid #444; }*/
input[type=radio] + label>div>div>svg { opacity: 20%; }
input[type=radio]:checked + label>div>div>svg { stroke: #FFCB00; fill: #FFCB00; opacity: 100%; }
input[type=radio]:checked + label>div>div>svg path { stroke: #FFCB00; fill: #FFCB00; opacity: 100%; }
input[type=radio]:checked + label>div>div>svg .st0 { stroke: #FFCB00; opacity: 100%; }

input[type=checkbox] + label>div>div { border: 1px dashed #444; transition: transform 500ms; }
input[type=checkbox]:checked + label>div>div { border: 1px dashed #4444; transform: rotateZ(0deg) rotateX(0deg); }
input[type=checkbox]:focus + label>div>div { border: 1px solid black; }*/
input[type=checkbox] + label>div>div>svg { opacity: 20%; }

input[type=checkbox]:checked + label>div>div>svg { stroke: #FFCB00; fill: #FFCB00; opacity: 100%; }
input[type=checkbox]:checked + label>div>div#yg-noise-button>svg { stroke: #CB0000; fill: #CB0000; opacity: 100%; }
input[type=checkbox]:checked + label>div>div#yg-rfi-button>svg { stroke: #CB0000; fill: #CB0000; opacity: 100%; }
input[type=checkbox]:checked + label>div>div#yg-maybe-button>svg { stroke: #FFCB00; fill: #FFCB00; opacity: 100%; }
input[type=checkbox]:checked + label>div>div#yg-isknown-button>svg { stroke: #00CB00; fill: #00CB00; opacity: 100%; }
input[type=checkbox]:checked + label>div>div#yg-newpulsar-button>svg { stroke: #00CB00; fill: #00CB00; opacity: 100%; }

input[type=checkbox]:checked + label>div>div>svg path { stroke: #FFCB00; fill: #FFCB00; opacity: 100%; }
input[type=checkbox]:checked + label>div>#notapulsar1>svg path, input[type=checkbox]:checked + label>div>#notapulsar2>svg path, input[type=checkbox]:checked + label>div>#notapulsar3>svg path, input[type=checkbox]:checked + label>div>#notapulsar4>svg path { stroke:#CB0000; fill:#CB0000; opacity: 100%; }
input[type=checkbox]:checked + label>div>#maybeapulsar1>svg path, input[type=checkbox]:checked + label>div>#maybeapulsar2>svg path, input[type=checkbox]:checked + label>div>#maybeapulsar3>svg path, input[type=checkbox]:checked + label>div>#maybeapulsar4>svg path { stroke:#FFCB00; fill:#FFCB00; opacity: 100%; }
input[type=checkbox]:checked + label>div>#isapulsar1>svg path, input[type=checkbox]:checked + label>div>#isapulsar2>svg path, input[type=checkbox]:checked + label>div>#isapulsar3>svg path, input[type=checkbox]:checked + label>div>#isapulsar4>svg path { stroke:#00CB00; fill:#00CB00; opacity: 100%; }
input[type=checkbox]:checked + label>div>div#yg-isknown-button>svg path { stroke: #00CB00; fill: #00CB00; opacity: 100%; }
input[type=checkbox]:checked + label>div>div#yg-newpulsar-button>svg path { stroke: #00CB00; fill: #00CB00; opacity: 100%; }

input[type=checkbox]:checked + label>div>div>svg .st0 { stroke: #FFCB00; opacity: 100%; }
input[type=checkbox]:checked + label>div>div#yg-noise-button>svg .st0 { stroke: #CB0000; fill: #CB0000; opacity: 100%; }
input[type=checkbox]:checked + label>div>div#yg-rfi-button>svg .st0 { stroke: #CB0000; fill: #CB0000; opacity: 100%; }
input[type=checkbox]:checked + label>div>div#yg-maybe-button>svg .st0 { stroke: #FFCB00; fill: #FFCB00; opacity: 100%; }
input[type=checkbox]:checked + label>div>div#yg-known-button>svg .st0 { stroke: #00CB00; fill: #00C000; opacity: 100%; }
input[type=checkbox]:checked + label>div>div#yg-new-button>svg .st0 { stroke: #00CB00; fill: #00CB00; opacity: 100%; }

#knownpulsar { border-width: 1px; border-style: solid; border-color: white }
#comments { border-width: 1px; border-style: solid; border-color: #ffffff }

#plots {  margin-top: .25vh; padding: 0 0 0 0; justify-content: space-around; }
div.chart { margin: 0 0 0 0; justify-content: space-evenly; align-items: center; }
div.grades.row.center  { padding-top: min(1vh,1vw); abackground-color: #DBEDFF; }
canvas.canvas-plot { position: absolute; }

div#singlepulse-view #plot1-plot { width: 16.67%; }
div#singlepulse-view #plot2-plot  { width: 16.67%; }
div#singlepulse-view #plot3-plot  { width: 16.67%; }
div#singlepulse-view #plot4-plot   { width: 50%; margin-right: 3vw; margin-left: 3vw; }
div#singlepulse-view #chart3 { position: relative; width: 100%}
div#singlepulse-view #chart4 { position: relative; width: 100%}

div#prepfold-view #plot1-plot div.grades.row.center  { width: 85%; margin: 0 0 0 5%; }
div#prepfold-view #plot2-plot div.grades.row.center  { width: 85%; margin: 0 0 0 15%; }
div#prepfold-view #plot3-plot div.grades.row.center  { width: 85%; margin: 0 0 0 0; }
div#prepfold-view #plot4-plot div.grades.row.center  { width: 85%; margin: 0 0 0 15%; }

div#singlepulse-view #plot1-plot div.grades.row.center  { width: 85%; margin: 0 0 0 15%; }
div#singlepulse-view #plot2-plot div.grades.row.center  { width: 85%; margin: 0 0 0 15%; }
div#singlepulse-view #plot3-plot div.grades.row.center  { width: 85%; margin: 0 0 0 15%; }
div#singlepulse-view #plot4-plot div.grades.row.center  { width: 42.5%; margin: 0 0 0 3%; }

div.grades.row.bottom-border.center { margin-left: 15%; margin-right: 0%; justify-content: center;} 
div.button.sr { margin-left: 1%; margin-right: 0%; justify-content: center;} 

div.grade-option {
    display: flex;
    width: 20%;
    flex-grow: 1;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-bottom: 3px;            
    border-bottom: 2px solid rgb(255, 0, 0, 0.0);
}

div.grade-selected { border-bottom: 2px solid #FFCB00; }
div.grade-selected#b-knownpulsar, div.grade-selected#b-newpulsar, div.grade-selected#b-isapulsar1, div.grade-selected#b-isapulsar2, div.grade-selected#b-isapulsar3, div.grade-selected#b-isapulsar4 { border-bottom: 2px solid #00CB00; }
div.grade-selected#b-noise, div.grade-selected#b-rfi, div.grade-selected#b-notapulsar1, div.grade-selected#b-notapulsar2, div.grade-selected#b-notapulsar3, div.grade-selected#b-notapulsar4 { border-bottom: 2px solid #CB0000; }
div.grade-selected#b-maybe, div.grade-selected#b-maybeapulsar1, div.grade-selected#b-maybeapulsar2, div.grade-selected#b-maybeapulsar3, div.grade-selected#b-maybeapulsar4 { border-bottom: 2px solid #FFCB00; }
/* div.grade-option:focus-within { border-bottom: 2px solid #FFCB00; } */
/*div.grade-option > input:checked { border-bottom: 2px solid red; }*/

div.grade-option > label > div { margin-left: 0; margin-right: 0; }
div.grade-option > label > div > div.grade-label { border-width: 0;}

#pulsar-type { border-width: 3px; border-style: solid; border-color: white }

div.key  { width: 120px; height: fit-content; margin-right: 30px; font-size: 1.5vw; }
div.value { width: 120px; font-size: 1.5vw;}
div.column3 { display: flex; flex-direction: column; margin-bottom: 5px; margin-top: 5px; margin-left: 10px; width: 33%; }

#b-notapulsar1 > label > div > p,
#b-maybeapulsar1 > label > div > p,
#b-isapulsar1 > label > div > p,
#b-notapulsar2 > label > div > p,
#b-maybeapulsar2 > label > div > p,
#b-isapulsar2 > label > div > p,
#b-notapulsar3 > label > div > p,
#b-maybeapulsar3 > label > div > p,
#b-isapulsar3 > label > div > p,
#b-notapulsar4 > label > div > p,
#b-maybeapulsar4 > label > div > p,
#b-isapulsar4 > label > div > p,
div.grade-label { font-size: 0.8vw; border-width: 0; }
div.grade-icon, div.grade-icon svg { width: min(2.5vw,4vh); height: min(2.5vw,4vh);}
#meta { line-height: 1.6; font-size: 0.8em;}

#plot-type > div > label > div > div.grade-label { font-size: .8vw; }

aheader { display: flex; flex-direction: row; justify-content:};

#psrsearch-head > div > header > div > div > a > strong::before {
    display: block;
    position: absolute;
    height: 1px;
    width: 2rem;
    background: #FFCB00;
    top: 50%;
    left: -3.5rem;
}
#psrsearch-head > div > header > div > div { width: fit-content; flex-shrink: 0;}
#psrsearch-head > div > header > div > div > a { font-size: 0.9rem;}
#psrsearch-head > div > header > div > div > a > img { width: 41px; }


#s-submit { margin-top: 5px !important; flex-grow: 1; flex-shrink: 1; }

/*dashboard*/
div#d-next, div#d-select { margin: 10px; }
div#d-select { opacity: 40%; }

/*search*/
form#plotSearch { padding-top: 1vw; }
form#plotSearch label { width: 5vw; text-align: left; white-space: normal; }
form#plotSearch ::placeholder { color: lightgray; }
button#simplesearch { text-align: right; margin-left: 5vw; margin-bottom: 15px;}

form#advancedSearch { padding-top: 1vw; }
form#advancedSearch label { width: 6.5vw; text-align: left; white-space: normal; }
form#advancedSearch #restrict label { width: auto }

form#advancedSearch ::placeholder { color: lightgray; }
form#advancedSearch div#surveys { margin-bottom: 2vw; }
form#advancedSearch div.form-group { margin-bottom: 0.4vw;}
form#advancedSearch div.form-group label { width: 15vw; white-space: normal; text-align: right; margin-right: 0.5vw; }
form#advancedSearch select { min-width: 20vw; }
form#advancedSearch fieldset label { white-space: nowrap; margin-left: .5vw;}
form#advancedSearch #restrict { width: 15vw;  margin-top: 2vw; margin-bottom: 2vw;  }
form#advancedSearch fieldset div.form-group label { width:7.5vw;}
form#advancedSearch fieldset fieldset { margin-top: 2vw;}
form#advancedSearch fieldset fieldset label { width: 7vw; margin-right: 1vw;}

@keyframes spinner {
    to {transform: rotate(360deg);}
  }
   
#table1_processing  {
    position: absolute;
    top: 5.8vw;
    left: 33%;
    width: 33%;
    height: 50px;
    margin-left: 0%;
    margin-top: -25px;
    padding-top: 25px;
    text-align: center;
    font-size: 1.1em;
    height: 55px;
    background-color: #8ebf42;
    border-radius: 40px;
}
.spinner:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin-top: -17px;
    margin-left: -10px;
    border-radius: 50%;
    border: 2px solid #ccc;
    border-top-color: #333;
    animation: spinner .6s linear infinite;
  }

abutton#complexsearch { text-align: right; margin-left: 140px; margin-bottom: 15px; }

/*registration*/

img.mfp-img { height: 90vh; object-fit: cover; }

  nav.se {
    abackground-color: rebeccapurple;
    padding: 0 1rem;
    position: sticky;
    top: 0;
    display: grid;
    place-items: center;
    z-index: 900;
  }
  nav.se > ul {
    grid-auto-flow: column;
  }
  nav.se > ul > li {
    margin: 0 0.5rem;
  }
  nav.se > ul > li a,
  nav.se > ul > li .dropdown__title {
    text-decoration: none;
    text-align: center;
    display: inline-block;
    color: #fff;
    font-size: 1.125rem;
  }

  nav.se > ul > li > button:after {
    font-family: "Fontcons"; font-weight: 900; content: "\22ef";
    padding-left: 0.5em;

    
}

nav.se > ul > li a:focus,
  nav.se > ul > li .dropdown__title:focus {
    outline: none;
  }
  nav.se > ul > li > a,
  nav.se > ul > li .dropdown__title {
    padding: 1rem 0.5rem;
    border-top: 3px solid transparent;
    atransition: 280ms all 120ms ease-out;
  }
  nav.se > ul > li > a:hover, nav > ul > li > a:focus,
  nav.se > ul > li .dropdown__title:hover,
  nav.se > ul > li .dropdown__title:focus {
    border-top-color: pink;
    color: pink;
  }
  nav.se ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
  }
  nav.se ul li {
    padding: 0;
  }
  
  .dropdown__title {
    background-color: transparent;
    border: none;
    font-family: inherit;
  }
  
  .dropdown {
    position: relative;
  }
  .dropdown .dropdown__title {
    display: inline-flex;
    align-items: center;
  }
  .dropdown .dropdown__title:after {
    content: "";
    border: 0.35rem solid transparent;
    border-top-color: rgba(255, 255, 255, 0.45);
    margin-left: 0.25em;
    transform: translateY(0.15em);
  }
  .dropdown .dropdown__menu {
    position: absolute;
    min-width: 15ch;
    left: 50%;
    top: calc(100% + 0.25rem);
    atransition: 280ms all 120ms ease-out;
    transform: rotateX(-90deg) translateX(-50%);
    transform-origin: top center;
    visibility: hidden;
    aopacity: 0.6;
    padding: 0.5em 0;
    background-color: #eee;
    border-radius: 10px;
    box-shadow: 0 0.15em 0.25em rgba(0, 0, 0, 0.25);
  }
  .dropdown .dropdown__menu a {
    color: #47246b;
    display: block;
    padding: 0.5em;
    opacity: 0;
    atransition: 280ms all 120ms ease-out;
  }
  .dropdown .dropdown__menu a:hover {
    background-color: rgba(102, 51, 153, 0.15);
  }
  .dropdown .dropdown__menu a:focus {
    outline: none;
    background-color: rgba(102, 51, 153, 0.25);
  }
  .dropdown:after {
    content: "";
    border: 0.5rem solid transparent;
    border-bottom-color: red;
    position: absolute;
    top: calc(100% - 1.25rem);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    atransition: 280ms all 120ms ease-out;
    opacity: 0;
    will-change: opacity;
  }
  .dropdown:hover .dropdown__title, .dropdown:focus-within .dropdown__title {
    border-top-color: pink;
  }
  .dropdown:hover .dropdown__menu, .dropdown:focus-within .dropdown__menu {
    opacity: 1;
    transform: rotateX(0) translateX(-50%);
    visibility: visible;
  }
  .dropdown:hover .dropdown__menu a, .dropdown:focus-within .dropdown__menu a {
    opacity: 1;
  }
  .dropdown:hover:after, .dropdown:focus-within:after {
    opacity: 1;
  }  
  
  div.contentpaneopen > section:nth-child(1) { margin-top: 0; padding-top: 0; }
  form#join-team          { margin-top: 2vh; }
  form#join-team label    { width: 140px; padding-top: 10px; padding-bottom: 10px; margin-top: 5px; margin-bottom: 5px; white-space: nowrap; display: inline;}
  form#join-team select   { padding-top: 10px; padding-bottom: 10px; margin-top: 5px; margin-bottom: 5px; }
  form#join-team textarea { padding-top: 10px; padding-bottom: 10px; margin-top: 5px; margin-bottom: 5px; }
  form#join-team button   { padding-top: 10px; padding-bottom: 10px; margin-top: 15px; margin-bottom: 15px; }
  form#join-team #ph      { margin-left: 140px;}
  form#join-team #submit  { margin-right: 20px;}  
  form#join-team #cancel  { }
  
  form#join-team div.s-teams#teams   { display: none; }
  form#join-team div > input[type=checkbox] { margin-left: 0px;}
  form#join-team div#role-radio { margin-top: 10px; margin-bottom: 10px; }
  form#join-team div.label { width: 140px; margin-top: 10px; margin-bottom: 10px; font-weight: bold; font-size: 0.8em; color: black; }
  form#join-team div.value { margin-top: 10px; margin-bottom: 10px; font-weight: bold; font-size: 0.8em; color: black; }
  form#join-team div#roles { margin-left: 0; display: none; }  
  form#join-team div#role-requested { margin-left: 0; display: none; }  
  form#join-team div#reason { margin-left: 0; display: none; }
  form#join-team input[type=radio]:disabled+label { color: grey; }

  form#req-create-survey          { margin-top: 2vh; }
  form#req-create-survey div#reason { margin-left: 0; }
  form#req-create-survey #submit  { margin-right: 20px;}  
  form#req-create-survey #cancel  { }
  form#req-create-survey label    { width: 140px; padding-top: 10px; padding-bottom: 10px; margin-top: 5px; margin-bottom: 5px; white-space: nowrap; display: inline;}
  form#req-create-survey textarea { padding-top: 10px; padding-bottom: 10px; margin-top: 5px; margin-bottom: 5px; }
  form#req-create-survey button   { padding-top: 10px; padding-bottom: 10px; margin-top: 15px; margin-bottom: 15px; }
  form#req-create-survey #ph      { margin-left: 140px;}


  form#profile label    { width: 140px; padding-top: 10px; padding-bottom: 10px; margin-top: 5px; margin-bottom: 5px; white-space: nowrap; display: inline;}
  

fieldset {
    display: block;
    border: groove 2px ThreeDFace;
    padding-block-start: .25em;
    padding-inline-end: 0.75em;
    padding-block-end: .25em;
    padding-inline-start: 0.75em;
    min-inline-size: min-content;
}

legend { white-space: nowrap;   padding-inline-start: 2px; padding-inline-end: 2px;}
form#survey label { display: inline; }
section#submit {   padding-left: 30px; padding-bottom: 10px; }
#survey-names { padding-bottom: 2em; }
#experience-fs > div  { display: flex;  justify-content: space-between; }
#exp_numplots { line-height: .75em; width: 5em; }

#mode { position: absolute; right: 10px; top: 10px; }
.survey-block { padding-top: 1vw; padding-bottom: 1vw; border: 1;}
.survey-block > p { padding-left: 2vw; }

/* registration */

.pulsarbg {
    background-size: cover;
    background-position: center center;
    background-image: url('/app/components/com_psrsearch/site/assets/img/pulsar2.jpg');
    width: 100%;
    align-items: center;
}
.right-panel { justify-content: center; align-items: center; height: 100%;}

.panel2 { width: 90%; background: white; border-radius: 10px; border-style: inset outset outset inset; border-width: 5px; padding: .1vw; margin-top: 1vw;}

li.register-member { list-style: none;}
ul.register > li > label { display: inline; }
ul.register { margin: 0; }
ul.register > li > label > p { margin-left: 2vw; font-weight: normal;}

div#form {  width:500px; flex-grow: 0; flex-shrink: 0; min-height: 500px; }

div.registration { margin-top: 1vw; height: 100%; }

form#student-form label { width: 75px; padding-top: 10px; padding-bottom: 10px; margin-top: 5px; margin-bottom: 5px; margin-right: 1vw; text-align:right;}
form#student-form select { padding-top: 10px; padding-bottom: 10px; margin-top: 5px; margin-bottom: 5px; }
form#student-form label#birthday { width: inherit; margin-top:4px; margin-bottom:2px; padding: 0; }
form#student-form input[type=checkbox] { margin-right: .5vw; vertical-align: top;}

form#student-form { height: 100%; margin-top: 1vw;}
form#student-form > div { height: 100%;}
form#student-form > div > div.flex.row.space-between > div.flex.row { align-items: center; margin-left: 0px;}
form#student-form > div > div.flex.row.space-between { margin-left: 0px;}

form#teacher-form > div { height: 100%;}
form#teacher-form { height: 100%; margin-top: 1vw;}
form#teacher-form > div > div > p { margin: .1em 0; font-size: .85em;}
form#teacher-form > div > div > div > label { margin-top: 1em; }
form#teacher-form label#birthday { width: inherit; margin-top:4px; margin-bottom:2px; padding: 0; }
form#teacher-form input[type=checkbox] { margin-right: .5vw; vertical-align: top;}
form#student-form > div > div:nth-child(1) > div:nth-child(4) { margin-top: .5vw;}
form#teacher-form > div > div.flex.row.space-between > div.flex.row { align-items: center; margin-left: 0px;}
form#teacher-form > div > div.flex.row.space-between { margin-left: 0px;}

div.pulsarbg > #system-message-container { width: 90%; background: red; border-radius: 10px; border-style: inset outset outset inset; border-width: 5px; padding: .1vw; margin-top: 1vw; }

form#teacher-form > div > div   { margin-top: 1.5vw;}
form#teacher-form > div.flex.column.space-between > div:nth-child(1)   { margin-top: 1px;}
section#tc-request > div > p.error { margin: 0;}
section#tc-request > form > div > div > p { margin-top: 1vw; }
section#tc-request > form  { margin-top: 0; }
section#tc-request > div.flex.row > div { margin-left: 2vw; margin-right: 2vw;}
form#teacher-form > fieldset > table > td { white-space: nowrap; }
form#teacher-form > div > fieldset > table > tbody > tr > td { white-space: nowrap; }

div#buttons { margin-left: 10px; margin-top: .5vw; }
div#buttons > button { margin-right: 10px; }
fieldset#teaminfo { padding-bottom: 1vw; margin-bottom: 0;}



#plot_list > tbody > tr > td:nth-child(3) { white-space: nowrap; }
#plot_list_wrapper { overflow-x:scroll; }
#plot_list > thead > tr > th:nth-child(16) { width: 10vw;}
#plot_list > tbody > tr > td:nth-child(16) { width: 10vw;}

div > label { white-space: nowrap; }


#f-grade button:disabled { opacity: 50%; }



label.l-switch {
	cursor: pointer;
	text-indent: -9999px;
	width: 2vw;
	height: 1vw;
	background: blue;
	adisplay: block;
    avisibility: hidden;
    display: flex;
	border-radius: 1vw;
	position: relative;
    margin-top: .4vw;
    margin-bottom: .3vw;
}

label.l-switch:after {
	content: '';
	position: absolute;
	top: .25vw;
	left: 5px;
	width: .5vw;
	height: .5vw;
	background: #fff;
	border-radius: 90px;
	transition: 0.2s;
}

input.switch + label{
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -o-user-select:none;
    user-select:none;
}

input.switch[type=checkbox]{ height: 0; width: 0; visibility: hidden; }
input.switch:checked + label { background: #bada55; }
input.switch:checked + label:after { left: calc(100% - 5px); transform: translateX(-100%); }
input.switch:checked + label + div + div { margin: 0; width: 3vw; justify-content: center; align-items: center; visibility: visible; }
input.switch:checked + label + div { margin: 0; width: 0; visibility: hidden; }
input.switch + label + div + div { margin: 0; width: 0; visibility: hidden; }
input.switch + label + div { margin: 0; width: 3vw; justify-content: center; align-items: center; visibility: visible; }

/* Requests */
.card {
    background: #fff;
    border-radius: 2px;
    display: inline-block;
    aheight: 300px;
    awidth: fit-content;
    margin: 1rem;
    position: relative;
  }
  
  .card-1 {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  }
  
  .card-1:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  }
  
  .card-2 {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  }
  
  .card-3 {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  }
  
  .card-4 {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  }
  
  .card-5 {
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  }
  
  .card #title {
    position: relative;
    top: -0.5em;
    margin-left: 1em;
    display: inline;
    background-color: white;
    font-weight: bold;
    border: #3c5a86 1px solid;
    padding: 2px;
  }
  
  .card #rtitle {
    position: relative;
    top: -0.5em;
    right: -26em;
    display: inline;
    background-color: red;
    color: white;
    font-weight: bold;
    border: #3c5a86 1px solid;
    padding: 2px;

  }

  .card #request-comment, .card #response-comment
  {
    width: 100%;
    background-color: lightgrey;
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    margin-bottom: 1em;
    padding-left: .5vw;
    padding-right: .5vw;
  }

  .card #role-type { padding: .5vw; font-size: 150%; width: fit-content; background-color: black; color: white; margin: 1em;}
  .card #actions { margin-top: .5vw; margin-bottom: .25vw; }

  .card #action {  padding: .5vw; font-size: 150%; width: fit-content; margin: 1em;}
  .action-accepted { background-color: green; color: white; }
  .action-rejected { background-color: red; color: white; }
  .action-cancelled { background-color: grey; color: white; }
  #request-container { width: fit-content; }
  #response-card { padding-bottom: 2em; }