.bg-purple-500, .bg-custom-purple, .accordion-header .icon, .hover\:bg-blue-200:hover, .bg-blue-200, .bgbranding, .btn-purple, .menu-toggle, #landing_page_menu .bg-purple-100.menuList:before, .main-topic:before{ background: #023047 !important; color:#FFFFFF !important;}
                .card-front, .card-back{border-top: 5px solid #023047 !important;}
                .scroll-arrow{color: #023047 !important;}
            .dot.active{background: #023047 !important; border-color:#023047 !important;}
            .quote-box, .custom-note-block .note-card{border-color: #023047 !important;}
            .text-purple-500{color: #023047 !important;}
             .custom-question-block .btn-purple{ background: #023047 !important; color: #FFFFFF!important; }
    .custom-question-block{color: #000 !important;}
.custom-note-block .note-card:before { background-color: #023047 !important;}
.custom-note-block .note-card{
  background: color-mix(in srgb, var(--primary-color) 20%, white 80%) !important;
  border-color: #023047 !important;
}
:root {
  --primary-color: #023047;
  --tint-color: color-mix(in srgb, var(--primary-color) 20%, white 80%);
}

body{ font-family: Source sans pro, sans-serif !important; color: #000000 !important; }
.custom-list-block ol li::before{ background-color: #023047 !important;}
.custom-checkbox-accordion .checkbox-content h1{color: #000000 !important;}
.custom-checkbox-accordion .checkbox-content h3, .custom-checkbox-accordion .checkbox-content h4, .custom-checkbox-accordion .checkbox-content h5, .custom-checkbox-accordion .checkbox-content h6{color: #000000 !important;}
h1, .h1, h2, .h2, h3, .h3, h4, h5, .timelinehead {font-family: Source sans pro, sans-serif !important;  color: #000000;}
.loader1 span { background:#023047}; 
.timeline-container h3.font-semibold{ color: #000000  !important;}
.title-div{background-color: #023047; color: #FFFFFF !important;}
.title-div svg{fill: #FFFFFF !important; stroke: #FFFFFF !important; }
.icon-home-theme{fill: #023047 !important; }
.scenario.card, .scenario-intro.card {
  display: flex;
  flex-direction: row;
  overflow: hidden;
   max-width: 100%;
  margin: 0 auto;
  gap:30px;
  padding: 0px 15px;
}
.scenario.card h3{ color: #FFFFFF !important; float: left; display:flex; align-items:center;
    width: 100%;
    margin-bottom: 15px;}

.scenario.card img {
  width: calc(100% - 0px);
  max-height:64vh;
  object-fit: cover;
}
.react-renderer.node-card:last-child{margin-bottom: 70px !important;}

.scenario .card-image {
  flex: 1 1 50%;

}

.scenario .card-content {
  flex: 1 1 50%;

}

.scenario .card-content h2 {
  margin-top: 0;
  margin-bottom:15px;
  display:flex;
  align-items:center;
}

.scenario .buttons {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.scenario .buttons button {
  border: none;
  cursor: pointer;
      min-height: auto;
    width: auto;
    position: unset;
    transform: none;
}
 .scenario-block{width: 98%;}
        .scenario-block .container{width: 80% !important; margin: 0px auto;}
        .scenario-block .text-center{text-align: center;}
.quiz-options li:marker{display: none !important;}
.quiz-options li{margin: 6px 0px;}
.scenario .buttons .continue, .scenario .buttons .back  {
  background: #fff !important;
  color: #333  !important;
}
.scenario .buttons .continue:hover, .scenario .buttons .back:hover, .scenario .bg-blue-600:hover{opacity:0.6;}
.quiz-options{display: flex; flex-direction: column; gap:15px;}
.quiz-options label{font-weight:normal !important;}
/* Mobile view */
@media (max-width: 768px) {
  .scenario .card {
    flex-direction: column;
  }
  .scenario .card-image,
  .scenario .card-content {
    flex: 1 1 100%;
  }
  .scenario .card img {
    height: 250px;
  }
}
.bg-blue-600, .bg-blue-600:hover, .bg-blue-600:focus{background: #023047 !important; color: #FFFFFF !important;}
.scenario .bg-blue-600, .scenario .bg-blue-600:hover, .scenario .bg-blue-600:focus, .scenario .bg-gray-600, .scenario .bg-gray-600:hover, .scenario .bg-gray-600:focus, .scenario .buttons .back, .scenario .buttons .back:hover{background: #FFFFFF !important; color: #333 !important;}
.scenario .card-content h2, .scenario .card-content h3{color: #FFFFFF !important;}
.scenario .card-content h3{float: left;
    width: 100%;
    margin-bottom: 15px;}
.scenario-bg{
        background: #023047 !important;
        color: #FFFFFF;
    }
     .card-content .icon-check-o, .card-content .icon-close-c{fill: #FFFFFF;  
        border-radius: 50%;
    width: 38px;
    height: 38px;
    float: left;
    margin: 0px 12px 0px 0px;} 
    .card-content .icon-close-c{ width: 45px !important;  height: 45px !important;}
    .quiz-options label{cursor:pointer;}
 .quiz-options label input[type=checkbox], .quiz-options label input[type=radio] {
    margin-top: 5px !important;
    width: 18px !important;
    height: 18px  !important;
    float: left;
    margin-right: 10px;
}
.validation{margin-top:15px;}
#landing_page_menu1 .bg-purple-100:before{background-color:#023047 !important;opacity: 100px !important;}