/**
 * Linoll Moreno Mosquera <linoll@bontris.com>
 *
 * © 2017 Bontris, S.A.S
 */

/** RESET */

html {
  height: 100%;
  font-size: 1em;
  font-family: helvetica;
}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
}

input::-ms-clear {
  display: none;
}

template {
  display: none;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/** LAYOUT */


/** UTILITIES */

.clear:after {
  content: "";
  clear: both;
  display: table;
}

.clamp {
  padding: 0px 10px;
  max-width: 1440px;
  width: 90%;
}

/** LAYOUT */


/** COMPONENTS */

/** notice */

div.notice {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 8px;
  border-width: 1px;
  border-style: solid;
}

div.notice h2 {
  overflow: hidden;
  display: block;
  margin: 0px 0px;
  padding: 2px 2px 6px 4px;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  font-size: 120%;
}

div.notice p {
  margin: 5px 5px 0px 5px;
  padding: 5px 0px;
}

div.notice ul {
  margin: 5px 5px 0px 30px;
  padding: 5px 5px;
}

div.notice li {
  line-height: 150%;
  font-size: 100%;
}

div.notice a {
  text-decoration: none;
  font-weight: bold;
}

div.notice a:hover {
  text-decoration: underline;
}

div.notice[class~=info] {
  background-color: #D9EDF7;
  border-color: #BCE8F1;
  color: #3A87AD;
}

div.notice[class~=info] h2 {
  border-bottom-color: #BCE8F1;
}

div.notice[class~=info] a {
  color: #3A87AD;
}

div.notice[class~=warn] {
  background-color: #FCF8E3;
  border-color: #FBEED5;
  color: #CB9853;
}

div.notice[class~=warn] h2 {
  border-bottom-color: #FBEED5;
}

div.notice[class~=warn] a {
  color: #CB9853;
}

div.notice[class~=done] {
  background-color: #DFF0D8;
  border-color: #D6E9C6;
  color: #5A8757;
}

div.notice[class~=done] h2 {
  border-bottom-color: #D2E0B9;
}

div.notice[class~=done] a {
  color: #2570AB;
}

div.notice[class~=fail] {
  background-color: #F2DEDE;
  border-color: #EED3D7;
  color: #B94A48;
}

div.notice[class~=fail] h2 {
  border-bottom-color: #EED3D7;
}

div.notice[class~=fail] a {
  color: #B94A48;
}

/** icons */

img.icon {
  display: block;
  margin: none;
  float: left;
  width: 24px;
  height: 24px;
  border: none;
  background-repeat: no-repeat;
  background-position: 0px 0px;
}

img.icon.more {
  background-image: url(../images/more.png);
}

img.icon.light {
  background-position: 0px -24px;
}

img.icon.dark {
  background-position: 0px -24px;
}

img.icon.send {
  background-image: url(../images/go.png);
}

label.switch {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

label.switch input {
  display: none;
}

label.switch input + span {
  display: inline-block;
  position: relative;
  overflow: hidden;
  padding: 10px 10px;
  margin: 0px 0px 0px 0px;
}

label.switch input + span:after {
  display: block;
  content: "";
  top: 0px;
  left: 0px;
  width: 30px;
  height: 15px;
  border-radius: 15px;
  background: #889CB3;
}

label.switch input + span:before {
  position: absolute;
  display: block;
  content: "";
  top: 7px;
  left: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .4);
  transition: left .3s ease,background .3s ease,box-shadow .1s ease;
  border: 1px solid #788da5;
  background: #FFFFFF;
}

label.switch input:checked + span:after {
  background: #7AC0F8;
}

label.switch input:checked + span:before {
  left: 25px;
  border-color: #7AC0F8;
}

label.check {
  overflow: hidden;
  cursor: pointer;
}

label.check input {
  display: none;
}

label.check input + span {
  display: inline-block;
  position: relative;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
}

label.check input + span:before {
  display: block;
  content: '';
  float: left;
  width: 20px;
  height: 20px;
  border: 1px solid #838383;
}

label.check:hover input + span:before {
  border: 1px solid #F98221;
}

label.check input[type=radio] + span:after {
  position: absolute;
  display: none;
  content: "";
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  background: #838383;
}

label.check input[type=checkbox]:checked + span:after {
  position: absolute;
  display: block;
  content: '';
  margin: 5px auto;
  left: 0px;
  right: 0px;
  width: 6px;
  height: 9px;
  border-style: solid;
  border-color: #838383;
  border-width: 0px 3px 3px 0px;
  transform: rotate(45deg);
}

label.check input[type=checkbox]:indeterminate + span:after {
  position: absolute;
  display: block;
  content: '';
  margin: auto;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 9px;
  height: 3px;
  background: #838383;
}

label.check input[type=radio] + span:before {
  border-radius: 50%;
}

label.check input[type=radio] + span:after {
  border-radius: 50%;
}

label.check input:disabled + span:before {
  border-color: #E5E6E6;
}

label.check input:disabled + span:after {
  background-color: #E5E6E6;
}


label.done input:checked + span:before {
  border-color: #34B853;
}

label.done input:checked + span:after {
  background-color: #34B853;
}

label.warn input:checked + span:before {
  border-color: #FF9800;
}

label.warn input:checked + span:after {
  background-color: #FF9800;
}

label.fail input:checked + span:before {
  border-color: #F44336;
}

label.fail input:checked + span:after {
  background-color: #F44336;
}

/**
 * GRID
 */

div.grid {
  display: block;
  clear: both;
  padding: 20px 0px;
  margin: -5px -5px;
}

div.grid div.item {
  display: block;
  float: left;
  width: 100%;
  padding: 5px 5px;
}

div.grid div.item.tiny {
  width: 25%;
}

div.grid div.item.half {
  width: 50%;
}

div.grid div.item.wide {
  width: 75%;
}

div.item > div.grid {
  margin: 0px -5px;
}

div.item > div.grid div.item {
  padding: 0px 5px;
}

/**
 * CHART
 */

 ul.chart {
  position: relative;
  list-style: none;
  overflow: hidden;
  display: block;
  margin: -10px -10px;
  padding: 15px 0px;
}

ul.chart ul {
  position: relative;
  overflow: hidden;
  list-style: none;
  display: block;
  margin: 0px 0px;
  padding: 0px 0px;
  width: 100%;
}

ul.chart li {
  position: relative;
  display: block;
  margin: 0px 0px;
  padding: 10px 10px;
}

ul.chart li:before {
  position: absolute;
  display: block;
  content: "";
  top: 0px;
  left: 0px;
  width: 0px;
  height: 0px;
  border-width: 0px;
  border-style: solid;
  border-color: #BEBEBE;
}

ul.chart li:after {
  position: absolute;
  display: block;
  content: "";
  top: 0px;
  left: 0px;
  width: 0px;
  height: 0px;
  border-width: 0px;
  border-style: solid;
  border-color: #BEBEBE;
}

ul.chart a {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 10px;
  width: 100%;
  height: 100%;
  font-size: 12px;
  font-weight: bold;
  border-width: 2px;
  border-style: solid;
  border-color: #E5E5E5;
  background-color: #F5F5F5;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: #5E5E5E;
}

ul.chart span {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 10px;
  color: #5E5E5E;
  font-size: 12px;
  font-weight: bold;
  border-width: 2px;
  border-style: solid;
  border-color: #E5E5E5;
  background-color: #F5F5F5;
  text-transform: uppercase;
  text-align: center;
}

ul.chart small {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 5px 0px 0px 0px;
  font-size: 11px;
}

ul.chart *[color=blue] {
  background-color: #029AE4;
  border-color: #0285C4;
  color: #FFFFFF;
}

ul.chart a[color=blue]:hover {
  background-color: #02AAFB;
}

ul.chart *[color=blue] small {
  color: #B4E1F7;
}

ul.chart *[color=salmon] {
  background-color: #FF6F42;
  border-color: #FF5B24;
  color: #FFFFFF;
}

ul.chart a[color=salmon]:hover {
  background-color: #FF8B64;
}

ul.chart *[color=salmon] small {
  color: #FFD4C7;
}

ul.chart *[color=green] {
  background-color: #378D3B;
  border-color: #2F7732;
  color: #FFFFFF;
}

ul.chart a[color=green]:hover {
  background-color: #40A245;
}

ul.chart *[color=green] small {
  color: #A0C9A2;
}

ul.chart *[color=orange] {
  background-color: #F8A724;
  border-color: #F39B07;
  color: #FFFFFF;
}

ul.chart a[color=orange]:hover {
  background-color: #F9B646;
}

ul.chart *[color=orange] small {
  color: #FDE5BE;
}

ul.chart *[color=aqua] {
  background-color: #00ABC0;
  border-color: #008F9F;
  color: #FFFFFF;
}

ul.chart a[color=aqua]:hover {
  background-color: #00CEE6;
}

ul.chart *[color=aqua] small {
  color: #B3E6EC;
}

ul.chart *[color=olive] {
  background-color: #679E37;
  border-color: #56832E;
  color: #FFFFFF;
}

ul.chart a[color=olive]:hover {
  background-color: #77B63F;
}

ul.chart *[color=olive] small {
  color: #D2E2C3;
}

ul.chart *[color=brown] {
  background-color: #8C6D62;
  border-color: #775C53;
  color: #FFFFFF;
}

ul.chart a[color=brown]:hover {
  background-color: #9C7C72;
}

ul.chart *[color=brown] small {
  color: #D0C3BE;
}

/*** ul:horizontal ***/

ul.chart ul[layout=horizontal] > li {
  float: left;
}

ul.chart ul[layout=horizontal] > li:before {
  top: 30px;
  left: 0px;
  right: auto;
  width: 10px;
  border-width: 2px 0px 0px 0px;
}

ul.chart ul[layout=horizontal] > li:after {
  top: 30px;
  left: auto;
  right: 0px;
  width: 10px;
  border-width: 2px 0px 0px 0px;
}

/*** li:left ul:vertical ***/

ul.chart li[align=left] > ul[layout=vertical] > li:first-child {
  padding: 40px 10px 10px 10px;
}

ul.chart li[align=left] > ul[layout=vertical] > li:first-child:before {
  top: 20px;
  left: 50%;
  height: 100% !important;
  height: 100%;
}

ul.chart li[align=left] > ul[layout=vertical] > li:first-child:after {
  top: 20px;
  left: 50%;
  width: 50%;
  height: 20px;
  border-width: 2px 0px 0px 0px;
}

/*** li:left ul:horizontal ***/

ul.chart li[align=left] > ul[layout=horizontal] > li {
  padding: 40px 10px 10px 10px;
}

ul.chart li[align=left] > ul[layout=horizontal] > li:before {
  top: 20px;
  left: 50%;
  width: 2px;
  height: 20px;
  border-width: 0px 2px 0px 0px;
}

ul.chart li[align=left] > ul[layout=horizontal] > li:after {
  top: 20px;
  left: 0px;
  width: 100%;
  border-width: 2px 0px 0px 0px;
}

ul.chart li[align=left] > ul[layout=horizontal] > li:first-child:after {
  left: 50%;
  width: 50%;
}

/*** li:right ul:vertical ***/

ul.chart li[align=right] > ul[layout=vertical] > li:first-child {
  padding: 40px 10px 10px 10px;
}

ul.chart li[align=right] > ul[layout=vertical] > li:first-child:before {
  top: 20px;
  left: 50%;
  height: 100%;
}

ul.chart li[align=right] > ul[layout=vertical] > li:first-child:after {
  top: 20px;
  left: 0px;
  width: 50%;
  border-width: 2px 0px 0px 0px;
}

/*** li:right ul:horizontal ***/

ul.chart li[align=right] > ul[layout=horizontal] > li {
  padding: 40px 10px 10px 10px;
}

ul.chart li[align=right] > ul[layout=horizontal] > li:before {
  top: 20px;
  left: 50%;
  width: 2px;
  height: 20px;
  border-width: 0px 2px 0px 0px;
}

ul.chart li[align=right] > ul[layout=horizontal] > li:after {
  top: 20px;
  left: 0px;
  width: 100%;
  border-width: 2px 0px 0px 0px;
}

ul.chart li[align=right] > ul[layout=horizontal] > li:last-child:after {
  width: 50%;
}

/*** ul:horizontal li:left ***/

ul.chart ul[layout=horizontal] > li[align=left] {
  float: left;
  padding: 10px 20px 10px 0px;
}

ul.chart ul[layout=horizontal] > li[align=left]:before {
  width: 0px;
}

ul.chart ul[layout=horizontal] > li[align=left]:after {
  width: 20px;
}

/*** ul:horizontal li:right ***/

ul.chart ul[layout=horizontal] > li[align=right] {
  float: right;
  padding: 10px 0px 10px 20px;
}

ul.chart ul[layout=horizontal] > li[align=right]:before {
  /*display: none;*/
}

ul.chart ul[layout=horizontal] > li[align=right]:after {
  top: 30px;
  left: 0px;
  right: auto;
  bottom: 0px;
  width: 20px;
  border-width: 2px 0px 0px 0px;
}

/*** ul:vertical ***/

ul.chart ul[layout=vertical] > li {
  float: none;
}

ul.chart ul[layout=vertical] > li:before {
  top: 0px;
  left: 50%;
  bottom: auto;
  height: 100%;
  border-width: 0px 2px 0px 0px;
}

ul.chart ul[layout=vertical] > li:first-child {
  padding: 0px 10px 10px 10px;
}
ul.chart ul[layout=vertical] > li:first-child:before {
  top: 50%;
}

ul.chart ul[layout=vertical] > li:last-child:before {
  height: 40px;
}

ul.chart ul[layout=vertical] > li[align=center] {
  margin-left: auto;
  margin-right: auto;
  left: 0px;
  right: 0px;
}

ul.chart ul[align=center] {
  margin: 0px auto;
}

ul.chart li[float=right] {
  left: 50%;
  padding: 10px 10px 10px 10%;
}

ul.chart li[float=right]:before {
  left: 0px !important;
}

ul.chart li[float=right]:after {
  top: 30px !important;
  left: 0px !important;
  width: 40%;
  height: 2px;
  border-width: 2px 0px 0px 0px !important;
}

ul.chart li + li:before {
  left: 50%;
  top: 50%;
  height: 50%;
  border-width: 0px 2px 0px 0px;
}

ul.chart *[align=center] {
  margin: 0px auto;
}

ul.chart ol {
  position: relative;
  overflow: hidden;
  list-style: none;
  display: flex;
  margin: 0px 0px;
  padding: 0px 0px;
  width: 100%;
  align-items: center;
}

ul.chart ol li {
  position: relative;
  display: block;
  margin: auto 0px;
  float: left;
  top: 0px;
  bottom: 0px;
  padding: 0px 15px;
}

ul.chart ol li a {
  float: right;
}

ul.chart ol li:first-child {
  padding-left: 0px;
}

ul.chart ol li:last-child {
  padding-right: 0px;
}

ul.chart ol > li:not(:first-child)::before {
  top: 50%;
  left: 0px;
  right: auto;
  width: 15px;
  border-width: 2px 0px 0px 0px;
}

ul.chart ol > li:not(:last-child):after {
  top: 20px;
  left: auto;
  right: 0px;
  width: 15px;
  border-width: 2px 0px 0px 0px;
}

ul.chart ol li li {
  overflow: hidden;
  float: none;
  padding-top: 15px;
  padding-left: 30px;
  padding-right: 0px;
  padding-bottom: 15px;
}

ul.chart ol li ul {
  float: none;
}

ul.chart ol li ul li:first-child {
  padding-left: 30px;
  padding-right: 0px;
}

ul.chart ol li ul li::before {
  top: 0px;
  left: 0px;
  right: auto;
  width: 2px;
  height: 100%;
  background: #BEBEBE;
}

ul.chart ol li ul li::after {
  top: 50%;
  left: 0px;
  right: auto;
  width: 30px;
  height: 2px;
  background: #BEBEBE;
}

ul.chart ol li ul li:first-child:before {
  top: 50%;
  height: 50%;
}

ul.chart ol li ul li:last-child:before {
  height: 50%;
}

div.clip {
  position: relative;
  display: block;
  width: 100%;
  height: 0px;
  margin: 5px 0px 10px 0px;
  padding: 0px 0px 50% 0px;
}

div.clip iframe {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

/**
 * RICH
 */

div.rich {
  position: relative;
  overflow: hidden;
  display: block;
  line-height: 1.5;
  font-weight: 400;
  font-size: 16px;
  color: #434343;
}

div.rich table {
  border-collapse: collapse;
  margin: 0px 0px 15px 0px;
  width: 100%;
}

div.rich table tr:nth-child(even) {
  background: #F8F8F8;
}

div.rich table tr:nth-child(odd) {
  background: #FFFFFF;
}

div.rich table th {
  position: relative;
  vertical-align: middle;
  padding: 10px 5px;
  border: 1px solid #D3D3D3;
  color: #232323;
}

div.rich table th:after {
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  height: 1px;
  left: 0px;
  bottom: 0px;
  background: #D3D3D3;
}

div.rich table td {
  vertical-align: top;
  border: 1px solid #D3D3D3;
  padding: 8px 8px;

}

div.rich figure.media {
  margin: 10px 0px;
}

div.rich figure.image {
  display: table;
  clear: both;
  text-align: center;
  margin: 1em auto;
  margin: 10px 0px;
  background: #F3F3F3;
}

div.rich figure.image-style-side {
  float: right;
  margin-left: 1.5em;
  max-width: 50%;
}

div.rich figure.image img {
  display: block;
  margin: 0px;
  border: none;
  width: 100%;
  height: auto;
}

div.rich strong {
  font-weight: bold;
}

div.rich pre {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0px 0px 15px 0px;
  padding: 10px 20px;
  background: #F8F8F8;
}

div.rich pre.note:before {
  position: absolute;
  display: block;
  content: '';
  width: 3px;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #D3D3D3;
}

div.rich pre.done:before {
  background: #64BD78;
}

div.rich pre.warn:before {
  background: #FDBD22;
}

div.rich pre.stop:before {
  background: #ED412B;
}

div.rich h1 {
  overflow: hidden;
  display: block;
  margin: 0px 0px 20px 0px;
  padding: 0px 0px;
  line-height: 1.2;
  font-weight: 700;
  font-size: 22px;
}

div.rich h2 {
  overflow: hidden;
  display: block;
  margin: 0px 0px 10px 0px;
  padding: 0px 0px;
  line-height: 1.2;
  font-weight: 700;
  font-size: 18px;
}

div.rich ol {
  overflow: hidden;
  display: block;
}

div.rich ul {
  overflow: hidden;
  display: block;
}

div.rich p {
  overflow: hidden;
  display: block;
  margin: 0px 0px 10px 0px;
  padding: 0px 0px;
}

div.rich a {
  color: #5CB85B;
}

div.rich a:hover {
  color: #323B32;
}

div.rich b {
  font-weight: 600;
  color: #323B32;
}

/**
 * FORM
 */

div.form {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  width: 100%;
}

div.form form {
  display: flex;
  flex-flow: column;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

div.form form.wrap {
  border: 1px solid #D8DEE2;
  background: #FFFFFF;
}

div.form div.hint {
  position: relative;
  display: block;
  float: left;
  margin: 10px 0px 0px 0px;
  padding: 5px 10px;
}

div.form div.hint:before {
  position: absolute;
  display: block;
  content: '';
  top: -10px;
  left: 15px;
  border-style: solid;
  border-width: 0px 9px 10px 9px;
  border-color: transparent transparent #888888 transparent;
}

div.form div.hint.stop {
  color: #F2524B;
  background: #E27373;
}

div.form div.hint.stop:before {
  border-color: transparent transparent #E27373 transparent;
}

div.form div.hint p {
  display: block;
  margin: 0px 0px;
  padding: 0px 0px;
  font-size: 12px;
  color: #FFFFFF;
}

div.form div.body {
  transition: all 0.60s ease;
  display: block;
  opacity: 0;
  left: 20px;
}

div.form div.body.show {
  opacity: 1;
  left: 0px;
}

div.form div.head {
  position: relative;
  display: block;
  flex: 0 1 auto;
  margin: 0px 0px;
  padding: 0px 0px;
}

div.form div.head h1 {
  display: block;
  margin: 0px 0px;
  padding: 0px 0px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 16px;
  color: #383838;
}

div.form div.head nav {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0px 0px;
  padding: 0px 0px;
  background: #F8F8F8;
}

div.form div.head nav:before {
  position: absolute;
  display: block;
  content: '';
  left: 0px;
  bottom: 1px;
  width: 100%;
  height: 1px;
  background: #D8DEE2;
}

div.form div.head nav dl {
  display: block;
  margin: 0px 0px;
  padding: 0px 0px;
}

div.form div.head nav dt {
  display: block;
  float: left;
  margin: 0px 0px;
  padding: 0px 0px;
}

div.form div.head nav a {
  transition: all 0.20s ease;
  position: relative;
  display: block;
  margin: 0px 0px;
  padding: 20px 30px;
  font-size: 16px;
  color: #838383;
}

div.form div.head nav a:hover {
  color: #535353;
}

div.form div.head nav dt[mark] a {
  background: #FFFFFF;
  color: #498EEF;
  cursor: default;
}

div.form div.head nav dt[mark] a:after {
  position: absolute;
  display: block;
  content: '';
  top: -1px;
  right: 0px;
  width: 1px;
  height: 100%;
  background: #D8DEE2;
}

div.form div.head nav dt + dt[mark] a:before {
  position: absolute;
  display: block;
  content: '';
  top: -1px;
  left: 0px;
  width: 1px;
  height: 100%;
  background: #D8DEE2;
}

div.form div.body {
  position: relative;
  display: block;
  flex: 1 1 auto;
  margin: 20px 20px;
  padding: 0px 0px;
}

div.form div.foot {
  position: relative;
  overflow: hidden;
  display: block;
  clear: both;
  margin: 0px 0px;
  padding: 10px 20px;
  background: #F8F8F8;
}

div.form div.foot:before {
  position: absolute;
  display: block;
  content: '';
  top: 0px;
  left: 0px;
  width: 100%;
  height: 1px;
  background: #D3D3D3;
}

div.form div.bind:after {
  position: absolute;
  display: block;
  content: '*';
  top: 5px;
  right: 10px;
  font-size: 20px;
  color: #F55753
}

div.form div.foot div {
  display: block;
  float: right;
}

div.form div.foot button {
  transition: all 0.2s ease;
  position: relative;
  padding: 10px 25px;
  outline: none;
  border: none;
  background: #FFFFFF;
  color: #555555;
  border: 1px solid #D9E1E7;
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
}

div.form div.foot button:hover {
  background: #F9F9F9;
}

div.form div.foot button[type=submit] {
  border: 1px solid #12779B;
  background: #2492EB;
  color: #FFFFFF; 
}

div.form div.foot button[type=submit]:hover {
  background: #147FB8;
}

div.form div.foot button:disabled {
  opacity: 0.60;
  cursor: default;
}

div.form div.note {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 13px 10px 13px 54px;
  border: 2px solid #4A9ADB;
  background: #F1F8FF;
}

div.form div.note:before {
  position: absolute;
  display: block;
  content: '';
  top: 0px;
  left: 0px;
  width: 44px;
  height: 100%;
  background: #4A9ADB;
}

div.form div.note svg {
  position: absolute;
  display: block;
  top: 10px;
  left: 10px;
  width: 24px;
  height: 24px;
  fill: #FFFFFF;
}

div.form div.note div {
  overflow: hidden;
  display: block;
}

div.form div.note b {
  overflow: hidden;
  display: block;
  line-height: 24px;
  font-weight: 700;
  font-size: 16px;
  color: #4A9ADB;
}

div.form div.note p {
  overflow: hidden;
  display: block;
  margin: 0px 0px;
  padding: 0px 0px;
  line-height: 18px;
  font-weight: 500;
  font-size: 14px;
  color: #434343;
}

div.form div.note.done {
  border: 2px solid #649d4C;
}

div.form div.note.done:before {
  background: #649d4C;
}

div.form div.note.done b {
  color: #649d4C;
}

div.form div.note.warn {
  border: 2px solid #E4B14A;
}

div.form div.note.warn:before {
  background: #E4B14A;
}

div.form div.note.warn b {
  color: #E4B14A;
}

div.form div.note.fail {
  border: 2px solid #C8454E;
  background: #FEF9F9;
}

div.form div.note.fail:before {
  background: #C8454E;
}

div.form div.note.fail b {
  color: #C8454E;
}

div.form div.swap {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0px -10px;
  padding: 0px 10px;
}

div.form div.swap input {
  display: none;
}
div.form div.swap input:checked ~ span.one {
  left: 0%;
}

div.form div.swap input:checked ~ span.two {
  left: 100%;
}

div.form div.swap label {
  position: relative;
  overflow: hidden;
  display: block;
  float: left;
  padding: 0px 10px;
  width: 80px;
  height: 26px;
  border: 1px solid #D3D3D3;
  background: #FFFFFF;
  cursor: pointer;
}

div.form div.swap small {
  overflow: hidden;
  display: block;
  margin: 0px 0px;
  padding: 0px 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 26px;
  font-weight: 500;
  font-size: 14px;
  color: #616F77;
}

div.form div.swap span {
  transition: left 0.20s ease;
  position: absolute;
  display: block;
  text-transform: uppercase;
  text-align: center;
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  padding: 5px;
  top: 0px;
  width: 50%;
  height: 100%;
  background: #E8E8E8;
}

div.form div.swap span.two {
  color: #585858;
  left: 50%;
}

div.form div.swap span.two:before {
  position: absolute;
  display: block;
  content: '';
  top: 0px;
  left: 0px;
  width: 1px;
  height: 100%;
  background: #D3D3D3;
}

div.form div.swap span.one {
  color: #4285F6;
  left: -50%;
}

div.form div.swap span.one:after {
  position: absolute;
  display: block;
  content: '';
  top: 0px;
  right: 0px;
  width: 1px;
  height: 100%;
  background: #D3D3D3;
}

div.form div.swap label.done span.one {
  color: #5EB65F;
}

div.form div.swap label.warn span.one {
  color: #EFB24E;
}

div.form div.swap label.stop span.one {
  color: #D9524F;
}


div.form div.turn {
  position: relative;
  overflow: hidden;
  display: block;
}

div.form div.turn.bind {
  padding: 5px 20px 5px 0px;
}

div.form div.turn input {
  display: none;
}

div.form div.turn input:checked ~ em.not {
  left: 100%;
}

div.form div.turn input:checked ~ em.yes {
  left: 0%;
}

div.form div.turn label {
  position: relative;
  overflow: hidden;
  display: block;
  float: right;
  width: 80px;
  height: 26px;
  border: 1px solid #D3D3D3;
  background: #FFFFFF;
  cursor: pointer;
}

div.form div.turn small {
  display: block;
  padding: 4px 120px 4px 0px;
  line-height: 18px;
  font-weight: normal;
  font-style: normal;
  font-size: 14px;
  color: #383838;
}

div.form div.turn em {
  transition: left 0.20s ease;
  position: absolute;
  display: block;
  text-transform: uppercase;
  text-align: center;
  font-style: normal;
  font-weight: bold;
  font-size: 13px;
  padding: 5px;
  top: 0px;
  width: 50%;
  height: 100%;
  background: #E8E8E8;
}

div.form div.turn em.not {
  color: #585858;
  left: 50%;
}

div.form div.turn em.not:before {
  position: absolute;
  display: block;
  content: '';
  top: 0px;
  left: 0px;
  width: 1px;
  height: 100%;
  background: #D3D3D3;
}

div.form div.turn em.yes {
  color: #4285F6;
  left: -50%;
}

div.form div.turn em.yes:after {
  position: absolute;
  display: block;
  content: '';
  top: 0px;
  right: 0px;
  width: 1px;
  height: 100%;
  background: #D3D3D3;
}

div.form div.turn label.done em.yes {
  color: #5EB65F;
}

div.form div.turn label.warn em.yes {
  color: #EFB24E;
}

div.form div.turn label.stop em.yes {
  color: #D9524F;
}

div.form div.file {
  position: relative;
  display: block;
  margin: 0px 0px;
  padding: 5px 10px;
  width: auto;
  border: 1px solid #D3D3D3;
  background: #FFFFFF;
}

div.form div.file.stop {
  border: 1px solid #E27373;
  background: #FFF7F7;
}

div.form div.file label {
  display: block;
  margin: 0px;
  padding: 0px;
  line-height: 20px;
  font-weight: 500;
  font-size: 14px;
  color: #616F77;
}

div.form div.file div label {
  overflow: hidden;
  display: block;
  line-height: 10px;
  cursor: pointer;
}

div.form div.snap label {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 48px;
}

div.form div.snap img {
  position: absolute;
  display: block;
  margin: auto 0px;
  border: none;
  top: 0px;
  left: 10px;
  bottom: 0px;
  width: 36px;
  height: 36px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  background: #B3B3B3;
}

div.form div.snap div label {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 48px;
}

div.form div.file label input {
  display: none;
}

div.form div.file label strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  line-height: 14px;
  font-weight: 500;
  font-size: 12px;
  color: #383838;
}

div.form div.file label small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  line-height: 12px;
  font-weight: 400;
  font-size: 10px;
  color: #757575;
}

div.form div.file div.tree {
  overflow: hidden;
  display: block;
  margin: -3px -3px;
}

div.form div.file div.node {
  overflow: hidden;
  display: block;
  float: left;
  padding: 3px 3px;
}

div.form div.file div.data {
  overflow: hidden;
  display: block;
}

div.form div.file div.data b.name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  line-height: 14px;
  font-weight: 500;
  font-size: 12px;
  color: #383838;
}

div.form div.file div.data p.hint {
  overflow: hidden;
  display: block;
  margin: 0px 0px;
  padding: 0px 0px;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 12px;
  font-weight: 400;
  font-size: 10px;
  color: #757575;
}

div.form div.file div.chip {
  overflow: hidden;
  display: block;
  border: 1px solid #E3E3E3;
  background: #FEFEFE;
}

div.form div.file div.chip div.name {
  overflow: hidden;
  display: block;
  float: left;
  padding: 0px 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 24px;
  font-weight: 500;
  font-size: 12px;
  color: #535353;
}

div.form div.file div.chip div.drop {
  position: relative;
  overflow: hidden;
  display: block;
  float: left;
  top: 0px;
  right: 0px;
  width: 26px;
  height: 24px;
  background: #F5F6F7;
  cursor: pointer;
}

div.form div.file div.drop svg {
  position: absolute;
  display: block;
  margin: auto;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 16px;
  height: 16px;
  fill: #838383;
}

div.form div.file div.chip[mark] {
  border: 1px solid #BED2EF;
  background: #F1F9FF;
}

div.form div.file div.chip[mark] div.name {
  color: #225B99;
}

div.form div.file div.chip[mark] div.drop {
  background: #B9D8F1;
}

div.form div.file div.chip[mark] svg {
  fill: #225B99;
}

div.form div.knob {
  position: relative;
  display: block;
  margin: 5px 0px;
}

div.form div.knob button {
  display: block;
  padding: 16px 8px;
  width: 100%;
  line-height: 24px;
  border: 1px solid #D3D3D3;
  background: #F8F8F8;
  cursor: pointer;
}

div.form div.knob svg {
  transition: all 0.3s ease;
  position: relative;
  display: block;
  border: none;
  margin: 0px auto;
  left: 0px;
  right: 0px;
  width: 24px;
  height: 24px;
  fill: #838383;
}

div.form div.list {
  position: relative;
  display: block;
  margin: 0px 0px;
  padding: 5px 10px;
  width: auto;
  border: 1px solid #D3D3D3;
  background: #FFFFFF;
  line-height: 22px;
}

div.form div.list.stop {
  border: 1px solid #E27373;
  background: #FFF7F7;
}

div.form div.list.stop dd {
  border-color: #E27373;
}

div.form div.list label {
  display: block;
  margin: 0px;
  padding: 0px;
  line-height: 20px;
  font-weight: 500;
  font-size: 14px;
  color: #616F77;
}

div.form div.list dl {
  display: block;
  margin: 0px;
  padding: 0px;
}

div.form div.list dl.lock {
  color: #757575;
}

div.form div.list dl.lock ul:after {
  border-color: #B4B8BF transparent transparent transparent;
}

div.form div.list dt {
  display: block;
  margin: 0px;
  padding: 5px 0px;
}

div.form div.list dd {
  position: absolute;
  display: block;
  z-index: 1;
  margin: 0px 0px;
  padding: 0px 0px;
  top: 100%;
  left: -1px;
  width: 100%;
  border-style: solid;
  border-color: #4285F6;
  border-width: 0px 1px 1px 1px;
  box-shadow: 0px 1px 2px 0px rgba(50, 115, 220, 0.30);
  box-sizing: content-box;
}

div.form div.list dl.open dt ul:after {
  border-width: 0px 5px 6px 5px;
  border-color: transparent transparent #888888 transparent;
}

div.form div.list em {
  position: relative;
  display: block;
  margin: 0px;
  padding: 5px 39px 5px 10px;
  background: #F8F8F8;
}

div.form div.list em:after {
  position: absolute;
  display: block;
  content: '';
  margin: auto 0px;
  width: 16px;
  height: 16px;
  top: 0px;
  right: 10px;
  bottom: 0px;
  background-size: 16px 16px;
  background-image: url(../images/search.svg);
}

div.form div.list em input {
  display: block;
  width: 100%;
  height: 24px;
  line-height: 22px;
  font-size: 14px;
  outline: none;
  border: none;
  background: transparent;
}

div.form div.list dt ul {
  position: relative;
  display: block;
  margin: 0px;
  padding: 0px;
}

div.form div.list dt ul:after {
  position: absolute;
  display: block;
  content: '';
  top: 0px;
  right: 5px;
  border-style: solid;
  border-width: 6px 5px 0px 5px;
  border-color: #888888 transparent transparent transparent;
}

div.form div.list dt ul {
  overflow: hidden;
  display: block;
  margin: -5px;
  padding: 0px 0px;
}

div.form div.list dt li {
  list-style: none;
  overflow: hidden;
  position: relative;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  float: left;
  margin: 0px 0px;
  padding: 2px 15px 2px 5px;
  font-size: 14px;
  cursor: pointer;
}

div.form div.list dt li.chip {
  overflow: hidden;
  margin: 0px 5px 5px 0px;
  padding: 5px 25px 5px 10px;
  border: 1px solid #E4E4E4;
  background: #F9F9F9;
}

div.form div.list li.chip button {
  position: absolute;
  display: block;
  outline: none;
  border: none;
  margin: 0px;
  padding: 0px;
  top: 0px;
  right: 0px;
  width: 15px;
  height: 100%;
  background: #E8E8E8;
}

div.form div.list li.chip button:before {
  position: absolute;
  display: block;
  content: '';
  top: 0px;
  right: 15px;
  width: 1px;
  height: 100%;
  background: #E4E4E4;
}

div.form div.list li.hint {
  color: #757575;
}

div.form div.list li.mark {
  background: #F5F5F5;
}

div.form div.list li.miss {
  cursor: default;
}

div.form div.list dd ul {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  display: block;
  top: 100%;
  left: 0px;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

div.form div.list dd li {
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 22px;
  list-style: none;
  font-size: 14px;
  overflow: hidden;
  display: block;
  margin: 0px 0px;
  padding: 5px 10px;
  background: #FFFFFF;
  cursor: pointer;
}

div.form div.list dd li:not(.miss):hover {
  background: #FBFBFB;
}

div.form div.list dd li img {
  display: block;
  float: left;
  margin: 0px 10px 0px 0px;
  border: none;
  top: 0px;
  left: 0px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border-color: #FBFBFB;
  border-style: solid;
  border-width: 2px;
}

div.form div.list dd li sup {
  overflow: hidden;
  display: block;
  padding: 0px 0px;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  line-height: 16px;
  font-weight: normal;
  font-style: normal;
  font-size: 14px;
  color: #333333;
}

div.form div.list dd li sub {
  overflow: hidden;
  display: block;
  padding: 0px 0px;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  line-height: 16px;
  font-weight: normal;
  font-style: normal;
  font-size: 12px;
  color: #555555;
}

div.form div.list dt li b {
  font-weight: 700;
  font-size: 14px;
  color: #535353;
}

div.form div.list dd li strong {
  overflow: hidden;
  display: block;
  line-height: 22px;
  font-weight: 600;
  font-size: 14px;
  color: #353535;
}

div.form div.list dd li small {
  overflow: hidden;
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: #757575;
}

div.form div.list.mark label {
  opacity: 0.5;
}

div.form div.text {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0px 0px;
  padding: 5px 10px;
  border: 1px solid #D3D3D3;
  background: #FFFFFF;
}

div.form div.text.stop {
  border: 1px solid #E27373;
  background: #FFF7F7;
}

div.form div.fail {
  border: 1px solid #E27373;
  background: #FFF7F7;
}

div.form div.lock {
  background-color: #F8F8F8;
  border-color: #E7E7E7;
}

div.form div.lock input {
  color: #B4B8BF;
}

div.form div.text label {
  display: block;
  float: left;
  margin: 0px;
  padding: 0px;
  line-height: 20px;
  font-weight: 500;
  font-size: 14px;
  color: #616F77;
}

div.form div.text small {
  position: absolute;
  display: block;
  padding: 0px 5px;
  right: 5px;
  bottom: 5px;
  line-height: 20px;
  font-weight: 500;
  font-size: 12px;
  color: #535353;
  background: rgba(255, 255, 255, 0.8);
}

div.form div.text textarea {
  overflow: visible;
  display: block;
  outline: none;
  border: none;
  resize: none;
  margin: 0px 0px;
  padding: 0px 0px;
  width: 100%;
  line-height: 22px;
  font-weight: normal;
  font-size: 14px;
  background: transparent;
  color: #2B2B2B;
}

div.form div.text input {
  display: block;
  outline: none;
  border: none;
  margin: 0px 0px;
  padding: 0px 0px;
  width: 100%;
  vertical-align: middle;
  line-height: 26px;
  font-weight: normal;
  font-size: 14px;
  background: transparent;
  color: #2B2B2B;
}

div.form div.text input:empty ~ span.hint {
  padding-bottom: 0px;
  bottom: 10px;
}

div.form div.text input:focus ~ span.hint {
  padding-bottom: 20px;
  color: #65B6FB;
}

div.form div.text input:focus ~ span.hint:before {
  background: #65B6FB;
}

div.form div.text span.hint {
  position: absolute;
  display: block;
  font-size: 14px;
  color: #758396;
  padding-bottom: 20px;
  left: 0px;
  bottom: 0px;
  width: 100%;
}

div.form div.text span.hint:before {
  position: absolute;
  display: block;
  content: '';
  left: 0px;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: #B9C2CB;
}

div.form div.text span.note {
  display: block;
  margin: 5px 0px;
  font-size: 12px;
  color: #758396;
}

div.form div.spot {
  background: #FBFBFB;
  border: 1px solid #4285F6;
  box-shadow: 0px 1px 2px 0px rgba(50, 115, 220, 0.30);
}

div.form div.icon {
  padding-right: 10px;
  padding-left: 50px;
}

div.form div.icon:before {
  position: absolute;
  display: block;
  content: '';
  top: 0px;
  left: 0px;
  width: 40px;
  height: 100%;
  border-right: 1px solid #D3D3D3;
  background: #F1F1F1;
}

div.form div.icon svg {
  position: absolute;
  display: block;
  margin: auto 0px;
  border: none;
  top: 0px;
  left: 8px;
  bottom: 0px;
  width: 24px;
  height: 24px;
  fill: #838383;
}

div.snack {
  transition: all 0.20s ease;
  visibility: hidden;
  position: fixed;
  display: block;
  opacity: 0;
  z-index: 1;
  margin: 0px;
  padding: 10px 38px 10px 44px;
  left: 20px;
  right: 0px;
  bottom: 0px;
  width: 30%;
  max-width: 310px;
  min-height: 48px;
  background: #44B8ED;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
}

div.snack.show {
  visibility: visible;
  opacity: 1;
  bottom: 20px;
}

div.toast {
  transition: all 0.20s ease;
  visibility: hidden;
  position: fixed;
  display: block;
  opacity: 0;
  z-index: 1;
  margin: 0px auto;
  padding: 10px 38px 10px 44px;
  top: 0px;
  left: 0px;
  right: 0px;
  width: 30%;
  max-width: 400px;
  min-height: 48px;
  background: #44B8ED;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
}

div.toast:before {
  position: absolute;
  display: block;
  content: '';
  top: 10px;
  left: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
}

div.toast:after {
  position: absolute;
  display: block;
  content: '';
  top: 14px;
  left: 14px;
  width: 16px;
  height: 16px;
}

div.toast.show {
  visibility: visible;
  opacity: 1;
  top: 70px;
}

div.toast.done {
  background: #79BE78;
}

div.toast.done:after {
  background-image: url(../images/done.svg);
  background-size: 16px 16px;
}

div.toast.warn {
  background: #EBB32F;
}

div.toast.warn:after {
  background-image: url(../images/warn.svg);
  background-size: 16px 16px;
}

div.toast.stop {
  background: #E54E48;
}

div.toast.stop:after {
  background-image: url(../images/stop.svg);
  background-size: 16px 16px;
}

div.toast button {
  position: absolute;
  overflow: hidden;
  display: block;
  opacity: 1;
  margin: 0px 0px;
  padding: 0px 0px;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  background: none;
  outline: none;
  border: none;
  background: none;
}

div.toast button:hover {
  opacity: 0.6;
}

div.toast button img {
  display: block;
  border: none;
  width: 100%;
  height: 100%;
}

div.toast p {
  display: block;
  margin: 0px 0px;
  padding: 0px 0px;
  line-height: 18px;
  font-size: 14px;
  color: #FFFFFF;
}

div.alert {
  visibility: hidden;
  overflow: hidden;
  position: fixed;
  z-index: 3;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

div.alert.show {
  visibility: visible;
}

div.alert.mask.show:before {
  opacity: 1;
}

div.alert.show div.case {
  opacity: 1;
  top: 90px;
}

div.alert.mask:before {
  transition: all 0.10s ease;
  display: block;
  content: '';
  opacity: 1;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

div.alert.load div.case:before {
  position: absolute;
  display: block;
  content: attr(load);
  left: 0px;
  bottom: 10px;
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #5E5E5E;
}

div.alert.load div.case:after {
  animation: spin 2s linear infinite;
  position: relative;
  display: block;
  content: '';
  margin: 10px auto 30px auto;
  border-width: 2px;
  border-radius: 50%;
  border-style: solid;
  border-color: #DE7B14 #D8DEE2 #D8DEE2 #D8DEE2;
  left: 0px;
  right: 0px;
  width: 40px;
  height: 40px;
}

div.alert.load div.body {
  display: none;
}

div.alert.load div.foot {
  display: none;
}

div.alert div.case {
  transition: all 0.20s ease;
  position: absolute;
  display: block;
  opacity: 0;
  margin: 0px auto;
  top: 0px;
  left: 0px;
  right: 0px;
  width: 500px;
  max-width: 80%;
  max-height: 80%;
  border: 4px solid #424242;
  background: #FFFFFF;
}

div.alert div.case.long {
  width: 1224px;
}

div.alert div.case.wide {
  width: 900px;
}

div.alert div.head {
  position: relative;
  display: block;
  margin: 0px 0px;
  padding: 15px 15px 30px 15px;
  background: #424242;
}

div.alert div.head strong {
  display: block;
  float: left;
  font-weight: normal;
  font-size: 16px;
  color: #FFFFFF;
}

div.alert div.head button {
  transition: all 0.10s ease;
  position: absolute;
  overflow: hidden;
  display: block;
  opacity: 1;
  margin: 0px;
  padding: 0px;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  background: none;
  outline: none;
  border: none;
  background: none;
}

div.alert div.head button svg {
  overflow: hidden;
  width: 24px;
  height: 24px;
  fill: #FFFFFF;
}

div.alert div.head button img {
  position: absolute;
  display: block;
  margin: auto;
  border: none;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 18px;
  height: 18px;
}

div.alert div.head button:hover {
  opacity: 0.6;
}

div.alert div.head nav {
  overflow: hidden;
  display: block;
  clear: both;
  margin: 30px 0px -30px 0px;
  padding: 0px 0px;
}

div.alert div.head nav ul {
  display: block;
  margin: 0px -2px;
  padding: 0px 0px;
}

div.alert div.head nav li {
  list-style: none;
  display: block;
  float: left;
  margin: 0px 0px;
  padding: 0px 2px;
}

div.alert div.head nav a {
  display: block;
  outline: none;
  padding: 10px 20px;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 14px;
  background: #525252;
  color: #FFFFFF;
}

div.alert div.head nav li.mark a {
  background: #FFFFFF;
  color: #424242;
  cursor: default;
}

div.alert div.head div {
  position: absolute;
  overflow: hidden;
  display: block;
  top: 40px;
  right: 20px;
  margin: 0px 0px;
  padding: 3px 3px;
  width: 128px;
  height: 128px;
  background: #FFFFFF;
}

div.alert div.head div img {
  display: block;
  margin: none;
  border: none;
  width: 100%;
  height: 100%;
  background: #F8F8F8;
}

div.alert.done div.case {
  border: 4px solid #5CB85C;
}

div.alert.done div.head {
  background: #5CB85C;
}

div.alert.warn div.case {
  border: 4px solid #FFB75B;
}

div.alert.warn div.head {
  background: #FFB75B;
}

div.alert.stop div.case {
  border: 4px solid #B5433E;
}

div.alert.stop div.head {
  background: #B5433E;
}

div.alert div.body {
  display: block;
  padding: 15px 15px;
}

div.alert div.body p {
  overflow: hidden;
  display: block;
  margin: 0px 0px;
  padding: 0px 0px;
  line-height: 22px;
  font-size: 14px;
}

div.alert div.body div {
  display: block;
}

div.alert div.body div img {
  float: right;
  margin: 5px 0px 5px 5px;
  width: 320px;
  height: auto;
  padding: 2px;
  border-width: 2px;
  border-style: solid;
  border-color: #62BB62;
  background: #F8F8F8;
}

div.alert div.body div p {
  overflow: visible;
}

div.alert div.foot {
  position: relative;
  overflow: hidden;
  display: block;
  clear: both;
  padding: 10px 15px;
  background: #F5F5F5;
}

div.alert div.foot:before {
  position: absolute;
  display: block;
  content: '';
  top: 0px;
  left: 0px;
  width: 100%;
  height: 1px;
  background: #E5E5E5;
}

div.alert div.foot:after {
  position: absolute;
  display: block;
  content: '';
  top: 1px;
  left: 0px;
  width: 100%;
  height: 1px;
  background: #FFFFFF;
}

div.alert div.foot ul {
  overflow: hidden;
  display: block;
  float: right;
  margin: 0px -5px;
  padding: 0px 0px;
}

div.alert div.foot li {
  list-style: none;
  display: block;
  float: left;
  margin: 0px 0px;
  padding: 0px 5px;
}

div.alert div.foot button {
  transition: all 0.2s ease-in-out;
  padding: 5px 20px;
  outline: none;
  border: none;
  background: #FFFFFF;
  color: #333333;
  border: 1px solid #E1E8ED;
  line-height: 20px;
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
}

div.alert div.foot button:hover {
  background: #F9F9F9;
}

div.alert div.foot button[type=submit] {
  border: 1px solid #1261DE;
  background: #4285F6;
  color: #FFFFFF;
}

div.alert div.foot button[type=submit]:not(:disabled):hover {
  background: #3476E1;
}

div.alert.done div.foot button[type=submit] {
  background: #81C784;
  border: 1px solid #52B154;
  color: #FFFFFF;
}

div.alert.done div.foot button[type=submit]:not(:disabled):hover {
  background: #6CBE6F;
}

div.alert.warn div.foot button[type=submit] {
  background: #F6BB42;
  border: 1px solid #D2912A;
  color: #FFFFFF;
}

div.alert.warn div.foot button[type=submit]:hover {
  background: #F4A911;
}

div.alert.stop div.foot button[type=submit] {
  background: #EF5350;
  border: 1px solid #E32915;
  color: #FFFFFF;
}

div.alert.stop div.foot button[type=submit]:not(:disabled):hover {
  background: #EC3734;
}

div.alert div.foot button[type=submit]:disabled {
  opacity: 0.5;
  cursor: default;
}

div.boll {
  visibility: hidden;
  overflow: hidden;
  position: fixed;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

div.boll.show {
  visibility: visible;
}

div.boll.show:before {
  opacity: 1;
}

div.boll.show div.snap {
  opacity: 1;
  top: 80px;
}

div.boll:before {
  transition: all 0.10s ease;
  display: block;
  content: '';
  opacity: 1;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

div.boll div.tool {
  position: absolute;
  display: block;
  top: 80px;
  right: 30px;
}

div.boll div.tool div {
  display: block;
  padding: 4px 4px;
  cursor: pointer;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
}

div.boll div.tool div:hover {
  background: rgba(50, 50, 50, 0.6);
}

div.boll div.tool svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: #FFFFFF;
}

div.boll div.tool dl {
  display: block;
  margin: 0px -5px;
  padding: 0px 0px;
}

div.boll div.tool dt {
  display: block;
  float: left;
  margin: 0px 0px;
  padding: 0px 5px;
}

div.boll div.snap {
  transition: all 0.20s ease;
  position: absolute;
  overflow: hidden;
  display: block;
  opacity: 0;
  z-index: 1;
  margin: 0px auto;
  top: 100px;
  left: 0px;
  right: 0px;
  width: 710px;
  height: 760px;
}

div.boll div.snap img {
  position: absolute;
  display: block;
  margin: auto;
  border: none;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
}

div.boll div.snap div {
  position: absolute;
  overflow: hidden;
  display: block;
  padding: 15px 15px;
  top: 365px;
  right: 20px;
  bottom: 3px;
  width: 340px;
  height: 160px;
}

div.boll div.snap dl {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0px 0px;
  padding: 0px 0px;
  width: 100%;
  height: 100%;
}

div.boll div.snap dt {
  transition: all 0.20s ease;
  visibility: hidden;
  overflow: hidden;
  display: block;
  position: absolute;
  left: 280px;
  top: 0px;
  width: 100%;
  height: 100%;
}

div.boll div.snap dt[show] {
  visibility: visible;
  left: 0px;
}

div.boll div.snap p {
  overflow: hidden;
  display: block;
  margin: 0px;
  padding: 0px;
  font-weight: 500;
  font-size: 22px;
  color: #FFFFFF;
}

div.boll div.snap a {
  overflow: hidden;
  display: block;
  margin: 0px;
  padding: 0px;
  font-weight: 500;
  font-size: 22px;
  color: #FFFFFF;
}

div#drop {
  visibility: hidden;
  overflow: hidden;
  position: fixed;
  z-index: 2;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

div#drop.show {
  visibility: visible;
}

div#drop.show:before {
  opacity: 1;
}

div#drop.show div.snap {
  opacity: 1;
  top: 100px;
}

div#drop:before {
  transition: all 0.10s ease;
  display: block;
  content: '';
  opacity: 1;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

div#drop div.tool {
  position: absolute;
  display: block;
  top: 80px;
  right: 30px;
}

div#drop div.tool div {
  overflow: hidden;
  display: block;
  padding: 4px 4px;
  cursor: pointer;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
}

div#drop div.tool div:hover {
  background: rgba(50, 50, 50, 0.6);
}

div#drop div.tool svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: #FFFFFF;
}

div#drop div.tool dl {
  display: block;
  margin: 0px -5px;
  padding: 0px 0px;
}

div#drop div.tool dt {
  display: block;
  float: left;
  margin: 0px 0px;
  padding: 0px 5px;
}

div#drop div.snap {
  transition: all 0.20s ease;
  position: absolute;
  overflow: hidden;
  display: block;
  opacity: 0;
  margin: 0px auto;
  top: 0px;
  left: 0px;
  right: 0px;
  width: 60%;
  height: 80%;
}

div#drop div.snap img {
  position: absolute;
  display: block;
  margin: auto;
  border: none;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: auto;
  height: auto;
  border: 2px solid rgba(0, 0, 0, 0.6);
}

div#drop div.snap div {
  position: absolute;
  display: block;
  padding: 15px 30px;
  left: 0px;
  bottom: 3px;
  width: 100%;
  font-weight: 500;
  font-size: 16px;
  color: #FFFFFF;
}

div.blank {
  position: relative;
  overflow: hidden;
  display: block;
  clear: both;
  padding: 20px 0px;
}

div.blank:before {
  position: relative;
  display: block;
  content: '';
  margin: 0px auto;
  padding: 0px 0px;
  left: 0px;
  right: 0px;
  width: 128px;
  height: 128px;
  border-color: #E3E3E3;
  border-width: 2px;
  border-style: solid;
  border-radius: 50%;
  background: #FFFFFF;
}

div.blank svg {
  position: absolute;
  display: block;
  border: none;
  margin: auto;
  top: 48px;
  left: 0px;
  right: 0px;
  width: 62px;
  height: 72px;
}

div.blank sup {
  position: relative;
  display: block;
  margin: 0px auto;
  padding: 30px 0px 10px 0px;
  left: 0px;
  right: 0px;
  width: 50%;
  text-align: center;
  font-weight: bold;
  font-size: 22px;
  color: #727272;
}

div.blank sub {
  position: relative;
  display: block;
  margin: 0px auto;
  padding: 0px 0px;
  left: 0px;
  right: 0px;
  width: 50%;
  text-align: center;
  font-weight: normal;
  font-size: 16px;
  color: #888888;
}

div.image {
  overflow: hidden;
  display: block;
  margin: 5px 0px;
  width: 100%;
}

div.image img {
  display: block;
  border: none;
  width: 100%;
  height: 100%;
}

div.table {
  display: block;
}

div.table table {
  border-collapse: collapse;
  border-spacing: 0px;
  table-layout: fixed;
  empty-cells: show;
  width: 100%;
  background: #FFFFFF;
}

div.table table.strip {
  border: 1px #CBCBCB solid;
}

div.table table.strip th {
  border-left: 1px #CBCBCB solid;
}

div.table table.strip td {
  border-left: 1px #CBCBCB solid;
}

div.table thead {
  white-space: nowrap;
  background: #FEFEFE;
  color: #616F78;
  width: 100%;
}

div.table label {
  overflow: hidden;
  display: block;
  cursor: pointer;
  width: 190px;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
}

div.table label:hover span {
  border: 1px solid #838383;
}

div.table label input {
  display: none;
}

div.table label input:checked + span {
  border: 1px solid #838383;
  background: #9E9E9E;
}

div.table label input:checked + span svg {
  display: block;
}

div.table label input:indeterminate + span:after {
  position: absolute;
  display: block;
  content: '';
  margin: auto;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 9px;
  height: 3px;
  background: #9E9E9E;
}

div.table label input:indeterminate + span:hover:after {
  background: #838383;
}

div.table label input:disabled + span {
  border: 1px solid #D3D3D3;
  background: #F8F8F8;
}

div.table label input:disabled + span path {
  fill: #D3D3D3;
}

div.table label input:disabled + span:after {
  background: #D3D3D3;
}

div.table label span {
  position: relative;
  display: block;
  float: left;
  width: 20px;
  height: 20px;
  border: 1px solid #9E9E9E;
}

div.table label svg {
  position: absolute;
  display: none;
  margin: auto;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 12px;
  height: 16px;
}

div.table label path {
  fill: #FFFFFF;
}

div.table label[lock] span {
  border: 1px solid #D3D3D3;
  background: #F8F8F8;
}

div.table tr.odd {
  background: #F4F4F4;
}

div.table tr.even {
  background: #F8F8F8;
}

div.table tr.spot {
  background: #D9EDF7;
}

div.table tr.done {
  background: #DFF0D8;
}

div.table tr.warn {
  background: #FCF8E3;
}

div.table tr.stop {
  background: #F2DEDE;
}

div.table tr.mark {
  background: #E5F2F8;
}


div.table table.grid tbody {
  display: table;
  width: 100%;
  border: 1px #E8E8E8 solid;
}

div.table table.grid tbody + tbody {
  margin-top: 10px;
}

div.table table.grid tr + tr {
  border-top: 1px #E8E8E8 solid;
}

div.table table.grid th {
  text-align: left;
  padding: 10px 15px;
  width: 30%;
  font-weight: 400;
  font-size: 14px;
  color: #2E2E2E;
  background: #F8F8F8;
  border-right: 1px #E8E8E8 solid;
}

div.table table.grid th.wide {
  width: 60%;
}

div.table table.grid td {
  text-align: left;
  padding: 10px 15px;
  font-size: 14px;
  width: 70%;
  color: #5E5E5E;
}

div.table table.grid td.tiny {
  width: 40%;
}

div.table table.grid td.spot {
  color: #428BCB;
}

div.table table.grid td.done {
  color: #5CB85B;
}

div.table table.grid td.warn {
  color: #F2BD4E;
}

div.table table.grid td.stop {
  color: #E25D6F;
}

div.table table.grid td.text {
  padding: 0px 0px;
}

div.table table.grid td.text input {
  display: block;
  padding: 10px 15px;
  border: none;
  outline: none;
  width: 100%;
  font-size: 14px;
}

div.table table.grid td.text input:focus {
  background: #FBFBFB;
}

div.table table.list th {
  text-transform: uppercase;
  text-align: center;
  position: relative;
  font-weight: 700;
  font-size: 14px;
  border-bottom: 1px #798992 solid;
}

div.table th.sort:before {
  position: absolute;
  display: block;
  content: "";
  top: 10px;
  right: 5px;
  width: 0px;
  height: 0px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid #DBE0E2;
}

div.table th.sort:after {
  position: absolute;
  display: block;
  content: "";
  right: 5px;
  bottom: 10px;
  width: 0px;
  height: 0px;
  border-top: 6px solid #DBE0E2;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

div.table th.sort a:after {
  position: absolute;
  display: block;
  content: "";
  left: 0px;
  bottom: -2px;
  width: 100%;
  height: 1px;
}

div.table th.up:before {
  border-bottom: 6px solid #428BCB;
}

div.table th.down:after {
  border-top: 6px solid #428BCB;
}

div.table th.up a:after {
  background: #428BCB;
}

div.table th.down a:after {
  background: #428BCB;
}

div.table table.list th.up a {
  color: #428BCB;
}

div.table table.list th.down a {
  color: #428BCB;
}

div.table table.list th a {
  text-decoration: none;
  position: relative;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 0px 20px;
  line-height: 34px;
  outline: none;
  color: inherit;
}

div.table table.list td {
  text-align: center;
  padding: 5px 15px;
  border-bottom: 1px #CBCBCB solid;
}

div.table table.list td.wrap {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

div.table table.list td.left {
  text-align: left;
}

div.table table.list td.right {
  text-align: right;
}

div.table td {
  font-size: 14px;
}

div.table td p {
  margin: 0px;
  padding: 0px;
}

div.table td a {
  text-decoration: none;
  color: inherit;
}

div.table td i {
  font-style: normal;
  color: #B4B8BF;
}

div.table td a:hover {
  text-decoration: underline;
  color: #428BEB;
}

div.table td dl {
  display: table;
  margin: 0px auto;
  padding: 0px;
}

div.table dt {
  float: left;
}

div.table dt a {
  position: relative;
  display: block;
  min-width: 32px;
  min-height: 32px;
  border: 1px transparent solid;
  background-position: center center;
  background-repeat: no-repeat;
}

div.table dt svg {
  position: absolute;
  display: block;
  border: none;
  margin: auto;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 24px;
  height: 24px;
}

div.table dt path {
  transition: all 0.3s ease;
  fill: #838383;
}

div.table dt:hover path {
  fill: #62BB62
}

div.table span.canvas {
  display: block;
  width: 48px;
  height: 48px;
  
}

div.table span.canvas img {
  display: block;
  border: none;
  width: 100%;
  height: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  background: #B3B3B3;
  
}

div.table td small {
  overflow: hidden;
  display: block;
  font-size: 12px;
  color: #8C8C8C;
}

div.table td strong {
  overflow: hidden;
  display: inline;
  padding: 5px 10px;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 14px;
}

div.table td.spot {
  color: #428BCB;
}

div.table td.done {
  color: #5CB85B;
}

div.table td.warn {
  color: #F2BD4E;
}

div.table td.stop {
  color: #E25D6F;
}

div.table td ul {
  display: table;
  list-style: none;
  margin: 0px auto;
  padding: 0px;
}

div.table td li {
  float: left;
}

div.table td li a {
  position: relative;
  display: block;
  min-width: 32px;
  min-height: 32px;
  border: 1px transparent solid;
  background-position: center center;
  background-repeat: no-repeat;
}

div.table td li a:hover {
  border-color: #DDDDDD;
  background-color: #FBFBFB;
}

div.table td li img {
  position: absolute;
  display: block;
  border: none;
  margin: auto;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 24px;
  height: 24px;
}

div.table span.person {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 40px;
}

div.table span.person img {
  position: absolute;
  display: block;
  margin: none;
  border: none;
  top: 0px;
  left: 0px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border-color: #FBFBFB;
  border-style: solid;
  border-width: 2px;
}

div.table span.person sup {
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  line-height: 16px;
  font-weight: normal;
  font-style: normal;
  font-size: 12px;
  color: #515151;
}

div.table span.person sub {
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  line-height: 16px;
  font-weight: normal;
  font-style: normal;
  font-size: 12px;
  color: #727883;
}

div.margen + div {
  margin-top: 10px;
}

/**
 * ELEMENTS
 */

div#hint {
  transition: opacity 0.20s ease;
  position: absolute;
  display: block;
  opacity: 0;
  top: 0px;
  left: 0px;
  margin: 0px 0px;
  padding: 0px 0px;
  border: 2px solid #434343;
  background: #535353;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

div#hint:before {
  position: absolute;
  display: block;
  content: '';
  margin: 0px auto;
  top: 100%;
  left: 0px;
  right: 0px;
  width: 10px;
  height: 12px;
  border-style: solid;
  border-width: 12px 10px 0px 10px;
  border-color: #434343 transparent transparent transparent;
}

div#hint svg.cone {
  position: absolute;
  display: none;
  width: 18px;
  height: 10px;
  fill: #989898;
}

div#hint div.body {
  display: block;
  margin: 0px 0px;
  padding: 5px 10px;
  color: #FFFFFF;
}

div#hint div.card  {
  overflow: hidden;
  display: block;
  margin: -5px -10px;
}

div#hint div.card div {
  position: relative;
  overflow: hidden;
  display: block;
  width: 350px;
  height: 62px;
  padding: 5px 10px 5px 74px;
  background: #535353;
}

div#hint div.card div:before {
  position: absolute;
  display: block;
  content: '';
  top: 5px;
  left: 10px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #FFFFFF;
}

div#hint div.card div.status:after {
  position: absolute;
  display: block;
  content: '';
  top: 10px;
  left: 50px;
  width: 10px;
  height: 10px;
  border-color: #FFFFFF;
  border-style: solid;
  border-radius: 50%;
  border-width: 2px;
  background: #9E9E9E;
}

div#hint div.card div.live:after {
  background: #47B24B;
}

div#hint div.card div.idle:after{
  background: #82B7E3;
}

div#hint div.card div.busy:after {
  background: #F7432D;
}

div#hint div.card div img {
  position: absolute;
  display: block;
  margin: 0px;
  border: none;
  top: 7px;
  left: 12px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

div#hint div.card div sup {
  overflow: hidden;
  display: block;
  color: #B3B3B3;
  text-overflow: ellipsis;
  white-space: nowrap; 
  font-size: 18px;
  font-weight: bold;
}

div#hint div.card div sub {
  overflow: hidden;
  display: block;
  color: #E3E3E3;
  text-overflow: ellipsis;
  white-space: nowrap; 
  font-size: 14px;
  font-weight: bold;
}

div#hint div.card nav {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0px 0px;
  padding: 5px 5px;
  background: #FFFFFF;
}

div#hint div.card nav svg {
  display: block;
  width: 24px;
  height: 24px;
}

div#hint div.card nav path {
  fill: #838383;
}

div#hint div.card nav dl {
  display: block;
  padding: 0px 0px;
  margin: -2px -2px;
}

div#hint div.card nav dt {
  position: relative;
  display: block;
  float: left;
  width: 50%;
  margin: 0px 0px 0px 0px;
  padding: 2px 2px 2px 36px;
}

div#hint div.card nav svg {
  position: absolute;
  display: block;
  margin: auto 0px;
  top: 0px;
  left: 2px;
  bottom: 0px;
}

div#hint div.card nav sup {
  display: block;
  color: #535353;
  text-overflow: ellipsis;
  white-space: nowrap; 
  font-size: 14px;
  font-weight: normal;
}

div#hint div.card nav sub {
  display: block;
  color: #616F77;
  text-overflow: ellipsis;
  white-space: nowrap; 
  font-size: 12px;
  font-weight: normal;
}

div#hint.show {
  opacity: 1;
}

div#hint.done {
  border: 2px solid #50B154;
  background: #68D8BE;
}

div#hint.warn {
  border: 2px solid #E4D836;
  background: #EDE478;
}

div#hint.stop {
  border: 2px solid #B5433E;
  background: #E27373;
}

div#hint.stop {
  border: 2px solid #B5433E;
  background: #EF5356;
}

div#hint.stop:before {
  border-color: #B5433E transparent transparent transparent;
}

div#hint.stop.left:before {
  border-color: transparent transparent transparent #B5433E;
}

div#hint.stop.right:before {
  border-color: transparent #B5433E transparent transparent;
}

div#hint.stop.bottom:before {
  border-color: transparent transparent #B5433E transparent;
}

div#hint.bottom:before {
  top: -12px;
  margin: 0px auto;
  border-width: 0px 10px 12px 10px;
  border-color: transparent transparent #434343 transparent;
}

div#hint.right:before {
  top: 0px;
  left: -12px;
  right: auto;
  bottom: 0px;
  margin: auto 0px;
  border-width: 10px 12px 10px 0px;
  border-color: transparent #434343 transparent transparent;
}

div#hint.left:before {
  top: 0px;
  left: auto;
  right: -12px;
  bottom: 0px;
  margin: auto 0px;
  border-width: 10px 0px 10px 12px;
  border-color: transparent transparent transparent #434343;
}

div.pages {
  overflow: hidden;
  display: block;
  clear: both;
  margin: 10px 0px;
}

div.pages nav {
  display: block;
  float: right;
  margin: 0px 0px;
  padding: 4px 4px;
  border: 1px #CBCBCB solid;
  background: #FFFFFF;
}

div.pages em {
  display: block;
  float: left;
  margin: 0px 4px 0px 0px;
  padding: 0px 10px;
  line-height: 28px;
  font-style: normal;
  font-size: 14px;
  color: #535353;
  background: #E8E8E8;
}

div.pages ul {
  display: block;
  float: left;
  margin: 0px -2px;
  padding: 0px 0px;
}

div.pages li {
  list-style: none;
  display: block;
  float: left;
  padding: 0px 2px;
  font-size: 14px;
}

div.pages a {
  display: block;
  padding: 5px 10px;
  border: 1px #CBCBCB solid;
  background: #F8F8F8;
  color: #838383;
}

div.pages a:hover {
  background: #F2F2F2;
  color: #488BFF;
}

div.pages b {
  display: block;
  padding: 5px 10px;
  border: 1px #D1D5D9 solid;
  background: #FFFFFF;
  color: #428BEB;
}

div.pages i {
  font-style: normal;
  font-weight: bold;
  line-height: 28px;
  color: #838383;
}

/**
 * TABLET
 */

@media all and (max-width : 1024px) {
  .clamp {
    width: 100%;
  }
}

/**
 * PHONE
 */

@media all and (max-width : 768px) {
  .clamp {
    width: 100%;
  }
}