body{
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.15px;
    color: #181818;
}

a,
a:hover,
a:active,
a:focus{
    color: #2C82D6;
    font-weight: 500;
    text-decoration: none;
}

p{
    margin-bottom: 1.3rem;
}

p.text-regular, ul.text-regular{
    font-size: 1rem;
    font-weight: 400;
}

.text-danger{
    color: #f45c37;
}
.text-inherit,
.text-inherit:hover{
    color: inherit;
}

.text-white svg{
    fill:#FFFFFF;
}

.btn {
    font-size: 1rem;
    font-weight: 500;
    border-radius: 5rem;
}

.btn-link:hover,
.btn:hover,
.btn:focus{
    text-decoration: none;
}

.btn.btn-link:focus{
    box-shadow: none;
}

.btn.fixed-bottom{
    font-size: 1.1em;
}

.btn-group-lg>.btn, .btn-lg{
    padding: 1rem;
}

.btn-rounded { border-radius: 25px; }

.btn-xs {
    padding: .15rem 1.7rem;
    font-weight: 700;
    font-size: .800rem;
    letter-spacing: -0.54px;
}

.btn-sm {
    padding: .2rem 1rem;
    font-size: .95em;
}

.btn-md {
    /*min-width: 170px;*/
    /*padding: .6rem 1.6rem;
    font-size: 1em;*/
    /* 16-03-2024 */
    padding: 0.8rem 2.2rem;
    
}
.btn-regular{
    padding: 0.7rem 1.9rem;
    font-size: 14px;
    border: none;
    outline: none;
}

.btn-regular-outline-light{
    border: 2px solid #FFFFFF;
}

.btn-regular:focus, .btn-regular:active, .btn-regular.active {
    box-shadow: none !important;
    outline: 0 !important;
}

.btn-primary{
    background-color: #1879d8;
    color: white;
}

.btn-white{
    background-color: white;
    color: #000000;
}

.btn-outline-primary{
    background-color: transparent;
    color: #338ADF;
    border-color: #338ADF;
}
.btn-outline-primary:not(:disabled):hover,
.btn-outline-primary:not(:disabled).active, .btn-outline-primary:not(:disabled):active, .show>.btn-outline-primary.dropdown-toggle{
    color: #fff;
    background-color: #338ADF;
    border-color: #338ADF;
}
.btn-outline-primary.disabled, .btn-outline-primary:disabled{
    color: #74ABE1;
    border-color: #74ABE1;
}

.btn-outline-light:not(:disabled):active,
.show>.btn-outline-light.dropdown-toggle,
.btn-outline-light:hover{
    color: inherit;
    background-color: #338adf;
    border-color: inherit;
}

.btn-google {
    background-color: #ffffff; 
    color: black;
    border: 1px solid #000000;
    padding: .75rem;
}

.btn-google:hover {
    background-color: #f1f1f1;
}
.btn-apple {
    background-color: #000000;
    color: white;
    border: 1px solid #000000;
    padding: .75rem;
}

.btn-apple:hover, .btn-apple:focus, .btn-apple:active{
    background-color: #333333;
    color: white;
}

.btn-group .btn-outline-dark.active {
    background-color: #1E272E;
    color: #ffffff;
}

.btn-group .btn-outline-dark:not(.active) {
    background-color: #ffffff;
    color: #1E272E;
}

.form-control::-webkit-input-placeholder { color: #989898; } /* WebKit, Blink, Edge */
.form-control::-moz-placeholder { color: #989898; }  /* Mozilla Firefox 19+ */
.form-control::-ms-input-placeholder{ color: #989898; } /* Microsoft Edge */

.form-control:disabled, .form-control[readonly]{
    background-color: #e9eff5;
}

.form-control.form-control-sm{
    padding: inherit
}

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
    font-size: 16px!important;
}

label{
    font-weight: 600;
    margin-bottom: .3rem;
}

h1.navbar-title{
    font-size:1.1rem;
    margin:0;
}
h1.top-title{
    font-size:1.6em;
    margin:2px 0;
    font-weight: 600;
}

h3{
    font-size: 1.6rem;
    letter-spacing: normal;
    font-weight: 600;
}

h3.text-bold{
    font-weight: 600;
    font-size: 1.45rem;
}

h4{
    letter-spacing: normal;
    font-size: 1.3rem;
    font-weight: 400;
}

h4.text-bold{
    font-weight: 600;
    font-size: 1.2rem;
}

h5{
    font-size: 1.05rem;
    font-weight: 600;
}

.lead{
    font-size:14px;
    font-weight: 400;
}

.font-weight-medium{
    font-weight: 500!important;
}

.font-weight-bold{
    font-weight: 600!important; 
}

.font-weight-bolder{
    font-weight: 700!important;
}

.text-smaller{
    font-size:0.9em!important;
}

h6{
    font-size:15px;
}

h5.title{
    font-weight: 700;
    /*letter-spacing: 0.01em;*/
    font-size:19px;
    margin-bottom:0;
}

h5.title-forecast-card{
    color: #000000;
    font-weight: 700;
    font-size:16px;
    margin-bottom:0;
}

h5.title i.fa{
    font-size: inherit;
}


.mb-closer{
    margin-bottom: -3px;
}

.subtitle{
    /*color: #8C8C8C;*/
    color: #979797;
    
    font-weight: 500;
}

h6.headline,
h7.headline,
h6.cards-title,
h7.cards-title{
    text-transform: uppercase;
    color: #8F8F8F;
    font-size: 12px;
    margin-bottom:0;
}
h7.headline,
h7.cards-title{
    font-size: 12px;
    font-weight: 500;
}

.dot{
    height: 11px;
    width: 11px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 2px;
}

.dot-good{
    background-color: #3AD828;
    border: 1px solid #3AD828;
}

.dot-regular{
    background-color: #D9D9D9;
    border:1px solid #C5C5C5;
}

.dot-high{
    background-color: #9B9B9B;
    border:1px solid #767676;
}

.dot-default{
    background-color: #E0E0E0;
}

.navbar{
    padding: .6rem .7rem;
    background-color: white;
    transition: all 0.2s;
}
.navbar-site{
    height: 48px;
}
.navbar button{
    padding: 0;
    background-color:transparent;
    border: 0;
}
.navbar-brand{
    padding: 0;
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 9px;
}
.navbar .fa{
    font-size: 1.2rem;
}
.navbar .fa-angle-left{
    font-size: 1.7rem;
}
.navbar.transparent{
    background-color: transparent;
    border-color: transparent;
}
.navbar.transparent button,
.navbar.transparent .navbar-brand,
.navbar.transparent a,
.navbar.transparent .fa-link{
    color: white;
}
.navbar .fa-link{
    color:inherit;
}
.navbar .fa-link:before{
    content:none;
}
.navbar-light .navbar-toggler {
    color: inherit;
    border-color: inherit;
}

.navbar-toggler-icon{
    height: 1.2em;
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(30, 39, 46, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


.navbar-toggler {
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 0;
    border-radius: 0;
}

.nav-link .dot{
    font-size: 0.7rem;
    color: white;
    height: 17px;
    width: 17px;
    position: absolute;
    line-height: 15px;
    top: 20%;
    right: 5%;
}
.navbar-light .navbar-nav .nav-link{
    color: #313131;
    font-weight: 400;
    font-size: 1.1em;
}
.navbar-nav .nav-link {
    padding: 0.7rem 0;
}

.navbar-nav .nav-link .bi{
    width: 1.5em;
    height: 1.5em;
}

.icon-bar {
    width: 22px;
    height: 2px;
    background-color: #181818;
    display: block;
    transition: all 0.2s;
    margin-top: 4px
}

.navbar-toggler {
    border: none;
    background: transparent !important;
}
.navbar-toggler .top-bar {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
}

.navbar-toggler .middle-bar {
    opacity: 0;
}

.navbar-toggler .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
}

.navbar-toggler.collapsed .top-bar {
    transform: rotate(0);
}

.navbar-toggler.collapsed .middle-bar {
    opacity: 1;
}

.navbar-toggler.collapsed .bottom-bar {
    transform: rotate(0);
}

.navbar-announcement a{
    color:inherit;
    text-decoration: underline;
}

.navbar-announcement .close{
    color: inherit;
    font-size: 2rem;
}

.bg-white{
    background-color: white;
}

.bg-light{
    background-color: #f4f5f6 !important;
}

.bg-dark{
    background-color: #404040;
}

.bg-blue{
    background-color: #308ce6;
    color: white;
}

.bg-red{
    background-color: #F45C37;
    color: white;
}

.close{
    font-weight: 300;
    font-size: 1.7rem;
    color: #181818;
}


.bootstrap-fs-modal .modal,
.modal.modal-fullscreen{
    box-shadow: none;
    height: 60%;
}

.modal.modal-fullscreen{
    top:40%;
}

#in-app-message {
    display:none; 
    z-index: 1050;
    position: fixed;
    bottom: 5px;
    right: 10px; /* Margen derecho de 10px */
    left: 10px; /* Margen izquierdo de 10px */
    width: calc(100% - 20px); /* 100% del ancho menos 20px para los márgenes */
    border-radius: 10px;
    background-color: #FFF7D1;
    color: #181818;
    border: 1px solid #e3e3e3;
}

.product-update {
    background-color: #313131;
    color: white;
    border-radius: 12px;
}
.product-update p{
    margin-bottom:0;
    font-size: .9rem;
}
.product-update .title {
    text-transform: uppercase; /* Convierte el texto a mayúsculas */
    font-size: 0.8em; /* Tamaño de fuente más pequeño */
    letter-spacing: 2px; /* Espaciado entre letras */
    font-weight: bold; /* Opcional: Puedes ajustar el grosor de la fuente según tus preferencias */
}
.product-update a,
.product-update a:hover,
.product-update a:active,
.product-update a:visited{
    color: white;
    font-weight: 600;
    text-decoration: underline;
}
.product-update a.btn {
    text-decoration: none; /* Remove underline from links */
}

.alert-in-app {    
    color: white;
    border-radius: 12px;
    background: linear-gradient(94.27deg, #0E67E9 2.03%, #0D52B7 99.81%);       
}

.alert-in-app p{
    margin-bottom:0;
    font-size: .9rem;
}

.alert-in-app a{
    color: white;
    font-weight: 600;
    display: block;
}

.alert-in-app .close{
    color: white;
    font-size: 1.3rem;
    opacity: 1;
}

.beach-current-conditions{
    padding: 2px 13px;
    border-radius: 11px;
}

.beach-current-conditions .fa{
    font-size:1rem;
}

.beach-current-conditions.good,
.beach-current-conditions.good-glassy{
    background-color:#3AD828;
    border:1px solid #3AD828;
    color: #2e5408;
    /*border-top: 1px solid #87EA23;
    border-bottom: 1px solid #87EA23;*/
}
.beach-current-conditions.regular{
    background-color: #e8e8e8;
    border: 1px solid #dadada;
    /*color: #525252;
    border-top: 1px solid #dadada;
    border-bottom: 1px solid #dadada;*/
}

.beach-current-conditions.high,
.beach-current-conditions.high-glassy{
    background-color: #b3b3b3;
    border: 1px solid #a5a5a5;
    /*color: white;*/
    /*border-top: 1px solid #8e8e8e;
    border-bottom: 1px solid #8e8e8e;*/
}

.resume {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.40px;
    line-height: 1em;
}

.beach-resume{
    background-color:white;
}

.beach-resume .resume{
    height: 1.2em;
    margin-top: 6px;
}

.resume small{
    font-size:12px;
    font-weight: 300;

}

.beach-best-conditions{
    background-color: white;
}

.beach-meteo{
    font-size:0.95rem;
}
.small, small{
    font-weight: 500;
}
small .dot{
    margin: 0;
    width: 7px;
    height: 7px;
}

i.fa{
    font-size:1.1rem;
}
i.fa.size-normal{
    font-size: 1rem;
}
i.fa.size-smaller{
    font-size:0.9rem;
}

i.fa.fa-2x{
    font-size: 2.65em;
}

i.fa.fa-3x{
    font-size: 3em;
}

i.fa.low,
i.fa.good,
i.fa.good-glassy,
i.fa.high,
i.fa.high-glassy,
i.fa.higher{
    color: #87EA23;
}
i.fa.fair{
    color: #C4F692;
}
i.fa.flat{

}
i.fa.poor{
    color: #D9D9D9;
}
i.fa.toomuch{
    color: #9B9B9B;
}


.beach-name .js-is-stuck h2{
    font-size: 0.5rem;
}
.beach-image{
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    height: 200px;
}
.beach-weeknav{
    font-size: 13px;
    letter-spacing: -0.2px;
    color: #8C8C8C;
    padding-bottom:0;
    line-height: 1.8em;
}

.beach-weeknav.trial{
    width:30%;
}

.beach-weeknav.js-is-sticky{
    /*box-shadow: 0 3px 7px 0 rgba(0,0,0,0.10);*/
}

.text-semi-muted{
    color: #8C8C8C;
}

.text-muted{
    color: #a4a4a4 !important;
}

.text-muted-dark{
    color: #747474!important;
}

.text-dark{
    color: #000000!important;
}

.beach-weeknav a{
    color: #181818;
}

.beach-weeknav .nav-link{
    padding:  0;
    height: 62px;
    border-radius: 0;
    width:100%;
    font-size: 12px;
    line-height: 18px;
    font-weight: 600;
}

.beach-weeknav .nav-item{
    width:12.5%;
    position: relative;
}

.beach-weeknav .nav-item.active::after{
    content: '';
    position: absolute;
    top: 0;
    width: 80%;
    left: 50%;
    height: 72%;
    z-index: 2;
    background-color: #3A4043;
    border-radius: 8px;
    transform: translate(-50%, 0);
}
/*
.beach-weeknav .nav-item.nav-item-high::after{
    border-bottom-color: #9B9B9B;
}
.beach-weeknav .nav-item.nav-item-good::after{
    border-bottom-color:#87EA23;
}
*/
.beach-weeknav .nav-link.border-right{
    border-right: 1px solid white!important;
}
.beach-weeknav .nav-link.active:after {
    /*content: "";*/
    position: absolute;
    bottom: -10px;
    left: 39%;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 9px solid #2C82D6;
}

.beach-weeknav i{
    display: block;
    margin-top:4px;
    color: #212529;
}

.beach-weeknav .status-bar{
    background-color: #D9D9D9;
    height: 6px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}


.beach-weeknav .status-bar-fair,
.beach-weeknav .status-bar-fair-light-wind{
    background-color:#C4F692;
}

.beach-weeknav .status-bar-low,
.beach-weeknav .status-bar-high,
.beach-weeknav .status-bar-high-glassy,
.beach-weeknav .status-bar-higher,
.beach-weeknav .status-bar-good,
.beach-weeknav .status-bar-good-glassy{
    background-color:#3AD828;
}

.beach-weeknav .status-bar-toomuch{
    background-color: #9B9B9B;
}


.beach-weeknav .nav-link .badge{
    margin-top: 1.2em;
}

i.fa-long-arrow-right{
    font-size:1.2rem;
}

i.fa-arrow-circle-right.bajamar{
    transform: rotate(90deg);
}
i.fa-arrow-circle-right.pleamar{
    transform: rotate(-90deg);
}
i.fa-arrow-circle-right.subiendo{
    transform: rotate(-40deg);
}
i.fa-arrow-circle-right.bajando{
    transform: rotate(40deg);
}
i.fa.good{
    color: #7DDD1D;
}

.beach-weeknav .nav-pills .nav-link.active, .beach-weeknav .nav-pills .show>.nav-link{
    color: #FFFFFF;
    background-color: transparent;
    z-index: 3;
}

.beach-tabs .nav-tabs .nav-link{
    border: 0;
    font-size: 1em;
    font-weight: 600;
    color: #1E272E;
    padding-top: 11px;
    padding-bottom: 11px;
}

.beach-tabs .nav-tabs .nav-link.active{
    border-bottom: 2px solid #1E272E;
}

.border-bottom{
    border-bottom: 1px solid #e3e3e3 !important;
}
.border-top{
    border-top: 1px solid #e3e3e3!important;
}
.border-top-3{
    border-top: 3px solid #e3e3e3!important;
}
.card{
    border: 1px solid #e3e3e3;
    /*border: 1px solid #efefef*/
    /*border: none;*/
    background: #FFFFFF;
    /*box-shadow: 0 5px 11px 0 rgba(0,0,0,0.06);*/
    border-radius: 12px;
    overflow: hidden;
    margin-top:0.5em;
    z-index: 0;
}

.card-info{
    border-radius: 12px;
    overflow: hidden;
    color: white;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.card-info-bg-surfer1{
    background-image:url(../images/bg-blue-surfer1.jpg);
}
.card-info-bg-surfer2{
    background-image:url(../images/bg-blue-surfer2.jpg);
}
.card-info-bg-surfer3{
    background-image:url(../images/bg-blue-surfer3.jpg);
}
.card-info-bg-surfer4{
    background-image:url(../images/bg-surfer4.png);
}

.card-info-title{
    font-size: 1.4em;
}

.card-info-title-xl{
    font-size: 1.8em;
}

.card-info-blue{
    background-color: #2C82D6;
}

.card-info-alert{
    background-color: #FFF7D1;
    color: #181818;
    border: 1px solid #e3e3e3;
}

.card-info-alert p{
    font-weight: 500;
    line-height: 17px;
}

.card .h1{
    font-size:1.8rem;
    font-weight: 700;
}
.card .h3{
    font-size: 1.15rem;
}

.card-main-spot.card-status-low{
    background-color: #E3FCCB;
}
.card-main-spot.card-status-good,
.card-main-spot.card-status-good-glassy {
    background-color: #5BE033;
}
.card-main-spot.card-status-high,
.card-main-spot.card-status-high-glassy {
    background-color: #5BE033;
}
.card-main-spot.card-status-higher {
    background-color: #5BE033;
}
.card-main-spot.card-status-toomuch {
    background-color: #ADBBE0;
}
.card-main-spot,
.card-status-flat {
    background-color: #FFFFFF;
}
.card-main-spot.card-status-fair,
.card-main-spot.card-status-fair-light-wind {
    background-color: #E3FCCB;
}
.card-main-spot.card-status-poor {
    background-color: #E8E8E8;
}
.card-main-spot{
    font-size:16px;
}
.card-main-spot a{
    color:inherit;
}
.card .text-xxl{
    font-size: 37px;
    font-weight: bold;
}
.background-cover{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.shadow{
    box-shadow: 0 5px 11px 0 rgba(0,0,0,0.06)!important;
}

.card-extended-text {
    transition: all 0.3s ease;
    background-color: #dfeeff;
}

.card-extended-text .card-content {
    overflow: hidden;
    line-height: 1.3;
}

.card-extended-text .card-content.collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.card-toggle-icon {
    transition: transform 0.3s ease;
}

.card-extended-text.expanded .card-toggle-icon {
    transform: rotate(180deg);
}

.card-widget{
    padding: 0.7rem;
}

.card-widget h5.card-title{
    font-size: 0.9rem;
    font-weight: 600;
}

.card-widget .card-body{
    font-size: 1.4em;
    font-weight: 500;
    padding: 0;
}

.card .forecast-warning {
    cursor: pointer;
}

.card .forecast-warning .warning-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all 0.3s ease;
}

.card .forecast-warning.expanded .warning-text {
    -webkit-line-clamp: unset;
    line-clamp: unset;
}

.arrow-now {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid #1d1d1d;
    position:absolute;
    bottom: -8px;
    left:0;
    display: none;
}

.respect-surf-rules{
    background-image: url(../images/surfcrowded.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: white;
    box-shadow: inset 0 0 0 2000px rgba(2, 40, 66, 0.3);
}

.respect-surf-rules li {
    line-height: 1.6rem;
}

.respect-surf-rules h5.title{
    color: white;
}
.respect-surf-rules h5.title i.fa{
    margin-right: 0.1em;
}

.respect-surf-rules h6{
    color: white;
}

.card-waves-wind{
    text-align: center;
    font-size:14px;
}

.card-waves-wind.good,
.card-waves-wind.good-glassy,
.card-waves-wind.low,
.card-waves-wind.high,
.card-waves-wind.high-glassy,
.card-waves-wind.higher{
    border-top-color:  #3AD828;
}

.card-waves-wind.flat{
    border-top-color: #e6e6e6;
}
.card-waves-wind.toomuch{
    border-top-color:  #8C8C8C;
}

.card-waves-wind.fair,
.card-waves-wind.fair-light-wind{
    border-top-color:  #C4F692;
}
.card-waves-wind.poor{
    border-top-color: #D9D9D9;
}

.forecast-text{
    position:relative;
    z-index: 1;
}

.forecast-text small{
    font-size: 85%;
    font-weight: inherit;
}

.bar {
    position: absolute;
    bottom: 5%;
    left: 3%;
    width: 94%;
    border:0;
    margin:0;
    padding:0;
    z-index:0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.beach-weeknav .bar{
    bottom: 17px;
    left: 0;
    width: 100%;
    height: 42px;
}

.waves-low{
    background-color: #CEE3F9;
}
.waves-medium{
    background-color: #56a3ef;
}
.waves-high{
    background-color: #5f84ef;
}
.waves-toomuch{
    background-color: #98a3c3;
}

.wind-extra-low-offshore,
.wind-low-offshore{
    background-color: #DEF7C2;
}
.wind-medium-offshore{
    background-color: #3AD828;
}
.wind-high-offshore{
    background-color: #60ECBF;
}

.wind-extra-low-cross-offshore,
.wind-low-cross-offshore{
    background-color: #DEF7C2;
}
.wind-medium-cross-offshore{
    background-color: #DAEC61;
}
.wind-high-cross-offshore{
    background-color: #E4EC61;
}

.wind-extra-low-onshore,
.wind-extra-low-cross-shore{
    background-color: #DEF7C2;
}
.wind-low-onshore,
.wind-low-cross-shore{
    background-color: #F8CD84;
}
.wind-medium-onshore,
.wind-medium-cross-shore{
    background-color: #F49337;
}
.wind-high-onshore,
.wind-high-cross-shore{
    background-color: #f45c37;
}

.rounded-bottom-left{
    border-bottom-left-radius: 4px;
}

.rounded-bottom-right{
    border-bottom-right-radius: 4px;
}
.tooltip{
    z-index:99999;
}
.tooltip-click{
    cursor: pointer;
}

.tooltip-inner{
    background-color: #1E272E;
    max-width: 300px;
    padding: .6rem .9rem;
    box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.25);

}

.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before{
    border-top-color: #1E272E;

}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before{
    border-bottom-color: #1E272E;
}

.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before{
    border-left-color: #1E272E;
}

.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before{
    border-right-color: #1E272E;
}
.bs-tooltip-top{
    top:-4px!important;
}

.tooltip.show{
    opacity: 1;
}

.fade{
    transition: opacity .10s linear;
}

.cam{
    text-align:center;
    background-color: #1E272E;
    min-height: 192px;
    max-height: 250px;
}

.unit-smaller{
    font-size:0.75rem;
}

.featured-spot-large{
    margin-top: .5em;
    margin-bottom: 1.2em;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    font-weight: 400;
}

.featured-spot-large h6.headline{
    color:white;
}

.featured-spot-large a{
    padding:120px 2em 2em 2em;
    height: 300px;
    display: block;
    color:white;
}

.featured-spot-large a:hover,
.featured-spot-medium a:hover{
    text-decoration: none;
}

.featured-spot-medium .text-highlight{
    font-size: 15px;
    font-weight: 600;
}

.featured-spot-large h3{
    margin-bottom:2px;
}

.featured-spot-medium.border-left-status{
    border-left-width: 4px;
    border-left-style: solid;
}
.border-left-status.flat{
    border-left-color: #D6D6D6;
}
.border-left-status.low,
.border-left-status.high,
.border-left-status.high-glassy,
.border-left-status.higher,
.border-left-status.good,
.border-left-status.good-glassy {
    border-left-color: #73D114;
}

.border-left-status.fair,
.border-left-status.fair-light-wind {
    border-left-color: #afdb83;
}

.border-left-status.poor {
    border-left-color: #adabab;
}

.border-left-status.toomuch {
    border-left-color: #98A4C2;
}

.featured-spot-medium a{
    display: block;
    color:inherit;
    background-color: white;
    padding-top: 22px;
    padding-bottom: 22px;
    border-radius: 10px;
}

.featured-spot-medium{
    position: relative;
    border-radius: 10px;
    margin-bottom: .3em;
    border-top: 1px solid #e3e3e3;
    border-right: 1px solid #e3e3e3;
    border-bottom: 1px solid #e3e3e3;
}

.featured-spot-medium .conditions-summary{
    min-width: 65px;
    text-align: right;
    line-height: 1.7em;
    font-size: 1.08em;
    /*font-weight: 500;*/
}

.status-rectangle{
    width: 45px;
    padding: 3px 0;
    display: inline-block;
}

.status-rectangle.good{
    background-color: #87EA23;
}

.status-rectangle.high{
    background-color: #a5a5a5;
}
.status-rectangle.regular{
    background-color: #D9D9D9;
}

.swell-image-container {
    position: relative;
    width: 100%;
    /* Aspect ratio 16:9 */
    aspect-ratio: 16 / 13;
    /* Fallback para navegadores que no soportan aspect-ratio */
    padding-bottom: 56.25%; /* 9/16 = 0.5625 = 56.25% */
}

.swell-image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}

/* Para navegadores que soportan aspect-ratio, quitar el padding-bottom */
@supports (aspect-ratio: 1) {
    .swell-image-container {
        padding-bottom: 0;
    }
}

.swell-slider{
    min-height: 200px;
}

.swell-map{
    width: 100%;
    display: none;
    position: relative;
}

.swell-map.active{
    display: block;
}

.swell-map img{
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}

.swell-date{
    background: white;
    position: absolute;
    padding: .2rem 1rem;
    font-size: 0.9em;
    bottom: 5px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    width: 133px;
    border-radius: 20px;
    border: 1px solid black;
    z-index: 10;
}

.swell-signup{
    position: absolute;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */
    transform: translate(-50%, -50%);
    text-align: center;
    width: 200px;
}

.swell-signup p{
    font-size: .85em;
}

#swell-scrollbar-container {
    width: 100%;
    height: 27px;
    position: relative;
    padding: 0;
    margin-top: 5px;
}

#swell-scrollbar,
#swell-scrollbar-slide{
    position: absolute;
    height: 2px;
    background-color: #D4D4D4;
    width: 100%;
    top: 50%;
}
#swell-scrollbar-slide{
    background-color:#000000;
    width: 0;
}

#swell-scrollbar-drag{
    position: absolute;
    width: 29px;
    height: 29px;
    background: #FFFFFF;
    border: 4px solid #FFFFFF;
    box-shadow: 0 2px 4px 0 rgba(131,131,131,0.50);
    border-radius: 22px;
    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
}

.swell-play,
.swell-pause {
    position: absolute;
    left: 42%;
    top: 38%;
    transition: 0.4s;
    z-index: 12;
}

.swell-play i.fa,
.swell-pause i.fa{
    font-size: 50px;
}

.swell-play.tap,
.swell-pause.tap {
    opacity: 0;
    transform: scale(2,2);
}

.swell-play.hidden,
.swell-pause.hidden {
    transition: 0s;
    opacity: 1;
    transform: scale(0);
    visibility: hidden;
}

#bottom-explanation{
    font-size: 0.9em;
}

#bottom-explanation .collapse:not(.show) {
    height: 55px !important;
    overflow: hidden;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

#bottom-explanation .collapsing {
    min-height: 55px !important;
}

#bottom-explanation a.collapsed:after  {
    content: '+ Leer más';
}

#bottom-explanation a:not(.collapsed):after {
    content: '- Leer menos';
}

.truncated{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.swiper-container{
    padding: 0 1rem 1rem 1rem !important;
}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{
    background-color: gray;
}
.swiper-container .card{
    box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.1) !important;
}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{
    top:0;
    bottom: unset!important;
}

.badge-status{
    font-size: 12px;
    font-weight: 700;
    padding: 4px 6px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    height: 20px;
}

.badge-circle {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block!important;
}

.badge-status-small{
    font-size: 0.58rem;
    padding: 3px 2px; /*3px 2px*/
    font-weight: 600;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin: 0 2px;
    height: 15px;
}

.badge-status-good,
.badge-status-good-glassy,
.badge-status-high,
.badge-status-high-glassy,
.badge-status-higher{
    background-color:#3AD828;
    color:white;
}

.badge-status-flat{
    background-color: #F3F3F3;
    color: #a5a5a5;
}
.badge-status-toomuch{
    background-color: #98a3c3;
    color: #FFFFFF;
}
.badge-status-fair,
.badge-status-fair-light-wind,
.badge-status-low{
    background-color: #39d8295c;
    color: #4a9a43;
}
.badge-status-poor{
    background-color: #e2e2e2;
    color: #313131;
}


.card-waves-wind.good,
.card-waves-wind.good-glassy,
.card-waves-wind.low,
.card-waves-wind.high,
.card-waves-wind.high-glassy,
.card-waves-wind.higher{
    border-top-color:  #3AD828;
}

.card-waves-wind.flat{
    border-top-color: #e6e6e6;
}
.card-waves-wind.toomuch{
    border-top-color:  #a5a5a5;
}

.card-waves-wind.fair,
.card-waves-wind.fair-light-wind{
    border-top-color:  #C4F692;
}
.card-waves-wind.poor{
    border-top-color: #D9D9D9;
}

.weather-icon{
    width: 28px;
    height: 28px;
}

.card-table{

}
.card-table th{
    padding:8px 13px;
    font-weight: normal;
    border:0;
}

.card-table td{
    padding:7px 13px;
    border:0;
}
.card-table thead th{
    border:0;
}

.card-nav.nav-tabs .nav-link{
    border:0;
    font-size: 0.95rem;
}

.card-nav.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
    border-bottom: 1px solid #1E272E;
    color: #1E272E;
}
.card-nav.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link{
    color: #BBBBBB;
    font-weight: 500;
}

.form-control{
    padding: 1.75rem .75rem;
    border-color: #cecece;
    font-size: 0.9rem;
}
textarea.form-control{
    padding: .75rem;
}

ul.action-list {
    padding: 0;
    list-style-type: none;
    font-size: 1.1em;
}

ul.action-list li{
    padding: 13px 0;
}
ul.action-list a{
    font-weight: 500;
}

ul.action-list p{
    margin-bottom: 0;
}

ul.action-list svg{
    height: 12px;
}

.alert-success{
    background-color: #338ADF;
    color: white;
    border-color: transparent;
}

.background-cover{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.landing-header{
    background-color: rgba(0, 0, 0, 0.3);
}
.landing-header::before {
    content: "";
    background-image: url(../images/spots/doninos2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

.img-round{
    border-radius: 50%;
}

p.landing {
    line-height: 19px;
    font-size: 0.95em;
}

.bi.bi-2x{
    width: 2em;
    height: 2em;
}

.bi.header{
    width: 4em;
    height: 4em;
}

.desktop-warning{
    position: fixed;
    bottom: 48px;
    background-color: #ef3e3e;
    color: white;
    z-index: 9999;
    width: 500px;
    padding: 20px;
    font-size: 16px;
    right: 10px;
}

.tide-grid{
    position:absolute;
    border-bottom:1px solid #e5e5e5;
    width: 5px;
    right:0;
    height: 10%;
    z-index:-1;
}
.tide-grid-long{
    width: 10px;
}
.tide-grid-long-full{
    width: 100%;
}
.tide-grid-label{
    position: absolute;
    right: 16px;
    top: 28px;
    font-size: 13px;
    color: #d0cfcf;
    z-index: -2;
}

.dropdown-beach{
    border: 0;
    padding: 0;
}
.dropdown-beach .btn{
    font-size: 1.1rem;
}

.dropdown-beach .dropdown-item{
    padding: .50rem 1.5rem;
}
.dropdown-beach .dropdown-menu{
    left:-25px;
    min-width: 12rem;
}

.dropdown-beach .btn.focus, .dropdown-beach .btn:focus{
    box-shadow: none;
}
.dropdown-beach .dropdown-item.active, .dropdown-beach .dropdown-item:active{
    color:inherit;
    background-color: inherit;
}
.dropdown-beach .dropdown-item:focus, .dropdown-beach .dropdown-item:hover{
    color:inherit;
    background-color: inherit;
}

footer{
    font-size:11px;
}
footer .navbar {
    border-top: 1px solid #e3e3e3;
    /*padding-bottom: max(12px, env(safe-area-inset-bottom))!important;
    padding-bottom: env(safe-area-inset-bottom, 0)!important;*/
}
footer .nav-item.active a.nav-link{
    color: #1E272E;
}
footer .nav-item a.nav-link{
    color: #7b7b7b;
    padding-top:.45rem;
    padding-bottom: 0;
}
footer .nav-item a.nav-link svg{
    fill: #7b7b7b;
    width: 22px;
    height: 22px;
}
footer .nav-item.active a.nav-link svg{
    fill: #000000;
}

@supports(padding: max(0px)) {
    footer .navbar{
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
}

/** iPhone 11 **/
@media only screen
and (device-width: 414px)
and (device-height: 896px)
and (-webkit-device-pixel-ratio: 2) {
    footer .navbar {
        padding-bottom: 20px !important;
    }
    footer .navbar.navbar-no-padding {
        padding-bottom: 0 !important;
    }

}
/** iPhone 12 and iPhone 12 Pro **/
@media only screen
and (device-width: 390px)
and (device-height: 844px)
and (-webkit-device-pixel-ratio: 3) {
    footer .navbar {
        padding-bottom: 20px !important;
    }
    footer .navbar.navbar-no-padding {
        padding-bottom: 0 !important;
    }
}

@media only screen
and (device-width: 375px)
and (device-height: 812px)
and (-webkit-device-pixel-ratio: 3) {
    footer .navbar {
        padding-bottom: 20px !important;
    }
    footer .navbar.navbar-no-padding {
        padding-bottom: 0 !important;
    }
}

/** iPhone 12 Pro Max **/
@media only screen
and (device-width: 428px)
and (device-height: 926px)
and (-webkit-device-pixel-ratio: 3) {
    footer .navbar {
        padding-bottom: 20px !important;
    }
    footer .navbar.navbar-no-padding {
        padding-bottom: 0 !important;
    }
}

/* iPhone 11 Pro */
@media only screen
and (device-width: 375px)
and (device-height: 812px)
and (-webkit-device-pixel-ratio: 3) {
    footer .navbar {
        padding-bottom: 20px !important;
    }
    footer .navbar.navbar-no-padding {
        padding-bottom: 0 !important;
    }
}

/* iPhone 11 Pro Max */
@media only screen
and (device-width: 414px)
and (device-height: 896px)
and (-webkit-device-pixel-ratio: 3) {
    footer .navbar {
        padding-bottom: 20px !important;
    }
    footer .navbar.navbar-no-padding {
        padding-bottom: 0 !important;
    }
}

button.button-favorite{
    border:none;
    background:transparent;
    padding:0;
}
.button-svg .filled{
    display:none;
}

.button-svg.button-svg-2x svg{
    width: 2em;
    height: 2em;
}

.button-svg.button-svg-3x svg{
    width: 3em;
    height: 3em;
}

.button-svg.filled .filled{
    display:block;
}

.disable-text-selection{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.form-website{
    display: none;
}

/* Estilos para el popover de webcams */
.popover {
    background-color: #181818;
    min-width: 145px;
    border: none;
    box-shadow: 0px 2px 3px 0 rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    transition: none !important;
}

.popover .arrow::after {
    border-bottom-color: #3A4043;
}

.popover-body {
    padding: 0;
}

.popover-body a {
    color: white !important;
    padding: 14px 18px;
    display: block;
    width: 100%;
}

.popover-body > div {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.popover-body > div:last-child {
    border-bottom: none;
}

.popover-body > div:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Buoy History Styles */
.buoy-history-date-selector {
    display: flex;
    padding: 10px 0;
    flex-direction: row-reverse;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
}

.buoy-history-date-item {
    flex: 1;
    padding: 6px 12px;
    border-radius: 8px;
    background-color: white;
    border: 1px solid #E5E5E5;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    color: #5A5A5A;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.buoy-history-date-item.active {
    background-color: #3A4043;
    color: white;
    border-color: #3A4043;
}

.buoy-history-calendar-btn {
    flex: 1;
    padding: 6px 12px;
    border-radius: 8px;
    background-color: white;
    border: 1px solid #E5E5E5;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #5A5A5A;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.buoy-history-calendar-btn:hover {
    background-color: rgba(33, 37, 41, 0.1);
}

.buoy-history-date-day {
    font-weight: bold;
    font-size: 0.95em;
}

.buoy-history-date-month {
    font-size: 0.8em;
}

.buoy-history-no-data {
    text-align: center;
    padding: 30px;
    color: #6c757d;
}

.buoy-history-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #f8f9fa;
    z-index: 1000;
}

.buoy-history-header .calendar-btn {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 12px;
    border-radius: 8px;
    background-color: white;
    border: 1px solid #E5E5E5;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.buoy-history-header .calendar-btn:hover {
    background-color: rgba(33, 37, 41, 0.1);
}

.buoy-history-header .calendar-btn svg {
    width: 20px;
    height: 20px;
}

.buoy-history-header .card {
    margin: 0.5rem 0 0 0;
}

.buoy-history-close {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

/* Skeleton loader styles */
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

.buoy-history-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
}

.buoy-history-skeleton-chart {
    width: 100%;
    height: 150px;
    border-radius: 8px;
}

.buoy-history-skeleton-title {
    width: 200px;
    height: 20px;
    margin-bottom: 12px;
    border-radius: 4px;
}

.buoy-history-chevron-btn {
    flex: 0 0 30px;
    height: 53px;
    padding: 6px 12px;
    border-radius: 8px;
    background-color: white;
    border: 1px solid #E5E5E5;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #5A5A5A;
    display: flex;
    align-items: center;
    justify-content: center;
}

.buoy-history-chevron-btn:hover {
    background-color: rgba(205, 205, 206, 0.1);
    color: #5A5A5A;
}

.buoy-history-chevron-btn i {
    font-size: 1.1em;
}

.nav-arrow-container {
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-radius: 50%;
}

.notification-dot {
    position: absolute;
    top: -1px;
    right: 0px;
    width: 12px;
    height: 12px;
    background-color: #F33B0E;
    border-radius: 50%;
    border: 2px solid #f4f5f6;
}

.overlay.closing {
    pointer-events: none;
}

.overlay.closing .modal-bottom-sheet {
    pointer-events: none;
}

.overlay.closing .modal-bottom-sheet-content {
    height: var(--modal-content-height);
    overflow: hidden;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.15);
    z-index: 1039;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.modal-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.svg-muted {
    filter: invert(59%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}