/* --- SC INTRO --- */
#full-width {
    padding: 20px 5px;
}
#features-menu {
    display: none;
}
#top-pane h1 {
    font-size: 60px;
}
.home-wrap {
    text-align: center;
}
h5 {
    max-width: 90%;
    margin: 0px auto;
    padding: 10px 0px;
}
img {
    max-width: 100%;
    height: auto;
}
.benefits {
    font-size: 24px;
    font-family: Roboto;
    color: #f05a28;
    line-height: 1em;
}
ul.phase-list {
    list-style-type: none;
    font: 18px Roboto,Arial,sans-serif;
    margin: 0px auto;
    padding-left: 0px;
    width: 80%;
}
ul.phase-list li {
    margin-bottom: 10px;
}
ul.phase-list a {
    font-weight: bold;
}
.theory-link {
    color: var(--flik-theory);
}
.theory-link:hover {
    border-bottom: 1px dashed var(--flik-theory);
}
.sc-link {
    color: var(--flik-orange);
    text-decoration: underline;
}
blockquote {
    font-size: 20px;
    line-height: 1.2em;
}

/* --- SC ARCHIVE --- */
.archive .page-container {
    padding: 10px;
}
#sc-filters {
    display: flex;
}
.sc-filter {
    padding: 7px 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.2s;
}
.sc-filter.selected {
    background-color: #333;
    color: #fff;
}
.sc-archive {
    display: flex;
    align-items: center;
    column-gap: 10px;
    padding: 6px 8px;
    margin-bottom: 2px;
    background-color: #eee;
    transition: .2s;
}
.sc-archive:hover {
    background-color: #ddd;
}
.sc-archive img {
    width: 28px;
}
/* --- SINGLE SC --- */


.drill-section.sc-tags {
    background-color: var(--flik-sc);
    color: #fd6ef2;
}

.type-sc div#main {
    font-size: 16px;
    background-color: var(--flik-background);
    margin: 0px 20px 10px;
    padding: 20px;
    border-radius: 15px;
}

#sc-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
#sc-breadcrumb a, #sc-breadcrumb span {
    padding: 5px 0px;
    color: var(--flik-orange);
    font-size: 15px;
}
#sc-breadcrumb a {
    text-decoration: underline;
}
#sc-breadcrumb a:hover {
    color: #333;
}
#sc-link-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
#sc-link-bar a {
    border: 1px solid #333;
    border-radius: 7px;
    padding: 5px 20px;
}
#sc-link-bar a:hover {
    color: #fff;
    background-color: var(--flik-orange);
}
.sc-week-tabs {
    display: flex;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    width: 100%;
    overflow-x: auto;
}
.week-tab {
    display: inline-block;
    flex: none;
    padding: 5px 10px;
    color: #333;
    border: 1px solid #888;
    border-radius: 5px;
    text-decoration: none;
}
.week-tab.active {
    color: #fff;
    border-color: var(--flik-orange);
    background-color: var(--flik-orange);
}
.week-tab:hover {
    background-color: var(--flik-orange);
    color: #fff;
}

/* --- V2 styles --- */

.noflex {
    flex: none;
}

#program-intro {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}
#program-info {
    width: 85%;
    display: grid;
    row-gap: 5px;
}
#program-info p {
    font-size: 18px;
    padding: 10px;
    background-color: #ffe599;
    border-radius: 10px;
    margin: 0px;
}
#program-info p.scv2-warning {
    color: #fff;
    background-color: var(--flik-orange);
    line-height: 1.5em;
}
#program-info label {
    display: flex;
    align-items: center;
}
#sc-program-header {
    display: grid;
}
#sc-program-header > div {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: right;
}
.sc-actions a img:hover {
    position: relative;
    top: -2px;
}
.sc-group {
    display: block;
}
.scv2-exercise {
    display: grid;
}
.sc-group, #sc-content > .scv2-exercise, #sc-content > .scv2-note {
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 25px;
}
.sc-group-grid .scv2-exercise {
    padding: 5px;
    border: 2px solid var(--flik-background);
}
.scv2-compact .scv2-video {
    display: none;
}
.scv2-exercise-details {
    margin-top: 12px;
}
.scv2-exercise-details h3 a {
    color: #333;
    font-size: 20px;
    font-weight: normal;
    text-decoration: underline;
}
.scv2-exercise-details p {
    font-size: 16px;
}
.scv2-compact .scv2-exercise-details p {
    margin: 0px;
}
h3.checked-exercise {
    display: flex;
    column-gap: 15px;
    align-items: center;
}
label.checked-exercise {
    text-align: center;
}
input.checkex {
    width: 25px;
    height: 25px;
}
.scv2-note {
    font-size: 16px;
    color: #333;
    margin: 10px 0px;
}
a.scv2-return {
    color: var(--flik-orange);
    text-decoration: underline;
    font-size: 18px;
}
.scv2-error {
    background-color: #f00;
    padding: 10px;
    color: #fff;
}
button.togglecompact, #sc-profile-form button {
    padding: 5px 10px;
}
a.button, .button a, #sc-profile-form button {
    background-color: var(--flik-orange);
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
}
.sc-dash-section {
    border: 1px solid #333;
    padding: 20px;
    margin-bottom: 20px;
}
#sc-program-diagram {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    flex-wrap: wrap;
    gap: 5px;
}
.sc-phase-card {
    border: 3px solid transparent;
    padding: 10px;
    border-radius: 10px;
}
.sc-phase-card.sc-phase-off1 {
    background-color: #ffe599;
}
.sc-phase-card.sc-phase-off2 {
    background-color: #ffd966;
}
.sc-phase-card.sc-phase-pre1 {
    background-color: #f1c232;
}
.sc-phase-card.sc-phase-pre2, .sc-phase-card.sc-phase-body {
    background-color: #e69138;
}
.sc-phase-card.sc-phase-seas {
    color: #fff;
    background-color: #F26A2B;
}
.sc-phase-card.sc-phase-peak {
    color: #fff;
    background-color: #DB364C;
}
.sc-phase-card.sc-current {
    border: 3px solid #333;
}
.sc-phase-card:hover {
    color: inherit;
    border: 3px solid var(--flik-orange);
    background-color: #fff;
}
.sc-phase-card h3 {
    color: inherit;
    font-size: 16px;
    font-weight: normal;
}
.sc-phase-seas, .sc-phase-peak {
    color: #fff;
}
.sc-program-chart {
    position: relative;
    margin: 10px 0px;
}
polygon.sc-phase-off1 {
    fill: #ffe599;
}
polygon.sc-phase-off2 {
    fill: #ffd966;
}
polygon.sc-phase-pre1 {
    fill: #f1c232;
}
polygon.sc-phase-pre2, polygon.sc-phase-body {
    fill: #e69138;
}
polygon.sc-phase-seas {
    fill: #F26A2B;
}
polygon.sc-phase-peak {
    fill: #DB364C;
}
.sc-phase-labels {
    width: 100%;
    height: 120px;
    display: grid;
    position: absolute;
    top: 25px;
    padding-top: 10px;
    font-size: 14px;
}
.sc-phase-labels a {
    text-decoration: underline;
    padding-left: 5%;
    position: relative;
}
.sc-phase-labels a:hover {
    top: -2px;
}
#sc-profile-levels {
    display: grid;
    gap: 5px;
}
#sc-profile-errors {
    color: #f00;
    font-weight: bold;
    margin-bottom: 10px;
}
.level-card {
    padding: 15px;
    background-color: #fff2ce;
    border-radius: 10px;
}
.level-card ul {
    padding: 0px 20px;
}
#sc-profile-form fieldset {
    margin: 10px 0px;
    border: 1px solid #333;
    padding: 10px;
}
#sc-profile-form table {
    width: auto;
    min-width: 280px;
}
#sc-profile-dates {
    display: grid;
    gap: 10px;
}
.sc-profile-date {
    display: grid;
    row-gap: 10px;
    background-color: #fff2ce;
    padding: 15px 40px;
    border-radius: 10px;
}
.sc-profile-date input {
    width: 120px;
    font-size: 16px;
}

/* --- End V2 styles --- */

.sc-expanded {
    background-color: #fff;
    border: 3px solid #ccc;
    padding: 5px;
    margin-top: 5px;
    border-radius: 10px;
}
.sc-expand-top {
    color: #fff;
    background-color: var(--flik-orange);
    display: flex;
    align-items: center;
    padding: 10px 0px;
}
.sc-expand-top img {
    width: 20px;
    cursor: pointer;
    margin: 0px 10px;
}
.sc-expand-top a {
    margin-left: 15px;
    text-decoration: underline;
}
.sc-expand-title {
    font-size: 16px;
}

.single-sc .video-item {
    margin-top: 15px;
}
.single-sc .video-thumb {
    position: relative;
    cursor: pointer;
}
.video-thumb img.play-icon {
  border-radius: 0px;
  position: absolute;
  top: calc(50% - 15px);
  left: calc(50% - 15px);
}

.sc-intro, .video-desc  {
    padding: 10px;
}
.video-desc {
    margin-top: 15px;
}
.single-sc .video-desc h3 {
    color: #333;
    font-weight: normal;
    font-size: 18px;
}
.video-desc img {
    display: block;
    margin: 10px;
}

.single-sc h4 {
    display: block;
    width: fit-content;
    border: none;
    font-size: 20px;
}
.sc-topnotes, .sc-note {
    display: flex;
    align-items: center;
    column-gap: 10px;
}
.sc-topnotes img, .sc-note img {
    width: 28px;
}
.sc-gridhead {
    margin-top: 10px;
}
.gridrow {
    display: flex;
    line-height: 1.7em;
}
.gridrow > span {
    flex: 1;
    text-align: center;
}
.gridrow span:nth-child(1) {
    min-width: 140px;
    text-align: left;
    padding-left: 10px;
}
span.sc-exercise-link {
    color: #333;
    display: flex;
    align-items: end;
    line-height: 1.5em;
    column-gap: 5px;
}
.sc-exercise-link img {
    width: 22px;
}
.sc-exercise:hover, .sc-exercise-link a:hover {
    text-decoration: underline;
}
.sc-exercise-link.sc-loading {
    background: url('../images/ajax-loader.gif') no-repeat right 8px top 8px;
}
.sc-exercise i {
    margin-left: 10px;
}
span.sc-head {
    color: #333;
    border: 1px solid #ddd;
    padding: 10px 5px;
}
.sc-title {
    display: block;
    font-size: 16px;
    line-height: 1.5em;
    padding: 8px 0px;
    color: var(--flik-orange);
}
.sc-reglink {
    color: var(--flik-sc);
}
.sc-reglink a {
    text-decoration: underline;
}
.sc-tags h4 {
    border-bottom: 1px solid;
}
.sc-tags .tags li a {
    background-color: #ffd1fc;
    color: var(--flik-sc);
}
.sc-tags .tags li a:hover {
    background-color: #f6aefb;
}

.next-posts, .prev-posts {
    background-color: var(--flik-sc);
}

.single-sc #what-next {
    margin-top: 20px;
    padding-top: 16px;
}

ul.sc-link-list {
    list-style-type: none;
    padding-left: 0px;
}

.sc-link-list li a {
    padding: 5px 10px;
    border: 1px solid var(--flik-orange);
    border-radius: 10px;
}

@media only screen and (min-width: 600px) {

.sc-group-grid {
    display: grid;
    grid-template-columns: 25% 25% 25% 1fr;
    gap: 10px;
}
.sc-group-grid h2, .sc-group-grid .scv2-note {
    grid-column: 1 / -1;
}
.scv2-exercise.scv2-has-video {
    grid-template-columns: 65% 1fr;
    column-gap: 10px;
    margin: 5px 0px;
}
.single-sc .video-thumb {
    width: 85%;
}
.sc-phase-labels {
    font-size: 16px;
}

}
@media only screen and (min-width: 750px) {

#sc-profile-levels {
    grid-template-columns: 33% 33% 1fr;
    gap: 10px;
}
#sc-program-header {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

}
@media only screen and (min-width: 900px) {
#full-width {
    padding: 20px 50px;
}
h5 {
    max-width: 70%;
}
#sc-content {
    width: 85%;
    font-size: 14px;
}
.gridrow span:nth-child(1) {
    min-width: 330px;
}
span.sc-head {
    padding: 5px;
}
}

@media only screen and (min-width: 1100px) {
}
@media only screen and (max-width: 400px) {
.sc-rot {
    writing-mode: tb;
    font-weight: 400;
    font-family: Roboto, Arial, sans-serif;
}
}