:root {



    --bs-body-font-family: 'DM Sans', sans-serif;

    --bs-text-opacity:1;

    --bs-bg-opacity: 1;







    /*COLORS*/

    --text-primary:#000000;

    --primary: #0083A5;

    --secondary: rgba(0, 131, 165, 0.20);

    --red: #FF0000;

    --lightred: #ff3d3d;

    --cyan: #00FFFF;

    --blue: #0000FF ;

    --darkblue:#00008B;

    --lightblue:#ADD8E6;

    --purple:#800080;

    --yellow:#FFFF00;

    --lime:#00FF00;

    --magenta:#FF00FF;

    --pink:#FFC0CB;

    --white:#FFFFFF;

    --silver:	#C0C0C0;

    --grey:	#D8D8D8;

    --darkgrey: #262a2e;

    --black:	#000000;

    --orange: 	#FFA500;

    --brown: 	#A52A2A;

    --maroon: 	#800000;

    --green:	#008000;

    --olive: 	#808000;

    --aquamarine:	#7FFFD4;

    --badgelightgray: #EAEAEA;

    --badgegreen: #4CA12D;

    --badgeorange: #FF6B00;

    --badgered: #FF6752;

    --badgedarkblue:#184897;

    --highlightbadgegreen: #EBFCF5;

    --highlightbadgered: #FFEBEB;



    --hh-color: #2A637E;

    --header-color: #262a2e;



    /*LINK COLORS*/



    --primary-link: black;

    --secondary-link: blue;



    /*HOVER COLORS*/



    --primary-hover: grey;

    --secondary-hover: purple;



    /*BTN COLORS*/

    --primary-btn: blue;

    --secondary-btn: red;

    /*EIND BTN COLORS*/



    --btn-rounded1: 0.375rem !important;

    --btn-rounded2: 50 rem !important;



    /*HEADERS*/



    --primary-h1: 2.5rem;

    --secondary-h1: 2.25rem;

    --primary-h2: 2rem;

    --secondary-h2: 1.85rem;

    --primary-h3: 1.75rem;

    --secondary-h3: 1.60rem;

    --primary-h4: 1.5rem;

    --secondary-h4: 1.35rem;

    --primary-h5: 1.25rem;

    --secondary-h5: 1.10rem;

    --primary-h6: 1rem;

    --secondary-h6: 0.85rem;

}



/*Buttons*/

/*Primary Button*/

.cancel{
    background-color:#eaeaea !important;
    color: #262a2e !important;
    border: 1px solid #eaeaea !important;
}

.btn-1{

    background-color: var(--primary)!important;

    color: var(--white) !important;

    border-radius: 8px;

    border: 1px solid var(--primary) !important;

    padding: 5px;

    white-space: nowrap;

}



/*Secondary Button*/

.btn-2{

    color: var(--primary);

    border-radius: 8px;

    background: rgba(0, 131, 165, 0.20);

    padding: 5px;

}



/*Empty Button*/

.btn-3{

    background-color:var(--white)!important;

    border-color:var(--primary)!important;

    color:var(--primary)!important;

    border: 1px solid;

    border-radius: 8px;

    padding: 5px;

}


.cancel:hover, .cancel:active, .cancel:focus{
    background-color:#262a2e !important;
    color:#eaeaea !important;
    border: 1px solid #262a2e!important;
}


.btn-1:hover, .btn-1:active, .btn-1:focus{

    background-color:var(--white)!important;

    border-color:var(--primary)!important;

    color:var(--primary)!important;

    stroke: var(--primary)!important;

}



.btn-2:hover, .btn-2:active, .btn-2:focus{

    color:var(--white);

    background-color:var(--primary);

    stroke: var(--primary)!important;

}



.btn-3:hover, .btn-3:active, .btn-3:focus{

    color:var(--white)!important;

    background-color:var(--primary)!important;

}



.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus {

    background-color: var(--white) !important;

    color: var(--grey) !important;
    border: 1px solid var(--grey) !important;

    box-sizing: border-box !important;



}



/*Gray Button*/

.btn-secondary{

    background: #D8D8D8 !important;

    color: var(--white) !important;

    border: 1px solid  transparent !important;

    padding: 5px;

    border-radius: 8px;



}



/* danger/uitlog/cancel buttons */

.btn-gevaarlijk {

    color: #FF0000 !important;

    border-radius: 8px;

    background-color: rgba(255, 0, 0, 0.2);

    border: none;

    padding: 5px;

}



.btn-gevaarlijk:hover, .btn-gevaarlijk:active, .btn-gevaarlijk:focus{

    color: #FFFFFF !important;

    background-color: #FF0000 !important;

    stroke: var(--primary)!important;

}



.btn-square {

    aspect-ratio: 1/1 !important;

}


.badge-primary{
    background: var(--secondary) !important;
    color: var(--primary) !important;
}

.badge-success{
    background: #D0EFC4 !important;
    color: #4CA12D !important;
}

.badge-danger{
    background-color:#FFCDC6 !important;
    color:#D90808 !important;
}
.badge1{

    color: var(--white);

    border-radius: 8px;

    background: #E3EBEE;

    border: none;

    padding: 0.5rem 0.625rem;

    font-size: 70%;

}



.badge-lightgray {

    color: var(--black);

    border-radius: 8px;

    background: var(--badgelightgray);

    border: none;

    padding: 0.5rem 0.625rem;

    font-size: 70%;

}



.badge-green {

    color: var(--white);

    border-radius: 8px;

    background: var(--badgegreen);

    border: none;

    padding: 0.5rem 0.625rem;

    font-size: 70%;

}



.badge-darkblue {

    color: var(--white);

    border-radius: 8px;

    background: var(--badgedarkblue);

    border: none;

    padding: 0.5rem 0.625rem;

    font-size: 70%;



}



.badge-orange {

    color: var(--white);

    border-radius: 8px;

    background: var(--badgeorange);

    border: none;

    padding: 0.5rem 0.625rem;

    font-size: 70%;

}



.badge-red {

    color: var(--white);

    border-radius: 8px;

    background: var(--badgered);

    border: none;

    padding: 0.5rem 0.625rem;

    font-size: 70%;

}



.badge-green-highlight {

    color: var(--badgegreen);

    border-radius: 8px;

    background: var(--highlightbadgegreen);

    border: none;

    padding: 5px;

    font-size: 70%;

}



.badge-red-highlight {

    color: var(--badgered);

    border-radius: 8px;

    background: var(--highlightbadgered);

    border: none;

    padding: 5px;

    font-size: 70%;

}

.Transport-btn{
    width: 100%;
}

.inzien-btn{
    width: 40%;
}
.settings-btn:hover{
    background-color: #c4c4c4 !important;
    color: lightgrey !important;
    border: none;
}