.modal-index-desmos
  z-index: 999999
  position: fixed
  top: 0
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  pointer-events: none
  height: 700px
  width: 80%
  max-width: 1050px
  top: 50%
  left: 40%
  transform: translate(-50%, -50%)
  .modal-overlay-desmos
    z-index: 10
    position: fixed
    top: 0
    left: 0
    background-color: rgba(0,0,0,1)
    transition: all 0.15s cubic-bezier(.13,.81,.27,.96)
    opacity: 0
    &.visible-overlay-desmos
      opacity: 0.45
  .modal-desmos
    width: 80%
    pointer-events: all
    z-index: 12
    border-radius: 20px
    overflow: hidden
    position: relative
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.15)
    background-color: white
    .modal-scroller-desmos
      height: fit-content
      .modal-header-desmos
        background-color: #6fa82f
        padding: 12px 20px
        font-size: 24px
        display: flex
        justify-content: space-between
        align-items: center
        .close-button-desmos
          width: 40px
          height: 40px
          border-radius: 20px
          background-color: red
          color: white
          position: relative
          top: 0
          right: 0
      .modal-content__wrapper-desmos
        padding: 20px