/*********************************
        IMPORT FONT_AWESOME
**********************************/
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"!important;


/*********************************
         IMPORT FONTS
**********************************/
@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@200!important;300!important;400!important;500!important;600!important;700!important;800&family=Raleway:ital,wght@0,100..900!important;1,100..900&display=swap')!important;

:root{
    --default_font:"Mukta", sans-serif!important;
    --title_font:"Raleway", sans-serif!important;
}


/*********************************
        DEFAULT SETTING
**********************************/
*, html{
    scroll-behavior: smooth!important;
}

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


/*********************************
        DEFAULT COLORS
**********************************/



/*********************************
      CUSTOM SCROLL BAR
**********************************/
::-webkit-scrollbar {
    height: 6px!important;
    width: 2px!important;
    background: var(--gray)!important;
}

::-webkit-scrollbar-thumb {
    background: var(--white)!important;
    -webkit-box-shadow: 0px 1px 2px var(--primary)!important;
}

::-webkit-scrollbar-corner {
    background: var(--dark)!important;
}


/*********************************
       DEFAULT ELEMENTS
**********************************/
body{
    margin:0!important;
    overflow-x:hidden !important!important;
    font-family: var(--default_font)!important;
}

a{
    text-decoration:none !important!important;
    min-width: fit-content!important;
    width: fit-content!important;
    width: -webkit-fit-content!important;
    width: -moz-fit-content!important;
}

a, button{
    transition:0.5s!important;
}

a{
    font-size:16px!important;
}

a{
    outline:none !important!important;
}

.padding_1{
    padding:1rem!important;
}

.padding_2{
    padding:2rem!important;
}

.padding_3{
    padding:3rem!important;
}

.padding_4{
    padding:4rem!important;
}

.relative{
    position:relative!important;
}

/*********************************
         MEDIA QUERY
**********************************/
@media (max-width:720px){
    .flex{
        flex-wrap:wrap!important;
    }
    
    .padding_1, .padding_2, .padding_3, .padding_4{
        padding:1rem!important;
    }
    
    a{
        font-size:12px!important;
    }
}

/*SMALL SCREEN*/
@media (max-width:300px){
    .padding_1, .padding_2, .padding_3, .padding_4{
        padding:0.5rem!important;
    }
    
    a{
        font-size:10px!important;
    }
    
}


/*********************************
            MAIN
**********************************/
body{
    margin:auto!important;
    width:95%!important;
    height:auto!important;
    /*overflow:hidden!important;*/
    
    background-color:#222222!important;
    /*display:flex!important;*/
    align-items:center!important;
    justify-content:center!important;
}

main{
    width:100%!important;
    overflow-x:auto!important;
    padding:1rem!important;
    
}
.heading_table{
    background-color:#4A6D8C!important;
    color:white!important;
}
table{
    margin:auto!important;
    width:100%!important;
    /*overflow:hidden!important;*/
    background-color:var(--white)!important;
    border-radius:10px!important;
    position:relative!important;
    border-collapse:collapse!important;
    z-index:1!important;
    color:var(--gray)!important;
    white-space:nowrap!important;
}

tbody tr:not(:last-child){
    border-bottom:1px solid rgba(1,1,1,0.2)!important;
}

th, td{
    padding:0.5rem!important;
    font-size:14px!important;
    gap:10px!important;
    position:relative!important;
    cursor:default!important;
}

td:last-child:hover a{
    color:var(--black)!important;
}

thead{
    background-color:var(--primary_lite)!important;
}

th{
    text-transform:uppercase!important;
}

td img{
    width:11px!important;
    height:11px!important;
    border-radius:50%!important;
    /*overflow:hidden!important;   */
    margin-right:5px!important;
}

tr td:last-child, tr td:nth-last-child(2), tr td:nth-last-child(3), tr td:nth-last-child(4), tr td:nth-last-child(6), tr td:nth-last-child(7), tr td:nth-last-child(8), tr td:nth-last-child(9){
    /*text-align:center!important;*/
}

tr:hover{
    background-color:#f9f9f9!important;
    color:#4A6D8C!important;
}

td:last-child:hover:after{
    content:"Project"!important;
    position:absolute!important;
    width:fit-content!important;
    left:-10%!important;
    top:-40%!important;
    transform:translate(0%, 50%)!important;
    font-size:12px!important;
    color:var(--lite)!important;
    background-color:var(--dark)!important;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px!important;
    border-radius:5px!important;
    padding:2px 4px!important;
    z-index:9!important;
}

table a{
    color:var(--gray)!important;
}

/*ICONS*/
.fa-arrow-up{
    color:var(--green)!important;
}

.fa-arrow-down{
    color:var(--red)!important;
}

.fa-mars{
    color:var(--blue)!important;
}

.fa-venus{
    color:var(--pink)!important;
}

.active, .inactive{
    padding:0rem 0.8rem!important;
    /*border-radius:40px!important;*/
}

.active{   
    background-color:#eef2fe!important;
    color:var(--primary)!important;
}

.inactive{   
    background-color:#fff0ee!important;
    color:var(--red)!important;
}

/*PROGRESS BAR*/
.progress{
    display:inline-block!important;
    background-color:var(--lite)!important;
    border-radius:40px!important;
    width:60px!important;
    height:10px!important;
    position:relative!important;
    /*overflow:hidden!important;*/
}

.progress em{
    position:absolute!important;
    left:0!important;
    top:0!important;
    height:10px!important;
    background-color:var(--primary)!important;
}

@media (max-width:720px){
    main{
        background:var(--primary)!important;
    }
    
    table{
        background-color:transparent!important;
    }
    main{
        overflow-y:auto!important;
        height:100%!important;
    }
    
    table thead{
        display:none!important;
    }
    
    table td{
        width:100%!important;
        display:block!important;
        text-align:right!important;
    }
    
    table td:not(:last-child){
        border-bottom:1px solid rgba(1,1,1,0.2)!important;
    }
    
    table td:before{
        content:attr(data-label)!important;
        z-index:1!important;
        float:left!important;
        color:var(--black)!important;
    }
    
    tr{
        background-color:var(--white)!important;
        border-radius:5px!important;
        display:block!important;
        margin:0.5rem 0!important;
    }
    
    tbody tr{
        border-bottom:none!important;
    }
    
    tr td{
        text-align:right !important!important;
    }
    
    td:last-child:hover:after{
        left:auto!important;
        right:10%!important;
        transform:translate(50%, 50%)!important;
    }
    
    th, td{
        padding:0.5rem 1rem!important;
    }
}


ab-container {
  border-radius: 8px!important;
  overflow: hidden!important;
  margin: 0 auto!important;

  display: flex!important;
  justify-content: center!important;
  flex-direction: column!important;

  min-width: 832px!important;
  filter: drop-shadow(2px 4px 6px #e0e0e0)!important;
}

.tabs {
  display: flex!important;
  max-width: fit-content!important;
  margin-left: 20px!important;
  gap: 10px!important;

  .tab,.inner-tab {
    flex: 1!important;
    width:200px!important;
    padding: 10px 20px!important;
    text-align: center!important;
    cursor: pointer!important;
    background: #4A6D8C!important;
    border: none!important;
    outline: none!important;
    font-size: 15px!important;
    color: white!important;
    border-top-left-radius: 8px!important;
    border-top-right-radius: 8px!important;
    margin-right: 2px!important;
    /*border: 1px solid #e7e7e7!important;*/

    &:last-child {
      margin-right: 0!important;
    }

    &.active {
      background: #34A7D8!important;
      border: 1px solid transparent!important;
      /*border-bottom: 2px solid #007bff!important;*/
      font-weight: bold!important;
      color: #222!important;
      position: relative!important;
      top: 1px!important;
    }

    &:hover:not(.active) {
      border: 1px solid transparent!important;
      background-color: #e2e1e1!important;
      border-bottom: 2px solid #989797!important;
      color:#222!important;
    }
  }
}

.tab-content {
  background: #fff!important;
  padding: 20px!important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)!important;
  border-top: 1px solid #e0e0e0!important;
  min-height: 100px!important;
  border-radius: 15px!important;

  .filters {
    display: flex!important;
    align-items: center!important;
    gap: 20px!important;

    .filter {
      display: flex!important;
      flex-direction: column!important;

      label {
        font-size: 15px!important;
        padding-bottom: 2px!important;
      }

      select {
        padding: 10px!important;
        border: 1px solid #ccc!important;
        border-radius: 4px!important;
        background: #fff!important;
        font-size: 14px!important;
        color: #333!important;
        width: 200px!important;
      }
    }

    .btn {
      padding: 10px 20px!important;
      font-size: 16px!important;
      border: none!important;
      border-radius: 4px!important;
      cursor: pointer!important;
      outline: none!important;
      margin-left: auto!important;
      margin-top: 20px!important;

      &.primary {
        background: #007bff!important;
        color: #fff!important;
        margin-right: 20px!important;
      }

      &.clear {
        background: transparent!important;
        color: #007bff!important;
        text-decoration: underline!important;
      }
    }
  }
}