/* == Modal == */
.modal-open .dimmer {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1049;
   background-color: rgba(0, 0, 0, 0.75);
}
.modal-open {
   overflow: hidden;
}
.modal-open .wojo.modal {
   overflow-x: hidden;
   overflow-y: auto;
}
.wojo.modal {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 1050;
   display: none;
   width: 100%;
   height: 100%;
   overflow: hidden;
   outline: 0;
}
.wojo.modal .dialog {
   position: relative;
   width: auto;
   pointer-events: none;
   margin: 1.75rem auto;
   display: flex;
   align-items: center;
   min-height: calc(100% - (1.75rem * 2));
}
.wojo.modal .dialog > .content {
   position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
   pointer-events: auto;
   background-color: var(--white-color);
   background-clip: padding-box;
   border-radius: 1rem;
   outline: 0;
}
.wojo.modal .dialog > .content > .header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1rem 1rem;
   border-bottom: 1px solid var(--grey-color-500);
   border-top-left-radius: 1rem;
   border-top-right-radius: 1rem;
}
.wojo.modal .dialog > .content > .header > button {
   background: var(--grey-color-300);
   border: 0;
   cursor: pointer;
   padding: 0;
   line-height: 1;
   border-radius: var(--radius);
   margin: 0;
   width: 2rem;
   height: 2rem;
   text-align: center;
}
.wojo.modal .dialog > .content > .header h5 {
   margin-bottom: 0;
   line-height: 1.5;
   font-size: 1rem;
   font-weight: 600;
}
.wojo.modal .dialog > .content > .header h5 span {
   margin: 0 .5rem;
   font-size: 1rem;
}
.wojo.modal .dialog > .content > .body {
   position: relative;
   flex: 1 1 auto;
   padding: 1.5rem;
}
.wojo.modal .dialog > .content > .footer {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   padding: 1rem;
   border-top: 1px solid var(--grey-color-500);
   border-bottom-right-radius: 1rem;
   border-bottom-left-radius: 1rem;
}
.wojo.modal .dialog > .content > .footer > :not(:first-child) {
   margin-left: .250rem;
}
.wojo.modal .dialog > .content > .footer > :not(:last-child) {
   margin-right: .250rem;
}
/* == Size == */
.wojo.small.modal .dialog {
   width: 320px;
}
.wojo.modal .dialog {
   width: 560px;
}
.wojo.medium.modal .dialog {
   width: 640px;
}
.wojo.big.modal .dialog {
   width: 1024px;
}
.wojo.full.modal .dialog {
   width: 100%;
}
/* == Phone == */
@media screen and (max-width: 640px) {
   .wojo.small.modal .dialog,
   .wojo.modal .dialog,
   .wojo.medium.modal .dialog,
   .wojo.big.modal .dialog,
   .wojo.full.modal .dialog {
      width: 100%;
   }
}
/* == Mobile == */
@media screen and (min-width: 641px) and (max-width: 768px) {
   .wojo.big.modal .dialog,
   .wojo.full.modal .dialog {
      width: 100%;
   }
}