@import url("./_variables.css");

/* width */


/* Track */
::-webkit-scrollbar-track {
  
  background-color: transparent;
  
}

/* Handle */
::-webkit-scrollbar {
  width: 18px;
}

::-webkit-scrollbar-thumb {
  border: 4px solid rgba(0, 0, 0, 0);
  
  background-clip: padding-box;
  border-radius: 9999px;
  background-color: #AAAAAA;
}


.site-header__logo-mark {
  height: 60px;
}
.site-header__wrapper{
      background-color:rgba(26, 57, 82, 1.0);

}
.content__container{
    background-color: #F4F8F9;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap:10px;
    padding-top:150px;
    align-items: center;
    
}


.table__container{
    margin: 40px;
    position: relative;
    border-radius: 10px;
    padding-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease-in-out;
    border:1px solid lightgray;
    width: 90%;
    /* padding: 10px 0px 0px 0px; */
    
}

#usecaseFilter{
    font-family: "StabilGrotesk-Regular";
    color:var(--color--fas-blue);
    font-size:30px;
}

.table__header{
    display: flex;
    flex-direction: column;
    border-radius: 15px 15px 0 0;
    /* position: sticky; */
    background-color: #ECEAEB;
    /* height: 100px; */
}

.table__icon{
    
}

th {
  border-bottom: 1px solid var(--color--gray-dark);
  font-size: 1rem;
  
}

table{
    
    border-collapse: collapse;
    display: block;
    max-height: 800px;
    overflow-y: scroll;
    background-color: var(--color--gray-lightest);
    scrollbar-gutter: stable both-edges;
    
    
    
  

}
tr > td:nth-child(1) {
    width:4%;
}
tr > td:nth-child(2) {
    width:60%;
}
tr > td:nth-child(3) {
    width:18%;
}
tr > td:nth-child(4) {
    width:18%;
}



.table__filters > *:nth-child(1) {
    width:4%;
}
.table__filters > *:nth-child(2) {
    width:60%;
}
.table__filters > *:nth-child(3) {
    width:18%;
    height:40px;
}
.table__filters > *:nth-child(4) {
    width:18%;
    height:40px;
}





.table__container:hover{
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}



th{
    padding:20px;
    
}

td{
    padding:0 20px;
}
.primary-cell{
    font-size:17px;
}
.table__icon-text{
    font-size:17px;
}
td p{
    font-size:17px;
}

tr{
    
    font-size: 20px;
    font-family: 'StabilGrotesk-regular';
    border-top: 2px solid lightgray;
}
td{
    font-size: 20px;
    font-family: 'StabilGrotesk-regular';
}


input[type=text] {
  width: 25%;
  padding: 12px;
  margin: 10px;
  box-sizing: border-box;
  border-radius: 15px;
  color: #5F5D5E;
  border:1px solid #5F5D5E;
  background-color: #ECEAEB;
  font-family: "StabilGrotesk-Regular";
}


.usecase__text{
    display:flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width:83%;
    font-family: 'StabilGrotesk-regular';
    color:#6b6b6d;
    margin:10px;
}
.usecase__text p{
  text-align: left;
  display:inline-block;
}

.usecase__title{
    color:var(--color--fas-blue);
    font-family: 'StabilGrotesk-bold';
    margin:10px;
}


.ad__container{
    display: flex;
    flex-direction: row;
    gap: 25px;
    justify-content: space-around;
    width: 100%;
    height: 130px;

}

.ad__temp{
    display:flex;
    flex-direction:row;
    padding:10px;
    width:45%;
    align-items: center;
    gap:10px;
    text-decoration: none;
    height:75px;
}

.ad__temp hr{
    width: 2px;
    height: 70%;
    border: 0;
    background-color: black;
    color:black;
}
.ad__bubble{
    height:30%;
    align-self: flex-start;
    padding-top:20px;
}
.ad__title{
    
    font-family:"StabilGrotesk-Bold";
    font-size:25px;
    margin:0px;
    line-height: 20px;
    font-size:20px;
}
.ad__text{
    font-family: "StabilGrotesk-Light";
    width:95%;
    color:#4d4d4d;
    margin:5px;
    line-height: 20px;
    font-size: 16px;
}
    

.ad__logo{
    height:70%;
}
.ad__temp--yel{
    background-color: #FDEB0D;
}
.ad__temp--blue{
    background-color: #9DCDFB;
}


.ad__temp--yel h2{
    color:#E94F36;
}
.ad__temp--blue h2{
    color: var(--color--fas-blue);
}


.table__filters{
    display:flex;
    flex-direction: row;
    padding:5px 15px;
    box-sizing: border-box;
    gap:10px;
}

.table__filters h4{
    margin:10px;
    color:var(--color--fas-blue);
    font-size:30px;
    font-family:"StabilGrotesk-Bold"
}




@media(max-width:1150px){

  .ad__container{
    flex-direction: column;
    align-items: center;
  }
  .ad__temp{
    width:85%;
    height: 130px;


  }
  .ad__container{
    height:auto;
  }
  .ad__logo{
    height: 100px;
  }
}

@media(min-width:875px){
    tbody > tr:first-child{
        border-top:0px;    
    }
}

@media(max-width:875px){
    tr{
        display:flex;
        flex-direction: column;
        margin:30px 0px;
        padding:20px 10px;
        border: 2px solid gray;
        border-radius: 5px;
        box-sizing: border-box;
    }
    tr > td:nth-child(2){
        width:90%;
    }

    .table__container{
        box-shadow:none;
        border:none;
        padding:0px;
        margin:1px;
        
    }
    .table__container:hover{
        box-shadow: none;
    }
    table{
        max-height: 1200px;
        margin-bottom: 50px;
    }
    .table__filters > *:nth-child(3){
        width:70%;
    }
    .table__filters > *:nth-child(4){
        width:70%;
    }
    .table__filters{
        flex-direction: column;
    }
    .table__filters h4{
        margin:0px;
    }
    input[type=text]{
        width:auto;
        margin-bottom: 0px;
    }
}

@media(max-width:650px){

  .ad__temp{
    padding:15px;
  }
  .ad__temp{
    padding:15px;
    flex-direction:column;
    align-items: left;
    height: 100%;
    border-radius: 5px;
  }
}