/* Want the entire document to extend to the bottom of the page even if it doesn't need to so outside menu clicks still close the menu. */
html {
    height: 100%;
    overflow-wrap: anywhere;
    
    /* Prevent scrolling behind an open modal. */
    &.modal-open {
        overflow: hidden;
    }
}

/* See the above comment about the HTML - only difference here is the body can grow beyond the visible page and allow for scrolling. */
body {
    min-height: 100%;
    background-color: #f6f6f6;
}

/* Override the w3 hr version to be a bit darker. */
hr {
    border-top: 1px solid #d0d0d0;
}

/* Convenience class for striking through text. */
.strike-text {
    text-decoration: line-through;
}

/* Mega button. */
.mega-button {
    background-color: #575757;
    color: #ffffff;
    font-size: 18px;
    text-decoration: none;
    
    /* Make the create account button a fancy green color. */
    &.create-account-button {
        background-color: #42a743;
    }
}

/* Application logo - rainbow effect. */
.application-logo {
    color: transparent;
    background-clip: text;
    background-image: linear-gradient(
        90deg,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 154, 0, 1) 10%,
        rgba(208, 222, 33, 1) 20%,
        rgba(79, 220, 74, 1) 30%,
        rgba(63, 218, 216, 1) 40%,
        rgba(47, 201, 226, 1) 50%,
        rgba(28, 127, 238, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%,
        rgba(251, 7, 217, 1) 90%,
        rgba(255, 0, 0, 1) 100%
    );
}

/* External jumbo header. */
.external-jumbo-header {
    background-color: #303030;
    color: #ffffff;
    padding: 8px 16px;
    text-align: center;
    
    & .application-logo {
        display: inline-block;
        font-size: 48px;
        margin-top: 0px;
    }
    
    & .mega-button {
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
    }
    
    /* Make the external system message top margin a bit smaller than the default. */
    & .system-message {
        margin-top: 7px;
    }
}

/* Landing page group header such as "features" or "pricing". */
.landing-page-group-header {
    margin-left: 20px;
    margin-right: 20px;
    text-align: center;
}

/* Landing page card. */
.landing-page-card {
    margin: 16px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
}

/* Landing page card header. */
.landing-page-card-header {
    padding: 8px 16px;
    color: #ffffff;
    background-color: #37435f;
    text-align: center;
}

/* Landing page card body. */
.landing-page-card-body {
    background-color: #ffffff;
    padding: 0px 16px;
    overflow: auto; 
    
    & img {
        width: 100%;
        margin-bottom: 16px;
    }
}

/* Pricing card parent.  */
.pricing-card-parent {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Pricing specific card. */
.pricing-card {    
    /* Make this card header a fancy color. */
    & .landing-page-card-header {
        background-color: #285acf;
    }
    
    /* Add some padding to the create account button because it's the last element in the container. */
    & .create-account-button {
        margin-bottom: 16px;
    }
    
    /* Price display. */
    .pricing-price {
        display: inline-block;
        margin: 10px 20px;
    }
    
    /* Price amount. */
    .price-amount {
        font-size: 22px;
    }
    
    /* Price frequency. */
    .price-frequency {
        font-size: 12px;
    }
}

/* External small page. */
.external-small-page {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 16px;
    padding: 0px 16px;
}

/* External small page header. */
.external-small-page-header {
    padding: 8px 16px;
    color: #ffffff;
    background-color: #37435f;
    text-align: center;
}

/* External small page body. */
.external-small-page-body {
    background-color: #ffffff;
    padding: 16px;
    border: 1px solid #cccccc;
    overflow: auto;
}

/* Extra details on an external page such as the create account page. */
.external-page-top-level-details {
    font-size: 13px;
}

/* Success and failure messages. */
.js-failure-message {
    margin-bottom: 16px;
    padding: 0px 16px;
    color: #ffffff;
    background-color: #f44336;
    overflow: auto;
}
.js-warning-message {
    margin-bottom: 16px;
    padding: 0px 16px;
    color: #000000;
    background-color: #ffc107;
    overflow: auto;
}
.js-success-message {
    margin-bottom: 16px;
    padding: 0px 16px;
    color: #ffffff;
    background-color: #4caf50;
    overflow: auto;
}
.th-failure-message {
    margin-bottom: 16px;
    padding: 0px 16px;
    color: #ffffff;
    background-color: #f44336;
    overflow: auto;
}
.th-warning-message {
    margin-bottom: 16px;
    padding: 0px 16px;
    color: #000000;
    background-color: #ffc107;
    overflow: auto;
}
.th-success-message {
    margin-bottom: 16px;
    padding: 0px 16px;
    color: #ffffff;
    background-color: #4caf50;
    overflow: auto;
}

/* Button bar at the bottom of forms. */
.form-submit-button-bar {
    float: right;
    
    /* Add a margin right to all the button bar children except the last. */
    & > *:not(:last-child) {
        margin-right: 16px;
    }
}

/* Normal button. */
.normal-button {
    color: #ffffff;
    background-color: #616161;
}

/* Breadcrumbs. */
.breadcrumbs {
    margin: 16px;
    padding: 0px 16px;
}

/* Footer. */
.footer {
    margin-top: 16px;
    padding: 0px 16px;
    text-align: center;
    font-size: 12px;
    font-family: monospace;
    overflow: auto;
}

/* Home page body. */
.home-page-body {
    padding-top: 16px;
    padding-left: 16px;
    padding-right: 16px;
    overflow: auto;
}

/* Primary page header. */
.primary-page-header {
    display: flex;
    padding: 8px 16px;
    color: #ffffff;
    background-color: #375f53;
    vertical-align: middle;
    margin-left: 16px;
    margin-right: 16px;
    margin-top: 16px;
    margin-bottom: 0px;
    
    /* Vertical align all of the header children. */
    & > * {
        vertical-align: middle;
        align-self: center;
    }
    
    /* Size the header icons. */
    & > i {
        margin-right: 10px;
    }
    
    /* Make room on the right of the header title for other buttons. */
    & .primary-page-header-title {
        margin-right: 16px;
        
        /* Reduce the size of the friend identifier because email or name could be long-ish. */
        &.friend-identifier {
            font-size: 18px;
        }
    }
}

/* Button within the page header bar. */
.page-header-button {
    color: #000000;
    background-color: #ffffff;
    font-size: 12px;
    margin-left: auto;
    
    /* Unset the colors and width for the page header "delete" button. */
    &.page-header-delete {
        color: unset;
        background-color: unset;
        width: unset;
        margin-top: unset;
    }
    
    &.page-header-delete:hover {
        color: #ffffff !important;
        background-color: #c30000 !important;
    }
}

/* Primary page body. Commented out old parent box concept - can remove at some point. */
.primary-page-body {
    /* border: 1px solid #cdcdcd; */
    color: #000000;
    /* background-color: #ffffff; */
    margin-left: 16px;
    margin-right: 16px;
    /* padding: 16px; */
    padding-top: 16px;
    overflow: auto;
}

/* Internal navigation bar. */
.internal-nav {
    display: block;
    
    /* Remove all underlines from the children. */
    & * {
        text-decoration: none;
    }
    
    /* Pad the customer identifier to give space between it and the hamburger icon. */
    & .customer-identifier {
        padding-right: 8px;
    }
    
    /* Create session button. */
    & .create-session-button {
        color: #ffffff;
        background-color: #00851b;
    }

    /* Add a hover effect to the "create session" button in the navigation bar - this is based on the button color. */
    & .create-session-button:hover {
        box-shadow: 0px 0px 0px 2px #8bcc8f;
    }
}

/* Style the navigation menus. */
.internal-nav-menu {
    border-top: 1px solid #000;
    
    /* Set a width for the navigation menu icons due to them not all being the exact same size. */
    i {
        width: 17px;
    }
}

/* Place the desktop navigation menu on the very right side of the screen. */
#desktop-nav-menu {
    position: absolute;
    right: 0;
}

/* Pad the desktop screen navigation menu drop down on the right to make it wider than the text. */
#desktop-nav-menu .internal-nav-menu-item {
    padding-right: 90px;
}

/* Home page overview box for high level simple information. */
.home-page-overview-box {
    display: inline-block;
    border: 1px solid #acacac;
    margin-bottom: 16px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    
    & .box-header {
        background: #505050;
        color: #fff;
        font-size: 13px;
    }
    
    & .box-content {
        background: #ffedc4;
        padding-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
    }
    
    & .stat-box {
        display: inline-block;
        margin-bottom: 10px;
        margin-left: 5px;
        margin-right: 5px;
        border: 1px solid #d0d0d0;
        padding: 5px;
        background: #fffcf4;
        text-align: left;
    }
    
    & .stat-box-label {
        color: #585858;
        font-size: 13px;
    }
}

/* Home page data box (like upcoming goals, friends, recent sessions, etc). */
.home-page-data-box {
    margin-bottom: 16px;
    margin-left: 16px;
    margin-right: 16px;
    color: #000000;
    background-color: #ffffff;
    
    /* Home page data box header. */
    & .home-page-data-box-header {
        padding: 10px;
        color: #ffffff;
        background-color: #37435f;
        font-size: 20px;
        
        & i {
            margin-right: 16px;
        }
    }

    /* Home page data box body. */
    & .home-page-data-box-body {
        padding: 10px;
        border: 1px solid #acacac;
        
        /* Set the box background to help indicate there isn't any data. */
        &.no-data {
            background: repeating-linear-gradient(-45deg, #f4f4f4, #f4f4f4 2px, #ffffff 2px, #ffffff 10px);
        }
    }
    
    /* Make the box larger looking and center the text when no data exists. */
    & .home-page-data-box-no-data-message {
        margin-bottom: 70px;
        text-align: center;
    }
}

/* Set border around the entire input rather than just the bottom and add a small margin on the top. */
.w3-input {
    border: 1px solid #cccccc;
    margin-top: 3px;
    width: auto;
    max-width: 100%;
}

/* Checkboxes should have a specific color. */
.w3-check {
    accent-color: #616161;
}

/* Set the default "color" input type to be a minimum of 100px. */
.color-input {
    min-width: 100px;
}

/** Make sure select box inputs aren't ever too small. */
select.w3-input {
    min-width: 200px;
}

/* Keep some fields to 100% width by default. */
.w3-input[type="text"], .w3-input[type="email"], .w3-input[type="password"] {
    width: 100%;
}

/* Text fields focus outline should be a specific color. */
.w3-input[type="text"]:focus, .w3-input[type="email"]:focus, .w3-input[type="password"]:focus,
.w3-input[type="number"]:focus, .w3-input[type="date"]:focus, .w3-input[type="datetime-local"]:focus,
textarea:focus {
    outline-style: solid;
    outline-color: #37435f;
    outline-width: 1px;
}

/* Add a blur effect to everything behind the modal. */
.w3-modal {
    backdrop-filter: blur(2px);
}

/* Do not bold the table header text. */
.w3-table th {
    font-weight: normal;
}

/* Speed up the default opacity animation. */
.w3-animate-opacity {
    animation: opac 0.1s;
}

/* Add some margin to the bottom of the captcha element. */
.cf-turnstile {
    margin-bottom: 16px;
}

/* FAQ parent container. */
.faq-parent {
    padding-left: 5px;
    padding-right: 5px;
}

/* Individual FAQ. */
.faq {
    border-top: 1px solid #a5a5a5;
    
    .faq-question {
        color: #000000;
    }
    .faq-answer {
        color: #757575;
    }
}

/* Highlight any FAQ that is targeted via an ID anchor in the URL. */
.faq *:target {
    font-weight: bold;
}

/* Lens mode warning. */
.lens-mode-warning {
    text-align: center;
    background: #f9ab65;
    padding: 3px;
}

/* Consistent list styling for something like the "All XYZ" pages. */
.list-grid {
    border-bottom: 1px solid #aaaaaa;
    
    /* List grid row. */
    & > .list-grid-row {
        border-top: 1px solid #aaaaaa;
        border-left: 1px solid #aaaaaa;
        border-right: 1px solid #aaaaaa;
        background: #f9f9f9;
        font-size: 13px;

        /* Hover color for rows. */
        &:hover {
            background: #f2f2f2;
        }
        
        /* Make the list grid header look a bit different. */
        &.list-grid-header {
            font-weight: bold;
            background: #dddddd;
        }
        
        /* Add some right padding to each list grid cell. */
        & .list-grid-column {
            padding: 7px;
        }
    }
}

/* Used to truncate text and show an ellipsis instead of wrapping the text. */
.truncate {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block;
}

/* Color square for customer selected custom colors like for goals and instruments. */
.color-square {
    margin-right: 5px;
}

/* Password requirements. */
.password-requirements {
    font-size: 12px;
    border-left: 1px solid #dbdbdb;
    border-bottom: 1px solid #dbdbdb;
    border-right: 1px solid #dbdbdb;
    
    & i {
        color: #f44336;
        margin-right: 10px;
    }
    
    & i.passed {
        color: #4caf50;
    }
}

/* Select box for choosing a year. */
.year-select-box {
    display: inline-block;
    margin: 0px;
    background: #ffffff;
    font-size: 12px;
    margin-right: 16px;
    min-width: initial !important;
}

/* Basic form field. */
.field {
    margin-bottom: 16px;
    
    /* Form field label. */
    & > .field-label {
        display: block;
        background: #dddddd;
        color: #000000;
        padding: 5px;
        font-size: 12px;
        border: 1px solid #aaaaaa;
        
        & > span {
            display: inline-block;
        }
    }
    
    /* Form field content. */
    & > .field-content {
        padding: 7px;
        border-left: 1px solid #bfbfbf;
        border-right: 1px solid #bfbfbf;
        border-bottom: 1px solid #bfbfbf;
        background: #f9f9f9;
    }
}

/* Statistics specific form field. */
.stats-field {
    /* Stats field label. */
    & > .field-label {
        color: #000000;
    }
    
    /* Stats field content. */
    & > .field-content {
        font-size: 12px;
        padding: 7px;
    }
}

/* Form field checkbox. */
.field-checkbox {
    margin-bottom: 15px;
    margin-top: 7px;
    margin-left: 5px;
    margin-right: 5px;
}

/* Checkbox with inline text. */
.inline-checkbox {
    display: grid;
    grid-template-columns: 24px auto;
    
    & > .inline-checkbox-box {
        /* Nothing needed here yet. */
    }
    & > .inline-checkbox-text {
        padding-left: 8px;
    }
    & input {
        top: 0px;
    }
}

/* Icon link to navigate to another page specific to a form label. */
.form-label-link-icon {
    margin-left: 5px;
    font-size: 12px;
}

/* Session list date. */
.session-list-date {
    text-decoration: underline;
}

/* Session list time. */
.session-list-time {
    text-decoration: underline;
}

/* Time zone display. */
.time-zone-display {
    margin-left: 4px;
    margin-top: 4px;
    font-size: 12px;
}

/* Default textarea elements to expand vertically. */
textarea {
    width: 100% !important;
    resize: vertical;
    min-height: 100px;
}

/* Empty message shown when no result are returned from a friend search and the loading indicator. */
#friend-results-empty-message, #friend-results-loading-indicator {
    display: none;
}

/* Friend search results. */
#friend-results {
    display: none;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid #dbdbdb;
    
    & li {
        overflow: auto;
    }
    
    & li:hover {
        background: #efefef;
    }
    
    & li > * {
        display: inline-block;
    }
    
    & i {
        margin-right: 8px;
        color: #37435f;
    }
}

/* Friend search parent. */
.friend-search-parent {
    background: #ffffff;
    border: 1px solid #b3b3b3;
    padding: 10px;
}

/* Remove the default margin top from the friend search bar. */
#friend-search-bar {
    margin-top: 0px;
}

/* Add margin to the top of some friend search elements. */
#friend-results-loading-indicator, #friend-results-empty-message, #friend-results {
    margin-top: 16px;
}

/* Holds data about the friend that was clicked on the friend search page. */
.clicked-friend {
    text-decoration: underline;
}

/* Make a thing look clickable via a cursor pointer. */
.clickable {
    cursor: pointer;
}

/* No margin bottom. */
.no-margin-bottom {
    margin-bottom: 0px;
}

/* Class used to create an inline-block element. */
.inline-block {
    display: inline-block !important;
}

/* Text align right except on small screens. */
.align-right-except-small {
    text-align: right;
}

/* Reduce the font size of any dates/times. */
.date {
    text-decoration: underline;
}

/* Divider between a date and time. */
.date-time-divider {
    display: none;
}

/* Status box. */
.status-box {
    display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 12px;
    color: #000000;
    background-color: #e7e7e7;
    border: 1px solid #acacac;
    text-align: left;
    
    &.status-red {
        background-color: #f99;
        border: 1px solid #b00000;
    }
    
    &.status-orange {
        background-color: #ffda6a;
        border: 1px solid #9f7a0a;
    }
    
    &.status-green {
        background-color: #cdeeb3;
        border: 1px solid #2e8000;
    }
    
    &.status-yellow {
        background-color: #f5f7b3;
        border: 1px solid #a1a34b;
    }
}

/* Activity chart styling. */
.activity-chart-parent {
    display: block;
    height: 300px;
    background: #ffffff;
    border: 1px solid #aaaaaa;
    padding: 5px;
}

#go-to-instrument-link, #go-to-goal-link {
    display: inline-block;
    cursor: pointer;
    
    & i {
        color: #616161;
        margin-left: 5px;
    }
}

/* Override for a regular button that makes it a bit smaller. */
.edit-button {
    font-size: 12px;
    padding: 4px 8px;
}

/* Small trial indicator to remind the customer they're currently within a trial period. */
.trial-indicator {
    margin-left: 10px;
    border: 1px solid #3e3e3e;
}

/* Consistent styling for "no results" text across different pages. */
.no-results-text {
    color: #666666;
    font-style: italic;
    margin-left: 5px;
    margin-right: 5px;
}

/* System message (like a maintenance outage) shown to the customer. */
.system-message {
    color: #000000;
    background-color: #ffc107;
    border: 1px solid #bd910b;
    display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
    text-align: left;
    margin-bottom: 16px;
}

/* Loading spinner. */
.loading-spinner {
    border: 6px solid #cecece;
    border-top: 6px solid #606060;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
}

/* 360 degree spinning keyframe. */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Modal popup for things such as deleting an entity. */
.modal {
    border: 1px solid #515151;
    
    /* Modal header. */
    & .modal-header {
        color: #ffffff;
        background-color: #294584;
        padding: 10px;
        margin: 0px;
        
        /* Vertical align all of the modal header children. */
        & > * {
            vertical-align: middle;
        }
    }
    
    /* Modal body. */
    & .modal-body {
        padding: 16px;
        overflow: auto;
    }
    
    /* Modal close button. */
    & .modal-close-button {
        /* Nothing here right now. */
    }
}

.delete-modal .modal-header {
    background-color: #c30000;
}

/* Page section header for when there are multiple sections within a page. */
.page-section-header {
    font-size: 20px;
    margin-bottom: 10px;
    margin-left: 5px;
    margin-right: 5px;
    
    /* Add margin to the right side of any page section header icons. */
    & > i {
        margin-right: 10px;
    }
}

/* Selection option list such as choosing an instrument or goal. */
.selection-options > li {
    cursor: pointer;
}

/* Selection option hover to a specific gray color. */
.selection-options > li:hover {
    background-color: #f2f2f2;
}

/* Selected option box. */
.selected-option-box {
    display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
    margin-top: 7px;
    margin-bottom: 7px;
    font-size: 14px;
    color: #000000;
    background-color: #fff3e8;
    border: 1px solid #ecd3bc;
    text-align: left;
}

@media (max-width: 850px) {
    /* Made half page elements full page upon reaching this screen size. */
    .w3-half {
        float: left;
        width: 100%;
    }
}

@media (max-width: 600px) {
    /* Disable the button bar float right and align everything center. */
    .form-submit-button-bar {
        float: none;
        text-align: center;
        
        /* Display inline block all of the button bar children. */
        & > * {
            display: inline-block;
        }
        
        /* Add left and right spacing to links within the button bar. */
        & > a {
            margin-left: 16px !important;
            margin-right: 16px !important;
        }
        
        /* Make all the normal buttons full width. */
        & > .normal-button {
            width: 100%;
            margin-right: 0px !important;
        }
        
        /* Add a margin bottom to all the button bar children except the last. */
        & > *:not(:last-child) {
            margin-bottom: 10px;
        }
    }
    
    /* Align right on small screens. */
    .align-right-except-small {
        text-align: left;
    }
    
    /* Make the mega buttons full width on mobile. */
    .mega-button {
        display: block;
    }
    
    /* Make the page header buttons full width on mobile. */
    .page-header-button {
        width: 100%;
        margin-top: 10px;
    }
    
    /* Remove the friend results icons on mobile. */
    #friend-results {
        & i {
            display: none;
        }
    }
    
    /* Make the stat box full width on mobile. */
    .stat-box {
        width: 100%;
        margin-left: 0px !important;
        margin-right: 0px !important;
        
        /* Float the stat values to the right on mobile. */
        & .stat-box-value {
            float: right;
        }
    }
    
    /* Remove list grid header rows on mobile. */
    .list-grid {
        & .list-grid-header {
            display: none;
        }
    }
    
    /* Remove empty list grid columns but only on mobile. */
    .list-grid-column.empty {
        display:none;
    }
    
    /* Add extra margin to a modal on mobile so it isn't so close to the edges of the screen. */
    .w3-modal-content {
        margin: 0 40px;
        width: auto;
    }
    
    /* Line up the box sides in line with the parent edges to save space. */
    .home-page-data-box {
        margin-left: 0px;
        margin-right: 0px;
    }
    
    /* Reduce the margin top on mobile. */
    .primary-page-header {
        margin-top: 8px;
        padding: 10px;
        
        /* Allows for the 100% width on .page-header-button to actually wrap below the other elements. */
        flex-wrap: wrap;
    }
    
    /* Adjust the breadcrumbs on mobile. */
    .breadcrumbs {
        margin-top: 12px;
        margin-bottom: 12px;
        margin-left: 8px;
        margin-right: 8px;
        padding: 0px 8px;
    }
    
    /* Parent of a date/time and practice time within a session list - align it center on mobile. */
    .session-list-date-time, .session-list-practice-time {
        text-align: center;
        
        & br {
            display: none;
        }
    }
    
    /* Display the date and time divider on mobile. */
    .date-time-divider {
        display: inline-block;
    }
}