.canalway-challenges-table td {
    vertical-align: middle;
}

.canalway-challenges-table td h6 {
    margin-bottom: 0;
}

.canalway-challenges-table td h6 a {
    color: #50a2de;
}

.canalway-challenges-table td a.tcvpb-button {
    margin-top: 0;
}

.btn-gold {
    background-color: var(--gold);
    color: var(--black);
    font-size: 0.98rem;
}

.btn-gold:hover {
    background-color: var(--dark-gray);
    font-size: 0.98rem;
    color: var(--white);
    border: none;
}

/*Updated Twitter X logo */
.fa.fa-twitter{
    font-family:sans-serif;
}
.fa.fa-twitter::before{
    content:"𝕏";
    font-size:1.2em;
}

.tcvpb-button_green:disabled, .tcvpb-button_green:disabled:hover {
    background: #dbdbdb;
    border-color: #c7c7c7;
    color: #bbbbbb !important;
}


/*****  MODAL ***********************************************/
.cc-flex {
    display: flex;
}

.cc-flex-dir-column {
    flex-direction: column;
}

.cc-justify-contents-around {
    justify-content: space-around;
}

.cc-align-items-center {
    align-items: center;
}

.shareBtns .fa {
    font-size: 1.5em;
    margin: 5px;
}

#modalBG { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); z-index: 10000; display: none;}

#shareModal {
    position: fixed; top: 50%; left: 50%; max-height: 90%; transform: translate(-50%, -50%);
    box-shadow: 2px 2px 10px; z-index: 10001; display: none;
}

#shareModal .modal-dialog { background: #fff; border-radius: 10px; }

#shareModal .modal-header { display: flex; justify-content: space-between; padding: 20px; border-bottom: 1px solid #efefef; background: var(--gold);
    border-top-left-radius: 10px; border-top-right-radius: 10px; }
#shareModal .modal-title { margin-left: 20px; }
#shareModal .modal-close { background: none; color: var(--blue); margin-top: -20px; margin-right: -25px; }
#shareModal .modal-close:hover { border: none; background-color: none; color: initial; }

#shareModal .modal-body { padding: 20px; }

#shareModal .cc-image-container {
    position: relative;
    width: 33%;
    height: 450px;
    background: #efefef;
    border-radius: 10px;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
    text-align: center;
    margin: 10px;
}

#shareModal .cc-image-container img, #shareModal .cc-img  { border-top-left-radius: 10px; border-top-right-radius: 10px; max-height: 100%; }
#shareModal .cc-img { width: 100%; height: 100%; background-size: contain !important; background-repeat: no-repeat !important; background-position: top center !important; }
#shareModal .shareBtns-container { position: absolute; bottom: 0; width: 100%; }
#shareModal .shareBtns {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 1.2em; background: #efefef;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 10px;
}



/*****  RESPONSIVENESS ***************************************************/
@media (min-width: 1920px) {
    #shareModal { max-width: 50%; }
}

@media (min-width: 1440px) {
    #shareModal .cc-image-container { height: 575px; }
}

@media (max-width: 1080px) {
    /*** MODAL ****/
    #shareModal .cc-image-container { height: 350px; }
    #shareModal .shareBtns { font-size: 0.8em; }
}

@media (max-width: 768px)  {
    /*** MODAL ****/
    #shareModal { max-height: 93%; overflow-y: scroll; }
    #shareModal .cc-image-container { width: 45%; }
    #shareModal .cc-flex { flex-wrap: wrap; }

}

@media (max-width: 550px) {
    /*** MODAL ****/
    #shareModal { width: 80% !important; max-height: 85%; margin-top: 5%; }
    #shareModal .cc-image-container { width: 80%; min-height: 380px; }
}