* {
    margin: 0;
    padding: 0;
}
 
body {
    font-family: 'Prompt', sans-serif;  
}

li a {
    display: block;
    color: #fff;
    text-align: left;
    padding: 10px 10px;
    text-decoration: none;
    border-radius: 0px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    
}

li a:hover {                        
    display: block;
    color: #fff;   
    text-align: left;    
    padding: 10px 10px;
    text-decoration: none;
    border-radius: 0px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #0880f0;    
}

.active {
    background-color: #fff;
    border-radius: 0px;   
}   

.card:hover {
    opacity: 0.5;
    color: #0880f0;
}

.input-border {
    border: none; 
    border-bottom: 1px solid #888888; 
    border-radius: 0px;
    background-color: #f5f5f5;
}

.input-border:focus {
    border: none; 
    border-bottom: 2px solid #0880f0; 
    border-radius: 0px;
}

.main-title {
    background-image: url("../img/dinspector_cover_img_1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 400px;
    display: grid;
    align-content: center;
    justify-content: center;
}

.main-title h3 {
    margin-top: 5px; 
    padding: 5px;     
    color: #5a5a5a;    
    font-weight: 500;
}

.button {
    width: 300px;
    height: 60px;
    font-size: 50%;
    font-weight: 500;  
    text-align: center;
    align-content: center;
    display: inline-block;
    border: 1px solid #00bbff;
    border-radius: 0px;
    border-bottom: 3px solid #00bbff;
    background: #ffffff;
    padding: 10px 20px;
    color:  #06419e;
    text-decoration: none;
    transition: 0.3s;
}

.button:focus {
    outline: none;
}

.button:hover {
    width: 300px;
    height: 60px;
    font-size: 50%;
    background: #fff;
    color: #00bbff;
    text-decoration: none;
    border-left: 40px solid #00bbff;  
}

.quotation {
    width: 250px;
    height: 50px;
    font-size: 1.2rem;
    font-weight: 500;  
    text-align: center;
    align-content: center;
    display: inline-block;
    border: 1px solid #00bbff;
    border-radius: 0px;
    border-bottom: 3px solid #00bbff;
    background: #ffffff;
    padding: 10px 20px;
    color:  #00bbff;
    text-decoration: none;
    transition: 0.3s;
}
.quotation:hover {
    width: 250px;
    height: 50px;
    font-size: 1.2rem;
    font-weight: 500;  
    text-align: center;
    align-content: center;
    display: inline-block;
    border: 1px solid #00bbff;
    border-radius: 0px;
    border-bottom: 3px solid #00bbff;
    background: #00bbff;
    padding: 10px 20px;
    color:  #ffffff;
    text-decoration: none;
    transition: 0.3s;
}

/* Style the links inside the pill navigation menu */
.pill-nav a {
    display: block;
    color: black;
    padding: 10px 10px;
    text-decoration: none;
    font-size: 17px;
    border-radius: 0px;
}

/* Change the color of links on mouse-over */
.pill-nav a:hover {
    background-color: #fff;
    color: #888888;
}

/* Add a color to the active/current link */
.pill-nav a.active {
    background-color: rgb(218, 218, 218);
    color: white;
    border-radius: 0px;
}

.card {
    border: #ddd;
}   

.go2top {    
    position: fixed; 
    margin-top: 500px;
    padding-top: 8px;
    width: 50px;
    height: 50px;
    font-size: 1.5rem; 
    text-decoration: none;    
    text-align: center;            
    color:  #808080;
    border:2px solid #808080;      
    z-index: 1;      
}
.go2top:hover {    
    position: fixed; 
    margin-top: 500px;
    padding-top: 8px;
    width: 50px;
    height: 50px;
    font-size: 1.5rem; 
    text-decoration: none;    
    text-align: center;            
    color:  #ffffff;
    background-color: #808080;
    border:2px solid #808080;      
    z-index: 1;     
}

.border-slide {
    border-top: 2px solid #d1d1d1; 
    border-bottom: 4px solid #c1c1c1;
}

.text-slide {
    font-size: 25px;
    padding: 0px 0px;
    margin: 0px 0px;    
    font-weight: 300;
    color: #727272;    
}
.sub-menu {
    font-size: 0.8rem;    
}