@import url("//fonts.googleapis.com/css2?family=DynaPuff:wdth,wght@75..100,400..700&display=swa");
.site-header-image {
    background-repeat:no-repeat !important;
    background-position:center;
    background-size:cover;
    
      
  }
  
  body {
    background-image:url(https://i.postimg.cc/PrHtXb8D/IMG-8804.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:bottom;
    color:#08b0a3;
  
  }
  
  #app {
    background-image:linear-gradient(180deg, rgba(0,255,255,0) 0%, rgba(0,96,96,0) 50%, rgba(1,34,35,0.86) 100%) !important;
    background-color:rgba(235,235,235,0) !important;
  }
  
  #headerNav {
  margin-left:40px;
    margin-right:40px;
    border-radius:40px;
    background-color:#023f3e !important;
    margin-bottom:20px;
    border:5px solid #41e0d7;
    padding-bottom:0px !important;
    margin-top:-30px;
    height:60px;
    
  }
  
  .navbar-nav {
      margin-top:65px;
  }
  #headerNav a{
      font-family:DynaPuff !important;
  }
  
  main {
      background-image:url(https://i.postimg.cc/v8PCVyhN/IMG-9567.png  );
      background-position:bottom;
      background-size:cover;
      background-repeat:no-repeat !important;
  }
  
  .main-content {
   border-top-left-radius:30px;
   border-top-right-radius:30px;
   background-color:transparent !important;
  padding-bottom:40px;
  box-shadow: 0px 0px 50px rgba(0,129,119,0.5) !important;
  background-image:linear-gradient(rgba(0,51,50,0.6), rgba(1,49,54,0.79)); 
  }

  .navbar {
    z-index:2!important
  }
  
  a {
      color: #27CBBD !important;
        transition-duration:0.25s ;
      
  }
  
  a:hover {
    transform: scale(1.05) translateY(-5%);
      color:#aaf6ea!important;
  }
  
  p, .timestamp{
    color:#d3fff8
  }

  
  .card, list-group {
      border: 5px solid !important;
      border-image: linear-gradient(to bottom,#27CBBD, #15A4B8 ) 1 !important;
          position: relative;
      display: flex;
      flex-direction: column;
      min-width: 0;
      word-wrap: break-word;
      background-color: rgba(28,206,193,0.47) !important;
      background-clip: border-box;
  }
  
  h1,h2,h3,h4,h5,h6 {
      color:#aaf6ea !important;
      font-family:DynaPuff !important;
  }
      
  .list-group-item {
      background-color: rgba(1,68,61,0.8) !important;
  }
  
  #navbarDropdown, #browseDropdownRight {
      background-color:#cff9f3;
      color:#32a7a8 !important;
      border-radius:30px;
      margin-left:10px;
  }
  
  .navbar-toggler {
      border-radius:20px !important;
  }
  
  .navbar-toggler:hover {
      background-color:#32a7a8;
      transition-duration:0.25s;
  }
  
  .navbar-toggler:active {
      background-color:#32a7a8;
      border-radius:60px !important;
      transition-duration:0.25s;
  }
  
  #navbarDropdown:hover, #browseDropdownRight:hover {
      background-color: #32a7a8 ;
      color:#cff9f3 !important;
      border-radius:30px;
      transform:scale(1.0) !important
  }
  




 
 .sidebar .sidebar-header {
     background-color:#003036 !important;
    
 }
 

 .sidebar .sidebar-header a, .sidebar-section-header {
    font-family:DynaPuff !important;
    color:#d0f6f7 !important;
   
}
.sidebar-section {
     border-left: 5px solid !important;
     border-top: 5px solid !important;
     border-bottom: 5px solid !important;
     border-right:0px;
     border-image: linear-gradient(to bottom,#27CBBD, #15A4B8 ) 1 !important;
     background-image:linear-gradient(rgba(0,51,50,0.6), rgba(1,49,54,0.79)); 
     background-color:rgba(235,235,235,0) !important;
     background-clip: border-box;
}

 
   .sidebar a {
    text-transform: uppercase;
   color: #55d6c1 !important;
}
.sidebar a:hover {
    color:#0caa9d !important;
    background-color: #a2faf1 !important;
}

.dropdown-item:hover {
    color:#0caa9d !important;
    background-color: #a2faf1 !important;
}

.btn {
    border-radius:20px;
    transition: all 0.2s ease-in-out;
}

.btn:hover{
    transform: scale(1.0) translateY(-0%);
}

th, label, .fa-question-circle{
    color:#66dbca
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: .9rem;
    color: #4bced4;
    text-align: left;
    list-style: none;
    background-color: #023f3e;
    background-clip: padding-box;
    border-left:5px solid #41e0d7;
    border-right:5px solid #41e0d7;
    border-bottom:5px solid #41e0d7;
    border-radius: .25rem;
    border-top:0px solid;
    z-index:9 !important;
}

.btn-primary, .badge-primary{
    background-color:#4bced4;
    color:#e4fffb !important
}

.btn-primary:hover{
    background-color:#33b5bc
}

.btn-info, .badge-info{
    background-color:#0e7b81
}

.btn-info:hover{
    background-color:#6bcfd4
}

.btn-outline-info:hover {
    color: transparent;
    background-color: #6bcfd4;
    background-image: none;
    border-color: #6bcfd4;
}


.btn-secondary, .bg-secondary, .badge-secondary, .btn-outline-secondary:hover {
    color:#fff;
    border: 1px solid #6cc6c4;
    background-color:#6cc6c4;
}


.btn-outline-secondary {
    border: 1px solid #6cc6c4;
    color:#6cc6c4;
}
.btn-danger, .badge-danger, .bg-danger, .btn-outline-danger:hover {
    color:#85380f;
    border: 1px solid #c09b56;
    background-color:#c09b56;
}

.btn-danger:hover {
    background-color:#a04c1f;
    border: 1px solid #c09b56;
   color:#c09b56;
}

.btn-outline-danger{
    border:1px solid #c09b56;
    color:#c09b56;
}

.btn-warning, .badge-warning, .bg-warning, .btn-outline-warning:hover {
    color:#40850f;
    border: 1px solid #9ec056;
    background-color:#9ec056;
}

.btn-warning:hover {
    background-color:#40850f;
    border: 1px solid #9ec056;
   color:#9ec056;
} 

.btn-outline-warning{
    border:1px solid #9ec056;
    color:#9ec056;
}

.btn-success, .badge-success,.bg-success, .btn-outline-success:hover {
    color:#08785b;
    border: 1px solid #46ae7f;
    background-color:#46ae7f;
}

.btn-success:hover {
    background-color:#08785b;
    border: 1px solid #46ae7f;
   color:#46ae7f;
} 

.btn-outline-success{
    border:1px solid #46ae7f;
    color:#46ae7f;
}

    .nav-logo {
        transform:scale(0.8) ;
        z-index:300000 !important;
        width:400px !important;
        transition-duration:0.25s ;
        z-index:10000 !important
    }

    .nav-logo:hover {
        transform:scale(0.85) translateY(-1%);
        z-index:3 !important;
        width:400px !important;
      
    }
  
    .dont-grow a {
        transform: translateY(-0%);
    }

    .dont-grow a:hover {
        transform:translateY(-0%);
    }

    .bg-secondary, .btn-secondary {
        background-color:#035761 !important;
    }

    .site-mobile-header {
        z-index:9 !important;
        margin-top:10px
    }

    @media (max-width: 991px) {
        main.container-fluid {
            margin-top: 15px !important;
        }

        .sidebar {
            position: absolute;
            padding-left: 0px;
            text-align: left;
            background-color: rgb(27, 125, 120, 0.75) !important;
            backdrop-filter:blur(4px);
            z-index: 3;
            right: 0px;
            bottom: 0px;
            top: 0px;
            overflow-y: scroll;
            left: -100%;
            transition: left 0.2s;
        }

        .nav-logo {
            display:none !important;
            
        }
    
  
  a:hover {
    transform: scale(1.01) translateX(0px);
      color:#aaf6ea!important;
      
  }
  
  #headerNav {
  
    padding-bottom:10px !important;
    margin-top:0px !important;
     height:auto;
     margin-left:0;
     position:sticky;
     top:0;
     z-index:10 !important
    
  }
  #navbarDropdown, #browseDropdownRight {
    margin-left:0px;
        background-color: transparent ;
}
#navbarDropdown:hover, #browseDropdownRight:hover {
   
        background-color: transparent ;
}
  .navbar-nav {
      margin-top:0px;
  }}