@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

*{
    margin:0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
 
}
#progress{
    background-color: #297e25;
    height: 20px;
    border-radius: 30px;
    width: 0px;
}
.badge {
  background-color: #ff9100;
  color: white;
  padding: 1px 1px;
  text-align: center;
  height: 20px;
  min-width: 20px;
  width: auto;
  
  font-size:medium;
  border-radius: 5px;
  position: fixed;
  z-index: 2;
  margin-top: 40px;
  margin-left: 120px;
 
}
img.avatar.online{
  border:4px solid #048804;
}
img.avatar.sleep{
  border:4px solid rgb(185, 112, 3);
}
img.avatar.disconnect{
  border:4px solid rgb(111, 111, 111);
}

#logo{
    width: 100%;
    height:100px;
    color: white;
    padding: 30px;
    text-align: center;
}
#logo img{
    height: 90px;
}
body{
    background-image: url("img/tlo_new.jpg");
    background-repeat:no-repeat;
    background-attachment: fixed;
  background-size: cover;


}
/* Float four columns side by side */
.column {
  float: left;
  width: 25%;
  padding: 20px 20px;

}

/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */

.card {
  box-shadow: 4px 8px 30px rgba(0, 0, 0, 0.5);
  padding: 16px;
  text-align: center;
  background-color: #df9500;

  border-radius: 10px;
  color:white;
  height: 300px;
  font-size: 48px;
  transition: transform .2s; 
  cursor: pointer;
}
.card p{
  margin-top:50px;
  font-size: 36px;
}
.card:hover{
  transform: scale(1.5);
}
#tlo{  

  margin:auto;

    width: 100%;
    height: 100%;
    background-color: rgba(26, 25, 25, 0);

  padding: 0px;
    
    
}
#logowanie{
  /* Center child horizontally*/
    padding: 30px;
    margin: 50px 0;
    background-color: #3c3c3c8f;;
    height: 450px;
    width: 500px;
  color:white;
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.246);
    backdrop-filter: blur(10px);
}


form{
    background-color: rgba(31, 58, 58, 0);
  
    padding: 0px;
    margin-top: 30px;
    border-radius: 10px;
    
}
#rejestruj, input,select {
  
    width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 2px solid rgb(90, 90, 90);
  
  border-radius: 10px;
  box-sizing: border-box;
    text-decoration: none;
font-size:100%;
  }

 
input[type="submit"]:hover, #rejestruj:hover, button:hover{
     background-color: rgb(17, 153, 12);
    color: white;
}
input[type=submit], button {
      width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  background-color: #005a87;
  border-radius: 10px;
  box-sizing: border-box;
font-size:100%;
  text-decoration-line: none;
  display:inline-flexbox;
 color:white;
border:none;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.379);
}
footer{
  position: relative;
    bottom: 10px;
    height: 10px;
    margin-top: 100px;
    width: 100%;
    color:rgba(255, 255, 255, 0.701);
    text-shadow:5px 5px 20px #100b0bcd;
    text-align: center;
    font-size: 20px;
   z-index: -1;
}
.plik{
  height: 200px;
  width: 300px;
  border-radius: 10px;
  margin:20;
}
div.scroll-container {
  background-color: #38b01300;
  overflow: auto;
  white-space: nowrap;
}
.plik:hover{
  opacity: 0.7;
}



#baner{
    width: 100%;
    height:100px;
    color: white;
 
    background-color: #005a87;
    box-shadow: 5px 10px 10px rgba(2, 0, 0, 0.467);
    position: fixed;
    z-index: 1;
    top:0;
  
}
.navnone{
  display: block;
}
.logotyp img{
    margin-right: 15px;
  margin-top: -20px;
    float: left;
    height: 200%;
   display: block;
}
.logotyp{
    
    padding:30px 20px;
    float:left;
   width: 45%;
   height: 100px;
}
.notification{
    float: right;
    font-size: 48px;
    display:inline;
    height: 100px; 
    
  
}

.notification div{
    float: right;
    text-align: center;
    padding: 10px;
    display:inline;
    width: auto;
    height:90px;
    margin-right: 10px;
    text-shadow: 4px 4px 20px rgba(2, 0, 0, 0.5);
}
.notification div:hover{
color:#022e46;
}
.notification n{
  float: right;
  font-size: 20px;
  width: 100%;

  height:25px;

}
.notification img.avatar{
  width:50px;
  height: 50px; 
  margin:0;
  border-color: none;
}
.sekcja img.avatar{
  width:100px;
  height: 100px; 
 margin:0;
  border-color: none;
}
#prawy{  
    padding: 80px;
    padding-top: 120px;
    min-height: 100%;
    height: auto;
    width: 100%;
  
    justify-content: center;
    display:flow-root;
    position: relative;
    overflow:auto;
    overflow-y: hidden;
    overflow-x: hidden;
   
    z-index: 0;
    
}





  /* Lista tabelka na stronie*/
 
  .sekcja {
    display: block;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 20px;
    background-color: #ffffff5d;
    color: #031c32;
    clear: both;
    height: auto;
    border-radius: 10px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.546);
    margin-bottom: 25px;
    backdrop-filter: blur(15px);
    font-size: 110%;
  }

 table{
      width: 100%;
      border-collapse: collapse;
      font-size: 80%;
      overflow: scroll;
    
  }
  th{ height: 30px;
      color:white;
  
     background-color:#005a87;
  }
  tr,td{
      height: 20px;
      
      padding: 2px;
  text-align: center;

     
  }
  tr:hover{
    background-image: linear-gradient(rgb(3, 77, 120),rgba(38, 113, 192, 0.642));
    color:white;
  }
  #bok {
      width: 300px;
    margin-left: 30px;    
  }
  h2{
    
      margin:20px;
  }
  h3{
    margin:10px;
    clear: both;
  }
  
  .opcje{
      display:none;
      border: none;
      
  }

  nav{display: none;}
  /* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: rgb(6, 147, 41); /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 4px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 20; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  bottom: 30px; /* 30px from the bottom */
  box-shadow: 4px 4px 50px rgba(2, 0, 0, 0.767);
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {

  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 3.5s;
  animation: fadein 0.5s, fadeout 0.5s 3.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}
.file{
    width: 100px;
    height: 100px;
    float:left;

    margin:1%;
    text-align: center;
    padding: 10px;
    
    background-color:antiquewhite;
}
.file-img{
    
    height:50px;
    width: 70px;
    clear: both;
    margin-left: auto;
    box-shadow: 4px 4px 0px #ffa500c4;
    border-radius: 10px;
}
.desc{
    padding: 5px;
    text-align: center;
    margin:2px; 
    word-break: keep-all;
    overflow: hidden;
    bottom: 0;
    position:relative;
}
.file-img:hover{
    box-shadow: 4px 4px 10px rgba(2, 0, 0, 0.767);
}
.ico{
    font-size:50px;
    color: darkorange;
    
}
.ico:hover{
   text-shadow: 4px 4px 10px rgba(2, 0, 0, 0.767);   
}

#info{
  width: 90%;
  border-radius: 30px;
  background-color:#ffffff;
  color:#073055;
  margin:30px auto;
  padding: 40px;
  text-align:center;
  box-shadow: 4px 4px 10px rgba(2, 0, 0, 0.767);
}
.animate-tool {
  height: auto; /* Automatyczna wysokość */
  width: 100%; /* Szerokość równa 100% minus 40% */
  padding: 2px; /* Odległość 2 piksele od góry */
  display: none;
  flex-flow: row wrap;
  justify-content: center;

}
.dialog {
  clear: both;
    height: auto; /* 100% Full-height */
    width: 100%; /* 0 width - change this with JavaScript */  
    padding: 2px; /* Place content 60px from the top */

    z-index: 0;
    position:relative;
    display: inline-block;

}
.dialog a{
  display: inline;
    height: 40px;
    width:100%;
    padding: 13px;
    margin:10px;
    text-decoration: none;
    font-size: 14px;
    color: white;
    float:left;
    transition: 0.3s;
   
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 2px 10px rgba(2, 0, 0, 0.367);
    overflow: hidden;

}

  
  /* The navigation menu links */
 .animate-tool a {
  display: inline-flex;
  height: 40px;
  padding: 13px;
  margin: 5px;
  text-decoration: none;
  font-size: 14px;
  color: white;
  float: left;
  transition: 0.3s;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0px 2px 10px rgba(2, 0, 0, 0.367);
  overflow: hidden;

  flex-flow: row wrap;
  justify-content: center;

  }
  .animate-tool a:hover{
    background-image: linear-gradient(to right,rgba(218, 218, 218, 0),rgba(0, 0, 0, 0.491));
    cursor: pointer;
  }
.slidecontainer {
  
   float:left;
    width: 100px;
}
#kartka{
  width:300px;
  height:auto;
  border:4px solid gray;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  background-color: #ffffff;
  padding: 5px;
  box-shadow: 4px 4px 10px rgba(2, 0, 0, 0.767);
  color:#464846;
  float: left;
  margin: 20px;
  z-index: 1;
  position: relative;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
 background-color: #1b141400;

}
/* Track */
::-webkit-scrollbar-track {
 

  background-color: #1b141400;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #005a87; 
  border-radius: 20px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #7a7a7a; 
}

.note_stopka{
  height: 40px;
  width: 100%;
  border-top:2px solid rgb(156, 113, 113);
  bottom: 0;
  position: relative;
  font-size: 20px;
  font-weight: 800;
}
.note_naglowek{
  height: 50px;
  width: 100%;
font-size: larger;
  top: 0;
  position: relative;
  margin-bottom: 60px;
  clear: both;
  display: block;
 

}


#loader {
  margin:0;
 width:100%;
    height:100%;
    position:fixed;
    z-index:9999;
    background:url("img/loader.gif") no-repeat center center rgba(0, 0, 0, 0);
  cursor:progress;
}
#loader  h3{

  margin-top:40%;
  color:white;
  text-align: center;
  text-shadow:5px 5px 20px #100b0bcd;
  
}
/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-400px; opacity:0 } 
  to { bottom:-0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-400px; opacity:0 } 
  to{ bottom:-0px; opacity:1 }
}

.animate-tool {

  -webkit-animation-name: animatetool;
  -webkit-animation-duration: 1s;
  animation-name: animatetool;
  animation-duration: 1s
}

@-webkit-keyframes animatetool {
  from { bottom:-100px; opacity:0 } 
  to { bottom:-0px; opacity:1 }
}

@keyframes animatetool { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0px; opacity:1 }
}

/* Style the tab */
.tab {
  float: left;
  border: none;
  background-color: #f1f1f100;
  width: 20%;
  height: 380px;
  overflow-y: scroll;
  overflow-x: clip;
  padding:2px;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  display: block;
  background-color:#1d1d1d;
  color: rgb(215, 150, 0);
  padding: 15px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
  color: #005a87;
}

/* Create an active/current "tab button" class */
.tab button.active {
  background-color: #005a87;
  color:rgb(255, 255, 255);
}

/* Style the tab content */
.tabcontent {
  float: left;
  padding: 0px 12px;
  border:none;
  width: 80%;
  border-left: none;
  height: 500px;

  
  background-color:#005a871c;
  display: none;
  overflow: scroll;
}
/*modal/
  /* The Modal (background) */
  .modal {
    display:none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 2; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.645); /* Black w/ opacity */
    background-blend-mode: color-burn;
    color:#464846;
  }
  /* Add Animation - Zoom in the Modal */
.modal-content{
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}
  
  /* Modal Content/Box */
  .modal-content {
    background-color: #3c3c3c;
    margin: 5% auto; /* 15% from the top and centered */
    padding: 20px;
    border:none;
    width: 80%; /* Could be more or less, depending on screen size */
    border-radius: 10px;
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.246);
    height: 650px;
    display: block;
   transition: 0.6s;
   color:white;
  }
  .modal-content a{
    width: 40%;
    margin:4px;
    background-color:#0e7c0a;
    color: white;
    padding: 14px 20px;
   
    text-decoration: none;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    font-size: large;
    position:relative;
    
    
  }
  .main .powiadomienie{
    background-image: linear-gradient(45deg,#02334e,#005a87);
  }
  .main .cke_button  {

    background-color :#1471a35a; 
  
   width: 20px;
  
    padding: 5px;
    text-align: center;
    
    text-decoration: none;
    display: inline-flex;
    border-radius: 20px;
  }
  .main .cke_combo_button{
    height: 20px;
     width: auto;
     background-color:#1471a349;
   
    
     height: auto;
     padding: 2px;
     text-align: center;
     
     text-decoration: none;
     display: inline-flex;
     
   }
.main{
    border:1px solid rgba(128, 128, 128, 0.126);
    width: 100%;
    max-height: 480px;
    padding: 10px;
    text-align: center;
    background-color:rgba(170, 170, 170, 0.082);
    overflow-y: scroll;
    overflow-x: hidden;
  }
 .main a{
  
    width: 100%;
    height: auto;
    padding: 20px;
   float: right;

    text-decoration: none;
    display: block;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.246);
  }
  .main a i{
  margin-top:-20px;
   font-size: 300%;
    float:left;
  color:rgba(255, 255, 255, 0.385)
 
  }
  /* The Close Button */
  .close {
    color: #005a87;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: rgb(205, 25, 25);
    text-decoration: none;
    cursor: pointer;
  }
  #addclick{
    width: 90px;
    height: 90px;
    border-radius: 90px;
    box-shadow: 4px 4px 30px rgba(5, 5, 5, 0.963);
    background-color:#ffae00;
    position:fixed;
    padding: 24px;
    font-size: 250%;
    border:0px #1471a3 solid;
    z-index: 1;
    bottom: 30px;
    right: 30px;
    overflow:unset;
    color: white;
    transition: 0.2s;
  }
  #addclick a{
    width: 270px;
    height: 40px;
    background-color:#073055;
    border-radius: 90px;
    padding:10px;
    margin:3px;
    margin-left: -230px;
    
   display:block;
    font-size: 50%;
    border:4px #1471a3 solid;
 text-decoration: none;
    cursor:pointer;
    color: white;
   
  }
  #addclick:hover{
    height: 300px;
    background-color:#1471a3;
    transition: 0.3s;
   
  }
  @media screen and (max-width: 1100px) {
    .sekcja img.avatar{
      width:80px;
      height: 80px; 
   
    }
    .badge {

      position: fixed;
      z-index: 2;
      margin-top: 0px;
      margin-left: 5px;
      bottom:15px;
      right: 5px;;
    }
    .item.navnone{
      display:none;
    }
    .column {
      width: 100%;
      display: block;
      margin-bottom: 20px;
    }
    .card:hover{
      transform: scale(1.2);
    }
  
    .tab {
     display:inline-block;
     overflow-y:clip;
     overflow-x:auto;
     white-space: nowrap;
      width: 100%;
      height: 80px;
      clear:both;
  
     
     
    }
    .animate-tool a {
   
     
      font-size: 14px;
      padding: 10px;
      height: auto;
      display: inline-flex;
      align-items: center;
      align-content: center;
      flex-wrap: nowrap;
      justify-content: center;
      flex-direction: column;
      
  
    }
    .animate-tool  {
      border-radius: 10px;
      width: 100%;
      position:sticky;
      left:0px;
      display:none;
      height: auto;

  
    }
    .container {
      font-size: 12px;
    }
    /* Style the buttons that are used to open the tab content */
    .tab button {
      display: inline-block;
    
      height:57px;
      padding: 20px 20px;
      width: 150px;
      border: none;
      outline: none;
      text-align: center;
    
    }
    
   
    /* Style the tab content */
    .tabcontent {
      float: left;
   
      height: 480px;
      width: 100%;
      border-left: none;
     
    }
   .sekcja.tabcontent {
  
      height: auto;
     
    }
  }

  @media screen and (max-width:1100px) {
    #baner{
  
      height:50px;
   
  }
  .sekcja{
    font-size:80%;
  }

  .notification{
  
   height:60px;
  }
      .notification div {
          font-size: 22px;
        float: right;
        display: inline;
  
        padding: 14px;
        display:inline;
        width: 50px;
     
        margin-right: 10px;
        height:60px;
  
      }
      .notification n{
          
          display:none;
      }
      .notification img.avatar{
        width:35px;
        height: 35px; 
        margin-top:-6px;
       
      }
      .logotyp{
          font-size: 0.6em;
          padding:0px 5px;
       
          width: 70%;
          display: inline;
          height: 50px;
          
  display: flex;
  justify-content:space-around;
  align-items: center;
      }
      .logotyp img{
       margin-top: 0;
        height: 80%;
    }
     
      #prawy  {
      margin-top: 50px;
          padding: 10px;
          width: 100%;
           
        
      }
      #tlo{
        padding-top: 20px;
      }
      .sekcja, #bok {
          overflow:none;
          
          width: 100%;
      }
      input{
        width: 100%;
      }
      
      .modal-content {
        margin: 0,auto; /* 15% from the top and centered */
      padding: 10px;
        font-size: 90%;
      width: 100%; /* Could be more or less, depending on screen size */

       
      }

      #addclick{
        width: 50px;
        height: 50px;
        
        padding: 12px;
        font-size: 170%;
        bottom:50px;
        right:10px;
       
      }
      nav{
        display:block;
      }
    }

  .avatar{
    width: 250px;
    height: 250px;
    background-color:#073055;
    border-radius: 300px;
    box-shadow: 4px 4px 20px rgba(2, 0, 0, 0.767);
    margin:3px;
  
 
    border:4px #1471a3 solid;

  }
  #profil{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .diactive{
   
    pointer-events: none;
    color:#7a7a7a;
    cursor:not-allowed;
  }
  .diactive:hover{
    transform: scale(0.9);
  }
 /* komentarze*/
 .container {
  border: 2px solid #154d92;
  background-color: #0086c933;
  border-radius: 5px;
  padding: 10px;
  margin: 16px 0;
  z-index: 1;
 
}

.container::after {
  content: "";
  clear: both;
  display: table;
}

.container img {
  float: left;
  margin-right: 20px;
  border-radius: 50%;
}

.container span {
font-size: 107%;
  margin-right: 15px;
  font-weight: 300;
}
.container i {
  font-size: 98%;
  float:right;
}
.com{

  margin-top: 5%;
  width: auto;
  display: none;
}

 ul, ol{
  margin-left:50px;
 }
 .accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 15px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
  transition: 0.4s;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.174);
  margin-top:10px;
  z-index:0;
  position:relative;
  border-radius:10px;
}

.active, .accordion:hover {
  background-color: #004a83; 
  color: #ffffff;
}

.panel {
  padding:10px;
  margin-top:10px;
  display: none;
  background-color: white;
  color: #252424;
  overflow: auto;
  justify-content: center;
   height:auto;
   z-index:1;
      border-radius:10px;
      transition:  display 0.5s ease-in-out; 
       box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.274);
}
  
.koncowa {
  float: right;

  margin:5px;
}

.koncowa a{
  float: right;
  color: #e39f00;

  padding: 0;
  margin:5px;
  text-decoration: none;
}
.koncowa a:hover{

  color: rgb(206, 0, 0);
  font-weight: bold;

}
/* Dropdown Button */
.btn {
  background-color: #2196F3;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  outline: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: absolute;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.btn:hover, .dropdown:hover .btn  {
  background-color: #0b7dda;
}
.alert {

  font-size: small;
  padding: 2px;
  background-color: #f44336; /* Red */
  color: white;
  z-index: -1;
  box-shadow: 5px 5px 20px rgb(151, 9, 9);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
}

.help{
  width: 60px;
  height:25px;
  padding: 5px;
  border-radius: 10px;
  background-color: #073055;
  position: fixed;
  bottom: 2px;
}


/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;

  width: auto;
  background-color: #55555597;
  color: #fff;
  text-align: center;
  padding: 5px 2px;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 2;

  margin-bottom: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}



/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
label.editphoto {
  margin-top: 280px;
  position: absolute;
  width: 167px;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
  background-color: #004a83;
  padding: 10px;

}
nav{
  width: 100%;
    height:auto;
    color: white;
 font-size:70%;
    background-color: #005a87;
    box-shadow: 0px -3px 5px rgba(2, 0, 0, 0.267);
    position: fixed;
  
    bottom:0;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-around;
    align-content: center;
    z-index: 2;
}


nav a {
  color: #fff;
    text-decoration: none;
    padding: 8px 15px;

    display: flex;
    flex-direction: column;
  
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}

nav a:hover {
    color: #dba500;
}
.pagination{
  overflow:scroll;
width: 100%;padding: 10px;

}
.pagination a{
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  background-color: #1471a36a;
  padding: 6px;
  font-size: revert;
  border-radius: 5px;
}
.pagination a.active {
  font-weight: bold;
  background-color: #df9500;
}