body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}


/* RESETS */

     /* width */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
      background: #4949491a;
      margin: 10px 0;
    }
    

    /* Handle */
    ::-webkit-scrollbar-thumb {
      background: #3f51b5;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
      background: var(--clr-main-blue);
    }

/* BOX SIZING */
*,
*::before,
*::after{
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
    position: relative;
}

#root, .viewport, main{
  height:100vh;
  max-height: 100vh;
}

[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}

/* RESET MARGINS */
body,h1,h2,h3,h4,h5,h6,p,figure,picture{
    margin: 0;
    line-height: 1.5;
    /* min-height: 100vh; */
}

p{font-family:var(--ff-p2);color:rgb(64 73 86);font-size:var(--fs-250);}

h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    font-weight:100;
}
h1{
    font-family: 'main';
    color:#4f4f7a;
}
h2{
    font-family: 'secondary';
    font-size: var(--fs-400);
}
h3{
  font-family: 'p2';
  font-size: var(--fs-250);
}
.flex{
    display: flex;
    /* gap:var(--gap,1rem); */
    flex-direction: row;
}

.flex-even >*{
    flex-basis: 100%;
    min-width:unset;
}

.full-height{min-height:100vh;}
.container-center{
    align-items: center;
    justify-content: center;
    display: flex;
}

#img-col{
    background-color: blue;
}

.pad-y-20{padding: 20vh 0px;}
.pad-y-10{padding: 10vh 0px;}
.pad-y-5{padding: 5vh 0px;}
.pad-y-2{padding: 2vh 0px;}

.pad-y-20px{padding: 20px 0px;}
.pad-y-10px{padding: 10px 0px;}
.pad-y-5px{padding: 5px 0px;}
.pad-y-2px{padding: 2px 0px;}

.pad-x-20{padding: 0 20vh;}
.pad-x-10{padding: 0 10vh;}
.pad-x-5{padding: 0 5vh;}
.pad-x-2{padding: 0 2vh ;}

.pad-20{padding: 20vh;}
.pad-10{padding: 10vh;}
.pad-5{padding: 5vh;}
.pad-2{padding: 2vh;}

.br-10{margin-bottom:10px;}
.br-15{margin-bottom:15px;}
.br-20{margin-bottom:20px;}
.br-10vh{margin-bottom:10vh;}

.gap-10{gap:10px;}
.gap-15{gap:15px;}
.gap-20{gap:20px;}
.gap-30{gap:30px;}
.gap-10vh{gap:10vh;}

.anchor{
  cursor: pointer;
  text-decoration: underline;
  color: blue;
}

#login{
    width: clamp(400px,30vw,500px);
}
#login .logo{
    width: clamp(50px,100px,100px);
    display: block;
    margin: auto;
    padding-bottom: 4vh;
}
button{
    padding: 15px 10px;
    border-radius: 3px;
    border: solid 1px #00000017;
  font-size:var(--fs-300);
 transition:all 0.3s ;
}


.btn-blue{
    --c: #0000ff;
    background-color: var(--c);
    color: #fff;
}

.btn-green{
    --c:#32c023;
    background-color: var(--c);
    color: #fff;
}


button:hover{
 filter:brightness(1.03);
 box-shadow: 0 2px 3px #d3d3d3 ;
}




.tabs{
  border-bottom:solid 1px #cacaca;
  gap:0;
}
.news-feed .tabs{
  color:#fff;
}
.tab{
  padding:10px;
  text-transform:
  capitalize;
  cursor:
  pointer;
  font-family: var(--ff-p2);
}

.tab.selected{
  border-bottom:solid 3px var(--clr-main-blue);
}

.news-feed .tab.selected{
  border-bottom: solid 3px var(--accent,#fff);
}

nav ul{
    list-style: none;
    padding:0;
    width:90%;
}
nav ul li{
  padding: 5px 15%;
}
nav ul a{
    font-family: var(--ff-p2);
    font-size: 13px;
    text-decoration: none;
  line-height:1px;
}
nav{
    width: 12%;
    padding:
    clamp(20px,2vw,50px) 0;
    display:
    flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
  font-size:14px;
}
nav .logo{
  width:50px;
}
.workspace{
    background-color: #fff;
    width: 100%;
    padding:
    clamp(20px,2vw,50px);
    height: 100%;
    overflow-y: scroll;
    display: block;
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}
.news-feed h2{
    color: #fff;
    margin-bottom:20px;
}
.news-feed{
    background-color: var(--clr-main-blue);
    width: 25%;
    padding:
    clamp(10px,2vw,20px);
}
.tabs-content{
  
  margin-top:20px;
  height: 100%;
}
.tabs-content .feed-column{
  
}
.tabs-content .feed{
  /* width:40vh; */
  /* padding:0 1vw; */
  /* border-right:
  solid 2px var(--clr-light-grey); */
}
.tabs-container{
    max-height: fit-content;
    /* max-height: 80%; */
    overflow: hidden;
    height: 90%;
}
.tabs-content .feed:first-of-type{
  /* padding-left:0; */
}
.card{
  --shadow: #00000021;background-color:#fbfbfb;
  filter: drop-shadow(0px 3px 3px var(--shadow))!important;
  padding:10px;
  transition:
  all 0.5s;
  border: solid 1px #c5c5c5;
  border-bottom: solid var(--clr-status-01);
  border-radius:
  var(--border-radius);
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-delay: var(--delay);
  animation-iteration-count: 1;
/*   animation-direction:forwards; */
  animation-fill-mode: forwards;
/*   animation-play-state: running; */
  animation-name: cards;
  opacity:0;transform:translateY(3px);
}
@keyframes cards{
  0%{opacity:0;transform:translateY(3px);}
  100%{opacity:100%;transform:translateY(0px);}
}
.card .head h3{font-size: var(--fs-200)}
.card .head{
  justify-content:
  space-between;
  cursor: pointer;
  font-family: 'p2';
  font-size: var(--fs-100);
}
.triangle{
  font-size:1.5em;
  display: flex;
  align-content:
  center;
  flex-direction: column;
  height: 20px;
  transform-origin: center;
}

.card .content{
  max-height: 0;
  height:0%;
  overflow: hidden;
  margin-top: 0;
  transition:
  all 0.5s;
  font-family: 'p';
  font-size: var(--fs-200);
}

.card.open .content{
  max-height: 50vh;
  height:100%;
  margin-top: 10px;
  overflow-y:scroll;
}

.card .details{
  gap:10px
}
.card label{
  color: var(--clr-label);
}

.card.open .triangle{transform: rotate(180deg);}

.feed-content{
  display:
  flex;
  flex-direction:
  column;
  gap: 10px;
  padding-bottom:20vh;
}
.feed{
  height:
  inherit;
  overflow: scroll;
  height: 90%;
  overflow-y: scroll;
  overflow-x: auto;
  padding: 5px 10px 1.5em 3px;
}

.feed-column:first-of-type{
  padding-left:0;
}
.feed-column h2{
  margin-bottom:10px;
}
.feed-column{
  padding: 0 1.5em;
  border-right: solid 1px var(--clr-light-grey);
  max-width:33vw;
}

.news-feed .feed-column{
  padding: 0;
  border-right: none;
  max-width:33vw;
}
#table-container{
  max-height: 80%;
  border-bottom:
  solid 2px var(--clr-main-blue);
  margin-bottom: 15px;
  overflow-y: scroll;
  padding-right: 20px;
}
table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
    position: relative;
    font-family: var(--ff-p);
    font-size: var(--fs-250);
}
thead {
    border-color: inherit;
    position: sticky;
    top: 0;
    background-color: #fff;
    height: 70px;
}
tbody tr:first-of-type{border:none;}
tbody tr:nth-child(even){background-color: #f7f7f7;}
tr {
    display: flex;
    vertical-align: inherit;
    border-color: inherit;
    justify-content: space-between;
    border-top: 1px solid #ddd;
    align-items: center;
}
table>caption+thead>tr:first-child>td, table>caption+thead>tr:first-child>th, table>colgroup+thead>tr:first-child>td, table>colgroup+thead>tr:first-child>th, table>thead:first-child>tr:first-child>td, table>thead:first-child>tr:first-child>th {
    border-top: 0;
}

table>thead>tr>th {
    vertical-align: bottom;
    /* border-bottom: 2px solid #ddd; */
    min-height: 70px;
}

thead tr{border: none;border-bottom: solid 2px var(--clr-main-blue);}

th {
    text-align: left;
    text-transform: capitalize;
  flex:1;
    display:
    flex;
    justify-content:
    space-around;
    align-items: top;
    font-size: var(--fs-100);
    cursor:
    pointer;
  padding-right:0px;
}
th span{opacity:0.1;}
th.ASC span{}
th.DESC span{transform:rotate(180deg);}

th.selected span{opacity:1;}
table>tbody>tr>td, table>tbody>tr>th, table>tfoot>tr>td, table>tfoot>tr>th, table>thead>tr>td, table>thead>tr>th {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    
    flex: 1;
}

#login form{
  align-items: center;
}
#login .anchor{
  text-align:center;
}

#login form>*{
  width: 100%;
  /* text-align: center; */
}

input{
    padding: 15px 10px!important;
    font-size: var(--fs-300);
}

form{
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 600px;
}
input, textarea, select,option{
    min-height: 35px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: 5px 10px;
}
textarea{
    min-height: 70px;
}

#pop-up-col{
  position:fixed;
  top:0;
  right:-100%;
  width:20%;
  height:calc(100vh);
  z-index:2;
  padding:var(--dashboard-padding) 0;
  transition:all 1s;
}
#pop-up-col .pop-container{
  border-left:solid 2px blue;
  background-color:#fdfdfd;
  height:100%;
  overflow-y:scroll;
  padding:20px;
}
#pop-up-col .pop-container h2{
  margin-bottom:15px;
}
#pop-up-col.active{
    right: 0!important;
}

.center-x-y{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:90%;
}

.app-icon img{
  width:60px;
  aspect-ratio:1/1;
  transition:all 0.7s;
}

.app-icon p{
  font-size:var(--fs-200);
}

.app-icon {
  cursor:pointer;
  
}

.app-icon:hover img{
  transform:translateY(-4px);
}

.center-x-y p{text-align:center;}
.values-footer{justify-content:center;}
.values-footer p{padding:0 20px;border-right:solid 1px #cacaca;}
.values-footer p:last-of-type{border:none;}
.close{text-align:right;cursor:pointer;}
@media only screen and (min-width: 1000px) {
  .App{}
}