@charset "UTF-8";
/**
 * Clash Dashboard
 * Style Common Variables
 */
/**
 * Clash Dashboard Iconfont
 * generated by iconfont.cn
 */
/**
 * Clash Dashboard
 * Style Common Variables
 */
@font-face {
  font-family: "clash-iconfont";
  src: url("//at.alicdn.com/t/font_841708_z4foe3sarr8.ttf?t=1567008313882") format("truetype");
}
.clash-iconfont {
  font-family: "clash-iconfont" !important;
  font-size: 14px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c8af8;
}

.icon-speed::before {
  content: "";
}

.icon-close::before {
  content: "";
}

.icon-drag::before {
  content: "";
}

.icon-down-arrow-o::before {
  content: "";
}

.icon-check::before {
  content: "";
}

.icon-plus::before {
  content: "";
}

.icon-triangle-up::before {
  content: "";
}

.icon-triangle-down::before {
  content: "";
}

.icon-up-arrow-o::before {
  content: "";
}

.icon-info::before {
  content: "";
}

.icon-info-o::before {
  content: "";
}

.icon-setting::before {
  content: "";
}

.icon-show::before {
  content: "";
}

.icon-hide::before {
  content: "";
}

.icon-sort::before {
  content: "";
}

.icon-sort-descending::before {
  content: "";
}

.icon-sort-ascending::before {
  content: "";
}

html {
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.8);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
body ::-webkit-scrollbar {
  z-index: 11;
  width: 5px;
  background: transparent;
}
body ::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #2c8af8;
}

.app {
  min-height: 100vh;
  padding-left: 150px;
}

.app.not-clashx {
  background: #f4f5f6;
}

.page-container {
  width: 100%;
  height: 100vh;
  padding-left: 10px;
  overflow-y: scroll;
}

.page {
  padding: 20px 35px 30px 0;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.container {
  margin: 20px 0;
}

@media (max-width: 768px) {
  .app {
    padding-left: 0;
    padding-top: 60px;
  }

  .page-container {
    width: 100%;
    padding: 0 10px;
    height: calc(100vh - 60px);
    -webkit-overflow-scrolling: touch;
  }
  .page-container::-webkit-scrollbar {
    display: none;
  }

  .page {
    padding: 0 0 20px;
    height: 100%;
  }
}
/**
 * Clash Dashboard
 * Style Common Variables
 */
.header {
  margin: 10px 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.header > h1 {
  flex-shrink: 0;
  font-size: 24px;
  color: #2c8af8;
  font-weight: 500;
  text-shadow: 0 2px 6px rgba(44, 138, 248, 0.4);
  line-height: 32px;
}

.operations {
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .header > h1 {
    font-size: 20px;
  }
}
/**
 * Clash Dashboard
 * Style Common Variables
 */
.switch {
  display: inline-block;
  width: 32px;
  height: 16px;
  border-radius: 8px;
  background-color: #d8dee2;
  transition: background-color 0.3s ease;
  position: relative;
  cursor: pointer;
}
.switch.checked {
  background-color: #57befc;
}
.switch.checked::after {
  transform: translateX(16px);
}
.switch.disabled {
  cursor: not-allowed;
  background-color: #b7c5d6;
}
.switch.disabled::after {
  background-color: #f6f6f6;
  box-shadow: 0 0 8px rgba(144, 147, 153, 0.5);
}
.switch.checked.disabled {
  background-color: #e4eaef;
}
.switch::after {
  content: "";
  position: absolute;
  top: -1px;
  height: 18px;
  width: 18px;
  border-radius: 9px;
  background-color: #fff;
  box-shadow: 0 0 8px rgba(44, 138, 248, 0.4);
  transition: transform 0.3s ease;
  transform: translateX(-2px);
}

.switch-icon {
  position: absolute;
  transform: translateX(-1px) scale(0.4);
  color: #fff;
  line-height: 16px;
}
/**
 * Clash Dashboard
 * Style Common Variables
 */
.card {
  padding: 15px;
  box-shadow: 2px 5px 20px -3px rgba(44, 138, 248, 0.18);
  background-color: #fff;
  border-radius: 4px;
}
/**
 * Clash Dashboard
 * Style Common Variables
 */
.row {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.row-gutter-1 {
  padding: 12px 6px;
}
.row-gutter-1 .column {
  padding: 0 6px;
  display: flex;
  flex-shrink: 0;
}
.row-gutter-1 .column-span-1 {
  width: 100%;
}
.row-gutter-1 .column-offset-1 {
  margin-left: 100%;
}
.row-gutter-1 .column-span-2 {
  width: 200%;
}
.row-gutter-1 .column-offset-2 {
  margin-left: 200%;
}
.row-gutter-1 .column-span-3 {
  width: 300%;
}
.row-gutter-1 .column-offset-3 {
  margin-left: 300%;
}
.row-gutter-1 .column-span-4 {
  width: 400%;
}
.row-gutter-1 .column-offset-4 {
  margin-left: 400%;
}
.row-gutter-1 .column-span-5 {
  width: 500%;
}
.row-gutter-1 .column-offset-5 {
  margin-left: 500%;
}
.row-gutter-1 .column-span-6 {
  width: 600%;
}
.row-gutter-1 .column-offset-6 {
  margin-left: 600%;
}
.row-gutter-1 .column-span-7 {
  width: 700%;
}
.row-gutter-1 .column-offset-7 {
  margin-left: 700%;
}
.row-gutter-1 .column-span-8 {
  width: 800%;
}
.row-gutter-1 .column-offset-8 {
  margin-left: 800%;
}
.row-gutter-1 .column-span-9 {
  width: 900%;
}
.row-gutter-1 .column-offset-9 {
  margin-left: 900%;
}
.row-gutter-1 .column-span-10 {
  width: 1000%;
}
.row-gutter-1 .column-offset-10 {
  margin-left: 1000%;
}
.row-gutter-1 .column-span-11 {
  width: 1100%;
}
.row-gutter-1 .column-offset-11 {
  margin-left: 1100%;
}
.row-gutter-1 .column-span-12 {
  width: 1200%;
}
.row-gutter-1 .column-offset-12 {
  margin-left: 1200%;
}
.row-gutter-1 .column-span-13 {
  width: 1300%;
}
.row-gutter-1 .column-offset-13 {
  margin-left: 1300%;
}
.row-gutter-1 .column-span-14 {
  width: 1400%;
}
.row-gutter-1 .column-offset-14 {
  margin-left: 1400%;
}
.row-gutter-1 .column-span-15 {
  width: 1500%;
}
.row-gutter-1 .column-offset-15 {
  margin-left: 1500%;
}
.row-gutter-1 .column-span-16 {
  width: 1600%;
}
.row-gutter-1 .column-offset-16 {
  margin-left: 1600%;
}
.row-gutter-1 .column-span-17 {
  width: 1700%;
}
.row-gutter-1 .column-offset-17 {
  margin-left: 1700%;
}
.row-gutter-1 .column-span-18 {
  width: 1800%;
}
.row-gutter-1 .column-offset-18 {
  margin-left: 1800%;
}
.row-gutter-1 .column-span-19 {
  width: 1900%;
}
.row-gutter-1 .column-offset-19 {
  margin-left: 1900%;
}
.row-gutter-1 .column-span-20 {
  width: 2000%;
}
.row-gutter-1 .column-offset-20 {
  margin-left: 2000%;
}
.row-gutter-1 .column-span-21 {
  width: 2100%;
}
.row-gutter-1 .column-offset-21 {
  margin-left: 2100%;
}
.row-gutter-1 .column-span-22 {
  width: 2200%;
}
.row-gutter-1 .column-offset-22 {
  margin-left: 2200%;
}
.row-gutter-1 .column-span-23 {
  width: 2300%;
}
.row-gutter-1 .column-offset-23 {
  margin-left: 2300%;
}
.row-gutter-1 .column-span-24 {
  width: 2400%;
}
.row-gutter-1 .column-offset-24 {
  margin-left: 2400%;
}

.row-gutter-2 {
  padding: 12px 6px;
}
.row-gutter-2 .column {
  padding: 0 6px;
  display: flex;
  flex-shrink: 0;
}
.row-gutter-2 .column-span-1 {
  width: 50%;
}
.row-gutter-2 .column-offset-1 {
  margin-left: 50%;
}
.row-gutter-2 .column-span-2 {
  width: 100%;
}
.row-gutter-2 .column-offset-2 {
  margin-left: 100%;
}
.row-gutter-2 .column-span-3 {
  width: 150%;
}
.row-gutter-2 .column-offset-3 {
  margin-left: 150%;
}
.row-gutter-2 .column-span-4 {
  width: 200%;
}
.row-gutter-2 .column-offset-4 {
  margin-left: 200%;
}
.row-gutter-2 .column-span-5 {
  width: 250%;
}
.row-gutter-2 .column-offset-5 {
  margin-left: 250%;
}
.row-gutter-2 .column-span-6 {
  width: 300%;
}
.row-gutter-2 .column-offset-6 {
  margin-left: 300%;
}
.row-gutter-2 .column-span-7 {
  width: 350%;
}
.row-gutter-2 .column-offset-7 {
  margin-left: 350%;
}
.row-gutter-2 .column-span-8 {
  width: 400%;
}
.row-gutter-2 .column-offset-8 {
  margin-left: 400%;
}
.row-gutter-2 .column-span-9 {
  width: 450%;
}
.row-gutter-2 .column-offset-9 {
  margin-left: 450%;
}
.row-gutter-2 .column-span-10 {
  width: 500%;
}
.row-gutter-2 .column-offset-10 {
  margin-left: 500%;
}
.row-gutter-2 .column-span-11 {
  width: 550%;
}
.row-gutter-2 .column-offset-11 {
  margin-left: 550%;
}
.row-gutter-2 .column-span-12 {
  width: 600%;
}
.row-gutter-2 .column-offset-12 {
  margin-left: 600%;
}
.row-gutter-2 .column-span-13 {
  width: 650%;
}
.row-gutter-2 .column-offset-13 {
  margin-left: 650%;
}
.row-gutter-2 .column-span-14 {
  width: 700%;
}
.row-gutter-2 .column-offset-14 {
  margin-left: 700%;
}
.row-gutter-2 .column-span-15 {
  width: 750%;
}
.row-gutter-2 .column-offset-15 {
  margin-left: 750%;
}
.row-gutter-2 .column-span-16 {
  width: 800%;
}
.row-gutter-2 .column-offset-16 {
  margin-left: 800%;
}
.row-gutter-2 .column-span-17 {
  width: 850%;
}
.row-gutter-2 .column-offset-17 {
  margin-left: 850%;
}
.row-gutter-2 .column-span-18 {
  width: 900%;
}
.row-gutter-2 .column-offset-18 {
  margin-left: 900%;
}
.row-gutter-2 .column-span-19 {
  width: 950%;
}
.row-gutter-2 .column-offset-19 {
  margin-left: 950%;
}
.row-gutter-2 .column-span-20 {
  width: 1000%;
}
.row-gutter-2 .column-offset-20 {
  margin-left: 1000%;
}
.row-gutter-2 .column-span-21 {
  width: 1050%;
}
.row-gutter-2 .column-offset-21 {
  margin-left: 1050%;
}
.row-gutter-2 .column-span-22 {
  width: 1100%;
}
.row-gutter-2 .column-offset-22 {
  margin-left: 1100%;
}
.row-gutter-2 .column-span-23 {
  width: 1150%;
}
.row-gutter-2 .column-offset-23 {
  margin-left: 1150%;
}
.row-gutter-2 .column-span-24 {
  width: 1200%;
}
.row-gutter-2 .column-offset-24 {
  margin-left: 1200%;
}

.row-gutter-3 {
  padding: 12px 6px;
}
.row-gutter-3 .column {
  padding: 0 6px;
  display: flex;
  flex-shrink: 0;
}
.row-gutter-3 .column-span-1 {
  width: 33.3333333333%;
}
.row-gutter-3 .column-offset-1 {
  margin-left: 33.3333333333%;
}
.row-gutter-3 .column-span-2 {
  width: 66.6666666667%;
}
.row-gutter-3 .column-offset-2 {
  margin-left: 66.6666666667%;
}
.row-gutter-3 .column-span-3 {
  width: 100%;
}
.row-gutter-3 .column-offset-3 {
  margin-left: 100%;
}
.row-gutter-3 .column-span-4 {
  width: 133.3333333333%;
}
.row-gutter-3 .column-offset-4 {
  margin-left: 133.3333333333%;
}
.row-gutter-3 .column-span-5 {
  width: 166.6666666667%;
}
.row-gutter-3 .column-offset-5 {
  margin-left: 166.6666666667%;
}
.row-gutter-3 .column-span-6 {
  width: 200%;
}
.row-gutter-3 .column-offset-6 {
  margin-left: 200%;
}
.row-gutter-3 .column-span-7 {
  width: 233.3333333333%;
}
.row-gutter-3 .column-offset-7 {
  margin-left: 233.3333333333%;
}
.row-gutter-3 .column-span-8 {
  width: 266.6666666667%;
}
.row-gutter-3 .column-offset-8 {
  margin-left: 266.6666666667%;
}
.row-gutter-3 .column-span-9 {
  width: 300%;
}
.row-gutter-3 .column-offset-9 {
  margin-left: 300%;
}
.row-gutter-3 .column-span-10 {
  width: 333.3333333333%;
}
.row-gutter-3 .column-offset-10 {
  margin-left: 333.3333333333%;
}
.row-gutter-3 .column-span-11 {
  width: 366.6666666667%;
}
.row-gutter-3 .column-offset-11 {
  margin-left: 366.6666666667%;
}
.row-gutter-3 .column-span-12 {
  width: 400%;
}
.row-gutter-3 .column-offset-12 {
  margin-left: 400%;
}
.row-gutter-3 .column-span-13 {
  width: 433.3333333333%;
}
.row-gutter-3 .column-offset-13 {
  margin-left: 433.3333333333%;
}
.row-gutter-3 .column-span-14 {
  width: 466.6666666667%;
}
.row-gutter-3 .column-offset-14 {
  margin-left: 466.6666666667%;
}
.row-gutter-3 .column-span-15 {
  width: 500%;
}
.row-gutter-3 .column-offset-15 {
  margin-left: 500%;
}
.row-gutter-3 .column-span-16 {
  width: 533.3333333333%;
}
.row-gutter-3 .column-offset-16 {
  margin-left: 533.3333333333%;
}
.row-gutter-3 .column-span-17 {
  width: 566.6666666667%;
}
.row-gutter-3 .column-offset-17 {
  margin-left: 566.6666666667%;
}
.row-gutter-3 .column-span-18 {
  width: 600%;
}
.row-gutter-3 .column-offset-18 {
  margin-left: 600%;
}
.row-gutter-3 .column-span-19 {
  width: 633.3333333333%;
}
.row-gutter-3 .column-offset-19 {
  margin-left: 633.3333333333%;
}
.row-gutter-3 .column-span-20 {
  width: 666.6666666667%;
}
.row-gutter-3 .column-offset-20 {
  margin-left: 666.6666666667%;
}
.row-gutter-3 .column-span-21 {
  width: 700%;
}
.row-gutter-3 .column-offset-21 {
  margin-left: 700%;
}
.row-gutter-3 .column-span-22 {
  width: 733.3333333333%;
}
.row-gutter-3 .column-offset-22 {
  margin-left: 733.3333333333%;
}
.row-gutter-3 .column-span-23 {
  width: 766.6666666667%;
}
.row-gutter-3 .column-offset-23 {
  margin-left: 766.6666666667%;
}
.row-gutter-3 .column-span-24 {
  width: 800%;
}
.row-gutter-3 .column-offset-24 {
  margin-left: 800%;
}

.row-gutter-4 {
  padding: 12px 6px;
}
.row-gutter-4 .column {
  padding: 0 6px;
  display: flex;
  flex-shrink: 0;
}
.row-gutter-4 .column-span-1 {
  width: 25%;
}
.row-gutter-4 .column-offset-1 {
  margin-left: 25%;
}
.row-gutter-4 .column-span-2 {
  width: 50%;
}
.row-gutter-4 .column-offset-2 {
  margin-left: 50%;
}
.row-gutter-4 .column-span-3 {
  width: 75%;
}
.row-gutter-4 .column-offset-3 {
  margin-left: 75%;
}
.row-gutter-4 .column-span-4 {
  width: 100%;
}
.row-gutter-4 .column-offset-4 {
  margin-left: 100%;
}
.row-gutter-4 .column-span-5 {
  width: 125%;
}
.row-gutter-4 .column-offset-5 {
  margin-left: 125%;
}
.row-gutter-4 .column-span-6 {
  width: 150%;
}
.row-gutter-4 .column-offset-6 {
  margin-left: 150%;
}
.row-gutter-4 .column-span-7 {
  width: 175%;
}
.row-gutter-4 .column-offset-7 {
  margin-left: 175%;
}
.row-gutter-4 .column-span-8 {
  width: 200%;
}
.row-gutter-4 .column-offset-8 {
  margin-left: 200%;
}
.row-gutter-4 .column-span-9 {
  width: 225%;
}
.row-gutter-4 .column-offset-9 {
  margin-left: 225%;
}
.row-gutter-4 .column-span-10 {
  width: 250%;
}
.row-gutter-4 .column-offset-10 {
  margin-left: 250%;
}
.row-gutter-4 .column-span-11 {
  width: 275%;
}
.row-gutter-4 .column-offset-11 {
  margin-left: 275%;
}
.row-gutter-4 .column-span-12 {
  width: 300%;
}
.row-gutter-4 .column-offset-12 {
  margin-left: 300%;
}
.row-gutter-4 .column-span-13 {
  width: 325%;
}
.row-gutter-4 .column-offset-13 {
  margin-left: 325%;
}
.row-gutter-4 .column-span-14 {
  width: 350%;
}
.row-gutter-4 .column-offset-14 {
  margin-left: 350%;
}
.row-gutter-4 .column-span-15 {
  width: 375%;
}
.row-gutter-4 .column-offset-15 {
  margin-left: 375%;
}
.row-gutter-4 .column-span-16 {
  width: 400%;
}
.row-gutter-4 .column-offset-16 {
  margin-left: 400%;
}
.row-gutter-4 .column-span-17 {
  width: 425%;
}
.row-gutter-4 .column-offset-17 {
  margin-left: 425%;
}
.row-gutter-4 .column-span-18 {
  width: 450%;
}
.row-gutter-4 .column-offset-18 {
  margin-left: 450%;
}
.row-gutter-4 .column-span-19 {
  width: 475%;
}
.row-gutter-4 .column-offset-19 {
  margin-left: 475%;
}
.row-gutter-4 .column-span-20 {
  width: 500%;
}
.row-gutter-4 .column-offset-20 {
  margin-left: 500%;
}
.row-gutter-4 .column-span-21 {
  width: 525%;
}
.row-gutter-4 .column-offset-21 {
  margin-left: 525%;
}
.row-gutter-4 .column-span-22 {
  width: 550%;
}
.row-gutter-4 .column-offset-22 {
  margin-left: 550%;
}
.row-gutter-4 .column-span-23 {
  width: 575%;
}
.row-gutter-4 .column-offset-23 {
  margin-left: 575%;
}
.row-gutter-4 .column-span-24 {
  width: 600%;
}
.row-gutter-4 .column-offset-24 {
  margin-left: 600%;
}

.row-gutter-5 {
  padding: 12px 6px;
}
.row-gutter-5 .column {
  padding: 0 6px;
  display: flex;
  flex-shrink: 0;
}
.row-gutter-5 .column-span-1 {
  width: 20%;
}
.row-gutter-5 .column-offset-1 {
  margin-left: 20%;
}
.row-gutter-5 .column-span-2 {
  width: 40%;
}
.row-gutter-5 .column-offset-2 {
  margin-left: 40%;
}
.row-gutter-5 .column-span-3 {
  width: 60%;
}
.row-gutter-5 .column-offset-3 {
  margin-left: 60%;
}
.row-gutter-5 .column-span-4 {
  width: 80%;
}
.row-gutter-5 .column-offset-4 {
  margin-left: 80%;
}
.row-gutter-5 .column-span-5 {
  width: 100%;
}
.row-gutter-5 .column-offset-5 {
  margin-left: 100%;
}
.row-gutter-5 .column-span-6 {
  width: 120%;
}
.row-gutter-5 .column-offset-6 {
  margin-left: 120%;
}
.row-gutter-5 .column-span-7 {
  width: 140%;
}
.row-gutter-5 .column-offset-7 {
  margin-left: 140%;
}
.row-gutter-5 .column-span-8 {
  width: 160%;
}
.row-gutter-5 .column-offset-8 {
  margin-left: 160%;
}
.row-gutter-5 .column-span-9 {
  width: 180%;
}
.row-gutter-5 .column-offset-9 {
  margin-left: 180%;
}
.row-gutter-5 .column-span-10 {
  width: 200%;
}
.row-gutter-5 .column-offset-10 {
  margin-left: 200%;
}
.row-gutter-5 .column-span-11 {
  width: 220%;
}
.row-gutter-5 .column-offset-11 {
  margin-left: 220%;
}
.row-gutter-5 .column-span-12 {
  width: 240%;
}
.row-gutter-5 .column-offset-12 {
  margin-left: 240%;
}
.row-gutter-5 .column-span-13 {
  width: 260%;
}
.row-gutter-5 .column-offset-13 {
  margin-left: 260%;
}
.row-gutter-5 .column-span-14 {
  width: 280%;
}
.row-gutter-5 .column-offset-14 {
  margin-left: 280%;
}
.row-gutter-5 .column-span-15 {
  width: 300%;
}
.row-gutter-5 .column-offset-15 {
  margin-left: 300%;
}
.row-gutter-5 .column-span-16 {
  width: 320%;
}
.row-gutter-5 .column-offset-16 {
  margin-left: 320%;
}
.row-gutter-5 .column-span-17 {
  width: 340%;
}
.row-gutter-5 .column-offset-17 {
  margin-left: 340%;
}
.row-gutter-5 .column-span-18 {
  width: 360%;
}
.row-gutter-5 .column-offset-18 {
  margin-left: 360%;
}
.row-gutter-5 .column-span-19 {
  width: 380%;
}
.row-gutter-5 .column-offset-19 {
  margin-left: 380%;
}
.row-gutter-5 .column-span-20 {
  width: 400%;
}
.row-gutter-5 .column-offset-20 {
  margin-left: 400%;
}
.row-gutter-5 .column-span-21 {
  width: 420%;
}
.row-gutter-5 .column-offset-21 {
  margin-left: 420%;
}
.row-gutter-5 .column-span-22 {
  width: 440%;
}
.row-gutter-5 .column-offset-22 {
  margin-left: 440%;
}
.row-gutter-5 .column-span-23 {
  width: 460%;
}
.row-gutter-5 .column-offset-23 {
  margin-left: 460%;
}
.row-gutter-5 .column-span-24 {
  width: 480%;
}
.row-gutter-5 .column-offset-24 {
  margin-left: 480%;
}

.row-gutter-6 {
  padding: 12px 6px;
}
.row-gutter-6 .column {
  padding: 0 6px;
  display: flex;
  flex-shrink: 0;
}
.row-gutter-6 .column-span-1 {
  width: 16.6666666667%;
}
.row-gutter-6 .column-offset-1 {
  margin-left: 16.6666666667%;
}
.row-gutter-6 .column-span-2 {
  width: 33.3333333333%;
}
.row-gutter-6 .column-offset-2 {
  margin-left: 33.3333333333%;
}
.row-gutter-6 .column-span-3 {
  width: 50%;
}
.row-gutter-6 .column-offset-3 {
  margin-left: 50%;
}
.row-gutter-6 .column-span-4 {
  width: 66.6666666667%;
}
.row-gutter-6 .column-offset-4 {
  margin-left: 66.6666666667%;
}
.row-gutter-6 .column-span-5 {
  width: 83.3333333333%;
}
.row-gutter-6 .column-offset-5 {
  margin-left: 83.3333333333%;
}
.row-gutter-6 .column-span-6 {
  width: 100%;
}
.row-gutter-6 .column-offset-6 {
  margin-left: 100%;
}
.row-gutter-6 .column-span-7 {
  width: 116.6666666667%;
}
.row-gutter-6 .column-offset-7 {
  margin-left: 116.6666666667%;
}
.row-gutter-6 .column-span-8 {
  width: 133.3333333333%;
}
.row-gutter-6 .column-offset-8 {
  margin-left: 133.3333333333%;
}
.row-gutter-6 .column-span-9 {
  width: 150%;
}
.row-gutter-6 .column-offset-9 {
  margin-left: 150%;
}
.row-gutter-6 .column-span-10 {
  width: 166.6666666667%;
}
.row-gutter-6 .column-offset-10 {
  margin-left: 166.6666666667%;
}
.row-gutter-6 .column-span-11 {
  width: 183.3333333333%;
}
.row-gutter-6 .column-offset-11 {
  margin-left: 183.3333333333%;
}
.row-gutter-6 .column-span-12 {
  width: 200%;
}
.row-gutter-6 .column-offset-12 {
  margin-left: 200%;
}
.row-gutter-6 .column-span-13 {
  width: 216.6666666667%;
}
.row-gutter-6 .column-offset-13 {
  margin-left: 216.6666666667%;
}
.row-gutter-6 .column-span-14 {
  width: 233.3333333333%;
}
.row-gutter-6 .column-offset-14 {
  margin-left: 233.3333333333%;
}
.row-gutter-6 .column-span-15 {
  width: 250%;
}
.row-gutter-6 .column-offset-15 {
  margin-left: 250%;
}
.row-gutter-6 .column-span-16 {
  width: 266.6666666667%;
}
.row-gutter-6 .column-offset-16 {
  margin-left: 266.6666666667%;
}
.row-gutter-6 .column-span-17 {
  width: 283.3333333333%;
}
.row-gutter-6 .column-offset-17 {
  margin-left: 283.3333333333%;
}
.row-gutter-6 .column-span-18 {
  width: 300%;
}
.row-gutter-6 .column-offset-18 {
  margin-left: 300%;
}
.row-gutter-6 .column-span-19 {
  width: 316.6666666667%;
}
.row-gutter-6 .column-offset-19 {
  margin-left: 316.6666666667%;
}
.row-gutter-6 .column-span-20 {
  width: 333.3333333333%;
}
.row-gutter-6 .column-offset-20 {
  margin-left: 333.3333333333%;
}
.row-gutter-6 .column-span-21 {
  width: 350%;
}
.row-gutter-6 .column-offset-21 {
  margin-left: 350%;
}
.row-gutter-6 .column-span-22 {
  width: 366.6666666667%;
}
.row-gutter-6 .column-offset-22 {
  margin-left: 366.6666666667%;
}
.row-gutter-6 .column-span-23 {
  width: 383.3333333333%;
}
.row-gutter-6 .column-offset-23 {
  margin-left: 383.3333333333%;
}
.row-gutter-6 .column-span-24 {
  width: 400%;
}
.row-gutter-6 .column-offset-24 {
  margin-left: 400%;
}

.row-gutter-7 {
  padding: 12px 6px;
}
.row-gutter-7 .column {
  padding: 0 6px;
  display: flex;
  flex-shrink: 0;
}
.row-gutter-7 .column-span-1 {
  width: 14.2857142857%;
}
.row-gutter-7 .column-offset-1 {
  margin-left: 14.2857142857%;
}
.row-gutter-7 .column-span-2 {
  width: 28.5714285714%;
}
.row-gutter-7 .column-offset-2 {
  margin-left: 28.5714285714%;
}
.row-gutter-7 .column-span-3 {
  width: 42.8571428571%;
}
.row-gutter-7 .column-offset-3 {
  margin-left: 42.8571428571%;
}
.row-gutter-7 .column-span-4 {
  width: 57.1428571429%;
}
.row-gutter-7 .column-offset-4 {
  margin-left: 57.1428571429%;
}
.row-gutter-7 .column-span-5 {
  width: 71.4285714286%;
}
.row-gutter-7 .column-offset-5 {
  margin-left: 71.4285714286%;
}
.row-gutter-7 .column-span-6 {
  width: 85.7142857143%;
}
.row-gutter-7 .column-offset-6 {
  margin-left: 85.7142857143%;
}
.row-gutter-7 .column-span-7 {
  width: 100%;
}
.row-gutter-7 .column-offset-7 {
  margin-left: 100%;
}
.row-gutter-7 .column-span-8 {
  width: 114.2857142857%;
}
.row-gutter-7 .column-offset-8 {
  margin-left: 114.2857142857%;
}
.row-gutter-7 .column-span-9 {
  width: 128.5714285714%;
}
.row-gutter-7 .column-offset-9 {
  margin-left: 128.5714285714%;
}
.row-gutter-7 .column-span-10 {
  width: 142.8571428571%;
}
.row-gutter-7 .column-offset-10 {
  margin-left: 142.8571428571%;
}
.row-gutter-7 .column-span-11 {
  width: 157.1428571429%;
}
.row-gutter-7 .column-offset-11 {
  margin-left: 157.1428571429%;
}
.row-gutter-7 .column-span-12 {
  width: 171.4285714286%;
}
.row-gutter-7 .column-offset-12 {
  margin-left: 171.4285714286%;
}
.row-gutter-7 .column-span-13 {
  width: 185.7142857143%;
}
.row-gutter-7 .column-offset-13 {
  margin-left: 185.7142857143%;
}
.row-gutter-7 .column-span-14 {
  width: 200%;
}
.row-gutter-7 .column-offset-14 {
  margin-left: 200%;
}
.row-gutter-7 .column-span-15 {
  width: 214.2857142857%;
}
.row-gutter-7 .column-offset-15 {
  margin-left: 214.2857142857%;
}
.row-gutter-7 .column-span-16 {
  width: 228.5714285714%;
}
.row-gutter-7 .column-offset-16 {
  margin-left: 228.5714285714%;
}
.row-gutter-7 .column-span-17 {
  width: 242.8571428571%;
}
.row-gutter-7 .column-offset-17 {
  margin-left: 242.8571428571%;
}
.row-gutter-7 .column-span-18 {
  width: 257.1428571429%;
}
.row-gutter-7 .column-offset-18 {
  margin-left: 257.1428571429%;
}
.row-gutter-7 .column-span-19 {
  width: 271.4285714286%;
}
.row-gutter-7 .column-offset-19 {
  margin-left: 271.4285714286%;
}
.row-gutter-7 .column-span-20 {
  width: 285.7142857143%;
}
.row-gutter-7 .column-offset-20 {
  margin-left: 285.7142857143%;
}
.row-gutter-7 .column-span-21 {
  width: 300%;
}
.row-gutter-7 .column-offset-21 {
  margin-left: 300%;
}
.row-gutter-7 .column-span-22 {
  width: 314.2857142857%;
}
.row-gutter-7 .column-offset-22 {
  margin-left: 314.2857142857%;
}
.row-gutter-7 .column-span-23 {
  width: 328.5714285714%;
}
.row-gutter-7 .column-offset-23 {
  margin-left: 328.5714285714%;
}
.row-gutter-7 .column-span-24 {
  width: 342.8571428571%;
}
.row-gutter-7 .column-offset-24 {
  margin-left: 342.8571428571%;
}

.row-gutter-8 {
  padding: 12px 6px;
}
.row-gutter-8 .column {
  padding: 0 6px;
  display: flex;
  flex-shrink: 0;
}
.row-gutter-8 .column-span-1 {
  width: 12.5%;
}
.row-gutter-8 .column-offset-1 {
  margin-left: 12.5%;
}
.row-gutter-8 .column-span-2 {
  width: 25%;
}
.row-gutter-8 .column-offset-2 {
  margin-left: 25%;
}
.row-gutter-8 .column-span-3 {
  width: 37.5%;
}
.row-gutter-8 .column-offset-3 {
  margin-left: 37.5%;
}
.row-gutter-8 .column-span-4 {
  width: 50%;
}
.row-gutter-8 .column-offset-4 {
  margin-left: 50%;
}
.row-gutter-8 .column-span-5 {
  width: 62.5%;
}
.row-gutter-8 .column-offset-5 {
  margin-left: 62.5%;
}
.row-gutter-8 .column-span-6 {
  width: 75%;
}
.row-gutter-8 .column-offset-6 {
  margin-left: 75%;
}
.row-gutter-8 .column-span-7 {
  width: 87.5%;
}
.row-gutter-8 .column-offset-7 {
  margin-left: 87.5%;
}
.row-gutter-8 .column-span-8 {
  width: 100%;
}
.row-gutter-8 .column-offset-8 {
  margin-left: 100%;
}
.row-gutter-8 .column-span-9 {
  width: 112.5%;
}
.row-gutter-8 .column-offset-9 {
  margin-left: 112.5%;
}
.row-gutter-8 .column-span-10 {
  width: 125%;
}
.row-gutter-8 .column-offset-10 {
  margin-left: 125%;
}
.row-gutter-8 .column-span-11 {
  width: 137.5%;
}
.row-gutter-8 .column-offset-11 {
  margin-left: 137.5%;
}
.row-gutter-8 .column-span-12 {
  width: 150%;
}
.row-gutter-8 .column-offset-12 {
  margin-left: 150%;
}
.row-gutter-8 .column-span-13 {
  width: 162.5%;
}
.row-gutter-8 .column-offset-13 {
  margin-left: 162.5%;
}
.row-gutter-8 .column-span-14 {
  width: 175%;
}
.row-gutter-8 .column-offset-14 {
  margin-left: 175%;
}
.row-gutter-8 .column-span-15 {
  width: 187.5%;
}
.row-gutter-8 .column-offset-15 {
  margin-left: 187.5%;
}
.row-gutter-8 .column-span-16 {
  width: 200%;
}
.row-gutter-8 .column-offset-16 {
  margin-left: 200%;
}
.row-gutter-8 .column-span-17 {
  width: 212.5%;
}
.row-gutter-8 .column-offset-17 {
  margin-left: 212.5%;
}
.row-gutter-8 .column-span-18 {
  width: 225%;
}
.row-gutter-8 .column-offset-18 {
  margin-left: 225%;
}
.row-gutter-8 .column-span-19 {
  width: 237.5%;
}
.row-gutter-8 .column-offset-19 {
  margin-left: 237.5%;
}
.row-gutter-8 .column-span-20 {
  width: 250%;
}
.row-gutter-8 .column-offset-20 {
  margin-left: 250%;
}
.row-gutter-8 .column-span-21 {
  width: 262.5%;
}
.row-gutter-8 .column-offset-21 {
  margin-left: 262.5%;
}
.row-gutter-8 .column-span-22 {
  width: 275%;
}
.row-gutter-8 .column-offset-22 {
  margin-left: 275%;
}
.row-gutter-8 .column-span-23 {
  width: 287.5%;
}
.row-gutter-8 .column-offset-23 {
  margin-left: 287.5%;
}
.row-gutter-8 .column-span-24 {
  width: 300%;
}
.row-gutter-8 .column-offset-24 {
  margin-left: 300%;
}

.row-gutter-9 {
  padding: 12px 6px;
}
.row-gutter-9 .column {
  padding: 0 6px;
  display: flex;
  flex-shrink: 0;
}
.row-gutter-9 .column-span-1 {
  width: 11.1111111111%;
}
.row-gutter-9 .column-offset-1 {
  margin-left: 11.1111111111%;
}
.row-gutter-9 .column-span-2 {
  width: 22.2222222222%;
}
.row-gutter-9 .column-offset-2 {
  margin-left: 22.2222222222%;
}
.row-gutter-9 .column-span-3 {
  width: 33.3333333333%;
}
.row-gutter-9 .column-offset-3 {
  margin-left: 33.3333333333%;
}
.row-gutter-9 .column-span-4 {
  width: 44.4444444444%;
}
.row-gutter-9 .column-offset-4 {
  margin-left: 44.4444444444%;
}
.row-gutter-9 .column-span-5 {
  width: 55.5555555556%;
}
.row-gutter-9 .column-offset-5 {
  margin-left: 55.5555555556%;
}
.row-gutter-9 .column-span-6 {
  width: 66.6666666667%;
}
.row-gutter-9 .column-offset-6 {
  margin-left: 66.6666666667%;
}
.row-gutter-9 .column-span-7 {
  width: 77.7777777778%;
}
.row-gutter-9 .column-offset-7 {
  margin-left: 77.7777777778%;
}
.row-gutter-9 .column-span-8 {
  width: 88.8888888889%;
}
.row-gutter-9 .column-offset-8 {
  margin-left: 88.8888888889%;
}
.row-gutter-9 .column-span-9 {
  width: 100%;
}
.row-gutter-9 .column-offset-9 {
  margin-left: 100%;
}
.row-gutter-9 .column-span-10 {
  width: 111.1111111111%;
}
.row-gutter-9 .column-offset-10 {
  margin-left: 111.1111111111%;
}
.row-gutter-9 .column-span-11 {
  width: 122.2222222222%;
}
.row-gutter-9 .column-offset-11 {
  margin-left: 122.2222222222%;
}
.row-gutter-9 .column-span-12 {
  width: 133.3333333333%;
}
.row-gutter-9 .column-offset-12 {
  margin-left: 133.3333333333%;
}
.row-gutter-9 .column-span-13 {
  width: 144.4444444444%;
}
.row-gutter-9 .column-offset-13 {
  margin-left: 144.4444444444%;
}
.row-gutter-9 .column-span-14 {
  width: 155.5555555556%;
}
.row-gutter-9 .column-offset-14 {
  margin-left: 155.5555555556%;
}
.row-gutter-9 .column-span-15 {
  width: 166.6666666667%;
}
.row-gutter-9 .column-offset-15 {
  margin-left: 166.6666666667%;
}
.row-gutter-9 .column-span-16 {
  width: 177.7777777778%;
}
.row-gutter-9 .column-offset-16 {
  margin-left: 177.7777777778%;
}
.row-gutter-9 .column-span-17 {
  width: 188.8888888889%;
}
.row-gutter-9 .column-offset-17 {
  margin-left: 188.8888888889%;
}
.row-gutter-9 .column-span-18 {
  width: 200%;
}
.row-gutter-9 .column-offset-18 {
  margin-left: 200%;
}
.row-gutter-9 .column-span-19 {
  width: 211.1111111111%;
}
.row-gutter-9 .column-offset-19 {
  margin-left: 211.1111111111%;
}
.row-gutter-9 .column-span-20 {
  width: 222.2222222222%;
}
.row-gutter-9 .column-offset-20 {
  margin-left: 222.2222222222%;
}
.row-gutter-9 .column-span-21 {
  width: 233.3333333333%;
}
.row-gutter-9 .column-offset-21 {
  margin-left: 233.3333333333%;
}
.row-gutter-9 .column-span-22 {
  width: 244.4444444444%;
}
.row-gutter-9 .column-offset-22 {
  margin-left: 244.4444444444%;
}
.row-gutter-9 .column-span-23 {
  width: 255.5555555556%;
}
.row-gutter-9 .column-offset-23 {
  margin-left: 255.5555555556%;
}
.row-gutter-9 .column-span-24 {
  width: 266.6666666667%;
}
.row-gutter-9 .column-offset-24 {
  margin-left: 266.6666666667%;
}

.row-gutter-10 {
  padding: 12px 6px;
}
.row-gutter-10 .column {
  padding: 0 6px;
  display: flex;
  flex-shrink: 0;
}
.row-gutter-10 .column-span-1 {
  width: 10%;
}
.row-gutter-10 .column-offset-1 {
  margin-left: 10%;
}
.row-gutter-10 .column-span-2 {
  width: 20%;
}
.row-gutter-10 .column-offset-2 {
  margin-left: 20%;
}
.row-gutter-10 .column-span-3 {
  width: 30%;
}
.row-gutter-10 .column-offset-3 {
  margin-left: 30%;
}
.row-gutter-10 .column-span-4 {
  width: 40%;
}
.row-gutter-10 .column-offset-4 {
  margin-left: 40%;
}
.row-gutter-10 .column-span-5 {
  width: 50%;
}
.row-gutter-10 .column-offset-5 {
  margin-left: 50%;
}
.row-gutter-10 .column-span-6 {
  width: 60%;
}
.row-gutter-10 .column-offset-6 {
  margin-left: 60%;
}
.row-gutter-10 .column-span-7 {
  width: 70%;
}
.row-gutter-10 .column-offset-7 {
  margin-left: 70%;
}
.row-gutter-10 .column-span-8 {
  width: 80%;
}
.row-gutter-10 .column-offset-8 {
  margin-left: 80%;
}
.row-gutter-10 .column-span-9 {
  width: 90%;
}
.row-gutter-10 .column-offset-9 {
  margin-left: 90%;
}
.row-gutter-10 .column-span-10 {
  width: 100%;
}
.row-gutter-10 .column-offset-10 {
  margin-left: 100%;
}
.row-gutter-10 .column-span-11 {
  width: 110%;
}
.row-gutter-10 .column-offset-11 {
  margin-left: 110%;
}
.row-gutter-10 .column-span-12 {
  width: 120%;
}
.row-gutter-10 .column-offset-12 {
  margin-left: 120%;
}
.row-gutter-10 .column-span-13 {
  width: 130%;
}
.row-gutter-10 .column-offset-13 {
  margin-left: 130%;
}
.row-gutter-10 .column-span-14 {
  width: 140%;
}
.row-gutter-10 .column-offset-14 {
  margin-left: 140%;
}
.row-gutter-10 .column-span-15 {
  width: 150%;
}
.row-gutter-10 .column-offset-15 {
  margin-left: 150%;
}
.row-gutter-10 .column-span-16 {
  width: 160%;
}
.row-gutter-10 .column-offset-16 {
  margin-left: 160%;
}
.row-gutter-10 .column-span-17 {
  width: 170%;
}
.row-gutter-10 .column-offset-17 {
  margin-left: 170%;
}
.row-gutter-10 .column-span-18 {
  width: 180%;
}
.row-gutter-10 .column-offset-18 {
  margin-left: 180%;
}
.row-gutter-10 .column-span-19 {
  width: 190%;
}
.row-gutter-10 .column-offset-19 {
  margin-left: 190%;
}
.row-gutter-10 .column-span-20 {
  width: 200%;
}
.row-gutter-10 .column-offset-20 {
  margin-left: 200%;
}
.row-gutter-10 .column-span-21 {
  width: 210%;
}
.row-gutter-10 .column-offset-21 {
  margin-left: 210%;
}
.row-gutter-10 .column-span-22 {
  width: 220%;
}
.row-gutter-10 .column-offset-22 {
  margin-left: 220%;
}
.row-gutter-10 .column-span-23 {
  width: 230%;
}
.row-gutter-10 .column-offset-23 {
  margin-left: 230%;
}
.row-gutter-10 .column-span-24 {
  width: 240%;
}
.row-gutter-10 .column-offset-24 {
  margin-left: 240%;
}

.row-gutter-11 {
  padding: 12px 6px;
}
.row-gutter-11 .column {
  padding: 0 6px;
  display: flex;
  flex-shrink: 0;
}
.row-gutter-11 .column-span-1 {
  width: 9.0909090909%;
}
.row-gutter-11 .column-offset-1 {
  margin-left: 9.0909090909%;
}
.row-gutter-11 .column-span-2 {
  width: 18.1818181818%;
}
.row-gutter-11 .column-offset-2 {
  margin-left: 18.1818181818%;
}
.row-gutter-11 .column-span-3 {
  width: 27.2727272727%;
}
.row-gutter-11 .column-offset-3 {
  margin-left: 27.2727272727%;
}
.row-gutter-11 .column-span-4 {
  width: 36.3636363636%;
}
.row-gutter-11 .column-offset-4 {
  margin-left: 36.3636363636%;
}
.row-gutter-11 .column-span-5 {
  width: 45.4545454545%;
}
.row-gutter-11 .column-offset-5 {
  margin-left: 45.4545454545%;
}
.row-gutter-11 .column-span-6 {
  width: 54.5454545455%;
}
.row-gutter-11 .column-offset-6 {
  margin-left: 54.5454545455%;
}
.row-gutter-11 .column-span-7 {
  width: 63.6363636364%;
}
.row-gutter-11 .column-offset-7 {
  margin-left: 63.6363636364%;
}
.row-gutter-11 .column-span-8 {
  width: 72.7272727273%;
}
.row-gutter-11 .column-offset-8 {
  margin-left: 72.7272727273%;
}
.row-gutter-11 .column-span-9 {
  width: 81.8181818182%;
}
.row-gutter-11 .column-offset-9 {
  margin-left: 81.8181818182%;
}
.row-gutter-11 .column-span-10 {
  width: 90.9090909091%;
}
.row-gutter-11 .column-offset-10 {
  margin-left: 90.9090909091%;
}
.row-gutter-11 .column-span-11 {
  width: 100%;
}
.row-gutter-11 .column-offset-11 {
  margin-left: 100%;
}
.row-gutter-11 .column-span-12 {
  width: 109.0909090909%;
}
.row-gutter-11 .column-offset-12 {
  margin-left: 109.0909090909%;
}
.row-gutter-11 .column-span-13 {
  width: 118.1818181818%;
}
.row-gutter-11 .column-offset-13 {
  margin-left: 118.1818181818%;
}
.row-gutter-11 .column-span-14 {
  width: 127.2727272727%;
}
.row-gutter-11 .column-offset-14 {
  margin-left: 127.2727272727%;
}
.row-gutter-11 .column-span-15 {
  width: 136.3636363636%;
}
.row-gutter-11 .column-offset-15 {
  margin-left: 136.3636363636%;
}
.row-gutter-11 .column-span-16 {
  width: 145.4545454545%;
}
.row-gutter-11 .column-offset-16 {
  margin-left: 145.4545454545%;
}
.row-gutter-11 .column-span-17 {
  width: 154.5454545455%;
}
.row-gutter-11 .column-offset-17 {
  margin-left: 154.5454545455%;
}
.row-gutter-11 .column-span-18 {
  width: 163.6363636364%;
}
.row-gutter-11 .column-offset-18 {
  margin-left: 163.6363636364%;
}
.row-gutter-11 .column-span-19 {
  width: 172.7272727273%;
}
.row-gutter-11 .column-offset-19 {
  margin-left: 172.7272727273%;
}
.row-gutter-11 .column-span-20 {
  width: 181.8181818182%;
}
.row-gutter-11 .column-offset-20 {
  margin-left: 181.8181818182%;
}
.row-gutter-11 .column-span-21 {
  width: 190.9090909091%;
}
.row-gutter-11 .column-offset-21 {
  margin-left: 190.9090909091%;
}
.row-gutter-11 .column-span-22 {
  width: 200%;
}
.row-gutter-11 .column-offset-22 {
  margin-left: 200%;
}
.row-gutter-11 .column-span-23 {
  width: 209.0909090909%;
}
.row-gutter-11 .column-offset-23 {
  margin-left: 209.0909090909%;
}
.row-gutter-11 .column-span-24 {
  width: 218.1818181818%;
}
.row-gutter-11 .column-offset-24 {
  margin-left: 218.1818181818%;
}

.row-gutter-12 {
  padding: 12px 6px;
}
.row-gutter-12 .column {
  padding: 0 6px;
  display: flex;
  flex-shrink: 0;
}
.row-gutter-12 .column-span-1 {
  width: 8.3333333333%;
}
.row-gutter-12 .column-offset-1 {
  margin-left: 8.3333333333%;
}
.row-gutter-12 .column-span-2 {
  width: 16.6666666667%;
}
.row-gutter-12 .column-offset-2 {
  margin-left: 16.6666666667%;
}
.row-gutter-12 .column-span-3 {
  width: 25%;
}
.row-gutter-12 .column-offset-3 {
  margin-left: 25%;
}
.row-gutter-12 .column-span-4 {
  width: 33.3333333333%;
}
.row-gutter-12 .column-offset-4 {
  margin-left: 33.3333333333%;
}
.row-gutter-12 .column-span-5 {
  width: 41.6666666667%;
}
.row-gutter-12 .column-offset-5 {
  margin-left: 41.6666666667%;
}
.row-gutter-12 .column-span-6 {
  width: 50%;
}
.row-gutter-12 .column-offset-6 {
  margin-left: 50%;
}
.row-gutter-12 .column-span-7 {
  width: 58.3333333333%;
}
.row-gutter-12 .column-offset-7 {
  margin-left: 58.3333333333%;
}
.row-gutter-12 .column-span-8 {
  width: 66.6666666667%;
}
.row-gutter-12 .column-offset-8 {
  margin-left: 66.6666666667%;
}
.row-gutter-12 .column-span-9 {
  width: 75%;
}
.row-gutter-12 .column-offset-9 {
  margin-left: 75%;
}
.row-gutter-12 .column-span-10 {
  width: 83.3333333333%;
}
.row-gutter-12 .column-offset-10 {
  margin-left: 83.3333333333%;
}
.row-gutter-12 .column-span-11 {
  width: 91.6666666667%;
}
.row-gutter-12 .column-offset-11 {
  margin-left: 91.6666666667%;
}
.row-gutter-12 .column-span-12 {
  width: 100%;
}
.row-gutter-12 .column-offset-12 {
  margin-left: 100%;
}
.row-gutter-12 .column-span-13 {
  width: 108.3333333333%;
}
.row-gutter-12 .column-offset-13 {
  margin-left: 108.3333333333%;
}
.row-gutter-12 .column-span-14 {
  width: 116.6666666667%;
}
.row-gutter-12 .column-offset-14 {
  margin-left: 116.6666666667%;
}
.row-gutter-12 .column-span-15 {
  width: 125%;
}
.row-gutter-12 .column-offset-15 {
  margin-left: 125%;
}
.row-gutter-12 .column-span-16 {
  width: 133.3333333333%;
}
.row-gutter-12 .column-offset-16 {
  margin-left: 133.3333333333%;
}
.row-gutter-12 .column-span-17 {
  width: 141.6666666667%;
}
.row-gutter-12 .column-offset-17 {
  margin-left: 141.6666666667%;
}
.row-gutter-12 .column-span-18 {
  width: 150%;
}
.row-gutter-12 .column-offset-18 {
  margin-left: 150%;
}
.row-gutter-12 .column-span-19 {
  width: 158.3333333333%;
}
.row-gutter-12 .column-offset-19 {
  margin-left: 158.3333333333%;
}
.row-gutter-12 .column-span-20 {
  width: 166.6666666667%;
}
.row-gutter-12 .column-offset-20 {
  margin-left: 166.6666666667%;
}
.row-gutter-12 .column-span-21 {
  width: 175%;
}
.row-gutter-12 .column-offset-21 {
  margin-left: 175%;
}
.row-gutter-12 .column-span-22 {
  width: 183.3333333333%;
}
.row-gutter-12 .column-offset-22 {
  margin-left: 183.3333333333%;
}
.row-gutter-12 .column-span-23 {
  width: 191.6666666667%;
}
.row-gutter-12 .column-offset-23 {
  margin-left: 191.6666666667%;
}
.row-gutter-12 .column-span-24 {
  width: 200%;
}
.row-gutter-12 .column-offset-24 {
  margin-left: 200%;
}

.row-gutter-13 {
  padding: 12px 6px;
}
.row-gutter-13 .column {
  padding: 0 6px;
  display: flex;
  flex-shrink: 0;
}
.row-gutter-13 .column-span-1 {
  width: 7.6923076923%;
}
.row-gutter-13 .column-offset-1 {
  margin-left: 7.6923076923%;
}
.row-gutter-13 .column-span-2 {
  width: 15.3846153846%;
}
.row-gutter-13 .column-offset-2 {
  margin-left: 15.3846153846%;
}
.row-gutter-13 .column-span-3 {
  width: 23.0769230769%;
}
.row-gutter-13 .column-offset-3 {
  margin-left: 23.0769230769%;
}
.row-gutter-13 .column-span-4 {
  width: 30.7692307692%;
}
.row-gutter-13 .column-offset-4 {
  margin-left: 30.7692307692%;
}
.row-gutter-13 .column-span-5 {
  width: 38.4615384615%;
}
.row-gutter-13 .column-offset-5 {
  margin-left: 38.4615384615%;
}
.row-gutter-13 .column-span-6 {
  width: 46.1538461538%;
}
.row-gutter-13 .column-offset-6 {
  margin-left: 46.1538461538%;
}
.row-gutter-13 .column-span-7 {
  width: 53.8461538462%;
}
.row-gutter-13 .column-offset-7 {
  margin-left: 53.8461538462%;
}
.row-gutter-13 .column-span-8 {
  width: 61.5384615385%;
}
.row-gutter-13 .column-offset-8 {
  margin-left: 61.5384615385%;
}
.row-gutter-13 .column-span-9 {
  width: 69.2307692308%;
}
.row-gutter-13 .column-offset-9 {
  margin-left: 69.2307692308%;
}
.row-gutter-13 .column-span-10 {
  width: 76.9230769231%;
}
.row-gutter-13 .column-offset-10 {
  margin-left: 76.9230769231%;
}
.row-gutter-13 .column-span-11 {
  width: 84.6153846154%;
}
.row-gutter-13 .column-offset-11 {
  margin-left: 84.6153846154%;
}
.row-gutter-13 .column-span-12 {
  width: 92.3076923077%;
}
.row-gutter-13 .column-offset-12 {
  margin-left: 92.3076923077%;
}
.row-gutter-13 .column-span-13 {
  width: 100%;
}
.row-gutter-13 .column-offset-13 {
  margin-left: 100%;
}
.row-gutter-13 .column-span-14 {
  width: 107.6923076923%;
}
.row-gutter-13 .column-offset-14 {
  margin-left: 107.6923076923%;
}
.row-gutter-13 .column-span-15 {
  width: 115.3846153846%;
}
.row-gutter-13 .column-offset-15 {
  margin-left: 115.3846153846%;
}
.row-gutter-13 .column-span-16 {
  width: 123.0769230769%;
}
.row-gutter-13 .column-offset-16 {
  margin-left: 123.0769230769%;
}
.row-gutter-13 .column-span-17 {
  width: 130.7692307692%;
}
.row-gutter-13 .column-offset-17 {
  margin-left: 130.7692307692%;
}
.row-gutter-13 .column-span-18 {
  width: 138.4615384615%;
}
.row-gutter-13 .column-offset-18 {
  margin-left: 138.4615384615%;
}
.row-gutter-13 .column-span-19 {
  width: 146.1538461538%;
}
.row-gutter-13 .column-offset-19 {
  margin-left: 146.1538461538%;
}
.row-gutter-13 .column-span-20 {
  width: 153.8461538462%;
}
.row-gutter-13 .column-offset-20 {
  margin-left: 153.8461538462%;
}
.row-gutter-13 .column-span-21 {
  width: 161.5384615385%;
}
.row-gutter-13 .column-offset-21 {
  margin-left: 161.5384615385%;
}
.row-gutter-13 .column-span-22 {
  width: 169.2307692308%;
}
.row-gutter-13 .column-offset-22 {
  margin-left: 169.2307692308%;
}
.row-gutter-13 .column-span-23 {
  width: 176.9230769231%;
}
.row-gutter-13 .column-offset-23 {
  margin-left: 176.9230769231%;
}
.row-gutter-13 .column-span-24 {
  width: 184.6153846154%;
}
.row-gutter-13 .column-offset-24 {
  margin-left: 184.6153846154%;
}

.row-gutter-14 {
  padding: 12px 6px;
}
.row-gutter-14 .column {
  padding: 0 6px;
  display: flex;
  flex-shrink: 0;
}
.row-gutter-14 .column-span-1 {
  width: 7.1428571429%;
}
.row-gutter-14 .column-offset-1 {
  margin-left: 7.1428571429%;
}
.row-gutter-14 .column-span-2 {
  width: 14.2857142857%;
}
.row-gutter-14 .column-offset-2 {
  margin-left: 14.2857142857%;
}
.row-gutter-14 .column-span-3 {
  width: 21.4285714286%;
}
.row-gutter-14 .column-offset-3 {
  margin-left: 21.4285714286%;
}
.row-gutter-14 .column-span-4 {
  width: 28.5714285714%;
}
.row-gutter-14 .column-offset-4 {
  margin-left: 28.5714285714%;
}
.row-gutter-14 .column-span-5 {
  width: 35.7142857143%;
}
.row-gutter-14 .column-offset-5 {
  margin-left: 35.7142857143%;
}
.row-gutter-14 .column-span-6 {
  width: 42.8571428571%;
}
.row-gutter-14 .column-offset-6 {
  margin-left: 42.8571428571%;
}
.row-gutter-14 .column-span-7 {
  width: 50%;
}
.row-gutter-14 .column-offset-7 {
  margin-left: 50%;
}
.row-gutter-14 .column-span-8 {
  width: 57.1428571429%;
}
.row-gutter-14 .column-offset-8 {
  margin-left: 57.1428571429%;
}
.row-gutter-14 .column-span-9 {
  width: 64.2857142857%;
}
.row-gutter-14 .column-offset-9 {
  margin-left: 64.2857142857%;
}
.row-gutter-14 .column-span-10 {
  width: 71.4285714286%;
}
.row-gutter-14 .column-offset-10 {
  margin-left: 71.4285714286%;
}
.row-gutter-14 .column-span-11 {
  width: 78.5714285714%;
}
.row-gutter-14 .column-offset-11 {
  margin-left: 78.5714285714%;
}
.row-gutter-14 .column-span-12 {
  width: 85.7142857143%;
}
.row-gutter-14 .column-offset-12 {
  margin-left: 85.7142857143%;
}
.row-gutter-14 .column-span-13 {
  width: 92.8571428571%;
}
.row-gutter-14 .column-offset-13 {
  margin-left: 92.8571428571%;
}
.row-gutter-14 .column-span-14 {
  width: 100%;
}
.row-gutter-14 .column-offset-14 {
  margin-left: 100%;
}
.row-gutter-14 .column-span-15 {
  width: 107.1428571429%;
}
.row-gutter-14 .column-offset-15 {
  margin-left: 107.1428571429%;
}
.row-gutter-14 .column-span-16 {
  width: 114.2857142857%;
}
.row-gutter-14 .column-offset-16 {
  margin-left: 114.2857142857%;
}
.row-gutter-14 .column-span-17 {
  width: 121.4285714286%;
}
.row-gutter-14 .column-offset-17 {
  margin-left: 121.4285714286%;
}
.row-gutter-14 .column-span-18 {
  width: 128.5714285714%;
}
.row-gutter-14 .column-offset-18 {
  margin-left: 128.5714285714%;
}
.row-gutter-14 .column-span-19 {
  width: 135.7142857143%;
}
.row-gutter-14 .column-offset-19 {
  margin-left: 135.7142857143%;
}
.row-gutter-14 .column-span-20 {
  width: 142.8571428571%;
}
.row-gutter-14 .column-offset-20 {
  margin-left: 142.8571428571%;
}
.row-gutter-14 .column-span-21 {
  width: 150%;
}
.row-gutter-14 .column-offset-21 {
  margin-left: 150%;
}
.row-gutter-14 .column-span-22 {
  width: 157.1428571429%;
}
.row-gutter-14 .column-offset-22 {
  margin-left: 157.1428571429%;
}
.row-gutter-14 .column-span-23 {
  width: 164.2857142857%;
}
.row-gutter-14 .column-offset-23 {
  margin-left: 164.2857142857%;
}
.row-gutter-14 .column-span-24 {
  width: 171.4285714286%;
}
.row-gutter-14 .column-offset-24 {
  margin-left: 171.4285714286%;
}

.row-gutter-15 {
  padding: 12px 6px;
}
.row-gutter-15 .column {
  padding: 0 6px;
  display: flex;
  flex-shrink: 0;
}
.row-gutter-15 .column-span-1 {
  width: 6.6666666667%;
}
.row-gutter-15 .column-offset-1 {
  margin-left: 6.6666666667%;
}
.row-gutter-15 .column-span-2 {
  width: 13.3333333333%;
}
.row-gutter-15 .column-offset-2 {
  margin-left: 13.3333333333%;
}
.row-gutter-15 .column-span-3 {
  width: 20%;
}
.row-gutter-15 .column-offset-3 {
  margin-left: 20%;
}
.row-gutter-15 .column-span-4 {
  width: 26.6666666667%;
}
.row-gutter-15 .column-offset-4 {
  margin-left: 26.6666666667%;
}
.row-gutter-15 .column-span-5 {
  width: 33.3333333333%;
}
.row-gutter-15 .column-offset-5 {
  margin-left: 33.3333333333%;
}
.row-gutter-15 .column-span-6 {
  width: 40%;
}
.row-gutter-15 .column-offset-6 {
  margin-left: 40%;
}
.row-gutter-15 .column-span-7 {
  width: 46.6666666667%;
}
.row-gutter-15 .column-offset-7 {
  margin-left: 46.6666666667%;
}
.row-gutter-15 .column-span-8 {
  width: 53.3333333333%;
}
.row-gutter-15 .column-offset-8 {
  margin-left: 53.3333333333%;
}
.row-gutter-15 .column-span-9 {
  width: 60%;
}
.row-gutter-15 .column-offset-9 {
  margin-left: 60%;
}
.row-gutter-15 .column-span-10 {
  width: 66.6666666667%;
}
.row-gutter-15 .column-offset-10 {
  margin-left: 66.6666666667%;
}
.row-gutter-15 .column-span-11 {
  width: 73.3333333333%;
}
.row-gutter-15 .column-offset-11 {
  margin-left: 73.3333333333%;
}
.row-gutter-15 .column-span-12 {
  width: 80%;
}
.row-gutter-15 .column-offset-12 {
  margin-left: 80%;
}
.row-gutter-15 .column-span-13 {
  width: 86.6666666667%;
}
.row-gutter-15 .column-offset-13 {
  margin-left: 86.6666666667%;
}
.row-gutter-15 .column-span-14 {
  width: 93.3333333333%;
}
.row-gutter-15 .column-offset-14 {
  margin-left: 93.3333333333%;
}
.row-gutter-15 .column-span-15 {
  width: 100%;
}
.row-gutter-15 .column-offset-15 {
  margin-left: 100%;
}
.row-gutter-15 .column-span-16 {
  width: 106.6666666667%;
}
.row-gutter-15 .column-offset-16 {
  margin-left: 106.6666666667%;
}
.row-gutter-15 .column-span-17 {
  width: 113.3333333333%;
}
.row-gutter-15 .column-offset-17 {
  margin-left: 113.3333333333%;
}
.row-gutter-15 .column-span-18 {
  width: 120%;
}
.row-gutter-15 .column-offset-18 {
  margin-left: 120%;
}
.row-gutter-15 .column-span-19 {
  width: 126.6666666667%;
}
.row-gutter-15 .column-offset-19 {
  margin-left: 126.6666666667%;
}
.row-gutter-15 .column-span-20 {
  width: 133.3333333333%;
}
.row-gutter-15 .column-offset-20 {
  margin-left: 133.3333333333%;
}
.row-gutter-15 .column-span-21 {
  width: 140%;
}
.row-gutter-15 .column-offset-21 {
  margin-left: 140%;
}
.row-gutter-15 .column-span-22 {
  width: 146.6666666667%;
}
.row-gutter-15 .column-offset-22 {
  margin-left: 146.6666666667%;
}
.row-gutter-15 .column-span-23 {
  width: 153.3333333333%;
}
.row-gutter-15 .column-offset-23 {
  margin-left: 153.3333333333%;
}
.row-gutter-15 .column-span-24 {
  width: 160%;
}
.row-gutter-15 .column-offset-24 {
  margin-left: 160%;
}

.row-gutter-16 {
  padding: 12px 6px;
}
.row-gutter-16 .column {
  padding: 0 6px;
  display: flex;
  flex-shrink: 0;
}
.row-gutter-16 .column-span-1 {
  width: 6.25%;
}
.row-gutter-16 .column-offset-1 {
  margin-left: 6.25%;
}
.row-gutter-16 .column-span-2 {
  width: 12.5%;
}
.row-gutter-16 .column-offset-2 {
  margin-left: 12.5%;
}
.row-gutter-16 .column-span-3 {
  width: 18.75%;
}
.row-gutter-16 .column-offset-3 {
  margin-left: 18.75%;
}
.row-gutter-16 .column-span-4 {
  width: 25%;
}
.row-gutter-16 .column-offset-4 {
  margin-left: 25%;
}
.row-gutter-16 .column-span-5 {
  width: 31.25%;
}
.row-gutter-16 .column-offset-5 {
  margin-left: 31.25%;
}
.row-gutter-16 .column-span-6 {
  width: 37.5%;
}
.row-gutter-16 .column-offset-6 {
  margin-left: 37.5%;
}
.row-gutter-16 .column-span-7 {
  width: 43.75%;
}
.row-gutter-16 .column-offset-7 {
  margin-left: 43.75%;
}
.row-gutter-16 .column-span-8 {
  width: 50%;
}
.row-gutter-16 .column-offset-8 {
  margin-left: 50%;
}
.row-gutter-16 .column-span-9 {
  width: 56.25%;
}
.row-gutter-16 .column-offset-9 {
  margin-left: 56.25%;
}
.row-gutter-16 .column-span-10 {
  width: 62.5%;
}
.row-gutter-16 .column-offset-10 {
  margin-left: 62.5%;
}
.row-gutter-16 .column-span-11 {
  width: 68.75%;
}
.row-gutter-16 .column-offset-11 {
  margin-left: 68.75%;
}
.row-gutter-16 .column-span-12 {
  width: 75%;
}
.row-gutter-16 .column-offset-12 {
  margin-left: 75%;
}
.row-gutter-16 .column-span-13 {
  width: 81.25%;
}
.row-gutter-16 .column-offset-13 {
  margin-left: 81.25%;
}
.row-gutter-16 .column-span-14 {
  width: 87.5%;
}
.row-gutter-16 .column-offset-14 {
  margin-left: 87.5%;
}
.row-gutter-16 .column-span-15 {
  width: 93.75%;
}
.row-gutter-16 .column-offset-15 {
  margin-left: 93.75%;
}
.row-gutter-16 .column-span-16 {
  width: 100%;
}
.row-gutter-16 .column-offset-16 {
  margin-left: 100%;
}
.row-gutter-16 .column-span-17 {
  width: 106.25%;
}
.row-gutter-16 .column-offset-17 {
  margin-left: 106.25%;
}
.row-gutter-16 .column-span-18 {
  width: 112.5%;
}
.row-gutter-16 .column-offset-18 {
  margin-left: 112.5%;
}
.row-gutter-16 .column-span-19 {
  width: 118.75%;
}
.row-gutter-16 .column-offset-19 {
  margin-left: 118.75%;
}
.row-gutter-16 .column-span-20 {
  width: 125%;
}
.row-gutter-16 .column-offset-20 {
  margin-left: 125%;
}
.row-gutter-16 .column-span-21 {
  width: 131.25%;
}
.row-gutter-16 .column-offset-21 {
  margin-left: 131.25%;
}
.row-gutter-16 .column-span-22 {
  width: 137.5%;
}
.row-gutter-16 .column-offset-22 {
  margin-left: 137.5%;
}
.row-gutter-16 .column-span-23 {
  width: 143.75%;
}
.row-gutter-16 .column-offset-23 {
  margin-left: 143.75%;
}
.row-gutter-16 .column-span-24 {
  width: 150%;
}
.row-gutter-16 .column-offset-24 {
  margin-left: 150%;
}

.row-gutter-17 {
  padding: 12px 6px;
}
.row-gutter-17 .column {
  padding: 0 6px;
  display: flex;
  flex-shrink: 0;
}
.row-gutter-17 .column-span-1 {
  width: 5.8823529412%;
}
.row-gutter-17 .column-offset-1 {
  margin-left: 5.8823529412%;
}
.row-gutter-17 .column-span-2 {
  width: 11.7647058824%;
}
.row-gutter-17 .column-offset-2 {
  margin-left: 11.7647058824%;
}
.row-gutter-17 .column-span-3 {
  width: 17.6470588235%;
}
.row-gutter-17 .column-offset-3 {
  margin-left: 17.6470588235%;
}
.row-gutter-17 .column-span-4 {
  width: 23.5294117647%;
}
.row-gutter-17 .column-offset-4 {
  margin-left: 23.5294117647%;
}
.row-gutter-17 .column-span-5 {
  width: 29.4117647059%;
}
.row-gutter-17 .column-offset-5 {
  margin-left: 29.4117647059%;
}
.row-gutter-17 .column-span-6 {
  width: 35.2941176471%;
}
.row-gutter-17 .column-offset-6 {
  margin-left: 35.2941176471%;
}
.row-gutter-17 .column-span-7 {
  width: 41.1764705882%;
}
.row-gutter-17 .column-offset-7 {
  margin-left: 41.1764705882%;
}
.row-gutter-17 .column-span-8 {
  width: 47.0588235294%;
}
.row-gutter-17 .column-offset-8 {
  margin-left: 47.0588235294%;
}
.row-gutter-17 .column-span-9 {
  width: 52.9411764706%;
}
.row-gutter-17 .column-offset-9 {
  margin-left: 52.9411764706%;
}
.row-gutter-17 .column-span-10 {
  width: 58.8235294118%;
}
.row-gutter-17 .column-offset-10 {
  margin-left: 58.8235294118%;
}
.row-gutter-17 .column-span-11 {
  width: 64.7058823529%;
}
.row-gutter-17 .column-offset-11 {
  margin-left: 64.7058823529%;
}
.row-gutter-17 .column-span-12 {
  width: 70.5882352941%;
}
.row-gutter-17 .column-offset-12 {
  margin-left: 70.5882352941%;
}
.row-gutter-17 .column-span-13 {
  width: 76.4705882353%;
}
.row-gutter-17 .column-offset-13 {
  margin-left: 76.4705882353%;
}
.row-gutter-17 .column-span-14 {
  width: 82.3529411765%;
}
.row-gutter-17 .column-offset-14 {
  margin-left: 82.3529411765%;
}
.row-gutter-17 .column-span-15 {
  width: 88.2352941176%;
}
.row-gutter-17 .column-offset-15 {
  margin-left: 88.2352941176%;
}
.row-gutter-17 .column-span-16 {
  width: 94.1176470588%;
}
.row-gutter-17 .column-offset-16 {
  margin-left: 94.1176470588%;
}
.row-gutter-17 .column-span-17 {
  width: 100%;
}
.row-gutter-17 .column-offset-17 {
  margin-left: 100%;
}
.row-gutter-17 .column-span-18 {
  width: 105.8823529412%;
}
.row-gutter-17 .column-offset-18 {
  margin-left: 105.8823529412%;
}
.row-gutter-17 .column-span-19 {
  width: 111.7647058824%;
}
.row-gutter-17 .column-offset-19 {
  margin-left: 111.7647058824%;
}
.row-gutter-17 .column-span-20 {
  width: 117.6470588235%;
}
.row-gutter-17 .column-offset-20 {
  margin-left: 117.6470588235%;
}
.row-gutter-17 .column-span-21 {
  width: 123.5294117647%;
}
.row-gutter-17 .column-offset-21 {
  margin-left: 123.5294117647%;
}
.row-gutter-17 .column-span-22 {
  width: 129.4117647059%;
}
.row-gutter-17 .column-offset-22 {
  margin-left: 129.4117647059%;
}
.row-gutter-17 .column-span-23 {
  width: 135.2941176471%;
}
.row-gutter-17 .column-offset-23 {
  margin-left: 135.2941176471%;
}
.row-gutter-17 .column-span-24 {
  width: 141.1764705882%;
}
.row-gutter-17 .column-offset-24 {
  margin-left: 141.1764705882%;
}

.row-gutter-18 {
  padding: 12px 6px;
}
.row-gutter-18 .column {
  padding: 0 6px;
  display: flex;
  flex-shrink: 0;
}
.row-gutter-18 .column-span-1 {
  width: 5.5555555556%;
}
.row-gutter-18 .column-offset-1 {
  margin-left: 5.5555555556%;
}
.row-gutter-18 .column-span-2 {
  width: 11.1111111111%;
}
.row-gutter-18 .column-offset-2 {
  margin-left: 11.1111111111%;
}
.row-gutter-18 .column-span-3 {
  width: 16.6666666667%;
}
.row-gutter-18 .column-offset-3 {
  margin-left: 16.6666666667%;
}
.row-gutter-18 .column-span-4 {
  width: 22.2222222222%;
}
.row-gutter-18 .column-offset-4 {
  margin-left: 22.2222222222%;
}
.row-gutter-18 .column-span-5 {
  width: 27.7777777778%;
}
.row-gutter-18 .column-offset-5 {
  margin-left: 27.7777777778%;
}
.row-gutter-18 .column-span-6 {
  width: 33.3333333333%;
}
.row-gutter-18 .column-offset-6 {
  margin-left: 33.3333333333%;
}
.row-gutter-18 .column-span-7 {
  width: 38.8888888889%;
}
.row-gutter-18 .column-offset-7 {
  margin-left: 38.8888888889%;
}
.row-gutter-18 .column-span-8 {
  width: 44.4444444444%;
}
.row-gutter-18 .column-offset-8 {
  margin-left: 44.4444444444%;
}
.row-gutter-18 .column-span-9 {
  width: 50%;
}
.row-gutter-18 .column-offset-9 {
  margin-left: 50%;
}
.row-gutter-18 .column-span-10 {
  width: 55.5555555556%;
}
.row-gutter-18 .column-offset-10 {
  margin-left: 55.5555555556%;
}
.row-gutter-18 .column-span-11 {
  width: 61.1111111111%;
}
.row-gutter-18 .column-offset-11 {
  margin-left: 61.1111111111%;
}
.row-gutter-18 .column-span-12 {
  width: 66.6666666667%;
}
.row-gutter-18 .column-offset-12 {
  margin-left: 66.6666666667%;
}
.row-gutter-18 .column-span-13 {
  width: 72.2222222222%;
}
.row-gutter-18 .column-offset-13 {
  margin-left: 72.2222222222%;
}
.row-gutter-18 .column-span-14 {
  width: 77.7777777778%;
}
.row-gutter-18 .column-offset-14 {
  margin-left: 77.7777777778%;
}
.row-gutter-18 .column-span-15 {
  width: 83.3333333333%;
}
.row-gutter-18 .column-offset-15 {
  margin-left: 83.3333333333%;
}
.row-gutter-18 .column-span-16 {
  width: 88.8888888889%;
}
.row-gutter-18 .column-offset-16 {
  margin-left: 88.8888888889%;
}
.row-gutter-18 .column-span-17 {
  width: 94.4444444444%;
}
.row-gutter-18 .column-offset-17 {
  margin-left: 94.4444444444%;
}
.row-gutter-18 .column-span-18 {
  width: 100%;
}
.row-gutter-18 .column-offset-18 {
  margin-left: 100%;
}
.row-gutter-18 .column-span-19 {
  width: 105.5555555556%;
}
.row-gutter-18 .column-offset-19 {
  margin-left: 105.5555555556%;
}
.row-gutter-18 .column-span-20 {
  width: 111.1111111111%;
}
.row-gutter-18 .column-offset-20 {
  margin-left: 111.1111111111%;
}
.row-gutter-18 .column-span-21 {
  width: 116.6666666667%;
}
.row-gutter-18 .column-offset-21 {
  margin-left: 116.6666666667%;
}
.row-gutter-18 .column-span-22 {
  width: 122.2222222222%;
}
.row-gutter-18 .column-offset-22 {
  margin-left: 122.2222222222%;
}
.row-gutter-18 .column-span-23 {
  width: 127.7777777778%;
}
.row-gutter-18 .column-offset-23 {
  margin-left: 127.7777777778%;
}
.row-gutter-18 .column-span-24 {
  width: 133.3333333333%;
}
.row-gutter-18 .column-offset-24 {
  margin-left: 133.3333333333%;
}

.row-gutter-19 {
  padding: 12px 6px;
}
.row-gutter-19 .column {
  padding: 0 6px;
  display: flex;
  flex-shrink: 0;
}
.row-gutter-19 .column-span-1 {
  width: 5.2631578947%;
}
.row-gutter-19 .column-offset-1 {
  margin-left: 5.2631578947%;
}
.row-gutter-19 .column-span-2 {
  width: 10.5263157895%;
}
.row-gutter-19 .column-offset-2 {
  margin-left: 10.5263157895%;
}
.row-gutter-19 .column-span-3 {
  width: 15.7894736842%;
}
.row-gutter-19 .column-offset-3 {
  margin-left: 15.7894736842%;
}
.row-gutter-19 .column-span-4 {
  width: 21.0526315789%;
}
.row-gutter-19 .column-offset-4 {
  margin-left: 21.0526315789%;
}
.row-gutter-19 .column-span-5 {
  width: 26.3157894737%;
}
.row-gutter-19 .column-offset-5 {
  margin-left: 26.3157894737%;
}
.row-gutter-19 .column-span-6 {
  width: 31.5789473684%;
}
.row-gutter-19 .column-offset-6 {
  margin-left: 31.5789473684%;
}
.row-gutter-19 .column-span-7 {
  width: 36.8421052632%;
}
.row-gutter-19 .column-offset-7 {
  margin-left: 36.8421052632%;
}
.row-gutter-19 .column-span-8 {
  width: 42.1052631579%;
}
.row-gutter-19 .column-offset-8 {
  margin-left: 42.1052631579%;
}
.row-gutter-19 .column-span-9 {
  width: 47.3684210526%;
}
.row-gutter-19 .column-offset-9 {
  margin-left: 47.3684210526%;
}
.row-gutter-19 .column-span-10 {
  width: 52.6315789474%;
}
.row-gutter-19 .column-offset-10 {
  margin-left: 52.6315789474%;
}
.row-gutter-19 .column-span-11 {
  width: 57.8947368421%;
}
.row-gutter-19 .column-offset-11 {
  margin-left: 57.8947368421%;
}
.row-gutter-19 .column-span-12 {
  width: 63.1578947368%;
}
.row-gutter-19 .column-offset-12 {
  margin-left: 63.1578947368%;
}
.row-gutter-19 .column-span-13 {
  width: 68.4210526316%;
}
.row-gutter-19 .column-offset-13 {
  margin-left: 68.4210526316%;
}
.row-gutter-19 .column-span-14 {
  width: 73.6842105263%;
}
.row-gutter-19 .column-offset-14 {
  margin-left: 73.6842105263%;
}
.row-gutter-19 .column-span-15 {
  width: 78.9473684211%;
}
.row-gutter-19 .column-offset-15 {
  margin-left: 78.9473684211%;
}
.row-gutter-19 .column-span-16 {
  width: 84.2105263158%;
}
.row-gutter-19 .column-offset-16 {
  margin-left: 84.2105263158%;
}
.row-gutter-19 .column-span-17 {
  width: 89.4736842105%;
}
.row-gutter-19 .column-offset-17 {
  margin-left: 89.4736842105%;
}
.row-gutter-19 .column-span-18 {
  width: 94.7368421053%;
}
.row-gutter-19 .column-offset-18 {
  margin-left: 94.7368421053%;
}
.row-gutter-19 .column-span-19 {
  width: 100%;
}
.row-gutter-19 .column-offset-19 {
  margin-left: 100%;
}
.row-gutter-19 .column-span-20 {
  width: 105.2631578947%;
}
.row-gutter-19 .column-offset-20 {
  margin-left: 105.2631578947%;
}
.row-gutter-19 .column-span-21 {
  width: 110.5263157895%;
}
.row-gutter-19 .column-offset-21 {
  margin-left: 110.5263157895%;
}
.row-gutter-19 .column-span-22 {
  width: 115.7894736842%;
}
.row-gutter-19 .column-offset-22 {
  margin-left: 115.7894736842%;
}
.row-gutter-19 .column-span-23 {
  width: 121.0526315789%;
}
.row-gutter-19 .column-offset-23 {
  margin-left: 121.0526315789%;
}
.row-gutter-19 .column-span-24 {
  width: 126.3157894737%;
}
.row-gutter-19 .column-offset-24 {
  margin-left: 126.3157894737%;
}

.row-gutter-20 {
  padding: 12px 6px;
}
.row-gutter-20 .column {
  padding: 0 6px;
  display: flex;
  flex-shrink: 0;
}
.row-gutter-20 .column-span-1 {
  width: 5%;
}
.row-gutter-20 .column-offset-1 {
  margin-left: 5%;
}
.row-gutter-20 .column-span-2 {
  width: 10%;
}
.row-gutter-20 .column-offset-2 {
  margin-left: 10%;
}
.row-gutter-20 .column-span-3 {
  width: 15%;
}
.row-gutter-20 .column-offset-3 {
  margin-left: 15%;
}
.row-gutter-20 .column-span-4 {
  width: 20%;
}
.row-gutter-20 .column-offset-4 {
  margin-left: 20%;
}
.row-gutter-20 .column-span-5 {
  width: 25%;
}
.row-gutter-20 .column-offset-5 {
  margin-left: 25%;
}
.row-gutter-20 .column-span-6 {
  width: 30%;
}
.row-gutter-20 .column-offset-6 {
  margin-left: 30%;
}
.row-gutter-20 .column-span-7 {
  width: 35%;
}
.row-gutter-20 .column-offset-7 {
  margin-left: 35%;
}
.row-gutter-20 .column-span-8 {
  width: 40%;
}
.row-gutter-20 .column-offset-8 {
  margin-left: 40%;
}
.row-gutter-20 .column-span-9 {
  width: 45%;
}
.row-gutter-20 .column-offset-9 {
  margin-left: 45%;
}
.row-gutter-20 .column-span-10 {
  width: 50%;
}
.row-gutter-20 .column-offset-10 {
  margin-left: 50%;
}
.row-gutter-20 .column-span-11 {
  width: 55%;
}
.row-gutter-20 .column-offset-11 {
  margin-left: 55%;
}
.row-gutter-20 .column-span-12 {
  width: 60%;
}
.row-gutter-20 .column-offset-12 {
  margin-left: 60%;
}
.row-gutter-20 .column-span-13 {
  width: 65%;
}
.row-gutter-20 .column-offset-13 {
  margin-left: 65%;
}
.row-gutter-20 .column-span-14 {
  width: 70%;
}
.row-gutter-20 .column-offset-14 {
  margin-left: 70%;
}
.row-gutter-20 .column-span-15 {
  width: 75%;
}
.row-gutter-20 .column-offset-15 {
  margin-left: 75%;
}
.row-gutter-20 .column-span-16 {
  width: 80%;
}
.row-gutter-20 .column-offset-16 {
  margin-left: 80%;
}
.row-gutter-20 .column-span-17 {
  width: 85%;
}
.row-gutter-20 .column-offset-17 {
  margin-left: 85%;
}
.row-gutter-20 .column-span-18 {
  width: 90%;
}
.row-gutter-20 .column-offset-18 {
  margin-left: 90%;
}
.row-gutter-20 .column-span-19 {
  width: 95%;
}
.row-gutter-20 .column-offset-19 {
  margin-left: 95%;
}
.row-gutter-20 .column-span-20 {
  width: 100%;
}
.row-gutter-20 .column-offset-20 {
  margin-left: 100%;
}
.row-gutter-20 .column-span-21 {
  width: 105%;
}
.row-gutter-20 .column-offset-21 {
  margin-left: 105%;
}
.row-gutter-20 .column-span-22 {
  width: 110%;
}
.row-gutter-20 .column-offset-22 {
  margin-left: 110%;
}
.row-gutter-20 .column-span-23 {
  width: 115%;
}
.row-gutter-20 .column-offset-23 {
  margin-left: 115%;
}
.row-gutter-20 .column-span-24 {
  width: 120%;
}
.row-gutter-20 .column-offset-24 {
  margin-left: 120%;
}

.row-gutter-21 {
  padding: 12px 6px;
}
.row-gutter-21 .column {
  padding: 0 6px;
  display: flex;
  flex-shrink: 0;
}
.row-gutter-21 .column-span-1 {
  width: 4.7619047619%;
}
.row-gutter-21 .column-offset-1 {
  margin-left: 4.7619047619%;
}
.row-gutter-21 .column-span-2 {
  width: 9.5238095238%;
}
.row-gutter-21 .column-offset-2 {
  margin-left: 9.5238095238%;
}
.row-gutter-21 .column-span-3 {
  width: 14.2857142857%;
}
.row-gutter-21 .column-offset-3 {
  margin-left: 14.2857142857%;
}
.row-gutter-21 .column-span-4 {
  width: 19.0476190476%;
}
.row-gutter-21 .column-offset-4 {
  margin-left: 19.0476190476%;
}
.row-gutter-21 .column-span-5 {
  width: 23.8095238095%;
}
.row-gutter-21 .column-offset-5 {
  margin-left: 23.8095238095%;
}
.row-gutter-21 .column-span-6 {
  width: 28.5714285714%;
}
.row-gutter-21 .column-offset-6 {
  margin-left: 28.5714285714%;
}
.row-gutter-21 .column-span-7 {
  width: 33.3333333333%;
}
.row-gutter-21 .column-offset-7 {
  margin-left: 33.3333333333%;
}
.row-gutter-21 .column-span-8 {
  width: 38.0952380952%;
}
.row-gutter-21 .column-offset-8 {
  margin-left: 38.0952380952%;
}
.row-gutter-21 .column-span-9 {
  width: 42.8571428571%;
}
.row-gutter-21 .column-offset-9 {
  margin-left: 42.8571428571%;
}
.row-gutter-21 .column-span-10 {
  width: 47.619047619%;
}
.row-gutter-21 .column-offset-10 {
  margin-left: 47.619047619%;
}
.row-gutter-21 .column-span-11 {
  width: 52.380952381%;
}
.row-gutter-21 .column-offset-11 {
  margin-left: 52.380952381%;
}
.row-gutter-21 .column-span-12 {
  width: 57.1428571429%;
}
.row-gutter-21 .column-offset-12 {
  margin-left: 57.1428571429%;
}
.row-gutter-21 .column-span-13 {
  width: 61.9047619048%;
}
.row-gutter-21 .column-offset-13 {
  margin-left: 61.9047619048%;
}
.row-gutter-21 .column-span-14 {
  width: 66.6666666667%;
}
.row-gutter-21 .column-offset-14 {
  margin-left: 66.6666666667%;
}
.row-gutter-21 .column-span-15 {
  width: 71.4285714286%;
}
.row-gutter-21 .column-offset-15 {
  margin-left: 71.4285714286%;
}
.row-gutter-21 .column-span-16 {
  width: 76.1904761905%;
}
.row-gutter-21 .column-offset-16 {
  margin-left: 76.1904761905%;
}
.row-gutter-21 .column-span-17 {
  width: 80.9523809524%;
}
.row-gutter-21 .column-offset-17 {
  margin-left: 80.9523809524%;
}
.row-gutter-21 .column-span-18 {
  width: 85.7142857143%;
}
.row-gutter-21 .column-offset-18 {
  margin-left: 85.7142857143%;
}
.row-gutter-21 .column-span-19 {
  width: 90.4761904762%;
}
.row-gutter-21 .column-offset-19 {
  margin-left: 90.4761904762%;
}
.row-gutter-21 .column-span-20 {
  width: 95.2380952381%;
}
.row-gutter-21 .column-offset-20 {
  margin-left: 95.2380952381%;
}
.row-gutter-21 .column-span-21 {
  width: 100%;
}
.row-gutter-21 .column-offset-21 {
  margin-left: 100%;
}
.row-gutter-21 .column-span-22 {
  width: 104.7619047619%;
}
.row-gutter-21 .column-offset-22 {
  margin-left: 104.7619047619%;
}
.row-gutter-21 .column-span-23 {
  width: 109.5238095238%;
}
.row-gutter-21 .column-offset-23 {
  margin-left: 109.5238095238%;
}
.row-gutter-21 .column-span-24 {
  width: 114.2857142857%;
}
.row-gutter-21 .column-offset-24 {
  margin-left: 114.2857142857%;
}

.row-gutter-22 {
  padding: 12px 6px;
}
.row-gutter-22 .column {
  padding: 0 6px;
  display: flex;
  flex-shrink: 0;
}
.row-gutter-22 .column-span-1 {
  width: 4.5454545455%;
}
.row-gutter-22 .column-offset-1 {
  margin-left: 4.5454545455%;
}
.row-gutter-22 .column-span-2 {
  width: 9.0909090909%;
}
.row-gutter-22 .column-offset-2 {
  margin-left: 9.0909090909%;
}
.row-gutter-22 .column-span-3 {
  width: 13.6363636364%;
}
.row-gutter-22 .column-offset-3 {
  margin-left: 13.6363636364%;
}
.row-gutter-22 .column-span-4 {
  width: 18.1818181818%;
}
.row-gutter-22 .column-offset-4 {
  margin-left: 18.1818181818%;
}
.row-gutter-22 .column-span-5 {
  width: 22.7272727273%;
}
.row-gutter-22 .column-offset-5 {
  margin-left: 22.7272727273%;
}
.row-gutter-22 .column-span-6 {
  width: 27.2727272727%;
}
.row-gutter-22 .column-offset-6 {
  margin-left: 27.2727272727%;
}
.row-gutter-22 .column-span-7 {
  width: 31.8181818182%;
}
.row-gutter-22 .column-offset-7 {
  margin-left: 31.8181818182%;
}
.row-gutter-22 .column-span-8 {
  width: 36.3636363636%;
}
.row-gutter-22 .column-offset-8 {
  margin-left: 36.3636363636%;
}
.row-gutter-22 .column-span-9 {
  width: 40.9090909091%;
}
.row-gutter-22 .column-offset-9 {
  margin-left: 40.9090909091%;
}
.row-gutter-22 .column-span-10 {
  width: 45.4545454545%;
}
.row-gutter-22 .column-offset-10 {
  margin-left: 45.4545454545%;
}
.row-gutter-22 .column-span-11 {
  width: 50%;
}
.row-gutter-22 .column-offset-11 {
  margin-left: 50%;
}
.row-gutter-22 .column-span-12 {
  width: 54.5454545455%;
}
.row-gutter-22 .column-offset-12 {
  margin-left: 54.5454545455%;
}
.row-gutter-22 .column-span-13 {
  width: 59.0909090909%;
}
.row-gutter-22 .column-offset-13 {
  margin-left: 59.0909090909%;
}
.row-gutter-22 .column-span-14 {
  width: 63.6363636364%;
}
.row-gutter-22 .column-offset-14 {
  margin-left: 63.6363636364%;
}
.row-gutter-22 .column-span-15 {
  width: 68.1818181818%;
}
.row-gutter-22 .column-offset-15 {
  margin-left: 68.1818181818%;
}
.row-gutter-22 .column-span-16 {
  width: 72.7272727273%;
}
.row-gutter-22 .column-offset-16 {
  margin-left: 72.7272727273%;
}
.row-gutter-22 .column-span-17 {
  width: 77.2727272727%;
}
.row-gutter-22 .column-offset-17 {
  margin-left: 77.2727272727%;
}
.row-gutter-22 .column-span-18 {
  width: 81.8181818182%;
}
.row-gutter-22 .column-offset-18 {
  margin-left: 81.8181818182%;
}
.row-gutter-22 .column-span-19 {
  width: 86.3636363636%;
}
.row-gutter-22 .column-offset-19 {
  margin-left: 86.3636363636%;
}
.row-gutter-22 .column-span-20 {
  width: 90.9090909091%;
}
.row-gutter-22 .column-offset-20 {
  margin-left: 90.9090909091%;
}
.row-gutter-22 .column-span-21 {
  width: 95.4545454545%;
}
.row-gutter-22 .column-offset-21 {
  margin-left: 95.4545454545%;
}
.row-gutter-22 .column-span-22 {
  width: 100%;
}
.row-gutter-22 .column-offset-22 {
  margin-left: 100%;
}
.row-gutter-22 .column-span-23 {
  width: 104.5454545455%;
}
.row-gutter-22 .column-offset-23 {
  margin-left: 104.5454545455%;
}
.row-gutter-22 .column-span-24 {
  width: 109.0909090909%;
}
.row-gutter-22 .column-offset-24 {
  margin-left: 109.0909090909%;
}

.row-gutter-23 {
  padding: 12px 6px;
}
.row-gutter-23 .column {
  padding: 0 6px;
  display: flex;
  flex-shrink: 0;
}
.row-gutter-23 .column-span-1 {
  width: 4.347826087%;
}
.row-gutter-23 .column-offset-1 {
  margin-left: 4.347826087%;
}
.row-gutter-23 .column-span-2 {
  width: 8.6956521739%;
}
.row-gutter-23 .column-offset-2 {
  margin-left: 8.6956521739%;
}
.row-gutter-23 .column-span-3 {
  width: 13.0434782609%;
}
.row-gutter-23 .column-offset-3 {
  margin-left: 13.0434782609%;
}
.row-gutter-23 .column-span-4 {
  width: 17.3913043478%;
}
.row-gutter-23 .column-offset-4 {
  margin-left: 17.3913043478%;
}
.row-gutter-23 .column-span-5 {
  width: 21.7391304348%;
}
.row-gutter-23 .column-offset-5 {
  margin-left: 21.7391304348%;
}
.row-gutter-23 .column-span-6 {
  width: 26.0869565217%;
}
.row-gutter-23 .column-offset-6 {
  margin-left: 26.0869565217%;
}
.row-gutter-23 .column-span-7 {
  width: 30.4347826087%;
}
.row-gutter-23 .column-offset-7 {
  margin-left: 30.4347826087%;
}
.row-gutter-23 .column-span-8 {
  width: 34.7826086957%;
}
.row-gutter-23 .column-offset-8 {
  margin-left: 34.7826086957%;
}
.row-gutter-23 .column-span-9 {
  width: 39.1304347826%;
}
.row-gutter-23 .column-offset-9 {
  margin-left: 39.1304347826%;
}
.row-gutter-23 .column-span-10 {
  width: 43.4782608696%;
}
.row-gutter-23 .column-offset-10 {
  margin-left: 43.4782608696%;
}
.row-gutter-23 .column-span-11 {
  width: 47.8260869565%;
}
.row-gutter-23 .column-offset-11 {
  margin-left: 47.8260869565%;
}
.row-gutter-23 .column-span-12 {
  width: 52.1739130435%;
}
.row-gutter-23 .column-offset-12 {
  margin-left: 52.1739130435%;
}
.row-gutter-23 .column-span-13 {
  width: 56.5217391304%;
}
.row-gutter-23 .column-offset-13 {
  margin-left: 56.5217391304%;
}
.row-gutter-23 .column-span-14 {
  width: 60.8695652174%;
}
.row-gutter-23 .column-offset-14 {
  margin-left: 60.8695652174%;
}
.row-gutter-23 .column-span-15 {
  width: 65.2173913043%;
}
.row-gutter-23 .column-offset-15 {
  margin-left: 65.2173913043%;
}
.row-gutter-23 .column-span-16 {
  width: 69.5652173913%;
}
.row-gutter-23 .column-offset-16 {
  margin-left: 69.5652173913%;
}
.row-gutter-23 .column-span-17 {
  width: 73.9130434783%;
}
.row-gutter-23 .column-offset-17 {
  margin-left: 73.9130434783%;
}
.row-gutter-23 .column-span-18 {
  width: 78.2608695652%;
}
.row-gutter-23 .column-offset-18 {
  margin-left: 78.2608695652%;
}
.row-gutter-23 .column-span-19 {
  width: 82.6086956522%;
}
.row-gutter-23 .column-offset-19 {
  margin-left: 82.6086956522%;
}
.row-gutter-23 .column-span-20 {
  width: 86.9565217391%;
}
.row-gutter-23 .column-offset-20 {
  margin-left: 86.9565217391%;
}
.row-gutter-23 .column-span-21 {
  width: 91.3043478261%;
}
.row-gutter-23 .column-offset-21 {
  margin-left: 91.3043478261%;
}
.row-gutter-23 .column-span-22 {
  width: 95.652173913%;
}
.row-gutter-23 .column-offset-22 {
  margin-left: 95.652173913%;
}
.row-gutter-23 .column-span-23 {
  width: 100%;
}
.row-gutter-23 .column-offset-23 {
  margin-left: 100%;
}
.row-gutter-23 .column-span-24 {
  width: 104.347826087%;
}
.row-gutter-23 .column-offset-24 {
  margin-left: 104.347826087%;
}

.row-gutter-24 {
  padding: 12px 6px;
}
.row-gutter-24 .column {
  padding: 0 6px;
  display: flex;
  flex-shrink: 0;
}
.row-gutter-24 .column-span-1 {
  width: 4.1666666667%;
}
.row-gutter-24 .column-offset-1 {
  margin-left: 4.1666666667%;
}
.row-gutter-24 .column-span-2 {
  width: 8.3333333333%;
}
.row-gutter-24 .column-offset-2 {
  margin-left: 8.3333333333%;
}
.row-gutter-24 .column-span-3 {
  width: 12.5%;
}
.row-gutter-24 .column-offset-3 {
  margin-left: 12.5%;
}
.row-gutter-24 .column-span-4 {
  width: 16.6666666667%;
}
.row-gutter-24 .column-offset-4 {
  margin-left: 16.6666666667%;
}
.row-gutter-24 .column-span-5 {
  width: 20.8333333333%;
}
.row-gutter-24 .column-offset-5 {
  margin-left: 20.8333333333%;
}
.row-gutter-24 .column-span-6 {
  width: 25%;
}
.row-gutter-24 .column-offset-6 {
  margin-left: 25%;
}
.row-gutter-24 .column-span-7 {
  width: 29.1666666667%;
}
.row-gutter-24 .column-offset-7 {
  margin-left: 29.1666666667%;
}
.row-gutter-24 .column-span-8 {
  width: 33.3333333333%;
}
.row-gutter-24 .column-offset-8 {
  margin-left: 33.3333333333%;
}
.row-gutter-24 .column-span-9 {
  width: 37.5%;
}
.row-gutter-24 .column-offset-9 {
  margin-left: 37.5%;
}
.row-gutter-24 .column-span-10 {
  width: 41.6666666667%;
}
.row-gutter-24 .column-offset-10 {
  margin-left: 41.6666666667%;
}
.row-gutter-24 .column-span-11 {
  width: 45.8333333333%;
}
.row-gutter-24 .column-offset-11 {
  margin-left: 45.8333333333%;
}
.row-gutter-24 .column-span-12 {
  width: 50%;
}
.row-gutter-24 .column-offset-12 {
  margin-left: 50%;
}
.row-gutter-24 .column-span-13 {
  width: 54.1666666667%;
}
.row-gutter-24 .column-offset-13 {
  margin-left: 54.1666666667%;
}
.row-gutter-24 .column-span-14 {
  width: 58.3333333333%;
}
.row-gutter-24 .column-offset-14 {
  margin-left: 58.3333333333%;
}
.row-gutter-24 .column-span-15 {
  width: 62.5%;
}
.row-gutter-24 .column-offset-15 {
  margin-left: 62.5%;
}
.row-gutter-24 .column-span-16 {
  width: 66.6666666667%;
}
.row-gutter-24 .column-offset-16 {
  margin-left: 66.6666666667%;
}
.row-gutter-24 .column-span-17 {
  width: 70.8333333333%;
}
.row-gutter-24 .column-offset-17 {
  margin-left: 70.8333333333%;
}
.row-gutter-24 .column-span-18 {
  width: 75%;
}
.row-gutter-24 .column-offset-18 {
  margin-left: 75%;
}
.row-gutter-24 .column-span-19 {
  width: 79.1666666667%;
}
.row-gutter-24 .column-offset-19 {
  margin-left: 79.1666666667%;
}
.row-gutter-24 .column-span-20 {
  width: 83.3333333333%;
}
.row-gutter-24 .column-offset-20 {
  margin-left: 83.3333333333%;
}
.row-gutter-24 .column-span-21 {
  width: 87.5%;
}
.row-gutter-24 .column-offset-21 {
  margin-left: 87.5%;
}
.row-gutter-24 .column-span-22 {
  width: 91.6666666667%;
}
.row-gutter-24 .column-offset-22 {
  margin-left: 91.6666666667%;
}
.row-gutter-24 .column-span-23 {
  width: 95.8333333333%;
}
.row-gutter-24 .column-offset-23 {
  margin-left: 95.8333333333%;
}
.row-gutter-24 .column-span-24 {
  width: 100%;
}
.row-gutter-24 .column-offset-24 {
  margin-left: 100%;
}

.row-align-top {
  align-items: flex-start;
}

.row-align-middle {
  align-items: center;
}

.row-align-bottom {
  align-items: flex-end;
}

.row-justify-start {
  justify-content: flex-start;
}

.row-justify-end {
  justify-content: flex-end;
}

.row-justify-center {
  justify-content: center;
}

.row-justify-space-around {
  justify-content: space-around;
}

.row-justify-space-between {
  justify-content: space-between;
}
/**
 * Clash Dashboard
 * Style Common Variables
 */
.button-select {
  display: flex;
  flex-direction: row;
}
.button-select .button-select-options {
  height: 30px;
  padding: 0 15px;
  color: #54759a;
  font-size: 12px;
  line-height: 30px;
  background: #fff;
  border: 1px solid #e4eaef;
  border-right: none;
  transition: all 300ms ease;
  cursor: pointer;
  outline: 0;
  display: block;
}
.button-select .button-select-options:first-child {
  border-radius: 3px 0 0 3px;
}
.button-select .button-select-options:last-child {
  border-radius: 0 3px 3px 0;
  border-right: 1px solid #e4eaef;
}
.button-select .button-select-options.actived {
  background: #57befc;
  color: #fff;
  border-color: #57befc;
  box-shadow: 0 2px 5px rgba(87, 190, 252, 0.5);
}
.button-select .button-select-options.actived:active {
  box-shadow: none;
}
/**
 * Clash Dashboard
 * Style Common Variables
 */
.tags-container {
  display: flex;
  align-items: flex-start;
  overflow-y: hidden;
}

.tags {
  display: flex;
  flex: 1;
  align-items: center;
  list-style: none;
  flex-wrap: wrap;
  box-sizing: content-box;
}
.tags li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #2c8af8;
  color: #54759a;
  height: 22px;
  border-radius: 11px;
  padding: 0 6px;
  margin: 3px 4px;
  font-size: 10px;
  cursor: default;
}
.tags li.can-click {
  cursor: pointer;
}
.tags .tags-selected {
  background-color: #2c8af8;
  color: #fff;
}

.tags-expand {
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
}
/**
 * Clash Dashboard
 * Style Common Variables
 */
.input {
  display: inline-block;
  height: 30px;
  width: 100%;
  padding: 0 10px;
  font-size: 14px;
  color: #54759a;
  border-radius: 3px;
  border: 1px solid #e4eaef;
  transition: all 0.3s;
  transition-property: border-color, color, box-shadow;
}
.input:focus {
  outline: 0;
  border-color: #57befc;
  color: #2c8af8;
  box-shadow: 0 2px 5px rgba(87, 190, 252, 0.5);
}

.input-align-left {
  text-align: left;
}

.input-align-center {
  text-align: center;
}

.input-align-right {
  text-align: right;
}

.input-inside:focus {
  box-shadow: none;
}
/**
 * Clash Dashboard
 * Style Common Variables
 */
.select {
  cursor: pointer;
  font-size: 14px;
  line-height: 30px;
  color: #54759a;
  display: flex;
  overflow: hidden;
}
.select > i {
  margin-left: 5px;
  color: #54759a;
}

.select-list {
  position: absolute;
  max-width: 170px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(183, 197, 214, 0.5);
  opacity: 0.8;
  pointer-events: none;
  transform: scaleY(0);
  transform-origin: top;
  transition: all 200ms linear;
}
.select-list .list {
  max-height: 300px;
  overflow: auto;
  background: #fff;
  padding: 5px 0;
  transform: scaleY(2);
  transform-origin: top;
  transition: all 200ms linear;
}
.select-list .list > .option {
  color: #54759a;
  padding: 10px 15px;
  font-size: 14px;
  list-style: none;
  cursor: pointer;
}
.select-list .list > .option:hover {
  background: rgba(228, 234, 239, 0.5);
}
.select-list .list > .selected {
  background: rgba(228, 234, 239, 0.5);
}

.select-list-show {
  opacity: 1;
  pointer-events: visible;
  transform: scaleY(1);
}
.select-list-show .list {
  transform: scaleY(1);
}
/**
 * Clash Dashboard
 * Style Common Variables
 */
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.15);
  opacity: 0;
  pointer-events: none;
  transition: all 500ms ease;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 11;
}
.modal-mask .modal {
  margin-top: -50px;
  padding: 20px 30px;
  background: #fff;
  box-shadow: 0 2px 16px rgba(84, 117, 154, 0.2);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  transform: scale(0);
  transition: all 300ms cubic-bezier(0.32, 0.26, 0.71, 1.29);
}
.modal-mask .modal .modal-title {
  margin: 5px 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  font-size: 18px;
  color: #2c8af8;
  text-shadow: 0 2px 6px rgba(44, 138, 248, 0.4);
}
.modal-mask .modal .modal-body {
  margin: 10px 0;
  font-size: 14px;
  color: #54759a;
}
.modal-mask .modal .footer {
  width: 100%;
  margin: 5px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.modal-mask .modal .footer .button {
  margin-left: 10px;
}
.modal-mask .modal-small {
  width: 400px;
}
.modal-mask .modal-big {
  width: 600px;
}

.modal-show {
  opacity: 1;
  pointer-events: visible;
}
.modal-show .modal {
  transform: scale(1);
}

@media (max-width: 768px) {
  .modal-mask .modal {
    margin-top: 0;
    padding: 18px 20px;
  }
  .modal-mask .modal-small {
    width: 280px;
  }
  .modal-mask .modal-big {
    width: 480px;
  }
}
/**
 * Clash Dashboard
 * Style Common Variables
 */
.alert {
  padding: 15px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(44, 138, 248, 0.3);
  font-size: 13px;
  line-height: 1.6;
  text-align: justify;
  display: flex;
}
.alert .alert-icon {
  margin-right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
}
.alert .alert-icon > i {
  transform: scale(0.5);
  font-weight: bold;
}
.alert .alert-message {
  width: 100%;
  color: #fff;
}

.alert-box-success {
  background: linear-gradient(135deg, #5dae34, #67c23a);
  box-shadow: 0 2px 8px rgba(93, 174, 52, 0.3);
}
.alert-box-success .alert-icon > i {
  color: #67c23a;
}

.alert-box-info {
  background: linear-gradient(135deg, #3eb4fc, #57befc);
  box-shadow: 0 2px 8px rgba(62, 180, 252, 0.3);
}
.alert-box-info .alert-icon > i {
  color: #57befc;
}

.alert-box-warning {
  background: linear-gradient(135deg, #e39725, #e6a23c);
  box-shadow: 0 2px 8px rgba(227, 151, 37, 0.3);
}
.alert-box-warning .alert-icon > i {
  color: #e6a23c;
}

.alert-box-error {
  background: linear-gradient(135deg, #f35454, #f56c6c);
  box-shadow: 0 2px 8px rgba(243, 84, 84, 0.3);
}
.alert-box-error .alert-icon > i {
  color: #f56c6c;
}

.alert-note-success {
  background: rgba(103, 194, 58, 0.05);
  border-radius: 1px 4px 4px 1px;
  border-left: 2px solid #67c23a;
  box-shadow: 0 2px 8px rgba(93, 174, 52, 0.3);
}
.alert-note-success .alert-icon {
  background: #67c23a;
}
.alert-note-success .alert-icon > i {
  color: #fff;
}
.alert-note-success .alert-message {
  color: #3d7323;
}

.alert-note-info {
  background: rgba(87, 190, 252, 0.05);
  border-radius: 1px 4px 4px 1px;
  border-left: 2px solid #57befc;
  box-shadow: 0 2px 8px rgba(62, 180, 252, 0.3);
}
.alert-note-info .alert-icon {
  background: #57befc;
}
.alert-note-info .alert-icon > i {
  color: #fff;
}
.alert-note-info .alert-message {
  color: #0493e9;
}

.alert-note-warning {
  background: rgba(230, 162, 60, 0.05);
  border-radius: 1px 4px 4px 1px;
  border-left: 2px solid #e6a23c;
  box-shadow: 0 2px 8px rgba(227, 151, 37, 0.3);
}
.alert-note-warning .alert-icon {
  background: #e6a23c;
}
.alert-note-warning .alert-icon > i {
  color: #fff;
}
.alert-note-warning .alert-message {
  color: #a76d15;
}

.alert-note-error {
  background: rgba(245, 108, 108, 0.05);
  border-radius: 1px 4px 4px 1px;
  border-left: 2px solid #f56c6c;
  box-shadow: 0 2px 8px rgba(243, 84, 84, 0.3);
}
.alert-note-error .alert-icon {
  background: #f56c6c;
}
.alert-note-error .alert-icon > i {
  color: #fff;
}
.alert-note-error .alert-message {
  color: #eb1010;
}
/**
 * Clash Dashboard
 * Style Common Variables
 */
.button {
  outline: 0;
  padding: 0 15px;
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
  font-size: 14px;
  cursor: pointer;
  transition: all 150ms ease;
}

.button-primary {
  color: #fff;
  border: none;
  background: linear-gradient(135deg, #57befc, #2c8af8);
  box-shadow: 0 2px 8px rgba(44, 138, 248, 0.5);
}
.button-primary:hover {
  border: none;
}
.button-primary:active {
  box-shadow: 0 0 2px rgba(44, 138, 248, 0.5);
}

.button-normal {
  color: #909399;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.button-normal:hover {
  border-color: #b7c5d6;
  color: #54759a;
}
.button-normal:active {
  background: #fafafa;
  color: #54759a;
}

.button-danger {
  color: #fff;
  border: none;
  background: linear-gradient(135deg, #f56c6c, #f23c3c);
  box-shadow: 0 2px 8px rgba(242, 60, 60, 0.5);
}
.button-danger:hover {
  border: none;
}
.button-danger:active {
  box-shadow: 0 0 2px rgba(242, 60, 60, 0.5);
}

.button-success {
  color: #fff;
  border: none;
  background: linear-gradient(135deg, #67c23a, #5dae34);
  box-shadow: 0 2px 8px rgba(93, 174, 52, 0.5);
}
.button-success:hover {
  border: none;
}
.button-success:active {
  box-shadow: 0 0 2px rgba(93, 174, 52, 0.5);
}

.button-warning {
  color: #fff;
  border: none;
  background: linear-gradient(135deg, #e6a23c, #e39725);
  box-shadow: 0 2px 8px rgba(227, 151, 37, 0.5);
}
.button-warning:hover {
  border: none;
}
.button-warning:active {
  box-shadow: 0 0 2px rgba(227, 151, 37, 0.5);
}
/**
 * Clash Dashboard
 * Style Common Variables
 */
.message {
  position: fixed;
  top: 20px;
  right: 20px;
  border-radius: 4px;
  opacity: 0;
  background: #fff;
  display: flex;
  box-shadow: 0 0 20px rgba(44, 138, 248, 0.2);
  transition: all 200ms ease;
  transform: translateX(100%);
}
.message .message-icon {
  width: 36px;
  flex: 1;
  border-radius: 4px 0 0 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.message .message-icon > i {
  color: #fff;
}
.message .message-content {
  padding: 10px 15px;
  font-size: 13px;
  color: #54759a;
}

.message-info .message-icon {
  background: linear-gradient(135deg, #57befc, #2c8af8);
}

.message-success .message-icon {
  background: linear-gradient(135deg, #67c23a, #5dae34);
}

.message-warning .message-icon {
  background: linear-gradient(135deg, #e6a23c, #e39725);
}

.message-error .message-icon {
  background: linear-gradient(135deg, #f56c6c, #f23c3c);
}

.message-show {
  opacity: 1;
  transition: all 200ms ease;
  transform: translateX(0);
}
/**
 * Clash Dashboard
 * Style Common Variables
 */
.proxy-item {
  position: relative;
  width: 100%;
  height: 110px;
  padding: 10px;
  border-radius: 4px;
  background: #fff;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: default;
  box-shadow: 2px 5px 20px -3px rgba(44, 138, 248, 0.2);
  transition: all 300ms ease;
}
.proxy-item .proxy-type {
  padding: 2px 5px;
  font-size: 10px;
  color: #fff;
  border-radius: 2px;
}
.proxy-item .proxy-name {
  max-height: 30px;
  margin-top: 10px;
  color: #54759a;
  font-size: 10px;
  overflow: hidden;
  word-break: keep-all;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.proxy-item .proxy-delay {
  position: absolute;
  left: 10px;
  bottom: 13px;
  font-size: 10px;
  color: rgba(84, 117, 154, 0.8);
}
.proxy-item .proxy-editor {
  position: absolute;
  right: 10px;
  bottom: 10px;
  cursor: pointer;
  color: rgba(84, 117, 154, 0.8);
  opacity: 0;
  pointer-events: none;
  transition: all 300ms ease;
}
.proxy-item:hover {
  box-shadow: 0 14px 20px -4px rgba(84, 117, 154, 0.4);
}
.proxy-item:hover .proxy-editor {
  opacity: 1;
  pointer-events: visible;
}

.proxy-error {
  opacity: 0.5;
}
.proxy-error .proxy-type {
  background-color: #909399;
}

@media (max-width: 768px) {
  .proxy-item {
    height: 70px;
  }
  .proxy-item .proxy-delay {
    left: unset;
    bottom: unset;
    top: 0;
    right: 20px;
    height: 70px;
    line-height: 70px;
  }
}
/**
 * Clash Dashboard
 * Style Common Variables
 */
.proxy-group {
  display: flex;
  align-items: flex-start;
  font-size: 14px;
  color: #546b87;
}

.proxy-group-part {
  display: flex;
  align-items: center;
  height: 60px;
}

.proxy-group-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 20px;
  width: 120px;
}

.proxy-group-type {
  display: block;
  height: 24px;
  line-height: 24px;
  width: 100px;
  text-align: center;
  background-color: #2c8af8;
  color: #fff;
  border-radius: 3px;
}

.proxies-group-card {
  padding: 0;
}

.proxies-group-item {
  border-bottom: 1px solid #d8dee2;
}
.proxies-group-item:last-child {
  border-bottom: none;
}

.proxy-group-tags-container {
  padding: 15px 0;
}

.proxy-group-tags {
  flex: 1;
  margin-left: 30px;
}

@media (max-width: 768px) {
  .proxy-group {
    flex-direction: column;
  }

  .proxy-group-name {
    width: 140px;
  }

  .proxy-group-part {
    width: 100%;
    height: 42px;
    margin-top: 6px;
    justify-content: space-between;
  }

  .proxy-group-type {
    margin-right: 20px;
  }

  .proxy-group-tags-container {
    padding: 5px 0 10px;
  }

  .proxy-group-tags {
    margin-left: 20px;
  }
}
/**
 * Clash Dashboard
 * Style Common Variables
 */
.proxies-list {
  --item-width: calc(100% / (var(--columns) + 1));
  --gap: calc(var(--item-width) / var(--columns));
  display: flex;
  margin-right: calc(-1 * var(--gap));
  margin-top: 20px;
  padding-bottom: 100px;
  flex-wrap: wrap;
  align-content: flex-start;
  list-style: none;
}
@media (min-width: 2001px) {
  .proxies-list {
    --columns: 12;
  }
}
@media (max-width: 2000px) {
  .proxies-list {
    --columns: 10;
  }
}
@media (max-width: 1600px) {
  .proxies-list {
    --columns: 8;
  }
}
@media (max-width: 1340px) {
  .proxies-list {
    --columns: 7;
  }
}
@media (max-width: 960px) {
  .proxies-list {
    --columns: 6;
  }
}
@media (max-width: 860px) {
  .proxies-list {
    --columns: 5;
  }
}
@media (max-width: 760px) {
  .proxies-list {
    --columns: 3;
  }
}
.proxies-list > li {
  display: inline-block;
  width: var(--item-width);
  margin-right: var(--gap);
  flex-shrink: 0;
  margin-bottom: 10px;
}

.proxies-group-list {
  list-style: none;
}

.proxies-group-card {
  margin: 20px 0;
}

.proxies-container .proxies-action-icon {
  margin-left: 10px;
}

.proxies-speed-test {
  line-height: 32px;
  margin: 0 2px 0 6px;
  color: #2c8af8;
  text-shadow: 0 2px 6px rgba(44, 138, 248, 0.4);
  cursor: pointer;
}

@media (max-width: 768px) {
  .proxies-group-card {
    margin: 12px 0;
  }

  .proxies-list {
    margin-right: 0;
    padding-bottom: 20px;
    flex-wrap: unset;
    flex-direction: column;
  }
  .proxies-list > li {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }
}
.logs-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: 10px;
}

.logs-panel {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0;
  list-style: none;
  padding: 10px;
  border-radius: 2px;
  background-color: #f3f6f9;
  font-size: 12px;
  color: #73808f;
  overflow-y: auto;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}
.logs-panel li {
  line-height: 20px;
  display: inline-block;
}

.logs-panel-time {
  margin-right: 10px;
  color: #adb7c3;
}
/**
 * Clash Dashboard
 * Style Common Variables
 */
.rules-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: 10px;
  padding: 0;
}
.rules-card:focus {
  outline: none;
}
.rules-card .rules {
  flex: 1 0 auto;
}

.rule-item {
  line-height: 30px;
  padding: 5px 0;
  height: 50px;
  overflow: hidden;
  list-style: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border-bottom: 1px solid rgba(228, 234, 239, 0.5);
}
.rule-item .rule-item-row {
  padding: 5px 0;
}
.rule-item .drag-handler {
  cursor: row-resize;
  margin: 0 10px;
  display: flex;
  justify-content: center;
}
.rule-item .drag-handler > i {
  font-weight: bold;
  color: #b7c5d6;
}
.rule-item .rule-type {
  font-size: 14px;
  color: #54759a;
}
.rule-item .rule-type > i {
  margin-left: 5px;
  color: #54759a;
}
.rule-item .payload {
  font-size: 14px;
  color: #54759a;
  cursor: pointer;
}
.rule-item .rule-proxy {
  font-size: 14px;
  color: #54759a;
}
.rule-item .delete-btn {
  opacity: 0;
  transition: all 300ms ease;
}
.rule-item .delete-btn span {
  font-size: 14px;
  color: #f56c6c;
  cursor: pointer;
}
.rule-item:last-child {
  border-bottom: none;
}
.rule-item:hover .delete-btn {
  opacity: 1;
}

.rule-proxy-option {
  display: flex;
  align-items: center;
  overflow: hidden;
}
.rule-proxy-option .label {
  margin-right: 5px;
  height: 20px;
  line-height: 20px;
  padding: 0 8px;
  font-size: 10px;
  border-radius: 10px;
  color: #fff;
  background: #b7c5d6;
}
.rule-proxy-option .value {
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/**
 * Clash Dashboard
 * Style Common Variables
 */
.settings-card {
  margin-top: 10px;
  padding: 20px 0;
}
.settings-card .column {
  font-weight: bold;
  align-items: center;
}
.settings-card .value-column {
  justify-content: flex-end;
}
.settings-card .label {
  font-size: 14px;
  color: #54759a;
}
.settings-card .external-controller {
  font-size: 14px;
  color: #54759a;
  display: flex;
  justify-content: flex-end;
  font-weight: normal;
  line-height: 17px;
}
.settings-card .external-controller .modify-btn {
  color: #2c8af8;
  cursor: pointer;
}

.clash-version {
  position: relative;
  margin-top: 10px;
  padding: 20px 45px;
  display: flex;
}
.clash-version .check-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #57befc, #2c8af8);
  display: flex;
  justify-content: center;
  align-items: center;
}
.clash-version .check-icon > i {
  transform: scale(0.5);
  color: #fff;
  font-weight: bold;
}
.clash-version .version-info {
  margin-left: 10px;
  font-size: 14px;
  line-height: 24px;
  color: #54759a;
}
.clash-version .check-update-btn {
  position: absolute;
  right: 45px;
  font-size: 14px;
  line-height: 24px;
  color: #b7c5d6;
  cursor: pointer;
  transition: all 150ms ease;
}
.clash-version .check-update-btn:hover {
  color: #54759a;
}

@media (max-width: 768px) {
  .settings-card .row {
    flex-direction: column;
    padding-top: 0;
    padding-bottom: 0;
  }
  .settings-card .row > .column {
    width: 100%;
    margin: 10px 0;
  }
}
/**
 * Clash Dashboard
 * Style Common Variables
 */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 140px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.sidebar-logo {
  margin-top: 50px;
  width: 60px;
  height: 60px;
}

.sidebar-menu {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}
.sidebar-menu .item {
  display: block;
  margin-top: 18px;
}
.sidebar-menu .item > a {
  display: block;
  width: 120px;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  border-radius: 18px;
  text-align: center;
}
.sidebar-menu .item > a,
.sidebar-menu .item a:active,
.sidebar-menu .item a:visited {
  color: #909399;
  text-decoration: none;
}
.sidebar-menu .item > a.active {
  background: linear-gradient(135deg, #57befc, #2c8af8);
  color: #fff;
  box-shadow: 0 2px 8px rgba(44, 138, 248, 0.5);
}

@media (max-width: 768px) {
  .sidebar {
    width: 100%;
    height: 60px;
    flex-direction: row;
    background: #f4f5f6;
    z-index: 10;
  }

  .sidebar-logo {
    margin: 0 15px;
    width: 36px;
    height: 36px;
  }

  .sidebar-menu {
    flex: 1;
    flex-direction: row;
    justify-content: center;
    margin-top: 0;
    overflow-x: scroll;
    padding: 10px;
  }
  .sidebar-menu::-webkit-scrollbar {
    display: none;
  }
  .sidebar-menu .item {
    margin: 0 3px;
  }
  .sidebar-menu .item > a {
    width: 80px;
    height: 32px;
    line-height: 32px;
  }
  .sidebar-menu .item.no-mobile {
    display: none;
  }
}
/**
 * Clash Dashboard
 * Style Common Variables
 */
.external-controller .row {
  padding: 0;
}
.external-controller .alert {
  margin: 10px 0;
}
.external-controller .title,
.external-controller .form {
  margin: 15px 0;
}
.external-controller .title {
  margin-top: 15px;
  font-size: 14px;
  font-weight: bold;
}

@media (max-width: 768px) {
  .external-controller .row {
    flex-direction: column;
    align-items: flex-start;
  }
  .external-controller .title {
    margin: 5px 0;
  }
  .external-controller .form {
    margin: 5px 0;
  }
  .external-controller .column {
    width: 100%;
  }
  .external-controller .alert {
    display: none;
  }
}
