/*CUSTOM Menu Items CSS, see menu-js to use in WP*/

/*Assumed Area Warning*/
#assumedAreaWarning{
    background-color: #f0ddac;
    color: #5b5e60;
    width:100px;
    display: inline-block;
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    z-index:99;
    position: fixed;
}

#assumedAreaWarning p{margin-bottom:0px;}

/*City pointer using the city box to always correctly locate it*/
#toggleMenuDropdown::after{
    content: "";
    position: absolute;
    right: 50%;
    margin-top: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent  #f0ddac transparent;
    z-index:200;
}

.hidden-tickarrow::after{visibility: hidden;}
#assumedDontShow, #newDepartCity{cursor:pointer;text-decoration:underline;}
#assumedCloseX, #assumedCloseX2{padding-right:25px;float:right;cursor:pointer;color:black;}

/*Newsletter button*/
.mainMenuNewsletter a span, .sidr-class-mainMenuNewsletter a span{
    background-color:#0099FF;
    color:white!important;
    font-weight:bold;
    border-radius:3px;
    padding:10px;
}

/*CITY DROPDOWN*/
.custom-select-wrapper {
    position: relative;
    user-select: none;
}
.custom-select {
    position: relative;
    display: flex;
    flex-direction: column;
}
.custom-select__trigger{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left:8px;
    cursor: pointer;
}
.custom-options {
    height: 500px;
    overflow-y: scroll;
    position: absolute;
    display: block;
    border: 1px solid #394a6d;
    border-top: 0;
    background: #fff;
    transition: all 0.5s;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 300;
}
.custom-select.open .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}
.custom-option, .custom-option-ttl {
    position: relative;
    display: block;
    cursor: pointer;
    transition: all 0.5s;
}

.custom-option-ttl {
    cursor: auto;
}

.custom-option:hover {
    cursor: pointer;
    background-color: #b2b2b2;
}

.custom-option.selected {
    color: #ffffff;
    background-color: #305c91;
}

.ft-main-areas{font-weight: bold;}

/*Desktop Only*/
@media screen and (min-width: 1024px) {
.custom-select__trigger{
    margin-top:19px;/*30px;*/
    font-weight:600;
}
.custom-options {
    width:210px;
    top: 122%;
}
.custom-option, .custom-option-ttl {padding: 2px 22px 2px 22px;}
.custom-option-ttl{background-color: #E5E5E5;}
#toggleMenuDropdown::after{bottom:-12px;}

}

/*Mobile Only*/
@media screen and (max-width: 1024px) {
    #assumedCloseX, #assumedCloseX2{font-size:2em;line-height:1.2em;}
    .custom-select__trigger{
        margin-top:23px;
        font-size:1em;
        font-weight:500;
        left: 0;
        right: 0;
    }
    .custom-options {
        width:250px;
        top: 54px;
        right: 0;
    }
    .custom-option, .custom-option-ttl {padding: 10px 22px 10px 22px;}
    .custom-option-ttl{background-color: #E5E5E5;}
    #toggleMenuDropdown::after{bottom:-5px;}

}

/*END CUSTOM Menu Items CSS*/