.btn-light,
.btn-light:hover,
.btn-light:focus {
    color: #333;
    text-shadow: none; /* Prevent inheritance from `body` */
}

body {
    font-family: 'Handlee', cursive;
    text-shadow: .3rem .5rem .1rem rgba(0, 0, 0, .8);
    box-shadow: inset 0 0 5rem rgba(0, 0, 0, .8);
}

.cover-container {
    /*max-width: 42em;*/
}

.nav-masthead .nav-link {
    color: rgba(255, 255, 255, .5);
    border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
    border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link + .nav-link {
    margin-left: 1rem;
}

.nav-masthead .active {
    color: #fff;
    border-bottom-color: #fff;
}

.my-shadow {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .5);
}

.bg-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: black;
}

.invColors {
    filter: invert(90%) hue-rotate(180deg);
    background-color: white;
    box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, .5);
}


.h-80 {
    height: 80%;
}

.w-80 {
    width: 80%;
}

.animated {
    -webkit-transition-duration: 0.8s;
}

.fs-075 {
    font-size: 0.75rem !important;
}

.fs-09 {
    font-size: 0.90rem !important;
}

.fs-1prc {
    font-size: 1.00vw !important;
}
.blog-items {
    --bs-accordion-bg: rgba(33, 37, 41, 0.5)!important;
}

.min-vw-50{
    min-width: 50vw!important;
}
.min-w-100{
    min-width: 100%;
}
@media (min-width: 576px){
    .min-sm-vw-50{
        min-width: 50vw!important;
    }
    .min-sm-vw-80{
        min-width: 80vw!important;
    }

    .rounded-sm-4{
        border-radius: var(--bs-border-radius-xl)!important;
    }
    .rounded-sm{
        border-radius: var(--bs-border-radius)!important;
    }
}

.my-btn {
    width: 3vw;
    height: 3vw;
    font-size: 1.5vw !important;
    border-radius: 0.7vw !important;
    vertical-align: 0 !important;
    font-family: system-ui;
}

.col24-1  { flex: 0 0 auto; width: calc(100% *  1 / 24); }
.col24-2  { flex: 0 0 auto; width: calc(100% *  2 / 24); }
.col24-3  { flex: 0 0 auto; width: calc(100% *  3 / 24); }
.col24-4  { flex: 0 0 auto; width: calc(100% *  4 / 24); }
.col24-20 { flex: 0 0 auto; width: calc(100% * 20 / 24); }
.col24-21 { flex: 0 0 auto; width: calc(100% * 21 / 24); }
.col24-22 { flex: 0 0 auto; width: calc(100% * 22 / 24); }
.col24-23 { flex: 0 0 auto; width: calc(100% * 23 / 24); }

@media (min-width: 768px){
    .col24-md-1  { flex: 0 0 auto; width: calc(100% *  1 / 24); }
    .col24-md-2  { flex: 0 0 auto; width: calc(100% *  2 / 24); }
    .col24-md-3  { flex: 0 0 auto; width: calc(100% *  3 / 24); }
    .col24-md-4  { flex: 0 0 auto; width: calc(100% *  4 / 24); }
    .col24-md-20 { flex: 0 0 auto; width: calc(100% * 20 / 24); }
    .col24-md-21 { flex: 0 0 auto; width: calc(100% * 21 / 24); }
    .col24-md-22 { flex: 0 0 auto; width: calc(100% * 22 / 24); }
    .col24-md-23 { flex: 0 0 auto; width: calc(100% * 23 / 24); }

    .rounded-md-4 {
        border-radius: var(--bs-border-radius-xl)!important;
    }

    .rounded-md {
        border-radius: var(--bs-border-radius)!important;
    }
}


.hidden {
    display: none;
}

.blend-difference {
    mix-blend-mode: difference;
}

.skyMapIcon {
    content: "";
    display: inline-block;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" class="iconify iconify--whh" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024" style="transform: rotate(360deg);"><path d="M951 189l-47 332q25 11 40.5 34.5T960 608q0 40-28 68t-68 28q-29 0-54-16L505 893q7 17 7 35q0 40-28 68t-68 28t-68-28t-28-68q0-18 7-35L131 697q-17 7-35 7q-40 0-68-28T0 608t28-68t68-28q22 0 43 10l186-204q-5-16-5-30q0-40 28-68t68-28q44 0 73 35L833 89q2-37 29.5-63T928 0q40 0 68 28t28 68q0 33-20.5 59T951 189zM365 369L183 568q9 20 9 40q0 24-13 47l190 190q23-13 47-13q25 0 48 13l309-208q-5-15-5-29q0-11 3-23L480 359q-28 25-64 25q-27 0-51-15zm146-66l295 229q15-12 35-17l47-332q-25-12-41-35L511 282q0 1 .5 3t.5 3q0 5-1 15z" fill="currentColor"></path></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    width: 2rem;
    height: 2rem;
}

.noTextShadow{
    text-shadow: initial;
}

.highcharts-exporting-group {
    display: none !important;
}

.logo {
    font-family: 'Handlee', cursive;
}

.cover-bg {
    z-index: -1;
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    background-image: url(bg.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    mix-blend-mode: lighten;
}

.myScroll::-webkit-scrollbar {
  width: 10px!important;
}
.myScroll::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0) !important;
}
.myScroll::-webkit-scrollbar-thumb {
    background-color: #0066ce!important;
    border-radius: 5px!important;
}

.input-group-xs>.btn, .input-group-xs>.form-control, .input-group-xs>.form-select, .input-group-xs>.input-group-text {
    padding: 0.00rem 0.3rem;
    font-size: 0.8rem;
    border-radius: 0.55rem;
}
.cmdContainer{
    opacity: 0;
    visibility: hidden;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    transition: opacity 3s,  visibility 3s;
    background-color: rgba(43, 51, 63, 0.8);
}
.userActive > .cmdContainer{
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s,  visibility 0.5s;
}

.repoContainer{
    z-index: 5;
    opacity: 0;
    /* visibility: visible; /*keep visible but opacity 0 for hover trigger */
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transition: opacity 3s; /*,  visibility 3s; */
    background-color: rgba(43, 51, 63, 0.4);
}
.userActive > .repoContainer{
    opacity: 1!important;
    /* visibility: visible!important; */
    transition: opacity 0.5s; /*, visibility 0.5s!important; */
}
.repoDate{
    margin: 0.25rem!important;
    min-width: 140px;
    width: 11.2cqw;
    aspect-ratio: 1936 / 1096;
    flex: 0 0 auto;
    float: left;
}

.repoItemsList{
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.repoItem{
    cursor: pointer;
    margin-right: 0.25rem!important;
    margin-left:  0.25rem!important;
    width: 10cqw;
    aspect-ratio: 1936 / 1096;
    flex: 0 0 auto;
}
.repoScroller{
    height: 100%;
    position: absolute;
    background-color: rgba(43, 51, 63, 0.5);
    padding: 0 0.25rem;
    border: none;
    color: white;
}
@media (max-width: 576px) {
    .imgContainer{
        overflow: visible!important;
        border-radius: revert!important;
    }
    .cmdContainer{
        bottom: -26px!important;
        opacity: 1!important;
        visibility: visible!important;
        transition: revert!important;
        background-color: rgba(43, 51, 63, 0.8)!important;
    }
}

.cmdButton{
    cursor: pointer;
    position: relative;
    text-align: center;
    margin: 0;
    padding: 4px 0 0;
    height: 100%;
    width: 4em;
    flex: none;
    background: none;
    border: none;
    color: inherit;
    display: inline-block;
    font-size: inherit;
    line-height: inherit;
    text-transform: none;
    text-decoration: none;
    transition: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
@media only screen and (max-width: 576px){
    .cmdButton {
        width: 2em;
    }
}
.cmdButton:focus, .cmdButton:focus-visible {
    text-shadow: 0em 0em 1em white;
    outline: none;
}

.fs-resp-container {container-type: size;}
@media only screen and (max-width: 576px) and (max-aspect-ratio: 1.24/1) { .fs-resp{ font-size: 1.65cqw!important; } }
@media only screen and (max-width: 576px) and (min-aspect-ratio: 1.24/1) { .fs-resp{ font-size: 1.65cqw!important; } }
@media only screen and (min-width: 576px) and (max-aspect-ratio: 1.56/1) { .fs-resp{ font-size: 1.65cqw!important; } }
@media only screen and (min-width: 576px) and (min-aspect-ratio: 1.56/1) { .fs-resp{ font-size: 1.65cqw!important; } }

.meteoContainer{
    background-image: url(https://my.meteoblue.com/images/meteogram?temperature_units=C&wind_units=kmh&precipitation_units=mm&winddirection=3char&iso2=it&lat=41.0726&lon=14.3323&asl=68&tz=Europe%2FRome&apikey=jhMJTOUVRNvs25m4&lang=it&location_name=Caserta&windspeed_units=kmh&sig=26c8fb9a10f9a2b069840ec1dfcbd9b6);
    width: 100%;
    height: 100%;
    background-position-x: right;
    background-position-y: 56%;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.6;
    max-width: 550px;
    min-height: 130px;
    right: 0;
    position: absolute;
    bottom: 40px;
}
.video-js .vjs-timestamp-control .vjs-icon-placeholder {
    display: inline-block;
    font-family: bootstrap-icons!important;
    font-style: normal;
    font-weight: 400!important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -0.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.video-js .vjs-timestamp-control .vjs-icon-placeholder:before {
    content: "\f292";
}
.video-js .vjs-skymap-control .vjs-icon-placeholder {
    display: inline-block;
    font-family: bootstrap-icons!important;
    font-style: normal;
    font-weight: 400!important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -0.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.video-js .vjs-skymap-control .vjs-icon-placeholder:before {
    content: "\f589";
}
.video-js .vjs-camera-control .vjs-icon-placeholder {
    display: inline-block;
    font-family: bootstrap-icons!important;
    font-style: normal;
    font-weight: 400!important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -0.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.video-js .vjs-camera-control .vjs-icon-placeholder:before {
    content: "\f221";
}

.apexcharts-tooltip {
    background: #c0c0c0!important;
    color: #000!important;
}