html {
  height   : 100%;
  overflow : hidden;
}

body {
  display        : flex;
  height         : 100%;
  overflow       : hidden;
  background     : #1d2435;
  flex-direction : column;
}

i {
  font-style: normal;
}

/* Header */

body > header {
  z-index  : 990000;
  position : relative;
  position : absolute;
  width    : 100%;
}

body > header > div {
  z-index         : 1;
  display         : flex;
  position        : relative;
  height          : 70px;
  background      : #181f2c;
  box-shadow      : 0px 0px 5px 0px #00000073;
  align-items     : stretch;
  justify-content : space-between;
}

body > header > div > div > div.kr-logo {
  display     : flex;
  min-width   : 194px;
  padding     : 0px 15px;
  align-items : center;
  cursor: pointer;
}

body > header > div > div > div.kr-logo > img {
  max-width  : 191px;
  max-height : 70px;
}

body > header > div > div {
  display     : flex;
  min-width   : 123px;
  align-items : center;
}

body > header > div > div > ul.kr-top-graphlist {
  display     : flex;
  max-width   : 100%;
  overflow-y  : auto;
  align-items : center;
}

body > header > div > div > ul.kr-top-graphlist::-webkit-scrollbar {
display: none;
}

body > header > div > div > ul.kr-top-graphlist > li {
  display       : flex;
  box-sizing    : border-box;
  position      : relative;
  width         : 130px;
  min-width     : 130px;
  height        : 48px;
  margin-right  : 12px;
  padding       : 0px 5px 0px 5px;
  color         : #fff;
  border        : 2px solid #252c3b;
  border-radius : 3px;
  align-items   : center;
  font-size     : 12px;
  cursor        : pointer;
}

body > header > div > div > ul.kr-top-graphlist > li.kr-top-graphlist-item-view {
  border        : none;
  border-bottom : 2px solid #fff;
  background    : #343b4c;
}

body > header > div > div > ul.kr-top-graphlist > li.kr-top-graphlist-item-view.kr-top-graphlist-item-selected {
  border        : none;
  border-bottom : 2px solid #ef6c00;
  background    : #343b4c;
}

body > header > div > div > ul.kr-top-graphlist > li > div.kr-top-graphlist-inf > span.kr-top-graphlist-item-evl-down {
  color : #dd175a;
}

body > header > div > div > ul.kr-top-graphlist > li > div.kr-top-graphlist-inf > span.kr-top-graphlist-item-evl-up {
  color : #29c368;
}

body > header > div > div > ul.kr-top-graphlist > li:last-child {
  margin-right : 0px;
}

body > header > div > div > ul.kr-top-graphlist > li > div > img {
  width        : 32px;
  height       : 32px;
  margin-right : 5px;
  opacity: 0.2;
  filter: brightness(100) invert(100);
  transform    : scale(0.7);
}

body > header > div > div > ul.kr-top-graphlist > li > div.kr-top-graphlist-inf {
  display         : flex;
  flex            : 1;
  flex-direction  : column;
  justify-content : center;
  line-height     : 13px;
}

body > header > div > div > ul.kr-top-graphlist > li > div.kr-top-graphlist-inf > label {
  margin-bottom : 2px;
  font-size     : 13px;
  font-weight   : 500;
}

body > header > div > div > ul.kr-top-graphlist > li > div.kr-top-graphlist-inf > span {
  color     : #8b8f95;
  font-size : 12px;
}

body > header > div > div > ul.kr-top-graphlist > li > div.kr-top-graphlist-closeb {
  display         : flex;
  position        : absolute;
  top             : 0;
  right           : 0;
  width           : 25px;
  height          : 25px;
  align-items     : center;
  justify-content : center;
}

body > header > div > div > ul.kr-top-graphlist > li > div.kr-top-graphlist-closeb > svg {
  width        : 18px;
  height       : 18px;
  margin-right : 0px;
  fill         : #9ba4b3;
}

body > header > div > div > ul.kr-top-graphlist > li > div.kr-top-graphlist-closeb:hover > svg {
  fill : #d1d8e2;
}

/* Dashboard change */

body > header > div > div > div.kr-change-dashboard {
  display         : flex;
  box-sizing      : border-box;
  position        : relative;
  width           : 48px;
  min-width       : 48px;
  height          : 48px;
  min-height      : 48px;
  margin-right    : 12px;
  color           : #fff;
  border          : 2px solid #252c3b;
  border-radius   : 3px;
  align-items     : center;
  font-size       : 12px;
  justify-content : center;
  cursor          : pointer;
}

body > header > div > div > div.kr-change-dashboard:hover {
  background : rgba(255,255,255,0.05);
}

body > header > div > div > div.kr-change-dashboard:hover > img {
  filter: brightness(100) invert(100);
}

body > header > div > div > div.kr-change-dashboard > img {
  width  : 30px;
  height : 30px;
  filter: brightness(100) invert(100);
  opacity: 0.25;
}

body > header > div > div > div.kr-change-dashboard > div.kr-change-dashboard-selector {
  z-index       : 55000;
  display       : none;
  box-sizing    : border-box;
  position      : absolute;
  top           : 57px;
  left          : 0;
  width         : 355px;
  padding       : 15px;
  border-radius : 2px;
  background    : #20283a;
  box-shadow    : 0px 5px 40px 0px #0006;
  cursor        : default;
}

body > header > div > div > div.kr-change-dashboard > div.kr-change-dashboard-selector::before {
  content      : "";
  position     : absolute;
  top          : -7px;
  left         : 15px;
  width        : 0;
  height       : 0;
  border-color : transparent transparent #20283a transparent;
  border-width : 0 7px 9px 7px;
  border-style : solid;
}

body > header > div > div > div.kr-change-dashboard > div.kr-change-dashboard-selector > div {
  display        : flex;
  margin-bottom  : 10px;
  padding-bottom : 10px;
  border-bottom  : 1px solid #2b3344;
  align-items    : stretch;
}

body > header > div > div > div.kr-change-dashboard > div.kr-change-dashboard-selector > div:last-child {
  margin-bottom  : 0px;
  padding-bottom : 10px;
  border-bottom  : none;
}

body > header > div > div > div.kr-change-dashboard > div.kr-change-dashboard-selector > div > div {
  display     : flex;
  width       : 80px;
  align-items : flex-start;
}

body > header > div > div > div.kr-change-dashboard > div.kr-change-dashboard-selector > div > div > span {}

body > header > div > div > div.kr-change-dashboard > div.kr-change-dashboard-selector > div > ul {
  display   : flex;
  flex-wrap : wrap;
}

body > header > div > div > div.kr-change-dashboard > div.kr-change-dashboard-selector > div > ul > li {
  display         : flex;
  width           : 35px;
  height          : 35px;
  margin-right    : 10px;
  align-items     : center;
  justify-content : center;
  cursor          : pointer;
}

body > header > div > div > div.kr-change-dashboard > div.kr-change-dashboard-selector > div > ul > li > img {
  width      : 35px;
  height     : 35px;
  opacity    : 0.5;
  filter: brightness(100) invert(100);
  fill       : #fff;
  transition : opacity 0.1s linear;
}

body > header > div > div > div.kr-change-dashboard > div.kr-change-dashboard-selector > div > ul > li:hover > img {
  opacity : 0.8;
}

/* Add graph dashboard */

body > header > div > div > div.kr-addgraph-dashboard {
  display         : flex;
  box-sizing      : border-box;
  position        : relative;
  width           : 48px;
  min-width       : 48px;
  height          : 48px;
  min-height      : 48px;
  margin-left     : 12px;
  color           : #fff;
  border          : 2px solid #252c3b;
  border-radius   : 3px;
  align-items     : center;
  font-size       : 12px;
  justify-content : center;
  cursor          : pointer;
}

body > header > div > div > div.kr-addgraph-dashboard:hover {
  background : rgba(255,255,255,0.05);
}

body > header > div > div > div.kr-addgraph-dashboard:hover > svg {
  fill : #b4b7be;
}

body > header > div > div > div.kr-addgraph-dashboard > svg {
  width  : 30px;
  height : 30px;
  fill   : #656c7d;
}

/* Header right side */

body > header > div > div > div.kr-time {
  display         : flex;
  padding         : 0px 9px;
  color           : #fff;
  align-items     : flex-end;
  flex-direction  : column;
  justify-content : center;
}

body > header > div > div > div.kr-time > span {
  font-size   : 23px;
  line-height : 19px;
}

body > header > div > div > div.kr-time > span:last-child {
  margin-top     : 5px;
  opacity        : 0.8;
  text-transform : uppercase;
  font-size      : 12px;
  line-height    : 14px;
}

/* Accout header */

body > header > div > div > div.kr-account {
  display     : flex;
  height      : 100%;
  padding     : 0px 15px;
  align-items : center;
  cursor      : pointer;
}

body > header > div > div > div.kr-account:hover {
  /*background : #343b4c;*/
}

body > header > div > div > div.kr-account > div.kr-account-pic {
  display             : flex;
  width               : 35px;
  min-width           : 35px;
  height              : 35px;
  min-height          : 35px;
  margin-right        : 0px;
  color               : #fff;
  border-radius       : 100%;
  background          : #ef6c00;
  background-position : center center;
  background-size     : cover;
  box-shadow          : 0px 1px 2px 0px #000;
  text-transform      : uppercase;
  align-items         : center;
  font-size           : 17px;
  font-weight         : 100;
  justify-content     : center;
}

body > header > div > div > div.kr-account > span {
  color : #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* Top header icon */

body > header > div > div > ul {
  display     : flex;
  align-items : center;
}

body > header > div > div > ul > li {
  display         : flex;
  position        : relative;
  width           : 60px;
  height          : 60px;
  align-items     : center;
  justify-content : center;
  cursor          : pointer;
}

body > header > div > div > ul > li:hover > svg {
  fill : #fff;
}

body > header > div > div > ul > li > svg {
  width  : 25px;
  height : 25px;
  fill   : #d5dbe6;
}

body > header > div > div > ul > li > div.kr-notification-center-icon > svg {
  width  : 25px;
  height : 25px;
  fill   : #d5dbe6;
}

body > header > div > div > ul > li > div.kr-notification-center-icon {
  position: relative;
}

body > header > div > div > ul > li > div.kr-notification-center-icon > span {
  position: absolute;
  right:-6px; top: -6px;
  background: #da4830;
  border-radius: 3px;
  color:#f4f6f9;
  font-size: 11px;
  padding: 2px 4px;
  box-shadow: 0px 1px 12px #00000040;
}

body > header > div > div > ul > li.kr-header-icon-act > svg,
body > header > div > div > ul > li.kr-header-icon-act > div.kr-notification-center-icon > svg {
  animation-iteration-count : infinite;
  -webkit-animation-name    : swing;
  animation-name            : swing;
  -webkit-transform-origin  : top center;
  transform-origin          : top center;
}

/* Header navigation */

body > header > nav {
  display         : flex;
  width           : 100%;
  background      : #fff;
  justify-content : space-between;
}

body > header > nav > ul {
  display     : flex;
  align-items : center;
}

body > header > nav > ul > li {
  padding        : 11px;
  padding-bottom : 9px;
  color          : #404552;
  border-bottom  : 2px solid #fff;
  text-transform : uppercase;
  font-size      : 14px;
  font-weight    : 500;
  cursor         : pointer;
}

body > header > nav > ul > li.kr-nav-active {
  color        : #2d3039;
  border-color : #1457dc;
}

/* Main content */

body > section.kr-page-content {
  display     : flex;
  box-sizing  : border-box;
  height      : calc(100% - 37px);
  max-height  : 100%;
  padding-top : 70px;
  align-items : flex-start;
}

/* Left nav */

nav.kr-leftnav {
  height       : 100%;
  background: #131722;
}

nav.kr-leftnav > ul {
  display: flex; flex-direction: column;
  height: 100%;
}

nav.kr-leftnav > ul > li {
  display         : flex;
  width           : 70px;
  max-height          : 70px;
  border-bottom   : 1px solid #232631;
  align-items     : center;
  flex-direction  : column;
  justify-content : center;
  cursor          : pointer;
  flex:1;
  position: relative;
}

nav.kr-leftnav > ul > li:hover {
  background : #1c2030;
}

nav.kr-leftnav > ul > li.kr-leftnav-select {
  background : #1c2030;
}

nav.kr-leftnav > ul > li > svg {
  width         : 22px;
  min-width     : 22px;
  height        : 22px;
  min-height    : 22px;
  margin-bottom : 9px;
  fill          : #fff;
}

nav.kr-leftnav > ul > li > span {
  color          : #fff;
  text-align     : center;
  text-transform : uppercase;
  font-size      : 10px;
  font-weight: 100;
}

nav.kr-leftnav > ul > li > div.kr-leftnav-bubble {
  position: absolute;
  top:9px; right:10px;
  background: #da4830;
  border-radius: 3px;
  color:#f4f6f9;
  font-size: 11px;
  padding: 2px 4px;
  box-shadow: 0px 1px 12px #00000040;
}

/* OVERLEY */

body > * {
  transition: filter 0.2s linear;
}

body.kr-nblr > * {
  filter : blur(2px);
}

body.kr-nblr > .kr-ov-nblr {
  filter : blur(0px);
}

div.kr-overley {
  z-index         : 999999999999;
  display         : flex;
  position        : absolute;
  top             : 0;
  right           : 0;
  bottom          : 0;
  left            : 0;
  background      : rgba(32,40,58,0.5);
  align-items     : center;
  justify-content : center;
}

div.kr-overley > section {
  display        : flex;
  width          : 580px;
  border-radius  : 2px;
  background     : #1c2030;
  box-shadow     : 0px 1px 3px 0px #10141dc2;
  flex-direction : column;
}

div.kr-overley > section > header {
  padding       : 11px 15px;
  border-radius : 2px 2px 0px 0px;
  background    : #262c3b;
}

div.kr-overley > section > header > span {
  color     : #fff;
  font-size : 14px;
}

div.kr-overley > section > form {
  display        : flex;
  padding        : 38px;
  flex-direction : column;
}

div.kr-overley > section > form > section {
  display       : flex;
  margin-bottom : 22px;
}

div.kr-overley > section > form > section > section {
  display        : flex;
  padding-right  : 15px;
  padding-bottom : 28px;
  padding-left   : 15px;
  border-bottom  : 1px solid #363c4e;
  flex           : 1;
  flex-direction : column;
}

div.kr-overley > section > form > section > section:first-child {
  padding-left : 0px;
}

div.kr-overley > section > form > section > section:last-child {
  padding-right : 0px;
}

div.kr-overley > section > form > section > section > span {
  color     : #fff;
  font-size : 16px;
}

div.kr-overley > section > form > section > section > ul {
  display         : flex;
  margin-top      : 30px;
  justify-content : space-between;
}

div.kr-overley > section > form > section > section > ul > li {
  display        : flex;
  margin-right   : 8px;
  margin-left    : 8px;
  align-items    : flex-start;
  flex           : 1;
  flex-direction : column;
}

div.kr-overley > section > form > section > section > ul > li:first-child {
  margin-left : 0px;
}

div.kr-overley > section > form > section > section > ul > li:last-child {
  margin-right : 0px;
}

div.kr-overley > section > form > section > section > ul > li > label {
  color     : #8d8f97;
  font-size : 15px;
}

div.kr-overley > section > form > section > section > ul > li > div {
  box-sizing    : border-box;
  width         : 100%;
  height        : 35px;
  margin-top    : 16px;
  padding       : 0px 10px;
  border-radius : 3px;
  background    : #363c4f;
}

div.kr-overley > section > div.kr-overley-loading {
  display         : flex;
  height          : 400px;
  align-items     : center;
  justify-content : center;
}

/* Text field */

div.kr-overley > section > form > section > section > ul > li > input[type="text"] {
  box-sizing         : border-box;
  -moz-appearance    : none;
  -o-appearance      : none;
  -webkit-appearance : none;
  width              : 100%;
  height             : 35px;
  margin-top         : 16px;
  padding            : 0px 10px;
  color              : #fff;
  border             : none;
  border-radius      : 3px;
  background         : #363c4f;
  outline            : none;
  font-size          : 15px;
}

/* Color field */

div.kr-overley > section > form > section > section > ul > li > div.kr-indicator-cfg-select {
  position : relative;
}

div.kr-overley > section > form > section > section > ul > li > div.kr-indicator-cfg-select > div {
  display         : flex;
  width           : 100%;
  height          : 35px;
  align-items     : center;
  justify-content : space-between;
}

div.kr-overley > section > form > section > section > ul > li > div.kr-indicator-cfg-select > div > svg {
  width  : 15px;
  height : 15px;
  color  : #fff;
  fill   : #fff;
}

div.kr-overley > section > form > section > section > ul > li > div.kr-indicator-cfg-select .kr-indicator-cfg-color-cell {
  width         : 21px;
  height        : 21px;
  border-radius : 2px;
  background    : red;
}

div.kr-overley > section > form > section > section > ul > li > div.kr-indicator-cfg-select > ul {
  display        : none;
  box-sizing     : border-box;
  position       : absolute;
  top            : 33px;
  right          : 0;
  left           : 0;
  min-width      : 158px;
  padding        : 11px 4px;
  padding-bottom : 0px;
  border-radius  : 0px 0px 2px 2px;
  background     : #131623;
  flex-wrap      : wrap;
}

div.kr-overley > section > form > section > section > ul > li > div.kr-indicator-cfg-select > ul > li {
  display         : flex;
  width           : 20%;
  margin-bottom   : 11px;
  align-items     : center;
  justify-content : center;
}

div.kr-overley > section > form > section > section > ul > li > div.kr-indicator-cfg-select:hover > ul {
  display : flex;
}

/* Line thickness field */

div.kr-overley > section > form > section > section > ul > li > div.kr-indicator-cfg-select .kr-indicator-cfg-line {
  width               : 80%;
  height              : 1px;
  border-color        : #fff;
  border-bottom-style : solid;
}

div.kr-overley > section > form > section > section > ul > li > div.kr-indicator-cfg-select.kr-indicator-cfg-line > ul {
  flex-direction : column;
}

div.kr-overley > section > form > section > section > ul > li > div.kr-indicator-cfg-select.kr-indicator-cfg-line > ul > li {
  width   : 100%;
  padding : 6px 0px;
}

/* overley footer */

div.kr-overley > section > form > footer {
  display         : flex;
  padding-top     : 6px;
  align-items     : center;
  justify-content : space-between;
}

div.kr-overley > section > form > footer > div {
  display     : flex;
  align-items : center;
}

div.kr-overley > section > form > footer > div > .btn {
  margin-left : 15px;
}

div.kr-overley > section > form > footer > div > .btn:first-child {
  margin-left : 0px;
}

/* Ask for landscape */

section.responsive-portrait {
  z-index         : 999999999999999;
  display         : none;
  position        : absolute;
  top             : 0;
  right           : 0;
  bottom          : 0;
  left            : 0;
  background      : #121828;
  align-items     : center;
  justify-content : center;
  height: 100vh;
}

section.responsive-portrait > div {
  display        : flex;
  align-items    : center;
  flex-direction : column;
}

section.responsive-portrait > div > img {
  width         : 300px;
  max-height: 300px;
  margin-bottom : 30px;
  fill          : #fff;
}

section.responsive-portrait > div > span {
  color          : #fff;
  text-align     : center;
  text-transform : uppercase;
  text-shadow    : 1px 1px 5px rgba(0,0,0,0.5);
  font-size      : 14px;
}

/* Footer bar */

body > footer {
  display         : flex;
  box-sizing      : border-box;
  width           : 100%;
  height          : 37px;
  padding         : 7px;
  color           : #fff;
  background      : #3a4357;
  box-shadow      : 0px -2px 2px 0px #00000038;
  justify-content : space-between;
}

body > footer > div {
  display     : flex;
  align-items : center;
}

body > footer > div > ul.kr-charge-status {
  display     : flex;
  align-items : center;
}

body > footer > div > ul > li.kr-charge-tag {
  display        : flex;
  padding        : 4px 7px;
  color          : #fff;
  border-radius  : 2px;
  background     : rgba(0,0,0,0.1);
  text-transform : uppercase;
  align-items    : center;
  font-size      : 13px;
  margin-right: 5px;
}

body > footer > div > ul > li.kr-charge-tag > svg {
  width        : 15px;
  height       : 15px;
  margin-right : 5px;
  fill         : #fff;
}

body > footer > div > ul > li.kr-charge-tag.kr-charge-tag-orange {
  background : #ef6c00;
}

body > footer > div > ul > li.kr-charge-tag.kr-charge-tag-blue {
  background : #007cef;
}

body > footer > div > ul > li.kr-charge-tag.kr-charge-tag-green {
  background : #29c359;
}

body > footer > div > ul > li.kr-charge-tag.kr-charge-tag-red {
  background : #e52222;
}

body > footer > div > ul > li.kr-toggle-white {
  display: flex; align-items: center;
  color:#000;
  margin: 0px 10px;
}

body > footer > div > ul > li.kr-toggle-white > span {
  text-transform: uppercase;
  font-size: 10px;
  color:#f4f6f9;
}

body > footer > div > ul > li.kr-toggle-white > div.kr-toggle-theme-white {
  width: 32px;
  height: 16px;
  border-radius: 30px;
  background: #181f2c;
  margin: 0px 5px;
  padding: 2px;
  position: relative;
  cursor: pointer;
}

body > footer > div > ul > li.kr-toggle-white > div.kr-toggle-theme-white > div {
  width: 16px; height: 16px;
  border-radius: 16px;
  background: #e72d01;
  position: absolute;
  transition: all 0.2s cubic-bezier(0.21, 1.1, 1, 1);
}

body > footer > div > ul > li.kr-toggle-white > div.kr-toggle-theme-white.kr-white-theme > div {
  margin-left: 16px;
}

body > footer > div.kr-footer-right-side > div.kr-current-time {
  padding-right  : 4px;
  color          : #fff;
  text-transform : uppercase;
  font-size      : 14px;
}

body > footer > div.kr-footer-right-side > div.kr-footer-contact {
  display: flex; align-items: center;
  margin-right: 15px;
  height: 37px;
  padding: 0px 10px;
  background: rgba(0,0,0,0.15);
  cursor: pointer;
}

body > footer > div.kr-footer-right-side > div.kr-footer-contact:hover {
  background: rgba(0,0,0,0.2);
}

body > footer > div.kr-footer-right-side > div.kr-footer-contact > div {
  width: 15px; height: 15px;
  display: flex; justify-content: center; align-items: center;
  margin-right: 8px;
}

body > footer > div.kr-footer-right-side > div.kr-footer-contact > div > svg {
  width: 100%; height: 100%;
  fill:#fff;
}

body > footer > div.kr-footer-right-side > div.kr-footer-contact > span {
  color:#f4f6f9;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 13px;
}

body > footer > div > div.kr-donation {
  display: flex; align-items: center;
  background: rgba(0,0,0,0.2);
  height: 37px;
  padding: 0px 12px;
  cursor: pointer;
}

body > footer > div > div.kr-donation:hover {
  background: rgba(0,0,0,0.3);
}

body > footer > div > div.kr-donation > svg {
  width: 15px; height: 15px;
  margin-right: 8px;
  fill:#2bab3f;
}

body > footer > div > div.kr-donation > span {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
}

/* Intro */
body .shepherd-element.shepherd-theme-arrows {
  z-index: 99999999999;
}


body.shepherd-active * {
  opacity: 0.9;
}

body.shepherd-active .shepherd-target,
body.shepherd-active .shepherd-target * {
  opacity: 1;
}

body.shepherd-active .shepherd-step,
body.shepherd-active .shepherd-step * {
  opacity: 1;
}

body .shepherd-element.shepherd-theme-arrows .shepherd-content {
  font-size: 14px;
  border-radius: 2px;
  box-shadow: 0px 2px 5px 0px #0000002e;
}

body .shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons li .shepherd-button {
  background: #ec7a18;
}

/* highlight */
.kr-hg-up {
  color:#29c368 !important;
}

.kr-hg-down {
  color:#e30f0f !important;
}

mark {
  -moz-appearance    : none;
  -o-appearance      : none;
  -webkit-appearance : none;
  background-color: transparent !important;

}

/* Search popup */
section.kr-searchpop {
  position: absolute;
  z-index: 99999999999999;
  top:0; left:0; right:0; bottom:0;
  background: #13172261;
  display: none;
}

section.kr-searchpop.kr-searchpop-show {
  display: block;
}

section.kr-searchpop section.kr-search {
  width: 100%;
}

section.kr-searchpop section.kr-search > ul {
  max-height: calc(100vh - 55px);
}

section.kr-searchpop section.kr-search > header {
  display: none;
}

/* Donation */
section.kr-donation-list {
  position: absolute;
  z-index: 99999999999;
  left:0; bottom: 0; right:0; top:0;
  background: rgba(0,0,0,0.15);
  display: flex; justify-content: center; align-items: center;
  display: none;
}

section.kr-donation-list > section {
  width: 500px;
  max-height: 100%;
  max-width: 100%;
  overflow-y: auto;
  background: #f4f6f9;
  display: flex; align-items: stretch;
  box-shadow: 0px 2px 5px #00000061;
  position: relative;
  display: flex; flex-direction: column;
  align-items: stretch;
  padding: 15px;
}

section.kr-donation-list > section > section {
  position: absolute;
  top:10px;
  right:10px;
}

section.kr-donation-list > section > section > div {
  width: 25px; height: 25px;
  display: flex; justify-content: center; align-items: center;
}

section.kr-donation-list > section > div.kr-donation {
  display: flex; align-items: center;
  justify-content: center;
  margin-top: 35px;
  padding: 6px;
}

section.kr-donation-list > section > div.kr-donation > svg {
  width: 15px; height: 15px;
  margin-right: 10px;
  fill:#ca2828;
}

section.kr-donation-list > section > div.kr-donation > span {
  text-transform: uppercase;
  font-weight: bold;
  opacity: 0.8;
}

section.kr-donation-list > section > ul {
  width: 100%;
  margin-top: 15px;
}

section.kr-donation-list > section > ul > li {
  display: flex; flex-direction: column;
  align-items: stretch;
  margin-bottom: 10px;
}

section.kr-donation-list > section > ul > li > span {
  font-weight: bold;
}

section.kr-donation-list > section > ul > li > div {
  display: flex; align-items: center;
  justify-content: space-between;
  background: #23a64c;
  border-radius: 2px;
  padding: 3px;
  margin-top: 5px;
  padding-left: 7px;
}

section.kr-donation-list > section > ul > li > div > span {
  color:#f4f6f9;
}

section.kr-donation-list > section > ul > li > section {
  display: flex; justify-content: center;
  padding: 8px;
  border-bottom: 1px solid rgba(0,0,0,0.2);
  display: none;
}