.chart-container {
position: relative;
width: 100%;
height: 500px;}
        
#countrySelector {
position: absolute;
z-index: 10;
display: flex;
flex-wrap: wrap;
gap: 5px;}

.btn.custom-small {
padding: 0.1rem 0.4rem;
font-size: 0.75rem;}
        
@font-face {
font-family: "ArialBlackCustom";
src: url("../fonts/arial-black.ttf") format("truetype");
font-weight: bold;
font-style: normal;}

html, body {
height: 100%;
margin: 0;}

#carouselExampleCaptions {
height: 100%;
background-color:#000000 !important;}

.carousel-item {
height: 100%;}

.carousel-control-prev,
.carousel-control-next {
top: 45%;
transform: translateY(-50%);
width: 60px;
height: 80px;
background: transparent;
opacity: 1;}

.carousel-control-prev {
left: 5%;}

.carousel-control-next {
right: 5%;}

.carousel-control-prev-icon,
.carousel-control-next-icon {
background-image: none !important;
width: auto;
height: auto;
line-height: 1;}

.carousel-control-prev-icon::after,
.carousel-control-next-icon::after {
font-size: 3.5rem;
font-weight: 900;
color: #888888;
transition: color 0.3s ease;}

.carousel-control-prev-icon::after {
content: "\2039";}

.carousel-control-next-icon::after {
content: "\203A";}

.carousel-control-prev:hover .carousel-control-prev-icon::after,
.carousel-control-next:hover .carousel-control-next-icon::after {
color: #ffffff;}

.police{
font-family: "ArialBlackCustom", sans-serif;
letter-spacing: 2px;
font-size:0.9em;}

.euribor-chart-container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
width: 100vw;
height: 100vh;
background: #222;
padding: 1vh 0;
box-sizing: border-box;}
        
.euribor-chart-container canvas {
width: 95vw !important;
height: 80vh !important;
background: #222;
display: block;}

.table-responsive {
width: 92vw;
max-width: 1920px;
margin-top: 10px;}
        
#countryTable {
font-size: 0.7rem;
width: 100%;
color: white;
background: #222;
border-collapse: separate;}

#countryTable th, #countryTable td {
text-align: center;
border: 1px solid #444;}

#countryTable tbody tr:hover {
background-color: #363636;
cursor: pointer;}

#countryTable td:hover {
background-color: #555555;}
		
#ustTable, #sofrTable {
font-size: 0.8rem;
width: 100%;
color: white;
background: #222;
overflow-x: auto;
border-collapse: separate;}
        
#ustTable th, #ustTable td, #sofrTable th, #sofrTable td {
text-align: center;}

#ustTable tbody tr:hover, #sofrTable tbody tr:hover {
background-color: #666666;
cursor: pointer;}

.highlight-column {
background-color: rgba(200, 200, 200, 0.2) !important;}

#ustTable tr td[data-label]:hover,
#sofrTable tr td[data-label]:hover {
cursor: pointer;}

.is-hidden {
color: grey;
opacity: 0.5;}
		
@media (max-width: 768px) {

#countrySelector {
bottom: 30rem;
left: 3.7rem;}

}
		
@media (min-width: 769px) and (max-width: 1199px) {	

#countrySelector {
bottom: 33rem;
left: 4.5rem;}

}

@media (min-width: 1200px) {

#countrySelector {
bottom: 39.5rem;
left: 5.7rem;}

}