:root {
  --site-header-height: 50px;

  --cl-white: #fff;
  --cl-black: #202020;

  --cl-gray: #9e9e9e;
  --cl-gray-50: #fafafa;
  --cl-gray-100: #f5f5f5;
  --cl-gray-200: #eeeeee;
  --cl-gray-300: #e0e0e0;
  --cl-gray-400: #bdbdbd;
  --cl-gray-500: #9e9e9e;
  --cl-gray-600: #757575;
  --cl-gray-700: #616161;
  --cl-gray-800: #424242;
  --cl-gray-900: #212121;

  /* component color */
  --cl-default: #616161;
  --cl-default: #616161;
  --cl-default: var(--cl-gray-700);
  --cl-primary: #8c2291;
  /* --cl-primary: #417505; */
  --cl-secondary: #ed198d;
  /* --cl-secondary: #0074ff; */

  /* line-height */
  --lh-double: 2.0;
  --lh-normal: 1.5;
  --lh-small: 1.25;

  /* font size */
  --fs-1: 3.4rem;
  --fs-2: 2.8rem;
  --fs-3: 2.2rem;
  --fs-4: 1.8rem;
  --fs-5: 1.6rem;
  --fs-6: 1.4rem;
  --fs-7: 1.2rem;
  --fs-8: 1.1rem;
  --fs-9: 1.0rem;
  --fs-10: 0.8rem;

  /* font family */
  --ff-default: 'Noto Sans', 'Noto Sans Thai', 'Helvetica Neue', 'Helvetica', 'Thonburi', 'Tahoma', sans-serif !important;
  --ff-header: 'Noto Sans', 'Noto Sans Thai', 'Helvetica Neue', 'Helvetica', 'Thonburi', 'Tahoma', sans-serif !important;
  --ff-icon: 'Material Icons';
}
/* Regular */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: normal;
  src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v7/o-0IIpQlx3QUlC5A4PNr5TRASf6M7Q.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Bold */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: bold;
  src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(https://fonts.gstatic.com/s/notosans/v7/o-0NIpQlx3QUlC5A4PNjXhFVZNyBx2pqPA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Bold */
@font-face {
  font-family: 'Noto Sans Thai';
  /* src: url('fonts/subset-NotoSansThaiUI-Bold.woff.eot'); */
  src:
  url('fonts/subset-NotoSansThaiUI-Bold.woff2') format('woff2'),
  url('fonts/subset-NotoSansThaiUI-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}
/* Regular */
@font-face {
  font-family: 'Noto Sans Thai';
  src:
  url('fonts/subset-NotoSansThaiUI-Regular.woff2') format('woff2'),
  url('fonts/subset-NotoSansThaiUI-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
html {
  font-size: 62.5%;
  margin: 0;
  padding: 0;
  background: #fff;
  background: #fff;
  background: var(--cl-white);
  /* background: var(--cl-gray-100); */
}
body {
  margin: 0;
  padding: 0;
  color: #616161;
  color: #616161;
  color: var(--cl-default);
  font-family: 'Noto Sans', 'Noto Sans Thai', 'Helvetica Neue', 'Helvetica', 'Thonburi', 'Tahoma', sans-serif;
  font-family: 'Noto Sans', 'Noto Sans Thai', 'Helvetica Neue', 'Helvetica', 'Thonburi', 'Tahoma', sans-serif;
  font-family: var(--ff-default);
  line-height: 1.5;
  line-height: 1.5;
  line-height: var(--lh-normal);
  font-size: 1.4rem;
  font-size: 1.4rem;
  font-size: var(--fs-6);
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
hr {
  border-top: 1px solid #eeeeee;
  border-top: 1px solid #eeeeee;
  border-top: 1px solid var(--cl-gray-200);
  border-bottom: none;
}
h1 {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
  transform: scale(2);
}
svg text {
    font-family: 'Noto Sans', 'Noto Sans Thai', 'Helvetica Neue', 'Helvetica', 'Thonburi', 'Tahoma', sans-serif;
    font-family: 'Noto Sans', 'Noto Sans Thai', 'Helvetica Neue', 'Helvetica', 'Thonburi', 'Tahoma', sans-serif;
    font-family: var(--ff-default);
  }
a {
  text-decoration: none
}
a,
  a:visited {
  color: #8c2291;
  color: #8c2291;
  color: var(--cl-primary);
}
a:hover,
  a:active {
  color: #ed198d;
  color: #ed198d;
  color: var(--cl-secondary);
  text-decoration: underline;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
}
@media (max-width: 599px) {
  .is-hidden-mobile {
    display: none !important;
  }
}
@media (max-width: 599px) {
  .is-show-mobile {
    display: block !important;
  }
}
@media (min-width: 600px) and (max-width: 899px) {
  .is-hidden-tablet {
    display: none !important;
  }
}
.is-flex {
  display: flex !important;
}
.is-flex-vertical {
  display: flex !important;
  flex-direction: column;
}
.is-grow {
  flex-grow: 1 !important;
}
.is-not-grow {
  flex-grow: 0 !important;
}
.is-flex-center {
  justify-content: center !important;
}
.is-flex-left {
  justify-content: flex-start !important;
}
.is-flex-right {
  justify-content: flex-end !important;
}
.is-aligned-center {
  align-items: center !important;
}
.is-aligned-start {
  align-items: flex-start !important;
}
.is-aligned-end {
  align-items: flex-end !important;
}
.is-left {
  text-align: left !important;
}
.is-paddingless {
  padding: 0 !important;
}
.is-marginless {
  margin: 0 !important;
}
.level {
  display: flex;
}
.level .level-left {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-start;
  }
.level .level-right {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
  }
.row {
  display: flex;
  flex-wrap: wrap
}
.row:after {
  content: '';
  display: block;
  width: 100%;
  clear: both;
}
.row > .col {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    box-sizing: border-box;
    box-sizing: border-box;
}
.row > .col.is-1 {
  flex-basis: 8.333333%;
}
.row > .col.is-2 {
  flex-basis: 16.666667%;
}
.row > .col.is-2-10 {
  flex-basis: 20%;
}
.row > .col.is-3 {
  flex-basis: 25%;
}
.row > .col.is-4 {
  flex-basis: 33.333333%;
}
.row > .col.is-5 {
  flex-basis: 41.666667%;
}
.row > .col.is-6 {
  flex-basis: 50%;
}
.row > .col.is-7 {
  flex-basis: 58.333333%;
}
.row > .col.is-8 {
  flex-basis: 66.666667%;
}
.row > .col.is-9 {
  flex-basis: 75%;
}
@media (max-width: 599px) {
  .row:not(.is-mobile) > .col.is-1,
        .row:not(.is-mobile) > .col.is-2,
        .row:not(.is-mobile) > .col.is-2-10,
        .row:not(.is-mobile) > .col.is-3,
        .row:not(.is-mobile) > .col.is-4,
        .row:not(.is-mobile) > .col.is-5,
        .row:not(.is-mobile) > .col.is-6,
        .row:not(.is-mobile) > .col.is-7,
        .row:not(.is-mobile) > .col.is-8,
        .row:not(.is-mobile) > .col.is-9,
        .row:not(.is-mobile) > .col.is-10,
        .row:not(.is-mobile) > .col.is-11,
        .row:not(.is-mobile) > .col.is-12 {
    flex-basis: 100%;
  }
}
#app > header {
    position: relative;
    z-index: 1000;
  }
.site-header {
  height: 50px;
  height: 50px;
  height: var(--site-header-height);
  background: #fff;
  background: #fff;
  background: var(--cl-white);
  box-shadow: 0 2px 2px rgba(0, 0, 0, .1);
}
.site-header .site-logo {
    display: inline-block;
    height: 50px;
    height: 50px;
    height: var(--site-header-height);
    vertical-align: top;
    padding: 5px;
    box-sizing: border-box;
  }
.site-header .site-logo img {
      object-fit: contain;
      /* width: 100%; */
      height: 100%;
      /* background-image: url('logo@2x.png'); */
    }
@media (max-width: 599px) {
  .site-header .site-nav {
      display: none;
  }
}
.site-title {
  display: inline-block;
  line-height: 50px;
  line-height: 50px;
  line-height: var(--site-header-height);
  vertical-align: top;
  font-size: 1.8rem;
  font-size: 1.8rem;
  font-size: var(--fs-4);
  font-weight: bold;
  color: #202020;
  color: #202020;
  color: var(--cl-black);
  margin: 0 0.5rem
}
.site-title:hover {
  text-decoration: none;
}
.site-nav {
  display: inline-block;
  vertical-align: top;
}
.site-nav ul {
    /* display: inline-block; */
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    height: 50px;
    height: 50px;
    height: var(--site-header-height);
    padding: 0;
    padding-left: 20px;
    margin: 0;
  }
.site-nav ul li {
      display: inline-block;
      padding: 0 1rem;
      text-align: center;
    }
.site-update {
  display: flex;
  flex-direction: column;
  height: 50px;
  height: 50px;
  height: var(--site-header-height);
  text-align: center;
  padding: .5rem 0;
}
.site-update .label {
    font-size: 1.1rem;
    font-size: 1.1rem;
    font-size: var(--fs-8);
  }
.site-update .value {
    color: #8c2291;
    color: #8c2291;
    color: var(--cl-primary);
  }
.site-header-mobile {
  display: none;
  /* padding: 1rem; */
}
@media (max-width: 599px) {
  .site-header-mobile {
    display: block;
  }
  .site-header-mobile .site-nav {
      display: block;
  }
      .site-header-mobile .site-nav ul {
        padding: 0;
      }
}
#site-footer {
  padding-top: 8rem;
}
#site-footer .site-footer {
    color: #fff;
    color: #fff;
    color: var(--cl-white);
    background: #8c2291;
    background: #8c2291;
    background: var(--cl-primary);
  }
#site-footer .colophon {
    padding: 2rem;
  }
#site-footer .colophon a {
      color: #fff;
      color: #fff;
      color: var(--cl-white)
    }
#site-footer .colophon a:hover {
  color: currentcolor;
  text-decoration: underline;
}
.page .site-title {
    color: #202020;
    color: #202020;
    color: var(--cl-black);
    font-size: 2.2rem;
    font-size: 2.2rem;
    font-size: var(--fs-3);
    font-weight: normal;
    margin: 0;
  }
.page .page-title {
    color: #202020;
    color: #202020;
    color: var(--cl-black);
    font-size: 1.8rem;
    font-size: 1.8rem;
    font-size: var(--fs-4);
    font-weight: bold;
    margin: 0;
  }
.space {
  padding: 2rem 0
}
.space.is-small {
  padding: 1rem 0;
}
.space.is-large {
  padding: 4rem 0;
}
.container {
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 599px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
  }
}
@media (min-width: 600px) and (max-width: 899px) {
  .container {
    width: 90%;
  }
}
@media (min-width: 900px) and (max-width: 1200px) {
  .container {
    width: 90%;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1120px;
  }
}
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
  pointer-events: none;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  position: absolute;
  pointer-events: none;
}
/* Northward tooltips */
.d3-tip.n:after {
  content: "\25BC";
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
  text-align: center;
}
/* Eastward tooltips */
.d3-tip.e:after {
  content: "\25C0";
  margin: -4px 0 0 0;
  top: 50%;
  left: -8px;
}
/* Southward tooltips */
.d3-tip.s:after {
  content: "\25B2";
  margin: 0 0 1px 0;
  top: -8px;
  left: 0;
  text-align: center;
}
/* Westward tooltips */
.d3-tip.w:after {
  content: "\25B6";
  margin: -4px 0 0 -1px;
  top: 50%;
  left: 100%;
}
.selectize-control.plugin-drag_drop.multi>.selectize-input>div.ui-sortable-placeholder{visibility:visible!important;background:#f2f2f2!important;background:rgba(0,0,0,.06)!important;border:0!important;-webkit-box-shadow:inset 0 0 12px 4px #fff;box-shadow:inset 0 0 12px 4px #fff}
.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after{content:'!';visibility:hidden}
.selectize-control.plugin-drag_drop .ui-sortable-helper{-webkit-box-shadow:0 2px 5px rgba(0,0,0,.2);box-shadow:0 2px 5px rgba(0,0,0,.2)}
.selectize-dropdown-header{position:relative;padding:5px 8px;border-bottom:1px solid #d0d0d0;background:#f8f8f8;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0}
.selectize-dropdown-header-close{position:absolute;right:8px;top:50%;color:#303030;opacity:.4;margin-top:-12px;line-height:20px;font-size:20px!important}
.selectize-dropdown-header-close:hover{color:#000}
.selectize-dropdown.plugin-optgroup_columns .optgroup{border-right:1px solid #f2f2f2;border-top:0 none;float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.selectize-control.plugin-remove_button [data-value] .remove,.selectize-input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;display:inline-block}
.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child{border-right:0 none}
.selectize-dropdown.plugin-optgroup_columns .optgroup:before{display:none}
.selectize-dropdown.plugin-optgroup_columns .optgroup-header{border-top:0 none}
.selectize-control.plugin-remove_button [data-value]{position:relative;padding-right:24px!important}
.selectize-control.plugin-remove_button [data-value] .remove{z-index:1;position:absolute;top:0;right:0;bottom:0;width:17px;text-align:center;font-weight:700;font-size:12px;color:inherit;text-decoration:none;vertical-align:middle;padding:2px 0 0;border-left:1px solid #d0d0d0;-webkit-border-radius:0 2px 2px 0;-moz-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0;box-sizing:border-box}
.selectize-control.plugin-remove_button [data-value] .remove:hover{background:rgba(0,0,0,.05)}
.selectize-control.plugin-remove_button [data-value].active .remove{border-left-color:#cacaca}
.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover{background:0 0}
.selectize-control.plugin-remove_button .disabled [data-value] .remove{border-left-color:#fff}
.selectize-control.plugin-remove_button .remove-single{position:absolute;right:28px;top:6px;font-size:23px}
.selectize-control,.selectize-input{position:relative}
.selectize-dropdown,.selectize-input,.selectize-input input{color:#303030;font-family:inherit;font-size:13px;line-height:18px;-webkit-font-smoothing:inherit}
.selectize-control.single .selectize-input.input-active,.selectize-input{background:#fff;cursor:text;display:inline-block}
.selectize-input{border:1px solid #d0d0d0;padding:8px;width:100%;overflow:hidden;z-index:1;box-sizing:border-box;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.1);box-shadow:inset 0 1px 1px rgba(0,0,0,.1);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
.selectize-control.multi .selectize-input.has-items{padding:6px 8px 3px}
.selectize-input.full{background-color:#fff}
.selectize-input.disabled,.selectize-input.disabled *{cursor:default!important}
.selectize-input.focus{-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.15);box-shadow:inset 0 1px 2px rgba(0,0,0,.15)}
.selectize-input.dropdown-active{-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0}
.selectize-input>*{vertical-align:baseline;display:-moz-inline-stack;display:inline-block;zoom:1}
.selectize-control.multi .selectize-input>div{cursor:pointer;margin:0 3px 3px 0;padding:2px 6px;background:#f2f2f2;color:#303030;border:0 solid #d0d0d0}
.selectize-control.multi .selectize-input>div.active{background:#e8e8e8;color:#303030;border:0 solid #cacaca}
.selectize-control.multi .selectize-input.disabled>div,.selectize-control.multi .selectize-input.disabled>div.active{color:#7d7d7d;background:#fff;border:0 solid #fff}
.selectize-input>input{display:inline-block!important;padding:0!important;min-height:0!important;max-height:none!important;max-width:100%!important;margin:0 2px 0 0!important;text-indent:0!important;border:0!important;background:0 0!important;line-height:inherit!important;-webkit-user-select:auto!important;-webkit-box-shadow:none!important;box-shadow:none!important}
.selectize-input>input::-ms-clear{display:none}
.selectize-control.single .selectize-input:after,.selectize-input.dropdown-active::before,.selectize-input::after{content:' ';display:block}
.selectize-input>input:focus{outline:0!important}
.selectize-input::after{clear:left}
.selectize-input.dropdown-active::before{position:absolute;background:#f0f0f0;height:1px;bottom:0;left:0;right:0}
.selectize-dropdown{position:absolute;z-index:10;border:1px solid #d0d0d0;background:#fff;margin:-1px 0 0;border-top:0 none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.1);box-shadow:0 1px 3px rgba(0,0,0,.1);-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px}
.selectize-dropdown [data-selectable]{cursor:pointer;overflow:hidden}
.selectize-dropdown [data-selectable] .highlight{background:rgba(125,168,208,.2);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}
.selectize-dropdown .optgroup-header,.selectize-dropdown [data-selectable]{padding:5px 8px}
.selectize-dropdown .optgroup:first-child .optgroup-header{border-top:0 none}
.selectize-dropdown .optgroup-header{color:#303030;background:#fff;cursor:default}
.selectize-dropdown .active{background-color:#f5fafd;color:#495c68}
.selectize-dropdown .active.create{color:#495c68}
.selectize-dropdown .create{color:rgba(48,48,48,.5)}
.selectize-dropdown-content{overflow-y:auto;overflow-x:hidden;max-height:200px;-webkit-overflow-scrolling:touch}
.selectize-control.single .selectize-input,.selectize-control.single .selectize-input input{cursor:pointer}
.selectize-control.single .selectize-input.input-active,.selectize-control.single .selectize-input.input-active input{cursor:text}
.selectize-control.single .selectize-input:after{position:absolute;top:50%;right:15px;margin-top:-3px;width:0;height:0;border-style:solid;border-width:5px 5px 0;border-color:grey transparent transparent}
.selectize-control.single .selectize-input.dropdown-active:after{margin-top:-4px;border-width:0 5px 5px;border-color:transparent transparent grey}
.selectize-control.rtl.single .selectize-input:after{left:15px;right:auto}
.selectize-control.rtl .selectize-input>input{margin:0 4px 0 -2px!important}
.selectize-control .selectize-input.disabled{opacity:.5;background-color:#fafafa}
.selectize-control.plugin-drag_drop.multi>.selectize-input>div.ui-sortable-placeholder{visibility:visible!important;background:#f2f2f2!important;background:rgba(0,0,0,.06)!important;border:0!important;-webkit-box-shadow:inset 0 0 12px 4px #fff;box-shadow:inset 0 0 12px 4px #fff}
.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after{content:'!';visibility:hidden}
.selectize-control.plugin-drag_drop .ui-sortable-helper{-webkit-box-shadow:0 2px 5px rgba(0,0,0,.2);box-shadow:0 2px 5px rgba(0,0,0,.2)}
.selectize-dropdown-header{position:relative;padding:5px 8px;border-bottom:1px solid #d0d0d0;background:#f8f8f8;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0}
.selectize-dropdown-header-close{position:absolute;right:8px;top:50%;color:#303030;opacity:.4;margin-top:-12px;line-height:20px;font-size:20px!important}
.selectize-dropdown-header-close:hover{color:#000}
.selectize-dropdown.plugin-optgroup_columns .optgroup{border-right:1px solid #f2f2f2;border-top:0 none;float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.selectize-control.plugin-remove_button [data-value] .remove,.selectize-input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;display:inline-block}
.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child{border-right:0 none}
.selectize-dropdown.plugin-optgroup_columns .optgroup:before{display:none}
.selectize-dropdown.plugin-optgroup_columns .optgroup-header{border-top:0 none}
.selectize-control.plugin-remove_button [data-value]{position:relative;padding-right:24px!important}
.selectize-control.plugin-remove_button [data-value] .remove{z-index:1;position:absolute;top:0;right:0;bottom:0;width:17px;text-align:center;font-weight:700;font-size:12px;color:inherit;text-decoration:none;vertical-align:middle;padding:2px 0 0;border-left:1px solid #0073bb;-webkit-border-radius:0 2px 2px 0;-moz-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0;box-sizing:border-box}
.selectize-control.plugin-remove_button [data-value] .remove:hover{background:rgba(0,0,0,.05)}
.selectize-control.plugin-remove_button [data-value].active .remove{border-left-color:#00578d}
.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover{background:0 0}
.selectize-control.plugin-remove_button .disabled [data-value] .remove{border-left-color:#aaa}
.selectize-control.plugin-remove_button .remove-single{position:absolute;right:28px;top:6px;font-size:23px}
.selectize-control,.selectize-input{position:relative}
.selectize-dropdown,.selectize-input,.selectize-input input{color:#303030;font-family:inherit;font-size:13px;line-height:18px;-webkit-font-smoothing:inherit}
.selectize-control.single .selectize-input.input-active,.selectize-input{background:#fff;cursor:text;display:inline-block}
.selectize-input{border:1px solid #d0d0d0;padding:8px;width:100%;overflow:hidden;z-index:1;box-sizing:border-box;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.1);box-shadow:inset 0 1px 1px rgba(0,0,0,.1);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
.selectize-control.multi .selectize-input.has-items{padding:5px 8px 2px}
.selectize-input.full{background-color:#fff}
.selectize-input.disabled,.selectize-input.disabled *{cursor:default!important}
.selectize-input.focus{-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.15);box-shadow:inset 0 1px 2px rgba(0,0,0,.15)}
.selectize-input.dropdown-active{-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0}
.selectize-input>*{vertical-align:baseline;display:-moz-inline-stack;display:inline-block;zoom:1}
.selectize-control.multi .selectize-input>div{cursor:pointer;margin:0 3px 3px 0;padding:2px 6px;background:#1da7ee;color:#fff;border:1px solid #0073bb}
.selectize-control.multi .selectize-input>div.active{background:#92c836;color:#fff;border:1px solid #00578d}
.selectize-control.multi .selectize-input.disabled>div,.selectize-control.multi .selectize-input.disabled>div.active{color:#fff;background:#d2d2d2;border:1px solid #aaa}
.selectize-input>input{display:inline-block!important;padding:0!important;min-height:0!important;max-height:none!important;max-width:100%!important;margin:0 1px!important;text-indent:0!important;border:0!important;background:0 0!important;line-height:inherit!important;-webkit-user-select:auto!important;-webkit-box-shadow:none!important;box-shadow:none!important}
.selectize-input>input::-ms-clear{display:none}
.selectize-control.single .selectize-input:after,.selectize-input.dropdown-active::before,.selectize-input::after{content:' ';display:block}
.selectize-input>input:focus{outline:0!important}
.selectize-input::after{clear:left}
.selectize-input.dropdown-active::before{position:absolute;background:#f0f0f0;height:1px;bottom:0;left:0;right:0}
.selectize-dropdown{position:absolute;z-index:10;border:1px solid #d0d0d0;background:#fff;margin:-1px 0 0;border-top:0 none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.1);box-shadow:0 1px 3px rgba(0,0,0,.1);-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px}
.selectize-dropdown [data-selectable]{cursor:pointer;overflow:hidden}
.selectize-dropdown [data-selectable] .highlight{background:rgba(125,168,208,.2);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}
.selectize-dropdown .optgroup-header,.selectize-dropdown [data-selectable]{padding:5px 8px}
.selectize-dropdown .optgroup:first-child .optgroup-header{border-top:0 none}
.selectize-dropdown .optgroup-header{color:#303030;background:#fff;cursor:default;padding-top:7px;font-weight:700;font-size:.85em}
.selectize-dropdown .active{background-color:#f5fafd;color:#495c68}
.selectize-dropdown .active.create{color:#495c68}
.selectize-dropdown .create{color:rgba(48,48,48,.5)}
.selectize-dropdown-content{overflow-y:auto;overflow-x:hidden;max-height:200px;-webkit-overflow-scrolling:touch}
.selectize-control.single .selectize-input,.selectize-control.single .selectize-input input{cursor:pointer}
.selectize-control.single .selectize-input.input-active,.selectize-control.single .selectize-input.input-active input{cursor:text}
.selectize-control.single .selectize-input:after{position:absolute;top:50%;right:15px;margin-top:-3px;width:0;height:0;border-style:solid;border-width:5px 5px 0;border-color:grey transparent transparent}
.selectize-control.single .selectize-input.dropdown-active:after{margin-top:-4px;border-width:0 5px 5px;border-color:transparent transparent grey}
.selectize-control.rtl.single .selectize-input:after{left:15px;right:auto}
.selectize-control.rtl .selectize-input>input{margin:0 4px 0 -2px!important}
.selectize-control .selectize-input.disabled{opacity:.5;background-color:#fafafa}
.selectize-control.multi .selectize-input.has-items{padding-left:5px;padding-right:5px}
.selectize-control.multi .selectize-input.disabled [data-value]{color:#999;text-shadow:none;background:0 0;-webkit-box-shadow:none;box-shadow:none}
.selectize-control.multi .selectize-input.disabled [data-value],.selectize-control.multi .selectize-input.disabled [data-value] .remove{border-color:#e6e6e6}
.selectize-control.multi .selectize-input.disabled [data-value] .remove{background:0 0}
.selectize-control.multi .selectize-input [data-value]{text-shadow:0 1px 0 rgba(0,51,83,.3);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background-color:#1b9dec;background-image:-moz-linear-gradient(top,#1da7ee,#178ee9);background-image:-webkit-gradient(linear,0 0,0 100%,from(#1da7ee),to(#178ee9));background-image:-webkit-linear-gradient(top,#1da7ee,#178ee9);background-image:-o-linear-gradient(top,#1da7ee,#178ee9);background-image:linear-gradient(to bottom,#1da7ee,#178ee9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255, 29, 167, 0.93333)', endColorstr='rgba(255, 23, 142, 0.91373)', GradientType=0);-webkit-box-shadow:0 1px 0 rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.03);box-shadow:0 1px 0 rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.03)}
.selectize-control.multi .selectize-input [data-value].active{background-color:#0085d4;background-image:-moz-linear-gradient(top,#008fd8,#0075cf);background-image:-webkit-gradient(linear,0 0,0 100%,from(#008fd8),to(#0075cf));background-image:-webkit-linear-gradient(top,#008fd8,#0075cf);background-image:-o-linear-gradient(top,#008fd8,#0075cf);background-image:linear-gradient(to bottom,#008fd8,#0075cf);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255, 0, 143, 0.84706)', endColorstr='rgba(255, 0, 117, 0.81176)', GradientType=0)}
.selectize-control.single .selectize-input{-webkit-box-shadow:0 1px 0 rgba(0,0,0,.05),inset 0 1px 0 rgba(255,255,255,.8);box-shadow:0 1px 0 rgba(0,0,0,.05),inset 0 1px 0 rgba(255,255,255,.8);background-color:#f9f9f9;background-image:-moz-linear-gradient(top,#fefefe,#f2f2f2);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fefefe),to(#f2f2f2));background-image:-webkit-linear-gradient(top,#fefefe,#f2f2f2);background-image:-o-linear-gradient(top,#fefefe,#f2f2f2);background-image:linear-gradient(to bottom,#fefefe,#f2f2f2);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255, 254, 254, 0.99608)', endColorstr='rgba(255, 242, 242, 0.94902)', GradientType=0)}
.selectize-control.single .selectize-input,.selectize-dropdown.single{border-color:#b8b8b8}
.selectize-dropdown .optgroup{border-top:1px solid #f0f0f0}
.selectize-dropdown .optgroup:first-child{border-top:0 none}
:root {
  --tab-list-icon-size: 24px;
}
/* $tab-list-icon-size: 24px; */
tab-list .swiper-container, [data-is='tab-list'] .swiper-container {
    background-color: transparent;
  }
tab-list .swiper-slide, [data-is='tab-list'] .swiper-slide {
    display: inline-block;
    width: auto;
    font-size: 1.6rem;
    font-size: 1.6rem;
    font-size: var(--fs-5);
    font-weight: normal;
  }
tab-list .swiper-slide .text .pretext, [data-is='tab-list'] .swiper-slide .text .pretext {
        font-size: 0.8rem;
        display: block;
        line-height: 1;
        color: #9e9e9e;
        color: #9e9e9e;
        color: var(--cl-gray-500);
        margin: 0px 0 -2px;
      }
tab-list .swiper-slide .image-wrapper, [data-is='tab-list'] .swiper-slide .image-wrapper {
      display: inline-block;
      width: 24px;
      width: 24px;
      width: var(--tab-list-icon-size);
      height: 24px;
      height: 24px;
      height: var(--tab-list-icon-size);
      border-radius: 24px;
      border-radius: 24px;
      border-radius: var(--tab-list-icon-size);
      overflow: hidden;
      vertical-align: middle;
    }
tab-list .swiper-slide .image-wrapper img, [data-is='tab-list'] .swiper-slide .image-wrapper img {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
tab-list .swiper-slide .abbr, [data-is='tab-list'] .swiper-slide .abbr {
      /* $size: var(--tab-list-icon-size); */
      width: 24px;
      width: 24px;
      width: var(--tab-list-icon-size);
      height: 24px;
      height: 24px;
      height: var(--tab-list-icon-size);
      border-radius: 24px;
      border-radius: 24px;
      border-radius: var(--tab-list-icon-size);
      overflow: hidden;
    }
tab-list .swiper-slide .abbr abbr, [data-is='tab-list'] .swiper-slide .abbr abbr {
        display: block;
        font-size: 24px * 0.7;
        font-size: 24px * 0.7;
        font-size: var(--tab-list-icon-size) * 0.7;
        line-height: 24px;
        line-height: 24px;
        line-height: var(--tab-list-icon-size);
        /* line-height: var(--tab-list-icon-size); // font-weight: $fw-bold; */
        text-transform: uppercase;
        color: #616161;
        color: #616161;
        color: var(--cl-default);
        background-color: #eeeeee;
        background-color: #eeeeee;
        background-color: var(--cl-gray-200);
        border: none;
        width: 100%;
        height: inherit;
        text-align: center;
        text-decoration: none;
      }
tab-list .swiper-slide[data-role='staff'] .abbr abbr, [data-is='tab-list'] .swiper-slide[data-role='staff'] .abbr abbr {
          color: #fff;
          color: #fff;
          color: var(--cl-white);
          background-color: var(--cl-staff);
          background-color: var(--cl-staff);
          background-color: var(--cl-staff);
          background-color: var(--cl-staff);
        }
tab-list .swiper-slide[data-role='expert'] .abbr abbr, [data-is='tab-list'] .swiper-slide[data-role='expert'] .abbr abbr {
          color: #fff;
          color: #fff;
          color: var(--cl-white);
          background-color: var(--cl-expert);
          background-color: var(--cl-expert);
          background-color: var(--cl-expert);
          background-color: var(--cl-expert);
        }
.tab-list {
  list-style: none;
  padding: 0;
  margin: 0 0;
  font-family: 'Noto Sans', 'Noto Sans Thai', 'Helvetica Neue', 'Helvetica', 'Thonburi', 'Tahoma', sans-serif;
  font-family: 'Noto Sans', 'Noto Sans Thai', 'Helvetica Neue', 'Helvetica', 'Thonburi', 'Tahoma', sans-serif;
  font-family: var(--ff-header);
  font-weight: var(--fw-bold);
  font-weight: var(--fw-bold);
  font-weight: var(--fw-bold);
  font-weight: var(--fw-bold);
}
.tab-list li {
    display: inline-block;
  }
.tab-list li a {
      display: inline-block;
      padding: 0.5rem 1.2rem 0.2rem;
      border-bottom: 4px solid transparent;
    }
.tab-list li[data-active] a {
        border-bottom-color: #8c2291;
        border-bottom-color: #8c2291;
        border-bottom-color: var(--cl-primary);
}
tab-list {
  display: block;
  position: relative;
  margin: 1rem 0 0;
  padding: 0;
  margin: 0 0;
  font-family: 'Noto Sans', 'Noto Sans Thai', 'Helvetica Neue', 'Helvetica', 'Thonburi', 'Tahoma', sans-serif;
  font-family: 'Noto Sans', 'Noto Sans Thai', 'Helvetica Neue', 'Helvetica', 'Thonburi', 'Tahoma', sans-serif;
  font-family: var(--ff-header);
  font-weight: var(--fw-bold);
  font-weight: var(--fw-bold);
  font-weight: var(--fw-bold);
  font-weight: var(--fw-bold)
}
tab-list.scrollable:before,
    tab-list.scrollable:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  background-size: contain;
  background-repeat: repeat-y;
  z-index: 1;
}
tab-list.scrollable:before {
  background-image: url('../public/img/fade-left.html');
}
tab-list.scrollable:after {
  right: 0;
  background-image: url('../public/img/fade-right.html');
}
tab-list {

  /* .wrapper {
    // .tab-list {
    //   list-style: none;
    //   padding: 0;
    //   margin: 0 0;
    //   font-family: var(--ff-header);
    //   font-weight: var(--fw-bold);
    //   li {
    //     display: inline-block;
    //     a {
    //       display: inline-block;
    //       padding: 0.5rem 1.2rem 0.2rem;
    //     }

    //     &[data-active] {
    //       a {
    //         border-bottom: 4px solid var(--cl-primary);
    //       }
    //     }
    //   }
    // }
  } */

  /* // @include media-breakpoint-down(xs) { */

  /* @include mobile { */
}
@media (max-width: 599px) {
      tab-list .wrapper > .container {
        text-align: center;
      }
          tab-list .wrapper .tab-list li a {
            padding: 0.5rem 1rem;
          }
}
.tab-content-list .tab-content {
    display: none
  }
.tab-content-list .tab-content.active {
  display: block;
}
/* bulma */
.tabs {
  height: auto;
}
.tabs .tab .btn {
      margin-top: 0;
      margin-left: 0;
      margin-right: 0;
    }
/* .tab-bar {
  position: fixed;
  z-index: 1000;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid var(--cl-lightgray);
  .tabs {
    .tab {
      min-width: 60px;
      a {
        color: var(--cl-gray);
        .icon {
          line-height: 48px;
        }
        &.active {
          color: var(--cl-primary);
        }
      }
    }
    .indicator {
      top: 0;
      bottom: auto;
    }
  }
} */
.page-dashboard {
  display: block;
  overflow: auto;
}
.page-dashboard .is-white {
    background-color: #fff;
    background-color: #fff;
    background-color: var(--cl-white);
  }
.page-dashboard .section-title {
    color: #8c2291;
    color: #8c2291;
    color: var(--cl-primary);
    font-size: 2.8rem;
    font-size: 2.8rem;
    font-size: var(--fs-2);
    font-weight: lighter;
    line-height: 1.25;
    line-height: 1.25;
    line-height: var(--lh-small);
    margin-bottom: 0;
  }
.page-dashboard .description {
    /* color: var(--cl-primary); */
    font-size: 1.4rem;
    font-size: 1.4rem;
    font-size: var(--fs-6);
  }
.page-dashboard .hero-one {
    background-color: #dddddd;
    position: relative
  }
.page-dashboard .hero-one.bg {
  background-size: cover;
  background-position: center center;
}
.page-dashboard .hero-one .hero-text {
      position: relative;
      z-index: 1;
      padding: 8rem 4rem;
      pointer-events: none;
}
.page-dashboard .hero-one .hero-title {
      color: #fff;
      color: #fff;
      color: var(--cl-white);
      font-size: 4.8rem;
      font-weight: bold;
      line-height: 1.25;
      line-height: 1.25;
      line-height: var(--lh-small);
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
      margin: 0;
}
.page-dashboard .site-update {
    height: initial;
    height: auto;
  }
.page-dashboard .metric,
  .page-dashboard .card {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    overflow: hidden;
    margin: 0.5rem;
    /* margin-bottom: 2rem; */
    padding: 1rem;
    background: #fff;
    background: #fff;
    background: var(--cl-white);
  }
/* border-radius: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); */
.page-dashboard .metric a:hover, .page-dashboard .card a:hover {
  color: #ed198d;
  color: #ed198d;
  color: var(--cl-secondary);
  text-decoration: none;
}
.page-dashboard .metric .label, .page-dashboard .card .label {
      flex-grow: 1;
      color: #202020;
      color: #202020;
      color: var(--cl-black);
      font-size: 1.4rem;
      font-size: 1.4rem;
      font-size: var(--fs-6);
      text-align: center;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: pre;
      white-space: pre-wrap
    }
.page-dashboard .metric .label.is-large, .page-dashboard .card .label.is-large {
  font-size: 1.8rem;
  font-size: 1.8rem;
  font-size: var(--fs-4);
}
.page-dashboard .metric .value, .page-dashboard .card .value {
      flex-grow: 0;
      color: #ed198d;
      color: #ed198d;
      color: var(--cl-secondary);
      font-size: 1.6rem;
      font-size: 1.6rem;
      font-size: var(--fs-5);
      line-height: 1.25;
      line-height: 1.25;
      line-height: var(--lh-small);
      text-align: center;
      /* height: 100px; */
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin-bottom: 1rem
    }
.page-dashboard .metric .value.is-number, .page-dashboard .card .value.is-number {
  font-size: 3.6rem;

  /* font-size: var(--fs-1); */
  font-weight: lighter;

  /* height: 70px; */
}
.page-dashboard .metric .value.is-number.is-large, .page-dashboard .card .value.is-number.is-large {
  font-size: 5rem;
}
.page-dashboard .metric .value .small, .page-dashboard .card .value .small {
        font-size: 1.8rem;
        font-size: 1.8rem;
        font-size: var(--fs-4);
        font-weight: normal;
}
.page-dashboard .metric .small, .page-dashboard .card .small {
      flex-grow: 1;
      color: #8c2291;
      color: #8c2291;
      color: var(--cl-primary);
    }
/* line-height: 1; */
.page-dashboard .metric .small small, .page-dashboard .card .small small {
        font-size: 1.2rem;
        font-size: 1.2rem;
        font-size: var(--fs-7);
      }
.page-dashboard .card {
    background: #fff;
    background: #fff;
    background: var(--cl-white);
    border-radius: 1rem;
    box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.0),
      0 2px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out
  }
.page-dashboard .card:hover {
  transform: scale(1.02);
  box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.1),
        0 6px 12px 2px rgba(0, 0, 0, 0.1);
  z-index: 100;

  /* transform: translate(0, -1rem); */
}
.page-dashboard .card a:hover {
  color: #ed198d;
  color: #ed198d;
  color: var(--cl-secondary);
  text-decoration: none;
}
.page-dashboard .card .card-title {
      position: relative;
      color: #202020;
      color: #202020;
      color: var(--cl-black);
      font-size: 2.2rem;
      font-size: 2.2rem;
      font-size: var(--fs-3);
      text-align: left;
      height: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;
      flex-direction: column;
}
.page-dashboard .card .bg {
      position: absolute;
      width: 100%;
      height: 100%;
      margin: -1rem;
      background-repeat: no-repeat;
}
.page-dashboard .card .bg:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0) 60%,
          rgba(255, 255, 255, 1) 95%
          );
}
.page-dashboard .card .bg.is-relationship {
  height: 120px;
  box-sizing: border-box;
  background-image: url('relationship.png');
  background-size: 120%;
  background-position: -70% 40%;
  opacity: 0.8;
}
.page-dashboard .card .bg.is-map {
  height: 120px;
  box-sizing: border-box;
  background-image: url('map.png');
  background-size: 160%;
  background-position: 40% 30%;
  opacity: 0.8;
}
.page-dashboard #vis-section {
    padding: 4rem 0;
  }
.page-dashboard #relationship-card,
  .page-dashboard #map-card {
    height: 120px;
  }
.page-dashboard .metric-group {
    height: auto;
  }
@media (max-width: 599px) {
  .page-dashboard #relationship-card,
  .page-dashboard #map-card {
    height: 160px;
  }
}
.page-dashboard #role-pie {
    padding: 2rem 0;
    margin: 0 auto;
}
.page-dashboard .arc text {
      /* font: 10px sans-serif; */
      font-size: 1.2rem;
      font-size: 1.2rem;
      font-size: var(--fs-7);
      text-anchor: middle;
    }
.page-dashboard .arc path {
      stroke: #ffffff;
    }
.page-dashboard .arc:nth-child(1) text, .page-dashboard .arc:nth-child(2) text {
        fill: #ffffff;
}
.page-dashboard .arc:nth-child(5) text {
        text-anchor: end;
}
.page-dashboard #bar-chart-tab {
    display: block;
}
.page-dashboard #bar-chart-tab .tabs .swiper-wrapper {
        padding: 0;
      }
.page-dashboard #bar-chart-tab .tabs .swiper-wrapper .swiper-slide {
          margin-right: 1rem;
        }
.page-dashboard #bar-chart-tab .tabs .swiper-wrapper .swiper-slide a {
            padding: 0.5rem 1rem;
            border-radius: 1rem;
            background-color: #f5f5f5;
            background-color: #f5f5f5;
            background-color: var(--cl-gray-100);
            text-decoration: none;
          }
.page-dashboard #bar-chart-tab .tabs .swiper-wrapper .swiper-slide.is-active a {
              color: #fff;
              color: #fff;
              color: var(--cl-white);
              background-color: #ed198d;
              background-color: #ed198d;
              background-color: var(--cl-secondary);
}
.page-dashboard #bar-chart-content svg text {
        fill: #616161;
        fill: #616161;
        fill: var(--cl-default);
        font-size: 1.2rem;
        font-size: 1.2rem;
        font-size: var(--fs-7);
      }
.page-dashboard #bar-chart-content svg text.bar-text {
        fill: #fff;
        fill: #fff;
        fill: var(--cl-white);
        text-anchor: end
      }
.page-dashboard #bar-chart-content svg text.bar-text.is-text-outside {
  fill: #202020;
  fill: #202020;
  fill: var(--cl-black);
  text-anchor: start;
}
.page-dashboard #bar-chart-content svg g.axis path,
        .page-dashboard #bar-chart-content svg g.axis line {
          stroke: #bdbdbd;
          stroke: #bdbdbd;
          stroke: var(--cl-gray-400);
        }
.page-dashboard #bar-chart-content svg g.axis text {
          fill: #616161;
          fill: #616161;
          fill: var(--cl-default);
        }
.page-dashboard #hero-effect {
    width: 60%;
    margin-left: auto;
}
.page-dashboard #hero-effect canvas {
      display: block;
      vertical-align: bottom;
    }
/* ---- particles.js container ---- */
.page-dashboard #hero-effect #particles-js {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: transparent;
      background-image: url("");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50% 50%;
    }
/* ---- stats.js ---- */
.page-dashboard #hero-effect .count-particles {
      background: #000022;
      position: absolute;
      top: 48px;
      left: 0;
      width: 80px;
      color: #13E8E9;
      font-size: .8em;
      text-align: left;
      text-indent: 4px;
      line-height: 14px;
      padding-bottom: 2px;
      font-family: Helvetica, Arial, sans-serif;
      font-weight: bold;
    }
.page-dashboard #hero-effect .js-count-particles {
      font-size: 1.1em;
    }
.page-dashboard #hero-effect #stats,
    .page-dashboard #hero-effect .count-particles {
      -webkit-user-select: none;
    }
.page-dashboard #hero-effect #stats {
      border-radius: 3px 3px 0 0;
      overflow: hidden;
    }
.page-dashboard #hero-effect .count-particles {
      border-radius: 0 0 3px 3px;
    }
body.page-relationship-html #site-footer {
    display: none;
  }
relationship-page {
  display: block;
  overflow: auto;

  /* div.tooltip {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    padding: 10px;
    background: whitesmoke;
    border: 0px;
  }
  div.tooltip table {
    width: 100%;
    table-layout: fixed;
    overflow-x: hidden;
    overflow-y: auto;
    text-overflow: ellipsis;
  }
  div.tooltip td {
    padding-top: 0.5em;
  } */
}
relationship-page #chart {
    font-size: 10px;
    line-height: 10px;
  }
relationship-page #chart > svg {
      display: block;
      margin: 0 0;
    }
relationship-page #chart > svg text {
        fill: #616161;
        fill: #616161;
        fill: var(--cl-default);
        font-size: 1.2rem;
        font-size: 1.2rem;
        font-size: var(--fs-7)
      }
relationship-page #chart > svg text.section-title {
  font-size: 1.6rem;
  font-size: 1.6rem;
  font-size: var(--fs-5);
  font-weight: bold;
}
relationship-page #chart > svg .source path.chord {
          transition: all 0.8s ease-out
        }
relationship-page #chart > svg .source path.chord:hover {
  transform: scale(0.97);
  transition-duration: 0.2s;
}
relationship-page #chart > svg .source path.chord.is-selected {
  transform: scale(1.03);
}
relationship-page #chart > svg .target path.chord {
          transition: all 0.8s ease-out
        }
relationship-page #chart > svg .target path.chord:hover {
  transform: scale(1.01);
  transition-duration: 0.2s;
}
relationship-page #chart > svg .target path.chord.is-selected {
  transform: scale(0.99);
}
relationship-page #chart > svg .legend-color {
        stroke: #757575;
        stroke: #757575;
        stroke: var(--cl-gray-600);
        stroke-width: 0.5;
      }
relationship-page .ribbons {
    fill: #ccc;
    fill-opacity: 0.1;
  }
relationship-page #ui {
    background-color: #f5f5f5;
    background-color: #f5f5f5;
    background-color: var(--cl-gray-100);
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 50px;
    right: 50px;
    width: 300px;
    height: 100%;
    height: calc(100vh - 50px);
    overflow: auto;
  }
relationship-page #ui .selectize-control.single .selectize-input {
          background: #fff;
          background: #fff;
          background: var(--cl-white);
          border-color: transparent;
          box-shadow: none;
          padding: 20px 8px;
          font-size: 1.4rem;
          font-size: 1.4rem;
          font-size: var(--fs-6);
}
relationship-page #ui .selectize-control.single .selectize-input:after {
  display: none;
}
relationship-page #ui .selectize-control.single .selectize-input:before {
  content: '';
  position: static;
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 0.5rem;
  vertical-align: middle;
  opacity: 0.4;
  background-color: transparent;
  background-image: url('ic_search_black_24px.svg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
relationship-page #ui .selectize-control.single .selectize-input.input-active {
  border-color: #bdbdbd;
  border-color: #bdbdbd;
  border-color: var(--cl-gray-400);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
relationship-page #ui .selectize-control.single .selectize-input.dropdown-active:before {
  opacity: 1;
}
relationship-page #ui .selectize-control.single .selectize-input.has-items:before {
  display: none;
}
relationship-page #ui .selectize-control .select-choice i {
          display: inline-block;
          width: 16px;
          height: 16px;
          border: 1px solid #757575;
          border: 1px solid #757575;
          border: 1px solid var(--cl-gray-600);
          box-sizing: border-box;
          vertical-align: middle;
          margin-right: 0.5rem;
        }
relationship-page #ui .selectize-control .select-choice h2,
        relationship-page #ui .selectize-control .select-choice h3,
        relationship-page #ui .selectize-control .select-choice h5 {
          margin-top: 0;
          margin-bottom: 0px;
          line-height: 1.25;
          line-height: 1.25;
          line-height: var(--lh-small);
        }
relationship-page #ui .selectize-control .select-choice h2 {
          font-size: 1.8rem;
          font-size: 1.8rem;
          font-size: var(--fs-4);
          font-weight: normal;
        }
relationship-page #ui .selectize-control .select-choice h3 {
          font-size: 1.6rem;
          font-size: 1.6rem;
          font-size: var(--fs-5);
        }
relationship-page #ui .selectize-control .select-choice h5 {
          color: #757575;
          color: #757575;
          color: var(--cl-gray-600);
          font-size: 1.2rem;
          font-size: 1.2rem;
          font-size: var(--fs-7);
          font-weight: normal;
        }
relationship-page #dropdown-by-org {
    padding: 0;
  }
relationship-page #detail-by-org.is-hidden, relationship-page #detail-by-prop.is-hidden {
  display: none;
}
relationship-page #detail-by-org .header, relationship-page #detail-by-prop .header {
      position: relative;
      padding: 30px 20px 20px;
      background-color: #fff;
      background-color: #fff;
      background-color: var(--cl-white);
}
relationship-page #detail-by-org .header .color-band, relationship-page #detail-by-prop .header .color-band {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 6px;
        height: 100%;
      }
relationship-page #detail-by-org .header .org-detail, relationship-page #detail-by-prop .header .org-detail {
        padding: 1rem 0 0;
        line-height: 1.4;
      }
relationship-page #detail-by-org .detail, relationship-page #detail-by-prop .detail {
      position: relative;
      padding: 10px 20px;
      /* margin: 20px 10px; */
      width: 100%;
      font-size: 1.2rem;
      font-size: 1.2rem;
      font-size: var(--fs-7);
      line-height: 2.0;
      line-height: 2.0;
      line-height: var(--lh-double);
}
relationship-page #detail-by-org .detail .arrow, relationship-page #detail-by-prop .detail .arrow {
        position: absolute;
        top: -12px;
        left: 30px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 12px 12px 12px;
        border-color: transparent transparent #f5f5f5 transparent;
        border-color: transparent transparent #f5f5f5 transparent;
        border-color: transparent transparent var(--cl-gray-100) transparent;
      }
relationship-page #detail-by-org h2,
    relationship-page #detail-by-org h3,
    relationship-page #detail-by-org h4,
    relationship-page #detail-by-org h5,
    relationship-page #detail-by-prop h2,
    relationship-page #detail-by-prop h3,
    relationship-page #detail-by-prop h4,
    relationship-page #detail-by-prop h5 {
      margin-top: 0;
      margin-bottom: 0px;
      line-height: 1.25;
      line-height: 1.25;
      line-height: var(--lh-small);
}
relationship-page #detail-by-org h2 i, relationship-page #detail-by-org h3 i, relationship-page #detail-by-org h4 i, relationship-page #detail-by-org h5 i, relationship-page #detail-by-prop h2 i, relationship-page #detail-by-prop h3 i, relationship-page #detail-by-prop h4 i, relationship-page #detail-by-prop h5 i {
        display: inline-block;
        width: 16px;
        height: 16px;
        border: 1px solid #757575;
        border: 1px solid #757575;
        border: 1px solid var(--cl-gray-600);
        box-sizing: border-box;
        vertical-align: middle;
        margin-right: 0.5rem;
        display: none;
      }
relationship-page #detail-by-org h2, relationship-page #detail-by-prop h2 {
      font-size: 2.2rem;
      font-size: 2.2rem;
      font-size: var(--fs-3);
}
relationship-page #detail-by-org h2 i, relationship-page #detail-by-prop h2 i {
        display: none;
      }
relationship-page #detail-by-org h3, relationship-page #detail-by-prop h3 {
      color: #202020;
      color: #202020;
      color: var(--cl-black);
      font-size: 1.6rem;
      font-size: 1.6rem;
      font-size: var(--fs-5);
      margin-bottom: 1rem;
}
relationship-page #detail-by-org h4, relationship-page #detail-by-prop h4 {
      font-size: 1.4rem;
      font-size: 1.4rem;
      font-size: var(--fs-6);
      font-weight: bold;
      margin-bottom: 1rem;
}
relationship-page #detail-by-org h5, relationship-page #detail-by-prop h5 {
      font-size: 1.4rem;
      font-size: 1.4rem;
      font-size: var(--fs-6);
      font-weight: normal;
}
relationship-page #detail-by-org ul, relationship-page #detail-by-prop ul {
      position: relative;
      padding-left: 0;
      list-style: square;
      margin: 0.5rem 0 2rem;
}
relationship-page #detail-by-org ul > li, relationship-page #detail-by-prop ul > li {
        display: block;
        list-style: none
      }
relationship-page #detail-by-org ul > li.color-band, relationship-page #detail-by-prop ul > li.color-band {
  position: absolute;
  display: block;
  top: 0;
  left: -20px;
  width: 4px;
  height: 100%;
}
body.page-map-html #site-footer {
    display: none;
    /* position: absolute;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 0;
    min-width: 260px; */
  }
body.page-map-html .tippy-tooltip {
    font-size: 1.6rem;
    font-size: 1.6rem;
    font-size: var(--fs-5);
  }
map-page {
  display: block;
  overflow: auto;
}
map-page .page-title {
    display: inline-block;
  }
map-page .ui-container {
    position: absolute;
    z-index: 500;
    width: auto;
    top: 50px;
    top: 50px;
    top: var(--site-header-height);
    bottom: 0;
    left: 20px;
    right: 20px;
    pointer-events: none;
  }
map-page .help-pane,
  map-page .org-pane {
    position: absolute;
    top: 0;
    left: 0;
    width: 380px;
    padding: 10px;
    border-radius: 4px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 2px 2px rgba(0, 0, 0, .1);
    pointer-events: auto;

    color: #616161;

    color: #616161;

    color: var(--cl-default);
    font-size: 1.2rem;
    font-size: 1.2rem;
    font-size: var(--fs-7);
  }
map-page .help-pane h3, map-page .org-pane h3 {
      margin: 0;
    }
map-page .help-pane .section-title, map-page .org-pane .section-title {
      font-size: 1.6rem;
      font-size: 1.6rem;
      font-size: var(--fs-5);
      font-weight: bold;
      margin-bottom: 1rem;
    }
map-page .help-pane {
    top: 60px;
  }
map-page .help-pane .legend-list {
      padding: 0;
      padding-left: 2rem;
      margin: 0.5rem 0;
    }
map-page .help-pane .legend-list .legend-item {
        display: block;
        list-style: none;
      }
map-page .help-pane .legend-list .legend-item .icon {
          display: inline-block;
          margin-right: 0.5rem;
        }
map-page .org-pane {
    top: 200px;
  }
map-page .filter-pane {
    position: absolute;
    top: 0;
    right: 300px;
    width: 200px;
    z-index: 201;
    pointer-events: auto;
    border-radius: 4px;
    box-sizing: border-box;
  }
map-page .filter-pane .toolbar {
      position: relative;
      padding: 15px 20px;
    }
map-page .filter-pane .select .selectize-control.single .selectize-input {
            background: #fff;
            background: #fff;
            background: var(--cl-white);
            border-color: #bdbdbd;
            border-color: #bdbdbd;
            border-color: var(--cl-gray-400);
            box-shadow: none;
}
map-page .filter-pane .select .selectize-control.single .selectize-input.input-active {
  border-color: #bdbdbd;
  border-color: #bdbdbd;
  border-color: var(--cl-gray-400);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
map-page .filter-pane .select .selectize-control.single .selectize-input .icon.search-icon {
              display: inline-block;
              width: 24px;
              height: 24px;
              margin-right: 0.5rem;
              vertical-align: middle;
              background-image: url('ic_search_black_24px.svg');
              background-size: cover;
              background-position: center center;
              background-repeat: no-repeat;
}
map-page .filter-pane .select .selectize-control.single .selectize-dropdown .active {
              color: #8c2291;
              color: #8c2291;
              color: var(--cl-primary);
              background-color: #fff9fc;
            }
map-page #ui {
    background-color: rgba(245, 245, 245, 0.7);
    /* background-color: color(var(--cl-gray-100) a(70%)); */
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    height: calc(100vh - 50px);
    overflow: auto;
    pointer-events: none;
  }
map-page #ui #dropdown-by-school {
      pointer-events: auto;
    }
map-page #ui .selectize-control.single .selectize-input {
          background: #fff;
          background: #fff;
          background: var(--cl-white);
          border-color: transparent;
          box-shadow: none;
          padding: 20px 8px;
          font-size: 1.4rem;
          font-size: 1.4rem;
          font-size: var(--fs-6);
}
map-page #ui .selectize-control.single .selectize-input:after {
  display: none;
}
map-page #ui .selectize-control.single .selectize-input:before {
  content: '';
  position: static;
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 0.5rem;
  vertical-align: middle;
  opacity: 0.4;
  background-color: transparent;
  background-image: url('ic_search_black_24px.svg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
map-page #ui .selectize-control.single .selectize-input.input-active {
  border-color: #bdbdbd;
  border-color: #bdbdbd;
  border-color: var(--cl-gray-400);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
map-page #ui .selectize-control.single .selectize-input.dropdown-active:before {
  opacity: 1;
}
map-page #ui .selectize-control.single .selectize-input.has-items:before {
  display: none;
}
map-page #ui .selectize-control.single .selectize-dropdown small {
            font-size: 1.1rem;
            font-size: 1.1rem;
            font-size: var(--fs-8);
            color: #8c2291;
            color: #8c2291;
            color: var(--cl-primary);
          }
map-page #ui .selectize-control .select-choice i {
          display: inline-block;
          width: 16px;
          height: 16px;
          border: 1px solid #757575;
          border: 1px solid #757575;
          border: 1px solid var(--cl-gray-600);
          box-sizing: border-box;
          vertical-align: middle;
          margin-right: 0.5rem;
        }
map-page #ui .selectize-control .select-choice h2,
        map-page #ui .selectize-control .select-choice h3,
        map-page #ui .selectize-control .select-choice h5 {
          margin-top: 0;
          margin-bottom: 0px;
          line-height: 1.25;
          line-height: 1.25;
          line-height: var(--lh-small);
        }
map-page #ui .selectize-control .select-choice h2 {
          font-size: 1.8rem;
          font-size: 1.8rem;
          font-size: var(--fs-4);
          font-weight: normal;
        }
map-page #ui .selectize-control .select-choice h3 {
          font-size: 1.6rem;
          font-size: 1.6rem;
          font-size: var(--fs-5);
        }
map-page #ui .selectize-control .select-choice h5 {
          color: #757575;
          color: #757575;
          color: var(--cl-gray-600);
          font-size: 1.2rem;
          font-size: 1.2rem;
          font-size: var(--fs-7);
          font-weight: normal;
        }
map-page #ui h2,
    map-page #ui h3,
    map-page #ui h4,
    map-page #ui h5 {
      margin-top: 0;
      margin-bottom: 0px;
      line-height: 1.25;
      line-height: 1.25;
      line-height: var(--lh-small);
    }
map-page #ui h2 i, map-page #ui h3 i, map-page #ui h4 i, map-page #ui h5 i {
        display: inline-block;
        width: 16px;
        height: 16px;
        border: 1px solid #757575;
        border: 1px solid #757575;
        border: 1px solid var(--cl-gray-600);
        box-sizing: border-box;
        vertical-align: middle;
        margin-right: 0.5rem;
        display: none;
      }
map-page #ui h2 {
      font-size: 2.2rem;
      font-size: 2.2rem;
      font-size: var(--fs-3);
    }
map-page #ui h2 i {
        display: none;
      }
map-page #ui h3 {
      color: #202020;
      color: #202020;
      color: var(--cl-black);
      font-size: 1.6rem;
      font-size: 1.6rem;
      font-size: var(--fs-5);
      margin-bottom: 1rem;
    }
map-page #ui h4 {
      font-size: 1.4rem;
      font-size: 1.4rem;
      font-size: var(--fs-6);
      font-weight: bold;
      margin-bottom: 1rem;
    }
map-page #ui h5 {
      font-size: 1.4rem;
      font-size: 1.4rem;
      font-size: var(--fs-6);
      font-weight: normal;
    }
map-page #ui .school-status {
      margin-top: 20px;
    }
map-page #ui .school-info {
      font-size: 1.2rem;
      font-size: 1.2rem;
      font-size: var(--fs-7);
      line-height: 1.4;
      pointer-events: auto;
    }
map-page #ui .school-info .school-id {
        font-size: 1.1rem;
        font-size: 1.1rem;
        font-size: var(--fs-8);
        color: #202020;
        color: #202020;
        color: var(--cl-black);
        /* font-weight: bold; */
      }
map-page #ui .school-info .name {
        /* color: var(--cl-primary); */
        font-size: 1.8rem;
        font-size: 1.8rem;
        font-size: var(--fs-4);
        font-weight: bold;
        line-height: 1.2;
      }
map-page #ui .school-info label {
        display: block;
        margin-top: 4px;
        color: #202020;
        color: #202020;
        color: var(--cl-black);
        font-size: 1.4rem;
        font-size: 1.4rem;
        font-size: var(--fs-6);
        font-weight: bold;
        line-height: 1.5;
        line-height: 1.5;
        line-height: var(--lh-normal);
      }
map-page #ui .school-info a {
        display: block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: pre;
      }
map-page #ui .header {
      position: relative;
      padding: 10px 20px;
      background-color: #fff;
      background-color: #fff;
      background-color: var(--cl-white);
    }
map-page #ui .header .color-band {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 6px;
        height: 100%;
      }
map-page #ui .detail {
      position: relative;
      padding: 10px 20px;
      /* margin: 20px 10px; */
      width: 100%;
      font-size: 1.2rem;
      font-size: 1.2rem;
      font-size: var(--fs-7);
    }
/* line-height: var(--lh-double); */
map-page #ui .detail .arrow {
        position: absolute;
        top: -12px;
        left: 30px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 12px 12px 12px;
        border-color: transparent transparent #f5f5f5 transparent;
        border-color: transparent transparent #f5f5f5 transparent;
        border-color: transparent transparent var(--cl-gray-100) transparent;
      }
map-page .cols {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
map-page .cols .col {
      flex: 1 1 0
    }
map-page .cols .col.is-1-2 {
  flex-basis: 50%;
}
map-page .cols .col.is-1-4 {
  flex-basis: 25%;
}
map-page .cols .col.is-3-4 {
  flex-basis: 75%;
}
map-page .org-status {
    margin-bottom: 1rem;
  }
map-page .org-list {
    display: flex;
    flex-wrap: wrap;
    position: relative;
  }
map-page .org-list .org-group {
      flex: 0 0 180px;
    }
map-page .org-list .org-group .org-item {
        display: block;
        /* width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: pre; */
        font-size: 1.2rem;
        font-size: 1.2rem;
        font-size: var(--fs-7);
        line-height: 1.6rem;
        padding: .2rem .8rem;
        margin-bottom: .2rem;
        cursor: pointer;
        border-radius: .4rem;
        background-color: none;
        box-sizing: border-box;

        transition: font-size .5s ease-out,
          color .2s ease-out,
          background-color .2s ease-out
      }
map-page .org-list .org-group .org-item:focus {
  outline: none;
  color: #8c2291;
  color: #8c2291;
  color: var(--cl-primary);
  background: #bdbdbd;
  background: #bdbdbd;
  background: var(--cl-gray-400);
}
map-page .org-list .org-group .org-item .badge {
          display: inline-block;
          color: #fff;
          color: #fff;
          color: var(--cl-white);
          background: #8c2291;
          background: #8c2291;
          background: var(--cl-primary);
          font-size: 0.8rem;
          font-size: 0.8rem;
          font-size: var(--fs-10);
          font-weight: bold;
          border-radius: 20px;
          width: 16px;
          height: 16px;
          vertical-align: top;
          text-align: center;
          box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .2);
}
map-page .org-list .org-group .org-item.selected .badge {
            color: #8c2291;
            color: #8c2291;
            color: var(--cl-primary);
            color: #ed198d;
            color: #ed198d;
            color: var(--cl-secondary);
            background: #fff;
            background: #fff;
            background: var(--cl-white);
}
map-page .org-list .org-group .org-item.focus .badge {
            color: #ed198d;
            color: #ed198d;
            color: var(--cl-secondary);
            background: #fff;
            background: #fff;
            background: var(--cl-white);
}
map-page .org-list .org-group .org-item .text {
          display: inline-block;
          width: 140px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: pre;
          vertical-align: top;
          margin-right: 5px;
}
map-page .org-list .org-group .org-item:hover {
  background-color: #eeeeee;
  background-color: #eeeeee;
  background-color: var(--cl-gray-200);
}
map-page .org-list .org-group .org-item.selected {

  /* font-size: var(--fs-6); */
  color: #fff;
  color: #fff;
  color: var(--cl-white);

  /* background-color: var(--cl-primary); */
  background-color: #ed198d;
  background-color: #ed198d;
  background-color: var(--cl-secondary);
}
map-page .org-list .org-group .org-item.focus {

  /* font-size: var(--fs-6); */
  color: #fff;
  color: #fff;
  color: var(--cl-white);
  background-color: #ed198d;
  background-color: #ed198d;
  background-color: var(--cl-secondary);
}
map-page .org-list .org-group .org-item.unfocus {
  color: #bdbdbd;
  color: #bdbdbd;
  color: var(--cl-gray-400);
}
map-page .map-container {
    /* width: 100%;
    min-width: 320px;
    max-width: 500px;
    height: 600px; */
    width: 100vw;
    height: calc(100vh - 50px);
    height: calc(100vh - 50px);
    height: calc(100vh - var(--site-header-height));
  }
map-page #map-box {
    width: 100%;
    height: 100%;
    background-color: #eeeeee;
    background-color: #eeeeee;
    background-color: var(--cl-gray-200);
    /* .leaflet-marker-icon {
      &.is-focus {
      }
      &.is-unfocus {
        opacity: 0.3;
      }

      &.is-hidden {
        display: none;
      }

    } */
  }
/* .leaflet-div-icon { */
map-page #map-box .leaflet-marker-icon {
      /* position: relative; */
      background: none;
      border: none;
    }
map-page #map-box .leaflet-marker-icon img {
        transition: opacity 0.2s ease-out,
          transform 0.2s ease-out;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.8;
      }
map-page #map-box .leaflet-marker-icon.is-large:after {
  content: attr(data-count);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  color: #fff;
  color: #fff;
  color: var(--cl-white);
  line-height: 16px;
  font-weight: bold;
  font-size: 11px;
  text-align: center;
}
map-page #map-box .leaflet-marker-icon.is-large[data-count='1']:after, map-page #map-box .leaflet-marker-icon.is-large.is-unfocus:after {
  content: '';
}
map-page #map-box .leaflet-marker-icon.is-large.is-selected:after {
  content: '';
}
map-page #map-box .leaflet-marker-icon .marker:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        display: block;
        width: 4px;
        height: 4px;
        background-image: url('dot-focus%402x.png');
        background-size: contain;
        transition: opacity 0.2s ease-out,
          transform 0.2s ease-out;
        transform: translate(-50%, 0)scale(0.5);
        opacity: 0;
}
map-page #map-box .leaflet-marker-icon.is-focus img {
          transform: scale(2);
          opacity: 0;
}
map-page #map-box .leaflet-marker-icon.is-focus .marker:before {
          transform: translate(-50%, 0)scale(2);
          opacity: 1;
}
map-page #map-box .leaflet-marker-icon.is-focus.is-large .marker:before {
            transform: translate(-50%, 0)scale(4);
}
map-page #map-box .leaflet-marker-icon.is-unfocus {
  opacity: 0.8;
}
map-page #map-box .leaflet-marker-icon.is-unfocus img {
          transform: scale(0.5);
}
map-page #map-box .leaflet-marker-icon.is-unfocus.is-large img {
            transform: scale(2);
}
map-page #map-box .leaflet-marker-icon.is-large img {
          transform: scale(4);
}
map-page #map-box .leaflet-marker-icon.is-hidden {
  display: none;
}
map-page #map-box .leaflet-marker-icon.is-selected img {
          transform: scale(2);
          opacity: 0;
}
map-page #map-box .leaflet-marker-icon.is-selected .marker:before {
          transform: translate(-50%, 0)scale(3);
          opacity: 1;
}
map-page #map-box .leaflet-marker-icon.is-selected .marker:after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translate(-50%, 0);
          display: block;
          width: 25px;
          height: 41px;
          background-image: url('dot-selected%402x.png');
          background-size: contain;
}