@media (min-width:1161px){
  .container {padding:0 30px;}
}

@media (max-width:1160px){
  .container {padding:0 30px;}
}

footer {background:rgba( 0,0,0, .05 );}

.hubheader {background:var(--brand-green); border-bottom:1px solid rgba( 0,0,0, .2 );}
.hubheader .container {display:flex; align-items:center;}
.hubheader .spacer {flex:1;}
.hubheader .logo {padding:20px 0;}
.hubheader .logo img {height:60px;}
.hubheader .burger {font-size:24px; color:white;}

.hubnav .inner {display:flex;}
.hubnav a,
.hubnav .item {display:inline-flex; align-items:center; gap:10px; padding:10px 20px; border-left:1px solid rgba( 0,0,0, .2 ); text-decoration:none; color:white;}
.hubnav .item {border:0; background:none; color:rgba( 255,255,255, .5 );}
.hubnav a:hover {background:rgba( 0,0,0, .1 );}
.hubnav a .badge {padding:3px 6px; border-radius:5px; background:rgba( 0,0,0, .5 ); color:rgba( 255,255,255, .75 ); font-size:11px; line-height:140%;}

@media (min-width:901px){
  .show-mobile {display:none;}
  .hubnav .close {display:none;}
}

@media (max-width:900px){
  .hide-mobile {display:none;}

  .hubnav.hide-mobile {display:flex; transition:opacity .2s;}
  .hubnav.hide-mobile:not(.open) {opacity:0;}
  .hubnav.hide-mobile .inner {transition:transform .2s;}
  .hubnav.hide-mobile:not(.open) {transform:translateX(100%);}

  .hubnav {position:fixed; z-index:1; right:0; top:0; bottom:0; width:100%; background:rgba( 0,0,0, .2 );}
  .hubnav .close {position:absolute; z-index:2; top:40px; right:32.5px; font-size:24px; color:white;}
  .hubnav .inner {position:absolute; right:0; top:0; bottom:0; width:90%; padding-top:80px; background:var(--brand-green); flex-direction:column;}
}

.nomheader {padding:20px 0; background:rgba( 0,0,0, .05 );}
.nomheader .container {display:flex; flex-direction:row; align-items:center; justify-content:flex-end; gap:20px;}
.nomheader .total {display:flex; flex-direction:row; align-items:center; gap:10px;}
.nomheader .total i {color:rgba( 0,0,0, .35 );}

section.nominations {padding:30px 0;}

.flex-header {display:flex; align-items:center; justify-content:space-between; gap:30px;}

.flex-header .actions {display:flex; align-items:center;}

@media (min-width:901px){
  .flex-header .actions .part:not(:first-child):before {content:'|'; margin:0 15px; color:rgba( 0,0,0, .2 );}
  .flex-header .actions {flex-wrap:wrap;}
  .flex-header {margin-bottom:1em;}
  .flex-header h2 {margin-bottom:0;}
}

@media (max-width:900px){
  .flex-header .actions {flex-direction:column; align-items:flex-start; gap:5px; width:100%; padding:15px; background:rgba(0,0,0, .05);}
  .flex-header .actions .part:before {content:'\f105'; margin:0 8px 0 0; font-family:var(--font-awesome); font-weight:bold; color:rgba( 0,0,0, .25 );}
}

@media (max-width:900px){
  .flex-header {flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:10px; margin:0 0 1em 0;}
  .flex-header h2 {margin:0;}
}

table[data-groups] {width:100%; margin:0 0 20px 0;}
table[data-groups] tr.inactive {/*background:rgba( 0,0,0, .05 ); color:rgba( 0,0,0, .5 );*/}
table[data-groups] input[type="checkbox"] {vertical-align:middle;}
table[data-groups] th.shrink,
table[data-groups] td.shrink {width:1px;}
table[data-groups] th.price,
table[data-groups] td.price {text-align:right;}
table[data-groups] tr:nth-child(2n-1) {background:#daffd8;}
table[data-groups] tr th {background:var(--brand-green) !important; border-color:rgba( 0,0,0, 0 ) !important;}
table[data-groups] tr td {border-bottom:0 !important; border-top:0 !important;}
table[data-groups] tr td:first-child {border-left:0 !important;}
table[data-groups] tr td:last-child {border-right:0 !important;}
table[data-groups] tr.selected {/*background:#daffd8;*/ background:#ffc;}
table[data-groups] tr.selected td {border-color:rgba( 0,0,0, .35 ) !important;}
table[data-groups] tr.selected td {border-top:1px solid !important; border-bottom:1px solid !important; border-left:0 !important; border-right:0 !important;}
table[data-groups] tr.selected td:first-child {border-left:1px solid rgba( 0,0,0, .35 ) !important;}
table[data-groups] tr.selected td:last-child {border-right:1px solid rgba( 0,0,0, .35 ) !important;}
table[data-groups] td.nowrap {white-space:nowrap;}
table[data-groups] td:last-child {padding-right:10px;}

@media (max-width:900px){
  table[data-groups] {display:none;}
}

div[data-groups-mobile] {display:flex; flex-direction:column; gap:5px; width:100%;}
div[data-groups-mobile] .group-mobile:not(.open) .details {display:none;}
div[data-groups-mobile] .group-mobile .details {display:flex; flex-direction:column; padding:2px; border:1px solid rgba( 0,0,0, .5 );}
div[data-groups-mobile] .group-mobile .details .item {display:flex; align-items:center; gap:15px; padding:8px;}
div[data-groups-mobile] .group-mobile .details .item .label {flex:1; width:50%; padding:0 5px; font-weight:600;}
div[data-groups-mobile] .group-mobile .details .item .value {text-align:right;}
div[data-groups-mobile] .group-mobile .details .item:nth-child(2n) {background:rgba( 0,0,0, .02 );}
div[data-groups-mobile] .group-mobile .name {display:flex; align-items:center; gap:10px; padding-right:10px; border:1px solid rgba( 0,0,0, .5 );}
div[data-groups-mobile] .group-mobile .name strong {flex:1; padding:8px 8px 8px 4px;}
div[data-groups-mobile] .group-mobile .name .status {align-self:stretch; display:flex; align-items:center;}
div[data-groups-mobile] .group-mobile .name .status label {display:flex; align-items:center;}
div[data-groups-mobile] .group-mobile .name > i {align-self:stretch; display:flex; align-items:center; padding:8px 10px; background:rgba( 0,0,0, .05 ); border-right:1px solid rgba( 0,0,0, .2 );}
div[data-groups-mobile] .group-mobile.open {margin-bottom:5px;}
div[data-groups-mobile] .group-mobile.open .name {border-bottom:0;}
div[data-groups-mobile] .group-mobile.open .name .fa-caret-down {display:none;}
div[data-groups-mobile] .group-mobile:not(.open) .name .fa-caret-up {display:none;}
div[data-groups-mobile] .group-mobile.selected .name {background:#ffc;}

@media (min-width:901px){
  div[data-groups-mobile] {display:none;}
}

table.cart {--border-color:var(--brand-leaf-green); width:100%; margin:0 0 20px 0;}
table.cart.hidden {display:none;}
table.cart tfoot {font-weight:bold;}
table.cart .price {text-align:right;}
table.cart tbody tr td {border:1px solid var(--border-color) !important; border-left:0 !important; border-right:0 !important;}
table.cart tbody tr td:first-child {border-left:1px solid var(--border-color) !important;}
table.cart tbody tr td:last-child {border-right:1px solid var(--border-color) !important;}
table.cart tbody tr:not(.intakerow):not(:last-child) td {border-bottom:1px solid rgba( 0,0,0, .1 ) !important;}
table.cart tfoot tr td {border:0 !important;}

table.cart tr.studentrow th,
table.cart tr.studentrow td {background:var(--brand-leaf-green) !important; color:white; font-weight:600;}
table.cart tr.studentrow th {font-weight:600;}
table.cart tr.intakerow th,
table.cart tr.intakerow td {background:rgba( 0,0,0, .1 ) !important; border-right:0 !important; border-bottom:1px solid rgba( 0,0,0, .2 ) !important; color:rgba( 0,0,0, .9 );}
table.cart tr.intakerow th {font-weight:600;}
table.cart tr.intakerow td a {color:rgba( 0,0,0, .5 ); text-decoration:none; font-size:11px;}
table.cart tr.intakerow td a:hover {text-decoration:underline;}
table.cart .price-text {color:rgba( 0,0,0, .5 );}
table.cart .price-free {color:rgba( 0,0,0, .5 ); text-decoration:line-through;}
table.cart .remove a {color:rgba( 0,0,0, .5 ); font-size:11px; line-height:140%;}

p.empty {font-weight:normal;}
p.empty.hidden {display:none;}

.mobile-checkout {position:fixed; bottom:0; left:0; width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 10px 10px 20px; background:var(--brand-leaf-green); transition:transform .1s; color:white;}
.mobile-checkout .totalCost {font-weight:600; text-align:center;}
.mobile-checkout:not(.visible) {transform:translateY(100%);}

@media (min-width:901px){
  .mobile-checkout {display:none;}
}

#payment-element {width:100%; margin:0 0 20px 0;}
#payment-message {margin:0 0 20px 0; color:red;}

form {display:flex; flex-direction:column; align-items:flex-start; gap:10px;}

form button {display:flex; align-items:center; gap:10px;}
form button:disabled,
form button:disabled:hover {opacity:1; background:rgba( 0,0,0, .5 ); border-color:rgba( 0,0,0, 0 ); cursor:default;}
form button:not(.submitting) i {display:none;}

.field {display:flex; flex-direction:column; gap:5px;}
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {padding:8px; border:1px solid rgba( 0,0,0, .2 );}

.tag {display:inline-flex; align-items:center; gap:7px; padding:5px 10px; border-radius:3px; background:rgba( 0,0,0, .05 ); font-size:11px; line-height:140%; color:rgba( 0,0,0, .7 ); text-align:left;}
.tag.tag-complete {background:var(--brand-leaf-green); color:white;}
.tag.tag-nominated {background:var(--brand-leaf-green); color:white;}
.tag.tag-paid {background:var(--brand-leaf-green); color:white;}
.tag.tag-paid i {color:white;}
.tag.tag-unpaid {background:var(--brand-gold); color:white;}
.tag.tag-unpaid .fa-exclamation-triangle {color:white;}

.students {display:flex; flex-direction:column; gap:20px;}

.student {display:flex; flex-direction:column; gap:20px; padding:15px; background:rgba( 0,0,0, .05 );}
.student .name {font-size:16px; line-height:140%; font-weight:bold;}
.student .intake {display:flex; align-items:center; gap:20px;}
.student .tag {display:inline-flex; align-items:center; gap:7px; padding:5px 10px; border-radius:3px; background:rgba( 0,0,0, .05 ); font-size:11px; line-height:140%; color:rgba( 0,0,0, .7 );}
.student .tag-complete {background:var(--brand-leaf-green); color:white;}

.message {display:flex; margin:0 0 10px 0; padding:20px; background:#ffc;}

table.invoices {width:100%;}
table.invoices .price {text-align:right;}
table.invoices .shrink {width:1px;}
table.invoices .nowrap {white-space:nowrap;}