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

:root {
    --main-bg-color: #FEFEF9;
    --dark-bg-color: #242424;
    --selected-bg-color: #696969;
    --cards-bg-color: #EAEAEA;
    --blue: #9CCED9;
    --red: #E85D7E;
    --green: #CFEABC;
    --darkGreen: #B3D5AB;
    --purple: #7D5CB8;
    --corner: 7px;
    --shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    --darkBlue: #00667C;

}

h1 h2 {
    margin-bottom: 30px;
}

.primera-columna {
    align-content: space-between !important;
}

.enlaces {
    color: var(--blue);
}

body {
    font-family: 'Raleway';
    background-color: var(--main-bg-color);
    background-image: url('bg.png');
    margin: 1%;
}

.colMapa {
    border-radius: var(--corner);
    margin-top: 0px;
    padding: 0px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.glassmorphism {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border-radius: var(--corner);
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(10.5px);
    -webkit-backdrop-filter: blur(10.5px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.custom-tabs-container {
    width: 100%;
    height: auto;
}

.custom-tab {
    color: #fffdff;
    border-top-left-radius: var(--corner);
    border-top-right-radius: var(--corner);
    border-top: 3px solid transparent !important;
    border-left: 0px !important;
    border-right: 0px !important;
    border-bottom: 0px !important;
    background-color: var(--dark-bg-color) !important;
    padding: 12px !important;
    font-family: "system-ui";
    display: flex !important;
    align-items: center;
    justify-content: center;


}


.custom-tab--selected {
    color: var(--main-bg-color) !important;
    background-color: var(--selected-bg-color) !important;
    border-radius: 7px 7px 0px 0px;


}

.lic {
    border-top: 4px solid var(--darkBlue) !important;
    background-color: var(--darkBlue) !important;
}

.mas {
    border-top: 4px solid var(--red) !important;
    background-color: var(--red) !important;
}

.doc {
    border-top: 4px solid var(--purple) !important;
    background-color: var(--purple) !important;
}

.underTabs {
    background-color: var(--dark-bg-color);
    border-radius: var(--corner);
}

.shadow {
    box-shadow: var(--shadow) !important;
}


.custom-tabs {
    width: 80%;
    display: 70%;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 200px;
    padding-left: 10%;
}

.dropdown {
    position: relative;
    display: 30%;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.card {
    font-size: 16px !important;
    /* height: 150px !important; */
    padding-bottom: 5px;
    margin-bottom: 40px;
}

.card h4,
h5 {
    font-size: 22px;
}



.main-svg {
    background: transparent !important;

}

#maps {
    background-color: #080808;

}

.graph-card {
    background-color: #ffffff
}

.datos-generales {
    background: var(--selected-bg-color);
    box-shadow: var(--shadow);
    border-radius: var(--corner);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding-top: 10px;

}