:root {
    /* P = Primary | S = Secondary | T = Tertiary */
    --p-orange: #E84610;
    --p-blue: #009FE3;
    --p-grey: #4A4A4F;
    --p-navy: #445261;
    --p-red: #D63649;
    --s-grey: #E6ECF0;
    --s-yellow: #EFB920;
    --s-pink: #FF5A60;
    --s-teal: #23BBBB;
    --t-grey: #E0E7FF;
    --t-orange: #E8461030;
    --white: #FFFFFF;
    --black: #000000;
    --bg-grey: #F5F5F5;
    --img-highlighter: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
    --contact-bg: linear-gradient(48deg, rgb(229, 71, 37) 50%, rgb(255, 49, 134));
    --star-rating: #f2d230;
    --s-teal-half-opacity: rgba(35, 187, 187, 0.5);
    --bronze: #e99644;
    --bronze-font: #5c3105;
    --silver: #dddddd;
    --silver-font: #535353;
    --gold: #ffd700;
    --gold-font: #635403;
    --discord-bg: #7289da;
}

html,
body {
    height: 100%;
}

html form.w-100 {
    max-width: 100%;
}

body * {
    font-family: Montserrat, sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    font-family: Montserrat, sans-serif;
    background-color: var(--bg-grey);
    color: var(--p-grey);
}

a:hover {
    text-decoration: none;
}

/* Global content border/shadow */
.main-content-shadow {
    margin-bottom: 3.2rem;
}

/* NAVBAR */
.navbar {
    background-color: var(--white);
    box-shadow: 0 2px 9px 0 rgba(0, 0, 0, .2);
}

.navbar-brand {
    background: url("../img/ci-logo.svg") no-repeat left;
    height: 40px;
    width: 200px;
}

.navbar-nav .nav-item {
    margin: 0 1em;
}

.navbar-light .navbar-nav .nav-link {
    color: var(--p-orange);
}

/* MAIN */
main {
    margin-top: 2em;
    flex: 1 0 auto;
}

/* BUTTONS */
.btn-ci {
    background-color: transparent;
    color: var(--p-orange);
    border: 3px solid var(--p-orange);
    transition: all .4s;
    padding: 4px 10px;
    border-radius: 5px;
}

.btn-ci:hover {
    background-color: var(--p-orange);
    color: var(--s-grey);
}

a.ci-link {
    font-size: inherit !important;
    color: var(--p-orange);
}

.disabled-link {
    pointer-events: none;
    opacity: .5;
}

.btn-subtitle {
    font-size: .85rem;
}

.accordion.card button {
    text-decoration: none;
    border: none;
}

/* FOOTER */
footer {
    flex-shrink: 0;
    color: var(--s-grey);
    background-color: var(--p-grey);
}

footer h4 {
    margin: 20px 0;
    font-weight: 500;
    letter-spacing: 1px;
}

footer p {
    text-align: justify;
}

footer a:hover {
    color: var(--p-orange);
}

footer ul {
    padding: 0;
    list-style: none;
}

footer ul li a {
    color: var(--s-grey);
}

.github-wrapper {
    display: flex;
    justify-content: center;
    margin: 15px 0;
}

.copyright-wrapper {
    margin: 5px 0;
    text-align: center;
}

.copyright-wrapper p {
    text-align: center;
}

.copyright-wrapper a {
    color: var(--s-grey);
}

.fab {
    margin: 0 20px;
    color: var(--s-grey);
    transition: transform .4s;
}

.fab:hover, .fas:hover {
    transform: scale(1.3);
}
/* TEXT */
.page-title {
    font-family: "Rubik", sans-serif;
}

.p-orange {
    color: var(--p-orange);
}

.p-blue {
    color: var(--p-blue);
}

/* CARDS */
.accordion .card .card-link {
    text-decoration: none;
    color: var(--p-grey);
}
.card-link:hover {
    color: rgba(0, 0, 0, .7);
}

.card-title {
    font-family: Rubik, sans-serif;
}

/* PAGINATION */
.page-item .page-link {
    color: var(--p-orange);
}

.page-item.active .page-link {
    background-color: var(--p-orange);
    border-color: var(--p-orange);
}

/* Global allauth centering */
html .all-auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.all-auth-forms {
    margin: auto;
}

/* Landing Page */
.landing-page {
    
    align-content: center;
    justify-items: center;
}

.accordion .card-header {
    background: var(--s-grey);
}

.accordion .card {
    background: var(--bg-grey);
}

.card-header h2 .btn-link {
    text-decoration: none;
}

.drk-txt-hkth {
    text-shadow: 1px 1px 2px var(--p-grey);
}

.card-header {
    background-color: var(--t-orange);
}

.card-header .btn-link {
    text-decoration: none;
    color: var(--p-grey);
    font-size: 1.15rem;
    transition: .3s;
}

.card-header .btn-link:hover {
    cursor: pointer;
    color: var(--p-orange);
}

.enroll-hackathon-card, .enroll-hackathon-card form {
    width: fit-content;
    display: inline-block;
}
.enroll-hackathon-card form button#enroll-part {
    margin: 0 !important;
    font-size: .75rem;
}

#accordion-wrapper>h1,
#carousel-wrapper>h1 {
    font-size: 2rem;
    margin-bottom: 20px;
    color:var(--black);
}

.project-list>ol{
     margin: 20px;
     font-size: 1.7rem;
     text-align: left;
     color: var(--black);
     padding: 6px 6px;

}

.project-list {
    width: 100%;
    height: auto;
    background-color:var(--t-orange);
    border-radius: 10px;
}

.list li{
    font-size: 0.5em;
    text-align: left;
}

.row.langing-page .hack-card {
    margin-bottom: .2rem;
}

/* View Hackathon Page */

.page-title::after {
    content: '';
    display: block;
    height: 2px;
    width: 100%;
    background: var(--p-orange);
}

#hackathon-signup {
    text-align: left;
    margin: 5px 0;
}

.enrollments-closed {
    border-radius: 5px;
    border: 2px solid var(--p-orange);
}

.slack-mpim button, .slack-mpim a {
    width: 100%;
    text-align: left;
}
.slack-mpim button:hover i,  .slack-mpim a:hover i {
    color: var(--white);
}

button:hover i.fab.fa-slack.fa-.p-orange,
 a:hover i.fab.fa-slack.fa-sm.ml-0.mr-2.p-orange {
    color: var(--white);
}

.card.hackathon-detail-description .card-body,
.card.hackathon-detail-description .card-body p {
    line-height: 1.7;
}

/* Final Score page */

.judge-scores-card {
    overflow-x: scroll;
    overflow-y: auto;
    max-height: 600px;
}

.final_score_table tbody tr:first-child td {
    background-color: var(--p-orange) !important;
    color: var(--white) !important;
}

.final_score_table thead tr th:first-child, 
.final_score_table tbody tr td:first-child {
    position: sticky;
    left: -1px;
    z-index: 2;
    background: var(--white);
}

.final_score_table thead tr th:last-child, 
.final_score_table tbody tr td:last-child {
    position: sticky;
    right: -1px;
    z-index: 2;
    background: var(--white);
}

.table_titles, .final_score_table {
    text-align: center;
}

h1.table_titles{
    margin-bottom: 5vh;
    font-size: 6vh;
}

.not-counted-scores {
    opacity: .5;
}

.final_score_table {
    width: 75%;
    margin: 5vh auto;
    border: 1px solid var(--p-grey);
}

.final_score_table tr {
    border-bottom: 1px solid var(--p-grey);
}

.final_score_table tr th {
    padding: 2vh;
}

.card .card-body form.hack-award-submission {
    max-width: none;
}

.bg-p-blue {
    background-color: var(--p-blue);  
}

/* Hackadmin */
ul.hack-admin-team-members {
    padding: 0;
}

ul.hack-admin-team-members li {
    list-style-type: none;
}

button.hackadmin-remove-participant i, button.hackadmin-add-participant i,
button.hackadmin-add-judge i {
    cursor: pointer;
}

button.hackadmin-remove-participant, button.hackadmin-add-participant,
button.hackadmin-add-judge {
    cursor: pointer;
    border: none;
    padding: 0;
    color: var(--p-orange);
    background: var(--white);
}

button.hackadmin-remove-participant:hover,
button.hackadmin-add-participant:hover,
button.hackadmin-add-judge:hover {
    cursor: pointer;
    border: none;
    background: var(--white);
    color: var(--p-orange);
}

button.hackadmin-remove-participant:focus,
button.hackadmin-add-participant:focus,
button.hackadmin-add-judge:focus {
    border: none;
    outline: none;
}

.delete {
    display: inline-block;
}

.hackadmin-team-select {
    display:none;
}

.hackadmin-team-select.active {
    display: block;
}


/* TOASTS */
/*This allows for multiple toasts to stack.*/
.toast-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 300px;
}

/*This positions the toast on the page.*/
.toast-position {
    position: fixed;
    top: 80px;
    right: 20px;
    min-height: 200px;
    z-index: 1021;
}

.hackathon-sub-details {
    margin: 0.8rem 0 0;
}

/* Distribute teams page */
ol.team-drop-area {
    min-height: 50px;
}

form.distribute-teams-form, form.clear-teams-form {
    display: inline-block;
}

.team-score-container {
    float:right
}

.hackathon-sub-details::after {
    content: '';
    display: block;
    height: 2px;
    width: 50%;
    margin: 0.5rem auto 0;
    background: var(--s-grey);
}

.team-drop-area li span {
    color: var(--white);
}

.team-drop-area li span:not(.member-name), .team-member-label {
    font-size: 0.9em;
}

.team-member-label {
    display: block;
    color: var(--white);
}

.team-drop-area li span.newbie,
.team-member-label span.newbie {
    color: var(--bronze-font);
    background: var(--bronze);
}

.team-drop-area li span.enthusiast,
.team-member-label span.enthusiast {
    color: var(--silver-font);
    background: var(--silver);
}

.team-drop-area li span.veteran,
.team-member-label span.veteran {
    color: var(--gold-font);
    background: var(--gold);
}

.team-drop-area li span.member-name {
    color: var(--p-grey);
    min-width: 250px;
    display: inline-block;
}

/* Profile image */
.profile-image {
    border-radius: 50%;
}

/* Edit image*/
.edit-image {
    position: absolute;
    top: 5px;
    right: 5px;
}

.edit-image.screenshot-image {
    position: relative;
    top: 0px;
    right: 0px;
}

/* Create Project */
.create-project-card * {
    width: 100%;
    max-width: none;
}

/* Team Scores */
.team-scores {
    font-size: .75rem;
}

.card .card-body div.project-form-buttons a,
.card .card-body div.project-form-buttons button {
    display: inline-block;
    font-size: 1em;
    line-height: 1.5em;
    width: fit-content;
    padding-left: 30px;
    padding-right: 30px;
}

/* Teams page */
.teams-page {
    padding: 0px;
    background: var(--white);
}

.teams-header {
    height: 250px;
    background-size: cover;
    background-position: center center;
}

.team-name {
    border:2px solid black;
    background: var(--white);
    padding: 2px 10px;
    height:fit-content;
    border-radius: 0px 0px 15px 0px;
}

.team-members-display div.col {
    text-overflow: scroll;
    white-space: nowrap;
    overflow-y: auto;
    margin: 0rem 2rem;
}

.team-member-img {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    border-radius: 50%;
    border: 1px solid lightgray;
}

.team-member-card {
    max-width: 150px;
    display: inline-block;
}

.team-member-card-body {
    border-top: 1px solid lightgray
}

.project-screenshot {
    width: 100%;
}

.card .card-body a.teams-link {
    font-size: 1rem;
}

.card-no-border {
    border: none;
}

.team-menu-dropdown-container {
    position: absolute;
    top: 0;
    right: 60px;
    min-width: 150px;
}

.teams-dropdown {
    transform: translate3d(-100px, 38px, 0) !important;
}

.black {
    color: var(--black);
}

.dropdown-item:hover .fab.p-orange,
.dropdown-item:hover .fas.p-orange,
.dropdown-item:hover .far.p-orange {
    color: var(--white);
}

/* Team Calendar Page */
.table.calendar td {
    text-align: center;
}

.table.calendar td.working {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.table.calendar tr:hover {
    border: 1px solid var(--black);
    font-weight: 600;
}

.table.calendar tr:hover * {
    background: var(--bg-grey);
}

/* Ensure teams in paginated view are centered at all times even when odd number of
    teams persist in the view. */
.teams-row {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* Set min-height of team-cards to suit for a minimum of 5 team members & submit project button */
.team-card {
    min-height: 250px;
    height: 100%;
}

.card-title .team-name::after {
    content: '';
    display: block;
    height: 2px;
    width: 60%;
    margin: 0.5rem auto;
    background: var(--s-grey);
}

.card-text-title {
    font-size: 1.2rem;
    font-style: italic;
}

.user-github-icon .fab {
    font-size: 1.2rem;
    margin: 0 0.5rem 0 0;
    color: var(--p-navy);
    transition: transform .4s;
}

.pagination {
    margin: 1rem 0 2rem;
    justify-content: center;
}

.dropdown-menu.judge-dropdown, .dropdown-menu.teams-dropdown {
    width: 100%;
    border: 3px solid var(--p-orange);
}

.dropdown-menu.teams-dropdown {
    width: fit-content;
}

.dropdown-menu.judge-dropdown .dropdown-item:hover,
.dropdown-menu.teams-dropdown .dropdown-item:hover {
    width: 100%;
    background: var(--p-orange);
    color: var(--white);
    border-radius: 0px;
}

.card-body.text-left.hackathon-detailed-items {
    padding: 2rem;
}

.card-body.text-left.hackathon-detailed-items i {
    width: 30px;
    text-align: left;
}

.hackathon-detail-image {
    width: 100%;
}

/* Showcase */
.carousel.slide {
    max-width: 800px;
    margin: 0 auto;
}

.carousel-item img, .carousel-item canvas {
    height: 400px;
    min-width: auto;
    object-fit: cover;
}

.carousel-control-next:hover {
    background: linear-gradient(270deg, rgba(54,54,54,1) 0%, rgba(122,122,122,0.5) 48%, rgba(255,255,255,0) 100%);
}

.carousel-control-prev:hover {
    background: linear-gradient(90deg, rgba(54,54,54,1) 0%, rgba(122,122,122,0.5) 48%, rgba(255,255,255,0) 100%);
}

.card-showcase-img img {
    width: 100%;
    margin: .5rem;
    object-fit: cover;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 2px;
}

.card-title.showcase-card-title h4 a {
    font-size: 1.5rem;
}

.card.showcase-image-edit .card-body .card-text img {
    width: 350px;
}

img.showcase-image-edit {
    width: 350px;
}

.showcase-placeholder {
    width: 100%;
    max-height: 500px;
    /* background-image: linear-gradient(to right bottom, #ff5900, #ff7029, #ff8444, #ff965f, #ffa879); */
    background: url('../img/hackathon-bg.png') center center;
}

.showcase-project-name {
    position: absolute;
    width: fit-content;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px 50px;
    background: var(--p-navy);
    color: var(--white);
}

.showcase-public-text {
    font-size: .75rem;
}

/* Awards */
.edit-awards-form {
    width: 100%;
    max-width: none;
}

/* Hackathon Stats */
.hide-row{
    display:none;
}

/* Competencies */
.input-group.competency-difficulty-select select {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group.competency-difficulty-select a.btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin: 0;
    font-size: 1rem;
}

.card .card-body a.btn.btn-large {
    font-size: .95rem;
}

#competenciesTable.table td {
    vertical-align: middle;
}

#competenciesTable.table td label {
    margin: 0;
}

#competenciesTable i {
    cursor: pointer;
}

#competenciesDisplayTable i.fas,
#competenciesDisplayTable i.fas:hover {
    transform: scale(1);
    cursor: default;
    vertical-align: middle;
}

#competenciesTable i,
i.rating-display {
    font-size: 1.3rem;
}

#competenciesTable input[type="radio"] {
    visibility: hidden;
}

i.fas.fa-arrow-alt-circle-up {
    color: var(--s-teal);
}

i.fas.fa-lightbulb {
    color: var(--s-yellow);
}

i.fas.fa-thumbs-up {
    color: var(--p-blue);
}

.disabled-select {
    pointer-events: none;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    color: var(--black);
    padding: 0;
}

.btn.discord-btn {
    color: var(--white);
    background-color: var(--discord-bg);
}

.btn.discord-btn .fab {
    margin: 0 5px;
}

.border-3 {
    border-width: 3px !important;
}

/* Media Queries */

@media (max-width:453px) {
    #accordion-wrapper>h1,
    #carousel-wrapper>h1 {
        font-size: 1.5rem;

    }

    /* Error pages */
    .card.p-5.error-500 {
        padding: .5rem !important;
    }

    .error-500 div div h1 {
        font-size: 1.5rem;
    }
    .error-500 div div img {
        width: 100% !important;
    }

    /* Showcase page */
    .no-showcases img {
        width: 100% !important;
    }
    
    /* Home page */
    .index-square-text {
        opacity: 1;
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
        color: white;
        width: 100%;
        padding: 10px;
        height: 100%;
    }

    h1.index-square-heading {
        text-align: center;
    }
}

@media (min-width: 991px) {
    /* Alignment control for Register to Hackathon button on hackathon_view.html template */
    #hackathon-signup {
        text-align: right;
    }
}

@media (max-width:993px) {
    #carousel-wrapper {
        margin-top: 30px;
    }
    .team-drop-area li span.member-name {
        display: inline;
        min-width: none;
    }
}

@media (max-width:993px) {
    .card-header h2 .btn-link {
    color:var(--black);
    font-size: 1.1rem;
    }
}

@media (max-width:650px){
    .team-menu-dropdown-container {
        position: relative;
        right: 0;
    }
    .teams-dropdown {
        transform: translate3d(0px, 38px, 0) !important;
    }
    .dropdown-menu.teams-dropdown {
        width: 100%;
    }
}