@import url("timelines.css");

* {
  box-sizing: border-box;
}

html {
    font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size:14px;
    line-height:1.5;
    height:100%;
    -webkit-print-color-adjust: exact;
    -webkit-text-size-adjust: none;
}

@media print {
    html {
       font-size:12px;
    }
    table {
    }
}

body {
    font-size:15px;
    margin: 0;
    padding: 0;
    color:#1d1d1f;
    height:100%;
}

main {
    height:calc(100% - 55px);
}

p, label, #content li:not(.current) {
    color:#383838;
}

a {
    color:#0070C9;
    text-decoration:none
}

a:hover {
    text-decoration:underline
}

h2 {
    margin-top: 1em;
    margin-bottom: .3em;
}

h3 {
    font-size:17px;
    margin-top: 1em;
    margin-bottom: .3em;
    font-weight:600
}

table {
    border-collapse: collapse;
    text-align: left;
    width:90%;
    margin:auto
}

table .grouplabel th {
    font-size:17px;
    padding: 2em .5em .5em 1em;
}

table thead tr th {
  font-weight:600;
  color: #333;
  padding: .5em 1em .5em 1em;
  border-bottom: 1px solid #333;
}

table:not(.simulation-index) tr:nth-child(even) {
    background-color: #f5f5f7;
}

table:not(.simulation-index) tr td {
    border-bottom: 1px solid #cbcbcb;
    color: #666;
    padding: .25em 1em .25em 1em;
    vertical-align:top
}

.simulation-index tr td {
    border-top: 1px solid #cbcbcb;
    padding: .25em 0em .25em 1.5em;
    vertical-align:top
}

.secondary-column {
    width:40px;
    font-size:12px
}

.secondary-column > div > div  {
    display:flex;
    justify-content:space-between;
    margin-bottom:4px
}

.secondary-column > div > div > *  {
    margin:0 10px;
}

.minimumNumberOf {
    font-size:11px;
    color:#999 !important;
    text-align:center
}

.minimumNumberOf strong {
    font-size:14px;
}

table p {
    margin:0px
}

table em {
    color: #2573F7;
}

/* Global navigation */

#globalnav {
    position: sticky;
    top: 0;
    right: 0;
    left: 0;
    font-size:12px;
    z-index: 9999;
    height: auto;
    background: rgba(240,240,240,0.8);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    
    display: flex;
    flex-flow: row wrap;
    align-items:baseline
}

#globalnav > h1 {
    font-size: 13pt;
    margin:14px 80px 0px 20px
}

#globalnav ul {
    list-style-type: none;
    margin:0;
    padding:9px 12px;
    display: flex;
    flex-flow: row wrap;
    align-items:baseline
}

#globalnav li {
    display: inline;
    font-weight:bold;
    padding:8px 12px;
    font-size: 10pt
}

#globalnav a {
  color:#555;
  text-align: center;
  text-decoration: none;
}

#globalnav li a:hover {
    color:#333;
}

/* Simulation properties */

#simulation-properties {
    padding:20px;
    height:auto;
    background-image: radial-gradient(circle closest-corner at 50% -70%, #1A9E8F, #115B9E);
    color:white;
    
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
}

#simulation-properties > div {
    display: flex;
    flex-flow: row wrap;
}

#simulation-properties > div > div {
    margin:8px
}

#simulation-properties > div > div:first-child {
    flex: 2 200px;
}

#simulation-properties > div > div:last-child {
    flex: 1 280px;
    border-radius:8px;
    background-color:rgba(0,0,0,0.35)
}

#simulation-properties ul {
    padding:0px 30px
}

#simulation-properties h1 {
    margin:0px;
    padding:0px;
}

#simulation-properties p {
    color:white;
}

#simulation-properties a {
    color:white;
}

#simulation-properties button {
    border-radius:3px;
    background-color: rgba(240, 240, 240, .3);
    border: none;
    color: white;
    margin:0px 24px 16px;
    padding: 4px 6px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
}

#simulation-properties button:active {
    background-color: rgba(240, 240, 240, .2);
}

/* Content */

#content {
    margin: 20px;
    padding-bottom: 120px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
}

.container {
    margin:auto;
    max-width:1040px;
}

.assignments {
    width:auto;
    border: .5px solid #e6e6e6;
}

.assignments th {
    text-align:center;
  color: #333;
  padding: .5em 1em .5em 1em;
  border: .5px solid #e6e6e6;
}

.assignments tr:nth-child(even) {
    background-color: white;
}

.assignments td {
    text-align:center;
    border: .5px solid #e6e6e6;
}

.rerouting {
    display:flex;
    justify-content:space-around;
}

@media print {
    .unit {
        page-break-after: always;
    }
}

.page-top {
    display: flex;
    justify-content:space-between;
    background: rgba(240,240,240,0.8);
    padding:1em
}

.page-top h4 {
    margin:0px
}

#title {
    border-bottom:1px solid #e6e6e6;
    display: flex;
    align-items:baseline;
    justify-content: space-between;
}

#content p > strong {
    color:#BD130B
}

#content p > em, li > em {
    color: #2573F7;
}

.header {
    border-bottom:1px solid #e6e6e6;
    display: flex;
    justify-content: space-evenly;
}

.header div {
    margin:1em .5em 1em;
    flex:1
}

/* Content title */

.title {
    display: flex;
    flex-flow: row wrap;
    justify-content:space-between;
    align-items:baseline;
    width: 100%;
    border-bottom:1px solid black
}

.title h1 {
    margin:0px;
}

.title h2 {
    margin:0px;
}

/* Dropdown Button */

.dropdown {
    min-width:150px;
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  border-radius:6px;
  background: rgba(240,240,240,0.8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  width:100%;
}

.dropdown-content ul {
    list-style-type: none;
    padding:4px 0px;
    margin:4px 0px 0px
}

.dropdown-content li {
    padding:2px 6px
}

.dropdown-content a {
  color: black;
  padding: 3px 8px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
    color: white;
    border-radius:5px;
    background-color: #2D91FB;
}

.dropdown:hover .dropdown-content {display: block;}

.dropdown-content hr {
    border-top: 1px solid #aaa;
    border-bottom: 0px;
}

.note {
    border: 1px solid rgba(0,0,0,0.08);
    background-color: rgba(0,0,0,0.03);
    border-radius: 3.5px;
    display: flex;
    justify-content:space-evenly;
}

.note div {
    flex:1
}

.note ul {
    list-style: none;
    margin: 1em;
    padding: 0;
}

.note li {
    line-height: 1.4;
    color:#484848;
}

.caption p, .caption li {
    font-size:13px;
    color:#999 !important
}

/* Course page */
.course_notes strong {
    color:#BD130B
}

/* Tabs */

.tab {
    padding:0px
}

.tabButton {
    list-style-type: none;
    margin:20px 0px 0px;
    padding:9px 2px;
    border-bottom: 1px solid #eee;
    
    display: flex;
    flex-flow: row wrap;
}

.tablink {
    padding:6px 10px;
    font-size: 14px;
    cursor:pointer
}

.tablink > * {
    padding:6px 10px;
}

.current {
    color:#06c
}

.tablink:hover {
    border-radius:4px;
    background-color:#eee;
}

.checkbox-label {
}

.checkbox-label > span  {
    width:60px;
    height:40px;
    text-align:center;
    display:inline-block;
    color:white;
    border: 1px solid black;
    padding: 9px;
    background-color: #aaa;
    cursor: pointer
}


.checkbox-label input:checked ~ span {
    background-color: #06c;
}

.decor-checkbox {
    display:none
}

/* Events table */

.event-row {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:flex-start;
    border-bottom: 1px solid #cbcbcb;
}

.events .event-row:nth-child(even) {
    background-color: #f5f5f7;
}

.event-header {
    font-weight:bold;
    border-bottom: 1px solid #333;
}

@media all and (max-width: 503px) {
    .event-header {
        display:none
    }
}

.event-row > div {
    text-align:center;
    vertical-align:top;
    padding:8px 16px;
    width:120px
}

.event-row > div > p {
    margin:0
}

@media all and (max-width: 503px) {
    .event-time {
        font-weight:bold;
        text-align:left !important
    }
    
    .event-callsign {
        font-weight:bold;
        text-align:right !important
    }
    
    .event-location {
        font-weight:bold;
    }
    
    .event-command {
        font-weight:bold;
    }
}

.event-description {
    flex:6 4 280px;
    text-align:left !important
}

/* Simulations index */

.simulations-grid {
    display:flex;
    flex-flow: row wrap;
    justify-content:space-around
}

.simulation-course {
    font-size:14px;
    border-radius:8px;
    margin:10px;
    width:325px;
    transition: transform .16s; /* Animation */
}

.simulation-course:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .048);
}

.course-title {
    border-radius:8px 8px 0px 0px;
    background-image: radial-gradient(circle closest-corner at 50% -70%, #1A9E8F, #115B9E);
    color:white;
    padding:10px;
    height:150px;
}

.course-details {
    padding:16px;
    border-radius:0 0 6px 6px;
    background-color:white;
    height:180px;
    position: relative;
}

.course-details * {
    margin:0 0 0.5em;
    line-height:1.3em;
}

.course-details p:last-child {
    position: absolute;
    bottom: 10px;
}

.simulation-groups-container {
    display:flex;
    flex-flow: row wrap;
}

.simulation-groups-container > div > a {
    display:block;
    padding:6px 10px;
    margin:4px;
    border-radius:8px;
    background-color:rgba(0,0,0,0.2)
}

.simulation-groups-container > div > a:hover {
    text-decoration:none;
    background-color:rgba(0,0,0,0.45)
}

.simulation-groups-container > div > a, .simulation-group p {
    color:white;
}

.simulation-group a {
    font-weight:bold;
    display:block
}

:target td {
    background-color: #f5f5f7;
}

.clear-background {
    background-color:#F5F5F5;
    padding:20px;
    height:100%
}

#home {
    width:100%;
    height:100%;
    background-image: radial-gradient(circle at bottom right, #19604D, #0E2E4A, #00070F);
    position: relative;
}

#home > div {
    position: absolute;
    top: 50%;
    left: 50%;
    width:100%;
    transform: translate(-50%, -50%);
}

#home > div > div > div {
    width:calc(50% - 30px);
    min-width:200px;
    margin:15px
}

#home-logo {
    background-image: url("/logo.svg");
    background-repeat: no-repeat;
    background-size: 180px 218px;
    background-position: center center
}

#home-text h1, h3 {
    margin-top:0;
    margin-bottom:0;
    padding:0;
    font-weight:normal
}

#home-text h1, #home-text p {
    color:white
}

#home-text h1 {
    font-size:36px;
    font-weight:510
}

#home-text h3 {
    font-size:21px;
    color:#959595
}

/* Index page */
.reader-button {
    margin:10px;
    width:130px;
    height:34px;
    text-align:center;
}

.reader-button:hover {
    transform: scale(1.02);
}

.reader-button a {
    width:130px;
    transition: transform .16s; /* Animation */
    background: linear-gradient(#42a1ec,#0070c9);
    border-color: #07c;
    border-radius:17px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding:4px 30px;
    display:block;
    font-size:16px;
    color:white;
    text-decoration:none;
}

.trafficDensityIndicator {
    display:flex;
    flex-direction: row;
    padding:0px;
    justify-content:center;
}

.trafficDensityIndicator > div {
    height:20px;
    width:8px;
    border-radius:4px;
    margin:4px;
}

.trafficDensityIndicator .on {
    background: linear-gradient(#735EF2,#E548DA);
}

.trafficDensityIndicator .off {
    background-color:#e5e5e5
}

.attendeesAndPilots > div {
    font-size:13px;
    color:#999 !important;
    text-align:center
}

/* Forms */

select {
    width: 120px;
    height: 30px;
    border: 1px solid #999;
    background-color: #eee;
    border-radius: 5px;
    width:100%;
}

label {
    line-height:18px;
    padding:5px 0px;
    margin:0;
}

input, textarea {
    border-radius:4px;
    border:1px solid #d2d2d6;
    font-size:14px;
    line-height:18px;
    padding:5px 10px;
    margin:0px;
    width:100%;
}

button {
    font-size:14px;
    padding:5px 10px;
    border-radius: 5px;
    background: #0071e3;
    color: #fff;
    border:none
}

.input-wrapper {
    margin:4px;
    width:calc(50% - 20px);
    min-width:300px
}

/* Callout */

.callout {
    background-color: rgba(0,102,204,.1);
    border: 1px solid rgba(0,102,204,.2);
    padding: .9375rem 20px;
    border-radius: 4px;
    margin: 32px 0 16px;
}

/* Link button */

.link-button {
    background-color: white;
    border-radius: 7px;
    color:#115B9E !important;
    padding:6px 14px;
}

.link-button:hover {
    text-decoration:none
}

.link-button:active {
    background-color: #eee;
}

/* Feedback */

.feedback {
    margin: 8d0px 0px
}

.feedback ul {
    list-style-type: none;
    padding:0px;
}

.feedback li {
    border-bottom: 1px solid #d2d2d7;
}

.feedback .comment {
    padding: .3125rem .5625rem;
    border-radius: .25rem;
    color: #1d1d1f;
    background-color: #ecf2f7;
    margin:1em 0px 1em 60px;
}