body {
    background-color: black;
}

p {
    color: #ffffff;
}

* {
    font-family: 'Oswald', sans-serif;
}

label {
    color: #ffffff;
    font-weight: 600;
}

h6, h5, h4, h3, h2, h1 {
    color: #BBD631;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
}

.button.expanded {
    display: block;
    width: 80%;
    margin-top: 1rem;
    margin-right: auto;
    margin-left: auto;
    color: black;
}

.button.hollow {
    color: #a2ba25;
    margin-top: 3.5rem;
}

form {
    padding: 1rem;
    border: none
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #ffffff;
    opacity: 1 /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #ffffff;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #ffffff;
}

[type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'],
textarea {
    background-color: #1D1D1D;
    color: #ccc;
    border: none;
    background-image: url('../img/funky-lines.png');
}

    [type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='url']:focus, [type='color']:focus, textarea:focus {
        background-color: #000000;
        color: #ffffff;
        background-image: url('../img/funky-lines.png');
    }

select {
    background-color: #1D1D1D;
    color: #ccc;
    border: none;
    background-image: url('../img/funky-lines.png');
}

    select:focus {
        background-color: #000000;
        color: #ffffff
    }

    select option {
        background-color: #000000;
        color: #ffffff
    }

label {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: .65rem;
    line-height: .9rem;
    padding-bottom: .35rem;
}

.lbl {
    padding-top: .35rem;
    padding-bottom: 0rem;
    font-size: .65rem;
    line-height: .9rem;
}

.far {
    padding: 0 .25rem;
    color: #ffffff;
    font-size: 1.5rem;
}

.swimlog .far {
    color: #BBD631;
}

.fa {
    padding: 0 .25rem;
    color: #ffffff;
    font-size: 1.5rem;
}

.fas {
    padding: 0 .25rem;
    color: #ffffff;
    font-size: 1.5rem;
}

.fal {
    padding: 0 .25rem;
    color: #ffffff;
    font-size: 1.5rem;
}

.wi {
    padding: 0 .25rem;
    color: #ffffff;
    font-size: 1.5rem;
}

.swimlog .wi {
    color: #BBD631;
}

.mobile-app-icon-bar {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    background: none;
}

    .mobile-app-icon-bar button {
        padding: 1.25rem;
        cursor: pointer;
    }

        .mobile-app-icon-bar button svg,
        .mobile-app-icon-bar button i,
        .mobile-app-icon-bar button img {
            font-size: 1.25rem;
            max-height: 1.25rem;
            max-width: 1.25rem;
        }

.sticky-topbar {
    width: 100%;
}

.mobile-nav-bar {
    background-color: rgba(0,0,0,0.8);
}

    .mobile-nav-bar a {
        color: #BBD631;
    }

.title-bar-text {
    font-size: 1.75rem;
    color: #BBD631;
}

.circle-graph {
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background-color: #1f1f1f;
    position: relative;
    -webkit-box-shadow: 2px 2px 0px 0px rgba(46,46,46,1);
    -moz-box-shadow: 2px 2px 0px 0px rgba(46,46,46,1);
    box-shadow: 2px 2px 0px 0px rgba(46,46,46,1);
}

    .circle-graph.gt-50 {
        background-color: #BBD631;
    }

.circle-graph-progress {
    content: "";
    position: absolute;
    border-radius: 50%;
    left: calc(50% - 130px);
    top: calc(50% - 130px);
    width: 260px;
    height: 260px;
    clip: rect(0, 260px, 260px, 130px);
}

    .circle-graph-progress .circle-graph-progress-fill {
        content: "";
        position: absolute;
        border-radius: 50%;
        left: calc(50% - 130px);
        top: calc(50% - 130px);
        width: 260px;
        height: 260px;
        clip: rect(0, 130px, 260px, 0);
        background: #BBD631;
        -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        transform: rotate(60deg);
    }

.gt-50 .circle-graph-progress {
    clip: rect(0, 145px, 260px, 0);
}

    .gt-50 .circle-graph-progress .circle-graph-progress-fill {
        clip: rect(0, 260px, 260px, 130px);
        background-color: #1f1f1f;
    }

.circle-graph-percents {
    content: "";
    position: absolute;
    border-radius: 50%;
    left: calc(50% - 210px/2);
    top: calc(50% - 210px/2);
    width: 210px;
    height: 210px;
    background: black;
    text-align: center;
    display: table;
    z-index: 4;
}

    .circle-graph-percents .circle-graph-percents-number {
        display: block;
        font-size: 6rem;
        font-weight: bold;
        padding-top: 3px;
        color: #BBD631;
    }

    .circle-graph-percents .circle-graph-percents-number-small {
        display: block;
        font-size: 4.5rem;
        font-weight: bold;
        padding-top: 3px;
        color: #BBD631;
    }


    .circle-graph-percents .circle-graph-percents-number-smaller {
        display: block;
        font-size: 3.75rem;
        font-weight: bold;
        padding-top: 3px;
        color: #BBD631;
    }

    .circle-graph-percents .circle-graph-percents-units {
        display: block;
        font-size: 1rem;
        font-weight: bold;
        text-transform: uppercase;
    }

.circle-graph-percents-wrapper {
    display: table-cell;
    vertical-align: middle;
    line-height: 0;
}

    .circle-graph-percents-wrapper span {
        line-height: 1;
    }

div.alert-validate p, ol, li label {
    color: red;
}

table {
    padding: .5rem 0 .5rem 0;
    -webkit-box-shadow: 1px 1px 0px 0px rgba(46,46,46,1);
    -moz-box-shadow: 1px 1px 0px 0px rgba(46,46,46,1);
    box-shadow: 1px 1px 0px 0px rgba(46,46,46,1);
    border-radius: 0px 0px 0px 0px;
}

    table tbody {
        background-color: #151515;
        border: none;
    }

        table tbody th {
            letter-spacing: 1px;
            padding: 0.9rem 0.625rem 0.25rem 0.5rem;
        }

        table tbody td {
            padding: .25rem .25rem .70rem .25rem;
        }

    table.swimlog {
        text-transform: uppercase;
        font-size: .8rem;
    }

    table.dashboard {
        text-transform: uppercase;
        font-size: .8rem;
    }

.NoSwimLogs p {
    padding-top: 1rem;
    color: red;
    text-align: center;
}

td.note {
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: #151515;
    font-size: .8rem !important;
    padding-top: 1rem;
    padding-bottom: 1rem;
}


table.swimlog tbody, th {
    background-color: #151515;
}

table.swimlog tbody, th {
    color: #ffffff;
}

table.swimlog td.data {
    color: #BBD631;
    font-size: 2rem;
    line-height: 1.7rem;
}

th.logdate {
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: left;
    color: #BBD631;
    font-size: 1.5rem;
}

table.dashboard tbody tr td.text-center {
    background-color: #151515;
}

table.dashboard td.data {
    color: #BBD631;
    font-size: 2rem;
}

.sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 500;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: rgba(31,31,31,0.93);
}

.last {
    padding-bottom: 40px;
}

.dashboard-badge {
    text-align: center;
    position: relative;
    z-index: 5000;
    margin-bottom: -50px;
}

    .dashboard-badge img {
        width: 75px;
        height: 75px;
    }

.dashboard-badge-name {
    text-align: center;
    color: #BBD631;
    margin-bottom: .1rem;
}

.sticky.is-stuck {
    z-index: 5;
    width: 100%;
}


/*-----Share Screen-------------*/

#modal-share {
    background-color: rgba(0,0,0,0.70);
}

.reveal .content {
    text-align: center;
    padding-top: 45%;
    padding-bottom: 45%;
}

.share-link {
    float: none !important;
    display: inline-block;
}

.button.success {
    background-color: #BBD631;
}

    .button.success:hover {
        background-color: #BBD631;
    }

table.leaderboard {
    border: none;
    box-shadow: none;
}

    table.leaderboard tbody td {
        padding: .25rem .25rem .25rem .25rem;
        border: none;
        text-transform: uppercase;
        font-size: .8rem;
    }

.mobile-app-toggle {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    border: 1px solid #BBD631;
    border-radius: 0.625rem;
    overflow: hidden;
    margin-bottom: 1rem;
}

    .mobile-app-toggle .button {
        background: transparent;
        color: #BBD631;
        margin-bottom: 0;
        -webkit-flex: 1 0 0;
        -ms-flex: 1 0 0px;
        flex: 1 0 0;
        padding: 0.65em 1em;
    }

        .mobile-app-toggle .button:nth-child(n+1) {
            border-left: 1px solid #BBD631;
        }

        .mobile-app-toggle .button.is-active {
            background: #BBD631;
            color: #fefefe;
        }

.nodata {
    font-size: .8rem;
}

table tbody th.swimmername {
    padding-left: .5rem;
    padding-right: 1rem;
    text-align: left;
    color: #ffffff;
    font-size: 1.5rem;
}

th.logdateall {
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: left;
    color: #BBD631;
    font-size: 1.5rem;
    padding: 0.1rem 0.625rem 0.25rem 0.5rem;
}