.mt-4 {
    margin-top: 32px;
}

.white-block {
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    text-align: center;
}

.purple-striped {
    background-image: url("../img/grey-bg.png");
    padding: 20px;
    border-radius: 6px;
    border: 4px solid #fff;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
}

.grey-striped {
    background-image: url("../img/grey-bg.png");
    padding: 20px;
    border-radius: 6px;
    border: 4px solid #fff;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
    position: relative;
}

.btn.pull-right {
    margin-left: 10px;
}

.white-block .btn {
    min-width: 200px;
}

.white-block .well {
    margin-bottom: 14px;
}

table {
    background-color: #fff;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.1);
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.1);
}

header {
    padding: 20px;
    padding-bottom: 30px;
}

.well h1,
.well h2,
.well h3,
.well h4,
.white-block h3 {
    margin-top: 0;
}

h1,
h2,
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 900;
    margin-top: 0;
}

h1 {
    font-weight: 200;
    color: rgb(0, 86, 184);
    padding-bottom: 8px;
    margin-bottom: 20px;
    border-bottom: 4px solid rgba(0, 0, 0, 0.1);
}

body {
    font-family: "Roboto Condensed", sans-serif;
}

h4 a {
    color: black;
}

.logo {
    max-width: 100%;
}

.well-light {
    background-color: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: none;
}

.well-dark {
    background-color: rgba(83, 157, 198, 0.2);
    border: 1px solid rgba(83, 83, 198, 0.18);
    box-shadow: none;
}

.well-special {
    background-color: #fff8e6;
    border: 1px solid rgba(255, 225, 191, 0.72);
    box-shadow: none;
    color: #333;
}

.well {
    margin-bottom: 30px;
}

.well h4 {
    border-bottom: 1px solid #ccc;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
}

footer {
    color: #fff;
    text-shadow: 1px 1px 0 #111;
    padding: 40px;
    background-color: #333;
}

footer a {
    color: #fff;
    font-weight: bold;
    text-decoration: underline;
}

.footer-navigation {
    margin-top: 30px;
}

.navbar-default {
    background-color: #0056b9;
    margin-bottom: 0px;
    border-bottom: 1px solid #111;
}

.btn-primary {
    color: #ffffff;
    background-color: #0056b9;
    border-color: #0056b9;
}

.crown {
    display: inline-block;
    width: 23px;
    height: 18px;
    margin-bottom: -4px;
    background-image: url(../img/crowns.png);
}

.crown.silver {
    display: inline-block;
    width: 23px;
    height: 18px;
    background-position: 0px 54px;
    background-image: url(../img/crowns.png);
}

.crown.bronze {
    display: inline-block;
    width: 23px;
    height: 18px;
    background-position: 0px 17px;
    background-image: url(../img/crowns.png);
}

.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
    margin-right: -15px;
    margin-left: -15px;
}

.table-bordered {
    border: 3px solid #ccc;
    border-radius: 5px !important;
    margin-bottom: 8px;
}

body > .alert {
    border-radius: 0px;
}

.arrow {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

.white-block .form-control {
    margin-bottom: 10px;
    border-radius: 0px;
}

.footer-navigation .navbar {
    margin-bottom: 0px;
}

.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 30px;
    border: 0px solid transparent;
}

.navbar {
    border-radius: 0px;
}

.news-item {
    padding: 4px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.navbar-default .navbar-toggle {
    border-color: #fff;
    color: #fff;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #727ed7;
}

.social-bar h3 {
    margin: 0px;
    margin-bottom: 10px;
}

.modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
    min-height: 16.4286px;
    background: #0056b9;
    color: #fff;
}

input.form-control {
    border-radius: 0;
}

.navbar-default .navbar-nav > li > a {
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}

.large-title {
    font-size: 29px;
    letter-spacing: -1px;
}

.item-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.item-list li {
    padding: 10px;
}

.login-form {
    margin: auto;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.login-form h4 {
    margin: -10px;
    padding: 10px;
    margin-bottom: 20px;
    background: #0056b9;
    color: #fff;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

h3 a {
    color: #565665;
    text-shadow: 1px 1px 0 #fff;
}

.btn {
    margin-bottom: 10px;
}

.white-block .btn {
    margin-left: 5px;
    margin-right: 5px;
    box-shadow: 0 4px 0px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.teaserYes {
    text-align: center;
    background: #fff6c2;
    padding: 10px;
    padding-bottom: 20px;
    border-radius: 5px;
    border: 2px dotted #ffd089;
    margin-bottom: 10px;
}

.teaserNo {
    text-align: center;
    background: #ffecec none repeat scroll 0% 0%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #da9696;
    margin-bottom: 10px;
    color: #aa3131;
}

.teaserNo h4 {
    color: rgb(0, 0, 0);
    margin: 0px 0px 10px;
    padding: 10px;
    border-bottom: 1px solid rgb(225, 191, 191);
    padding-top: 3px;
}

.stats-table tr:first-child {
    background: rgba(255, 199, 64, 0.2);
}

.stats-table tr:nth-child(2) {
    background: rgba(100, 100, 100, 0.1);
}

.stats-table tr:nth-child(3) {
    background: rgba(179, 140, 6, 0.2);
}

input[type="radio"],
input[type="checkbox"] {
    margin: 5px 5px 0px;
    line-height: normal;
}

.white-block .alert {
    margin: 4px;
    padding: 4px;
}

.qno {
    display: block;
    border: 1px solid #ffe576;
    padding: 4px;
    margin-bottom: 10px;
    background: #fff2ba none repeat scroll 0% 0%;
    border-radius: 5px;
    font-weight: 900;
    color: #c8912d;
    text-align: center;
    text-shadow: 1px 1px 0 #fff;
}

.picked {
    padding: 10px;
    color: green;
    font-size: 18px;
}

.stats-table tr td:first-child {
    text-align: center;
    font-weight: 900;
}

.fa-facebook-square {
    color: #3b5998;
}

.teaserYes .btn {
    margin-top: 20px;
}

.fa-twitter-square {
    color: #007bb6;
}

.fa-google-plus-square {
    color: #d34836;
}

.social-bar {
    padding-top: 10px;
}

.count-down {
    position: absolute;
    top: 30px;
    left: 40px;
}

.modal .form-control {
    max-width: 100%;
}

a {
    color: #0056b9;
}

@media screen and (max-width: 479px) {
    .btn {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }
    .purple-striped,
    .grey-striped {
        padding: 10px;
    }
    .white-block {
        padding: 10px;
    }
    .white-block .btn {
        margin-left: 0px;
        margin-right: 0px;
    }
    h1.centered {
        font-size: 23px;
        text-align: center;
    }
    .nav-stacked {
        text-align: center;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        padding-top: 20px;
        padding-bottom: 20px;
        display: block;
    }
}

@media screen and (max-width: 767px) {
    .nav-stacked {
        text-align: center;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        padding-top: 20px;
        padding-bottom: 20px;
        display: block;
    }
    .logo-div {
        text-align: center;
    }
}

@media screen and (min-width: 767px) and (max-width: 1170px) {
    .table > thead > tr > th,
    .table > tbody > tr > th,
    .table > tfoot > tr > th,
    .table > thead > tr > td,
    .table > tbody > tr > td,
    .table > tfoot > tr > td {
        padding: 3px;
        font-size: 11px;
        line-height: 1.42857;
        vertical-align: top;
        border-top: 1px solid #ddd;
    }
}

.btn-facebook {
    display: none;
}

.games.nav-tabs > li {
    width: 40%;
    text-align: center;
}

.games.nav-tabs {
    border-bottom: 1px solid #0056b9;
    padding-left: 20px;
}

.games.nav-tabs > li > a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 6px 6px 0 0;
    background: #5898e3;
    color: #fff;
    font-size: 13px;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: #555555;
    background-color: #ffffff;
    border: 1px solid #0056b9;
    border-bottom-color: rgb(0, 86, 185);
    border-bottom-color: transparent;
    cursor: default;
}

.game-area {
    background: #0056b9;
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 10px;
}

.parsed-text img {
    max-width: 100% !important;
    height: auto !important;
}
/* Header section */
.new-header {
    background-image: url("../img/ottawa-trivia-fame-banner.jpg"); /* Replace with the correct path */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.logo-div {
    display: flex;
    justify-content: center;
    align-items: center;
}
.new-header .logo {
    width: 350px;
}

@media (max-width: 767px) {
    .new-header .logo {
        width: 200px;
    }
}

.alert-global-notification {
    background-color: #3072e0;
    border-color: #3072e0;
    margin-bottom: 0;
    color: #fff;
    text-align: center;
    padding: 10px;
}

.alert-global-notification a {
    text-decoration: underline;
    color: #e9b951;
}
.navbar-right .login-link {
    margin-right: 20px; /* Adds space between login link and share icons */
    display: flex;
    align-items: center;
    color: #fff;
}

.login-link a {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.custom-login-link {
    cursor: pointer;
}

.navbar-right .login-link i {
    margin-right: 5px; /* Adds space between the icon and the text */
}

.navbar-right .share-icons {
    display: flex;
    color: #fff;
}

.navbar-right .social-icon {
    width: 24px; /* Set the width of the social icons */
    height: 24px; /* Set the height of the social icons */
    border-radius: 50%; /* Makes the icons round */
    background-color: #3b5998; /* Background color for Facebook */
}

.navbar-right .share-icons a:nth-child(3) .social-icon {
    background-color: #55acee; /* Background color for Twitter */
}

.navbar-right .social-icon:hover {
    opacity: 0.8; /* Adds a hover effect */
}

.share-icons a {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

/* home section */

.home-section {
    display: flex; /* Use flexbox to align the sections */
    gap: 20px;
}
.home-section .left-section {
    flex: 1;
    background: url("../img/become-member-bkg-halfsize.png") no-repeat center
        center;
    background-size: cover;
    color: white;
    padding: 40px;
    border-radius: 5px;
}

.home-section .left-section .content {
    border-radius: 5px;
    max-width: 50%;
}

.home-section .left-section h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

.home-section .left-section p {
    font-size: 16px;
    margin-bottom: 20px;
}

.home-section .left-section .btn {
    border: none;
    padding: 10px 20px;
    font-size: 16px;
}

/* Right section */
.home-section .right-section {
    flex: 1;
    background: #0056b9; /* Blue background color */
    color: white;
    padding: 40px;
    border-radius: 5px;
}

.home-section .right-section .content {
    text-align: center;
}

.home-section .right-section h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

.home-section .right-section .links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    margin-top: 20px;
}

.home-section .right-section .link {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
    color: white;
    text-decoration: none;
}

.home-section .right-section .link img {
    width: 48px;
    height: 48px;
    margin-bottom: 15px;
    margin-top: 25px;
}

.home-section .right-section .link:hover {
    text-decoration: underline;
}
/* homepage buy trivia  */
.trivia-container {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 20px;
    display: flex;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
}

.trivia-container .trivia-content {
    flex: 2;
    padding-right: 15px;
    z-index: 1;
}

.trivia-container .trivia-button-container {
    flex: 1;
    text-align: right;
    z-index: 1;
}

.trivia-container .trivia-button-container .btn-trivia {
    background-color: #f0ad4e;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
}

.trivia-container::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 50%; /* Adjust as needed */
    height: 100%;
    background-image: url("../img/trivia-questions-img-half.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 0;
}

@media (max-width: 767px) {
    .trivia-container {
        display: block;
        margin-bottom: 160px;
    }

    .navbar-text.login-link {
        margin-left: 15px;

    }
    .share-icons {
        margin-left: 15px;
    }

    .trivia-container .trivia-content {
        padding-right: 0;
        background: rgba(255, 255, 255, 0.9);
        margin-bottom: 20px; /* Add space between text and button */
    }

    .trivia-container .trivia-button-container {
        text-align: center;
    }


    .trivia-container .btn-trivia {
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    .home-section {
        flex-wrap: wrap;
        padding: 15px;
    }
    .home-section .left-section,
    .home-section .right-section {
        flex-basis: 100%;
        max-width: 100%;
    }
}

.text-underline {
    text-decoration: underline;
}