:root {
  --grid-1: var(--grid-column-width);
  --layout-content-width: var(--grid-full);
}
@media (min-width: 1921px) {
  :root {
    --grid-padding: 64px;
    --grid-layout-width: 1920px;
    --grid-column-gutter: 32px;
    --grid-column-total: 24;
    --grid-full: calc(var(--grid-layout-width) - var(--grid-padding) * 2);
    --grid-column-width: calc((var(--grid-full) - var(--grid-column-gutter) * (var(--grid-column-total) - 1)) / var(--grid-column-total));
  }
}
@media (min-width: 1681px) {
  :root {
    --grid-padding: 64px;
    --grid-layout-width: 100vw;
    --grid-column-gutter: 32px;
    --grid-column-total: 24;
    --grid-full: calc(var(--grid-layout-width) - var(--grid-padding) * 2);
    --grid-column-width: calc((var(--grid-full) - var(--grid-column-gutter) * (var(--grid-column-total) - 1)) / var(--grid-column-total));
  }
}
@media (min-width: 1441px) and (max-width: 1680px) {
  :root {
    --grid-padding: 64px;
    --grid-layout-width: 100vw;
    --grid-column-gutter: 32px;
    --grid-column-total: 24;
    --grid-full: calc(var(--grid-layout-width) - var(--grid-padding) * 2);
    --grid-column-width: calc((var(--grid-full) - var(--grid-column-gutter) * (var(--grid-column-total) - 1)) / var(--grid-column-total));
  }
}
@media (min-width: 1201px) and (max-width: 1680px) {
  :root {
    --grid-padding: 40px;
    --grid-layout-width: 100vw;
    --grid-column-gutter: 24px;
    --grid-column-total: 24;
    --grid-full: calc(var(--grid-layout-width) - var(--grid-padding) * 2);
    --grid-column-width: calc((var(--grid-full) - var(--grid-column-gutter) * (var(--grid-column-total) - 1)) / var(--grid-column-total));
  }
}
@media (min-width: 1201px) {
  :root {
    --grid-2: calc(var(--grid-column-width) * 2 + var(--grid-column-gutter) * 1);
    --grid-3: calc(var(--grid-column-width) * 3 + var(--grid-column-gutter) * 2);
    --grid-4: calc(var(--grid-column-width) * 4 + var(--grid-column-gutter) * 3);
    --grid-5: calc(var(--grid-column-width) * 5 + var(--grid-column-gutter) * 4);
    --grid-6: calc(var(--grid-column-width) * 6 + var(--grid-column-gutter) * 5);
    --grid-7: calc(var(--grid-column-width) * 7 + var(--grid-column-gutter) * 6);
    --grid-8: calc(var(--grid-column-width) * 8 + var(--grid-column-gutter) * 7);
    --grid-9: calc(var(--grid-column-width) * 9 + var(--grid-column-gutter) * 8);
    --grid-10: calc(var(--grid-column-width) * 10 + var(--grid-column-gutter) * 9);
    --grid-11: calc(var(--grid-column-width) * 11 + var(--grid-column-gutter) * 10);
    --grid-12: calc(var(--grid-column-width) * 12 + var(--grid-column-gutter) * 11);
    --grid-13: calc(var(--grid-column-width) * 13 + var(--grid-column-gutter) * 12);
    --grid-14: calc(var(--grid-column-width) * 14 + var(--grid-column-gutter) * 13);
    --grid-15: calc(var(--grid-column-width) * 15 + var(--grid-column-gutter) * 14);
    --grid-16: calc(var(--grid-column-width) * 16 + var(--grid-column-gutter) * 15);
    --grid-17: calc(var(--grid-column-width) * 17 + var(--grid-column-gutter) * 16);
    --grid-18: calc(var(--grid-column-width) * 18 + var(--grid-column-gutter) * 17);
    --grid-19: calc(var(--grid-column-width) * 19 + var(--grid-column-gutter) * 18);
    --grid-20: calc(var(--grid-column-width) * 20 + var(--grid-column-gutter) * 19);
    --grid-21: calc(var(--grid-column-width) * 21 + var(--grid-column-gutter) * 20);
    --grid-22: calc(var(--grid-column-width) * 22 + var(--grid-column-gutter) * 21);
    --grid-23: calc(var(--grid-column-width) * 23 + var(--grid-column-gutter) * 22);
    --grid-24: calc(var(--grid-column-width) * 24 + var(--grid-column-gutter) * 23);
  }
}
@media (min-width: 841px) and (max-width: 1200px) {
  :root {
    --grid-padding: 32px;
    --grid-layout-width: 100vw;
    --grid-column-gutter: 16px;
    --grid-column-total: 12;
    --grid-full: calc(var(--grid-layout-width) - var(--grid-padding) * 2);
    --grid-column-width: calc((var(--grid-full) - var(--grid-column-gutter) * (var(--grid-column-total) - 1)) / var(--grid-column-total));
    --grid-2: calc(var(--grid-column-width) * 2 + var(--grid-column-gutter) * 1);
    --grid-3: calc(var(--grid-column-width) * 3 + var(--grid-column-gutter) * 2);
    --grid-4: calc(var(--grid-column-width) * 4 + var(--grid-column-gutter) * 3);
    --grid-5: calc(var(--grid-column-width) * 5 + var(--grid-column-gutter) * 4);
    --grid-6: calc(var(--grid-column-width) * 6 + var(--grid-column-gutter) * 5);
    --grid-7: calc(var(--grid-column-width) * 7 + var(--grid-column-gutter) * 6);
    --grid-8: calc(var(--grid-column-width) * 8 + var(--grid-column-gutter) * 7);
    --grid-9: calc(var(--grid-column-width) * 9 + var(--grid-column-gutter) * 8);
    --grid-10: calc(var(--grid-column-width) * 10 + var(--grid-column-gutter) * 9);
    --grid-11: calc(var(--grid-column-width) * 11 + var(--grid-column-gutter) * 10);
    --grid-12: calc(var(--grid-column-width) * 12 + var(--grid-column-gutter) * 11);
    --grid-13: var(--grid-full);
    --grid-14: var(--grid-full);
    --grid-15: var(--grid-full);
    --grid-16: var(--grid-full);
    --grid-17: var(--grid-full);
    --grid-18: var(--grid-full);
    --grid-19: var(--grid-full);
    --grid-20: var(--grid-full);
    --grid-21: var(--grid-full);
    --grid-22: var(--grid-full);
    --grid-23: var(--grid-full);
    --grid-24: var(--grid-full);
  }
}
@media (min-width: 601px) and (max-width: 840px) {
  :root {
    --grid-padding: 32px;
    --grid-layout-width: 100vw;
    --grid-column-gutter: 16px;
    --grid-column-total: 8;
    --grid-full: calc(var(--grid-layout-width) - var(--grid-padding) * 2);
    --grid-column-width: calc((var(--grid-full) - var(--grid-column-gutter) * (var(--grid-column-total) - 1)) / var(--grid-column-total));
    --grid-2: calc(var(--grid-column-width) * 2 + var(--grid-column-gutter) * 1);
    --grid-3: calc(var(--grid-column-width) * 3 + var(--grid-column-gutter) * 2);
    --grid-4: calc(var(--grid-column-width) * 4 + var(--grid-column-gutter) * 3);
    --grid-5: calc(var(--grid-column-width) * 5 + var(--grid-column-gutter) * 4);
    --grid-6: calc(var(--grid-column-width) * 6 + var(--grid-column-gutter) * 5);
    --grid-7: calc(var(--grid-column-width) * 7 + var(--grid-column-gutter) * 6);
    --grid-8: calc(var(--grid-column-width) * 8 + var(--grid-column-gutter) * 7);
    --grid-9: var(--grid-full);
    --grid-10: var(--grid-full);
    --grid-11: var(--grid-full);
    --grid-12: var(--grid-full);
    --grid-13: var(--grid-full);
    --grid-14: var(--grid-full);
    --grid-15: var(--grid-full);
    --grid-16: var(--grid-full);
    --grid-17: var(--grid-full);
    --grid-18: var(--grid-full);
    --grid-19: var(--grid-full);
    --grid-20: var(--grid-full);
    --grid-21: var(--grid-full);
    --grid-22: var(--grid-full);
    --grid-23: var(--grid-full);
    --grid-24: var(--grid-full);
  }
}
@media (max-width: 600px) {
  :root {
    --grid-padding: 24px;
    --grid-layout-width: 100vw;
    --grid-column-gutter: 12px;
    --grid-column-total: 4;
    --grid-full: calc(var(--grid-layout-width) - var(--grid-padding) * 2);
    --grid-column-width: calc((var(--grid-full) - var(--grid-column-gutter) * (var(--grid-column-total) - 1)) / var(--grid-column-total));
    --grid-2: calc(var(--grid-column-width) * 2 + var(--grid-column-gutter) * 1);
    --grid-3: calc(var(--grid-column-width) * 3 + var(--grid-column-gutter) * 2);
    --grid-4: calc(var(--grid-column-width) * 4 + var(--grid-column-gutter) * 3);
    --grid-5: var(--grid-full);
    --grid-6: var(--grid-full);
    --grid-7: var(--grid-full);
    --grid-8: var(--grid-full);
    --grid-9: var(--grid-full);
    --grid-10: var(--grid-full);
    --grid-11: var(--grid-full);
    --grid-12: var(--grid-full);
    --grid-13: var(--grid-full);
    --grid-14: var(--grid-full);
    --grid-15: var(--grid-full);
    --grid-16: var(--grid-full);
    --grid-17: var(--grid-full);
    --grid-18: var(--grid-full);
    --grid-19: var(--grid-full);
    --grid-20: var(--grid-full);
    --grid-21: var(--grid-full);
    --grid-22: var(--grid-full);
    --grid-23: var(--grid-full);
    --grid-24: var(--grid-full);
  }
}

.o-dialog-exlarge {
  --dlg-width: var(--grid-16);
}

.o-dialog-large {
  --dlg-width: var(--grid-14);
}

.o-dialog-medium {
  --dlg-width: var(--grid-10);
}

.o-dialog-small {
  --dlg-width: var(--grid-6);
}

@media (min-width: 1201px) and (max-width: 1680px) {
  .o-dialog-exlarge {
    --dlg-width: var(--grid-18);
  }
  .o-dialog-large {
    --dlg-width: var(--grid-14);
  }
  .o-dialog-medium {
    --dlg-width: var(--grid-10);
  }
  .o-dialog-small {
    --dlg-width: var(--grid-6);
  }
}
@media (min-width: 841px) and (max-width: 1200px) {
  .o-dialog-exlarge {
    --dlg-width: var(--grid-10);
  }
  .o-dialog-large {
    --dlg-width: var(--grid-8);
  }
  .o-dialog-medium {
    --dlg-width: var(--grid-6);
  }
  .o-dialog-small {
    --dlg-width: var(--grid-4);
  }
}
@media (min-width: 601px) and (max-width: 840px) {
  .o-dialog-exlarge {
    --dlg-width: 100%;
  }
  .o-dialog-large {
    --dlg-width: 100%;
  }
  .o-dialog-medium {
    --dlg-width: var(--grid-6);
  }
  .o-dialog-small {
    --dlg-width: var(--grid-6);
  }
}
@media (max-width: 600px) {
  .o-dialog-exlarge {
    --dlg-width: 100%;
  }
  .o-dialog-large {
    --dlg-width: 100%;
  }
  .o-dialog-medium {
    --dlg-width: var(--grid-4);
    --dlg-margin: 0;
  }
  .o-dialog-small {
    --dlg-width: var(--grid-4);
    --dlg-margin: 0;
  }
  .o-dialog-phone-half-full {
    --dlg-width: 100%;
    --dlg-margin: 0;
  }
}
@media (max-width: 1680px) {
  .o-dlg-body {
    font-size: var(--o-font_size-tip1);
    line-height: var(--o-line_height-tip1);
  }
}
.c-dlg-action-end {
  display: flex;
  justify-content: flex-end;
}
.c-dlg-action-end > * + * {
  margin-left: var(--dlg-btn-gap);
}

.c-dlg-action-center {
  display: flex;
  justify-content: center;
}
.c-dlg-action-center > * + * {
  margin-left: var(--dlg-btn-gap);
}

.c-dlg-operation {
  --layer-align: center !important;
  --dlg-body-padding: 0 !important;
  --dlg-margin: 40px;
  --dlg-min-height: 320px;
  --dlg-max-height: 468px;
}
.c-dlg-operation .o-dlg-btn-close {
  right: 50%;
  transform: translateX(50%);
  top: calc(100% + 16px);
  border: 1px solid var(--o-color-info1-inverse);
  border-radius: 50%;
  font-size: var(--o-icon_size_control-xs);
  color: var(--o-color-info1-inverse);
  padding: 4px;
  display: flex;
}