@charset "UTF-8";
@font-face {
  font-family: 'Roboto';
  src: url("fonts/Roboto-Light.woff2") format("woff2"), url("fonts/Roboto-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'Roboto';
  src: url("fonts/Roboto-Regular.woff2") format("woff2"), url("fonts/Roboto-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'Roboto';
  src: url("fonts/Roboto-Medium.woff2") format("woff2"), url("fonts/Roboto-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap; }

html {
  font-size: 10px;
  font-family: 'Roboto', sans-serif;
  font-weight: normal; }

/*color → backgrouds*/
/*color → backgrouds*/
/*


*/
/*Dark color → backgrouds*/
.selectNo {
  user-select: none;
  pointer-events: none; }

/*this add height to the rows, 
because when all the elements are float, 
container height goes to 0*/
.a-shake {
  animation: a-shake .350s infinite; }

@keyframes a-shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0); }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0); } }

.rotation {
  animation: rotation 0.5s infinite; }

@keyframes rotation {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  50% {
    transform: rotate(900deg);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  100% {
    transform: rotate(1800deg); } }

@keyframes loading {
  0% {
    transform: rotate(0) scale(1);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  100% {
    transform: rotate(1800deg) scale(1.3); } }

.loading {
  animation: loading 2.000s;
  animation-iteration-count: infinite;
  animation-direction: reverse; }

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  50% {
    -webkit-transform: scale3d(1.07, 1.07, 1.07);
    transform: scale3d(1.07, 1.07, 1.07); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1; }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0; } }

.flipOutX {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important; }

.font-page-title {
  position: relative;
  display: inline-block;
  width: calc(100% - 16px);
  margin-top: 14px;
  margin-left: 67px;
  color: #000;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.15px;
  user-select: none;
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1, 1);
  letter-spacing: 1.5px; }

.font-72 {
  position: relative;
  display: block;
  color: #202124;
  font-size: 72px;
  font-weight: 500;
  letter-spacing: 0.4px; }

.font-card-title {
  position: relative;
  display: inline-block;
  width: calc(100% - 16px);
  margin-top: 8px;
  max-width: 900px;
  left: 51%;
  transform: translateX(-50%);
  color: #000;
  font-size: 14px;
  letter-spacing: 0.25px;
  font-weight: 500;
  font-family: 'Roboto' sans-serif; }

.font-card-des {
  position: relative;
  display: inline-block;
  width: calc(100% - 16px);
  margin-top: 2px;
  margin-bottom: 2px;
  max-width: 900px;
  opacity: 0.54;
  left: 50%;
  transform: translateX(-50%);
  color: #000;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.25px; }

.font-onboard-title {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 16px;
  margin-bottom: 4px;
  color: #202124;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.15px; }

.font-onboard-des {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 16px;
  margin-bottom: 4px;
  color: #202124;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: 0.15px;
  opacity: 0.54; }

.font-title-big {
  display: block;
  margin-top: 8px;
  margin-left: 8px;
  margin-bottom: 4px;
  color: #202124;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 1.5px; }

.font-title {
  display: block;
  margin-top: 8px;
  margin-left: 8px;
  margin-bottom: 4px;
  color: #202124;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1.5px; }

.font-des {
  position: relative;
  display: block;
  margin-left: 8px;
  color: #202124;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.25px; }

.font-des-red {
  display: block;
  color: #B00020;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.25px; }

.font-h6 {
  display: block;
  color: #202124;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.15px; }

.font-subtitle1 {
  display: block;
  color: #202124;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: 0.15px; }

.font-subtitle2 {
  display: block;
  color: #202124;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1px; }

.font-body1 {
  display: block;
  color: #202124;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: 0.5px; }

.font-body2 {
  display: block;
  color: #202124;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.25px; }

.font-body2-b {
  display: block;
  width: 100%;
  color: #202124;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.25px; }

.font-body2-red {
  display: block;
  width: 100%;
  color: #B00020;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.25px; }

.font-button {
  display: block;
  color: #202124;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.25px;
  text-transform: uppercase; }

.font-caption {
  display: block;
  color: #202124;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.4px; }

.font-caption-red {
  display: block;
  color: #B00020;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.4px; }

.font-overline {
  display: block;
  color: #202124;
  font-size: 10px;
  font-weight: normal;
  letter-spacing: 1.5px;
  text-transform: uppercase; }

.font-red {
  color: #B00020; }

.font-icon {
  position: relative;
  display: inline-block;
  width: 100%;
  margin-left: 8px;
  right: 0px;
  color: #000;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1px;
  text-align: center; }
  .font-icon span {
    position: relative;
    display: inline-block; }
    .font-icon span span:nth-child(1) {
      top: 4px;
      height: 20px;
      width: 20px;
      border-radius: 4px;
      background: #0280EE; }
      .font-icon span span:nth-child(1) svg {
        position: absolute;
        display: inline-block;
        height: 16px;
        width: 16px;
        left: 2px;
        top: 2px;
        fill: #ffffff; }
    .font-icon span span:nth-child(2) {
      color: #0280EE;
      font-weight: 500; }
  .font-icon-link span span:nth-child(1) svg {
    user-select: none;
    pointer-events: none; }
  .font-icon-link span span:nth-child(2) {
    cursor: pointer; }
  .font-icon-link span span:nth-child(3) {
    user-select: none;
    pointer-events: none;
    color: #000;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.25px;
    opacity: 0.54; }

.font-icon-title {
  margin-bottom: 4px;
  color: #000;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1.5px; }

.font-icon-h6 {
  color: #000;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.15px; }

.font-icon-h5 {
  color: #000;
  font-size: 27px;
  font-weight: 500;
  letter-spacing: 0.15px; }

.font-icon-green span span:nth-child(1) {
  background: #1b998b; }

.font-icon-green span span:nth-child(2) {
  color: #1b998b; }

.font-icon-red span span:nth-child(1) {
  background: #B00020; }

.font-icon-red span span:nth-child(2) {
  color: #B00020; }

.font-icon-purple span span:nth-child(1) {
  background: #8973d6; }

.font-icon-purple span span:nth-child(2) {
  color: #8973d6; }

.font-icon-orange span span:nth-child(1) {
  background: #f86624; }

.font-icon-orange span span:nth-child(2) {
  color: #f86624; }

.font-icon-cpa span span:nth-child(1) {
  background: #013B6E; }

.font-icon-cpa span span:nth-child(2) {
  color: #013B6E; }

.font-icon-cpb span span:nth-child(1) {
  background: #4AA3F0; }

.font-icon-cpb span span:nth-child(2) {
  color: #4AA3F0; }

.font-icon-cpc span span:nth-child(1) {
  background: #0280EE; }

.font-icon-cpc span span:nth-child(2) {
  color: #0280EE; }

.font-icon-cpd span span:nth-child(1) {
  background: #0078d4; }

.font-icon-cpd span span:nth-child(2) {
  color: #0078d4; }

.font-icon-cpe span span:nth-child(1) {
  background: #0264BA; }

.font-icon-cpe span span:nth-child(2) {
  color: #0264BA; }

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  backface-visibility: hidden;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0; }

input[type=number] {
  -moz-appearance: textfield; }

/*
   0px  -  600px  - phone
 448px  -  600px  - phone
 600px  -  900px  - table  portatil
 900px  -  1200px - table land-scape
1200px  -  1800px - minitor
1800px  -  0000px - big-monitor

min-width 900 from  900 and biger
max-width 900 until 900

ORDER: base, typography, general layout + grid, page layout
1em =16px -> em is better for media query	

*/
/*

*/
.row {
  position: relative;
  margin: 0 auto;
  display: block;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1, 1); }
  .row::after {
    content: "";
    display: table;
    clear: both; }
  .row > div {
    position: relative;
    float: left;
    border: 0.1px solid transparent; }
    .row > div:not(:last-child) {
      margin-right: 16px; }
  .row > .c100 {
    width: 100%; }
  .row > .c75 {
    width: calc( 3 * ((100% - 3 * 16px) / 4) + 2 * 16px); }
  .row > .c66 {
    width: calc( 2 * ((100% - 2 * 16px) / 3) + 16px); }
  .row > .c50 {
    width: calc(      (100% - 16px) / 2); }
  .row > .c33 {
    width: calc(      (100% - 2 * 16px) / 3); }
  .row > .c25 {
    width: calc(      (100% - 3 * 16px) / 4); }
  .row > .c20 {
    width: calc(      (100% - 4 * 16px) / 5); }
  .row > .c16 {
    width: calc(      (100% - 5 * 16px) / 6); }
  .row > .c14 {
    width: calc(      (100% - 6 * 16px) / 7); }
  @media (max-width: 56.25em) {
    .row {
      position: relative;
      margin: 0 auto;
      display: block;
      -webkit-backface-visibility: hidden;
      -webkit-transform: translateZ(0) scale(1, 1); }
      .row::after {
        content: "";
        display: table;
        clear: both; }
      .row > div {
        position: relative;
        float: left;
        border: 0.1px solid transparent; }
        .row > div:not(:last-child) {
          margin-right: 8px; }
      .row > .c100 {
        width: 100%; }
      .row > .c75 {
        width: calc( 3 * ((100% - 3 * 8px) / 4) + 2 * 8px); }
      .row > .c66 {
        width: calc( 2 * ((100% - 2 * 8px) / 3) + 8px); }
      .row > .c50 {
        width: calc(      (100% - 8px) / 2); }
      .row > .c33 {
        width: calc(      (100% - 2 * 8px) / 3); }
      .row > .c25 {
        width: calc(      (100% - 3 * 8px) / 4); }
      .row > .c20 {
        width: calc(      (100% - 4 * 8px) / 5); }
      .row > .c16 {
        width: calc(      (100% - 5 * 8px) / 6); }
      .row > .c14 {
        width: calc(      (100% - 6 * 8px) / 7); } }
  @media (max-width: 37.5em) {
    .row {
      position: relative;
      margin: 0 auto;
      display: block;
      -webkit-backface-visibility: hidden;
      -webkit-transform: translateZ(0) scale(1, 1); }
      .row::after {
        content: "";
        display: table;
        clear: both; }
      .row > div {
        position: relative;
        float: left;
        border: 0.1px solid transparent; }
        .row > div:not(:last-child) {
          margin-right: 4px; }
      .row > .c100 {
        width: 100%; }
      .row > .c75 {
        width: calc( 3 * ((100% - 3 * 4px) / 4) + 2 * 4px); }
      .row > .c66 {
        width: calc( 2 * ((100% - 2 * 4px) / 3) + 4px); }
      .row > .c50 {
        width: calc(      (100% - 4px) / 2); }
      .row > .c33 {
        width: calc(      (100% - 2 * 4px) / 3); }
      .row > .c25 {
        width: calc(      (100% - 3 * 4px) / 4); }
      .row > .c20 {
        width: calc(      (100% - 4 * 4px) / 5); }
      .row > .c16 {
        width: calc(      (100% - 5 * 4px) / 6); }
      .row > .c14 {
        width: calc(      (100% - 6 * 4px) / 7); } }

@media (max-width: 28.75em) {
  .cg100m {
    width: 100% !important; } }

@media (max-width: 37.5em) {
  .cg100p {
    width: 100% !important; } }

@media (max-width: 56.25em) {
  .cg100t {
    width: 100% !important; } }

@media (max-width: 75em) {
  .cg100tl {
    width: 100% !important; } }

@media (max-width: 112.5em) {
  .cg100d {
    width: 100% !important; } }

@media (max-width: 28.75em) {
  .cg50m {
    width: 50% !important; } }

@media (max-width: 37.5em) {
  .cg50p {
    width: 50% !important; } }

@media (max-width: 56.25em) {
  .cg50t {
    width: 50% !important; } }

@media (max-width: 75em) {
  .cg50tl {
    width: 50% !important; } }

@media (max-width: 112.5em) {
  .cg50d {
    width: 50% !important; } }

@media (max-width: 28.75em) {
  .cg75m {
    width: 75% !important; } }

@media (max-width: 37.5em) {
  .cg75p {
    width: 75% !important; } }

@media (max-width: 56.25em) {
  .cg75t {
    width: 75% !important; } }

@media (max-width: 75em) {
  .cg75tl {
    width: 75% !important; } }

@media (max-width: 112.5em) {
  .cg75d {
    width: 75% !important; } }

@media (max-width: 28.75em) {
  .cg25m {
    width: 25% !important; } }

@media (max-width: 37.5em) {
  .cg25p {
    width: 25% !important; } }

@media (max-width: 56.25em) {
  .cg25t {
    width: 25% !important; } }

@media (max-width: 75em) {
  .cg25tl {
    width: 25% !important; } }

@media (max-width: 112.5em) {
  .cg25d {
    width: 25% !important; } }

@media (max-width: 28.75em) {
  .cg0m {
    width: 0% !important;
    display: none !important; } }

@media (max-width: 37.5em) {
  .cg0p {
    width: 0% !important;
    display: none !important; } }

@media (max-width: 56.25em) {
  .cg0t {
    width: 0% !important;
    display: none !important; } }

@media (max-width: 75em) {
  .cg0tl {
    width: 0% !important;
    display: none !important; } }

@media (max-width: 112.5em) {
  .cg0d {
    width: 0% !important;
    display: none !important; } }

/*

TEXT THE INTERACTIONS

.square-color{
	position: relative;
	display: inline-block;
	width: 100px;
	height: 100px;
	background: $c-b;
	border: 1px solid black;
	@include interaction-black;



}

<div class="square-color" data-detail='{"click": [  {"dest":"ripple" } ] }' ></div>
*/
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  opacity: 0.16;
  user-select: none;
  pointer-events: none; }

.ripple {
  animation-name: ripple;
  animation-duration: 0.6s;
  animation-timing-function: easy-out; }

@keyframes ripple {
  from {
    opacity: 16;
    transform: scale(0); }
  to {
    opacity: 0;
    transform: scale(2.5); } }

body {
  position: relative;
  display: inline-block;
  height: calc(100vh - 48px);
  top: 48px;
  width: calc(100% - 0px);
  overflow: hidden;
  background-color: #E6E6E6;
  z-index: 1;
  opacity: 1; }

.body-mobile {
  top: 56px !important;
  left: 0px !important;
  width: calc(100vw - 0px);
  padding: 0px;
  margin-left: 0px;
  border: 1px solid #E6E6E6; }
  .body-mobile .dt > .header {
    width: 100%;
    left: 0px; }
    .body-mobile .dt > .header > .title {
      left: 0px; }

.body-tv {
  top: 0px !important;
  left: 0px !important;
  width: calc(100vw - 0px);
  height: 100vh;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 92px;
  padding-right: 8px;
  margin-left: 0px;
  background: #000; }
  .body-tv .dt > .header > .title {
    left: 0px; }

@media (max-width: 112.5em) {
  body {
    width: calc(100vw - 136px);
    margin-left: 136px; } }

@media (min-width: 112.5em) {
  body {
    width: calc(100vw - 136px);
    margin-left: 136px; } }

@media (max-width: 56.25em) {
  body {
    width: calc(100vw - 136px);
    height: calc(100vh - 0px);
    margin-left: 136px; } }

@media (max-width: 37.5em) {
  body {
    width: calc(100vw - 0px);
    margin-left: 0px; } }

body {
  transition: all 0.2s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }

.appbar {
  position: fixed;
  display: inline-block;
  width: calc(100% - 0px);
  left: 0px;
  height: 48px;
  top: 0px;
  box-shadow: 0px 0px 0px 0px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.117647);
  z-index: 10;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1, 1); }
  .appbar > .primary, .appbar > .second {
    position: absolute;
    float: left;
    width: 100%;
    height: 100%;
    padding-left: 4px;
    padding-right: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.15s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    /*div*/ }
    .appbar > .primary > h1, .appbar > .second > h1 {
      position: relative;
      float: left;
      margin-right: auto;
      color: #071c4d;
      font-size: 20px;
      font-weight: 500;
      letter-spacing: 0.15px;
      user-select: none;
      pointer-events: none;
      -webkit-backface-visibility: hidden;
      -webkit-transform: translateZ(0) scale(1, 1);
      margin-left: 8px;
      letter-spacing: 1.5px;
      opacity: 0.54;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis; }
    .appbar > .primary > .icon, .appbar > .second > .icon {
      position: relative;
      display: inline-block;
      top: 0px;
      height: 48px;
      width: 48px;
      margin-left: 16px;
      display: block;
      background-image: url("svg/illustrations/gosive-logo-gradiente.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      user-select: none;
      pointer-events: none; }
    .appbar > .primary > div, .appbar > .second > div {
      position: relative;
      float: right;
      height: 48px;
      min-width: 48px;
      padding: 4px;
      padding-left: 8px;
      padding-right: 8px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      -webkit-backface-visibility: hidden;
      -webkit-transform: translateZ(0) scale(1, 1);
      transition: all 0.15s;
      transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
      .appbar > .primary > div::before, .appbar > .second > div::before {
        position: absolute;
        content: '';
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 4px;
        transform: scaleX(0);
        transform-origin: center;
        background-color: #071c4d;
        transition: all 0.25s;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
      .appbar > .primary > div svg, .appbar > .second > div svg {
        height: 24px;
        width: 24px;
        fill: #071c4d;
        transform: rotate(0deg);
        transition: all 0.5s;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        user-select: none;
        pointer-events: none;
        -webkit-backface-visibility: hidden;
        -webkit-transform: translateZ(0) scale(1, 1); }
      .appbar > .primary > div label, .appbar > .second > div label {
        margin: 0px;
        color: #000;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.4px;
        user-select: none;
        pointer-events: none;
        -webkit-backface-visibility: hidden;
        -webkit-transform: translateZ(0) scale(1, 1);
        opacity: 0.67; }
      .appbar > .primary > div:active, .appbar > .second > div:active {
        transform: scale(0.95); }

.appbar .primary, .appbar .second {
  transition: all 0.15s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }

.appbar .primary {
  top: 0px;
  opacity: 1;
  background-color: #E6E6E6; }
  .appbar .primary > h1 {
    color: #000; }
  .appbar .primary > div {
    cursor: pointer;
    overflow: hidden; }
    .appbar .primary > div > svg {
      fill: #000; }
    .appbar .primary > div:hover {
      background-color: gainsboro; }
    .appbar .primary > div:focus {
      background-color: #d2d2d2; }
    .appbar .primary > div:active {
      background-color: #d2d2d2; }
    @media (max-width: 56.25em) {
      .appbar .primary > div:hover {
        background-color: #E6E6E6; }
      .appbar .primary > div:focus {
        background-color: #E6E6E6; }
      .appbar .primary > div:active {
        background-color: #E6E6E6; } }
    .appbar .primary > div .ripple {
      background-color: #ffffff; }

.appbar .second {
  top: 56px;
  opacity: 0;
  background-color: #21783f; }
  .appbar .second > h1 {
    color: #ffffff; }
  .appbar .second > div svg {
    transform: rotate(90deg);
    fill: #ffffff;
    opacity: 1;
    transition: all 0.25s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

.appbar .main {
  background-color: #B00020; }

.appbar .primary > .fullCont-switch, .appbar .second > .fullCont-switch {
  min-width: 72px; }

.appbar .primary > .select::before, .appbar .second > .select::before {
  transform: scaleX(1); }

.appbar .primary > .select svg, .appbar .second > .select svg {
  fill: #ffffff;
  opacity: 1; }

.appbar .primary > .select label, .appbar .second > .select label {
  opacity: 1;
  color: #000;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.4px; }

.appbar .primary > .error::before, .appbar .second > .error::before {
  transform: scaleX(1);
  background-color: #FF002E !important;
  border-radius: 50%;
  top: 0px;
  width: 16px;
  height: 16px; }

.appbar .primary > .error svg, .appbar .second > .error svg {
  fill: #FF002E; }

.appbar-black {
  background-color: #000; }
  .appbar-black .primary {
    background-color: #000; }
    .appbar-black .primary > h1 {
      opacity: 1;
      color: #ffffff;
      font-size: 20px;
      font-weight: 500;
      letter-spacing: 0.15px; }
    .appbar-black .primary > div {
      cursor: pointer;
      overflow: hidden; }
      .appbar-black .primary > div:hover {
        background-color: #3d3d3d; }
      .appbar-black .primary > div:focus {
        background-color: #5c5c5c; }
      .appbar-black .primary > div:active {
        background-color: #5c5c5c; }
      @media (max-width: 56.25em) {
        .appbar-black .primary > div:hover {
          background-color: #000; }
        .appbar-black .primary > div:focus {
          background-color: #000; }
        .appbar-black .primary > div:active {
          background-color: #000; } }
      .appbar-black .primary > div .ripple {
        background-color: #ffffff; }
      .appbar-black .primary > div svg {
        fill: #ffffff;
        opacity: 1; }

.appbar-blue {
  background-color: #0078d4;
  /*primary*/ }
  .appbar-blue .primary {
    background-color: #0078d4; }
    .appbar-blue .primary > h1 {
      opacity: 1;
      color: #ffffff;
      font-size: 20px;
      font-weight: 500;
      letter-spacing: 0.15px; }
    .appbar-blue .primary > div {
      cursor: pointer;
      overflow: hidden; }
      .appbar-blue .primary > div:hover {
        background-color: #0275da; }
      .appbar-blue .primary > div:focus {
        background-color: #026ac6; }
      .appbar-blue .primary > div:active {
        background-color: #026ac6; }
      @media (max-width: 56.25em) {
        .appbar-blue .primary > div:hover {
          background-color: #0280EE; }
        .appbar-blue .primary > div:focus {
          background-color: #0280EE; }
        .appbar-blue .primary > div:active {
          background-color: #0280EE; } }
      .appbar-blue .primary > div .ripple {
        background-color: #ffffff; }
      .appbar-blue .primary > div label {
        color: #ffffff; }
      .appbar-blue .primary > div svg {
        fill: #ffffff;
        opacity: 1; }
      .appbar-blue .primary > div::before {
        background-color: #ffffff; }
    .appbar-blue .primary .select {
      color: #ffffff !important; }
      .appbar-blue .primary .select svg {
        opacity: 1; }
      .appbar-blue .primary .select label {
        opacity: 1;
        color: #ffffff; }
      .appbar-blue .primary .select::before {
        background-color: #ffffff; }

.appbar-fullcont {
  position: absolute;
  left: 0px !important;
  width: calc(100% - 0px) !important; }

@keyframes fadeSlow {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.appbar {
  transition: all 0.25s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }

.appbar-show-second .primary {
  top: 56px;
  opacity: 0; }
  .appbar-show-second .primary > div svg {
    transform: rotate(90deg); }

.appbar-show-second .second {
  opacity: 1;
  top: 0px; }
  .appbar-show-second .second > div svg {
    transform: rotate(0deg); }

.appbar-main > .primary {
  padding-right: calc(50% - 24px); }

@media (max-width: 112.5em) {
  .appbar-main > .primary {
    padding-right: calc(0% + 16px); } }

.appbar-fullcont-desktop {
  height: 40px; }
  .appbar-fullcont-desktop .primary {
    top: 0px;
    opacity: 1;
    height: 38px;
    padding-left: 8px;
    padding-right: 16px;
    background-color: #E6E6E6;
    border-bottom: 1px solid transparent; }
    .appbar-fullcont-desktop .primary > h1 {
      margin-top: 4px; }
    .appbar-fullcont-desktop .primary > div {
      height: 32px;
      min-width: 32px;
      margin-left: 4px;
      cursor: pointer;
      overflow: hidden; }
      .appbar-fullcont-desktop .primary > div > svg {
        fill: #000; }
      .appbar-fullcont-desktop .primary > div:hover {
        background-color: gainsboro; }
      .appbar-fullcont-desktop .primary > div:focus {
        background-color: #d2d2d2; }
      .appbar-fullcont-desktop .primary > div:active {
        background-color: #d2d2d2; }
      @media (max-width: 56.25em) {
        .appbar-fullcont-desktop .primary > div:hover {
          background-color: #E6E6E6; }
        .appbar-fullcont-desktop .primary > div:focus {
          background-color: #E6E6E6; }
        .appbar-fullcont-desktop .primary > div:active {
          background-color: #E6E6E6; } }
      .appbar-fullcont-desktop .primary > div .ripple {
        background-color: #ffffff; }

.appbar-main {
  position: fixed;
  display: inline-block;
  width: calc(100% - 0px);
  left: 0px;
  height: 48px;
  top: 0px;
  z-index: 10;
  overflow: hidden;
  background-color: #0078d4;
  padding-right: 72px;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1, 1);
  /*div*/ }
  .appbar-main > h1 {
    position: relative;
    display: inline-block;
    left: 8px;
    top: 12px;
    margin-right: auto;
    color: #ffffff;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.15px;
    user-select: none;
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
    letter-spacing: 1.5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; }
  .appbar-main > div {
    position: relative;
    float: right;
    height: 48px;
    min-width: 48px;
    padding: 4px;
    padding-left: 8px;
    padding-right: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
    cursor: pointer;
    overflow: hidden; }
    .appbar-main > div:hover {
      background-color: #0275da; }
    .appbar-main > div:focus {
      background-color: #026ac6; }
    .appbar-main > div:active {
      background-color: #026ac6; }
    @media (max-width: 56.25em) {
      .appbar-main > div:hover {
        background-color: #0280EE; }
      .appbar-main > div:focus {
        background-color: #0280EE; }
      .appbar-main > div:active {
        background-color: #0280EE; } }
    .appbar-main > div .ripple {
      background-color: #ffffff; }
    .appbar-main > div svg {
      height: 24px;
      width: 24px;
      fill: #ffffff;
      opacity: 0.99;
      user-select: none;
      pointer-events: none;
      -webkit-backface-visibility: hidden;
      -webkit-transform: translateZ(0) scale(1, 1); }
  .appbar-main > .divLeft {
    float: left; }

.avatar {
  position: relative;
  float: right;
  right: 24px;
  height: 48px;
  width: 48px;
  cursor: pointer;
  margin-right: 0px !important;
  border-radius: 50%;
  background-image: url("./img/pic/person.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #071c4d;
  border: 2px solid #E6E6E6;
  z-index: 2;
  transition: all 0.15s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1, 1); }
  .avatar:hover {
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }
  .avatar .title {
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: center;
    top: 8px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.15px; }
  .avatar .status {
    position: absolute;
    display: inline-block;
    bottom: -4px;
    right: -10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    opacity: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 71%;
    user-select: none;
    pointer-events: none;
    border: 2px solid #E6E6E6; }

.avatar-online .status {
  background-image: url("./svg/status/online.svg");
  background-color: #26e7a6; }

.avatar-away .status {
  background-image: url("./svg/status/away.svg");
  background-color: #B7C2CC; }

.avatar-busy .status {
  background-image: url("./svg/status/busy.svg");
  background-color: #ED241A; }

.avatar-desktop {
  position: fixed;
  display: inline-block;
  right: 16px;
  top: 4px;
  height: 38px;
  width: 38px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  cursor: pointer;
  z-index: 13; }

.avatar-fixed-tv {
  position: fixed;
  display: inline-block;
  left: 16px;
  top: 12px;
  height: 50px;
  width: 50px;
  border-radius: 0%;
  border: 2px solid #ffffff; }

.avatar-app {
  position: fixed;
  display: inline-block;
  right: 20px;
  top: 8px;
  height: 42px;
  width: 42px;
  z-index: 11;
  border-radius: 50%;
  border: 2px solid #ffffff; }
  .avatar-app .status {
    right: auto;
    left: -12px;
    border: 2px solid #ffffff; }

/**/
.avatar-large {
  position: relative;
  display: inline-block;
  height: 90px;
  width: 90px;
  float: left;
  border-radius: 00% !important;
  left: 0%;
  margin-left: 50%;
  transform: translateX(-50%);
  border: 3px solid #ffffff; }
  .avatar-large:after {
    content: "";
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 32px;
    height: 32px;
    border-radius: 50% !important;
    background: url(svg/edit-white.svg) no-repeat;
    opacity: 0.76;
    background-size: 70% auto;
    background-position: center;
    background-color: #0280EE;
    cursor: pointer; }
  .avatar-large:hover:after {
    opacity: 0.99; }

.avatar-rotation {
  animation: avatar-rotation 0.9s infinite; }

@keyframes avatar-rotation {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  50% {
    transform: rotate(900deg);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  100% {
    transform: rotate(1800deg); } }

#login {
  position: fixed;
  display: inline-block;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  max-width: 900px;
  overflow: hidden;
  margin-top: 16px;
  bottom: -110vh;
  background-color: #ffffff;
  overflow-y: scroll;
  opacity: 1;
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  left: 0%;
  margin-left: 50%;
  transform: translateX(-50%);
  z-index: 210;
  /*cont*/ }
  #login .contLeft {
    position: relative;
    display: inline-block;
    top: 0px;
    float: left;
    height: 100%;
    width: 50%;
    background: #FAFCFE; }
    #login .contLeft .logo {
      position: absolute;
      display: inline-block;
      width: 100px;
      height: 100px;
      bottom: 8px;
      left: 8px;
      background: url("svg/illustrations/gosive-logo-gradiente.svg");
      background-size: 100% auto   !important;
      background-position: center !important;
      background-repeat: no-repeat !important;
      left: 50%;
      transform: translateX(-50%); }
    #login .contLeft .title {
      position: relative;
      display: block;
      width: 100%;
      margin-top: 16px;
      color: #071c4d;
      font-size: 20px;
      font-weight: 500;
      letter-spacing: 0.15px;
      text-align: left;
      padding-left: 12px; }
    #login .contLeft .desLeft {
      position: relative;
      display: block;
      margin-top: 8px;
      padding-left: 12px;
      padding-right: 12px;
      color: #000;
      font-size: 14px;
      font-weight: normal;
      letter-spacing: 0.25px;
      text-align: left; }
    #login .contLeft .illus {
      position: relative;
      display: block;
      width: calc(100% +  0px);
      height: 500px;
      margin-top: 32px;
      left: 0px;
      background: url("svg/illustrations/welcome.svg");
      background-size: 100% auto   !important;
      background-position: center !important;
      background-repeat: no-repeat !important; }
  #login .contRight {
    position: relative;
    display: inline-block;
    top: 0px;
    float: left;
    height: 100%;
    width: 50%;
    padding-left: 32px;
    padding-right: 8px; }
  #login .title {
    position: relative;
    display: block;
    width: 100%;
    margin-top: 16px;
    color: #0280EE;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.15px;
    text-align: left;
    padding-left: 12px; }
  #login .des {
    position: relative;
    display: block;
    margin-top: 2px;
    padding-left: 12px;
    color: #000;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.25px;
    text-align: left; }
  #login .cont {
    position: relative;
    display: inline-block;
    visibility: hidden;
    width: 100%;
    height: 50%;
    bottom: 0px;
    left: 0px; }
    #login .cont .illus {
      position: relative;
      display: block;
      width: 200px;
      height: 200px;
      margin-top: 56px;
      background: url("svg/illustrations/gosive-logo-gradiente.svg");
      background-size: auto  100% !important;
      background-position: left !important;
      background-repeat: no-repeat !important;
      left: 50%;
      transform: translateX(-50%); }
    #login .cont label {
      position: relative;
      display: block;
      width: 100%;
      margin-top: 8px;
      text-align: center;
      left: 50%;
      transform: translateX(-50%);
      color: #202124;
      font-size: 14px;
      font-weight: normal;
      letter-spacing: 0.25px; }

.login-show {
  animation: confirmation-show  0.250s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }

@keyframes login-show {
  from {
    bottom: -100vh; }
  to {
    bottom: calc(0vh + 16px); } }

.login-hide {
  animation: confirmation-hide  0.100s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }

@keyframes login-hide {
  from {
    bottom: calc(0vh + 16px); }
  to {
    bottom: -100vh; } }

.login-loading {
  /*cont*/ }

#login {
  /*phone*/ }
  @media (max-width: 56.25em) {
    #login .contRight {
      width: 100%;
      padding-left: 8px; }
      #login .contRight .cont {
        visibility: visible;
        height: 200px; }
        #login .contRight .cont .illus {
          margin-top: 0px;
          height: 150px;
          width: 150px; }
    #login .contLeft {
      display: none; } }

.dt {
  /*data table*/
  position: relative;
  display: inline-block;
  width: calc(100% - 0px);
  max-width: 1300px;
  margin-left: 50%;
  padding-right: 2px;
  padding-left: 2px;
  padding-bottom: 32px;
  margin-bottom: 16px;
  transform: translateX(-50%); }
  .dt > table {
    width: 100%;
    border-collapse: collapse;
    background: #E6E6E6;
    table-layout: fixed; }
    .dt > table th:not(:first-child) {
      position: relative;
      text-align: left;
      padding-left: 4px;
      padding-right: 4px;
      cursor: pointer;
      overflow: hidden;
      background: #E6E6E6;
      border-top: 1px solid #0000001e;
      color: #071c4d;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.1px;
      opacity: 0.36; }
      .dt > table th:not(:first-child) label {
        position: absolute;
        display: block;
        max-width: calc(100% - 16px);
        top: 2px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #071c4d;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.1px;
        user-select: none;
        pointer-events: none; }
      .dt > table th:not(:first-child) span {
        position: absolute;
        display: block;
        max-width: calc(100% - 16px);
        top: 20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #071c4d;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.4px;
        user-select: none;
        pointer-events: none; }
      .dt > table th:not(:first-child)::before {
        position: absolute;
        content: '';
        top: 2px;
        right: 4px;
        width: 16px;
        height: 16px;
        background: url(svg/down.svg) no-repeat;
        background-size: 100% 100%;
        background-position: center;
        opacity: 0;
        transform: scale(0) rotate(0deg);
        transition: all 0.15s;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
      .dt > table th:not(:first-child)::selection {
        background-color: transparent; }
    .dt > table thead tr {
      background-color: #E6E6E6; }
    .dt > table tr {
      position: relative;
      background-color: #ffffff;
      height: 36px; }
      .dt > table tr:not(:last-child) {
        border-bottom: 1px solid #0000001e; }
    .dt > table td {
      position: relative;
      text-align: left;
      padding-left: 4px;
      padding-right: 4px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-wrap: none;
      border: none;
      border: 0.1px solid rgba(242, 242, 242, 0.117647); }
      .dt > table td:not(:first-child) {
        cursor: pointer;
        overflow: hidden; }
        .dt > table td:not(:first-child):hover {
          background-color: whitesmoke; }
        .dt > table td:not(:first-child):focus {
          background-color: whitesmoke; }
        .dt > table td:not(:first-child):active {
          background-color: #ebebeb; }
        @media (max-width: 56.25em) {
          .dt > table td:not(:first-child):hover {
            background-color: #ffffff; }
          .dt > table td:not(:first-child):focus {
            background-color: #ffffff; }
          .dt > table td:not(:first-child):active {
            background-color: #ffffff; } }
        .dt > table td:not(:first-child) .ripple {
          background-color: #cde7fe; }
      .dt > table td label {
        position: absolute;
        display: block;
        max-width: calc(100% - 16px);
        top: 2px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #000;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.1px;
        user-select: none;
        pointer-events: none; }
      .dt > table td span {
        position: absolute;
        display: block;
        max-width: calc(100% - 16px);
        top: 20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #0000008f;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.4px;
        user-select: none;
        pointer-events: none; }
      .dt > table td .id {
        position: absolute;
        display: block;
        top: 10px;
        left: -2px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
        transform: rotate(90deg);
        color: #000;
        font-size: 10px;
        font-weight: normal;
        letter-spacing: 1.5px;
        user-select: none;
        pointer-events: none;
        opacity: 0.54;
        display: none; }
    .dt > table th {
      transition: all 0.15s;
      transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
      .dt > table th:active {
        transform: scale(0.98); }
    .dt > table td {
      color: #000;
      font-size: 14px;
      font-weight: normal;
      letter-spacing: 0.25px;
      transition: all 0.15s;
      transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
      .dt > table td:active {
        transform: scale(0.98); }
    .dt > table .checked {
      background-color: #cde7fe; }
      .dt > table .checked td {
        cursor: pointer;
        overflow: hidden; }
        .dt > table .checked td:hover {
          background-color: #b9ddfe; }
        .dt > table .checked td:focus {
          background-color: #a5d4fd; }
        .dt > table .checked td:active {
          background-color: #a5d4fd; }
        @media (max-width: 56.25em) {
          .dt > table .checked td:hover {
            background-color: #cde7fe; }
          .dt > table .checked td:focus {
            background-color: #cde7fe; }
          .dt > table .checked td:active {
            background-color: #cde7fe; } }
        .dt > table .checked td .ripple {
          background-color: #ffffff; }
    .dt > table .highlightTr {
      background-color: #cde7fe;
      background-color: #ffa8f0; }
      .dt > table .highlightTr td {
        cursor: pointer;
        overflow: hidden; }
        .dt > table .highlightTr td:hover {
          background-color: #ff94ec; }
        .dt > table .highlightTr td:focus {
          background-color: #ff7fe9; }
        .dt > table .highlightTr td:active {
          background-color: #ff7fe9; }
        @media (max-width: 56.25em) {
          .dt > table .highlightTr td:hover {
            background-color: #ffa8f0; }
          .dt > table .highlightTr td:focus {
            background-color: #ffa8f0; }
          .dt > table .highlightTr td:active {
            background-color: #ffa8f0; } }
        .dt > table .highlightTr td .ripple {
          background-color: #cde7fe; }

/*dt*/
table tr td {
  padding: 4px;
  color: #000;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.25px; }

.dt {
  /*header*/ }
  .dt > .header {
    position: relative;
    display: inline-block;
    top: 0px;
    width: calc(100% - 0px);
    left: 0px;
    height: 56px;
    padding: 2px;
    z-index: 3;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
    border-bottom: 0.1px solid #0000001e; }
    .dt > .header > div {
      display: inline-block;
      height: 42px;
      float: right; }
    .dt > .header > .title {
      position: absolute;
      left: 0px;
      margin-top: 12px;
      left: 16px;
      color: #071c4d;
      font-size: 20px;
      font-weight: 500;
      letter-spacing: 0.15px;
      user-select: none;
      pointer-events: none;
      -webkit-backface-visibility: hidden;
      -webkit-transform: translateZ(0) scale(1, 1);
      letter-spacing: 1.5px; }
    .dt > .header > div:nth-child(2) {
      position: relative;
      display: inline-block;
      width: calc(100% - 296px);
      margin-right: 144px;
      overflow: hidden;
      height: 54px; }
      .dt > .header > div:nth-child(2) input {
        position: relative;
        display: block;
        float: left;
        width: 100%;
        height: 100%;
        background-color: transparent;
        padding-left: 48px;
        padding-top: 0px;
        padding-right: 50px;
        color: #000;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.1px;
        font-weight: 700;
        outline-width: 0;
        caret-color: #0280EE;
        border: none;
        text-overflow: ellipsis; }
        .dt > .header > div:nth-child(2) input::placeholder {
          display: inline-block;
          color: #071c4d;
          font-size: 14px;
          font-weight: 500;
          letter-spacing: 0.1px;
          opacity: 0.24;
          font-weight: 500; }
      .dt > .header > div:nth-child(2) > .icon {
        position: absolute;
        top: 0px;
        height: 42px;
        width: 42px;
        background-color: none;
        display: flex;
        justify-content: center;
        align-items: center; }
        .dt > .header > div:nth-child(2) > .icon svg {
          position: absolute;
          height: 24px;
          width: 24px;
          fill: #000;
          opacity: 0.54;
          user-select: none;
          pointer-events: none; }
      .dt > .header > div:nth-child(2) > .search {
        left: 0px;
        margin-top: 6px;
        -webkit-user-select: none;
        /* Chrome all / Safari all */
        -moz-user-select: none;
        /* Firefox all */
        -ms-user-select: none;
        /* IE 10+ */
        user-select: none; }
        .dt > .header > div:nth-child(2) > .search:hover {
          cursor: pointer; }
      .dt > .header > div:nth-child(2) > .trailing {
        right: 0px;
        margin-top: 6px;
        opacity: 0;
        transform: scale(0) rotate(-360deg);
        cursor: pointer; }
    .dt > .header > .more, .dt > .header > .filter, .dt > .header > .other3 {
      position: absolute;
      right: 0px;
      float: right;
      margin-top: 8px;
      width: 42px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      overflow: hidden; }
      .dt > .header > .more:hover, .dt > .header > .filter:hover, .dt > .header > .other3:hover {
        background-color: gainsboro; }
      .dt > .header > .more:focus, .dt > .header > .filter:focus, .dt > .header > .other3:focus {
        background-color: #d2d2d2; }
      .dt > .header > .more:active, .dt > .header > .filter:active, .dt > .header > .other3:active {
        background-color: #d2d2d2; }
      @media (max-width: 56.25em) {
        .dt > .header > .more:hover, .dt > .header > .filter:hover, .dt > .header > .other3:hover {
          background-color: #E6E6E6; }
        .dt > .header > .more:focus, .dt > .header > .filter:focus, .dt > .header > .other3:focus {
          background-color: #E6E6E6; }
        .dt > .header > .more:active, .dt > .header > .filter:active, .dt > .header > .other3:active {
          background-color: #E6E6E6; } }
      .dt > .header > .more .ripple, .dt > .header > .filter .ripple, .dt > .header > .other3 .ripple {
        background-color: #ffffff; }
      .dt > .header > .more svg, .dt > .header > .filter svg, .dt > .header > .other3 svg {
        position: absolute;
        height: 24px;
        width: 24px;
        fill: #000;
        opacity: 0.54;
        user-select: none;
        pointer-events: none; }
    .dt > .header > .filter {
      right: 48px; }
    .dt > .header > .other3 {
      right: 96px; }
    .dt > .header + .sub-header {
      display: block;
      width: 100%;
      display: none; }

@media (max-width: 56.25em) {
  .dt > .header > .title {
    padding-left: 16px; } }

@media (max-width: 56.25em) {
  .dt > .header > div:nth-child(2) {
    float: right;
    width: 42px;
    margin-right: 92px;
    overflow-x: hidden; }
    .dt > .header > div:nth-child(2) > input {
      background-color: transparent; }
    .dt > .header > div:nth-child(2) > .search {
      pointer-events: auto;
      user-select: auto; } }

.dt > .header > div:nth-child(2) > input:focus {
  background-color: #ffffff; }

.dt {
  /*header*/ }
  .dt > .header-desktop {
    margin-top: 8px;
    height: 32px;
    z-index: 3;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1); }
    .dt > .header-desktop > div {
      height: 32px;
      width: 32px; }
    .dt > .header-desktop > .title {
      left: 15px;
      margin-top: 2px;
      width: 200px;
      overflow: hidden;
      white-space: nowrap;
      border: none;
      text-overflow: ellipsis; }
    .dt > .header-desktop > div:nth-child(2) {
      width: calc(100% - 348px);
      margin-right: 164px;
      height: 30px;
      left: 64px;
      top: -4px; }
      .dt > .header-desktop > div:nth-child(2) input {
        padding-left: 30px; }
      .dt > .header-desktop > div:nth-child(2) > .icon {
        top: 0px;
        height: 32px;
        width: 32px; }
      .dt > .header-desktop > div:nth-child(2) > .search {
        margin-top: 0px; }
      .dt > .header-desktop > div:nth-child(2) > .trailing {
        margin-top: 0px; }
    .dt > .header-desktop > .more, .dt > .header-desktop > .filter, .dt > .header-desktop > .other3 {
      margin-top: 0px;
      width: 32px; }

.dt > .header > .title {
  transition: all 0.25s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

.dt > .header > div:nth-child(2) {
  transition: all 0.25s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  .dt > .header > div:nth-child(2) .trailing {
    transition: all 0.25s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

.dt .header input:focus ~ .search svg {
  opacity: 1;
  fill: #0280EE; }

.dt > .header > .search-filled .trailing {
  top: 0px !important;
  opacity: 1 !important;
  transform: scale(1) rotate(0deg) !important; }

@media (max-width: 56.25em) {
  .dt > .searching > .title {
    transform: scaleX(0);
    transform-origin: left; } }

@media (max-width: 56.25em) {
  .dt > .searching > div:nth-child(2) {
    width: calc(100% - 96px); } }

.dt > .searching + .sub-header {
  display: inline-block; }

.dt > .header > .search-highlight {
  background-color: #26e7a6; }
  .dt > .header > .search-highlight .search svg {
    opacity: 1 !important;
    fill: #ffffff !important; }
  .dt > .header > .search-highlight .trailing svg {
    opacity: 1 !important;
    fill: #ffffff !important; }
  .dt > .header > .search-highlight input {
    color: #ffffff !important; }

.dt > table tr .more {
  width: 48px;
  height: 48px; }
  .dt > table tr .more svg {
    position: absolute;
    height: 24px;
    width: 24px;
    left: 12px;
    top: 12px;
    fill: #000;
    opacity: 0.54;
    user-select: none;
    pointer-events: none; }
  .dt > table tr .more::before {
    content: ''; }
  .dt > table tr .more:hover {
    background-color: #e6e6e6; }

@media (max-width: 56.25em) {
  .dt > table tr .more {
    display: none; } }

/*dt*/
.dt {
  /*data table*/ }
  .dt > table th:nth-child(1) {
    background: #E6E6E6; }
  .dt > table th:nth-child(1), .dt > table td:nth-child(1) {
    position: relative;
    width: 48px;
    max-width: 48px; }
    .dt > table th:nth-child(1) input, .dt > table td:nth-child(1) input {
      position: absolute;
      left: 15px;
      top: 8px;
      width: 18px;
      height: 18px;
      border: 2px solid #000;
      border-radius: 2px;
      opacity: 0.54;
      outline: none;
      -webkit-appearance: none;
      appearance: none;
      cursor: pointer;
      transition: all 0.1s;
      transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
      .dt > table th:nth-child(1) input::before, .dt > table td:nth-child(1) input::before {
        position: absolute;
        content: '';
        top: -14px;
        left: -14px;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background-color: #0280EE;
        opacity: 0;
        transform: scale(0);
        transition: all .100s;
        z-index: 2; }
      .dt > table th:nth-child(1) input:hover::before, .dt > table td:nth-child(1) input:hover::before {
        opacity: 0.08;
        transform: scale(1); }
      .dt > table th:nth-child(1) input:checked, .dt > table td:nth-child(1) input:checked {
        opacity: 1;
        background: #0280EE url(svg/check.svg) no-repeat;
        background-size: 100% 100%;
        background-position: center;
        border: 2px solid #0280EE;
        border-radius: 2px; }

/*dt*/
.dt > table th:nth-child(1) > div:hover, .dt > table td:nth-child(1) > div:hover {
  background-color: #0280ee; }

/*dt*/
.dt > table th:nth-child(1) > .checked svg, .dt > table td:nth-child(1) > .checked svg {
  opacity: 1;
  fill: #0280EE; }

/*dt*/
.dt-mobile {
  /*table*/ }
  .dt-mobile > table {
    /*td*/ }
    .dt-mobile > table tr {
      height: 48px; }
    .dt-mobile > table td label {
      top: 8px; }
    .dt-mobile > table td span {
      top: 26px; }
    .dt-mobile > table td .avatarOnTD {
      top: 8px !important; }

.dt-simple {
  position: relative;
  display: inline-block;
  margin-top: 16px;
  max-width: 100%;
  padding: 8px; }
  .dt-simple > table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed; }
    .dt-simple > table th, .dt-simple > table td {
      padding-left: 8px; }
    .dt-simple > table th:not(:first-child) {
      border-bottom: none !important; }
      .dt-simple > table th:not(:first-child)::before {
        display: none; }
    .dt-simple > table tr {
      height: 32px; }
      .dt-simple > table tr td:not(:nth-child(1)) {
        opacity: 0.87; }
      .dt-simple > table tr td:first-child {
        display: none; }
      .dt-simple > table tr th:first-child {
        display: none; }
      .dt-simple > table tr td {
        color: #000;
        font-size: 14px;
        font-weight: normal;
        letter-spacing: 0.25px;
        border: 0.2px solid #0000001e; }

.dt-loading {
  color: transparent !important; }
  .dt-loading > table > tbody tr {
    animation-name: dt-gradient;
    animation-duration: 7s;
    animation-iteration-count: infinite;
    animation-direction: revese;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    background: linear-gradient(-45deg, aliceblue, #ffffff);
    background-size: 400% 400%; }
    .dt-loading > table > tbody tr:nth-child(odd) {
      animation-name: dt-gradient;
      animation-duration: 4s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
      background: linear-gradient(-45deg, aliceblue, #ffffff, #d7ecff, #ffffff);
      background-size: 400% 400%; }
    .dt-loading > table > tbody tr > td, .dt-loading > table > tbody tr > th {
      transform: scale(0); }

@keyframes dt-gradient {
  0% {
    background-position: -5000px 0; }
  100% {
    background-position: 5000px 0; } }

.dt {
  /*data table*/
  /*table*/ }
  .dt > table {
    /*tdWithAvatar*/
    /**/
    /*tdWithAvatar*/
    /*tdWithAvatar*/ }
    .dt > table .tdWithAvatar label {
      margin-left: 34px;
      max-width: calc(100% - 34px); }
    .dt > table .tdWithAvatar span {
      margin-left: 34px;
      max-width: calc(100% - 34px); }
    .dt > table .tdWithAvatar .avatarOnTD {
      position: absolute;
      top: 2px;
      left: 4px;
      height: 30px;
      width: 30px;
      cursor: pointer;
      margin-right: 0px !important;
      border-radius: 50%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      z-index: 2;
      user-select: none;
      pointer-events: none; }
      .dt > table .tdWithAvatar .avatarOnTD letter {
        position: relative;
        display: inline-block;
        top: 6px;
        left: 0px;
        height: 30px;
        width: 30px;
        color: #000000c5 !important;
        font-size: 12px;
        font-weight: 700;
        text-align: center; }
        .dt > table .tdWithAvatar .avatarOnTD letter::after {
          content: "";
          display: table;
          clear: both; }
    .dt > table .tdWithIcon label {
      margin-left: 24px;
      max-width: calc(100% - 24px); }
    .dt > table .tdWithIcon span {
      margin-left: 24px;
      max-width: calc(100% - 24px); }
    .dt > table .tdWithIcon svg {
      position: absolute;
      top: 2px;
      left: 4px;
      height: 18px;
      width: 18px;
      fill: #ffffff;
      transform: rotate(0deg);
      transition: all 0.5s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      user-select: none;
      pointer-events: none;
      -webkit-backface-visibility: hidden;
      -webkit-transform: translateZ(0) scale(1, 1);
      user-select: none;
      pointer-events: none; }
    .dt > table .tdWithIconAnimated svg {
      animation: loading 2.000s;
      animation-iteration-count: infinite;
      animation-direction: reverse; }
    .dt > table .td-red-icon svg {
      fill: #ED241A; }
    .dt > table .td-blue-icon svg {
      fill: #26A0FC; }

/*dt*/
.dt {
  /*data table*/
  /*table*/ }
  .dt > table {
    /*tdWithAvatar*/
    /*tdWithAvatar*/
    /*tdWithAvatar*/
    /*tdWithAvatar*/
    /*tdWithAvatar*/
    /*tdWithAvatar*/
    /*tdWithAvatar*/
    /*tdWithAvatar*/ }
    .dt > table .td-white svg {
      fill: #000;
      opacity: 0.54; }
    .dt > table .td-blue {
      background: #93cdf4;
      background: #36A2EB;
      cursor: pointer;
      overflow: hidden; }
      .dt > table .td-blue:hover {
        background-color: #2399e9 !important; }
      .dt > table .td-blue:focus {
        background-color: #1690e2 !important; }
      .dt > table .td-blue:active {
        background-color: #1690e2 !important; }
      @media (max-width: 56.25em) {
        .dt > table .td-blue:hover {
          background-color: #36A2EB !important; }
        .dt > table .td-blue:focus {
          background-color: #36A2EB !important; }
        .dt > table .td-blue:active {
          background-color: #36A2EB !important; } }
      .dt > table .td-blue .ripple {
        background-color: #ffffff !important; }
      .dt > table .td-blue label {
        color: #ffffff;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.1px; }
      .dt > table .td-blue span {
        color: #ffffff;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.4px; }
    .dt > table .td-purple {
      background: #9966FF;
      cursor: pointer;
      overflow: hidden; }
      .dt > table .td-purple:hover {
        background-color: #8b52ff !important; }
      .dt > table .td-purple:focus {
        background-color: #7e3dff !important; }
      .dt > table .td-purple:active {
        background-color: #7e3dff !important; }
      @media (max-width: 56.25em) {
        .dt > table .td-purple:hover {
          background-color: #9966FF !important; }
        .dt > table .td-purple:focus {
          background-color: #9966FF !important; }
        .dt > table .td-purple:active {
          background-color: #9966FF !important; } }
      .dt > table .td-purple .ripple {
        background-color: #ffffff !important; }
      .dt > table .td-purple label {
        color: #ffffff;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.1px; }
      .dt > table .td-purple span {
        color: #ffffff;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.4px; }
    .dt > table .td-green {
      background: #4BC0C0;
      cursor: pointer;
      overflow: hidden; }
      .dt > table .td-green:hover {
        background-color: #40b7b7 !important; }
      .dt > table .td-green:focus {
        background-color: #3ba8a8 !important; }
      .dt > table .td-green:active {
        background-color: #3ba8a8 !important; }
      @media (max-width: 56.25em) {
        .dt > table .td-green:hover {
          background-color: #4BC0C0 !important; }
        .dt > table .td-green:focus {
          background-color: #4BC0C0 !important; }
        .dt > table .td-green:active {
          background-color: #4BC0C0 !important; } }
      .dt > table .td-green .ripple {
        background-color: #ffffff !important; }
      .dt > table .td-green label {
        color: #ffffff;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.1px; }
      .dt > table .td-green span {
        color: #ffffff;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.4px; }
    .dt > table .td-yellow {
      background: #FFCD56;
      cursor: pointer;
      overflow: hidden; }
      .dt > table .td-yellow:hover {
        background-color: #ffc742 !important; }
      .dt > table .td-yellow:focus {
        background-color: #ffc12d !important; }
      .dt > table .td-yellow:active {
        background-color: #ffc12d !important; }
      @media (max-width: 56.25em) {
        .dt > table .td-yellow:hover {
          background-color: #FFCD56 !important; }
        .dt > table .td-yellow:focus {
          background-color: #FFCD56 !important; }
        .dt > table .td-yellow:active {
          background-color: #FFCD56 !important; } }
      .dt > table .td-yellow .ripple {
        background-color: #ffffff !important; }
      .dt > table .td-yellow svg {
        fill: #ffffff;
        opacity: 0.99; }
    .dt > table .td-orange {
      background: #FF9F40;
      cursor: pointer;
      overflow: hidden; }
      .dt > table .td-orange:hover {
        background-color: #ff952c !important; }
      .dt > table .td-orange:focus {
        background-color: #ff8a17 !important; }
      .dt > table .td-orange:active {
        background-color: #ff8a17 !important; }
      @media (max-width: 56.25em) {
        .dt > table .td-orange:hover {
          background-color: #FF9F40 !important; }
        .dt > table .td-orange:focus {
          background-color: #FF9F40 !important; }
        .dt > table .td-orange:active {
          background-color: #FF9F40 !important; } }
      .dt > table .td-orange .ripple {
        background-color: #ffffff !important; }
      .dt > table .td-orange label {
        color: #ffffff;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.1px; }
      .dt > table .td-orange span {
        color: #ffffff;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.4px; }
    .dt > table .td-red {
      background: #FF6384;
      cursor: pointer;
      overflow: hidden; }
      .dt > table .td-red:hover {
        background-color: #ff4f74 !important; }
      .dt > table .td-red:focus {
        background-color: #ff3a64 !important; }
      .dt > table .td-red:active {
        background-color: #ff3a64 !important; }
      @media (max-width: 56.25em) {
        .dt > table .td-red:hover {
          background-color: #FF6384 !important; }
        .dt > table .td-red:focus {
          background-color: #FF6384 !important; }
        .dt > table .td-red:active {
          background-color: #FF6384 !important; } }
      .dt > table .td-red .ripple {
        background-color: #ffffff !important; }
      .dt > table .td-red label {
        color: #ffffff;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.1px; }
      .dt > table .td-red span {
        color: #ffffff;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.4px; }
    .dt > table .td-lg {
      background: #C9CBCF;
      cursor: pointer;
      overflow: hidden; }
      .dt > table .td-lg:hover {
        background-color: #bec1c5 !important; }
      .dt > table .td-lg:focus {
        background-color: #b3b6bc !important; }
      .dt > table .td-lg:active {
        background-color: #b3b6bc !important; }
      @media (max-width: 56.25em) {
        .dt > table .td-lg:hover {
          background-color: #C9CBCF !important; }
        .dt > table .td-lg:focus {
          background-color: #C9CBCF !important; }
        .dt > table .td-lg:active {
          background-color: #C9CBCF !important; } }
      .dt > table .td-lg .ripple {
        background-color: #ffffff !important; }
      .dt > table .td-lg label {
        color: #000;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.1px; }
      .dt > table .td-lg span {
        color: #000;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.4px; }
    .dt > table .td-black {
      background: #000;
      cursor: pointer;
      overflow: hidden; }
      .dt > table .td-black:hover {
        background-color: black !important; }
      .dt > table .td-black:focus {
        background-color: black !important; }
      .dt > table .td-black:active {
        background-color: black !important; }
      @media (max-width: 56.25em) {
        .dt > table .td-black:hover {
          background-color: #000 !important; }
        .dt > table .td-black:focus {
          background-color: #000 !important; }
        .dt > table .td-black:active {
          background-color: #000 !important; } }
      .dt > table .td-black .ripple {
        background-color: #ffffff !important; }
      .dt > table .td-black label {
        color: #ffffff;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.1px; }
      .dt > table .td-black span {
        color: #ffffff;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.4px; }

/*dt*/
.dt {
  /*data table*/
  /*table*/ }
  .dt > table {
    /*tdWithAvatar*/
    /*tdWithAvatar*/
    /*tdWithAvatar*/
    /*tdWithAvatar*/
    /*tdWithAvatar*/
    /*tdWithAvatar*/
    /*tdWithAvatar*/
    /*tdWithAvatar*/
    /*tdWithAvatar*/
    /*tdWithAvatar*/ }
    .dt > table .td-white-icon svg {
      fill: #ffffff;
      opacity: 0.99; }
    .dt > table .td-blue-icon svg {
      fill: #36A2EB;
      opacity: 0.99; }
    .dt > table .td-purple-icon svg {
      fill: #9966FF;
      opacity: 0.99; }
    .dt > table .td-green-icon svg {
      fill: #4BC0C0;
      opacity: 0.99; }
    .dt > table .td-yellow-icon svg {
      fill: #FFCD56;
      opacity: 0.99; }
    .dt > table .td-orange-icon svg {
      fill: #f86624;
      opacity: 0.99; }
    .dt > table .td-red-icon svg {
      fill: #FF6384;
      opacity: 0.99; }
    .dt > table .td-lg-icon svg {
      fill: #C9CBCF;
      opacity: 0.99; }
    .dt > table .td-black-icon svg {
      fill: #000;
      opacity: 0.99; }
    .dt > table .td-gray-icon svg {
      fill: #B7C2CC;
      opacity: 0.99; }

/*dt*/
.dt-noCheck > table {
  border-collapse: collapse;
  table-layout: fixed; }
  .dt-noCheck > table th:nth-child(1), .dt-noCheck > table td:nth-child(1) {
    position: relative;
    width: 0px;
    max-width: auto;
    pointer-events: auto;
    color: #000;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1px; }
    .dt-noCheck > table th:nth-child(1) input, .dt-noCheck > table td:nth-child(1) input {
      display: none; }

.dt .filterCont {
  transform: scaleY(0);
  transform-origin: top;
  width: calc(100% - 16px);
  margin-left: 8px;
  transition: all 0.15s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }

.dt-filtering .filterCont {
  background-color: #ffffff;
  transform: scaleY(1);
  transition: all 0.15s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }

.dt-filtering .filter svg {
  opacity: 1 !important;
  fill: #0280EE !important; }

.dt {
  /*footer*/ }
  .dt > .footer {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 42px;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.25s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
    .dt > .footer:hover {
      background-color: gainsboro; }
    .dt > .footer:focus {
      background-color: #d2d2d2; }
    .dt > .footer:active {
      background-color: #d2d2d2; }
    @media (max-width: 56.25em) {
      .dt > .footer:hover {
        background-color: #E6E6E6; }
      .dt > .footer:focus {
        background-color: #E6E6E6; }
      .dt > .footer:active {
        background-color: #E6E6E6; } }
    .dt > .footer .ripple {
      background-color: #ffffff; }
    .dt > .footer:active {
      transform: scale(0.9); }
    .dt > .footer label {
      color: #0280EE;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 1.25px;
      text-transform: uppercase;
      user-select: none;
      pointer-events: none;
      transition: all 0.25s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
    .dt > .footer svg {
      height: 24px;
      width: 24px;
      margin-right: 4px;
      fill: #9DA7B1;
      opacity: 0;
      user-select: none;
      pointer-events: none;
      transition: all 0.25s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

.dt {
  /*footer*/ }
  .dt > .footer-disabled:active {
    transform: scale(1); }
  .dt > .footer-disabled label {
    color: #000;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.25px;
    text-transform: uppercase;
    opacity: 0.54; }
  .dt > .footer-disabled svg {
    display: none; }

.dt > .footer-loading label {
  color: #0280EE;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.25px;
  text-transform: uppercase; }

.dt > .footer-loading svg {
  opacity: 1;
  fill: #0280EE;
  animation: rotation 0.5s infinite; }

.dt {
  /*data table*/ }
  .dt > table th:not(:first-child) {
    border-top: 2px solid transparent; }
    .dt > table th:not(:first-child):hover::before {
      opacity: 0.36;
      transform: scale(1) rotate(0deg); }
  .dt > table th {
    border-bottom: 4px solid transparent;
    cursor: pointer;
    overflow: hidden; }
    .dt > table th:hover {
      background-color: gainsboro; }
    .dt > table th:focus {
      background-color: #d2d2d2; }
    .dt > table th:active {
      background-color: #d2d2d2; }
    @media (max-width: 56.25em) {
      .dt > table th:hover {
        background-color: #E6E6E6; }
      .dt > table th:focus {
        background-color: #E6E6E6; }
      .dt > table th:active {
        background-color: #E6E6E6; } }
    .dt > table th .ripple {
      background-color: #ffffff; }
    .dt > table th:hover {
      border-bottom: 4px solid #0000001e; }
  .dt > table tr .selected {
    opacity: 1;
    border-bottom: 4px solid #0280EE; }
    .dt > table tr .selected::before {
      opacity: 0.87;
      transform: scale(1) rotate(0deg); }
    .dt > table tr .selected:hover::before {
      opacity: 0.87;
      transform: scale(1) rotate(0deg); }
  .dt > table tr .reverse {
    opacity: 1;
    border-bottom: 4px solid #0280EE; }
    .dt > table tr .reverse::before {
      opacity: 0.87;
      transform: scale(1) rotate(180deg); }
    .dt > table tr .reverse:hover::before {
      opacity: 0.87;
      transform: scale(1) rotate(180deg); }

.tr-notice td {
  background: #4bebb5;
  border-bottom: 1px solid #ffffff; }
  .tr-notice td label {
    color: #ffffff !important; }
  .tr-notice td span {
    color: #ffffff !important; }

.tr-deleteRow {
  animation: flipOutX 2.900s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  background-color: #ff6984 !important; }
  .tr-deleteRow td label {
    color: #ffffff !important; }
  .tr-deleteRow td span {
    color: #ffffff !important; }

.dt-error > .header > div:nth-child(2) {
  display: none; }

.dt-error > .header > .more, .dt-error > .header > .filter {
  display: none; }

.dt-error > table > thead > tr > th {
  color: #B00020 !important; }

.dt-error > table > tbody > tr {
  display: none; }

.dt-error > .footer {
  display: none !important; }

.thead-desktop {
  /*data table*/ }
  .thead-desktop th:not(:first-child) {
    padding-left: 24px !important;
    padding-right: 4px; }
    .thead-desktop th:not(:first-child)::before {
      top: 6px !important;
      left: 0px;
      width: 20px !important;
      height: 20px !important; }
  .thead-desktop thead th:first-child input {
    top: 6px; }
  .thead-desktop thead tr {
    height: 32px; }
  .thead-desktop tr {
    height: 32px; }

/*dt*/
.textfield {
  position: relative;
  display: inline-block;
  width: 100%;
  overflow: hidden;
  z-index: 1;
  /*elem*/ }
  .textfield > .elem {
    position: relative;
    display: block;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 56px;
    margin-bottom: 16px;
    background-color: #f2f2f2;
    padding-left: 12px;
    padding-top: 14px;
    padding-right: 50px;
    text-overflow: ellipsis;
    appearance: none;
    -webkit-appearance: none;
    color: #000;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.25px;
    font-weight: 700;
    outline-width: 0;
    caret-color: #0280EE;
    border: none;
    border-bottom: 1px solid #8a8a8a; }
    .textfield > .elem:hover {
      background-color: rgba(0, 0, 0, 0.04); }
    .textfield > .elem:focus {
      background-color: rgba(0, 0, 0, 0.06); }
    .textfield > .elem + .indicador {
      position: absolute;
      display: inline-block;
      bottom: 16px;
      height: 2px;
      width: 100%;
      background-color: #0280EE;
      transform: scaleX(0); }
    .textfield > .elem:focus + .indicador {
      transform: scaleX(1); }
  .textfield input[type="time"] {
    padding-top: 18px; }
    .textfield input[type="time"]::-webkit-datetime-edit-second-field {
      border: 5px solid blue;
      display: none; }

.c100 {
  display: flex;
  align-items: center;
  background-color: #f2f2f2;
  border-bottom: 1px solid black; }

.quick-form {
  right: 5px;
  top: 5px;
  font-size: 15px;
  width: 30px;
  height: 36px;
  border-style: none;
  background-color: #0078d4;
  color: white; }
  .quick-form:hover {
    background-color: #0264BA; }

.textfield-desk {
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  overflow: visible; }
  .textfield-desk > .elem {
    height: 32px;
    margin-bottom: 0.5px;
    padding-left: 4px !important;
    padding-bottom: 2px;
    border-bottom: 0px; }
    .textfield-desk > .elem + .indicador {
      bottom: 0px  !important;
      height: 2px;
      transform: scaleX(0); }
  .textfield-desk > .label {
    display: none;
    top: 1px !important;
    left: 4px !important;
    opacity: 0.54;
    color: #202124 !important;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.4px;
    font-family: "Roboto" sans-serif; }
  .textfield-desk .elem:focus ~ .label {
    text-transform: none !important; }
  .textfield-desk > .helper {
    bottom: -11px !important;
    left: 0px !important;
    width: 100% !important;
    color: #000;
    font-size: 10px;
    font-weight: normal;
    letter-spacing: 1.5px; }
  .textfield-desk > .counter {
    color: #000;
    font-size: 10px;
    font-weight: normal;
    letter-spacing: 1.5px; }
  .textfield-desk > .trailing {
    top: 2px !important;
    width: 20px !important;
    right: 4px !important;
    opacity: 0.36; }
  .textfield-desk input[type="time"] {
    padding-bottom: 4px; }
  .textfield-desk input[type="date"] {
    padding-bottom: 3px;
    color: #000;
    font-size: 14px;
    letter-spacing: 0.25px;
    font-weight: 500;
    font-family: 'Roboto' sans-serif; }

.textfield-mini {
  height: 24px !important; }
  .textfield-mini > .elem {
    height: 24px !important;
    margin: 0px !important;
    padding: 0px !important;
    padding-left: 4px !important;
    border-bottom: none;
    color: #000 !important;
    font-size: 12px       !important;
    font-weight: 400      !important;
    letter-spacing: 0.5px !important; }
    .textfield-mini > .elem::placeholder {
      color: #000 !important;
      font-size: 12px       !important;
      font-weight: 400      !important;
      letter-spacing: 0.5px !important;
      margin-bottom: 16px;
      letter-spacing: 0.5px !important; }
  .textfield-mini:after {
    position: absolute;
    content: '';
    top: 4px !important;
    left: 2px;
    width: 16px !important;
    height: 16px !important; }

.textfield-multiselect-mini {
  height: 24px !important; }
  .textfield-multiselect-mini > .elem {
    height: 24px !important;
    margin: 0px !important;
    padding: 0px !important;
    padding-left: 4px !important;
    height: 24px;
    color: #000 !important;
    font-size: 12px       !important;
    font-weight: 400      !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 16px;
    border-bottom: none; }
  .textfield-multiselect-mini:after {
    position: absolute;
    content: '';
    top: 4px;
    right: 2px;
    width: 16px !important;
    height: 16px !important;
    background: url(svg/expand.svg) no-repeat;
    background-size: 100% 100%;
    background-position: center;
    opacity: 1 !important;
    user-select: none;
    pointer-events: none; }

.textfield > .elem::placeholder {
  color: #000;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: 0.5px;
  margin-top: 8px;
  font-weight: 300;
  opacity: 0.36; }

.textfield > .label {
  position: absolute;
  display: inline;
  top: 16px;
  left: 12px;
  width: calc(100% - 48px);
  user-select: none;
  pointer-events: none;
  color: #202124 !important;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.4px;
  font-family: "Roboto" sans-serif; }

.textfield > .helper {
  position: absolute;
  bottom: 0px;
  left: 12px;
  width: calc(100% - 48px - 48px);
  color: #000;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.4px;
  opacity: 0.87;
  user-select: none;
  pointer-events: none; }

.textfield > .counter {
  position: absolute;
  bottom: 0px;
  right: 12px;
  width: 48px;
  color: #000;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.4px;
  opacity: 0.87;
  user-select: none;
  pointer-events: none; }

.textfield > .trailing {
  position: absolute;
  height: 32px;
  width: 32px;
  right: 8px;
  top: 12px;
  top: -10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.16;
  transform: scale(0) rotate(-360deg); }
  .textfield > .trailing svg {
    height: 24px;
    width: 24px;
    display: block;
    fill: #000;
    opacity: 0.32;
    user-select: none;
    pointer-events: none; }

.textfield > .restriction {
  position: absolute;
  display: inline-block;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 0%;
  background-color: #B00020;
  opacity: 0.0; }

.textfield-restriction > .restriction {
  height: 100% !important;
  opacity: 0.06 !important; }

.textfield-disabled {
  user-select: none;
  pointer-events: none;
  opacity: 0.54; }

.textfield-multiselect > .trailing {
  user-select: none;
  pointer-events: none; }

.textfield-multiselect:after {
  position: absolute;
  content: '';
  top: 8px;
  right: 2px;
  width: 16px !important;
  height: 16px !important;
  background: url(svg/expand.svg) no-repeat;
  background-size: 100% 100%;
  background-position: center;
  opacity: 1 !important;
  user-select: none;
  pointer-events: none; }

.textfield-multiselect .label {
  color: #202124 !important;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.4px;
  font-family: 'Roboto' sans-serif; }

.textfield-date > .elem {
  color: #000;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.25px;
  font-weight: 500;
  font-family: 'Roboto';
  padding-top: 10px;
  padding-right: 12px; }
  .textfield-date > .elem ~ .label {
    top: 8px;
    color: #000;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.4px; }
  .textfield-date > .elem:focus ~ .label {
    opacity: 1; }

.textfield-time > .elem {
  padding-top: 14px;
  padding-right: 8px !important; }
  .textfield-time > .elem ~ .label {
    top: 8px;
    color: #000;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.4px; }

.textfield-cash > .elem {
  padding-left: 16px !important; }

.textfield-cash:after {
  position: absolute;
  content: '';
  top: 14px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: url(svg/money.svg) no-repeat;
  background-size: 100% 100%;
  background-position: center;
  opacity: 1 !important;
  user-select: none;
  pointer-events: none; }

.textfield-textarea .elem {
  padding-top: 23px;
  resize: none; }
  .textfield-textarea .elem ~ .label {
    top: 8px;
    color: #000;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.4px; }

.textfield-password > .label {
  top: 8px;
  color: #000;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.4px; }

.textfield-password > .trailing {
  top: 12px;
  transform: scale(1) rotate(0deg) !important;
  opacity: 1 !important; }
  .textfield-password > .trailing:active svg {
    opacity: 0.87; }
  .textfield-password > .trailing:hover svg {
    opacity: 0.67; }

.textfield-passwordBlur input {
  filter: blur(2px) !important; }

.textfield-label {
  height: 36px;
  margin-bottom: 0px !important; }
  .textfield-label > .elem {
    padding-left: 8px;
    padding-top: 0px;
    padding-right: 0px;
    margin: 0px;
    user-select: none;
    pointer-events: none;
    background-color: transparent; }
  .textfield-label > .label {
    top: 4px;
    left: 8px;
    color: #000;
    font-size: 10px;
    font-weight: normal;
    letter-spacing: 1.5px; }

/**/
.textfield-autocomplete {
  overflow: visible; }
  .textfield-autocomplete > .elem {
    margin-bottom: 0px; }
  .textfield-autocomplete > .label {
    top: 8px;
    color: #000;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.4px; }
  .textfield-autocomplete > .add {
    position: absolute;
    height: 48px;
    width: 48px;
    right: 8px;
    top: 2px;
    cursor: pointer;
    opacity: 0.54;
    display: flex;
    justify-content: center;
    align-items: center; }
    .textfield-autocomplete > .add svg {
      height: 24px;
      width: 24px;
      display: block;
      fill: #0280EE;
      user-select: none;
      pointer-events: none; }
    .textfield-autocomplete > .add:active {
      transform: scale(0.9); }
    .textfield-autocomplete > .add:hover {
      opacity: 0.99; }

#autocompleteSelector {
  position: fixed;
  display: inline-block;
  min-width: 112px;
  min-height: 32px;
  max-width: 800px;
  max-height: 40vh;
  border-radius: 4px;
  background-color: #ffffff;
  transform: scaleY(0);
  opacity: 0;
  transform-origin: top;
  overflow-y: scroll;
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  z-index: 210; }
  #autocompleteSelector > label {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 36px;
    padding: 8px;
    padding-left: 8px;
    color: #000;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.25px;
    cursor: pointer;
    overflow: hidden;
    z-index: 2000 !important; }
    #autocompleteSelector > label:hover {
      background-color: whitesmoke; }
    #autocompleteSelector > label:focus {
      background-color: whitesmoke; }
    #autocompleteSelector > label:active {
      background-color: #ebebeb; }
    @media (max-width: 56.25em) {
      #autocompleteSelector > label:hover {
        background-color: #ffffff; }
      #autocompleteSelector > label:focus {
        background-color: #ffffff; }
      #autocompleteSelector > label:active {
        background-color: #ffffff; } }
    #autocompleteSelector > label .ripple {
      background-color: #cde7fe; }
    #autocompleteSelector > label > div {
      position: absolute;
      display: inline-block;
      width: 28px;
      height: 28px;
      top: 4px;
      left: 4px;
      border-radius: 50%;
      user-select: none;
      pointer-events: none;
      background-image: url("./img/pic/person.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover; }
  #autocompleteSelector:hover {
    display: inline-block !important; }
  #autocompleteSelector > .selected {
    background: #cde7fe; }

/*selector*/
.autocompleteSelector-withAvatar > label {
  padding-left: 38px !important; }

.autocompleteSelector-show {
  animation: menu-show  0.150s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

@keyframes autocompleteSelector-show {
  from {
    transform: scaleY(0);
    opacity: 0; }
  to {
    transform: scaleY(1);
    opacity: 1; } }

.autocompleteSelector-hide {
  animation: menu-hide  0.200s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }

@keyframes autocompleteSelector-hide {
  from {
    transform: scaleY(1);
    opacity: 1; }
  to {
    transform: scaleY(0);
    opacity: 0; } }

.textfield-autocomplete > .chip-cont {
  position: relative;
  display: inline-block;
  min-width: 4px;
  min-height: 28px;
  width: 100%;
  left: 0px;
  margin: 0px;
  /*time-task*/ }
  .textfield-autocomplete > .chip-cont > .chip {
    position: relative;
    display: inline;
    float: left;
    min-width: 48px;
    height: 28px;
    margin-top: 2px;
    border-radius: 16px;
    background: #d7ecff;
    float: left;
    margin-left: 4px;
    padding-left: 4px;
    cursor: pointer;
    /*remove*/ }
    .textfield-autocomplete > .chip-cont > .chip > label {
      position: relative;
      display: inline-block;
      float: left;
      left: 4px;
      top: 5px;
      width: calc(100% - 28px);
      min-width: 32px;
      max-width: 150px;
      text-align: left;
      padding-right: 8px;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-wrap: none;
      overflow: hidden;
      user-select: none;
      pointer-events: none;
      color: #000;
      font-size: 14px;
      font-weight: normal;
      letter-spacing: 0.25px; }
    .textfield-autocomplete > .chip-cont > .chip > span {
      position: relative;
      display: inline-block;
      float: right;
      width: 24px;
      height: 24px;
      margin-top: 0.5px;
      right: 0px;
      margin-left: 4px;
      opacity: 0.36;
      background: url(svg/cancel.svg) no-repeat; }
      .textfield-autocomplete > .chip-cont > .chip > span:hover {
        opacity: 0.54; }
      .textfield-autocomplete > .chip-cont > .chip > span:active {
        opacity: 0.87; }

.textfield-autocomplete-one > .chip-cont {
  min-height: 1px;
  top: -34px; }
  .textfield-autocomplete-one > .chip-cont > .chip > label {
    max-width: calc(100% - 28px); }

.textfield-autocomplete-disabled > .elem {
  user-select: none;
  pointer-events: none; }
  .textfield-autocomplete-disabled > .elem::placeholder {
    opacity: 0.0; }

.textfield-autocomplete-disabled > .chip-cont {
  user-select: none;
  pointer-events: none;
  opacity: 0.76; }
  .textfield-autocomplete-disabled > .chip-cont > .chip {
    user-select: none;
    pointer-events: none;
    opacity: 0.76; }

.textfield-autocomplete-desk {
  height: 36px !important; }
  .textfield-autocomplete-desk > .elem {
    height: 36px; }
  .textfield-autocomplete-desk > .label {
    top: 2px !important;
    opacity: 1 !important;
    color: #000;
    font-size: 10px;
    font-weight: normal;
    letter-spacing: 1.5px;
    text-transform: uppercase !important;
    font-size: 10px !important;
    letter-spacing: 0.5px !important; }
  .textfield-autocomplete-desk > .chip-cont {
    min-height: 16px;
    /*time-task*/ }
    .textfield-autocomplete-desk > .chip-cont > .chip {
      height: 16px;
      /*remove*/ }
      .textfield-autocomplete-desk > .chip-cont > .chip > label {
        left: 4px;
        top: 2px;
        color: #000;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.4px; }
      .textfield-autocomplete-desk > .chip-cont > .chip > span {
        width: 16px;
        height: 16px;
        top: 0px;
        right: 2px;
        background-size: 16px 16px; }

.textfield-autocomplete-deskOne {
  height: 36px;
  overflow: hidden; }
  .textfield-autocomplete-deskOne > .elem {
    height: 36px; }
  .textfield-autocomplete-deskOne > .label {
    top: 1px !important;
    left: 4px !important;
    opacity: 0.54;
    /*kelvin*/
    color: #202124 !important;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.4px;
    font-family: 'Roboto' !important; }
  .textfield-autocomplete-deskOne > .chip-cont {
    min-height: 1px;
    top: -22px;
    width: calc(100% - 42px);
    /*time-task*/ }
    .textfield-autocomplete-deskOne > .chip-cont > .chip {
      height: 18px;
      left: 0px;
      width: calc(100% - 0px);
      /*remove*/ }
      .textfield-autocomplete-deskOne > .chip-cont > .chip > label {
        left: 0px;
        top: 2px;
        color: #000;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.4px;
        max-width: calc(100% - 28px) !important; }
      .textfield-autocomplete-deskOne > .chip-cont > .chip > span {
        width: 16px;
        height: 16px;
        top: 0px;
        right: 2px;
        background-size: 16px 16px; }
  .textfield-autocomplete-deskOne > .add {
    position: absolute;
    height: 32px;
    width: 32px;
    right: 4px;
    top: 2px; }

.textfield-autocomplete-mini {
  height: 24px;
  overflow: hidden;
  /*chip-cont*/ }
  .textfield-autocomplete-mini > .elem {
    height: 24px;
    padding: 0px;
    padding-top: 4px;
    border-bottom: none; }
    .textfield-autocomplete-mini > .elem::placeholder {
      color: #000 !important;
      font-size: 12px       !important;
      font-weight: 400      !important;
      letter-spacing: 0.5px !important;
      margin-bottom: 16px;
      letter-spacing: 0.5px !important; }
  .textfield-autocomplete-mini > .chip-cont {
    min-height: 1px;
    top: -24px;
    min-width: 48px;
    width: calc(100% - 0px);
    /*time-task*/ }
    .textfield-autocomplete-mini > .chip-cont > .chip {
      height: 18px;
      left: -2px;
      width: calc(100% - 8px);
      /*remove*/ }
      .textfield-autocomplete-mini > .chip-cont > .chip > label {
        left: 0px;
        top: 2px;
        color: #000;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.4px;
        max-width: calc(100% - 28px) !important; }
      .textfield-autocomplete-mini > .chip-cont > .chip > span {
        width: 16px;
        height: 16px;
        top: 0px;
        right: 2px;
        background-size: 16px 16px; }
  .textfield-autocomplete-mini > .add {
    position: absolute;
    height: 32px;
    width: 32px;
    right: 4px;
    top: -4px; }

.textfield > .label {
  transition: all 0.1s;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }

.textfield > .elem:focus ~ .label {
  opacity: 1;
  top: 8px;
  color: #0280EE;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.4px; }

.textfield > .indicador {
  transition: all 0.25s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }

.textfield > .trailing {
  transition: all 0.25s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }

.textfield-desk > .elem:focus ~ .label {
  top: 0px;
  color: #0280EE;
  font-size: 10px;
  font-weight: normal;
  letter-spacing: 1.5px;
  text-transform: uppercase; }

.textfield-filled > .label {
  top: 8px;
  color: #000;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.4px; }

.textfield-filled > .trailing {
  top: 12px;
  transform: scale(1) rotate(0deg);
  opacity: 1; }
  .textfield-filled > .trailing:active svg {
    opacity: 0.99; }
  .textfield-filled > .trailing:hover svg {
    opacity: 0.67; }

/**/
.textfield-select {
  cursor: pointer; }
  .textfield-select > .trailing {
    user-select: none;
    pointer-events: none;
    top: 12px;
    transform: scale(1) rotate(0deg);
    opacity: 1; }

.textfield-error > .label {
  color: #B00020 !important; }

.textfield-error > .elem {
  caret-color: #B00020 !important;
  border: 1px solid #B00020; }
  .textfield-error > .elem + .indicador {
    background-color: #B00020 !important;
    transform: scaleX(1); }
  .textfield-error > .elem:focus ~ .label {
    color: #B00020 !important; }

.textfield-error > .trailing svg {
  fill: #B00020 !important;
  opacity: 1; }

.textfield-error > .helper {
  color: #B00020 !important; }

.textfield-completed > .label {
  color: #4BB04F; }

.textfield-completed > .elem {
  caret-color: #4BB04F; }
  .textfield-completed > .elem + .indicador {
    background-color: #4BB04F;
    transform: scaleX(1); }
  .textfield-completed > .elem:focus ~ .label {
    color: #4BB04F; }

.textfield-completed > .trailing svg {
  fill: #4BB04F;
  opacity: 1; }

.textfield-completed > .helper {
  color: #4BB04F; }

/**/
.textfield-caution > .elem {
  caret-color: #FD9726; }
  .textfield-caution > .elem + .indicador {
    background-color: #FD9726;
    transform: scaleX(1); }
  .textfield-caution > .elem:focus ~ .label {
    color: #000; }

.textfield-caution > .trailing svg {
  fill: #FD9726;
  opacity: 1; }

.multivalue {
  position: relative;
  display: inline-block;
  width: calc(100% - 0px);
  padding-top: 8px;
  padding-bottom: 4px;
  border-bottom: 4px solid #E6E6E6;
  margin-bottom: 16px;
  /*lineCont*/ }
  .multivalue .lineCont {
    /*line*/ }
    .multivalue .lineCont > .line {
      position: relative;
      display: inline-block;
      width: calc(100% - 0px); }
      .multivalue .lineCont > .line > .remove {
        position: absolute;
        display: inline-block;
        left: 0px;
        top: 0px;
        height: 56px;
        width: 24px;
        background: url(svg/delete-o-r.svg) no-repeat;
        background-size: 100% 100%;
        background-position: center;
        cursor: pointer;
        z-index: 10;
        opacity: 0.56; }
      .multivalue .lineCont > .line > .contA {
        position: relative;
        display: inline-block;
        width: calc(100% - 120px);
        float: left;
        min-height: 48px; }
      .multivalue .lineCont > .line > .contB {
        position: relative;
        display: inline-block;
        width: 120px;
        float: left;
        min-height: 48px; }
      .multivalue .lineCont > .line .textfield-multivalue > .elem {
        padding-left: 24px  !important; }
      .multivalue .lineCont > .line .textfield-multivalue > .label {
        left: 24px; }

/*timeValue*/
.multivalue-caution {
  /*lineCont*/ }
  .multivalue-caution .lineCont {
    /*line*/ }
    .multivalue-caution .lineCont > .line > .contA .textfield > .indicador, .multivalue-caution .lineCont > .line > .contB .textfield > .indicador {
      background-color: #FD9726;
      transform: scaleX(1); }

/*timeValue*/
.button-multivalue {
  position: relative;
  display: inline-block;
  float: right;
  padding-left: 4px  !important;
  padding-right: 4px !important;
  padding-top: 4px   !important;
  margin-left: 2px !important;
  margin-top: -20px !important;
  margin-bottom: -8px !important;
  height: 24px !important;
  width: 120px;
  z-index: 2; }
  .button-multivalue svg {
    height: 16px;
    width: 16px;
    margin-right: 4px; }

.multitable {
  position: relative;
  display: inline-block;
  width: calc(100% - 8px);
  max-width: 1200px;
  min-height: 24px;
  left: 50%;
  transform: translateX(-50%); }
  .multitable > .cont, .multitable > .cont-bottom {
    position: relative;
    display: inline-block;
    width: 100%;
    min-height: 24px;
    /*line*/ }
    .multitable > .cont > .line, .multitable > .cont-bottom > .line {
      position: relative;
      display: inline-block;
      width: 100%;
      min-height: 24px;
      margin-top: 0px;
      padding-left: 24px;
      background: #ffffff;
      /*remove*/ }
      .multitable > .cont > .line > .removeLine, .multitable > .cont-bottom > .line > .removeLine {
        position: absolute;
        display: inline-block;
        width: 20px;
        height: 100%;
        top: 0px;
        left: 0px;
        padding: 4px;
        cursor: pointer;
        overflow: hidden; }
        .multitable > .cont > .line > .removeLine:hover, .multitable > .cont-bottom > .line > .removeLine:hover {
          background-color: whitesmoke; }
        .multitable > .cont > .line > .removeLine:focus, .multitable > .cont-bottom > .line > .removeLine:focus {
          background-color: whitesmoke; }
        .multitable > .cont > .line > .removeLine:active, .multitable > .cont-bottom > .line > .removeLine:active {
          background-color: #ebebeb; }
        @media (max-width: 56.25em) {
          .multitable > .cont > .line > .removeLine:hover, .multitable > .cont-bottom > .line > .removeLine:hover {
            background-color: #ffffff; }
          .multitable > .cont > .line > .removeLine:focus, .multitable > .cont-bottom > .line > .removeLine:focus {
            background-color: #ffffff; }
          .multitable > .cont > .line > .removeLine:active, .multitable > .cont-bottom > .line > .removeLine:active {
            background-color: #ffffff; } }
        .multitable > .cont > .line > .removeLine .ripple, .multitable > .cont-bottom > .line > .removeLine .ripple {
          background-color: #cde7fe; }
        .multitable > .cont > .line > .removeLine::before, .multitable > .cont-bottom > .line > .removeLine::before {
          position: absolute;
          content: '';
          top: 4px;
          left: 0px;
          width: 18px;
          height: 18px;
          background: url(svg/delete.svg) no-repeat;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          opacity: 0.48; }
      .multitable > .cont > .line > .restriction, .multitable > .cont-bottom > .line > .restriction {
        position: absolute;
        display: inline-block;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 0%;
        background-color: #B00020;
        opacity: 0.0; }
  .multitable .btn-container {
    position: relative;
    margin-bottom: 3px;
    display: inline-block;
    left: 349px;
    display: flex;
    /* justify-content: center;
		align-items: center; */ }
    .multitable .btn-container .hideOnView {
      margin-left: 10px !important;
      display: iniline;
      top: 0px;
      width: 100%;
      max-width: 150px;
      padding: 4px;
      height: 24px;
      text-align: center;
      cursor: pointer;
      user-select: auto;
      pointer-events: auto;
      cursor: pointer;
      overflow: hidden;
      background-color: #0280EE;
      left: 0%;
      margin-left: 50%;
      transform: translateX(-50%); }
      .multitable .btn-container .hideOnView:hover {
        background-color: #0275da; }
      .multitable .btn-container .hideOnView:focus {
        background-color: #026ac6; }
      .multitable .btn-container .hideOnView:active {
        background-color: #026ac6; }
      @media (max-width: 56.25em) {
        .multitable .btn-container .hideOnView:hover {
          background-color: #0280EE; }
        .multitable .btn-container .hideOnView:focus {
          background-color: #0280EE; }
        .multitable .btn-container .hideOnView:active {
          background-color: #0280EE; } }
      .multitable .btn-container .hideOnView .ripple {
        background-color: #ffffff; }
      .multitable .btn-container .hideOnView label {
        color: #ffffff;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.4px;
        user-select: none;
        pointer-events: none; }
    .multitable .btn-container .btn-quick-form {
      width: 158px;
      height: 24px;
      border: 1px solid #0078d4;
      color: #0078d4;
      background: transparent;
      font-size: 12px; }
      .multitable .btn-container .btn-quick-form:hover {
        color: #ffffff; }
  .multitable > .btn, .multitable .mt_btn {
    position: relative;
    display: iniline;
    top: 0px;
    width: 100%;
    max-width: 150px;
    padding: 4px;
    height: 24px;
    text-align: center;
    cursor: pointer;
    user-select: auto;
    pointer-events: auto;
    cursor: pointer;
    overflow: hidden;
    background-color: #0280EE;
    left: 0%;
    margin-left: 50%;
    transform: translateX(-50%); }
    .multitable > .btn:hover, .multitable .mt_btn:hover {
      background-color: #0275da; }
    .multitable > .btn:focus, .multitable .mt_btn:focus {
      background-color: #026ac6; }
    .multitable > .btn:active, .multitable .mt_btn:active {
      background-color: #026ac6; }
    @media (max-width: 56.25em) {
      .multitable > .btn:hover, .multitable .mt_btn:hover {
        background-color: #0280EE; }
      .multitable > .btn:focus, .multitable .mt_btn:focus {
        background-color: #0280EE; }
      .multitable > .btn:active, .multitable .mt_btn:active {
        background-color: #0280EE; } }
    .multitable > .btn .ripple, .multitable .mt_btn .ripple {
      background-color: #ffffff; }
    .multitable > .btn label, .multitable .mt_btn label {
      color: #ffffff;
      font-size: 12px;
      font-weight: normal;
      letter-spacing: 0.4px;
      user-select: none;
      pointer-events: none; }
  .multitable > .cont-bottom {
    background-color: transparent; }
    .multitable > .cont-bottom > .line {
      background: transparent; }
  .multitable > .inputCont {
    display: block;
    margin-top: 24px;
    border: 0.3px solid blue; }

.multitable-deleteLine {
  animation: flipOutX 2.900s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  background-color: #ff6984 !important; }
  .multitable-deleteLine td label {
    color: #ffffff !important; }
  .multitable-deleteLine td span {
    color: #ffffff !important; }
  .multitable-deleteLine > .remove {
    background-color: #ff6984 !important; }
    .multitable-deleteLine > .remove::before {
      background-color: #ff6984 !important; }

.mt-purchase-restriction {
  background-color: rgba(176, 0, 30, 0.07) !important; }

.multitable-error {
  border: 2px solid #B00020 !important; }

.multitable-restriction > .line > .restriction {
  height: 100% !important;
  opacity: 0.06 !important; }

.multitable-restriction ~ .btn, .multitable-restriction ~ .mt_btn {
  opacity: 0.54;
  cursor: pointer;
  user-select: none;
  pointer-events: none; }

.multitable-grid-purchase {
  display: grid;
  grid-template-columns: 45% 55%; }
  .multitable-grid-purchase > .multitable-flex-purchase {
    display: flex;
    flex-direction: row; }

.mx-1 {
  margin: 0px calc((100% / 12) / 1); }

.mx-2 {
  margin: 0px calc((100% / 12) / 2); }

.mx-3 {
  margin: 0px calc((100% / 12) / 3); }

.mx-4 {
  margin: 0px calc((100% / 12) / 4); }

.mx-5 {
  margin: 0px calc((100% / 12) / 5); }

.mx-6 {
  margin: 0px calc((100% / 12) / 6); }

.mx-7 {
  margin: 0px calc((100% / 12) / 7); }

.mx-8 {
  margin: 0px calc((100% / 12) / 8); }

.mx-9 {
  margin: 0px calc((100% / 12) / 9); }

.mx-10 {
  margin: 0px calc((100% / 12) / 10); }

.mx-11 {
  margin: 0px calc((100% / 12) / 11); }

.mx-12 {
  margin: 0px calc((100% / 12) / 12); }

.mx-title-1 {
  width: calc((100% * 12) / 1);
  margin: 0px 1px; }

.mx-title-2 {
  width: calc((100% * 12) / 2);
  margin: 0px 2px; }

.mx-title-3 {
  width: calc((100% * 12) / 3);
  margin: 0px 3px; }

.mx-title-4 {
  width: calc((100% * 12) / 4);
  margin: 0px 4px; }

.mx-title-5 {
  width: calc((100% * 12) / 5);
  margin: 0px 5px; }

.mx-title-6 {
  width: calc((100% * 12) / 6);
  margin: 0px 6px; }

.mx-title-7 {
  width: calc((100% * 12) / 7);
  margin: 0px 7px; }

.mx-title-8 {
  width: calc((100% * 12) / 8);
  margin: 0px 8px; }

.mx-title-9 {
  width: calc((100% * 12) / 9);
  margin: 0px 9px; }

.mx-title-10 {
  width: calc((100% * 12) / 10);
  margin: 0px 10px; }

.mx-title-11 {
  width: calc((100% * 12) / 11);
  margin: 0px 11px; }

.mx-title-12 {
  width: calc((100% * 12) / 12);
  margin: 0px 12px; }

@media (max-width: 56.25em) {
  .multitable {
    width: calc(100% - 4px) !important; } }

.button {
  position: relative;
  display: inline-block;
  float: right;
  padding-left: 16px;
  padding-right: 16px;
  margin-left: 8px;
  margin-top: 8px;
  margin-bottom: 8px;
  min-height: 48px;
  min-width: 64px;
  max-width: 328px;
  background-color: #0280EE;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  transition: all 0.15s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
  .button:hover {
    background-color: #0275da; }
  .button:focus {
    background-color: #026ac6; }
  .button:active {
    background-color: #026ac6; }
  @media (max-width: 56.25em) {
    .button:hover {
      background-color: #0280EE; }
    .button:focus {
      background-color: #0280EE; }
    .button:active {
      background-color: #0280EE; } }
  .button .ripple {
    background-color: #ffffff; }
  .button label {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.25px;
    text-transform: uppercase;
    user-select: none;
    pointer-events: none; }
  .button svg {
    height: 24px;
    width: 24px;
    margin-right: 4px;
    fill: #ffffff;
    user-select: none;
    pointer-events: none; }
  .button:hover {
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); }
  .button:active {
    transform: scale(0.95); }

.button-flat {
  background-color: transparent;
  box-shadow: 0px 0px 0px 0px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center; }
  .button-flat:hover {
    box-shadow: 0px 0px 0px 0px; }
  .button-flat label {
    color: #0280EE; }
  .button-flat svg {
    fill: #0280EE; }
  .button-flat:hover {
    background-color: gainsboro; }
  .button-flat:focus {
    background-color: #d2d2d2; }
  .button-flat:active {
    background-color: #d2d2d2; }
  @media (max-width: 56.25em) {
    .button-flat:hover {
      background-color: #E6E6E6; }
    .button-flat:focus {
      background-color: #E6E6E6; }
    .button-flat:active {
      background-color: #E6E6E6; } }
  .button-flat .ripple {
    background-color: #ffffff; }

.button-plain {
  background-color: transparent;
  box-shadow: 0px 0px 0px 0px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center; }
  .button-plain:hover {
    box-shadow: 0px 0px 0px 0px; }
  .button-plain label {
    color: #9DA7B1; }
  .button-plain svg {
    fill: #9DA7B1; }
  .button-plain:hover {
    background-color: gainsboro; }
  .button-plain:focus {
    background-color: #d2d2d2; }
  .button-plain:active {
    background-color: #d2d2d2; }
  @media (max-width: 56.25em) {
    .button-plain:hover {
      background-color: #E6E6E6; }
    .button-plain:focus {
      background-color: #E6E6E6; }
    .button-plain:active {
      background-color: #E6E6E6; } }
  .button-plain .ripple {
    background-color: #ffffff; }

.button-white {
  background-color: #ffffff;
  box-shadow: 0px 0px 0px 0px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center; }
  .button-white:hover {
    box-shadow: 0px 0px 0px 0px; }
  .button-white label {
    color: #0280EE; }
  .button-white svg {
    fill: #0280EE; }
  .button-white:hover {
    background-color: gainsboro; }
  .button-white:focus {
    background-color: #d2d2d2; }
  .button-white:active {
    background-color: #d2d2d2; }
  @media (max-width: 56.25em) {
    .button-white:hover {
      background-color: #E6E6E6; }
    .button-white:focus {
      background-color: #E6E6E6; }
    .button-white:active {
      background-color: #E6E6E6; } }
  .button-white .ripple {
    background-color: #ffffff; }

.button-large {
  width: calc(100% - 16px);
  margin-top: 16px;
  float: none;
  left: 50%;
  transform: scale(1) translateX(-50%); }
  .button-large:active {
    transform: scale(0.95) translateX(-50%); }

.button-link {
  position: relative;
  display: inline-block;
  width: 100%;
  min-height: 24px;
  margin-top: 8px; }
  .button-link label:nth-child(1) {
    position: relative;
    width: 100%;
    display: inline-block;
    color: #0280EE;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.4px;
    cursor: pointer;
    font-weight: 500; }
  .button-link label:nth-child(2) {
    position: relative;
    width: 100%;
    display: inline-block;
    color: #5F6368;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.4px; }

@media (max-width: 37.5em) {
  .button-large {
    max-width: calc(100% - 16px);
    left: 0%;
    margin-left: 50%;
    transform: translateX(-50%); } }

.button {
  transition: all 0.15s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }

.checkbox {
  position: relative;
  display: inline-block;
  width: calc(100% - 0px);
  min-height: 28px;
  padding: 4px;
  padding-bottom: 8px;
  /*input*/ }
  .checkbox > .title {
    position: relative;
    display: inline-block;
    width: 100%;
    opacity: 0.76;
    color: #000;
    font-size: 10px;
    font-weight: normal;
    letter-spacing: 1.5px;
    text-transform: uppercase !important;
    font-size: 10px !important;
    letter-spacing: 0.5px !important;
    font-weight: 500 !important; }
  .checkbox label {
    position: relative;
    display: inline-block;
    margin-top: 6px;
    margin-left: 12px;
    max-width: calc(100% - 36px);
    float: left;
    color: #000;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.25px;
    user-select: none;
    pointer-events: none;
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; }
  .checkbox > .restriction {
    position: absolute;
    display: inline-block;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 0%;
    background-color: #B00020;
    opacity: 0.0; }
  .checkbox input {
    position: relative;
    display: inline-block;
    left: 0px;
    top: 6px;
    width: 18px;
    height: 18px;
    float: left;
    border: 2px solid #000;
    border-radius: 2px;
    opacity: 0.54;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    flex-shrink: 0;
    background-size: 0% 0%;
    background-position: center;
    transition: 0.15s, emph;
    /**/ }
    .checkbox input::before {
      position: absolute;
      content: '';
      top: -9.5px;
      left: -9px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: #0280EE;
      opacity: 0;
      transform: scale(0);
      transition: 0.15s, emph; }
    .checkbox input:hover::before {
      opacity: 0.12;
      transform: scale(1); }
    .checkbox input:checked {
      opacity: 1;
      background: #0280EE url(svg/check.svg) no-repeat;
      background-size: 100% 100%;
      background-position: center;
      border: 2px solid #0280EE;
      border-radius: 2px; }
      .checkbox input:checked::before {
        display: none; }

.checkbox-caution input {
  border: 2px solid #FD9726; }
  .checkbox-caution input::before {
    background-color: #FD9726; }
  .checkbox-caution input:checked {
    background: #FD9726 url(svg/check.svg) no-repeat;
    border: 2px solid #FD9726; }

.checkbox-caution input {
  border: 2px solid #FD9726; }
  .checkbox-caution input::before {
    background-color: #FD9726; }
  .checkbox-caution input:checked {
    background: #FD9726 url(svg/check.svg) no-repeat;
    border: 2px solid #FD9726; }

.checkbox-error label {
  color: #B00020;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.25px; }

.checkbox-error input {
  border: 2px solid #B00020; }
  .checkbox-error input::before {
    background-color: #B00020; }
  .checkbox-error input:checked {
    background: #B00020 url(svg/check.svg) no-repeat;
    border: 2px solid #B00020; }

.checkbox-desk {
  height: 36px; }
  .checkbox-desk .title {
    top: -2px !important;
    opacity: 0.76;
    color: #000;
    font-size: 10px;
    font-weight: normal;
    letter-spacing: 1.5px;
    text-transform: uppercase !important;
    font-size: 10px !important;
    letter-spacing: 0.5px !important;
    font-weight: 500 !important; }
  .checkbox-desk input {
    top: -8px; }
  .checkbox-desk label {
    top: -12px;
    margin-left: 8px; }

.checkbox-mini {
  min-height: 24px;
  margin-top: 4px;
  padding: 0px;
  /*input*/ }
  .checkbox-mini .title {
    color: #000;
    font-size: 10px;
    font-weight: normal;
    letter-spacing: 1.5px; }
  .checkbox-mini label {
    margin-left: 6px;
    margin-top: 6px;
    color: #000;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.4px; }
  .checkbox-mini input {
    position: relative;
    display: inline-block;
    left: 0px;
    top: 4px;
    margin-top: 2px;
    width: 18px;
    height: 18px; }
    .checkbox-mini input::before {
      position: absolute;
      content: '';
      top: 0px;
      left: 0px;
      width: 16px;
      height: 16px;
      border-radius: 0px; }

/**/
.radio {
  position: relative;
  display: inline-block;
  padding: 4px; }
  .radio > .title {
    position: relative;
    display: block;
    width: 100%;
    left: 0px;
    margin-bottom: 4px;
    user-select: none;
    pointer-events: none;
    color: #000;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.25px; }
  .radio > div {
    position: relative;
    display: block;
    min-height: 28px;
    margin: 0px;
    padding: 2px;
    display: flex;
    justify-content: left;
    align-items: center; }
    .radio > div input {
      position: relative;
      display: inline-block;
      left: 0px;
      top: -4px;
      width: 18px;
      height: 18px;
      border: 2px solid #000;
      opacity: 0.54;
      outline: none;
      -webkit-appearance: none;
      appearance: none;
      cursor: pointer;
      flex-shrink: 0;
      transition: 0.15s, emph;
      /**/ }
      .radio > div input::before {
        position: absolute;
        content: '';
        top: -8px;
        left: -8px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: #0280EE;
        opacity: 0;
        transform: scale(0);
        transition: 0.15s, emph; }
      .radio > div input:hover::before {
        opacity: 0.08;
        transform: scale(1); }
      .radio > div input:checked {
        opacity: 1;
        background: #0280EE url(svg/check.svg) no-repeat;
        background-size: 100% 100%;
        background-position: center;
        border: 2px solid #0280EE;
        border-radius: 2px; }
        .radio > div input:checked::before {
          display: none; }
    .radio > div label {
      position: relative;
      display: inline;
      margin-left: 12px;
      top: -2px;
      padding: 0px;
      user-select: none;
      pointer-events: none;
      color: #000;
      font-size: 14px;
      font-weight: normal;
      letter-spacing: 0.25px;
      font-weight: 500; }

.radio-error > div input {
  border: 2px solid #B00020; }
  .radio-error > div input::before {
    background-color: #B00020; }
  .radio-error > div input:checked {
    border: 2px solid #B00020; }

.radio-error > div label {
  color: #B00020;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.25px; }

.radio-line > div {
  position: relative;
  display: inline-block;
  float: left;
  min-height: 28px;
  padding-right: 16px;
  padding-left: 0px;
  display: flex;
  justify-content: left;
  align-items: center; }

.radio-line-desk {
  height: 36px; }
  .radio-line-desk > .title {
    top: -2px !important;
    opacity: 0.76;
    color: #000;
    font-size: 10px;
    font-weight: normal;
    letter-spacing: 1.5px;
    text-transform: uppercase !important;
    font-size: 10px !important;
    letter-spacing: 0.5px !important;
    font-weight: 500 !important; }
  .radio-line-desk > div {
    position: relative;
    display: inline-block;
    float: left;
    min-height: 20px;
    top: -4px;
    padding-right: 16px;
    padding-left: 0px;
    display: flex;
    justify-content: left;
    align-items: center; }

.switch {
  position: relative;
  display: inline-block;
  height: 36px;
  width: 100%;
  display: flex;
  justify-content: left;
  align-items: center; }
  .switch input {
    display: inline-block;
    position: absolute;
    float: right;
    left: auto;
    right: 16px;
    width: 32px;
    height: 14px;
    background-color: #ababab;
    border-radius: 8px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    flex-shrink: 0; }
    .switch input::before {
      position: absolute;
      content: '';
      top: -3.5px;
      left: 0px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      user-select: none;
      pointer-events: none;
      box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
      background-color: #ffffff;
      transition: 0.25s, emph; }
    .switch input::after {
      position: absolute;
      content: '';
      top: -16px;
      left: -16px;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      user-select: none;
      pointer-events: none;
      box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
      opacity: 0;
      background-color: #0280EE; }
    .switch input:hover::after {
      opacity: 0.02;
      background-color: #0280EE; }
    .switch input:active::after {
      opacity: 0.08;
      background-color: #0280EE; }
    .switch input:checked {
      background-color: #a9d7fe; }
      .switch input:checked::before {
        left: auto;
        right: 0px;
        background-color: #0280EE; }
      .switch input:checked:hover::after {
        left: auto;
        opacity: .16;
        transform: scale(1);
        transition: all .050s;
        background-color: #0280EE; }
  .switch label {
    display: inline-block;
    position: absolute;
    left: 16px;
    color: #000;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.25px;
    user-select: none;
    pointer-events: none;
    font-weight: 500; }

.page {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  float: left;
  overflow-y: scroll;
  overflow-x: hidden; }

.page-appbar {
  display: inline-block;
  top: 56px;
  height: calc(100vh - 57px);
  opacity: 1;
  transform: scale(1);
  padding: 0px !important;
  padding-bottom: 25vh !important; }
  .page-appbar-desktop {
    top: 40px;
    height: calc(100vh - 40px); }

.page-withTab {
  overflow: hidden; }

.page-cont {
  position: relative;
  display: inline-block;
  width: calc(100% - 16px);
  height: auto; }

.page_main {
  width: 50%;
  padding-bottom: 0px !important; }

.page_right {
  position: relative;
  display: inline-block;
  float: left;
  width: 50%;
  height: 100%; }

.page_tv {
  width: 100%;
  padding: 8px;
  height: calc(100% - 0px) !important;
  background: #0E0E0E; }

.page-disabled::after {
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  width: 100%;
  height: 150%;
  background-image: url("./svg/block.svg");
  background-repeat: no-repeat;
  background-size: auto;
  opacity: 0.08; }

@media (max-width: 112.5em) {
  .page {
    width: 100%;
    padding-bottom: 75vh; } }

@media (max-width: 112.5em) {
  .page_right {
    display: none; } }

.page-show {
  animation: page-show  0.150s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }

@keyframes page-show {
  from {
    transform: scale(0.85);
    opacity: 0;
    top: 120vh; }
  to {
    transform: scale(1);
    opacity: 1;
    top: 56px; } }

.page-hide {
  animation: page-hide  0.100s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }

@keyframes page-hide {
  from {
    top: 30vh;
    opacity: 1;
    transform: scale(1) translate(-50%, -30%); }
  to {
    top: 130vh;
    opacity: 0;
    transform: scale(0.85) translate(-50%, -30%); } }

.page-right-title {
  position: relative;
  display: inline-block;
  width: calc(100% - 16px);
  max-width: 900px;
  left: 50%;
  transform: translateX(-50%);
  color: #202124;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.15px; }
  .page-right-title .title {
    position: relative;
    display: inline-block;
    width: calc(100% - 0px);
    margin-top: 14px;
    padding-bottom: 20px;
    margin-bottom: 4px;
    color: #071c4d;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1.5px;
    border-bottom: 1px solid #0000001e; }
  .page-right-title .des {
    position: relative;
    display: inline-block;
    width: calc(100% - 0px);
    margin-top: 18px;
    margin-bottom: 12px;
    opacity: 0.54;
    color: #071c4d;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1px; }

.tab {
  position: sticky;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 56px;
  z-index: 5;
  background-color: #0280EE;
  margin-left: 50%;
  transform: translateX(-50%); }
  .tab div {
    position: relative;
    height: 100%;
    float: left;
    padding-left: 16px;
    padding-right: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
    .tab div label {
      opacity: 0.54;
      margin-left: 8px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-wrap: none;
      color: #ffffff;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 1.25px;
      text-transform: uppercase;
      user-select: none;
      pointer-events: none; }
    .tab div svg {
      height: 24px;
      width: 24px;
      opacity: 0.54;
      fill: #ffffff;
      user-select: none;
      pointer-events: none; }
  .tab .indicator {
    position: absolute;
    height: 4px;
    top: 52px;
    left: 0px;
    background-color: #ffffff; }

.tab-page {
  position: relative;
  display: inline-block;
  height: calc(100vh - 56px);
  overflow-x: hidden; }
  .tab-page .sub-page {
    position: relative;
    display: inline-block;
    float: left;
    height: calc(100% - 56px);
    overflow-y: scroll;
    overflow-x: hidden;
    padding-top: 0px;
    color: black; }

.tab .select label {
  color: #ffffff;
  opacity: 0.99; }

.tab .select svg {
  fill: #ffffff;
  opacity: 0.99; }

.sub-page {
  transition: all 0.300s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }

.tab-anime {
  transition: all 0.25s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }

.tab-plain {
  background-color: transparent; }

@media (max-width: 56.25em) {
  .tab-2 div, .tab-2 span {
    width: 50%; }
  .tab-3 div, .tab-3 span {
    width: 33.33%; }
  .tab-4 div, .tab-4 span {
    width: 25%; }
  .tab-5 div, .tab-5 span {
    width: 20%; } }

.tab-page-2 {
  width: 200%; }
  .tab-page-2 .sub-page {
    width: calc(100% / 2); }

.tab-page-3 {
  width: 300%; }
  .tab-page-3 .sub-page {
    width: calc(100% / 3); }

.tab-page-4 {
  width: 400%; }
  .tab-page-4 .sub-page {
    width: calc(100% / 4); }

.appnav {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 56px;
  z-index: 10;
  background-color: #ffffff;
  border-top: 1px solid #0000001e; }
  .appnav > .indicator {
    position: absolute;
    display: inline-block;
    width: 72px;
    height: 54px;
    top: -8px;
    left: 0px;
    z-index: 11;
    transition: all 0.15s;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    user-select: none;
    pointer-events: none; }
    .appnav > .indicator > .circle {
      position: absolute;
      content: '';
      top: 0px;
      left: 8px;
      width: 56px;
      height: 56px;
      background: #0280EE;
      border-radius: 50%;
      box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
      background: linear-gradient(90deg, #0072FF, #0CA9E8);
      background-size: 400% 400%;
      -webkit-animation: animationRotationLocal 10s ease infinite;
      -moz-animation: animationRotationLocal 10s ease infinite;
      animation: animationRotationLocal 10s ease infinite; }
  .appnav > div {
    position: relative;
    float: left;
    height: 56px;
    width: 72px; }
    .appnav > div svg {
      position: relative;
      display: inline-block;
      top: 8px;
      height: 24px;
      width: 24px;
      display: block;
      opacity: 0.99;
      fill: #071c4d;
      z-index: 13;
      left: 0%;
      margin-left: 50%;
      transform: translateX(-50%);
      user-select: none;
      pointer-events: none;
      transition: all 0.25s;
      transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
    .appnav > div label {
      position: relative;
      display: inline-block;
      top: 12px;
      left: 0px;
      height: 16px;
      width: 100%;
      text-align: center;
      color: #000;
      font-size: 12px;
      font-weight: normal;
      letter-spacing: 0.4px;
      left: 0%;
      margin-left: 50%;
      transform: translateX(-50%);
      transition: all 0.35s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      user-select: none;
      pointer-events: none;
      font-weight: 500;
      color: #071c4d; }

@keyframes animationRotationLocal {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }

.appnav .select svg {
  opacity: 1;
  fill: #ffffff; }

.appnav .select label {
  opacity: 0;
  fill: #0280EE; }

.appnav-green {
  background-color: #21783f; }
  .appnav-green > .indicator > .circle {
    background: #ffffff; }
  .appnav-green > div svg {
    color: #ffffff; }
  .appnav-green > div label {
    color: #ffffff;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.4px; }
  .appnav-green .select svg {
    opacity: 1;
    color: #000; }
  .appnav-green .select label {
    opacity: 0;
    color: #000; }

.appnav-blue {
  background-color: #0280EE; }
  .appnav-blue > .indicator > .circle {
    background: #ffffff; }
  .appnav-blue > div svg {
    color: #ffffff; }
  .appnav-blue > div label {
    color: #ffffff;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.4px; }
  .appnav-blue .select svg {
    opacity: 1;
    color: #000; }
  .appnav-blue .select label {
    opacity: 0;
    color: #000; }

.leftnav {
  display: inline-block;
  position: fixed;
  width: 136px;
  height: calc(100vh - 48px);
  left: 0px;
  top: 48px;
  background: #E6E6E6;
  z-index: 1;
  padding-top: 76px;
  padding-left: 4px;
  border-right: 1px solid rgba(0, 0, 0, 0.117647);
  /*cont*/
  /*cont*/ }
  .leftnav > .cont {
    position: relative;
    display: block;
    float: left;
    height: 48px;
    width: calc(100% - 8px);
    margin: 0px;
    cursor: pointer;
    padding-left: 4px;
    border-radius: 4px;
    margin-left: 2px;
    display: flex;
    justify-content: left;
    align-items: center;
    cursor: pointer;
    overflow: hidden; }
    .leftnav > .cont:hover {
      background-color: gainsboro; }
    .leftnav > .cont:focus {
      background-color: #d2d2d2; }
    .leftnav > .cont:active {
      background-color: #d2d2d2; }
    @media (max-width: 56.25em) {
      .leftnav > .cont:hover {
        background-color: #E6E6E6; }
      .leftnav > .cont:focus {
        background-color: #E6E6E6; }
      .leftnav > .cont:active {
        background-color: #E6E6E6; } }
    .leftnav > .cont .ripple {
      background-color: #ffffff; }
    .leftnav > .cont svg {
      height: 28px;
      width: 28px;
      z-index: 2;
      opacity: 1;
      user-select: none;
      pointer-events: none;
      -webkit-backface-visibility: hidden;
      -webkit-transform: translateZ(0) scale(1, 1); }
    .leftnav > .cont label {
      margin: 0px;
      margin-left: 4px;
      z-index: 2;
      user-select: none;
      pointer-events: none;
      -webkit-backface-visibility: hidden;
      -webkit-transform: translateZ(0) scale(1, 1);
      color: #000;
      font-size: 14px;
      font-weight: normal;
      letter-spacing: 0.25px;
      text-align: center;
      height: 16px; }
  .leftnav > .contSmall {
    height: 24px;
    padding-left: 12px; }
    .leftnav > .contSmall svg {
      user-select: none;
      pointer-events: none;
      -webkit-backface-visibility: hidden;
      -webkit-transform: translateZ(0) scale(1, 1); }
    .leftnav > .contSmall label {
      color: #000;
      font-size: 12px;
      font-weight: normal;
      letter-spacing: 0.25px; }
  .leftnav > .title {
    position: relative;
    display: inline-block;
    width: 100%;
    padding-left: 8px;
    margin-top: 4px;
    margin-bottom: 4px;
    color: #000;
    font-size: 10px;
    font-weight: normal;
    letter-spacing: 1.5px;
    user-select: none;
    pointer-events: none; }

.leftnav-tv {
  display: inline-block;
  position: fixed;
  width: 72px;
  height: calc(100vh - 0px);
  left: 0px;
  top: 0px;
  padding-top: 96px;
  z-index: 1;
  /*div*/ }
  .leftnav-tv > div {
    position: relative;
    float: left;
    height: 60px;
    width: 100%;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    -webkit-backface-visibility: hidden; }
    .leftnav-tv > div:active {
      transform: scale(0.9); }
    .leftnav-tv > div svg {
      margin-top: 8px;
      height: 32px;
      width: 32px;
      fill: #ffffff;
      z-index: 2;
      opacity: 0.5;
      user-select: none;
      pointer-events: none;
      -webkit-backface-visibility: hidden;
      -webkit-transform: translateZ(0) scale(1, 1); }
    .leftnav-tv > div label {
      margin: 0px;
      margin-top: 4px;
      margin-bottom: 4px;
      z-index: 2;
      user-select: none;
      pointer-events: none;
      -webkit-backface-visibility: hidden;
      -webkit-transform: translateZ(0) scale(1, 1);
      color: #ffffff;
      font-size: 12px;
      font-weight: normal;
      letter-spacing: 0.4px;
      text-align: center;
      height: 16px;
      opacity: 0.5; }

.leftnav-tv .select svg {
  fill: #ffffff;
  opacity: 0.99; }

.leftnav-tv .select label {
  color: #ffffff;
  opacity: 0.99; }

.leftnav .cont_expad {
  transition: all 0.85s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 36px;
  height: auto; }
  .leftnav .cont_expad > div > .arrow {
    transform: rotate(90deg); }

.leftnav .select {
  background-color: #0078d4 !important;
  cursor: pointer;
  overflow: hidden; }
  .leftnav .select:hover {
    background-color: #b9ddfe !important; }
  .leftnav .select:focus {
    background-color: #a5d4fd !important; }
  .leftnav .select:active {
    background-color: #a5d4fd !important; }
  @media (max-width: 56.25em) {
    .leftnav .select:hover {
      background-color: #cde7fe !important; }
    .leftnav .select:focus {
      background-color: #cde7fe !important; }
    .leftnav .select:active {
      background-color: #cde7fe !important; } }
  .leftnav .select .ripple {
    background-color: #ffffff !important; }
  .leftnav .select > svg {
    fill: #ffffffde;
    /* kelvin */ }
  .leftnav .select > label {
    color: #ffffffde;
    /* kelvin */ }
  .leftnav .select > .arrow {
    background-image: url("./svg/right.svg") !important;
    opacity: 1 !important; }
  .leftnav .select:hover {
    background-color: #0078d4 !important; }

.tvcard {
  position: relative;
  display: inline-block;
  width: calc(100% - 8px);
  aspect-ratio: 10 / 4;
  padding: 16px;
  margin: auto;
  background-color: #000;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  user-select: auto; }
  .tvcard::after {
    content: "";
    display: table;
    clear: both; }
  .tvcard:focus {
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); }
  .tvcard:active {
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); }

.tvcard-title {
  position: relative;
  display: block;
  margin-left: 6px;
  margin-top: 8px;
  margin-bottom: 8px;
  color: #ffffff;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.25px;
  opacity: 0.86; }

.tvcard-min-height {
  min-height: 250px; }

.tvcard_selected {
  box-shadow: 0px 2px 4px -1px rgba(2, 95, 238, 0.2), 0px 4px 5px 0px rgba(2, 95, 238, 0.14), 0px 1px 10px 0px rgba(2, 95, 238, 0.12); }

.tvcard:focus {
  border: 0.2px solid red; }

.tvcard-icon {
  padding: 16px; }
  .tvcard-icon .title {
    position: relative;
    display: block;
    width: 100%;
    margin-top: 8px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #000;
    font-size: 48px;
    font-weight: 500;
    letter-spacing: 0.15px;
    user-select: none;
    pointer-events: none; }
  .tvcard-icon .des {
    position: relative;
    display: block;
    padding-left: 4px;
    padding-right: 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #000;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0.15px;
    user-select: none;
    pointer-events: none;
    text-align: center; }
  .tvcard-icon .icon {
    height: 48px;
    width: 48px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0%;
    margin-left: 50%;
    transform: translateX(-50%);
    user-select: none;
    pointer-events: none; }
    .tvcard-icon .icon svg {
      height: 24px;
      width: 24px;
      fill: #ffffff; }
  .tvcard-icon > .trailing {
    position: absolute;
    height: 32px;
    width: 32px;
    left: 8px;
    top: 12px;
    cursor: pointer;
    border: 1px solid #0000001e;
    opacity: 0.16;
    user-select: none;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center; }
    .tvcard-icon > .trailing svg {
      height: 24px;
      width: 24px;
      display: block;
      fill: #000;
      user-select: none;
      pointer-events: none; }

.tvcard-icon-green .icon {
  background-color: #26e7a6; }

.tvcard-icon-blue .icon {
  background-color: #26A0FC; }

.tvcard-icon-purple .icon {
  background-color: #8973d6; }

.tvcard-icon-red .icon {
  background-color: #ED241A; }

/*

		&-green  {background-color: $cs-green;  }
		&-blue   {background-color: $cs-blue;   }
		&-purple {background-color: $cs-purple; }
		&-red    {background-color: $cs-red;    }

*/
.tvcard-list {
  position: relative;
  display: inline-block;
  width: 100%;
  min-height: 42px; }
  .tvcard-list .title {
    position: relative;
    display: block;
    width: calc(100% - 150px);
    top: 0px;
    left: 40px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1px;
    opacity: 0.54;
    user-select: none;
    pointer-events: none; }
  .tvcard-list .des {
    position: relative;
    display: block;
    width: calc(100% - 150px);
    left: 40px;
    opacity: 0.86;
    color: #ffffff;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0.15px;
    user-select: none;
    pointer-events: none; }
  .tvcard-list .num {
    position: absolute;
    display: inline-block;
    top: 0px;
    right: 16px;
    opacity: 0.54;
    color: #ffffff;
    font-size: 27px;
    font-weight: 500;
    letter-spacing: 0.15px;
    user-select: none;
    pointer-events: none; }
  .tvcard-list .icon {
    position: absolute;
    display: inline-block;
    height: 36px;
    width: 36px;
    left: 0px;
    top: 2px;
    border-radius: 8px;
    background-color: rgba(54, 162, 235, 0.7);
    border-color: #36A2EB;
    border-width: 2px;
    border: solid;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    pointer-events: none; }
    .tvcard-list .icon svg {
      height: 24px;
      width: 24px;
      fill: #ffffff; }
  .tvcard-list > .trailing {
    position: absolute;
    height: 32px;
    width: 32px;
    left: 8px;
    top: 12px;
    cursor: pointer;
    border: 1px solid #0000001e;
    opacity: 0.16;
    user-select: none;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center; }
    .tvcard-list > .trailing svg {
      height: 24px;
      width: 24px;
      display: block;
      fill: #000;
      user-select: none;
      pointer-events: none; }

.tvcard-list-green .icon {
  background-color: #26e7a6; }

.tvcard-list-blue .icon {
  background-color: #26A0FC; }

.tvcard-list-purple .icon {
  background-color: rgba(153, 102, 255, 0.7);
  border-color: #9966FF; }

.tvcard-list-red .icon {
  background-color: rgba(255, 99, 132, 0.7);
  border-color: #FF6384; }

.tvcard-list-blue .icon {
  background-color: rgba(54, 162, 235, 0.7);
  border-color: #36A2EB; }

.tvcard-list-green .icon {
  background-color: rgba(75, 192, 192, 0.7);
  border-color: #4BC0C0; }

.tvcard-list-orange .icon {
  background-color: rgba(255, 159, 64, 0.7);
  border-color: #FF9F40; }

.tvcard-list-cpa .icon {
  background-color: #013B6E; }

.tvcard-list-cpb .icon {
  background-color: #4AA3F0; }

.tvcard-list-cpc .icon {
  background-color: #0280EE; }

.tvcard-list-cpd .icon {
  background-color: #0078d4; }

.tvcard-list-cpe .icon {
  background-color: #0264BA; }

/*

		&-green  {background-color: $cs-green;  }
		&-blue   {background-color: $cs-blue;   }
		&-purple {background-color: $cs-purple; }
		&-red    {background-color: $cs-red;    }

*/
.tvcard-activity {
  position: relative;
  display: inline-block;
  width: 100%;
  padding-bottom: 4px;
  padding-top: 4px;
  margin-bottom: 8px; }
  .tvcard-activity .title {
    position: relative;
    display: block;
    width: calc(100% - 120px);
    top: 0px;
    left: 62px;
    margin-top: 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 4px;
    color: #071c4d;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1.5px;
    user-select: none;
    pointer-events: none; }
  .tvcard-activity .des {
    position: relative;
    display: block;
    width: calc(100% - 56px);
    left: 62px;
    opacity: 0.86;
    color: #071c4d;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0.15px;
    user-select: none;
    pointer-events: none; }
  .tvcard-activity .num {
    position: absolute;
    display: inline-block;
    top: 8px;
    right: 0px;
    opacity: 0.54;
    color: #071c4d;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.25px;
    user-select: none;
    pointer-events: none;
    letter-spacing: 0px; }
  .tvcard-activity .avatarLine {
    position: absolute;
    display: inline-block;
    height: 48px;
    width: 48px;
    left: 0px;
    top: 2px;
    border-radius: 50%;
    background: url("./img/pic/person.svg"), #E6E6E6;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 2px solid #E6E6E6; }
  .tvcard-activity .status {
    position: absolute;
    display: inline-block;
    bottom: -4px;
    right: -10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    opacity: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 71%;
    user-select: none;
    pointer-events: none;
    border: 2px solid #E6E6E6; }

.tvcard-bar-big {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 34px;
  /*label*/ }
  .tvcard-bar-big > .cont {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 32px;
    background-color: rgba(26, 26, 26, 0.117647);
    /*label*/ }
    .tvcard-bar-big > .cont > .line {
      position: absolute;
      display: inline-block;
      top: 0px;
      left: 0px;
      height: 42px;
      width: 0%;
      background-color: rgba(54, 162, 235, 0.7);
      border-color: #36A2EB;
      border-width: 2px;
      border: solid;
      transition: width;
      transition: all 0.45s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  .tvcard-bar-big > .num {
    position: absolute;
    display: inline-block;
    bottom: 42px;
    right: 0px;
    opacity: 0.54;
    color: #ffffff;
    font-size: 27px;
    font-weight: 500;
    letter-spacing: 0.15px; }
  .tvcard-bar-big .title {
    position: absolute;
    display: inline-block;
    top: 0px;
    left: 0px;
    margin-top: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #ffffff;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0.15px;
    user-select: none;
    pointer-events: none;
    opacity: 0.54; }
  .tvcard-bar-big > .des2 {
    position: relative;
    display: inline-block;
    width: 100%;
    top: 0px;
    right: 0px;
    background: #ffffff;
    color: #000;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0.15px;
    text-align: center;
    border: 1px solid green;
    /**********************/ }

.tvcard-bar-big-cpa > .cont > .line {
  background-color: rgba(1, 59, 110, 0.7);
  border-color: #013B6E; }

.tvcard-bar-big-cpb > .cont > .line {
  background-color: rgba(74, 163, 240, 0.7);
  border-color: #4AA3F0; }

.tvcard-bar-big-cpc > .cont > .line {
  background-color: rgba(2, 128, 238, 0.7);
  border-color: #0280EE; }

.tvcard-bar-big-cpd > .cont > .line {
  background-color: rgba(0, 120, 212, 0.7);
  border-color: #0078d4; }

.tvcard-bar-big-cpe > .cont > .line {
  background-color: rgba(2, 100, 186, 0.7);
  border-color: #0264BA; }

.tvcard-bar-big-blue > .cont > .line {
  background-color: rgba(54, 162, 235, 0.7);
  border-color: #36A2EB; }

.tvcard-bar-big-purple > .cont > .line {
  background-color: rgba(153, 102, 255, 0.7);
  border-color: #9966FF; }

.tvcard-bar-big-green > .cont > .line {
  background-color: rgba(75, 192, 192, 0.7);
  border-color: #4BC0C0; }

.tvcard-bar-big-yellow > .cont > .line {
  background-color: rgba(255, 205, 86, 0.7);
  border-color: #FFCD56; }

.tvcard-bar-big-orange > .cont > .line {
  background-color: rgba(255, 159, 64, 0.7);
  border-color: #FF9F40; }

.tvcard-bar-big-red > .cont > .line {
  background-color: rgba(255, 99, 132, 0.7);
  border-color: #FF6384; }

.tvcard-bar-big-orange > .cont > .line {
  background-color: rgba(255, 159, 64, 0.7);
  border-color: #FF9F40; }

.tvcard-bar-small {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 42px;
  margin-top: 8px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  background-color: rgba(26, 26, 26, 0.117647);
  padding-left: 76px;
  /*label*/ }
  .tvcard-bar-small > .line {
    position: relative;
    display: inline-block;
    top: 0px;
    left: 0px;
    height: 42px;
    width: 90%;
    z-index: 1;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    background-color: rgba(54, 162, 235, 0.7);
    border-color: #36A2EB;
    border-width: 2px;
    border: solid;
    transition: all 0.45s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  .tvcard-bar-small > .num {
    position: absolute;
    display: inline-block;
    top: 0px;
    left: 0px;
    width: 76px;
    z-index: 3;
    height: 42px;
    padding-top: 6px;
    color: #ffffff;
    font-size: 27px;
    font-weight: 500;
    letter-spacing: 0.15px;
    opacity: 0.54;
    text-align: center; }

.tvcard-bar-tiny {
  height: 28px;
  margin-top: 8px;
  /*label*/ }
  .tvcard-bar-tiny > .line {
    height: 28px; }
  .tvcard-bar-tiny > .cont {
    height: 28px; }
  .tvcard-bar-tiny > .num {
    height: 28px;
    padding-top: 0px; }
  .tvcard-bar-tiny > .title {
    height: 28px;
    padding-top: 0px; }

.tvcard-bar-small-blue > .line {
  background-color: rgba(54, 162, 235, 0.7);
  border-color: #36A2EB; }

.tvcard-bar-small-green > .line {
  background-color: rgba(75, 192, 192, 0.7);
  border-color: #4BC0C0; }

.tvcard-bar-small-purple > .line {
  background-color: rgba(153, 102, 255, 0.7);
  border-color: #9966FF; }

.tvcard-bar-small-red > .line {
  background-color: rgba(255, 99, 132, 0.7);
  border-color: #FF6384; }

.tvcard-bar-small-cpa > .line {
  background-color: rgba(1, 59, 110, 0.7);
  border-color: #013B6E; }

.tvcard-bar-small-cpb > .line {
  background-color: rgba(74, 163, 240, 0.7);
  border-color: #4AA3F0; }

.tvcard-bar-small-cpc > .line {
  background-color: rgba(2, 128, 238, 0.7);
  border-color: #0280EE; }

.tvcard-bar-small-cpd > .line {
  background-color: rgba(0, 120, 212, 0.7);
  border-color: #0078d4; }

.tvcard-bar-small-cpe > .line {
  background-color: rgba(2, 100, 186, 0.7);
  border-color: #0264BA; }

change {
  position: relative;
  display: inline-block;
  width: calc(100% - 8px);
  max-width: 900px;
  padding: 4px;
  margin: auto;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  /*cont*/ }
  change::after {
    content: "";
    display: table;
    clear: both; }
  change cont {
    position: relative;
    display: inline-block;
    margin-top: 4px;
    width: calc(100% - 0px);
    /*user*/
    /*input*/ }
    change cont > user {
      position: relative;
      display: inline-block;
      width: calc(100% - 0px);
      margin-bottom: 2px; }
      change cont > user > photo {
        position: relative;
        display: inline-block;
        float: left;
        margin-left: 12px;
        height: 24px;
        width: 24px;
        user-select: none;
        pointer-events: none;
        border-radius: 50%;
        background-image: url("./img/pic/person.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        z-index: 2; }
      change cont > user > title {
        position: relative;
        display: inline-block;
        top: 1px;
        margin-left: 8px;
        margin-top: 1px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #071c4d;
        font-size: 16px;
        font-weight: normal;
        letter-spacing: 0.15px;
        user-select: none;
        pointer-events: none; }
      change cont > user > time {
        position: relative;
        display: inline-block;
        top: -1px;
        margin-left: 8px;
        margin-top: 1px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        opacity: 0.76;
        color: #071c4d;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.25px; }
    change cont > entry {
      position: relative;
      display: inline-block;
      width: 100%;
      background: #F6F5F5;
      padding-right: 8px;
      padding-left: 8px;
      color: #071c4d;
      font-size: 12px;
      font-weight: normal;
      letter-spacing: 0.25px; }
      change cont > entry > .row > div {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis; }

.divider {
  position: relative;
  display: inline-block;
  height: 1px;
  width: 100%;
  border-bottom: 1px solid #0000001e; }
  .divider-2 {
    margin-top: 2px;
    margin-bottom: 2px; }
  .divider-4 {
    margin-top: 4px;
    margin-bottom: 4px; }
  .divider-8 {
    margin-top: 8px;
    margin-bottom: 8px; }
  .divider-16 {
    margin-top: 16px;
    margin-bottom: 16px; }
  .divider-32 {
    margin-top: 32px;
    margin-bottom: 32px; }

.divider-bottom {
  position: relative;
  display: inline-block;
  margin-top: 64px;
  width: 100%;
  height: 50vh;
  opacity: 0.54;
  user-select: none;
  pointer-events: none; }

scrollbar {
  position: absolute;
  width: 12px;
  height: 16px;
  margin-right: 100px;
  cursor: pointer;
  border: 0.1px solid rgba(205, 231, 254, 0.08); }
  @media (max-width: 56.25em) {
    scrollbar {
      width: 4px; } }

::-webkit-scrollbar {
  position: absolute;
  width: 12px;
  height: 16px;
  margin-right: 100px;
  cursor: pointer; }
  @media (max-width: 56.25em) {
    ::-webkit-scrollbar {
      width: 4px; } }

::-webkit-scrollbar-track {
  background-color: transparent; }

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.16);
  transform: translateX(-100px); }

.scrim {
  position: fixed;
  height: 100vh;
  width: 100vw;
  right: 0px;
  bottom: -100vh;
  opacity: 0.36;
  background-color: #00114F;
  z-index: 30; }

#scrim_drawer {
  z-index: 99; }

#scrim_fullcont {
  z-index: 39; }

.scrim_fullcont_mobile {
  z-index: 44;
  opacity: 0.16; }

#scrim_backdrop {
  z-index: 30; }

#scrim_signature {
  z-index: 209; }

#scrim_board {
  z-index: 209; }

#scrim_file,
#scrim_file_newFolder,
#scrim_file_rename {
  z-index: 70; }

#scrim_menu,
#scrim_dialog {
  z-index: 200;
  opacity: 0.0 !important; }

#scrim_quickform {
  z-index: 210;
  opacity: 0.20 !important; }

#scrim_autocomplete {
  z-index: 200;
  background-color: transparent; }

#scrim_login {
  z-index: 209; }

.scrim-show {
  animation: scrim-show  0.300s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }

@keyframes scrim-show {
  from {
    top: 100vh; }
  to {
    top: 0vh; } }

.scrim-hide {
  animation: scrim-hide  0.250s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }

@keyframes scrim-hide {
  from {
    top: 0vh; }
  to {
    top: 100vh; } }

.scrim-show {
  top: 0px; }

#scrim_loading {
  position: fixed;
  height: 100vh;
  width: 100vw;
  right: 0px;
  bottom: -100vh;
  z-index: 2000;
  opacity: 0.99;
  background-color: transparent; }
  #scrim_loading > .cont {
    position: relative;
    display: inline-block;
    margin-top: 36px;
    width: calc(100% - 36px);
    max-width: 300px;
    height: 300px;
    top: 10vh;
    left: 0%;
    margin-left: 50%;
    transform: translateX(-50%); }
    #scrim_loading > .cont div {
      position: absolute;
      display: inline-block;
      width: 100%;
      height: 100%;
      background-image: url("./svg/illustrations/loading.svg");
      background-position: center;
      background-repeat: no-repeat;
      border: 0.5px solid transparent; }

.scrim-loading-show {
  animation: scrim-loading-show  0.300s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
  .scrim-loading-show div div {
    animation: loading 2.000s;
    animation-iteration-count: infinite;
    animation-direction: reverse; }

@keyframes scrim-loading-show {
  from {
    top: 100vh; }
  to {
    top: 0vh; } }

.scrim-loading-hide {
  animation: scrim-loading--hide  0.250s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }

@keyframes scrim-loading-hide {
  from {
    top: 0vh; }
  to {
    top: 100vh; } }

#loading {
  position: fixed;
  height: 100vh;
  width: 100vw;
  right: 0px;
  bottom: -100vh;
  z-index: 500;
  left: 0%;
  margin-left: 50%;
  transform: translateX(-50%); }
  #loading::before {
    position: absolute;
    content: '';
    top: 0px;
    left: 0px;
    width: 400%;
    height: 400%;
    background: linear-gradient(270deg, #0072FF, #00C6FF);
    background-size: 400% 400%;
    opacity: 1 !important;
    -webkit-animation: AnimationName 4s ease infinite;
    -moz-animation: AnimationName 4s ease infinite;
    animation: AnimationName 4s ease infinite; }
  #loading .icon {
    position: relative;
    display: block;
    margin: auto;
    margin-top: 16px;
    width: 200px;
    height: 200px;
    background: url("svg/illustrations/gosive-logo-white.svg");
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important; }
  #loading .title {
    position: relative;
    display: block;
    width: calc(100% - 16px);
    margin: auto;
    margin-top: 16px;
    color: #ffffff;
    font-size: 34px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-align: center; }
  #loading .des {
    position: relative;
    display: block;
    width: calc(100% - 16px);
    margin: auto;
    margin-top: 16px;
    color: #ffffff;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0.5px;
    text-align: center; }

@keyframes AnimationName {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }

.loading-show {
  animation: loading-show  0.250s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }

@keyframes loading-show {
  from {
    top: 100vh; }
  to {
    top: 0vh; } }

.loading-hide {
  animation: scrim-hide  0.250s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }

@keyframes loading-hide {
  from {
    top: 0vh; }
  to {
    top: 100vh; } }

.card {
  position: relative;
  display: inline-block;
  width: calc(100% - 16px);
  max-width: 900px;
  padding: 8px;
  margin: auto;
  background-color: #ffffff;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  .card::after {
    content: "";
    display: table;
    clear: both; }

.card-min-height {
  min-height: 106px !important; }

.card-cont {
  position: relative;
  display: inline-block;
  width: calc(100% - 16px);
  max-width: 900px;
  left: 50%;
  top: 2px;
  /* kelvin */
  transform: translateX(-50%);
  /* kelvin */ }
  .card-cont::after {
    content: "";
    display: table;
    clear: both; }
  .card-cont .textfield {
    color: #000;
    font-size: 14px;
    letter-spacing: 0.25px;
    font-weight: 500;
    font-family: "Roboto" sans-serif;
    margin-bottom: -5px;
    /* kelvin */ }
    .card-cont .textfield .label {
      color: #202124ec !important;
      font-size: 12px;
      font-weight: normal;
      letter-spacing: 0.4px;
      font-family: "Roboto" sans-serif; }

.card-transparent {
  background-color: transparent;
  box-shadow: none;
  /* kelvin */
  /* kelvin */ }
  .card-transparent .font-card-title {
    color: #000;
    font-size: 14px;
    letter-spacing: 0.25px;
    font-weight: 500;
    font-family: "Roboto" sans-serif; }
  .card-transparent .checkbox input[type="checkbox"] {
    transform: scale(0.7); }
  .card-transparent .checkbox label {
    color: #000;
    font-size: 14px;
    letter-spacing: 0.25px;
    font-weight: 500;
    font-family: "Roboto" sans-serif; }

.card-top {
  position: relative;
  display: inline-block;
  width: calc(100% - 16px);
  height: 22px;
  margin-top: 8px;
  max-width: 900px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2; }
  .card-top .des {
    position: absolute;
    display: inline-block;
    top: 20px;
    left: 0px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
    min-height: 24px;
    background: #6D6D6D;
    border-radius: 4px;
    transform: scale(0) rotate(0deg);
    transform-origin: top left;
    transition: all 0.15s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
    z-index: 50000;
    transition-delay: 0ms;
    color: #ffffff;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.25px; }
    .card-top .des span {
      position: relative;
      display: inline-block;
      padding: 4px;
      margin-left: 8px;
      margin-right: 8px;
      border-radius: 2px;
      cursor: pointer;
      background-color: #0280EE; }
      .card-top .des span:active {
        transform: scale(0.9); }
  .card-top .title {
    position: relative;
    display: inline-block;
    padding-right: 8px;
    top: 4px;
    color: #071c4d;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1px;
    opacity: 0.54; }
  .card-top:hover .des {
    transform: scale(1) rotate(0deg);
    transition-delay: 450ms !important; }

.card-top-icon .title {
  cursor: pointer; }
  .card-top-icon .title::before {
    position: absolute;
    content: '';
    top: 0px;
    right: -16px;
    width: 16px;
    height: 16px;
    opacity: 0.54;
    background: url(svg/question.svg) no-repeat;
    background-size: 100% 100%;
    background-position: center;
    cursor: pointer; }

@media (max-width: 56.25em) {
  .card {
    margin-top: 4px;
    margin-bottom: 4px;
    width: calc(100% - 8px); } }

.menu {
  position: fixed;
  display: inline-block;
  min-width: 112px;
  border-radius: 4px;
  background-color: #ffffff;
  transform: scale(0);
  opacity: 0;
  transform-origin: top right;
  overflow: hidden;
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  z-index: 210; }
  .menu > div {
    position: relative;
    display: block;
    height: 48px;
    padding-left: 16px;
    padding-right: 16px;
    display: flex;
    justify-content: left;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.15s;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
    .menu > div:hover {
      background-color: whitesmoke; }
    .menu > div:focus {
      background-color: whitesmoke; }
    .menu > div:active {
      background-color: #ebebeb; }
    @media (max-width: 56.25em) {
      .menu > div:hover {
        background-color: #ffffff; }
      .menu > div:focus {
        background-color: #ffffff; }
      .menu > div:active {
        background-color: #ffffff; } }
    .menu > div .ripple {
      background-color: #cde7fe; }
    .menu > div:active {
      transform: scale(0.9); }
    .menu > div label {
      margin-right: 8px;
      color: #000;
      font-size: 14px;
      font-weight: normal;
      letter-spacing: 0.25px;
      user-select: none;
      pointer-events: none; }
    .menu > div svg {
      flex-shrink: 0;
      height: 24px;
      width: 24px;
      opacity: 0.54;
      margin-right: 16px;
      fill: #000;
      user-select: none;
      pointer-events: none; }

.menu {
  /**/ }
  .menu > .disabled:active {
    transform: scale(1); }
  .menu > .disabled label {
    opacity: 0.36; }
  .menu > .disabled svg {
    opacity: 0.18; }

.menu-show {
  animation: menu-show  0.150s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

@keyframes menu-show {
  from {
    transform: scale(0);
    opacity: 0; }
  to {
    transform: scale(1);
    opacity: 1; } }

.menu-hide {
  animation: menu-hide  0.200s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }

@keyframes menu-hide {
  from {
    transform: scale(1);
    opacity: 1; }
  to {
    transform: scale(0);
    opacity: 0; } }

.menubar {
  position: relative;
  display: inline-block;
  top: 0px;
  min-width: 56px;
  left: 0px;
  height: 32px;
  margin: 4px;
  /*cont*/ }
  .menubar > .cont {
    position: relative;
    display: inline-block;
    float: left;
    display: flex;
    justify-content: left;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
    height: 32px;
    overflow: hidden;
    min-width: calc(48px - 0px);
    margin: 2px;
    cursor: pointer;
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 4px;
    background: #ffffff;
    /*sub*/
    /*hover*/ }
    .menubar > .cont:hover {
      background-color: whitesmoke; }
    .menubar > .cont:focus {
      background-color: whitesmoke; }
    .menubar > .cont:active {
      background-color: #ebebeb; }
    @media (max-width: 56.25em) {
      .menubar > .cont:hover {
        background-color: #ffffff; }
      .menubar > .cont:focus {
        background-color: #ffffff; }
      .menubar > .cont:active {
        background-color: #ffffff; } }
    .menubar > .cont .ripple {
      background-color: #cde7fe; }
    .menubar > .cont svg {
      height: 24px;
      width: 24px;
      fill: #000;
      z-index: 2;
      opacity: 1;
      user-select: none;
      pointer-events: none;
      -webkit-backface-visibility: hidden;
      -webkit-transform: translateZ(0) scale(1, 1); }
    .menubar > .cont label {
      margin: 8px;
      margin-left: 4px;
      margin-right: 4px;
      z-index: 2;
      user-select: none;
      pointer-events: none;
      -webkit-backface-visibility: hidden;
      -webkit-transform: translateZ(0) scale(1, 1);
      color: #000;
      font-size: 12px;
      font-weight: normal;
      letter-spacing: 0.25px;
      text-align: center;
      height: 16px; }
    .menubar > .cont > .indicator {
      position: relative;
      display: inline-block;
      float: left;
      height: 16px;
      width: 16px;
      fill: #000;
      z-index: 2;
      opacity: 1;
      background: url(svg/expand.svg) no-repeat;
      background-size: 100% 100%;
      background-position: center;
      user-select: none;
      pointer-events: none;
      -webkit-backface-visibility: hidden;
      -webkit-transform: translateZ(0) scale(1, 1); }
    .menubar > .cont > .sub {
      position: absolute;
      display: inline-block;
      top: 32px;
      left: 0px;
      z-index: 2;
      min-height: 32px;
      min-width: 100%;
      background: #ffffff;
      /*sub*/ }
      .menubar > .cont > .sub > .subCont {
        position: relative;
        display: block;
        min-height: 32px;
        min-width: calc(48px - 0px);
        width: auto;
        margin: 2px;
        cursor: pointer;
        padding-left: 8px;
        padding-right: 8px;
        border-radius: 4px;
        overflow: hidden;
        cursor: pointer;
        overflow: hidden;
        display: flex;
        justify-content: left;
        align-items: center; }
        .menubar > .cont > .sub > .subCont:hover {
          background-color: whitesmoke; }
        .menubar > .cont > .sub > .subCont:focus {
          background-color: whitesmoke; }
        .menubar > .cont > .sub > .subCont:active {
          background-color: #ebebeb; }
        @media (max-width: 56.25em) {
          .menubar > .cont > .sub > .subCont:hover {
            background-color: #ffffff; }
          .menubar > .cont > .sub > .subCont:focus {
            background-color: #ffffff; }
          .menubar > .cont > .sub > .subCont:active {
            background-color: #ffffff; } }
        .menubar > .cont > .sub > .subCont .ripple {
          background-color: #cde7fe; }
        .menubar > .cont > .sub > .subCont svg {
          height: 24px;
          width: 24px;
          fill: #000;
          z-index: 2;
          opacity: 1;
          margin-top: 4px;
          user-select: none;
          pointer-events: none;
          -webkit-backface-visibility: hidden;
          -webkit-transform: translateZ(0) scale(1, 1); }
        .menubar > .cont > .sub > .subCont label {
          margin: 8px;
          margin-left: 4px;
          margin-right: 4px;
          z-index: 2;
          white-space: nowrap;
          user-select: none;
          pointer-events: none;
          -webkit-backface-visibility: hidden;
          -webkit-transform: translateZ(0) scale(1, 1);
          color: #000;
          font-size: 12px;
          font-weight: normal;
          letter-spacing: 0.25px;
          height: 16px; }
    .menubar > .cont:hover {
      overflow: visible;
      /*sub*/ }
      .menubar > .cont:hover > .sub {
        box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); }

/*menubar*/
.cont-active {
  background: #0280EE !important; }
  .cont-active svg {
    fill: #ffffff !important; }
  .cont-active label {
    color: #ffffff !important; }

.menubar {
  /*cont*/
  /*cont*/
  /*cont*/
  /*cont*/
  /*cont*/
  /*cont*/
  /*cont*/ }
  .menubar > .icon-blue svg {
    fill: #116caa; }
  .menubar > .icon-purple svg {
    fill: #5500ff; }
  .menubar > .icon-green svg {
    fill: #2b7a7a; }
  .menubar > .icon-yellow svg {
    fill: #896000; }
  .menubar > .icon-orange svg {
    fill: #d96c00; }
  .menubar > .icon-red svg {
    fill: #960020; }
  .menubar > .icon-gray svg {
    fill: #93979f; }

.snack {
  position: fixed;
  display: inline-block;
  width: 344px;
  left: 136px;
  bottom: -200px;
  opacity: 0;
  padding: 16px;
  padding-right: 92px;
  border-radius: 6px;
  background-color: #121212;
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  z-index: 211; }
  .snack > label {
    position: relative;
    opacity: 0.87;
    color: #ffffff;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.25px; }
  .snack > div {
    position: absolute;
    display: inline-block;
    right: 16px;
    top: 50%;
    border-radius: 4px;
    transform: translateY(-50%), scale(1); }
    .snack > div label {
      position: relative;
      display: inline-block;
      color: #cde7fe;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 1.25px;
      text-transform: uppercase;
      user-select: none;
      pointer-events: none;
      margin: 8px;
      opacity: 1; }
    .snack > div:hover label {
      color: #ffffff; }

.snack-long {
  padding-right: 16px;
  padding-bottom: 56px; }
  .snack-long > div {
    right: 8px;
    top: auto;
    bottom: 8px;
    padding: 4px;
    transform: translateY(0%); }

.snack-show {
  animation: snack-show  0.250s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }

@keyframes snack-show {
  from {
    bottom: -200px;
    opacity: 0;
    transform: scale(0.85); }
  to {
    bottom: 16px;
    opacity: 1;
    transform: scale(1); } }

.snack-hide {
  animation: snack-hide  0.300s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }

@keyframes snack-hide {
  from {
    bottom: 16px;
    opacity: 1;
    transform: scale(1); }
  to {
    bottom: -200px;
    opacity: 0;
    transform: scale(0.85); } }

@media (max-width: 37.5em) {
  .snack-show {
    animation: snack-show-phone  0.250s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } }

@keyframes snack-show-phone {
  from {
    bottom: -200px;
    opacity: 0;
    transform: scale(0.85); }
  to {
    bottom: 64px;
    opacity: 1;
    transform: scale(1); } }

@media (max-width: 37.5em) {
  .snack-hide {
    animation: snack-hide-phone  0.300s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } }

@keyframes snack-hide-phone {
  from {
    bottom: 64px;
    opacity: 1;
    transform: scale(1); }
  to {
    bottom: -200px;
    opacity: 0;
    transform: scale(0.85); } }

@media (max-width: 37.5em) {
  .snack {
    left: 16px;
    width: calc(100% - 32px); } }

.dialog {
  position: fixed;
  display: inline-block;
  min-width: 280px;
  max-width: 450px;
  border-radius: 4px;
  left: 50%;
  transform: translate(-50%, -30%);
  transform-origin: center;
  top: 130vh;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1, 1);
  background-color: #ffffff;
  z-index: 230;
  padding: 24px;
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); }
  .dialog .title {
    display: block;
    color: #000;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.15px;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1); }
  .dialog .des {
    display: block;
    margin-top: 16px;
    margin-bottom: 16px;
    width: 100%;
    max-height: 50vh;
    color: #000;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0.5px;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
    overflow: hidden;
    overflow-y: auto; }

.dialog-show {
  animation: dialog-show  0.300s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }

@keyframes dialog-show {
  from {
    top: 130vh;
    opacity: 0;
    transform: scale(0.85) translate(-50%, -30%); }
  to {
    top: 30vh;
    opacity: 1;
    transform: scale(1) translate(-50%, -30%); } }

.dialog-hide {
  animation: dialog-hide  0.250s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }

@keyframes dialog-hide {
  from {
    top: 30vh;
    opacity: 1;
    transform: scale(1) translate(-50%, -30%); }
  to {
    top: 130vh;
    opacity: 0;
    transform: scale(0.85) translate(-50%, -30%); } }

@media (max-width: 37.5em) {
  .dialog {
    width: calc(100% - 16px); } }

.drawer {
  position: fixed;
  display: inline-block;
  top: 0px;
  left: -256px;
  width: 256px;
  height: 100vh;
  z-index: 100;
  background-color: #ffffff;
  overflow-y: scroll; }
  .drawer::-webkit-scrollbar {
    display: none; }
  .drawer > .title {
    position: relative;
    display: inline-block;
    width: 100%;
    padding-left: 8px;
    color: #000;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.15px;
    user-select: none;
    pointer-events: none; }
  .drawer > .des {
    position: relative;
    display: inline-block;
    width: 100%;
    padding-left: 8px;
    opacity: 0.54;
    color: #000;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.25px;
    user-select: none;
    pointer-events: none; }
  .drawer > .elem {
    position: relative;
    display: inline-block;
    padding-left: 16px;
    padding-right: 16px;
    min-height: 48px;
    width: calc(75% - 0px);
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    justify-content: left;
    align-items: center; }
    .drawer > .elem:hover {
      background-color: whitesmoke; }
    .drawer > .elem:focus {
      background-color: whitesmoke; }
    .drawer > .elem:active {
      background-color: #ebebeb; }
    @media (max-width: 56.25em) {
      .drawer > .elem:hover {
        background-color: #ffffff; }
      .drawer > .elem:focus {
        background-color: #ffffff; }
      .drawer > .elem:active {
        background-color: #ffffff; } }
    .drawer > .elem .ripple {
      background-color: #cde7fe; }
    .drawer > .elem label {
      opacity: 0.87;
      margin-left: 16px;
      color: #000;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.1px;
      user-select: none;
      pointer-events: none; }
    .drawer > .elem svg {
      height: 24px;
      width: 24px;
      opacity: 0.54;
      fill: #000;
      user-select: none;
      pointer-events: none; }
    .drawer > .elem-last {
      position: absolute;
      bottom: 24px; }

.drawer > .header {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 143px;
  left: 0px;
  top: 0px;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid #0000001e;
  /*avatar*/ }
  .drawer > .header > .bg {
    position: absolute;
    display: inline-block;
    height: 72px;
    width: 72px;
    top: 0px;
    right: 0px;
    background: url("svg/illustrations/gosive-logo-white.svg");
    background-size: 100% auto   !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 0.54;
    user-select: none;
    pointer-events: none; }
  .drawer > .header:before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    user-select: none;
    pointer-events: none;
    background: linear-gradient(90deg, #0072FF, #0CA9E8);
    background-size: 400% 400%;
    -webkit-animation: animationRotationLocal 4s ease infinite;
    -moz-animation: animationRotationLocal 4s ease infinite;
    animation: animationRotationLocal 4s ease infinite; }
  .drawer > .header > .title {
    position: relative;
    display: block;
    margin-top: 8px;
    padding-left: 16px;
    margin-bottom: 4px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1.5px; }
  .drawer > .header > .des {
    position: relative;
    display: block;
    margin-top: 4px;
    padding-left: 16px;
    color: #ffffff;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.25px; }
  .drawer > .header > .avatarD {
    position: relative;
    width: 56px;
    height: 56px;
    border: 2px solid #ffffff;
    margin-bottom: 8px;
    margin-left: 12px;
    border-radius: 50%;
    background: url(img/pic/person.svg) no-repeat;
    background-size: 130% auto;
    background-position: center;
    cursor: pointer;
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); }
    .drawer > .header > .avatarD:after {
      content: "";
      position: absolute;
      top: 0px;
      left: 0px;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: url(svg/edit-white.svg) no-repeat;
      background-size: 70% auto;
      background-position: center;
      opacity: 0;
      transform: rotate(-180deg);
      transition: all .200s; }
    .drawer > .header > .avatarD:hover:after {
      opacity: 1;
      transform: rotate(0deg); }

@keyframes animationRotationLocal {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }

.drawer-anime {
  transition: all 0.2s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }

.drawer-show {
  left: 0px;
  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12); }

.drawer-hide {
  left: calc(-1 *(100% - 56px));
  box-shadow: 0px 0px 0px 0px; }

.drawer-dark {
  background-color: #013B6E; }
  .drawer-dark > .title {
    color: #ffffff; }
  .drawer-dark > .des {
    color: #ffffff; }
  .drawer-dark > .avatarD {
    background-color: #121212; }
  .drawer-dark > .elem {
    cursor: pointer;
    overflow: hidden; }
    .drawer-dark > .elem:hover {
      background-color: #01305a !important; }
    .drawer-dark > .elem:focus {
      background-color: #012546 !important; }
    .drawer-dark > .elem:active {
      background-color: #012546 !important; }
    @media (max-width: 56.25em) {
      .drawer-dark > .elem:hover {
        background-color: #013B6E !important; }
      .drawer-dark > .elem:focus {
        background-color: #013B6E !important; }
      .drawer-dark > .elem:active {
        background-color: #013B6E !important; } }
    .drawer-dark > .elem .ripple {
      background-color: #ffffff !important; }
    .drawer-dark > .elem label {
      color: #ffffff; }
    .drawer-dark > .elem svg {
      fill: #ffffff; }

.drawer {
  /*table*/ }
  @media (max-width: 37.5em) {
    .drawer {
      width: calc(100% - 56px);
      left: calc(-1 *(100% - 56px)); } }

.drawer-green > .header:before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: linear-gradient(164deg, #34be65 47%, #21783f 100%);
  user-select: none;
  pointer-events: none; }

.backdrop {
  position: fixed;
  display: inline-block;
  width: calc(100% - 16px);
  max-width: 375px;
  bottom: 0px;
  overflow: hidden;
  left: 50%;
  bottom: -100%;
  transform: translateX(-50%);
  background-color: #ffffff;
  border-radius: 32px 32px 0px 0px;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
  z-index: 40;
  /*option*/ }
  .backdrop .option:first-child {
    display: flex;
    justify-content: center;
    align-items: center; }
    .backdrop .option:first-child svg {
      height: 24px;
      width: 24px;
      fill: #000;
      user-select: none;
      pointer-events: none; }
  .backdrop .option {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 72px;
    margin: 0px;
    border-bottom: 1px solid #0000001e;
    padding-left: 16px;
    display: flex;
    justify-content: left;
    align-items: center;
    cursor: pointer;
    overflow: hidden; }
    .backdrop .option:hover {
      background-color: whitesmoke; }
    .backdrop .option:focus {
      background-color: whitesmoke; }
    .backdrop .option:active {
      background-color: #ebebeb; }
    @media (max-width: 56.25em) {
      .backdrop .option:hover {
        background-color: #ffffff; }
      .backdrop .option:focus {
        background-color: #ffffff; }
      .backdrop .option:active {
        background-color: #ffffff; } }
    .backdrop .option .ripple {
      background-color: #cde7fe; }
    .backdrop .option label {
      margin-left: 16px;
      color: #000;
      font-size: 20px;
      font-weight: 500;
      letter-spacing: 0.15px;
      user-select: none;
      pointer-events: none; }
    .backdrop .option .circle {
      height: 40px;
      width: 40px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center; }
      .backdrop .option .circle-green {
        background-color: #26e7a6; }
      .backdrop .option .circle-blue {
        background-color: #26A0FC; }
      .backdrop .option .circle-purple {
        background-color: #8973d6; }
      .backdrop .option .circle-red {
        background-color: #ED241A; }
      .backdrop .option .circle svg {
        height: 24px;
        width: 24px;
        fill: #ffffff;
        user-select: none;
        pointer-events: none; }

.backdrop-show {
  animation: backdrop-show  0.300s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }

@keyframes backdrop-show {
  from {
    bottom: -100%; }
  to {
    bottom: 0%; } }

.backdrop-hide {
  animation: backdrop-hide 0.250s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }

@keyframes backdrop-hide {
  from {
    bottom: 0%; }
  to {
    bottom: -100%; } }

@media (max-width: 56.25em) {
  .backdrop {
    width: calc(100% - 16px); } }

@media (max-width: 28.75em) {
  .backdrop {
    width: calc(100% - 8px); } }

/*backdrop-dark*/
.confirmation {
  position: fixed;
  display: inline-block;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  max-width: 500px;
  overflow: hidden;
  margin-top: 16px;
  bottom: -110vh;
  background-color: #E6E6E6;
  overflow-y: scroll;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
  left: 0%;
  margin-left: 50%;
  transform: translateX(-50%);
  z-index: 210; }
  .confirmation .illus {
    position: relative;
    display: block;
    width: calc(100% - 0px);
    max-height: 400px;
    margin-top: 16px;
    margin: auto;
    left: 0%;
    margin-left: 50%;
    transform: translateX(-50%); }
  .confirmation .title {
    position: relative;
    display: block;
    width: 100%;
    margin-top: 16px;
    color: #000;
    font-size: 27px;
    font-weight: 500;
    letter-spacing: 0.15px;
    text-align: center; }
  .confirmation .des {
    position: relative;
    display: block;
    padding-left: 4px;
    padding-right: 4px;
    color: #000;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.25px;
    text-align: center; }
  .confirmation .details {
    margin-top: 16px;
    margin-bottom: 0px; }
    .confirmation .details .code {
      display: block;
      text-align: center;
      color: #000;
      font-size: 12px;
      font-weight: normal;
      letter-spacing: 0.4px; }
    .confirmation .details .num {
      display: block;
      text-align: center;
      color: #0280EE;
      font-size: 48px;
      font-weight: 500;
      letter-spacing: 0.15px; }
    .confirmation .details .helper {
      display: block;
      text-align: center;
      letter-spacing: 5.5px;
      max-height: 144px;
      text-overflow: ellipsis;
      overflow: hidden;
      color: #B00020;
      font-size: 12px;
      font-weight: normal;
      letter-spacing: 0.4px; }

.onboard-show {
  animation: confirmation-show  0.300s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }

@keyframes onboard-show {
  from {
    bottom: -100vh; }
  to {
    bottom: calc(0vh + 16px); } }

.onboard-hide {
  animation: confirmation-hide  0.250s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }

@keyframes onboard-hide {
  from {
    bottom: calc(0vh + 16px); }
  to {
    bottom: -100vh; } }

.fab {
  position: fixed;
  display: inline-block;
  width: 48px;
  height: 48px;
  background: #A3A3A3;
  top: 64px;
  left: 46px;
  z-index: 11;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px; }
  .fab:hover {
    background-color: #999999 !important; }
  .fab:focus {
    background-color: #8f8f8f !important; }
  .fab:active {
    background-color: #8f8f8f !important; }
  @media (max-width: 56.25em) {
    .fab:hover {
      background-color: #A3A3A3 !important; }
    .fab:focus {
      background-color: #A3A3A3 !important; }
    .fab:active {
      background-color: #A3A3A3 !important; } }
  .fab .ripple {
    background-color: #ffffff !important; }
  .fab svg {
    height: 24px;
    width: 24px;
    margin: 12px;
    fill: #ffffff;
    user-select: none;
    pointer-events: none; }

.fab-s {
  position: absolute;
  display: inline-block;
  min-width: 48px;
  min-height: 48px;
  bottom: 0px;
  right: 12px; }
  .fab-s > div {
    position: relative;
    display: block;
    min-width: 48px;
    min-height: 48px;
    margin-bottom: 16px;
    cursor: pointer;
    background: #0280EE;
    transition: all 0.25s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    overflow: hidden; }
    .fab-s > div:hover {
      background-color: #0275da; }
    .fab-s > div:focus {
      background-color: #026ac6; }
    .fab-s > div:active {
      background-color: #026ac6; }
    @media (max-width: 56.25em) {
      .fab-s > div:hover {
        background-color: #0280EE; }
      .fab-s > div:focus {
        background-color: #0280EE; }
      .fab-s > div:active {
        background-color: #0280EE; } }
    .fab-s > div .ripple {
      background-color: #ffffff; }
    .fab-s > div svg {
      height: 24px;
      width: 24px;
      margin-right: 12px;
      margin-left: 12px;
      fill: #ffffff;
      user-select: none;
      pointer-events: none; }
    .fab-s > div label {
      position: relative;
      display: inline-block;
      margin-right: 20px;
      font-weight: 300;
      user-select: none;
      pointer-events: none;
      color: #ffffff;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 1.25px;
      text-transform: uppercase; }
  .fab-s > .black {
    background: #000;
    border: 1px solid #0000001e;
    cursor: pointer;
    overflow: hidden; }
    .fab-s > .black:hover {
      background-color: black !important; }
    .fab-s > .black:focus {
      background-color: black !important; }
    .fab-s > .black:active {
      background-color: black !important; }
    @media (max-width: 56.25em) {
      .fab-s > .black:hover {
        background-color: #000 !important; }
      .fab-s > .black:focus {
        background-color: #000 !important; }
      .fab-s > .black:active {
        background-color: #000 !important; } }
    .fab-s > .black .ripple {
      background-color: #ffffff !important; }
    .fab-s > .black svg {
      fill: #ffffff; }
    .fab-s > .black label {
      color: #ffffff;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 1.25px;
      text-transform: uppercase; }
  .fab-s > .green {
    background: #21783f;
    border: 1px solid #0000001e;
    cursor: pointer;
    overflow: hidden; }
    .fab-s > .green:hover {
      background-color: #1d6837 !important; }
    .fab-s > .green:focus {
      background-color: #18582e !important; }
    .fab-s > .green:active {
      background-color: #18582e !important; }
    @media (max-width: 56.25em) {
      .fab-s > .green:hover {
        background-color: #21783f !important; }
      .fab-s > .green:focus {
        background-color: #21783f !important; }
      .fab-s > .green:active {
        background-color: #21783f !important; } }
    .fab-s > .green .ripple {
      background-color: #ffffff !important; }
    .fab-s > .green svg {
      fill: #ffffff; }
    .fab-s > .green label {
      color: #ffffff;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 1.25px;
      text-transform: uppercase; }
  .fab-s > .white {
    background: #ffffff;
    border: 1px solid #0000001e;
    cursor: pointer;
    overflow: hidden; }
    .fab-s > .white:hover {
      background-color: whitesmoke !important; }
    .fab-s > .white:focus {
      background-color: #ebebeb !important; }
    .fab-s > .white:active {
      background-color: #ebebeb !important; }
    @media (max-width: 56.25em) {
      .fab-s > .white:hover {
        background-color: #ffffff !important; }
      .fab-s > .white:focus {
        background-color: #ffffff !important; }
      .fab-s > .white:active {
        background-color: #ffffff !important; } }
    .fab-s > .white .ripple {
      background-color: #ffffff !important; }
    .fab-s > .white svg {
      fill: #000; }
    .fab-s > .white label {
      color: #000;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 1.25px;
      text-transform: uppercase; }

.fab:hover {
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  opacity: 0.99; }

.fab:active {
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  opacity: 0.99; }

.fab-s > div:hover {
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); }

.fab-s > div:active {
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); }

.fab-app {
  left: auto;
  top: auto;
  bottom: 64px !important;
  right: 12px !important; }

.fab-blue {
  background: #0280EE;
  cursor: pointer;
  overflow: hidden; }
  .fab-blue:hover {
    background-color: #0069eb !important; }
  .fab-blue:focus {
    background-color: #0060d6 !important; }
  .fab-blue:active {
    background-color: #0060d6 !important; }
  @media (max-width: 56.25em) {
    .fab-blue:hover {
      background-color: #0072FF !important; }
    .fab-blue:focus {
      background-color: #0072FF !important; }
    .fab-blue:active {
      background-color: #0072FF !important; } }
  .fab-blue .ripple {
    background-color: #ffffff !important; }

.fab-green {
  background: #21783f;
  cursor: pointer;
  overflow: hidden;
  cursor: pointer;
  overflow: hidden;
  border: 4px solid red; }
  .fab-green:hover {
    background-color: #3d3d3d; }
  .fab-green:focus {
    background-color: #5c5c5c; }
  .fab-green:active {
    background-color: #5c5c5c; }
  @media (max-width: 56.25em) {
    .fab-green:hover {
      background-color: #000; }
    .fab-green:focus {
      background-color: #000; }
    .fab-green:active {
      background-color: #000; } }
  .fab-green .ripple {
    background-color: #ffffff; }
  .fab-green:hover {
    background-color: #1d6837; }
  .fab-green:focus {
    background-color: #18582e; }
  .fab-green:active {
    background-color: #18582e; }
  @media (max-width: 56.25em) {
    .fab-green:hover {
      background-color: #21783f; }
    .fab-green:focus {
      background-color: #21783f; }
    .fab-green:active {
      background-color: #21783f; } }
  .fab-green .ripple {
    background-color: #ffffff; }

.fab-desktop {
  background: #000; }

.fab-to-edit > .primary {
  background: #000;
  cursor: pointer;
  overflow: hidden; }
  .fab-to-edit > .primary:hover {
    background-color: #3d3d3d; }
  .fab-to-edit > .primary:focus {
    background-color: #5c5c5c; }
  .fab-to-edit > .primary:active {
    background-color: #5c5c5c; }
  @media (max-width: 56.25em) {
    .fab-to-edit > .primary:hover {
      background-color: #000; }
    .fab-to-edit > .primary:focus {
      background-color: #000; }
    .fab-to-edit > .primary:active {
      background-color: #000; } }
  .fab-to-edit > .primary .ripple {
    background-color: #ffffff; }

.fab-to-add > .primary {
  background: #0072FF;
  cursor: pointer;
  overflow: hidden; }
  .fab-to-add > .primary:hover {
    background-color: #0069eb !important; }
  .fab-to-add > .primary:focus {
    background-color: #0060d6 !important; }
  .fab-to-add > .primary:active {
    background-color: #0060d6 !important; }
  @media (max-width: 56.25em) {
    .fab-to-add > .primary:hover {
      background-color: #0072FF !important; }
    .fab-to-add > .primary:focus {
      background-color: #0072FF !important; }
    .fab-to-add > .primary:active {
      background-color: #0072FF !important; } }
  .fab-to-add > .primary .ripple {
    background-color: #ffffff !important; }

.fab-to-update > .primary {
  background: #0072FF;
  cursor: pointer;
  overflow: hidden; }
  .fab-to-update > .primary:hover {
    background-color: #0069eb !important; }
  .fab-to-update > .primary:focus {
    background-color: #0060d6 !important; }
  .fab-to-update > .primary:active {
    background-color: #0060d6 !important; }
  @media (max-width: 56.25em) {
    .fab-to-update > .primary:hover {
      background-color: #0072FF !important; }
    .fab-to-update > .primary:focus {
      background-color: #0072FF !important; }
    .fab-to-update > .primary:active {
      background-color: #0072FF !important; } }
  .fab-to-update > .primary .ripple {
    background-color: #ffffff !important; }

.banner {
  position: relative;
  display: inline-block;
  width: calc(100% - 0px);
  min-height: 72px;
  left: 0px;
  padding: 8px;
  z-index: 40;
  background-color: #ffffff;
  transform: scaleY(0);
  opacity: 0;
  transform-origin: top left;
  overflow: hidden; }
  .banner > .icon {
    position: relative;
    float: left;
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-top: 2px;
    border-radius: 50%;
    margin-right: 16px;
    margin-right: 24px;
    background-color: #0280EE;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    pointer-events: none; }
    .banner > .icon svg {
      height: 24px;
      width: 24px;
      fill: #ffffff;
      user-select: none;
      pointer-events: none; }
  .banner > .des {
    position: relative;
    float: left;
    display: inline-block;
    width: calc(100% - 82px - 324px);
    min-width: 384px;
    min-height: 48px;
    overflow: hidden;
    color: #000;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0.15px; }
  .banner > .btn {
    position: relative;
    float: right;
    display: inline-block;
    width: 324px;
    margin-right: 16px;
    height: 64px; }

.banner-show {
  animation: banner-show  0.300s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

@keyframes banner-show {
  from {
    transform: scaleY(0);
    opacity: 0; }
  to {
    transform: scaleY(1);
    opacity: 1; } }

.banner-hide {
  animation: banner-hide  0.300s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

@keyframes banner-hide {
  from {
    transform: scaleY(1);
    opacity: 1; }
  to {
    transform: scaleY(0);
    opacity: 0; } }

@media (max-width: 37.5em) {
  .banner > .des {
    width: calc(100% - 82px);
    min-width: auto; }
  .banner > .btn {
    width: calc(100% - 0px);
    min-width: auto;
    margin-right: 0px; } }

.fullcont {
  position: fixed;
  display: block;
  height: 100vh;
  width: calc(50% - 76px);
  right: 0px;
  bottom: -100vh;
  overflow: hidden;
  background-color: #E6E6E6;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1, 1);
  z-index: 40;
  border-left: 1px solid rgba(0, 0, 0, 0.117647);
  border-right: 1px solid rgba(0, 0, 0, 0.117647); }
  .fullcont-2 {
    z-index: 60; }

.fullcont-notification {
  position: absolute;
  display: inline-block;
  width: calc(100% - 16px);
  max-width: 900px;
  min-height: 56px;
  max-height: 120px;
  bottom: 16px;
  left: 0px;
  background: #E6E6E6;
  overflow-y: scroll;
  overflow-x: hidden;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

.fullcont {
  /*desktop*/
  /*desktop*/ }
  @media (max-width: 112.5em) {
    .fullcont {
      right: 50%;
      transform: translateX(50%);
      max-width: 900px;
      width: calc(100% - 210px); } }
  @media (max-width: 56.25em) {
    .fullcont {
      right: 0px;
      transform: translateX(0%);
      max-width: auto;
      width: 100%; } }

.fullcont-show {
  animation: fullcont-show  0.300s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }

@keyframes fullcont-show {
  from {
    top: 100vh; }
  to {
    top: 0vh; } }

.fullcont-hide {
  animation: fullcont-hide  0.250s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }

@keyframes fullcont-hide {
  from {
    top: 0vh; }
  to {
    top: 100vh; } }

.mode-view {
  /*textfield*/
  /*radio*/
  /*checkbox*/
  /*checkbox*/
  /*checkbox*/
  /*checkbox*/ }
  .mode-view > .fab-to-edit {
    display: absolute; }
  .mode-view > .fab-to-update {
    display: none; }
  .mode-view > .fab-to-add {
    display: none; }
  .mode-view .fab-to-readOnly {
    transform: scale(0); }
  .mode-view > .page .row {
    pointer-events: none; }
    .mode-view > .page .row > div {
      pointer-events: none; }
      .mode-view > .page .row > div > .card {
        pointer-events: auto !important; }
  .mode-view > .page .textfield {
    user-select: none;
    pointer-events: none; }
    .mode-view > .page .textfield > .trailing {
      display: none; }
    .mode-view > .page .textfield > .helper {
      display: none; }
    .mode-view > .page .textfield > .counter {
      display: none; }
    .mode-view > .page .textfield > .indicador {
      display: none; }
    .mode-view > .page .textfield > .elem {
      border-bottom: none;
      background: none;
      font-family: roboto;
      pointer-events: none;
      color: #000;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.1px; }
      .mode-view > .page .textfield > .elem::placeholder {
        opacity: 0; }
    .mode-view > .page .textfield > .label {
      color: #000;
      font-size: 12px;
      font-weight: normal;
      letter-spacing: 0.4px;
      pointer-events: none; }
  .mode-view > .page .radio {
    padding: 0px;
    min-height: 20px;
    user-select: none;
    pointer-events: none;
    margin-top: 2px; }
    .mode-view > .page .radio > div {
      margin-top: 0px;
      padding: 0px !important;
      min-height: 8px;
      /**/ }
      .mode-view > .page .radio > div > label {
        margin-left: 8px;
        top: 2px;
        margin-right: 8px; }
      .mode-view > .page .radio > div > input {
        top: 0px;
        width: 18px;
        height: 18px;
        border-radius: 0px;
        border: 2px solid #000;
        opacity: 1; }
        .mode-view > .page .radio > div > input::before {
          top: 2px;
          left: 2px;
          border-radius: 0%;
          width: 8px;
          height: 8px; }
        .mode-view > .page .radio > div > input:checked {
          background: #000 url(svg/check.svg) no-repeat; }
  .mode-view .page .checkbox {
    user-select: none;
    pointer-events: none; }
    .mode-view .page .checkbox > input {
      border: 2px solid #000;
      opacity: 1; }
      .mode-view .page .checkbox > input:checked {
        background: #000 url(svg/check.svg) no-repeat; }
        .mode-view .page .checkbox > input:checked::before {
          display: none; }
      .mode-view .page .checkbox > input::before {
        opacity: 0;
        transform: scale(0); }
  .mode-view .page .signature-line label {
    display: none; }
  .mode-view .page .signature-line span {
    visibility: visible; }
  .mode-view .page .signature-line::after {
    position: absolute;
    display: inline-block;
    content: '';
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image: url("./svg/view.svg");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center; }
  .mode-view .page .multitable {
    border: 0.2px solid divider;
    cursor: pointer;
    overflow: hidden; }
    .mode-view .page .multitable:hover {
      background-color: gainsboro; }
    .mode-view .page .multitable:focus {
      background-color: #d2d2d2; }
    .mode-view .page .multitable:active {
      background-color: #d2d2d2; }
    @media (max-width: 56.25em) {
      .mode-view .page .multitable:hover {
        background-color: #E6E6E6; }
      .mode-view .page .multitable:focus {
        background-color: #E6E6E6; }
      .mode-view .page .multitable:active {
        background-color: #E6E6E6; } }
    .mode-view .page .multitable .ripple {
      background-color: #ffffff; }
    .mode-view .page .multitable > .cont {
      user-select: none;
      pointer-events: none; }
    .mode-view .page .multitable > .cont > .line {
      cursor: pointer;
      overflow: hidden;
      /*Textfield*/ }
      .mode-view .page .multitable > .cont > .line:hover {
        background-color: whitesmoke; }
      .mode-view .page .multitable > .cont > .line:focus {
        background-color: whitesmoke; }
      .mode-view .page .multitable > .cont > .line:active {
        background-color: #ebebeb; }
      @media (max-width: 56.25em) {
        .mode-view .page .multitable > .cont > .line:hover {
          background-color: #ffffff; }
        .mode-view .page .multitable > .cont > .line:focus {
          background-color: #ffffff; }
        .mode-view .page .multitable > .cont > .line:active {
          background-color: #ffffff; } }
      .mode-view .page .multitable > .cont > .line .ripple {
        background-color: #cde7fe; }
      .mode-view .page .multitable > .cont > .line > .removeLine {
        display: none; }
      .mode-view .page .multitable > .cont > .line .checkbox-mini label {
        margin-top: 2px; }
      .mode-view .page .multitable > .cont > .line .checkbox-mini input {
        margin-top: 1px; }
      .mode-view .page .multitable > .cont > .line .textfield {
        top: 1px;
        height: 20px  !important; }
        .mode-view .page .multitable > .cont > .line .textfield .elem {
          height: 20px !important;
          top: 0px; }
        .mode-view .page .multitable > .cont > .line .textfield > .chip-cont {
          top: -16px;
          /*time-task*/ }
          .mode-view .page .multitable > .cont > .line .textfield > .chip-cont > .chip {
            height: 16px;
            background: transparent;
            /*remove*/ }
            .mode-view .page .multitable > .cont > .line .textfield > .chip-cont > .chip > label {
              left: 2px;
              top: -4px;
              font-size: 12px !important;
              font-weight: 400 !important;
              letter-spacing: 0.5px !important; }
            .mode-view .page .multitable > .cont > .line .textfield > .chip-cont > .chip > span {
              display: none; }
    .mode-view .page .multitable > .btn {
      user-select: none;
      pointer-events: none; }
  .mode-view .page .textfield-autocomplete > .chip-cont {
    /*time-task*/ }
    .mode-view .page .textfield-autocomplete > .chip-cont > .chip {
      background: transparent;
      /*remove*/ }
      .mode-view .page .textfield-autocomplete > .chip-cont > .chip > label {
        font-weight: 500 !important; }
      .mode-view .page .textfield-autocomplete > .chip-cont > .chip > span {
        display: none; }

.mode-edit > .fab-to-edit {
  display: none; }

.mode-edit > .fab-to-update {
  display: absolute; }

.mode-edit > .fab-to-add {
  display: none; }

.mode-edit .fab-to-readOnly {
  transform: scale(0); }

.mode-edit .showOnEdit {
  display: inline-block; }

.mode-edit .hideOnEdit {
  display: none; }

.mode-edit .disable-mode-edit {
  user-select: none;
  pointer-events: none;
  opacity: 0.54; }

.mode-add > .fab-to-edit {
  display: none; }

.mode-add > .fab-to-update {
  display: none; }

.mode-add > .fab-to-add {
  display: absolute; }

.mode-add > .appbar .primary .fileTab {
  display: none; }

.mode-add .fab-to-readOnly {
  transform: scale(0); }

.mode-add .hideOnAdd {
  display: none; }

.mode-add .showOnAdd {
  display: inline-block; }

.mode-readOnly > .fab-to-edit {
  display: none; }

.mode-readOnly .fab-to-readOnly {
  transform: scale(1); }

.mode-readOnly .showOnAdd {
  display: none; }

.mode-noFile > .appbar .primary .fileTab {
  display: none; }

.mode-view .hideOnView {
  display: none; }

.mode-view .showOnView {
  display: inline-block; }

.fullcont-mobile {
  width: 400px;
  height: 700px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 45; }

.quickform {
  position: fixed;
  display: inline-block;
  width: 600px;
  height: 50%;
  border-radius: 4px;
  left: 50%;
  transform: translate(-50%, -30%);
  transform-origin: center;
  top: 130vh;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1, 1);
  background-color: #E6E6E6;
  z-index: 220;
  padding: 8px;
  padding-top: 56px;
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); }

.quickform-show {
  animation: quickform-show  0.300s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }

@keyframes quickform-show {
  from {
    top: 130vh;
    opacity: 0;
    transform: scale(0.85) translate(-50%, -30%); }
  to {
    top: 30vh;
    opacity: 1;
    transform: scale(1) translate(-50%, -30%); } }

.quickform-hide {
  animation: quickform-hide  0.250s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }

@keyframes quickform-hide {
  from {
    top: 30vh;
    opacity: 1;
    transform: scale(1) translate(-50%, -30%); }
  to {
    top: 130vh;
    opacity: 0;
    transform: scale(0.85) translate(-50%, -30%); } }

.onboard {
  position: fixed;
  display: inline-block;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  max-width: 1200px;
  bottom: -110vh;
  background-color: #ffffff;
  overflow: hidden;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
  left: 0%;
  margin-left: 50%;
  transform: translateX(-50%);
  z-index: 210;
  /*illu-top*/ }
  .onboard .illustration-onboard {
    position: relative;
    display: inline-block;
    width: 100%;
    height: auto; }
    .onboard .illustration-onboard img {
      position: relative;
      display: inline-block;
      width: 100%;
      height: auto; }
  .onboard .title {
    padding-left: 12px;
    padding-right: 12px;
    margin-top: 16px;
    font-size: 52px;
    font-weight: 400;
    color: #202124; }
  .onboard .subtitle {
    position: relative;
    display: block;
    margin-top: 12px;
    padding-left: 12px;
    padding-right: 12px;
    color: #5F6368;
    font-weight: 500;
    font-size: 16px;
    opacity: 0.54; }
  .onboard .des {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 16px;
    font-weight: 400;
    color: #5F6368;
    line-height: 1.6;
    margin-top: 8px; }
  .onboard .logo {
    position: absolute;
    display: inline-block;
    width: 56px;
    height: 56px;
    bottom: 64px;
    left: 8px;
    background: url("svg/illustrations/gosive-logo-gradiente.svg");
    background-size: 100% auto   !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    left: 50%;
    transform: translateX(-50%); }
  .onboard .logo-gray {
    position: absolute;
    display: inline-block;
    width: 56px;
    height: 56px;
    top: 16px;
    left: 8px;
    background: url("svg/illustrations/gosive-logo-gradiente.svg");
    background-size: 100% auto   !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 0.36;
    left: 50%;
    transform: translateX(-50%); }

.confirmation-show {
  animation: confirmation-show  0.300s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }

@keyframes confirmation-show {
  from {
    bottom: -100vh; }
  to {
    bottom: calc(0vh + 16px); } }

.confirmation-hide {
  animation: confirmation-hide  0.250s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }

@keyframes confirmation-hide {
  from {
    bottom: calc(0vh + 16px); }
  to {
    bottom: -100vh; } }

.stepper {
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 56px;
  bottom: 0px;
  left: 0px;
  background-color: #ffffff;
  z-index: 32;
  box-shadow: 0px -2px 4px -1px rgba(0, 0, 0, 0.1); }
  .stepper div[class^="btn-"] {
    position: absolute;
    display: inline-block;
    height: 56px;
    padding-left: 16px;
    padding-right: 16px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center; }
    .stepper div[class^="btn-"] label {
      color: #000;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 1.25px;
      text-transform: uppercase;
      user-select: none;
      pointer-events: none; }
    .stepper div[class^="btn-"] svg {
      height: 16px;
      width: 16px;
      fill: #000;
      user-select: none;
      pointer-events: none; }
  .stepper .btn-next {
    right: 0px;
    cursor: pointer;
    overflow: hidden; }
    .stepper .btn-next label {
      opacity: 0.36; }
    .stepper .btn-next svg {
      opacity: 0.36; }
    .stepper .btn-next:hover {
      background-color: whitesmoke; }
    .stepper .btn-next:focus {
      background-color: whitesmoke; }
    .stepper .btn-next:active {
      background-color: #ebebeb; }
    @media (max-width: 56.25em) {
      .stepper .btn-next:hover {
        background-color: #ffffff; }
      .stepper .btn-next:focus {
        background-color: #ffffff; }
      .stepper .btn-next:active {
        background-color: #ffffff; } }
    .stepper .btn-next .ripple {
      background-color: #cde7fe; }
  .stepper .btn-back {
    left: 0px;
    cursor: pointer;
    overflow: hidden; }
    .stepper .btn-back label {
      opacity: 0.36; }
    .stepper .btn-back svg {
      opacity: 0.36; }
    .stepper .btn-back:hover {
      background-color: whitesmoke; }
    .stepper .btn-back:focus {
      background-color: whitesmoke; }
    .stepper .btn-back:active {
      background-color: #ebebeb; }
    @media (max-width: 56.25em) {
      .stepper .btn-back:hover {
        background-color: #ffffff; }
      .stepper .btn-back:focus {
        background-color: #ffffff; }
      .stepper .btn-back:active {
        background-color: #ffffff; } }
    .stepper .btn-back .ripple {
      background-color: #cde7fe; }
  .stepper .counter {
    position: absolute;
    display: inline-block;
    left: 96px;
    height: 56px;
    width: calc(100% - 192px);
    display: flex;
    justify-content: center;
    align-items: center; }
    .stepper .counter span {
      width: 12px;
      height: 12px;
      margin: 4px;
      border-radius: 50%;
      background-color: #B7C2CC;
      cursor: pointer; }

/*stepper*/
.stepper-1 .counter span:nth-child(1) {
  background-color: #0280EE; }

.stepper-2 .counter span:nth-child(2) {
  background-color: #0280EE; }

.stepper-3 .counter span:nth-child(3) {
  background-color: #0280EE; }

.stepper-4 .counter span:nth-child(4) {
  background-color: #0280EE; }

.stepper-5 .counter span:nth-child(5) {
  background-color: #0280EE; }

.stepper-6 .counter span:nth-child(6) {
  background-color: #0280EE; }

.stepper-7 .counter span:nth-child(7) {
  background-color: #0280EE; }

.stepper-8 .counter span:nth-child(8) {
  background-color: #0280EE; }

.stepper-9 .counter span:nth-child(9) {
  background-color: #0280EE; }

.stepper-nextOn .btn-next {
  background-color: #0280EE;
  cursor: pointer;
  overflow: hidden; }
  .stepper-nextOn .btn-next:hover {
    background-color: #0275da; }
  .stepper-nextOn .btn-next:focus {
    background-color: #026ac6; }
  .stepper-nextOn .btn-next:active {
    background-color: #026ac6; }
  @media (max-width: 56.25em) {
    .stepper-nextOn .btn-next:hover {
      background-color: #0280EE; }
    .stepper-nextOn .btn-next:focus {
      background-color: #0280EE; }
    .stepper-nextOn .btn-next:active {
      background-color: #0280EE; } }
  .stepper-nextOn .btn-next .ripple {
    background-color: #ffffff; }
  .stepper-nextOn .btn-next label {
    color: #ffffff !important;
    opacity: 1; }
  .stepper-nextOn .btn-next svg {
    fill: #ffffff !important;
    opacity: 1; }

/*stepper*/
.stepper-nextActive .btn-next label {
  color: #0280EE !important;
  opacity: 1; }

.stepper-nextActive .btn-next svg {
  fill: #0280EE !important;
  opacity: 1; }

/*stepper*/
.stepper-backOn .btn-back {
  background-color: #ffffff;
  cursor: pointer;
  overflow: hidden; }
  .stepper-backOn .btn-back:hover {
    background-color: whitesmoke; }
  .stepper-backOn .btn-back:focus {
    background-color: whitesmoke; }
  .stepper-backOn .btn-back:active {
    background-color: #ebebeb; }
  @media (max-width: 56.25em) {
    .stepper-backOn .btn-back:hover {
      background-color: #ffffff; }
    .stepper-backOn .btn-back:focus {
      background-color: #ffffff; }
    .stepper-backOn .btn-back:active {
      background-color: #ffffff; } }
  .stepper-backOn .btn-back .ripple {
    background-color: #cde7fe; }
  .stepper-backOn .btn-back label {
    color: #0280EE !important;
    opacity: 1; }
  .stepper-backOn .btn-back svg {
    fill: #0280EE !important;
    opacity: 1; }

/*stepper*/
.stepper-bothOn .btn-back {
  background-color: #ffffff;
  cursor: pointer;
  overflow: hidden; }
  .stepper-bothOn .btn-back:hover {
    background-color: whitesmoke; }
  .stepper-bothOn .btn-back:focus {
    background-color: whitesmoke; }
  .stepper-bothOn .btn-back:active {
    background-color: #ebebeb; }
  @media (max-width: 56.25em) {
    .stepper-bothOn .btn-back:hover {
      background-color: #ffffff; }
    .stepper-bothOn .btn-back:focus {
      background-color: #ffffff; }
    .stepper-bothOn .btn-back:active {
      background-color: #ffffff; } }
  .stepper-bothOn .btn-back .ripple {
    background-color: #cde7fe; }
  .stepper-bothOn .btn-back label {
    color: #0280EE !important;
    opacity: 1; }
  .stepper-bothOn .btn-back svg {
    fill: #0280EE !important;
    opacity: 1; }

.stepper-bothOn .btn-next {
  background-color: #ffffff;
  cursor: pointer;
  overflow: hidden; }
  .stepper-bothOn .btn-next:hover {
    background-color: whitesmoke; }
  .stepper-bothOn .btn-next:focus {
    background-color: whitesmoke; }
  .stepper-bothOn .btn-next:active {
    background-color: #ebebeb; }
  @media (max-width: 56.25em) {
    .stepper-bothOn .btn-next:hover {
      background-color: #ffffff; }
    .stepper-bothOn .btn-next:focus {
      background-color: #ffffff; }
    .stepper-bothOn .btn-next:active {
      background-color: #ffffff; } }
  .stepper-bothOn .btn-next .ripple {
    background-color: #cde7fe; }
  .stepper-bothOn .btn-next label {
    color: #0280EE !important;
    opacity: 1; }
  .stepper-bothOn .btn-next svg {
    fill: #0280EE !important;
    opacity: 1; }

.stepper-nextOnAlways .btn-back {
  background-color: #ffffff;
  cursor: pointer;
  overflow: hidden; }
  .stepper-nextOnAlways .btn-back:hover {
    background-color: whitesmoke; }
  .stepper-nextOnAlways .btn-back:focus {
    background-color: whitesmoke; }
  .stepper-nextOnAlways .btn-back:active {
    background-color: #ebebeb; }
  @media (max-width: 56.25em) {
    .stepper-nextOnAlways .btn-back:hover {
      background-color: #ffffff; }
    .stepper-nextOnAlways .btn-back:focus {
      background-color: #ffffff; }
    .stepper-nextOnAlways .btn-back:active {
      background-color: #ffffff; } }
  .stepper-nextOnAlways .btn-back .ripple {
    background-color: #cde7fe; }
  .stepper-nextOnAlways .btn-back label {
    color: #0280EE !important;
    opacity: 1; }
  .stepper-nextOnAlways .btn-back svg {
    fill: #0280EE !important;
    opacity: 1; }

.stepper-nextOnAlways .btn-next {
  background-color: #0280EE;
  cursor: pointer;
  overflow: hidden; }
  .stepper-nextOnAlways .btn-next:hover {
    background-color: #0275da; }
  .stepper-nextOnAlways .btn-next:focus {
    background-color: #026ac6; }
  .stepper-nextOnAlways .btn-next:active {
    background-color: #026ac6; }
  @media (max-width: 56.25em) {
    .stepper-nextOnAlways .btn-next:hover {
      background-color: #0280EE; }
    .stepper-nextOnAlways .btn-next:focus {
      background-color: #0280EE; }
    .stepper-nextOnAlways .btn-next:active {
      background-color: #0280EE; } }
  .stepper-nextOnAlways .btn-next .ripple {
    background-color: #ffffff; }
  .stepper-nextOnAlways .btn-next label {
    color: #ffffff !important;
    opacity: 1; }
  .stepper-nextOnAlways .btn-next svg {
    fill: #ffffff !important;
    opacity: 1; }

.stepper-1 .counter span:nth-child(1) {
  background-color: #0280EE; }

.stepper-2 .counter span:nth-child(2) {
  background-color: #0280EE; }

.stepper-3 .counter span:nth-child(3) {
  background-color: #0280EE; }

.stepper-4 .counter span:nth-child(4) {
  background-color: #0280EE; }

.stepper-5 .counter span:nth-child(5) {
  background-color: #0280EE; }

.stepper-6 .counter span:nth-child(6) {
  background-color: #0280EE; }

.stepper-7 .counter span:nth-child(7) {
  background-color: #0280EE; }

.stepper-8 .counter span:nth-child(8) {
  background-color: #0280EE; }

.stepper-9 .counter span:nth-child(9) {
  background-color: #0280EE; }

/*stepper-bothOn*/
.file {
  position: relative;
  display: inline-block;
  width: calc(100% - 16px);
  max-width: 900px;
  margin-top: 8px;
  overflow: hidden;
  left: 50%;
  transform: translateX(-50%); }
  .file::after {
    content: "";
    display: table;
    clear: both; }

/*files*/
.filePage > .file-regularFiles {
  display: inline-block; }

.filePage > .file-deletedFiles {
  display: none; }

.filePage-view-trash > .file-regularFiles {
  display: none; }

.filePage-view-trash > .file-deletedFiles {
  display: inline-block; }

.file {
  /*header*/ }
  .file .header {
    position: relative;
    display: inline-block;
    width: 100%;
    transition: all 0.15s;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    background: #ffffff;
    /*path*/
    /*__icon*/ }
    .file .header .path {
      position: relative;
      float: left;
      min-height: 24px;
      width: calc(100% - 344px);
      min-width: 100px;
      margin-top: 8px;
      /*& span*/ }
      .file .header .path label {
        position: relative;
        float: left;
        height: 32px;
        display: inline-block;
        padding-bottom: 16px;
        padding-top: 8px;
        padding-right: 24px;
        padding-left: 8px;
        overflow: hidden;
        max-width: 130px;
        user-select: none;
        color: #0280EE;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.4px;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-wrap: none;
        overflow: hidden;
        cursor: pointer;
        overflow: hidden;
        transition: all 0.15s;
        transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
        font-weight: 500; }
        .file .header .path label:hover {
          background-color: gainsboro; }
        .file .header .path label:focus {
          background-color: #d2d2d2; }
        .file .header .path label:active {
          background-color: #d2d2d2; }
        @media (max-width: 56.25em) {
          .file .header .path label:hover {
            background-color: #E6E6E6; }
          .file .header .path label:focus {
            background-color: #E6E6E6; }
          .file .header .path label:active {
            background-color: #E6E6E6; } }
        .file .header .path label .ripple {
          background-color: #ffffff; }
        .file .header .path label:active {
          transform: scale(0.9); }
        .file .header .path label::before {
          position: absolute;
          content: '';
          top: 2px;
          right: 0px;
          width: 24px;
          height: 24px;
          background: url(svg/right.svg) no-repeat;
          background-size: 100% 100%;
          background-position: center;
          opacity: 0.54; }
    .file .header .icon {
      position: relative;
      display: inline-block;
      float: right;
      height: 48px;
      min-width: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4px;
      cursor: pointer;
      overflow: hidden;
      cursor: pointer;
      overflow: hidden;
      transition: all 0.15s;
      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
      /*svg*/
      /*label*/ }
      .file .header .icon:hover {
        background-color: gainsboro; }
      .file .header .icon:focus {
        background-color: #d2d2d2; }
      .file .header .icon:active {
        background-color: #d2d2d2; }
      @media (max-width: 56.25em) {
        .file .header .icon:hover {
          background-color: #E6E6E6; }
        .file .header .icon:focus {
          background-color: #E6E6E6; }
        .file .header .icon:active {
          background-color: #E6E6E6; } }
      .file .header .icon .ripple {
        background-color: #ffffff; }
      .file .header .icon:active {
        transform: scale(0.9); }
      .file .header .icon svg {
        width: 24px;
        height: 24px;
        margin: 4px;
        pointer-events: none;
        user-select: none; }
      .file .header .icon label {
        margin: 2px;
        margin-right: 8px;
        color: #000;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.4px;
        user-select: none;
        pointer-events: none;
        pointer-events: none;
        user-select: none; }
    .file .header .icon-left {
      float: left; }
  .file .second {
    background-color: #21783f;
    display: none; }
    .file .second .icon {
      cursor: pointer;
      overflow: hidden; }
      .file .second .icon:hover {
        background-color: #1d6837; }
      .file .second .icon:focus {
        background-color: #18582e; }
      .file .second .icon:active {
        background-color: #18582e; }
      @media (max-width: 56.25em) {
        .file .second .icon:hover {
          background-color: #21783f; }
        .file .second .icon:focus {
          background-color: #21783f; }
        .file .second .icon:active {
          background-color: #21783f; } }
      .file .second .icon .ripple {
        background-color: #ffffff; }
      .file .second .icon svg {
        fill: #ffffff; }
      .file .second .icon label {
        color: #ffffff;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.4px; }
  .file .third {
    background-color: #000; }
    .file .third .icon {
      cursor: pointer;
      overflow: hidden; }
      .file .third .icon:hover {
        background-color: #3d3d3d; }
      .file .third .icon:focus {
        background-color: #5c5c5c; }
      .file .third .icon:active {
        background-color: #5c5c5c; }
      @media (max-width: 56.25em) {
        .file .third .icon:hover {
          background-color: #000; }
        .file .third .icon:focus {
          background-color: #000; }
        .file .third .icon:active {
          background-color: #000; } }
      .file .third .icon .ripple {
        background-color: #ffffff; }
      .file .third .icon svg {
        fill: #ffffff; }
      .file .third .icon label {
        color: #ffffff;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.4px; }

/*file*/
/*
	file-regularFiles
	file-deletedFiles
*/
.file {
  /*body*/ }
  .file .body {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 300px;
    padding: 8px;
    background: #ffffff;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
    /*cont*/
    /*cont-checked*/
    /*cont-checked*/ }
    .file .body .cont {
      position: relative;
      display: inline-block;
      float: left;
      margin: 4px;
      height: 160px;
      width: 150px;
      border-radius: 4px;
      overflow: hidden;
      cursor: pointer;
      background-color: #E6E6E6;
      cursor: pointer;
      overflow: hidden;
      transition: all 0.15s;
      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
      border: 0.1px solid #0000001e;
      /*--des*/
      /*&--check*/
      /*hover*/
      /*hover*/ }
      .file .body .cont:hover {
        background-color: gainsboro; }
      .file .body .cont:focus {
        background-color: #d2d2d2; }
      .file .body .cont:active {
        background-color: #d2d2d2; }
      @media (max-width: 56.25em) {
        .file .body .cont:hover {
          background-color: #E6E6E6; }
        .file .body .cont:focus {
          background-color: #E6E6E6; }
        .file .body .cont:active {
          background-color: #E6E6E6; } }
      .file .body .cont .ripple {
        background-color: #ffffff; }
      .file .body .cont > .img {
        position: absolute;
        width: 100%;
        height: 100%; }
      .file .body .cont .des {
        position: absolute;
        width: 100%;
        bottom: 0px !important;
        height: 32px;
        overflow: hidden;
        background: #ffffff;
        cursor: pointer;
        user-select: none;
        display: flex;
        align-items: center;
        cursor: pointer;
        overflow: hidden; }
        .file .body .cont .des:hover {
          background-color: whitesmoke; }
        .file .body .cont .des:focus {
          background-color: whitesmoke; }
        .file .body .cont .des:active {
          background-color: #ebebeb; }
        @media (max-width: 56.25em) {
          .file .body .cont .des:hover {
            background-color: #ffffff; }
          .file .body .cont .des:focus {
            background-color: #ffffff; }
          .file .body .cont .des:active {
            background-color: #ffffff; } }
        .file .body .cont .des .ripple {
          background-color: #cde7fe; }
        .file .body .cont .des > .img {
          width: 28px;
          height: 24px;
          margin-left: 4px;
          opacity: 1 !important; }
        .file .body .cont .des > label {
          position: relative;
          display: inline-block;
          width: calc(100% - 4px);
          margin-left: 4px;
          pointer-events: none;
          user-select: none;
          white-space: nowrap;
          text-overflow: ellipsis;
          text-wrap: none;
          overflow: hidden;
          color: #000;
          font-size: 14px;
          font-weight: normal;
          letter-spacing: 0.25px;
          opacity: 1 !important; }
      .file .body .cont .check {
        position: absolute;
        width: 48px;
        height: 48px;
        top: 4px;
        right: 4px;
        padding: 4px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        opacity: 0;
        /*svg*/
        /*hover*/ }
        .file .body .cont .check svg {
          position: absolute;
          top: 0px;
          left: 0px;
          width: 24px;
          height: 24px;
          fill: #ffffff;
          pointer-events: none;
          user-select: none;
          transition: all 0.250s;
          border-radius: 33.33;
          opacity: 0; }
        .file .body .cont .check:hover svg {
          opacity: 0.54; }
      .file .body .cont:hover .check {
        border: 2px solid #0280EE;
        opacity: 1; }
      .file .body .cont:active {
        transform: scale(0.95); }
    .file .body .cont-checked {
      box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); }
      .file .body .cont-checked .check {
        border: 2px solid #0280EE;
        opacity: 1; }
        .file .body .cont-checked .check svg {
          opacity: 1;
          fill: #0280EE; }
    .file .body .cont-empty {
      position: relative;
      display: inline-block;
      width: 120px;
      height: 120px;
      margin: 16px;
      background: #F1F3F4;
      border-radius: 50%;
      left: 0%;
      margin-left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      /*svg*/ }
      .file .body .cont-empty > svg {
        position: relative;
        display: inline-block;
        width: 36px;
        height: 36px;
        fill: #000;
        opacity: 0.54;
        user-select: none;
        pointer-events: none;
        display: flex;
        justify-content: left;
        align-items: center; }
      .file .body .cont-empty > label {
        position: relative;
        display: inline-block;
        width: 100%;
        margin-left: 4px;
        pointer-events: none;
        user-select: none;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-wrap: none;
        overflow: hidden;
        text-align: center;
        color: #000;
        font-size: 10px;
        font-weight: normal;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        opacity: 1 !important; }
      .file .body .cont-empty-upload {
        cursor: pointer;
        overflow: hidden; }
        .file .body .cont-empty-upload:hover {
          background-color: #e6e9eb !important; }
        .file .body .cont-empty-upload:focus {
          background-color: #dadfe2 !important; }
        .file .body .cont-empty-upload:active {
          background-color: #dadfe2 !important; }
        @media (max-width: 56.25em) {
          .file .body .cont-empty-upload:hover {
            background-color: #F1F3F4 !important; }
          .file .body .cont-empty-upload:focus {
            background-color: #F1F3F4 !important; }
          .file .body .cont-empty-upload:active {
            background-color: #F1F3F4 !important; } }
        .file .body .cont-empty-upload .ripple {
          background-color: #ffffff !important; }
        .file .body .cont-empty-upload > svg {
          fill: #0280EE;
          opacity: 1; }

/*files*/
/*HTML


<!--TEST FILES -->
	<!--TEST FILES -->
	<!--TEST FILES -->
	<!--TEST FILES -->
	<!--TEST FILES -->
	<!--TEST FILES -->
	<!--TEST FILES -->
	<!--TEST FILES -->

	<div class="fullcont fullcont__show form"  >
		
		  <!---HEAD-->
		  <!---HEAD-->
		  <!---HEAD-->
		  <!---HEAD-->
		<div class="appbar appbar__secondary"> <!---appbar__cont-principal-->
			<div class="appbar__cont-principal"> 
				<div class="appbar__icon fl  fullcont--hide" >
				  <svg><use xlink:href="css/svg.svg#back"></use></svg>
				</div>
				<h6 class="appbar__title">Nurses Form</h6>
				<div class="appbar__icon " >
				  <svg><use xlink:href="css/svg.svg#save"></use></svg>
				</div>
			</div> <!---appbar__cont-principal-->

			<div class="appbar__cont-file dn" >  <!---appbar__cont-file-->
				<div class="appbar__icon fl  file_select_cancel" >
				  <svg><use xlink:href="css/svg.svg#close"></use></svg>
				</div>
				<h6 class="appbar__title file_title"></h6>
				<div class="appbar__icon " >
				  <svg><use xlink:href="css/svg.svg#down"></use></svg>
				</div>
				<div class="appbar__icon  remove_file">
				  <svg><use xlink:href="css/svg.svg#delete"></use></svg>
				</div>
			</div> <!---appbar__cont-file-->



		</div> <!---appbar__secondary-->

		  <!---BODY-->
		  <!---BODY-->
		  <!---BODY-->
		  <!---BODY-->
  
  		<div class="fullcont__body"    >
		<label  class="t t--card">Nurse Files</label>



		    <div class="card file_in_list_view" > 

		    	<div class="card--file_header" >

		    		<div class="card--file_header__cont fl"   >
		    			<svg><use xlink:href="css/svg.svg#back"></use></svg>
		    		</div>

		    		<div class="path" title="original long path"> 
		    			<label><span>Drive 1 ></span> <span>Folder 2 ></span> <span>Folder 3></span> <span>Folder 5></span>   <span>Folder 6></span> </label>
		    		</div>

		    		<div class="card--file_header__cont change_file_view card--file_header__cont--2" >

		    			<svg><use xlink:href="css/svg.svg#list"></use></svg>
		    		</div>	

		    		<div class="card--file_header__cont card--file_header__cont--2">
		    			<svg><use xlink:href="css/svg.svg#folder"></use></svg>
		    			<label>Create folder</label>
		    		</div>

		    		<div class="card--file_header__cont card--file_header__cont--2" >
		    			<svg><use xlink:href="css/svg.svg#upload"></use></svg>
		    			<label>Upload</label>		    		
		    		</div>

		    		<div class="card--file_header__cont card--file_header__cont--3" onclick="show__menu('file_options')">
		    			<svg><use xlink:href="css/svg.svg#more"></use></svg>
		    		</div>


	    				    				    		
		    	</div><!---card--file_header--> 

	
	
				<div class="file_cont file_cont--folder" >

					<div class="file_cont--des" >
						<svg><use xlink:href="css/svg.svg#folder" style="fill:#FFC800;"></use></svg >
						<label>Folder.jpg</label>
					</div> 

					<div class="file_cont--check">
						<svg><use xlink:href="css/svg.svg#check-round" ></use></svg>
					</div>

				</div>   



				<div class="file_cont " >

					<div class="file_cont--des" >
						<svg><use xlink:href="css/svg.svg#doc" style="fill:#DB4437;"></use></svg >
						<label>doc345.jpg</label>
					</div> 

					<div class="file_cont--check">
						<svg><use xlink:href="css/svg.svg#check-round" ></use></svg></div>

				</div>   	


				<div class="file_cont">

					<div class="file_cont--des" >
						<svg><use xlink:href="css/svg.svg#doc" style="fill:#DB4437;"></use></svg >
						<label>doc345.jpg</label>
					</div> 

					<div class="file_cont--check">
						<svg><use xlink:href="css/svg.svg#check-round" ></use></svg></div>

				</div>   

				<div class="file_cont">

					<div class="file_cont--des" >
						<svg><use xlink:href="css/svg.svg#doc" style="fill:#DB4437;"></use></svg >
						<label>doc345.jpg</label>
					</div> 

					<div class="file_cont--check">
						<svg><use xlink:href="css/svg.svg#check-round" ></use></svg></div>

				</div> 


			</div><!-- END CARD-->	<!-- END CARD-->	

		<label  class="t t--card">Nurse Files</label>
		    <div class="card " > 

		    	<div class="card--file_header" >

		    		<div class="card--file_header__cont fl">
		    			<svg><use xlink:href="css/svg.svg#back"></use></svg>
		    		</div>

		    		<div class="path" title="original long path"> 
		    			<label><span>Drive 1 ></span> <span>Folder 2 ></span> <span>Folder 3></span> <span>Folder 5></span>   <span>Folder 6></span> </label>
		    		</div>

		    		<div class="card--file_header__cont change_file_view" >
		    			<svg><use xlink:href="css/svg.svg#list"></use></svg>
		    		</div>	

		    		<div class="card--file_header__cont">
		    			<svg><use xlink:href="css/svg.svg#folder"></use></svg>
		    			<label>Create folder</label>
		    		</div>

		    		<div class="card--file_header__cont">
		    			<svg><use xlink:href="css/svg.svg#upload"></use></svg>
		    			<label>Upload</label>		    		
		    		</div>
	    				    				    		
		    	</div><!---card--file_header--> 

	
	
				<div class="file_cont file_selected">
					<div class="file_cont--img" style=" background: url(css/photo/david.jpg);" > </div>
					  
					<div class="file_cont--des" >
						<svg><use xlink:href="css/svg.svg#doc"></use></svg>
						<label>XXXXXXXX.doc</label>
					</div> 

					<div class="file_cont--check">
						<svg><use xlink:href="css/svg.svg#check-round"></use></svg>
					</div>

				</div><!---file_cont-->  	

				<div class="file_cont">
					<div class="file_cont--img" > </div>
					  
					<div class="file_cont--des" >
						<svg><use xlink:href="css/svg.svg#doc"></use></svg>
						<label>doc345.doc</label>
					</div> 

					<div class="file_cont--check">
						<svg><use xlink:href="css/svg.svg#check-round"></use></svg></div>

				</div>   	

				<div class="file_cont">
					<div class="file_cont--img" > </div>
					  
					<div class="file_cont--des" >
						<svg><use xlink:href="css/svg.svg#doc"></use></svg>
						<label>doc345.doc</label>
					</div> 

					<div class="file_cont--check">
						<svg><use xlink:href="css/svg.svg#check-round"></use></svg></div>

				</div>   	

				<div class="file_cont">
					<div class="file_cont--img" > </div>
					  
					<div class="file_cont--des" >
						<svg><use xlink:href="css/svg.svg#doc"></use></svg>
						<label>doc345.doc</label>
					</div> 

					<div class="file_cont--check">
						<svg><use xlink:href="css/svg.svg#check-round"></use></svg></div>

				</div>   	

				<div class="file_cont">
					<div class="file_cont--img" > </div>
					  
					<div class="file_cont--des" >
						<svg><use xlink:href="css/svg.svg#doc"></use></svg>
						<label>doc345.doc</label>
					</div> 

					<div class="file_cont--check">
						<svg><use xlink:href="css/svg.svg#check-round"></use></svg></div>

				</div>   	



			</div><!-- END CARD-->	<!-- END CARD-->	
  


		</div> <!---fullcont__body-->


	</div>	

	<!--TEST FILES -->
	<!--TEST FILES -->
	<!--TEST FILES -->
	<!--TEST FILES -->
	<!--TEST FILES -->
	<!--TEST FILES -->
	<!--TEST FILES -->
	<!--TEST FILES -->


	

*/
/*************************LIST VIEW*/
.file-list-view {
  /*body*/ }
  .file-list-view .body {
    /*file_cont*/ }
    .file-list-view .body .cont {
      height: 48px;
      margin-left: 8px;
      float: left;
      background-color: #E6E6E6 !important;
      transition: all 0.15s;
      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
      /*&--check*/ }
      .file-list-view .body .cont > .img {
        display: none; }
      .file-list-view .body .cont .des {
        top: 0px;
        height: 48px;
        margin-left: 32px;
        width: calc(100% - 32px);
        overflow: hidden; }
        .file-list-view .body .cont .des label {
          width: calc(100% - 24px); }
      .file-list-view .body .cont .check {
        top: 8px;
        left: 2px; }

/*file_selected*/
/*************************FILE SELECTING*/
.file-selecting {
  /*file_cont*/ }
  .file-selecting .body .cont .check {
    border: 2px solid #0280EE;
    opacity: 1; }
  .file-selecting .primary {
    display: none; }
  .file-selecting .second {
    display: inline-block; }

/*file-selecting*/
.cont-folder .img {
  background: url(./svg/file/folder.svg) !important;
  background-size: 100% auto   !important;
  background-position: center;
  background-repeat: no-repeat !important; }

.cont-folder .des .img {
  background: url(./svg/file/folder.svg) !important;
  background-size: 100% auto   !important;
  background-position: center;
  background-repeat: no-repeat !important; }

/*cont-checked*/
.cont-folder-empty .img {
  background: url(./svg/file/folder-empty.svg) !important;
  background-size: 100% auto   !important;
  background-position: center;
  background-repeat: no-repeat !important; }

.cont-folder-empty .des .img {
  background: url(./svg/file/folder-empty.svg) !important;
  background-size: 100% auto   !important;
  background-position: center;
  background-repeat: no-repeat !important; }

/*cont-checked*/
.cont-doc .img {
  background: url(./svg/file/doc.svg) !important;
  background-size: 100% auto   !important;
  background-position: center;
  background-repeat: no-repeat !important; }

.cont-doc .des .img {
  background: url(./svg/file/doc.svg) !important;
  background-size: 100% auto   !important;
  background-position: center;
  background-repeat: no-repeat !important; }

/*cont-checked*/
.cont-exel .img {
  background: url(./svg/file/exel.svg) !important;
  background-size: 100% auto   !important;
  background-position: center;
  background-repeat: no-repeat !important; }

.cont-exel .des .img {
  background: url(./svg/file/exel.svg) !important;
  background-size: 100% auto   !important;
  background-position: center;
  background-repeat: no-repeat !important; }

/*cont-checked*/
.cont-img .img {
  background: url(./svg/file/img.svg) !important;
  background-size: 100% auto   !important;
  background-position: center;
  background-repeat: no-repeat !important; }

.cont-img .des .img {
  background: url(./svg/file/img.svg) !important;
  background-size: 100% auto   !important;
  background-position: center;
  background-repeat: no-repeat !important; }

/*cont-checked*/
.cont-unknow .img {
  background: url(./svg/file/unknow.svg) !important;
  background-size: 100% auto   !important;
  background-position: center;
  background-repeat: no-repeat !important; }

.cont-unknow .des .img {
  background: url(./svg/file/unknow.svg) !important;
  background-size: 100% auto   !important;
  background-position: center;
  background-repeat: no-repeat !important; }

/*cont-checked*/
.cont-pdf .img {
  background: url(./svg/file/pdf.svg) !important;
  background-size: 100% auto   !important;
  background-position: center;
  background-repeat: no-repeat !important; }

.cont-pdf .des .img {
  background: url(./svg/file/pdf.svg) !important;
  background-size: 100% auto   !important;
  background-position: center;
  background-repeat: no-repeat !important; }

/*cont-checked*/
.file {
  /*header*/ }
  .file .header {
    /*desktop*/ }
    @media (max-width: 37.5em) {
      .file .header {
        /*path*/
        /*__icon*/ }
        .file .header .path {
          width: calc(100% - 240px);
          /*& span*/ }
          .file .header .path label {
            padding-right: 8px; }
            .file .header .path label::before {
              display: none; }
        .file .header .icon {
          /*svg*/
          /*label*/ }
          .file .header .icon label {
            display: none; } }
  @media (max-width: 37.5em) {
    .file .body .cont {
      margin: 2px;
      width: calc(50% - 4px); } }

/*file*/
.file-full {
  position: fixed;
  display: block;
  width: 100%;
  height: 100vh;
  bottom: -100vh;
  right: 50%;
  transform: translateX(50%);
  max-width: 900px;
  width: calc(100% - 210px);
  z-index: 80;
  background-color: rgba(0, 0, 0, 0.8);
  /*b*/ }
  .file-full-show {
    top: 0px;
    opacity: 1; }
  .file-full .body {
    display: inline;
    width: calc(100% - 0px);
    height: calc(100vh - 56px);
    min-height: 200px;
    float: left;
    margin-top: 56px;
    user-select: none;
    /*table*/
    /*arrow*/ }
    @media (max-width: 56.25em) {
      .file-full .body {
        width: 100%; } }
    .file-full .body span {
      position: absolute;
      width: calc(100% - 256px);
      left: 256px;
      right: 0px;
      background-color: red;
      font-size: 16px;
      font-weight: 400;
      color: white; }
    .file-full .body iframe {
      width: 100%;
      height: 100%;
      border: none;
      background-size: cover !important;
      background-position: center !important;
      background-repeat: no-repeat !important; }
    .file-full .body .arrow {
      position: absolute;
      top: 45%;
      left: 16px;
      height: 48px !important;
      width: 48px;
      border-radius: 50%;
      padding: 8px;
      cursor: pointer;
      background-image: url("./svg/left-white.svg");
      background-color: #000;
      background-size: cover !important;
      background-position: center !important;
      background-repeat: no-repeat !important;
      fill: #ffffff !important;
      -webkit-backface-visibility: hidden;
      box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
      /*table*/
      transition: all 0.15s;
      transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
      @media (max-width: 56.25em) {
        .file-full .body .arrow {
          left: 0px; } }
      .file-full .body .arrow use {
        border: 1px solid red; }
      .file-full .body .arrow:hover {
        background-color: #0280EE;
        box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); }
      .file-full .body .arrow:active {
        box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
        transform: scale(0.9); }
      .file-full .body .arrow-right {
        right: 16px;
        left: auto;
        background-image: url("./svg/right-white.svg"); }

/*HTML




<!--file_screen-->
<!--file_screen-->
<!--file_screen-->
<!--file_screen-->
<!--file_screen-->

<div class="file_screen file_screen__showx"  id="files_preview_div">  
  <!---HEAD-->
  <!---HEAD-->
  <!---HEAD-->
  <!---HEAD-->
<div class="appbar appbar__secondary">
  <div class="appbar__cont-principal" style="background-color: black;"> 
    <div class="appbar__icon fl  fullcont--hide" >
      <svg><use xlink:href="css/svg.svg#back"></use></svg>
    </div>

    <h6 class="appbar__title appbar__title--light">name_file.crc</h6>

    <div class="appbar__icon  appbar__icon--2">
      <svg><use xlink:href="css/svg.svg#delete"></use></svg>
    </div>

    <div class="appbar__icon appbar__icon--2" >
      <svg><use xlink:href="css/svg.svg#download"></use></svg>
    </div>

    <div class="appbar__icon appbar__icon--2" >
      <svg><use xlink:href="css/svg.svg#edit"></use></svg>
    </div>

    <div class="appbar__icon appbar__icon--3" onclick="show__menu('preview_options')">
      <svg><use xlink:href="css/svg.svg#more"></use></svg>
    </div>

  </div><!---appbar__cont-principal-->
</div> <!---appbar__secondary-->



<div class="file_screen--a" id="files_preview_mini_cont">
  <img class="file_screen--a_selected">
  <img >


</div>

<div class="file_screen--b" >


  <iframe class="loaded_file_elements img_change"  data-centered="0" id="files_preview_frame" ></iframe>

  <!---arrows-->
  <!---arrows-->
  <!---arrows-->
  <svg class="file_screen--b--arrow full_preview_move loaded_file_elements"   data-direction="-1">
    <use xlink:href="css/svg.svg#left"></use></svg>
  <svg class="file_screen--b--arrow file_screen--b--arrow_right full_preview_move loaded_file_elements" data-direction="1"  >
    <use xlink:href="css/svg.svg#right"></use></svg>



</div>


</div><!--file_screen-->  

<!--file_screen-->
<!--file_screen-->
<!--file_screen-->
<!--file_screen-->
<!--file_screen-->




*/
.file-full-show {
  animation: fullcont-show  0.300s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }

@keyframes file-full-show {
  from {
    top: 100vh; }
  to {
    top: 0vh; } }

.file-full-hide {
  animation: file-full-hide  0.250s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }

@keyframes file-full-hide {
  from {
    top: 0vh; }
  to {
    top: 100vh; } }

#b {
  position: relative;
  top: 40px;
  background-color: white;
  width: 95%;
  height: 150px;
  border: 2px dashed #0078D4;
  border-radius: 20px; }
  #b .infoContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 53px 271px; }
    #b .infoContainer .imgContainer {
      width: 300px;
      height: 60px;
      display: flex;
      justify-content: center; }
      #b .infoContainer .imgContainer .img {
        width: 100%;
        display: flex;
        justify-content: center; }
    #b .infoContainer .textContainer {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 6px;
      text-align: center;
      text-transform: uppercase; }
      #b .infoContainer .textContainer label {
        font-size: 16px;
        font-weight: 500; }
        #b .infoContainer .textContainer label span {
          color: #0078D4;
          text-transform: lowercase;
          font-size: 12px; }

.dropIn {
  background-color: #0078d438 !important; }

.map {
  position: relative;
  display: inline-block;
  width: 100%;
  /**/ }
  .map .title {
    display: block;
    color: #000;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1px; }
  .map .des {
    display: block;
    color: #000;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.25px; }
    .map .des span {
      opacity: 0.54;
      color: #B00020; }
  .map .des-nogeo {
    display: none;
    color: #B00020;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0.5px; }
    .map .des-nogeo a {
      padding-left: 16px;
      padding-right: 16px;
      cursor: pointer;
      color: #0280EE;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 1.25px;
      text-transform: uppercase;
      cursor: pointer;
      overflow: hidden; }
      .map .des-nogeo a:hover {
        background-color: whitesmoke; }
      .map .des-nogeo a:focus {
        background-color: whitesmoke; }
      .map .des-nogeo a:active {
        background-color: #ebebeb; }
      @media (max-width: 56.25em) {
        .map .des-nogeo a:hover {
          background-color: #ffffff; }
        .map .des-nogeo a:focus {
          background-color: #ffffff; }
        .map .des-nogeo a:active {
          background-color: #ffffff; } }
      .map .des-nogeo a .ripple {
        background-color: #cde7fe; }
  .map .body {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 200px; }
    .map .body iframe {
      position: absolute;
      display: inline-block;
      width: 100%;
      height: 100%; }
    .map .body .cor {
      position: absolute;
      bottom: -20px;
      right: 0px; }
  .map .legend {
    position: relative;
    display: inline-block;
    width: 100%; }
    .map .legend div {
      position: relative;
      display: inline;
      min-height: 24px;
      padding-left: 16px;
      padding-right: 8px;
      color: #000;
      font-size: 12px;
      font-weight: normal;
      letter-spacing: 0.4px; }
      .map .legend div span {
        position: absolute;
        display: inline-block;
        left: 0px;
        top: 0px;
        width: 12px;
        height: 12px; }
    .map .legend .blue span {
      background: #26A0FC; }
    .map .legend .purple span {
      background: #8973d6; }
    .map .legend .green span {
      background: #26e7a6; }
    .map .legend .yellow span {
      background: #FFD200; }
    .map .legend .orange span {
      background: #f86624; }
    .map .legend .red span {
      background: #ED241A; }
    .map .legend .lg span {
      background: #B7C2CC; }

/*location*/
.map-nogeo {
  background: url(svg/map/no-location.svg) no-repeat;
  background-size: 100% 100%;
  background-position: center;
  border: 0.1px solid #0000001e; }
  .map-nogeo .des {
    display: none; }
  .map-nogeo .des-nogeo {
    display: block; }
  .map-nogeo .body {
    visibility: hidden; }

/*map*/
.map-error {
  padding: 8px;
  background: url(svg/map/no-location.svg) no-repeat;
  background-size: 100% 100%;
  background-position: center;
  border: 0.1px solid #0000001e;
  border: 2px solid #B00020; }
  .map-error .des {
    display: none; }
  .map-error .des-nogeo {
    display: block; }
  .map-error .body {
    visibility: hidden; }

/*map*/
.map-nointernet {
  background: url(svg/map/no-internet.svg) no-repeat;
  background-size: 100% 100%;
  background-position: center;
  border: 0.1px solid #0000001e; }
  .map-nointernet .des {
    display: none; }
  .map-nointernet .des-nogeo {
    display: block; }
  .map-nointernet .body {
    visibility: hidden; }

/*map*/
.map-nolocation {
  background: url(svg/map/no-location-toShow.svg) no-repeat;
  background-size: 100% 100%;
  background-position: center;
  border: 0.1px solid #0000001e; }
  .map-nolocation .title {
    display: none; }
  .map-nolocation .des {
    display: none; }
  .map-nolocation .des-nogeo {
    display: none; }
  .map-nolocation .legend {
    display: none; }
  .map-nolocation .body {
    visibility: hidden; }

/*map*/
#confirmation-map {
  /**/ }
  #confirmation-map > .img {
    position: relative;
    display: inline-block;
    height: 230px;
    width: 100%;
    margin-top: 16px;
    background: url(gif/ios-desktop.gif) no-repeat;
    background-size: 100% auto;
    background-position: center;
    border: 1px solid #0000001e; }

/*location*/
.signature {
  position: fixed;
  display: inline-block;
  width: calc(100vw - 32px);
  height: calc(100vh - 32px);
  max-width: 500px;
  overflow: hidden;
  margin-top: 16px;
  padding: 8px;
  bottom: -100vh;
  background-color: #ffffff;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
  left: 0%;
  margin-left: 50%;
  transform: translateX(-50%);
  z-index: 210;
  overflow-y: scroll; }
  .signature .close {
    position: relative;
    display: inline-block;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    overflow: hidden; }
    .signature .close:hover {
      background-color: gainsboro; }
    .signature .close:focus {
      background-color: #d2d2d2; }
    .signature .close:active {
      background-color: #d2d2d2; }
    @media (max-width: 56.25em) {
      .signature .close:hover {
        background-color: #E6E6E6; }
      .signature .close:focus {
        background-color: #E6E6E6; }
      .signature .close:active {
        background-color: #E6E6E6; } }
    .signature .close .ripple {
      background-color: #ffffff; }
    .signature .close svg {
      height: 24px;
      width: 24px;
      fill: #000;
      user-select: none;
      pointer-events: none; }
  .signature .cont {
    position: relative;
    display: inline-block;
    margin-top: 8px;
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 50%;
    transform: translateX(-50%);
    background-color: #f0f0f0;
    background-image: url("./svg/gesture.svg");
    background-repeat: no-repeat;
    background-size: auto; }
  .signature .title {
    display: block;
    margin-left: 0px;
    margin-top: 12px;
    margin-bottom: 4px;
    color: #000;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1.5px; }
  .signature .des {
    display: block;
    margin-left: 0px;
    color: #000;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.25px; }

.signature-line {
  position: relative;
  display: inline-block;
  width: 100%;
  border: 1px solid #0000001e; }
  .signature-line canvas {
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: calc(100% - 8px);
    max-width: 500px;
    height: 165px;
    left: 0%;
    margin-left: 50%;
    transform: translateX(-50%);
    border: 1px solid #0000001e; }
  .signature-line label {
    position: absolute;
    display: inline-block;
    width: calc(100% - 8px);
    height: 167px;
    top: 0px;
    left: 0px;
    padding-top: 12px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.08);
    background-image: url("./svg/touch.svg");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
    text-align: center;
    z-index: 500;
    user-select: none;
    left: 0%;
    margin-left: 50%;
    transform: translateX(-50%);
    color: #9DA7B1;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1px; }
  .signature-line span {
    position: absolute;
    display: inline-block;
    top: 8px;
    left: 0px;
    visibility: hidden;
    text-align: center;
    z-index: 500;
    user-select: none;
    left: 0%;
    margin-left: 50%;
    transform: translateX(-50%);
    color: #9DA7B1;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1px; }

.signatureOnLine-error {
  border: 3px solid #B00020; }
  .signatureOnLine-error label {
    color: #B00020;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1px; }

.signatureOnLine-view label {
  background-color: transparent;
  background-image: url("./svg/view.svg");
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center; }

.signature-show {
  animation: signature-show  0.250s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }

@keyframes signature-show {
  from {
    top: 100vh; }
  to {
    top: 0vh; } }

.signature-hide {
  animation: signature-hide  0.100s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }

@keyframes signature-hide {
  from {
    top: 0vh; }
  to {
    top: 100vh; } }

.illustration-top {
  position: relative;
  display: inline-block;
  width: 100%;
  height: auto; }
  .illustration-top img {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 250px;
    height: auto;
    left: 0%;
    margin-left: 50%;
    transform: translateX(-50%); }

/*illu-top*/
.illustration-bottom {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 224px; }

/*illu-top*/
.illustration-onboard {
  position: relative;
  display: inline-block;
  width: 100%;
  min-height: 230px; }
  .illustration-onboard img {
    position: relative;
    display: inline-block;
    height: 50%;
    width: 100%; }

/*illu-top*/
.chartjs {
  position: relative;
  display: inline-block;
  width: 100% !important; }

.chartjs-canvas-200square {
  position: relative;
  display: inline-block;
  max-width: 200px;
  max-height: 200px;
  left: 50%;
  transform: translateX(-50%); }

.chart-title {
  position: relative;
  display: inline-block;
  width: calc(100% - 16px);
  max-width: 900px;
  left: 50%;
  margin-top: 8px;
  margin-bottom: 2px;
  transform: translateX(-50%);
  color: #071c4d;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1px;
  opacity: 0.36; }
  .chart-title-top {
    margin-top: 52px;
    margin-bottom: 8px; }

.card-chart {
  position: relative;
  display: inline-block;
  width: calc(100% - 16px);
  max-width: 900px;
  padding: 8px;
  margin: auto;
  background-color: #ffffff;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  border: 0.5px solid #0000001e; }
  .card-chart::after {
    content: "";
    display: table;
    clear: both; }

.report-appbar {
  position: relative;
  display: inline-block;
  width: calc(100% - 0px);
  left: 0px;
  height: 48px;
  top: 0px;
  box-shadow: 0px 0px 0px 0px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.117647);
  z-index: 10;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1, 1);
  /*div*/ }
  .report-appbar > h1 {
    position: relative;
    float: left;
    margin-right: auto;
    color: #071c4d;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.15px;
    user-select: none;
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
    margin-top: 10px;
    margin-left: 8px;
    letter-spacing: 1.5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; }
  .report-appbar > div {
    position: relative;
    float: left;
    height: 48px;
    min-width: 48px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1); }
    .report-appbar > div svg {
      height: 24px;
      width: 24px;
      fill: #071c4d;
      transform: rotate(0deg);
      transition: all 0.5s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      user-select: none;
      pointer-events: none;
      -webkit-backface-visibility: hidden;
      -webkit-transform: translateZ(0) scale(1, 1); }

.report-appbar-blue {
  background: #36A2EB;
  /*div*/ }
  .report-appbar-blue > h1 {
    color: #ffffff;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.15px; }
  .report-appbar-blue > div {
    cursor: pointer;
    overflow: hidden; }
    .report-appbar-blue > div:hover {
      background-color: #2399e9 !important; }
    .report-appbar-blue > div:focus {
      background-color: #1690e2 !important; }
    .report-appbar-blue > div:active {
      background-color: #1690e2 !important; }
    @media (max-width: 56.25em) {
      .report-appbar-blue > div:hover {
        background-color: #36A2EB !important; }
      .report-appbar-blue > div:focus {
        background-color: #36A2EB !important; }
      .report-appbar-blue > div:active {
        background-color: #36A2EB !important; } }
    .report-appbar-blue > div .ripple {
      background-color: #ffffff !important; }
    .report-appbar-blue > div svg {
      fill: #ffffff; }
    .report-appbar-blue > div label {
      color: #ffffff;
      font-size: 12px;
      font-weight: normal;
      letter-spacing: 0.4px;
      opacity: 0.99; }

.report-appbar-black {
  background: #000;
  /*div*/ }
  .report-appbar-black > h1 {
    color: #ffffff;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.15px; }
  .report-appbar-black > div {
    cursor: pointer;
    overflow: hidden; }
    .report-appbar-black > div:hover {
      background-color: black !important; }
    .report-appbar-black > div:focus {
      background-color: black !important; }
    .report-appbar-black > div:active {
      background-color: black !important; }
    @media (max-width: 56.25em) {
      .report-appbar-black > div:hover {
        background-color: #000 !important; }
      .report-appbar-black > div:focus {
        background-color: #000 !important; }
      .report-appbar-black > div:active {
        background-color: #000 !important; } }
    .report-appbar-black > div .ripple {
      background-color: #ffffff !important; }
    .report-appbar-black > div svg {
      fill: #ffffff; }
    .report-appbar-black > div label {
      color: #ffffff;
      font-size: 12px;
      font-weight: normal;
      letter-spacing: 0.4px;
      opacity: 0.99; }

.report-page {
  position: absolute;
  display: inline-block;
  top: 0px;
  left: 0px;
  background: #ffffff;
  min-height: calc(100% - 00px); }

.tdClick {
  cursor: pointer;
  overflow: hidden;
  color: #0280EE !important;
  text-align: left;
  font-weight: 700;
  border: 1px solid #B00020; }
  .tdClick:hover {
    background-color: whitesmoke; }
  .tdClick:focus {
    background-color: whitesmoke; }
  .tdClick:active {
    background-color: #ebebeb; }
  @media (max-width: 56.25em) {
    .tdClick:hover {
      background-color: #ffffff; }
    .tdClick:focus {
      background-color: #ffffff; }
    .tdClick:active {
      background-color: #ffffff; } }
  .tdClick .ripple {
    background-color: #cde7fe; }
  .tdClick > p {
    user-select: none; }

.clock {
  display: block;
  margin-top: 16px;
  margin-bottom: 16px;
  text-align: center;
  color: #000;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: 1.5px; }

.range {
  position: relative;
  display: inline-block;
  margin-top: 8px;
  width: calc(100% - 32px);
  height: 62px;
  /*bar*/
  /*bar*/ }
  .range .bar {
    position: absolute;
    display: inline-block;
    bottom: 32px;
    height: 3px;
    width: 100%;
    background-color: #0000001e; }
    .range .bar ol li {
      position: absolute;
      display: inline-block;
      bottom: 2px;
      height: 16px;
      width: 2px;
      background-color: #0000001e; }
    .range .bar ol li:nth-child(1) {
      left: 25%; }
    .range .bar ol li:nth-child(2) {
      left: 50%;
      height: 24px; }
    .range .bar ol li:nth-child(3) {
      left: 75%; }
  .range .bar-active {
    position: absolute;
    display: inline-block;
    bottom: 32px;
    height: 6px;
    width: 100%;
    border-radius: 0px;
    width: 50%;
    left: 25%;
    background-color: #0280EE; }
  .range [class^="circle"] {
    position: absolute;
    display: inline-block;
    bottom: 24px;
    height: 20px;
    width: 20px;
    left: 25%;
    border-radius: 50%;
    background-color: #0280EE;
    transform: translateX(-50%); }
    .range [class^="circle"] label {
      position: absolute;
      display: inline-block;
      top: 24px;
      line-height: 1;
      white-space: nowrap;
      font-weight: 500; }
  .range .circle-a label {
    top: -16px; }

.monitor {
  position: relative;
  display: block;
  width: 100%;
  max-width: 1300px;
  margin-left: 50%;
  transform: translateX(-50%);
  border: 2px solid #0000001e;
  /**************************************/
  /*bar*/
  /*div*/ }
  .monitor .bar {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 56px;
    padding-left: 16px;
    background-color: #ffffff;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); }
    .monitor .bar > label {
      position: relative;
      float: left;
      margin-right: auto;
      margin-left: 0px;
      color: #000;
      font-size: 20px;
      font-weight: 500;
      letter-spacing: 0.15px;
      user-select: none;
      pointer-events: none; }
  .monitor .unit {
    position: relative;
    float: right;
    height: 48px;
    width: 150px;
    padding-left: 8px;
    padding-right: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*icon*/
    /*labell*/ }
    .monitor .unit::before {
      position: absolute;
      content: '';
      bottom: 0px;
      left: 0px;
      width: 100%;
      height: 4px;
      transform: scaleX(0);
      transform-origin: center;
      background-color: #0280EE;
      opacity: 0.36; }
    .monitor .unit .icon {
      position: relative;
      float: right;
      height: 48px;
      width: 48px;
      -webkit-backface-visibility: hidden;
      -webkit-transform: translateZ(0) scale(1, 1);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      user-select: none;
      pointer-events: none; }
      .monitor .unit .icon svg {
        height: 24px;
        width: 24px;
        fill: #000;
        opacity: 0.54;
        transform: rotate(0deg);
        user-select: none;
        pointer-events: none; }
      .monitor .unit .icon span {
        position: absolute;
        display: inline-block;
        top: -2px;
        left: -12px;
        width: 24px;
        height: 24px;
        padding: 4px;
        border-radius: 50%;
        user-select: none;
        pointer-events: none;
        color: #ffffff;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.4px;
        background-color: #000;
        text-align: center;
        font-weight: 500;
        border: 1px solid #ffffff; }
    .monitor .unit > label {
      position: relative;
      float: left;
      margin-right: auto;
      min-width: 48px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #000;
      font-size: 12px;
      font-weight: normal;
      letter-spacing: 0.4px;
      user-select: none;
      pointer-events: none; }

/*monitor*/
.monitor {
  /*bar*/ }
  .monitor .page {
    border-left: 1px solid #0000001e;
    border-right: 1px solid #0000001e;
    border-bottom: 1px solid #0000001e;
    overflow-y: hidden; }
  .monitor .line {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 48px;
    padding-left: 16px;
    margin-bottom: 4px;
    background: #ffffff;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between; }
    .monitor .line:hover {
      background-color: whitesmoke; }
    .monitor .line:focus {
      background-color: whitesmoke; }
    .monitor .line:active {
      background-color: #ebebeb; }
    @media (max-width: 56.25em) {
      .monitor .line:hover {
        background-color: #ffffff; }
      .monitor .line:focus {
        background-color: #ffffff; }
      .monitor .line:active {
        background-color: #ffffff; } }
    .monitor .line .ripple {
      background-color: #cde7fe; }
    .monitor .line > label {
      position: relative;
      float: left;
      margin-right: auto;
      margin-left: 32px;
      color: #000;
      font-size: 16px;
      font-weight: normal;
      letter-spacing: 0.5px;
      user-select: none;
      pointer-events: none;
      opacity: 1; }
    .monitor .line .line-avatar {
      position: relative;
      display: inline-block;
      float: left;
      height: 36px;
      min-width: 36px;
      padding: 4px;
      border-radius: 50%;
      cursor: pointer;
      background-image: url("./img/pic/person.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-color: #071c4d; }
      .monitor .line .line-avatar:hover {
        box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }
      .monitor .line .line-avatar:active {
        transform: scale(0.95); }
      .monitor .line .line-avatar .status {
        position: absolute;
        display: inline-block;
        bottom: 0px;
        right: -8px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        opacity: 1;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 71%;
        border: 2px solid #ffffff;
        background: #B7C2CC; }

/*monitor*/
.line-avatar-up .line-avatar .status {
  background: #26e7a6 !important; }

.monitor {
  /*bar*/
  /*bar*/ }
  .monitor .bar .blue > div > svg {
    fill: #0376ce;
    opacity: 1; }
  .monitor .bar .green > div > svg {
    fill: #13a976;
    opacity: 1; }
  .monitor .bar .purple > div > svg {
    fill: #5638bf;
    opacity: 1; }
  .monitor .body .unit {
    background-color: transparent; }
    .monitor .body .unit:hover {
      background-color: transparent; }
    .monitor .body .unit:focus {
      background-color: transparent; }
    .monitor .body .unit:active {
      background-color: transparent; }
    @media (max-width: 56.25em) {
      .monitor .body .unit:hover {
        background-color: transparent; }
      .monitor .body .unit:focus {
        background-color: transparent; }
      .monitor .body .unit:active {
        background-color: transparent; } }
  .monitor .select::before {
    transform: scaleX(1); }
  .monitor .select:hover::before {
    opacity: 1; }
  .monitor .unit-200 {
    /*labell*/ }
    .monitor .unit-200 > label {
      width: 200px; }
  .monitor .unit-100 {
    /*labell*/ }
    .monitor .unit-100 > label {
      width: 100px; }
  .monitor .unit-active {
    /*labell*/ }
    .monitor .unit-active .icon svg {
      fill: #26e7a6;
      opacity: 1;
      transform: scale(1.1); }
  .monitor .unit-icon {
    padding-left: 0px;
    padding-right: 0px; }
    .monitor .unit-icon > svg {
      fill: #0280EE;
      opacity: 1; }
  .monitor .unit-click {
    cursor: pointer; }
    .monitor .unit-click:hover {
      background-color: whitesmoke; }
    .monitor .unit-click:focus {
      background-color: whitesmoke; }
    .monitor .unit-click:active {
      background-color: #ebebeb; }
    @media (max-width: 56.25em) {
      .monitor .unit-click:hover {
        background-color: #ffffff; }
      .monitor .unit-click:focus {
        background-color: #ffffff; }
      .monitor .unit-click:active {
        background-color: #ffffff; } }
    .monitor .unit-click:hover::before {
      transform: scaleX(1);
      opacity: 0.54; }
    .monitor .unit-click:active::before {
      transform: scaleX(1);
      opacity: 0.87; }

/*monitor*/
/*


            &-green  {background-color: $cs-green;  }
            &-blue   {background-color: $cs-blue;   }
            &-purple {background-color: $cs-purple; }
            &-red    {background-color: $cs-red;    }


       background-color: $c-w;


*/
.no-scroll {
  overflow-y: hidden !important; }

.bs-4 {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); }

.mt-4 {
  margin-top: 4px  !important; }

.mt-8 {
  margin-top: 8px  !important; }

.mt-16 {
  margin-top: 16px !important; }

.mt-24 {
  margin-top: 24px !important; }

.mt-28 {
  margin-top: 28px !important; }

.mt-32 {
  margin-top: 32px !important; }

.mt-50 {
  margin-top: 50px !important; }

.mt-64 {
  margin-top: 68px !important; }

.ml-8 {
  margin-left: 8px !important; }

.ml-16 {
  margin-left: 16px !important; }

.ml-32 {
  margin-left: 32px !important; }

.ml-64 {
  margin-left: 66px !important; }

.m0 {
  margin: 0px !important; }

.mb-8 {
  margin-bottom: 8px !important; }

.mb-16 {
  margin-bottom: 16px !important; }

.mb-32 {
  margin-bottom: 32px !important; }

.mb-25vh {
  margin-bottom: 25vh !important; }

.mh-92 {
  min-height: 92px; }

.mh-112 {
  min-height: 112px; }

.mh-124 {
  min-height: 124px; }

.mh-160 {
  min-height: 160px; }

.pl-32 {
  padding-left: 32px !important; }

.pl-28 {
  padding-left: 28px !important; }

.pl-8 {
  padding-left: 8px !important; }

.pr-8 {
  padding-right: 8px !important; }

.p-8 {
  padding: 8px !important; }

.p-16 {
  padding: 16px !important; }

.pt-16 {
  padding-top: 16px !important; }

.pt-32 {
  padding-top: 32px !important; }

.h-100 {
  height: 100% !important; }

.noShadown {
  box-shadow: none !important; }

.op54 {
  opacity: 0.54; }

.op87 {
  opacity: 0.87; }

.w-100 {
  position: relative;
  display: inline-block;
  width: 100%;
  border: 1px solid #B00020; }

.fr {
  float: right !important; }

.dn {
  display: none !important; }

.o54 {
  opacity: 0.54 !important; }

.o87 {
  opacity: 0.87 !important; }

.c-error {
  color: #B00020 !important; }

.bgc-blue {
  background-color: #26A0FC; }

.bgc-purple {
  background-color: #8973d6; }

.bgc-green {
  background-color: #26e7a6; }

.bgc-yellow {
  background-color: #FFD200; }

.bgc-orange {
  background-color: #f86624; }

.bgc-red {
  background-color: #ED241A; }

.bgc-gray {
  background-color: #9DA7B1; }

.bgc-black {
  background-color: #000; }

.fill-green {
  fill: #21783f !important; }

.bc-red {
  border: 1px solid #B00020; }

.bc-gray {
  border: 1px solid #0000001e; }

.ta-c {
  text-align: center !important; }

.ta-l {
  text-align: left !important; }

.tc-error {
  color: #B00020 !important; }

.tc-errorDark {
  color: #CF6679 !important; }

.divCenter {
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%); }

.darkTheme {
  background-color: #121212;
  /*backdrop*/
  /*error*/
  /*complete*/
  /*caution*/
  /*stepper*/
  /*stepper*/
  /*dt*/
  /*dt*/ }
  .darkTheme .primary {
    background-color: #323232;
    border-bottom: none; }
    .darkTheme .primary > h1 {
      color: #ffffff;
      opacity: 0.87; }
    .darkTheme .primary > div {
      cursor: pointer;
      overflow: hidden; }
      .darkTheme .primary > div > svg {
        fill: #ffffff;
        opacity: 0.87; }
      .darkTheme .primary > div > label {
        color: #ffffff;
        opacity: 0.87; }
      .darkTheme .primary > div:hover {
        background-color: #1e1e1e !important; }
      .darkTheme .primary > div:focus {
        background-color: #1e1e1e; }
      .darkTheme .primary > div:active {
        background-color: #1e1e1e; }
      @media (max-width: 56.25em) {
        .darkTheme .primary > div:hover {
          background-color: #323232; }
        .darkTheme .primary > div:focus {
          background-color: #323232; }
        .darkTheme .primary > div:active {
          background-color: #323232; } }
      .darkTheme .primary > div .ripple {
        background-color: #ffffff; }
    .darkTheme .primary .select {
      color: #cde7fe; }
      .darkTheme .primary .select > label {
        color: #cde7fe;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.4px;
        opacity: 0.99;
        font-weight: 500; }
      .darkTheme .primary .select::before {
        background-color: #cde7fe; }
  .darkTheme .leftnav {
    display: inline-block;
    position: fixed;
    width: 136px;
    height: calc(100vh - 48px);
    left: 0px;
    top: 48px;
    background: #222222;
    z-index: 1;
    padding-top: 76px;
    padding-left: 4px;
    border-right: 1px solid rgba(0, 0, 0, 0.117647);
    /*cont*/
    /*cont*/ }
    .darkTheme .leftnav > .cont {
      position: relative;
      display: block;
      float: left;
      height: 48px;
      width: calc(100% - 8px);
      margin: 0px;
      cursor: pointer;
      padding-left: 4px;
      border-radius: 4px;
      margin-left: 2px;
      display: flex;
      justify-content: left;
      align-items: center;
      cursor: pointer;
      overflow: hidden; }
      .darkTheme .leftnav > .cont:hover {
        background-color: gainsboro; }
      .darkTheme .leftnav > .cont:focus {
        background-color: #d2d2d2; }
      .darkTheme .leftnav > .cont:active {
        background-color: #d2d2d2; }
      @media (max-width: 56.25em) {
        .darkTheme .leftnav > .cont:hover {
          background-color: #E6E6E6; }
        .darkTheme .leftnav > .cont:focus {
          background-color: #E6E6E6; }
        .darkTheme .leftnav > .cont:active {
          background-color: #E6E6E6; } }
      .darkTheme .leftnav > .cont .ripple {
        background-color: #ffffff; }
      .darkTheme .leftnav > .cont svg {
        height: 28px;
        width: 28px;
        z-index: 2;
        opacity: 1;
        user-select: none;
        pointer-events: none;
        -webkit-backface-visibility: hidden;
        -webkit-transform: translateZ(0) scale(1, 1);
        fill: #ffffffde; }
      .darkTheme .leftnav > .cont label {
        margin: 0px;
        margin-left: 4px;
        z-index: 2;
        user-select: none;
        pointer-events: none;
        -webkit-backface-visibility: hidden;
        -webkit-transform: translateZ(0) scale(1, 1);
        color: #ffffffde;
        font-size: 14px;
        font-weight: normal;
        letter-spacing: 0.25px;
        text-align: center;
        height: 16px; }
    .darkTheme .leftnav > .contSmall {
      height: 24px;
      padding-left: 12px; }
      .darkTheme .leftnav > .contSmall svg {
        user-select: none;
        pointer-events: none;
        -webkit-backface-visibility: hidden;
        -webkit-transform: translateZ(0) scale(1, 1); }
      .darkTheme .leftnav > .contSmall label {
        color: #000;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.25px; }
    .darkTheme .leftnav > .title {
      position: relative;
      display: inline-block;
      width: 100%;
      padding-left: 8px;
      margin-top: 4px;
      margin-bottom: 4px;
      color: #000;
      font-size: 10px;
      font-weight: normal;
      letter-spacing: 1.5px;
      user-select: none;
      pointer-events: none; }
  .darkTheme .fullcont {
    background-color: #121212;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff; }
  .darkTheme .button {
    background-color: #0280EE; }
  .darkTheme .button-flat {
    background-color: transparent; }
    .darkTheme .button-flat label {
      color: #cde7fe; }
    .darkTheme .button-flat svg {
      fill: #cde7fe; }
  .darkTheme .button-plain {
    cursor: pointer;
    overflow: hidden;
    background-color: transparent; }
    .darkTheme .button-plain:hover {
      background-color: #1e1e1e !important; }
    .darkTheme .button-plain:focus {
      background-color: #1e1e1e; }
    .darkTheme .button-plain:active {
      background-color: #1e1e1e; }
    @media (max-width: 56.25em) {
      .darkTheme .button-plain:hover {
        background-color: #323232; }
      .darkTheme .button-plain:focus {
        background-color: #323232; }
      .darkTheme .button-plain:active {
        background-color: #323232; } }
    .darkTheme .button-plain .ripple {
      background-color: #ffffff; }
    .darkTheme .button-plain label {
      color: #ffffff; }
    .darkTheme .button-plain svg {
      fill: #ffffff; }
  .darkTheme .fab svg {
    fill: #ffffffde; }
  .darkTheme .drawer {
    background-color: #121212; }
    .darkTheme .drawer > .title {
      color: #ffffff; }
    .darkTheme .drawer > .des {
      color: #ffffff; }
    .darkTheme .drawer > .elem {
      cursor: pointer;
      overflow: hidden; }
      .darkTheme .drawer > .elem:hover {
        background-color: #4f4f4f !important; }
      .darkTheme .drawer > .elem:focus {
        background-color: black; }
      .darkTheme .drawer > .elem:active {
        background-color: black; }
      @media (max-width: 56.25em) {
        .darkTheme .drawer > .elem:hover {
          background-color: #121212; }
        .darkTheme .drawer > .elem:focus {
          background-color: #121212; }
        .darkTheme .drawer > .elem:active {
          background-color: #121212; } }
      .darkTheme .drawer > .elem .ripple {
        background-color: #ffffff; }
      .darkTheme .drawer > .elem label {
        color: #ffffff; }
      .darkTheme .drawer > .elem svg {
        fill: #ffffff; }
  .darkTheme .card {
    background-color: #2C2C2C; }
  .darkTheme .backdrop {
    background-color: #323232;
    /*option*/ }
    .darkTheme .backdrop .option:first-child {
      display: flex;
      justify-content: center;
      align-items: center; }
      .darkTheme .backdrop .option:first-child svg {
        fill: #ffffff; }
    .darkTheme .backdrop .option {
      cursor: pointer;
      overflow: hidden; }
      .darkTheme .backdrop .option:hover {
        background-color: #1e1e1e !important; }
      .darkTheme .backdrop .option:focus {
        background-color: #1e1e1e; }
      .darkTheme .backdrop .option:active {
        background-color: #1e1e1e; }
      @media (max-width: 56.25em) {
        .darkTheme .backdrop .option:hover {
          background-color: #323232; }
        .darkTheme .backdrop .option:focus {
          background-color: #323232; }
        .darkTheme .backdrop .option:active {
          background-color: #323232; } }
      .darkTheme .backdrop .option .ripple {
        background-color: #ffffff; }
      .darkTheme .backdrop .option label {
        color: #ffffff;
        font-size: 20px;
        font-weight: 500;
        letter-spacing: 0.15px;
        opacity: 0.87; }
      .darkTheme .backdrop .option .circle {
        opacity: 0.87; }
        .darkTheme .backdrop .option .circle svg {
          fill: #323232; }
  .darkTheme scrollbar {
    position: absolute;
    width: 12px;
    height: 16px;
    margin-right: 100px;
    cursor: pointer;
    border: 0.1px solid rgba(205, 231, 254, 0.08); }
    @media (max-width: 56.25em) {
      .darkTheme scrollbar {
        width: 4px; } }
  .darkTheme ::-webkit-scrollbar {
    position: absolute;
    width: 12px;
    height: 16px;
    margin-right: 100px;
    cursor: pointer; }
    @media (max-width: 56.25em) {
      .darkTheme ::-webkit-scrollbar {
        width: 4px; } }
  .darkTheme ::-webkit-scrollbar-track {
    background-color: transparent; }
  .darkTheme ::-webkit-scrollbar-thumb {
    background: rgba(89, 89, 89, 0.99);
    transform: translateX(-100px); }
  .darkTheme .confirmation {
    background-color: #323232; }
    .darkTheme .confirmation .title {
      color: #ffffff;
      font-size: 27px;
      font-weight: 500;
      letter-spacing: 0.15px;
      opacity: 0.87; }
    .darkTheme .confirmation .des {
      color: #ffffff;
      font-size: 14px;
      font-weight: normal;
      letter-spacing: 0.25px;
      opacity: 0.54; }
    .darkTheme .confirmation .details .code {
      color: #ffffff;
      font-size: 12px;
      font-weight: normal;
      letter-spacing: 0.4px;
      opacity: 0.54; }
    .darkTheme .confirmation .details .num {
      display: block;
      text-align: center;
      color: #ffffff;
      font-size: 48px;
      font-weight: 500;
      letter-spacing: 0.15px; }
    .darkTheme .confirmation .details .helper {
      color: #CF6679;
      font-size: 12px;
      font-weight: normal;
      letter-spacing: 0.4px; }
  .darkTheme .range {
    /*bar*/
    /*bar*/ }
    .darkTheme .range .bar {
      background-color: #595959; }
      .darkTheme .range .bar ol li {
        background-color: #595959; }
    .darkTheme .range .bar-active {
      background-color: #0280EE; }
    .darkTheme .range [class^="circle"] label {
      color: #ffffff;
      font-size: 12px;
      font-weight: normal;
      letter-spacing: 0.4px; }
  .darkTheme .snack {
    background-color: #ffffff; }
    .darkTheme .snack > label {
      color: #000;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.1px; }
    .darkTheme .snack div {
      cursor: pointer;
      overflow: hidden; }
      .darkTheme .snack div:hover {
        background-color: whitesmoke; }
      .darkTheme .snack div:focus {
        background-color: whitesmoke; }
      .darkTheme .snack div:active {
        background-color: #ebebeb; }
      @media (max-width: 56.25em) {
        .darkTheme .snack div:hover {
          background-color: #ffffff; }
        .darkTheme .snack div:focus {
          background-color: #ffffff; }
        .darkTheme .snack div:active {
          background-color: #ffffff; } }
      .darkTheme .snack div .ripple {
        background-color: #cde7fe; }
      .darkTheme .snack div label {
        color: #0280EE; }
  .darkTheme .dialog {
    background-color: #373737; }
    .darkTheme .dialog .title {
      color: #ffffff; }
    .darkTheme .dialog .des {
      color: #ffffff; }
  .darkTheme .menu {
    background-color: #323232; }
    .darkTheme .menu div {
      cursor: pointer;
      overflow: hidden; }
      .darkTheme .menu div:hover {
        background-color: #1e1e1e !important; }
      .darkTheme .menu div:focus {
        background-color: #1e1e1e; }
      .darkTheme .menu div:active {
        background-color: #1e1e1e; }
      @media (max-width: 56.25em) {
        .darkTheme .menu div:hover {
          background-color: #323232; }
        .darkTheme .menu div:focus {
          background-color: #323232; }
        .darkTheme .menu div:active {
          background-color: #323232; } }
      .darkTheme .menu div .ripple {
        background-color: #ffffff; }
      .darkTheme .menu div label {
        color: #ffffff; }
      .darkTheme .menu div svg {
        fill: #ffffff; }
  .darkTheme .banner {
    background-color: #2C2C2C; }
    .darkTheme .banner > .icon {
      background-color: transparent; }
      .darkTheme .banner > .icon svg {
        fill: #cde7fe; }
    .darkTheme .banner > .des {
      color: #ffffff;
      opacity: 0.99; }
  .darkTheme .mode-view {
    /*textfield*/
    /*radio*/
    /*checkbox*/
    /*checkbox*/
    /*checkbox*/
    /*checkbox*/ }
    .darkTheme .mode-view > .fab-to-edit {
      display: absolute; }
    .darkTheme .mode-view > .fab-to-update {
      display: none; }
    .darkTheme .mode-view > .fab-to-add {
      display: none; }
    .darkTheme .mode-view .fab-to-readOnly {
      transform: scale(0); }
    .darkTheme .mode-view .page .checkbox > input {
      border-color: white; }
    .darkTheme .mode-view > .page .row {
      pointer-events: none; }
      .darkTheme .mode-view > .page .row > div {
        pointer-events: none; }
        .darkTheme .mode-view > .page .row > div > .card {
          pointer-events: auto !important; }
          .darkTheme .mode-view > .page .row > div > .card .row .c50 .textfield .label {
            color: white !important; }
    .darkTheme .mode-view > .page .textfield {
      user-select: none;
      pointer-events: none; }
      .darkTheme .mode-view > .page .textfield > .trailing {
        display: none; }
      .darkTheme .mode-view > .page .textfield > .helper {
        display: none; }
      .darkTheme .mode-view > .page .textfield > .counter {
        display: none; }
      .darkTheme .mode-view > .page .textfield > .indicador {
        display: none; }
      .darkTheme .mode-view > .page .textfield > .elem {
        border-bottom: none;
        background: none;
        font-family: roboto;
        pointer-events: none;
        color: #ffffffde;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.1px; }
        .darkTheme .mode-view > .page .textfield > .elem::placeholder {
          opacity: 0; }
      .darkTheme .mode-view > .page .textfield > .label {
        color: #ffffffde;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.4px;
        color: #ffffffde !important;
        pointer-events: none; }
    .darkTheme .mode-view > .page .radio {
      padding: 0px;
      min-height: 20px;
      user-select: none;
      pointer-events: none;
      margin-top: 2px; }
      .darkTheme .mode-view > .page .radio > div {
        margin-top: 0px;
        padding: 0px !important;
        min-height: 8px;
        /**/ }
        .darkTheme .mode-view > .page .radio > div > label {
          border: 0.2px solid red;
          margin-left: 8px;
          top: 2px;
          margin-right: 8px; }
        .darkTheme .mode-view > .page .radio > div > input {
          top: 0px;
          width: 18px;
          height: 18px;
          border-radius: 0px;
          border: 2px solid #ffffff;
          opacity: 1; }
          .darkTheme .mode-view > .page .radio > div > input::before {
            top: 2px;
            left: 2px;
            border-radius: 0%;
            width: 8px;
            height: 8px; }
          .darkTheme .mode-view > .page .radio > div > input:checked {
            background: #ffffff url(svg/check.svg) no-repeat; }
    .darkTheme .mode-view .page .checkbox {
      user-select: none;
      pointer-events: none; }
      .darkTheme .mode-view .page .checkbox > input {
        border: 2px solid #000;
        opacity: 1; }
        .darkTheme .mode-view .page .checkbox > input:checked {
          background: #000 url(svg/check.svg) no-repeat; }
          .darkTheme .mode-view .page .checkbox > input:checked::before {
            display: none; }
        .darkTheme .mode-view .page .checkbox > input::before {
          opacity: 0;
          transform: scale(0); }
    .darkTheme .mode-view .page .signature-line label {
      display: none; }
    .darkTheme .mode-view .page .signature-line span {
      visibility: visible; }
    .darkTheme .mode-view .page .signature-line::after {
      position: absolute;
      display: inline-block;
      content: '';
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background-color: transparent;
      background-image: url("./svg/view.svg");
      background-repeat: no-repeat;
      background-size: auto;
      background-position: center; }
    .darkTheme .mode-view .page .multitable {
      cursor: pointer;
      overflow: hidden; }
      .darkTheme .mode-view .page .multitable:hover {
        background-color: #1D1D1D !important; }
      .darkTheme .mode-view .page .multitable:hover {
        background-color: gainsboro; }
      .darkTheme .mode-view .page .multitable:focus {
        background-color: #d2d2d2; }
      .darkTheme .mode-view .page .multitable:active {
        background-color: #d2d2d2; }
      @media (max-width: 56.25em) {
        .darkTheme .mode-view .page .multitable:hover {
          background-color: #E6E6E6; }
        .darkTheme .mode-view .page .multitable:focus {
          background-color: #E6E6E6; }
        .darkTheme .mode-view .page .multitable:active {
          background-color: #E6E6E6; } }
      .darkTheme .mode-view .page .multitable .ripple {
        background-color: #ffffff; }
      .darkTheme .mode-view .page .multitable > .cont {
        user-select: none;
        pointer-events: none; }
      .darkTheme .mode-view .page .multitable > .cont > .line {
        cursor: pointer;
        overflow: hidden;
        /*Textfield*/ }
        .darkTheme .mode-view .page .multitable > .cont > .line:hover {
          background-color: whitesmoke; }
        .darkTheme .mode-view .page .multitable > .cont > .line:focus {
          background-color: whitesmoke; }
        .darkTheme .mode-view .page .multitable > .cont > .line:active {
          background-color: #ebebeb; }
        @media (max-width: 56.25em) {
          .darkTheme .mode-view .page .multitable > .cont > .line:hover {
            background-color: #ffffff; }
          .darkTheme .mode-view .page .multitable > .cont > .line:focus {
            background-color: #ffffff; }
          .darkTheme .mode-view .page .multitable > .cont > .line:active {
            background-color: #ffffff; } }
        .darkTheme .mode-view .page .multitable > .cont > .line .ripple {
          background-color: #cde7fe; }
        .darkTheme .mode-view .page .multitable > .cont > .line > .removeLine {
          display: none; }
        .darkTheme .mode-view .page .multitable > .cont > .line .checkbox-mini label {
          margin-top: 2px; }
        .darkTheme .mode-view .page .multitable > .cont > .line .checkbox-mini input {
          margin-top: 1px; }
        .darkTheme .mode-view .page .multitable > .cont > .line .textfield {
          top: 1px;
          height: 20px  !important; }
          .darkTheme .mode-view .page .multitable > .cont > .line .textfield .elem {
            height: 20px !important;
            top: 2px;
            color: #ffffffde;
            left: 6px; }
          .darkTheme .mode-view .page .multitable > .cont > .line .textfield > .chip-cont {
            top: -16px;
            /*time-task*/ }
            .darkTheme .mode-view .page .multitable > .cont > .line .textfield > .chip-cont > .chip {
              height: 16px;
              background: transparent;
              /*remove*/ }
              .darkTheme .mode-view .page .multitable > .cont > .line .textfield > .chip-cont > .chip > label {
                left: 2px;
                top: -4px;
                font-size: 12px !important;
                font-weight: 400 !important;
                letter-spacing: 0.5px !important; }
              .darkTheme .mode-view .page .multitable > .cont > .line .textfield > .chip-cont > .chip > span {
                display: none; }
      .darkTheme .mode-view .page .multitable > .btn {
        user-select: none;
        pointer-events: none; }
    .darkTheme .mode-view .page .textfield-autocomplete > .chip-cont {
      /*time-task*/ }
      .darkTheme .mode-view .page .textfield-autocomplete > .chip-cont > .chip {
        background: transparent;
        /*remove*/ }
        .darkTheme .mode-view .page .textfield-autocomplete > .chip-cont > .chip > label {
          font-weight: 500 !important; }
        .darkTheme .mode-view .page .textfield-autocomplete > .chip-cont > .chip > span {
          display: none; }
  .darkTheme .textfield > .elem {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.04);
    caret-color: #cde7fe;
    border-bottom: 1px solid #8a8a8a; }
    .darkTheme .textfield > .elem:hover {
      background-color: rgba(0, 0, 0, 0.24); }
    .darkTheme .textfield > .elem:focus {
      background-color: rgba(0, 0, 0, 0.36); }
    .darkTheme .textfield > .elem + .indicador {
      background-color: #cde7fe;
      transform: scaleX(0); }
    .darkTheme .textfield > .elem:focus + .indicador {
      transform: scaleX(1); }
    .darkTheme .textfield > .elem:focus ~ .label {
      color: #cde7fe;
      font-size: 12px;
      font-weight: normal;
      letter-spacing: 0.4px;
      opacity: 0.87; }
  .darkTheme .textfield > .label {
    color: #ffffff;
    opacity: 0.87; }
  .darkTheme .textfield > .helper {
    color: #ffffff;
    opacity: 0.87; }
  .darkTheme .textfield > .counter {
    color: #ffffff;
    opacity: 0.87; }
  .darkTheme .textfield > .trailing svg {
    fill: #ffffff;
    opacity: 0.87; }
  .darkTheme .textfield-filled > .label {
    opacity: 0.54; }
  .darkTheme .textfield-error > .label {
    color: #CF6679;
    opacity: 1; }
  .darkTheme .textfield-error > .elem {
    caret-color: #CF6679; }
    .darkTheme .textfield-error > .elem + .indicador {
      background-color: #CF6679;
      transform: scaleX(1); }
    .darkTheme .textfield-error > .elem:focus ~ .label {
      color: #CF6679;
      opacity: 1; }
  .darkTheme .textfield-error > .trailing svg {
    fill: #CF6679;
    opacity: 1; }
  .darkTheme .textfield-error > .helper {
    color: #CF6679;
    opacity: 1; }
  .darkTheme .textfield-completed > .label {
    color: #4BB04F;
    opacity: 1; }
  .darkTheme .textfield-completed > .elem {
    caret-color: #4BB04F; }
    .darkTheme .textfield-completed > .elem + .indicador {
      background-color: #4BB04F;
      transform: scaleX(1); }
    .darkTheme .textfield-completed > .elem:focus ~ .label {
      color: #4BB04F; }
  .darkTheme .textfield-completed > .trailing svg {
    fill: #4BB04F;
    opacity: 1; }
  .darkTheme .textfield-completed > .helper {
    color: #4BB04F;
    opacity: 1; }
  .darkTheme .textfield-caution > .label {
    color: #FD9726;
    opacity: 1; }
  .darkTheme .textfield-caution > .elem {
    caret-color: #FD9726; }
    .darkTheme .textfield-caution > .elem + .indicador {
      background-color: #FD9726;
      transform: scaleX(1); }
    .darkTheme .textfield-caution > .elem:focus ~ .label {
      color: #FD9726; }
  .darkTheme .textfield-caution > .trailing svg {
    fill: #FD9726;
    opacity: 1; }
  .darkTheme .textfield-caution > .helper {
    color: #FD9726;
    opacity: 1; }
  .darkTheme .checkbox input {
    border: 2px solid #ffffff; }
    .darkTheme .checkbox input::before {
      background-color: #cde7fe;
      opacity: 0; }
    .darkTheme .checkbox input:hover::before {
      opacity: 0.16; }
    .darkTheme .checkbox input:checked {
      background: #cde7fe url(svg/check-dark.svg) no-repeat;
      border: 2px solid #cde7fe; }
  .darkTheme .checkbox label {
    color: #ffffff; }
  .darkTheme .radio > div input {
    border: 2px solid #ffffff;
    opacity: 0.54; }
    .darkTheme .radio > div input::before {
      background-color: #cde7fe;
      opacity: 0; }
    .darkTheme .radio > div input:hover::before {
      opacity: 0.16;
      transform: scale(1); }
    .darkTheme .radio > div input:checked {
      opacity: 1;
      border: 2px solid #cde7fe; }
      .darkTheme .radio > div input:checked::before {
        opacity: 1;
        transform: scale(1); }
  .darkTheme .radio > div label {
    color: #ffffff; }
  .darkTheme .switch input {
    background-color: #3d3d3d; }
    .darkTheme .switch input::before {
      background-color: #ffffff;
      transition: 0.25s, emph; }
    .darkTheme .switch input::after {
      opacity: 0;
      background-color: #cde7fe; }
    .darkTheme .switch input:hover::after {
      opacity: 0.16;
      background-color: #cde7fe; }
    .darkTheme .switch input:active::after {
      opacity: 0.16;
      background-color: #cde7fe; }
    .darkTheme .switch input:checked {
      background-color: #f5faff; }
      .darkTheme .switch input:checked::before {
        right: 0px;
        background-color: #cde7fe; }
  .darkTheme .switch label {
    color: #ffffff; }
  .darkTheme .stepper {
    background-color: #323232; }
    .darkTheme .stepper label {
      color: #ffffff;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 1.25px;
      text-transform: uppercase;
      user-select: none;
      pointer-events: none; }
    .darkTheme .stepper .btn-next {
      right: 0px; }
      .darkTheme .stepper .btn-next label {
        color: #323232;
        opacity: 0.36; }
      .darkTheme .stepper .btn-next svg {
        color: #323232;
        opacity: 0.36; }
    .darkTheme .stepper .btn-back {
      left: 0px;
      cursor: pointer;
      overflow: hidden; }
      .darkTheme .stepper .btn-back label {
        color: #ffffff;
        opacity: 0.36; }
      .darkTheme .stepper .btn-back svg {
        color: #ffffff;
        opacity: 0.36; }
      .darkTheme .stepper .btn-back:hover {
        background-color: #1e1e1e !important; }
      .darkTheme .stepper .btn-back:focus {
        background-color: #1e1e1e; }
      .darkTheme .stepper .btn-back:active {
        background-color: #1e1e1e; }
      @media (max-width: 56.25em) {
        .darkTheme .stepper .btn-back:hover {
          background-color: #323232; }
        .darkTheme .stepper .btn-back:focus {
          background-color: #323232; }
        .darkTheme .stepper .btn-back:active {
          background-color: #323232; } }
      .darkTheme .stepper .btn-back .ripple {
        background-color: #ffffff; }
  .darkTheme .stepper-nextOn .btn-next {
    background-color: #0280EE; }
    .darkTheme .stepper-nextOn .btn-next label {
      color: #ffffff !important;
      opacity: 1; }
    .darkTheme .stepper-nextOn .btn-next svg {
      fill: #ffffff !important;
      opacity: 1; }
  .darkTheme .stepper-backOn .btn-back {
    background-color: #323232;
    cursor: pointer;
    overflow: hidden; }
    .darkTheme .stepper-backOn .btn-back:hover {
      background-color: #1e1e1e !important; }
    .darkTheme .stepper-backOn .btn-back:focus {
      background-color: #1e1e1e; }
    .darkTheme .stepper-backOn .btn-back:active {
      background-color: #1e1e1e; }
    @media (max-width: 56.25em) {
      .darkTheme .stepper-backOn .btn-back:hover {
        background-color: #323232; }
      .darkTheme .stepper-backOn .btn-back:focus {
        background-color: #323232; }
      .darkTheme .stepper-backOn .btn-back:active {
        background-color: #323232; } }
    .darkTheme .stepper-backOn .btn-back .ripple {
      background-color: #ffffff; }
    .darkTheme .stepper-backOn .btn-back label {
      color: #cde7fe !important;
      opacity: 1; }
    .darkTheme .stepper-backOn .btn-back svg {
      fill: #cde7fe !important;
      opacity: 1; }
  .darkTheme .tab {
    background-color: #65afff; }
    .darkTheme .tab > div label {
      color: #ffffff; }
    .darkTheme .tab > div svg {
      fill: #ffffff; }
    .darkTheme .tab .indicator {
      background-color: #cde7fe; }
    .darkTheme .tab .select {
      border-bottom: 2px solid #cde7fe; }
  .darkTheme .tab-plain {
    background-color: transparent; }
  .darkTheme .divider {
    border-bottom: 1px solid #595959; }
  .darkTheme .dt {
    /*data table*/
    position: relative;
    display: inline-block;
    width: calc(100% - 0px);
    max-width: 1300px;
    margin-left: 50%;
    padding-right: 2px;
    padding-left: 2px;
    padding-bottom: 32px;
    margin-bottom: 16px;
    transform: translateX(-50%); }
    .darkTheme .dt > table {
      width: 100%;
      border-collapse: collapse;
      background: #323232;
      table-layout: fixed; }
      .darkTheme .dt > table thead tr th {
        background-color: #242424;
        border-right: 1px solid #ffffffde;
        border-left: 1px solid #ffffffde; }
      .darkTheme .dt > table th:not(:first-child) {
        position: relative;
        text-align: left;
        padding-left: 4px;
        padding-right: 4px;
        cursor: pointer;
        overflow: hidden;
        background: #323232;
        border-top: 1px solid #0000001e;
        color: #ffffffde;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.1px;
        opacity: 0.36; }
        .darkTheme .dt > table th:not(:first-child) label {
          position: absolute;
          display: block;
          max-width: calc(100% - 16px);
          top: 2px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: #ffffffde;
          font-size: 14px;
          font-weight: 500;
          letter-spacing: 0.1px;
          user-select: none;
          pointer-events: none; }
        .darkTheme .dt > table th:not(:first-child) span {
          position: absolute;
          display: block;
          max-width: calc(100% - 16px);
          top: 20px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: #ffffffde;
          font-size: 12px;
          font-weight: normal;
          letter-spacing: 0.4px;
          user-select: none;
          pointer-events: none; }
        .darkTheme .dt > table th:not(:first-child)::before {
          position: absolute;
          content: '';
          top: 2px;
          right: 4px;
          width: 16px;
          height: 16px;
          background: url(svg/down.svg) no-repeat;
          background-size: 100% 100%;
          background-position: center;
          opacity: 0;
          transform: scale(0) rotate(0deg);
          transition: all 0.15s;
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
        .darkTheme .dt > table th:not(:first-child)::selection {
          background-color: transparent; }
      .darkTheme .dt > table thead tr {
        background-color: #E6E6E6; }
        .darkTheme .dt > table thead tr th {
          border: none !important; }
      .darkTheme .dt > table tr {
        position: relative;
        background-color: #323232;
        height: 36px; }
        .darkTheme .dt > table tr .selected {
          background-color: #0078D4 !important;
          color: #ffffffde !important; }
        .darkTheme .dt > table tr:nth-child(odd) {
          background-color: #1D1D1D; }
          .darkTheme .dt > table tr:nth-child(odd) input:checked {
            background-color: transparent !important; }
        .darkTheme .dt > table tr:not(:nth-child(1)):hover {
          color: white !important;
          background-color: #3baaff; }
        .darkTheme .dt > table tr:not(:last-child) {
          border-bottom: 1px solid #0000001e; }
      .darkTheme .dt > table td {
        position: relative;
        text-align: left;
        padding-left: 4px;
        padding-right: 4px;
        top: -1px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-wrap: none;
        border: none;
        border: none; }
        .darkTheme .dt > table td:not(:first-child) {
          cursor: pointer;
          overflow: hidden; }
          .darkTheme .dt > table td:not(:first-child):hover {
            background-color: #0078D4 !important; }
          .darkTheme .dt > table td:not(:first-child):hover {
            background-color: whitesmoke; }
          .darkTheme .dt > table td:not(:first-child):focus {
            background-color: whitesmoke; }
          .darkTheme .dt > table td:not(:first-child):active {
            background-color: #ebebeb; }
          @media (max-width: 56.25em) {
            .darkTheme .dt > table td:not(:first-child):hover {
              background-color: #ffffff; }
            .darkTheme .dt > table td:not(:first-child):focus {
              background-color: #ffffff; }
            .darkTheme .dt > table td:not(:first-child):active {
              background-color: #ffffff; } }
          .darkTheme .dt > table td:not(:first-child) .ripple {
            background-color: #cde7fe; }
        .darkTheme .dt > table td label {
          position: absolute;
          display: block;
          max-width: calc(100% - 16px);
          top: 2px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: #ffffffde;
          font-size: 14px;
          font-weight: 500;
          letter-spacing: 0.1px;
          user-select: none;
          pointer-events: none; }
        .darkTheme .dt > table td span {
          position: absolute;
          display: block;
          max-width: calc(100% - 16px);
          top: 20px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: #ffffffde;
          font-size: 12px;
          font-weight: normal;
          letter-spacing: 0.4px;
          user-select: none;
          pointer-events: none; }
        .darkTheme .dt > table td .id {
          position: absolute;
          display: block;
          top: 10px;
          left: -2px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          text-align: center;
          transform: rotate(90deg);
          color: #000;
          font-size: 10px;
          font-weight: normal;
          letter-spacing: 1.5px;
          user-select: none;
          pointer-events: none;
          opacity: 0.54;
          display: none; }
      .darkTheme .dt > table th {
        transition: all 0.15s;
        transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
        .darkTheme .dt > table th:active {
          transform: scale(0.98);
          background-color: #0078D4; }
        .darkTheme .dt > table th:hover {
          background-color: #0078D4 !important;
          color: #ffffffde !important; }
      .darkTheme .dt > table td {
        color: #000;
        font-size: 14px;
        font-weight: normal;
        letter-spacing: 0.25px;
        transition: all 0.15s;
        transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
        .darkTheme .dt > table td:active {
          transform: scale(0.98); }
      .darkTheme .dt > table .checked {
        background-color: #0078D4 !important; }
        .darkTheme .dt > table .checked td {
          cursor: pointer;
          overflow: hidden; }
          .darkTheme .dt > table .checked td:hover {
            background-color: #b9ddfe; }
          .darkTheme .dt > table .checked td:focus {
            background-color: #a5d4fd; }
          .darkTheme .dt > table .checked td:active {
            background-color: #a5d4fd; }
          @media (max-width: 56.25em) {
            .darkTheme .dt > table .checked td:hover {
              background-color: #cde7fe; }
            .darkTheme .dt > table .checked td:focus {
              background-color: #cde7fe; }
            .darkTheme .dt > table .checked td:active {
              background-color: #cde7fe; } }
          .darkTheme .dt > table .checked td .ripple {
            background-color: #ffffff; }
      .darkTheme .dt > table .highlightTr {
        background-color: #0078D4;
        background-color: #ffa8f0; }
        .darkTheme .dt > table .highlightTr td {
          cursor: pointer;
          overflow: hidden; }
          .darkTheme .dt > table .highlightTr td:hover {
            background-color: #ff94ec; }
          .darkTheme .dt > table .highlightTr td:focus {
            background-color: #ff7fe9; }
          .darkTheme .dt > table .highlightTr td:active {
            background-color: #ff7fe9; }
          @media (max-width: 56.25em) {
            .darkTheme .dt > table .highlightTr td:hover {
              background-color: #ffa8f0; }
            .darkTheme .dt > table .highlightTr td:focus {
              background-color: #ffa8f0; }
            .darkTheme .dt > table .highlightTr td:active {
              background-color: #ffa8f0; } }
          .darkTheme .dt > table .highlightTr td .ripple {
            background-color: #cde7fe; }
  .darkTheme table tr td {
    padding: 4px;
    color: #000;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.25px; }
  .darkTheme .dt > .header > .title {
    color: #ffffff; }
  .darkTheme .dt > .header > div:nth-child(2) input {
    background-color: transparent;
    color: #ffffff;
    caret-color: #ffffff; }
    .darkTheme .dt > .header > div:nth-child(2) input:focus ~ .search svg {
      opacity: 1;
      fill: #ffffff; }
  .darkTheme .dt > .header > div:nth-child(2) > .icon svg {
    fill: #ffffff; }
  .darkTheme .dt > .header > .more svg, .darkTheme .dt > .header > .filter svg {
    fill: #ffffff; }
  .darkTheme .dt > table th:nth-child(1) input, .darkTheme .dt > table td:nth-child(1) input {
    border: 2px solid #ffffff; }
    .darkTheme .dt > table th:nth-child(1) input::before, .darkTheme .dt > table td:nth-child(1) input::before {
      background-color: #ffffff; }
    .darkTheme .dt > table th:nth-child(1) input:checked, .darkTheme .dt > table td:nth-child(1) input:checked {
      background: #cde7fe url(svg/check.svg) no-repeat;
      border: 2px solid #cde7fe; }
  .darkTheme .dt > table tr .more svg {
    fill: #ffffff; }
  .darkTheme .dt > table tr .more:hover {
    background-color: transparent; }
  .darkTheme .dt-simple > table th, .darkTheme .dt-simple > table td {
    color: #ffffff; }
  .darkTheme .dt-loading {
    color: transparent !important; }
    .darkTheme .dt-loading > .header {
      animation-name: dt-gradient;
      animation-duration: 7s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
      background: linear-gradient(-45deg, #1a1a1a, #000, #404040, #000);
      background-size: 400% 400%; }
    .darkTheme .dt-loading > table tr {
      animation-name: dt-gradient;
      animation-duration: 3s;
      animation-iteration-count: infinite;
      animation-direction: revese;
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
      background: linear-gradient(-45deg, #1a1a1a, #000, #404040, #000);
      background-size: 400% 400%; }
      .darkTheme .dt-loading > table tr:nth-child(odd) {
        animation-name: dt-gradient;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
        background: linear-gradient(-45deg, #1a1a1a, #000, #404040, #000);
        background-size: 400% 400%; }