@font-face {
  font-family: "Montserrat";
  src: url("/public/fonts/Montserrat/Montserrat-VariableFont_wght.ttf");
}
*{
  font-family: "Montserrat";
}
/* Styles for the dropdown menu */
#jsddm{ 
   margin-top: 0px;
   padding: 0;
   text-align: right;
}

#jsddm li{ 
  
   list-style: none;
}

#jsddm li a{
   display: block;
   background: #555150;
   padding: 5px 12px;
   text-decoration: none;
   border-right: 1px solid white;
   width: 90px;
   color: #EAFFED;
   white-space: nowrap;
  
}

#jsddm li a:hover{
   background: #000;
}

#jsddm li ul{
   margin: 0;
   
   padding: 0;
   position: absolute;
   visibility: hidden;
   border-top: 1px solid white;
   z-index: 2;
}

#jsddm li ul li{  
   float: none;
   display: inline;
}

#jsddm li ul li a{  
   width: 115px;
   background: #555150;
}

#jsddm li ul li a:hover{
   background: #000;
}
/* End styles for the dropdown menu */


#div-menu{
    margin-left: 10px;
    font-size: 1.5em;
    text-transform: capitalize;
}

/* CSS Classes */

.div-login{
    margin-left: 30%; 
    margin-top: 0%; 
    border-color: #007bff; 
    border-style: solid; 
    border-width: 1px; 
    height: auto;
    width: 600px;
}

.margin-div-user{
    float: right;
}

.height-card{
    height: 700px;
}


.footer-home{
    height: 2rem;
    background: #303237;
    position: fixed;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: right;
    font-size: 1rem;
    padding-top: 0.25rem;
    padding-right: 0.5rem;
}




               @keyframes mymove {
                      from {opacity: 0;}
                      to {opacity: 1;}
                    }

              




                html,body{
                    height: 100% !important;
                    width: 100% !important;
                    background: #505050;
                }

                .jumbotron {
                    padding: 0%;
                    padding-left: 3%;
                    padding-right: 3%;
                    background: #303237;
                    border-radius: 0px; 
                    
                    height: 15vh; 
                    width: 100%;  

                }


                a{
                        font-size: calc(15px + 0.3vw);
                        color: white;
                        font-family: 'Ubuntu', sans-serif;
                }

                .dropdown{
                    background: #303237;
                    font-size: calc(20px + 0.3vw);
                        color: white;
                        font-family: 'Ubuntu', sans-serif;
                        box-shadow: none;


                }

                #link-login{
                    background: #303237;
                    font-size: calc(20px + 0.3vw);
                        color: white;
                        font-family: 'Ubuntu', sans-serif;
                        box-shadow: none;
                        max-height: 14vh;

                }

                #link-login:focus{
                    background:  #303237;
                    font-size: calc(20px + 0.3vw);
                        color: #ffc107;
                        font-family: 'Ubuntu', sans-serif;

                }

                 #link-login:hover{
                    background:  #303237;
                    font-size: calc(20px + 0.3vw);
                        color: #ffc107;
                        font-family: 'Ubuntu', sans-serif;

                }

                #link-login:acitve{
                    background:  #303237;
                    font-size: calc(20px + 0.3vw);
                        color: #ffc107;
                        font-family: 'Ubuntu', sans-serif;

                }



                .activemenu{
                     color: #ffc107 !important;
                    
                }

                #div-menu{
                     width: 100% !important;
                     overflow-y: auto !important;
                    
                }

                 #menu-user{
                         width: fit-content;
                        position: absolute;
                        right: 0px;
                        top: 1vh;
                          

                    
                }

                .vertical-center {
  
                      display: flex;
                      align-items: center;
                    }

               .horizontal-center {
  
                      text-align: center;
                    }

                .card{
                    width: 100%;
                }

                .card-header{
                     font-family: 'Roboto', sans-serif;

                }

                .card-title-home{
                     font-family: 'Roboto', sans-serif;
                     color:black;

                }

                .ui-dialog-title,.ui-dialog-titlebar{
                     font-family: 'Roboto', sans-serif;
                      font-size: calc(20px + 0.3vw);
                      color: white;
                      background: #505050;

                }

                .ui-dialog,.ui-dialog-content{
                     font-family: 'Roboto', sans-serif;
                     font-size: calc(20px + 0.3vw);
                     width: 80vw !important;

                }

              
                .uibutton{
                   font-family: 'Roboto', sans-serif !important;
                     font-size: calc(17px + 0.3vw) !important;
                     max-width: 40vw;
                    
                }

                .circle {
                    height: 4rem !important;
                    width: 4rem !important;
                    font-size: 2rem !important;
                    border-radius: 50% !important;
                    box-shadow: 0 5px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);

                  }

                  .circle-small {
                    border: none;
                   position: sticky;
                    left: 80%;
                    height: 3rem !important;
                    width: 3rem !important;
                    font-size: 1rem !important;
                    border-radius: 50% !important;
                    box-shadow: 0 5px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);

                  }


                  .image-card-home{
                    max-width: 100% !important;
                    max-height: 100% !important;
                    height: auto;
                    width: auto;
                    display: inherit !important;

                  }

                  .circle {
                    height: calc(3rem + 2vh)  !important;
                    width: calc(3rem + 2vh) !important;
                    font-size: 2rem !important;
                    border-radius: 50% !important;
                    box-shadow: 0 5px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%) !important;
                  }

                  .fixedbutton {
                    position: fixed;
                    bottom: 10px;
                    right: 10px;
                  }

                  .btn-warning {
                    color: #212529;
                    background-color: #ffc107;
                    border-color: #ffc107;
                  }

                  .btn {
                    display: inline-block;
                    font-weight: 400;
                    color: #212529;
                    text-align: center;
                    vertical-align: middle;
                    cursor: pointer;
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                    background-color: transparent;
                    border: 1px solid transparent;
                    padding: .375rem .75rem;
                    font-size: 1rem;
                    line-height: 1.5;
                    border-radius: .25rem;
                    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
                }