body {
    font-family: "FiraGO" !important;
    font-size: 14px !important;
}

.caps {
    font-family: "FiraGO";
    font-feature-settings: "case" on;
    text-transform: uppercase !important;
}
.bgComCom {
    background-color: #231260 !important;
}

.bgPurple {
    background-color: #993dbb !important;
}
.colorPurple{
    color: #993dbb !important;
}

.bgGreen {
    background-color: #70d44b !important;
}
.bgAqua{
    background-color: #00b2e3 !important;
}
.bgGray{
    background-color: #f1f1f1 !important;
}

.bgSuccess{
    background-color: #70d44b !important;
}

.bgError{
    background-color: red !important;
}


.selectedTextWhite{
    color:white !important;
}
.answer{
    cursor: pointer;
    border:solid 2px #d0e5f9;
    margin-top:5px;
    transition: all 0.15s ease-out;
}
.answer:hover{
    border:solid 2px #14599d;
}


 .bgSuccessAns{
    border:solid 2px #70d44b !important;
}

 .bgErrorAns{
    border:solid 2px red !important;
}

#loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(237, 237, 237, 0.5); /* Semi-transparent black background */
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999; /* Make sure the loading overlay appears on top of other elements */
}

.spinner-border {
    width: 3rem;
    height: 3rem;
}
.explanation,
#nextQuestion{
    display: none;
}

.answerBoxOld{
    display: none;
}

.socialButton{
    width:50px;
    height:50px;
    text-align: center !important;
    padding:0px !important;
    line-height: 50px !important;
    border:solid 1px white;
    color:white !important;
    font-size: 11px;
    text-transform: lowercase;
}

.socialButton:hover{
    background-color: #70d44b !important;
    border-color: #70d44b !important;
}


  .card {
    overflow: hidden; /* Hide any content that exceeds the card's width */
  }
  
  .card img,
  .modal img,
  .card iframe,
  .modal iframe
  {
    max-width: 100%; /* Make sure the image does not exceed the card's width */
    height: auto; /* Maintain the image's aspect ratio */
  }

 .modal-dialog {
    max-width: 600px; /* Adjust the value as per your needs */
    width: 70% !important; /* Fallback width for smaller screens */
  }