#mdr-qsg .page-title {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;  
}
@media (max-width: 768px){
  #mdr-qsg h1 {
    font-size: 28px;
  }
  
}

#mdr-qsg .page-title h1,  #mdr-qsg .page-title h2 {
  margin: 0;
  text-align: left;
}

#mdr-qsg .page-title h2 {
font-size: 1.266rem;
font-weight: 400;
}

#mdr-qsg .flex-wrapper {
  display: flex;
  gap: 36px;
  align-items: center;
}
#mdr-qsg .flex-wrapper .flex-left, #mdr-qsg .flex-wrapper .flex-right {
  width: 50%;
}

@media (max-width: 1024px) {
  #mdr-qsg .flex-wrapper {
  flex-direction: column;
  }
  #mdr-qsg .flex-wrapper .flex-right,  #mdr-qsg .flex-wrapper .flex-left {
  width: 100%;
  text-align: left;
  }

}

h2, h3, h4, h5 {
  margin: 0;
}

@media (max-width: 768px) {
  h2 {
    font-size: 22px;
  }
}

/*INTRO*/
#intro-wrapper {
  padding: 24px 0;
}

#intro-wrapper .flex-right {
  border: 1px solid #B9BBC1;
  border-radius: 8px;
  padding: 18px;
}

.flex-left p {
  margin-top: 0;
}

#intro-wrapper .flex-right h2 {
  margin: 0;
  font-size: 24px;
}

.webinar div {
  max-width: 315px;
}

#intro-wrapper .checklist {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-left: 0px;
}

.checklist li {
    display: flex;
    gap: 18px;
    align-items: center;
}

.checklist li .icon {
    min-width: 22px;
    min-height: 22px;
    width: 22px;
    padding-left: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
}

.light-theme .checklist li .icon {
  background-color: var(--color-blue-50);
  color: var(--color-white);
}

.dark-theme .checklist li .icon {
  background-color: var(--color-blue-60);
  color: var(--color-black);
}

#mdr-qsg ul {
    list-style-type: disc;
    list-style-position: outside;
    margin-left: 18px;
}

.onboarding-img {
  width: 160px;
  height: 160px;
  overflow: hidden;
  border-radius: 100px;
}

.onboarding-img img {
  width: 150%;
}
.flex-right .webinar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


@media (max-width:1179px) {
  .flex-right .webinar {
    flex-direction: column-reverse;
    align-items: start;
  } 

  .webinar div {
    max-width: 100%;
  }
}
@media (max-width:1024px){
  .webinar div {
    max-width: 70%;
  }
  .onboarding-img {
    width: 150px;
    height: 150px;
  }
}

@media (max-width:768px){
  .webinar {
    flex-direction: column-reverse;
   
  } 
  .webinar div {
    max-width: 100%;
  }

  .flex-right .webinar{
    align-items: start;
    margin-top: 10px;
  }
}

/*REQUIREMENTS*/
#requirements-wrapper h2 {
  margin-bottom: 16px;
}

.light-theme #requirements-wrapper {
  background-color: #FFFBEF;
  padding: 24px 0
}

.dark-theme #requirements-wrapper {
  background-color: #1e1c15;
  padding: 24px 0
}

#requirements ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

.req-resources {
  padding: 24px;
  border-radius: 8px;
}

.req-resources h3 {
  font-size: 20px;
}

.light-theme #requirements .req-resources {
  background-color: #fff;
  border: 1px solid #FFCA2C;
}

.dark-theme #requirements .req-resources {
  background-color: #282620;
  border: 1px solid #dbbd6b;
}

.light-theme .req-resources li::marker {
  color: var(--color-blue-40);
  font-size: 12px;
}
.light-theme .req-resources .icon {
  color: #FFCA2C;
  font-size: 24px;
}

.dark-theme .req-resources .icon {
  color: #dbbd6b;
  font-size: 24px;
}

/*Callouts*/

.related-resource {
  display: flex;
  padding: 18px 26px;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  align-self: stretch;
  border-radius: 8px;
}

.related-resource h5 {
  font-size: 18px;
}
.related-resource .icon {
  font-size: 28px;
}
.related-resource div {
  display: flex;
  align-items: center;
}
.light-theme .related-resource {
  border: 1px solid #FFD86A;
  background: #FFFDF7;
}

.light-theme .related-resource .icon {
  color: var(--color-blue-40);
}

.dark-theme .related-resource {
  border: 1px solid #dbbd6b;
  background: #1b170d;
}

.dark-theme .related-resource .icon {
  color: var(--color-blue-60);
}

@media (max-width:768px){

  .related-resource {
    padding: 12px;
  }
  .related-resource .icon {
    display: none;
  }
}

.callout {
  display: flex;
  padding: 12px;
  gap: 16px;
  border-radius: 12px;
  align-items: center;
}

.callout p {
  margin: 0;
}

.callout .icon {
  display: flex;
  font-size: 42px;
  width:42px;
  align-items: center;
}

.light-theme .callout {
  background-color: #FFF6F5;
  border: 1px solid #E75B72;
}

.light-theme .callout .icon {
  color: #E75B72;
}

.dark-theme .callout {
  background-color: #2e2625;
  border: 1px solid #E75B72;
}

.dark-theme .callout .icon {
  color: #E75B72;
}

/*NEXT STEPS*/
#mdr-qsg .next-steps {
  padding: 24px 8px;
  text-align: center;
  gap: 24px;
  display: flex;
  flex-direction: column; 
}

#mdr-qsg .next-steps h2 {
  font-size: 26px;
}
@media (max-width:768px){
  #mdr-qsg .next-steps h2 {
    font-size: 22px;
  }
}
.light-theme #mdr-qsg .next-steps {
  background-color: #FFF4D2;
}

.dark-theme #mdr-qsg .next-steps {
  background-color: #16140d;
}

#mdr-qsg .next-steps .next-step-wrapper {
  display: flex;
  flex-direction: row;
  gap: 36px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0;

}
#mdr-qsg .next-steps .next-step-wrapper .next-step-box {
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  padding: 16px;
  border-radius: 12px;
  cursor: pointer;
  flex: 1 1 30%;
  width: 280px;

}

.light-theme .next-step-box{
  background: var(--color-white);
  border: 4px solid transparent;
}
.dark-theme .next-step-box {
  background: #1b170d;
  border: 4px solid #dbbd6b;
}
.light-theme .next-step-box:hover {
  border: 4px solid #FFE18B;
  background: #FFFDF7;
  box-shadow: 4px 4px 25px 0px rgba(0, 0, 0, 0.10);
}
.dark-theme .next-step-box:hover {
  border: 4px solid #ad7f00;
  background: #17140a;
  box-shadow: 4px 4px 25px 0px rgba(0, 0, 0, 0.10);
}

.next-steps .next-step-wrapper h3 {
  margin: 0;
  font-size: 1rem;
}
.next-steps .next-step-wrapper h3 a:hover {
  text-decoration: none;
}

.light-theme #mdr-qsg .next-steps .next-step-wrapper h3 a {
  font-weight: 500;
  color: var(--color-black);
}

.dark-theme #mdr-qsg .next-steps .next-step-wrapper h3 a {
  font-weight: 500;
  color: #dbbd6b;
}

.next-steps .next-step-wrapper .icon {
  font-size: 1.602rem;
}

.light-theme .next-steps .next-step-wrapper .icon {
  color: var(--color-blue-50);
}
.dark-theme .next-steps .next-step-wrapper .icon {
  color: var(--color-blue-70);
}

/*STEPS*/

#qs-accordion .acc-header-title {
  font-size: 24px;
}

@media (max-width:768px) {
  #qs-accordion .acc-header-title {
    font-size: 20px;
  }
}

.qs-steps .completed {
  font-size: 24px;
  padding: 0 10%;
}

/*SUB STEPS*/

#qs-accordion .sub-acc-header h4 {
  font-size: 20px;
}

@media (max-width:768px) {
  #qs-accordion .sub-acc-header h4 {
    font-size: 18px;
  }
}

#qs-accordion .sub-acc-header {
  text-align: left;
}

@media (max-width: 768px){
  #qs-accordion .sub-acc-header {
    padding: 12px 18px;
  }
}

.sub-acc-content {
  padding: 16px;
}

@media (max-width:768px){
  .sub-acc-content {
    padding: 0;
  }
}


.sub-content .image-container, .content .image-container {
  width: 100%;
  padding-left: 10px;
}

.sub-content ol {
  margin-bottom: 0;
}
.sub-content .image-container img, .content .image-container img{
  width: 100%;
  border-radius:16px;
}
.sub-content ol li .image-container img {
  padding-left: 0;
  margin-top: 16px;
}

.svg-icon {
  width: 29px;
  height: 29px;
  vertical-align: bottom;
}

.icon-mwb-self-protection {
  width: 42px;
  height: 28px;
  background-image: url("https://support.threatdown.com/hc/theming_assets/01J4SRW3MVJVQD90CWFS4WC1QW");
  background-size: contain;
  background-repeat: no-repeat;
  }
.light-theme .icon-mwb-self-protection {
  filter: brightness(0) saturate(100%) invert(20%) sepia(96%) saturate(1966%) hue-rotate(207deg) brightness(98%) contrast(97%);
}
.dark-theme .icon-mwb-self-protection {
  filter: brightness(0) saturate(100%) invert(61%) sepia(43%) saturate(7321%) hue-rotate(198deg) brightness(99%) contrast(92%);
}
.sub-content .image-container .small-img {
  width: 250px;
}

.dark-theme .svg-icon {
  filter: invert(1); 
}
.gif {
  border-radius: 16px;
  border: 1px solid lightgray;
}


.light-theme #mdr-qsg .wrapper.steps-wrapper {
  background-color: var(--color-blue-99);
  
}

#mdr-qsg .qs-steps {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
#mdr-qsg .qs-steps h2 {
  margin: 2% 10%;
  text-align: center;
}
@media (max-width: 768px) {
  #mdr-qsg .qs-steps h2 {
    margin: 24px 0;
  }
}
#mdr-qsg .qs-steps h3 {
  margin: 4%;
  text-align: center;
}

#mdr-qsg #qs-accordion {
    max-width: 896px;
    margin: 0 auto;
}

@media (max-width: 996px) {
  #mdr-qsg #qs-accordion {
    max-width: 100%;
    margin: 0;
  }
}
@media (max-width: 768px) {
    #mdr-qsg #qs-accordion {
    max-width: 100%;
    margin: 0;
  }
}

.light-theme #mdr-qsg .acc {
  border: 1px solid var(--color-gray-95);
  background-color: var(--color-white);
}

#mdr-qsg .acc .acc-header {
    font-size: 1.266rem;
    padding: 16px;
}
.light-theme #mdr-qsg .acc .acc-header.header-active {
  background: var(--color-blue-90);
}
.light-theme #mdr-qsg .acc .acc-header.header-active .acc-header-title {
  color: var(--color-black);
}
.light-theme #mdr-qsg .acc:hover {
  background: var(--color-blue-90);
}
#mdr-qsg .acc .acc-header-title {
  margin: 0;
  text-align: left;
}
.light-theme #mdr-qsg .acc-content {
  background: var(--color-white);
}
#mdr-qsg .acc-content .content {
  padding: 0 36px;
}
@media (max-width: 768px) {
  #mdr-qsg .acc-content .content {
    padding: 0;
  }
}

#mdr-qsg .acc-content .content ul li,  #mdr-qsg .acc-content .content ol li {
  padding: 8px 0;
}
 #mdr-qsg .acc-content .content .icon-mwb-system-windows, #mdr-qsg .acc-content .content .icon-mwb-system-apple {
  display: inline-block;
  padding-right: 8px;
}
.light-theme #mdr-qsg .acc-content .content .sub-acc-header {
  background: var(--color-gray-90);
}
.light-theme #mdr-qsg .acc-content .content .sub-acc-header:hover {
  background: var(--color-gray-80);
}

@media (max-width: 1024px) {
    #mdr-qsg .next-steps .next-step-wrapper .next-step-box  {
      flex: 1 1 50%;
      
    }
}

.dark-theme #mdr-qsg .acc {
  border: 1px solid var(--color-gray-40);
  background-color: var(--color-gray-30);
}
.dark-theme #mdr-qsg .acc .acc-header.header-active {
  background: var(--color-gray-20);
}
.dark-theme #mdr-qsg .acc .acc-header.header-active .acc-header-title {
  color: var(--color-blue-70);
}
.dark-theme #mdr-qsg .acc:hover {
  background: var(--color-gray-20);
}

.dark-theme #mdr-qsg .acc-content {
  background: var(--color-gray-20);
}
.dark-theme #mdr-qsg .acc-content .content .sub-acc-header {
  border: 3px solid transparent;
  background: var(--color-gray-40);
}
.dark-theme #mdr-qsg .acc-content .content .sub-acc-header:hover {
  background: var(--color-gray-40);
  border: 3px solid var(--color-blue-70);
}
.dark-theme #mdr-qsg .wrapper.steps-wrapper {
  background-color: var(--color-gray-30);
}