:host {
  /*@doc Define a camada em que o componente será exibido.*/
  --ez-modal-z-index: var(--elevation--22, 22);
  /*@doc Define o espaçamento vertical do conteúdo do modal.*/
  --ez-modal-vertical-padding: var(--space--large, 24px);
  /*@doc Define o padding entre o conteúdo e o modal */
  --ez-modal-content-padding: 24px;
  display: block;
}

.modal {
  position: fixed;
  display: flex;
  top: 0px;
  z-index: var(--ez-modal-z-index);
  left: 0px;
  width: 100%;
  box-sizing: border-box;
  height: 100vh;  
  outline: none;
}

.modal__screen-light{
  background: rgba(0, 4, 12, 0.1);
}

.modal__screen-none{
  background: none;
}

.modal__screen-medium{
  backdrop-filter: blur(4px);
  background: rgba(0, 4, 12, 0.4)
}

.modal__vertical-padding{
  padding: var(--ez-modal-vertical-padding) 0;
}

@keyframes expand-modal--left {
  from {
    transform: translate(-100%)
  }
}

@keyframes expand-modal--right {
  from {
    transform: translate(100%)
  }
}

.modal__container {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  box-sizing: border-box;
  width: 100%;
  align-items: flex-start;
}

.modal__container--right {
  animation: expand-modal--right .2s ease-in-out 1;
  justify-content: flex-end;
}

.modal__container--left {
  animation: expand-modal--left .2s ease-in-out 1;
  justify-content: flex-start;
}

.modal__content {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  max-height: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: rgb(255, 255, 255);
  padding: var(--ez-modal-content-padding);
  box-shadow: rgb(0 38 111 / 12%) 0px 0px 16px 0px;
}

.modal__content--right {
  border-radius: 12px 0px 0px 12px;
}

.modal__content--left {
  border-radius: 0px 12px 12px 0px;
}

.modal__box__container {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  width: 100%;
  border-radius: 12px;
}

/* //////// GRID SYSTEM //////// */

.row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.col {
  display: flex;
  flex-wrap: wrap;
  align-self: flex-start;
  box-sizing: border-box;
}

.col--stretch {
  align-self: stretch;
}

.col--undefined {
  width: unset;
}

.col--nowrap {
  flex-wrap: nowrap;
}

@media screen and (min-width: 320px) {
  .col--sd-1 {
    width: 8.33333%;
  }

  .col--sd-2 {
    width: 16.66667%;
  }

  .col--sd-3 {
    width: 25%;
  }

  .col--sd-4 {
    width: 33.33333%;
  }

  .col--sd-5 {
    width: 41.66667%;
  }

  .col--sd-6 {
    width: 50%;
  }

  .col--sd-7 {
    width: 58.33333%;
  }

  .col--sd-8 {
    width: 66.66667%;
  }

  .col--sd-9 {
    width: 75%;
  }

  .col--sd-10 {
    width: 83.33333%;
  }

  .col--sd-11 {
    width: 91.66667%;
  }

  .col--sd-12 {
    width: 100%;
  }
}

@media screen and (min-width: 480px) {
  .col--pn-1 {
    width: 8.33333%;
  }

  .col--pn-2 {
    width: 16.66667%;
  }

  .col--pn-3 {
    width: 25%;
  }

  .col--pn-4 {
    width: 33.33333%;
  }

  .col--pn-5 {
    width: 41.66667%;
  }

  .col--pn-6 {
    width: 50%;
  }

  .col--pn-7 {
    width: 58.33333%;
  }

  .col--pn-8 {
    width: 66.66667%;
  }

  .col--pn-9 {
    width: 75%;
  }

  .col--pn-10 {
    width: 83.33333%;
  }

  .col--pn-11 {
    width: 91.66667%;
  }

  .col--pn-12 {
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .col--tb-1 {
    width: 8.33333%;
  }

  .col--tb-2 {
    width: 16.66667%;
  }

  .col--tb-3 {
    width: 25%;
  }

  .col--tb-4 {
    width: 33.33333%;
  }

  .col--tb-5 {
    width: 41.66667%;
  }

  .col--tb-6 {
    width: 50%;
  }

  .col--tb-7 {
    width: 58.33333%;
  }

  .col--tb-8 {
    width: 66.66667%;
  }

  .col--tb-9 {
    width: 75%;
  }

  .col--tb-10 {
    width: 83.33333%;
  }

  .col--tb-11 {
    width: 91.66667%;
  }

  .col--tb-12 {
    width: 100%;
  }
}

@media screen and (min-width: 992px) {
  .col--md-1 {
    width: 8.33333%;
  }

  .col--md-2 {
    width: 16.66667%;
  }

  .col--md-3 {
    width: 25%;
  }

  .col--md-4 {
    width: 33.33333%;
  }

  .col--md-5 {
    width: 41.66667%;
  }

  .col--md-6 {
    width: 50%;
  }

  .col--md-7 {
    width: 58.33333%;
  }

  .col--md-8 {
    width: 66.66667%;
  }

  .col--md-9 {
    width: 75%;
  }

  .col--md-10 {
    width: 83.33333%;
  }

  .col--md-11 {
    width: 91.66667%;
  }

  .col--md-12 {
    width: 100%;
  }
}

@media screen and (min-width: 1200px) {
  .col--ld-1 {
    width: 8.33333%;
  }

  .col--ld-2 {
    width: 16.66667%;
  }

  .col--ld-3 {
    width: 25%;
  }

  .col--ld-4 {
    width: 33.33333%;
  }

  .col--ld-5 {
    width: 41.66667%;
  }

  .col--ld-6 {
    width: 50%;
  }

  .col--ld-7 {
    width: 58.33333%;
  }

  .col--ld-8 {
    width: 66.66667%;
  }

  .col--ld-9 {
    width: 75%;
  }

  .col--ld-10 {
    width: 83.33333%;
  }

  .col--ld-11 {
    width: 91.66667%;
  }

  .col--ld-12 {
    width: 100%;
  }
}