.modal {
  display: none; position: fixed; z-index: 3000;
  left: 0; top: 0; width: 100%; height: 100%; padding: 40px;
  background-color: rgba(0, 0, 0, 0.7); cursor: pointer;
}

.modal-open {
  overflow-y: scroll;
}

#modalContent, #chartContent, #indicatorContent {
  top: 100px;
  max-width: calc(100% - 10px); max-height: calc(100% - 10px); margin: auto; display: block;
  width: 960px; /* Ensure the width and height adjusts to the aspect ratio */
  border-radius: 8px; border: 3px solid #FFF;
  opacity: 0; /* Start with opacity 0 for the fade effect */
  transition: .28s ease-out;
  padding: 24px;
}

/* Ensure canvas only fills the container */
#chartContent canvas { height: 480px !important; }

.modal__row .content { position: relative; margin-top: 24px; }
.modal__best { margin-bottom: 12px; position: relative; }
.modal__img { position: absolute; text-align: right; top: 12px; height: 36px; width: 120px; display: inline-block; }
.modal img { }
.modal h3 { font-size: 42px; font-weight: 600; line-height: 24px; margin-bottom: 24px; color: var(--bright-green); }
.modal span { font-size: 24px; color: #444; }
.modal p { display: inline-block; font-size: 19px; }

#practiceModal p { padding-left: 160px; }
.modal a { overflow-wrap: break-word; word-break: break-all; overflow-wrap: break-word; }

@media only screen and (max-width: 768px) {
    .modal { padding: 4px; }
	#modalContent { width: 98%; padding: 24px; }
}