/* *** CUSTOM BOOTSTRAP STYLES *** */

/* Colours 
    Reds - #fe4602, #ff6600
    Orange - #f2c75c
    Grey - #d7dde3
*/

@font-face {
    font-family: Raleway;
    src: url("../Fonts/Raleway-Regular.ttf");
}

.navbar {
    border-bottom: 3px solid #61b23c;
    /*opacity: 0.8;*/
}

.nav-bar-title {
    font-family: Raleway, Verdana, Arial;
    font-size: 150%;
    color: #61b23c;
}

.navbar-normal-link {
    color: #a5a5a4;
}

.navbar-active-link {
    color: #80B918;
}

.nav-link:hover {
    color: #80B918;
}


/* PAGE STYLES */
body {
    background: #dfe4e9;
}

.modal-title {
    margin: 0px;
    font-size: 98%;
    color: #676767;
}

#top3-for-week {
}

#top3-for-week h2 {
    font-size: 125%;
}


.youtube-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    margin: 0px 0px 0px 0px;
}

.youtube-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0px 0px 0px 0px;
}

.youtube-loading-icon {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
    -moz-transform: translate(-50%, -50%); /* Firefox */
    -ms-transform: translate(-50%, -50%); /* IE 9 */
    -o-transform: translate(-50%, -50%); /* Opera */
}

.image-container {
    position: relative;
    display: inline-block;
}

.card-thumbnail-wrapper {
    position: relative;
    cursor: pointer;
}

.image-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    color: #d1d1d1;
    background: rgba(0, 0, 0, 0.4);
}

#card-loading-bar {
    color: #ffffff;
    background-color: #42b1ff;
}


button:disabled {
    cursor: default;
    pointer-events: all !important;
}

.fa-arrow-alt-circle-up {
    width: 100%;
    height: 100%;
    font-size: 150%;
    color: #42c353;
}

.fa-arrow-alt-circle-down {
    width: 100%;
    height: 100%;
    font-size: 150%;
    color: #bc0000;
}

.fa-arrow-alt-circle-disabled {
    color: #8c8c8c;
}

.btn-group.special {
    display: flex;
}

.special .btn {
    flex: 1;
}

.media-voting-up-vote {
    float: left;
    width: 25%;
    text-align: center;
    padding-top: 4px;
    cursor: pointer;
}

.media-voting-no-votes {
    float: left;
    width: 50%;
    text-align: center;
    padding-top: 8px;
    font-size: 80%;
    font-weight: bold;
    color: #6b6b6b;
}

.media-voting-down-vote {
    float: left;
    width: 25%;
    text-align: center;
    padding-top: 4px;
    cursor: pointer;
}


.media-modal-voting-up-vote {
    float: left;
    width: 25%;
    text-align: center;
    padding-top: 4px;
    cursor: pointer;
}

.media-modal-voting-no-votes {
    float: left;
    width: 50%;
    text-align: center;
    padding-top: 8px;
    font-size: 80%;
    font-weight: bold;
    color: #6b6b6b;
}

.media-modal-voting-down-vote {
    float: left;
    width: 25%;
    text-align: center;
    padding-top: 4px;
    cursor: pointer;
}

.media-voting-disabled {
    cursor: default;
}

.media-modal-voting-share {
    float: left;
    width: 50%;
    text-align: center;
    padding-top: 6px;
    padding-bottom: 5px;
    background-color: #42c353;
    border: 1px solid #20a535;
    border-radius: 6px 0px 0px 6px;
    font-size: 80%;
    color: #ffffff;
    cursor: pointer;
}

.media-voting-share {
    float: left;
    width: 50%;
    text-align: center;
    padding-top: 6px;
    padding-bottom: 5px;
    background-color: #42c353;
    border: 1px solid #20a535;
    border-radius: 6px 0px 0px 6px;
    font-size: 80%;
    color: #ffffff;
    cursor: pointer;
}

.media-voting-close {
    float: left;
    width: 50%;
    text-align: center;
    padding-top: 6px;
    padding-bottom: 5px;
    background-color: #666666;
    border: 1px solid #575656;
    border-radius: 0px 6px 6px 0px;
    font-size: 80%;
    color: #ffffff;
}

.media-voting-report {
    float: left;
    width: 50%;
    text-align: center;
    padding-top: 6px;
    padding-bottom: 5px;
    background-color: #ff6600;
    border: 1px solid #df5b03;
    border-radius: 0px 6px 6px 0px;
    font-size: 80%;
    color: #ffffff;
    cursor: pointer;
}

.media-voting-report-disabled {
    float: left;
    width: 50%;
    text-align: center;
    padding-top: 6px;
    padding-bottom: 5px;
    background-color: #797979;
    border: 1px solid #595959;
    border-radius: 0px 6px 6px 0px;
    font-size: 80%;
    color: #b5b5b5;
    cursor: default;
}

.report-modal-submit {
    float: left;
    width: 50%;
    text-align: center;
    padding-top: 6px;
    padding-bottom: 5px;
    background-color: #ff6600;
    border: 1px solid #df5b03;
    border-radius: 6px 0px 0px 6px;
    font-size: 80%;
    color: #ffffff;
    cursor: pointer;
}

.report-modal-close {
    float: left;
    width: 50%;
    text-align: center;
    padding-top: 6px;
    padding-bottom: 5px;
    background-color: #666666;
    border: 1px solid #575656;
    border-radius: 0px 6px 6px 0px;
    font-size: 80%;
    color: #ffffff;
    cursor: pointer;
}

.media-modal-close {
    float: left;
    width: 50%;
    text-align: center;
    padding-top: 6px;
    padding-bottom: 5px;
    background-color: #666666;
    border: 1px solid #575656;
    border-radius: 0px 6px 6px 0px;
    font-size: 80%;
    color: #ffffff;
    cursor: pointer;
}

.report-modal-footer-spacer {
    width: 100%;
}

.clear-left-float {
    clear: left;
}

#report-modal-comment {
    width: 100%;
}

#report-modal-popup .modal-footer {
    display: block;
}

#media-modal-popup .modal-footer {
    display: block;
}

form .error {
    margin-bottom: 0px;
    color: #ff0000;
}

/* Voting Card */

.card h5 {
    margin: 0px;
    color: #505050;
    font-size: 110%;
}

.card .card-text a {
    background-color: #089de3;
    color: #ffffff;
    font-size: 80%;
    text-decoration: none;
    text-transform: uppercase;
    padding: 6px;
    border: 1px solid #089de3;
    border-radius: 6px 6px 6px 6px;
}
    .card .card-text a:hover {
        background-color: #27b5f7;
        border: 1px solid #27b5f7;
        border-radius: 6px 6px 6px 6px;
    }


/* Card Advert */
.card-advert h5 {
    margin: 0px;
    /*color: #ff5200;*/
    color: #ed8d03;
    font-size: 110%;
}

.card-advert .card-text a {
    background-color: #ff9a09;
    color: #ffffff;
    font-size: 80%;
    text-decoration: none;
    text-transform: uppercase;
    padding: 6px;
    border: 1px solid #ff9a09;
    border-radius: 6px 6px 6px 6px;
}

    .card-advert .card-text a:hover {
        background-color: #feb245;
        border: 1px solid #feb245;
        border-radius: 6px 6px 6px 6px;
    }

.media-category-subtext-spacer {
    float: left;
    min-width: 5%;
    height: 26px;
}

.media-category-subtext-blue {
    float: left;
    min-width: 25%;
    height: 26px;
    color: #ffffff;
    background-color: #6587cc;
    border: 1px solid #6587cc;
    border-radius: 13px;
    text-align: center;
    font-size: 85%;
    padding-top: 2px;
    padding-left: 8px;
    padding-right: 8px;
}

.media-category-subtext-aquaGreen {
    float: left;
    min-width: 25%;
    height: 26px;
    color: #ffffff;
    background-color: #0dd3bb;
    border: 1px solid #0dd3bb;
    border-radius: 13px;
    text-align: center;
    font-size: 85%;
    padding-top: 2px;
    padding-left: 8px;
    padding-right: 8px;
}

.media-category-subtext-grape {
    float: left;
    min-width: 25%;
    height: 26px;
    color: #ffffff;
    background-color: #cb66b3;
    border: 1px solid #cb66b3;
    border-radius: 13px;
    text-align: center;
    font-size: 85%;
    padding-top: 2px;
    padding-left: 8px;
    padding-right: 8px;
}

.media-category-subtext-limeGreen {
    float: left;
    min-width: 25%;
    height: 26px;
    color: #ffffff;
    background-color: #94e044;
    border: 1px solid #94e044;
    border-radius: 13px;
    text-align: center;
    font-size: 85%;
    padding-top: 2px;
    padding-left: 8px;
    padding-right: 8px;
}

.media-category-subtext-pink {
    float: left;
    min-width: 25%;
    height: 26px;
    color: #ffffff;
    background-color: #ff4f9e;
    border: 1px solid #ff4f9e;
    border-radius: 13px;
    text-align: center;
    font-size: 85%;
    padding-top: 2px;
    padding-left: 8px;
    padding-right: 8px;
}

.media-category-subtext-brightRed {
    float: left;
    min-width: 25%;
    height: 26px;
    color: #ffffff;
    background-color: #ff4500;
    border: 1px solid #ff4500;
    border-radius: 13px;
    text-align: center;
    font-size: 85%;
    padding-top: 2px;
    padding-left: 8px;
    padding-right: 8px;
}

.media-category-subtext-purple {
    float: left;
    min-width: 25%;
    height: 26px;
    color: #ffffff;
    background-color: #a964db;
    border: 1px solid #a964db;
    border-radius: 13px;
    text-align: center;
    font-size: 85%;
    padding-top: 2px;
    padding-left: 8px;
    padding-right: 8px;
}

.media-category-subtext-darkGrey {
    float: left;
    min-width: 25%;
    height: 26px;
    color: #ffffff;
    background-color: #868686;
    border: 1px solid #868686;
    border-radius: 13px;
    text-align: center;
    font-size: 85%;
    padding-top: 2px;
    padding-left: 8px;
    padding-right: 8px;
}

.media-category-subtext-lightGrey {
    float: left;
    min-width: 25%;
    height: 26px;
    color: #ffffff;
    background-color: #b4b4b4;
    border: 1px solid #b4b4b4;
    border-radius: 13px;
    text-align: center;
    font-size: 85%;
    padding-top: 2px;
    padding-left: 8px;
    padding-right: 8px;
}

.media-category-subtext-advert {
    float: left;
    min-width: 25%;
    height: 26px;
    color: #ffffff;
    background-color: #ffc209;
    border: 1px solid #ffc209;
    border-radius: 13px;
    text-align: center;
    font-size: 85%;
    padding-top: 2px;
    padding-left: 8px;
    padding-right: 8px;
}

.bottom-dismissable-alert {
    position: fixed;
    bottom: 5px;
    left: 2%;
    width: 96%;
}

    .bottom-dismissable-alert span {
        margin: 0px;
        padding: 0px;
        color: #415f48;
        font-size: 120%;
        font-weight: bold;
    }

    .bottom-dismissable-alert a {
        font-size: 110%;
        font-weight: bold;
        color: #317e11;
        text-decoration: none;
    }

        .bottom-dismissable-alert a:hover {
            font-weight: bold;
            color: #54a732;
        }

#top3-wrapper h2 {
    font-size: 120%;
    color: #359e4f;
}

#top3-wrapper p {
    font-size: 90%;
}

#top3-wrapper .fa-trophy {
    font-size: 80%;
}



#top3-media-items p {
    font-size: 90%;
    color: #5b5b5b;
}

#top3-media-items img {
    border: 1px solid #c0c7cd;
    border-radius: .25rem;
    padding: 5px;
    background-color: #ffffff;
}

.top3-media-item-spacer {
    height: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #c5cad0;
}

#card-wrapper-header h2 {
    font-size: 120%;
    color: #359e4f;
}

#card-wrapper-header .fa-list-alt {
    font-size: 90%;
}

.top3-media-item-clickable {
    cursor: pointer;
}

#top3-media-items h3 {
    font-size: 100%;
    color: #525252;
}

#top3-media-items img {
    border: 1px solid #c0c7cd;
    border-radius: .25rem;
    padding: 5px;
    background-color: #ffffff;
}

#top3-media-items a {
    background-color: #089de3;
    color: #ffffff;
    font-size: 80%;
    text-decoration: none;
    text-transform: uppercase;
    padding: 6px;
    border: 1px solid #089de3;
    border-radius: 6px 6px 6px 6px;
}

    #top3-media-items a:hover {
        background-color: #27b5f7;
        border: 1px solid #27b5f7;
        border-radius: 6px 6px 6px 6px;
    }

.media-voting-panel .badge {
    font-size: 86%;
    text-decoration: none;
    font-weight: normal;
    background-color: #8c8c8c;
}