.accordion {margin: 0 0 35px 0}
  fieldset {margin: 0 0 5px 0; padding: 0 !important}
  .accordion .accordion-row,
  .accordion fieldset {padding: 10px 20px !important}
    .accordion .accordion-row .expander {background-color: var(--border); position: relative; padding-left: 35px}
    .accordion .accordion-row .expander::before {content: ''; width: 25px; height: 25px; background: transparent url(../images/accordion-arrow-right.png) 50% / 100% no-repeat; transform-origin: center; transition: var(--animtime); left: -14px; position: absolute; top: 13px}
    .accordion .accordion-row.active .expander::before {transform: rotate(180deg);}
      .accordion .accordion-row .expander h3 {padding: 13px 0 13px 0; margin: 0; user-select: none; cursor: pointer;}
    .accordion .accordion-row .expander-target {display: none; background: var(--white); border-left: 20px var(--white) solid; border-right: 20px var(--white) solid; border-top: 1px var(--white) solid; border-bottom: 1px var(--white) solid;}
    .accordion.expand-first .accordion-row:first-child .expander-target {display: block}
      .accordion .accordion-row .expander-target .accordion-content {}

.box-title {background:#31302Eb3; border-radius: 10px; padding: 20px 30px; margin-bottom: 20px;}
  .box-title h1 {color: white; margin: 0;}

.greeting {}
  .greeting h5 {font-size: 1.57rem; font-weight: normal; line-height: 1; color: var(--dark-grey-text); margin: 0 0 5px 0}

.high-level-status {}
  .high-level-status h2 {font-size: 2.42rem; line-height: 2.8rem; margin: 0 0 30px 0}
    .high-level-status h2 span {break-inside: avoid; display: inline-block;}

.cards {overflow: hidden; margin-bottom: 16px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px;}
.cards.card-size-2 {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;}
  .cards .card {float: left; width: 100%; margin: 0; border-radius: 20px; padding: 24px; background-color: var(--white); position: relative; min-height: 140px}
  .cards .card:nth-child(3n) {margin-right: 0}
  .cards .card:nth-child(3n+1) {clear: both}
  .cards .card-create {background-color: var(--red)}
  .cards .card-enter {background-color: var(--red)}
  .cards .card-manage {background-color: var(--blue)}
  .cards .card-complete {background-color: var(--green)}

  .cards.sub-cards .card {background: #6f6f6f4d;}
  .cards.sub-cards .card h3 {font-size: 20px;}

  .cards .card .card-icon {position: absolute; width: 60px; height: 60px; background-color: var(--red); border-radius: 20px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); right: 24px; top: 24px; font-size: bold; transition: all 100ms}
  .cards .card:hover .card-icon {box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); top: 26px; right: 22px}
    .cards .card .card-icon span {display: none; position: absolute; width: 24px; height: 24px; line-height: 24px; color: #000; border-radius: 4px; background-color: var(--white); top: -10px; right: -10px; text-align: center}
  .cards .card-create .card-icon,
  .cards .card-enter .card-icon,
  .cards .card-manage .card-icon,
  .cards .card-complete .card-icon {background: rgba(0, 0, 0, 0.5);}
  .cards .card-icon.icon-create {background-image: url(../images/create.png); background-size: 30px 30px; background-repeat: no-repeat; background-position: 50%}
  .cards .card-icon.icon-manage {background-image: url(../images/manage.png); background-size: 30px 30px; background-repeat: no-repeat; background-position: 50%}
  .cards .card-icon.icon-complete {background-image: url(../images/complete.png); background-size: 30px 30px; background-repeat: no-repeat; background-position: 50%}
  
  .cards .card-create .card-icon span {color: var(--red)}
  .cards .card-enter .card-icon span {color: var(--red)}
  .cards .card-manage .card-icon span {color: var(--blue)}
  .cards .card-complete .card-icon span {color: var(--green)}

  .cards .card-create .card-icon {}
  .cards .card-enter .card-icon {}
  .cards .card-manage .card-icon {}
  .cards .card-complete .card-icon {}

  .cards .card .see-more-link {position: absolute; bottom: 0; left: 0; top: 0; right: 0;}
  .cards .card .see-more-link .see-more-text {font-size: 14px; position: absolute; bottom: 24px; left: 24px;}

  .cards .card h3 {color: var(--black); font-size: 1.5rem; line-height: 1; margin: 0 0 14px 0;}
  .cards .card a {text-decoration: none; color: var(--white); color: var(--red); font-size: 1rem; font-weight: bold}

  .cards .card-create h3,
  .cards .card-enter h3,
  .cards .card-manage h3,
  .cards .card-complete h3 {color: var(--white)}
  .cards .card-create a,
  .cards .card-enter a,
  .cards .card-manage a,
  .cards .card-complete a {color: var(--white)}

  .content {}
    .content-inner {}

p.important {color: #6f6f6f;}
p.important::before {content: ''; height: 22px; width: 22px; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url(../images/icon-notice.svg); display: inline-block; margin-right: 10px; margin-bottom: -6px;}

fieldset {border: none; padding: 0; margin: 0}


.tabs {}
.tabs .tabs-buttons {}
  .tabs .tabs-buttons > li {display: inline-block; margin: 0 4px 0 0; padding: 10px; border-radius: 5px; background-color: var(--white); cursor: pointer;}
  .tabs .tabs-buttons > li:first-child {}
  .tabs .tabs-buttons > li.active {background-color: var(--trim); color: var(--white)}
  .tabs .tabs-buttons > li.active + li {}
.tabs .tabs-contents {}
  .tabs .tabs-contents > li {display: none}
  .tabs .tabs-contents > li.active {display: block}


table {margin: 24px 0}
  table th,
  table td {font-weight: normal; text-align: left; padding: 14px; font-size: 0.8rem; line-height: 1; border-top: 2px solid var(--background)}
  table th {}
  table td {}
  table tr.debate-pending {background-color: var(--border)}
  table tr.debate-accepted {background-color: var(--button-green-back)}
    table tr.debate-accepted .button,
    table tr.debate-accepted .ind-adj-status {background-color: transparent;}
  table tr.debate-pending-postponement {background-color: var(--button-yellow-back)}

  table tr.debate-unassigned {background-color: var(--trim)}
  table tr.debate-resulted {background-color: var(--button-blue-back)}
  table tr.debate-auto-resulted {background-color: var(--button-green-back)}
  table tr.debate-auto-resulted-forfeit {background-color: var(--button-green-back)}
    table tr.debate-resulted .button,
    table tr.debate-resulted .ind-adj-status {background-color: transparent;}

.adj-replacement-indicator {display: inline-block; padding: 4px; color: var(--trim); font-weight: bold}


.main-container main .list {}
.main-container main .list ul li {border-radius: 4px; background-color: var(--white); margin: 0 0 2px 0; overflow: hidden; padding: 4px}
.main-container main .list ul li:hover {background-color: var(--trim); color: var(--sticky-white)}
.main-container main .list ul li:hover * {color: var(--sticky-white)}
.main-container main .list ul li:hover a {background-color: transparent;}
.main-container main .list ul li a {}
.main-container main .list ul li .title {float: left}
.main-container main .list ul li a > .title {float: none}
.main-container main .list ul li .actions {float: right; margin: 0;}
.main-container main .list ul li .actions a,
.main-container main .list ul li .actions span.actions {display: inline-block;}


table.report-table {}
table.report-table th {padding: 4px; background-color: var(--trim); color: var(--white); text-align: left;}
table.report-table td {padding: 4px; vertical-align: top}
table.report-table tr:nth-child(2n) td {background-color: var(--white)}

table.sort th.col-title {cursor: pointer; padding: 8px 26px 8px 4px; background: var(--trim) url(../images/sort.png) calc(100% - 4px) 50% / 14px 14px no-repeat; border-right: 1px solid var(--white)}
table.sort th.col-title:last-child {border-right: none}
table.sort tr.filter {}
  table.sort tr.filter th {background-color: transparent;}
  table.sort tr.filter th input {max-width: 100%; width: 80px; height: 100%; border: none; padding: 0}
table.sort th.sort {background-color: var(--blue)}
table.sort th.sort.sort-asc {}
table.sort th.sort.sort-desc {}