* {
    font-family: 'Lato', sans-serif;
    user-select: none; /* standard syntax */
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
    
}

html, body {
    margin: 0;
    padding: 0;
    background:#F8F8F8;
    font-weight: 400;
    height: 100%;
}
.pas {
    /* padding: 2rem 0; */
    height: 100%;
    width: 100%;
    display: flex;
    align-items: stretch;
    flex-direction: row;
}

.pas .main 
{
    padding: 2rem;
  flex: 1; 
}

.nav {
    padding: 3rem 0;
    padding-right: 1.5rem;
    /* background: grey; */

    display: flex;
    flex-direction: column;
}

.nav a {
    color: black;
    text-decoration: none;
    border-bottom-right-radius: 100rem;
    border-top-right-radius: 100rem;
    margin: .2rem 0;
    padding: .75rem 1.5rem;
    padding-left: .6rem;
    font-size: 14px;
}

.nav a.active {
    background: #3B3B3B;
    color: white;
}

.nav .spacer {
    flex-grow: 1;
}

.card {
    min-width: 140px;
    margin-top: 1rem;
    padding: 2rem 1rem;
    padding-bottom: 1rem;
    background: white;
    border-radius: 1.5rem;
    box-shadow: 0 0 30px 0px #00000021;
    display: inline-block;
    margin-right: 2rem;
    font-size: 80%;
}

.card > h1 {
    
    font-size: 70px;
    margin: 0;
    font-weight: 400;
}

.card span {
    font-size: 13px;
    color: grey;
}

.card .btn {
    margin-top: 1rem;
    background: #0000000f;
    padding: .6rem 1rem;
    text-align: center;
    border-radius: 100rem;
}

.main {
    padding: 0 2rem;
    /* background: gold; */
}

.main table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 2rem;
}

.trans-card table tr td {
    padding: 0.4rem .5rem;
}

.trans-card table {
    border-collapse: collapse;
    /* width: 100%; */
    padding: 0 2rem;
    display: block;
}

.trans-card h1 {
    padding-bottom: 1rem;
}



tr:hover {
    background-color: #ffedc6;
}

tr td {
    padding: .4rem 2rem;
}

.main table tr td:last-child {
  white-space: nowrap;
  width: 1px;
}

.main table tr td:first-child {
    white-space: nowrap;
    width: 100%;
  }



table tr:hover td:first-child {
border-top-left-radius: 100rem;
border-bottom-left-radius: 100rem;
}
table tr:hover td:last-child {
border-top-right-radius: 100rem;
border-bottom-right-radius: 100rem;
}

.main > h1 {
    padding-left: 2rem;
    display: flex;
    align-items: center;
    /* font-weight: 400; */
    color: #675B00;
    font-size: 22px;
}

h1 span {
    margin: 0 1rem;
    background: #DBB86B;
    color: white;
    border-radius: 100rem;
    padding: .2rem 1rem;
    font-size: 12px;
}

.icon {
    padding-left: .8rem;
}

.icon.trash {
    color: red;
}

.kpi {
    display: none;
    padding: 20px;
    border-radius: 1.5rem;
    border-top-right-radius: 0;
    box-shadow: 0 0 30px 0px #00000021;
    background: white;
    width: 300px;
    position: absolute;
}

.kpi div {
    
    width: 100%;
    padding-bottom: .4rem;
}

.kpi div span {
    float: right;
}

.kpi .title {
    color: grey;
    font-size: 20px;
    padding-bottom: 1rem;
}


.kpi-pop {
    cursor: default;
}



.flash {
    animation: fadeoutBg 1s; /***Transition delay 3s fadeout is class***/
    -moz-animation: fadeoutBg 1s; /* Firefox */
    -webkit-animation: fadeoutBg 1s; /* Safari and Chrome */
    -o-animation: fadeoutBg 1s; /* Opera */
}

@keyframes fadeoutBg {
    from { background-color: lightcoral; } /** from color **/
    to { background-color: white; } /** to color **/
}

@-moz-keyframes fadeoutBg { /* Firefox */
    from { background-color: lightcoral; }
    to { background-color: white; }
}

@-webkit-keyframes fadeoutBg { /* Safari and Chrome */
    from { background-color: lightcoral; }
    to { background-color: white; }
}

@-o-keyframes fadeoutBg { /* Opera */
    from { background-color: lightcoral; }
    to { background-color: white; }
}

.node-card {
    z-index: 99999;
}

.node-card, .trans-card {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2rem 5rem;
}

.close {
    position: absolute;
    /* text-align: right; */
    padding: 2rem 4rem;
    right: 65px;
    color: red;
}

.node-card-bg, .trans-card-bg {
    box-shadow: 0 0 30px 0px #00000021;
    border-radius: 2rem;
    
    background: white;
    width: 100%;
    height: 100%;
}


.node-card iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.center {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes flickerAnimation {
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-o-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-moz-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-webkit-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  .fade-in-out {
     -webkit-animation: flickerAnimation 2s infinite;
     -moz-animation: flickerAnimation 2s infinite;
     -o-animation: flickerAnimation 2s infinite;
      animation: flickerAnimation 2s infinite;
  }

  .main iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 1.5rem;
  }

  .delay {
      height: 250px;
      padding: 1.5rem .5rem;
      overflow: hidden;
  }

  .delay img {
      height: 100%;
      object-fit: contain;
  }

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

  .badge {
    margin: 0 1rem;
    border: #3cc735 2px solid;
    color: #3cc735;
    border-radius: 100rem;
    font-weight: 700;
    padding: 0.1rem .8rem;
    font-size: 12px;
  }

  .swal2-popup {
    border-radius: 1.2rem !important;
  }

  .green {
      color: green;
  }

  .swal2-actions {
      flex-direction: column;
  }

  .pas_btn {
      border: none !important;
      width: 100%;
      margin-bottom: .5rem !important;
      border-radius: 100rem !important;
  }

  .btn-success {
      background-color: rgb(106, 207, 83) !important;
  }

  body.swal2-height-auto {
      height: 100% !important;
  }

  .flag, .trash {
      cursor: pointer;
  }

  .flex-col {
      flex-direction: column;
  }