a.btn-green {
    display: inline-block;
    height: 1.9rem;
    line-height: 1.9rem;
    background: #bebd00;
    font-size: 0.75rem;
    margin: 0 0 0.65rem 0;
    padding: 0 0.65rem;
    color: #4e394e;
    border-top: 1px solid #f0ef35;
    border-right: 1px solid #666703;
    border-bottom: 1px solid #666703;
    border-left: 1px solid #f0ef35;
    text-transform: uppercase;
    text-shadow: none;
    text-decoration: none;
}

a.btn-green:hover {
    background: #dedd00;
}


div.top div.login a.label,
div.top div.planner a.label,
div.top div.login a.user {
    display: inline-block;
    padding: 0 0.45rem;
    color: white;
    background: rgba(0, 0, 0, 0.6);
}

div.top div.planner a.label {
    text-transform: uppercase;
}

div.top div.login a.user {
   color: #e4e400;
}

div.top div.login a.label:hover,
div.top div.login a.user:hover,
div.top div.planner a.label:hover {
    text-decoration: none;
    background: rgba(0, 0, 0, 0.9);
}

div.top ul.top li div.planner a.label span.planner-qtn {
    background: var(--planner-badge-bg);
    min-width: 1.2rem;
    height: 1.2rem;
    line-height: 1.2rem;
    margin: 0.2rem -0.25rem 0 0.5em;
    padding: 0 .1em;
    color: white;
    font-size: 0.75rem;
    text-align: center;
    float: right;
}

div.top ul.top li div.planner div#planner-added-wrap {
    position: absolute;
    top: 1.6rem;
    width: 100%;
    background: #e6e7e7;
    -webkit-box-shadow: 3px 3px 3px #888;
    box-shadow: 3px 3px 3px #888;
}

div.top ul.top li div.planner div#planner-added-wrap div#planner-added {
    display: none;
    padding: 1rem 0.65rem 1rem 1.9rem;
    font-family: 'proxima_nova_rgregular', 'Arial', sans-serif;
    font-size: 0.75rem;
    font-weight: bold;
    line-height: 1.3em;
    background: url('../../images/planner/planner-added.png') 5px 17px no-repeat;
}

div.top ul.top li form.search {
    margin: 0;
    padding: 0;
}

div.top ul.top li form.search input {
    height: 1.6rem;
    line-height: 1.6rem;
    border: 0;
    padding: 0 0 0 1.6rem;
    font-size: 0.9rem;
    width: 9.6rem;
    background-color: white;
    background-repeat: no-repeat;
    background-position: 0 0;
background-image: url('../images/search/zoom.svg');
}
/*
a.soc {
    background-repeat: no-repeat;
    background-image: url('../images/btn-soc-small.svg');
    background-size: 200% 500%;
}

a.soc.fb { background-position: 0% 0%; }
a.soc.dr { background-position: 0% 25%; }
a.soc.tw { background-position: 0% 50%; }
a.soc.ig { background-position: 0% 75%; }
a.soc.yt { background-position: 0% 100%; }

a.soc.fb:hover { background-position: 100% 0%; }
a.soc.dr:hover { background-position: 100% 25%; }
a.soc.tw:hover { background-position: 100% 50%; }
a.soc.ig:hover { background-position: 100% 75%; }
a.soc.yt:hover { background-position: 100% 100%; }
*/
a.soc {
    background-repeat: no-repeat;
    background-size: 68% auto;background-position:50% 50%;
    background-color:rgba(0, 0, 0, 0.6)
}

a.soc.yt {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 104 17 17'%3E%3Cpath fill='%23fff' transform='translate(-100,100)' d='m 106.07,17.82 c -0.58387,-0.180444 -1.04531,-0.630719 -1.24,-1.21 -0.54,-1.48 -0.7,-7.66 0.34,-8.88 0.34613,-0.3968738 0.83482,-0.6412194 1.36,-0.68 2.79,-0.3 11.41,-0.26 12.4,0.1 0.55959,0.1905373 1.00623,0.6188672 1.22,1.17 0.59,1.53 0.61,7.09 -0.08,8.56 -0.18968,0.377929 -0.49426,0.686014 -0.87,0.88 -1.04,0.52 -11.75,0.5 -13.13,0.06 m 4.43,-2.9 5,-2.6 -5,-2.62 z'/%3E%3C/svg%3E");
}


a.soc.ig {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 79 17 17'%3E%3Cpath fill='%23fff' d='m12.414 79.5c-2.1492 0-2.419 0.0095-3.2631 0.04776-0.84248 0.03855-1.4175 0.17183-1.9207 0.3674-0.52049 0.20198-0.96201 0.47216-1.4019 0.91187-0.4402 0.43956-0.71059 0.88075-0.91338 1.4007-0.1962 0.50298-0.32975 1.0778-0.36766 1.9193-0.03775 0.84349-0.04765 1.1132-0.04765 3.2608 0 2.1477 0.00955 2.4164 0.047802 3.2598 0.038744 0.84186 0.17213 1.4165 0.36766 1.9193 0.20229 0.52011 0.47268 0.96129 0.91272 1.4008 0.43971 0.43987 0.88123 0.71073 1.4014 0.9127 0.50351 0.19556 1.0787 0.32883 1.9211 0.36739 0.84414 0.03832 1.1137 0.04776 3.2628 0.04776 2.1494 0 2.4183-0.0094 3.2624-0.04776 0.84249-0.03854 1.4182-0.17182 1.9217-0.36739 0.52033-0.20197 0.96119-0.47283 1.4009-0.91269 0.4402-0.43956 0.71059-0.88074 0.91338-1.4007 0.19454-0.50297 0.32809-1.0778 0.36766-1.9193 0.03792-0.84351 0.0478-1.1124 0.0478-3.26 0-2.1476-0.0099-2.4172-0.0478-3.2607-0.03957-0.84186-0.17312-1.4165-0.36766-1.9193-0.20279-0.52011-0.47318-0.96132-0.91338-1.4009-0.4402-0.43989-0.88041-0.71007-1.4014-0.91189-0.50451-0.19555-1.0799-0.32883-1.9224-0.36738-0.84414-0.03839-1.1129-0.04776-3.2628-0.04776zm-0.70993 1.4251c0.21071-2.83e-4 0.44581 0 0.70993 0 2.113 0 2.3634 0.0076 3.1978 0.04551 0.77159 0.03527 1.1904 0.16408 1.4693 0.27233 0.36931 0.14333 0.63261 0.31466 0.90942 0.59143 0.27698 0.27678 0.44844 0.54039 0.59222 0.9094 0.10832 0.27842 0.23741 0.69689 0.27252 1.4679 0.03793 0.83361 0.04617 1.084 0.04617 3.1944 0 2.1104-0.0082 2.3608-0.04617 3.1944-0.03528 0.77102-0.16421 1.1895-0.27252 1.4679-0.14343 0.36904-0.31524 0.63182-0.59222 0.90842-0.27698 0.27678-0.53995 0.44811-0.90942 0.59144-0.27863 0.10874-0.69773 0.23723-1.4693 0.2725-0.83423 0.03789-1.0848 0.04609-3.1978 0.04609-2.1131 0-2.3636-0.0083-3.1978-0.04609-0.77158-0.03564-1.1904-0.16442-1.4695-0.27266-0.36931-0.14332-0.6331-0.31466-0.91008-0.59144-0.27698-0.27677-0.44844-0.5397-0.59222-0.90891-0.10832-0.27842-0.23741-0.69689-0.27252-1.4679-0.037924-0.83363-0.045509-1.084-0.045509-3.1958 0-2.1117 0.00762-2.3608 0.045509-3.1945 0.035282-0.77102 0.16421-1.1895 0.27252-1.4682 0.14343-0.36903 0.31523-0.63263 0.59222-0.90941 0.27697-0.27677 0.54077-0.44811 0.91008-0.59177 0.27896-0.10874 0.6979-0.23723 1.4695-0.27266 0.73004-0.03303 1.013-0.04282 2.4879-0.0445zm4.9342 1.313c-0.52429 0-0.94966 0.42455-0.94966 0.94861 0 0.5239 0.42537 0.94895 0.94966 0.94895 0.52428 0 0.94965-0.42505 0.94965-0.94895 0-0.52389-0.42537-0.94893-0.94966-0.94893zm-4.2243 1.1088c-2.2444 0-4.064 1.8183-4.064 4.061 0 2.2427 1.8197 4.0602 4.064 4.0602 2.2444 0 4.0634-1.8175 4.0634-4.0602 0-2.2427-1.8192-4.061-4.0635-4.061zm0 1.4251c1.4568 0 2.6379 1.1801 2.6379 2.636 0 1.4557-1.1811 2.636-2.6379 2.636-1.4569 0-2.6379-1.1802-2.6379-2.636 0-1.4559 1.181-2.636 2.6379-2.636z'/%3E%3C/svg%3E");
}


a.soc.tw {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 55 16 16'%3E%3Cpath fill='%23fff' d='m16.742 56.2h2.2393l-4.9166 5.5981 5.7442 7.594h-4.5077l-3.5293-4.6148-4.0404 4.6148h-2.2393l5.2087-5.9876-5.5008-7.2046h4.6197l3.1885 4.2156zm-0.78374 11.878h1.2413l-8.0321-10.612h-1.3338z'/%3E%3C/svg%3E");
}


a.soc.dr {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 27 18 18'%3E%3Cpath fill='%23fff' transform='translate(-25,25)' d='M40 9.72q.13 0 .25-.03c.54-.14.8-.71.82-1.39.03-.72-.23-1.32-.82-1.4q-.07-.03-.16-.02c-.47 0-.78.28-.94.7q-.12.32-.14.72-.02.47.14.84c.15.35.43.58.85.58m-.02.23q-.35 0-.61.07l.05.07.09.16.07.17.06.18.05.19.03.18.01.19.01.18v.2l-.01.19-.01.19-.05.38-.04.19-.04.18-.03.19-.05.18-.03.18-.05.17-.04.17-.04.16-.04.15-.04.14-.01.1-.03.1-.02.11-.02.12-.02.12-.02.1v.02l-.03.14-.02.13-.02.15-.02.14-.02.15-.03.15-.02.15-.02.15-.02.15-.02.15-.02.15.09 1.04q.03.36.15.53c.11.18.3.24.57.27q.34-.03.52-.2.19-.16.25-.6c.1-.63.38-2.7.62-3.58.35-1.28 1.19-3.6-.87-3.78q-.12-.02-.26-.02M37.5 9.3c.8 0 1.17-.73 1.17-1.62s-.37-1.63-1.17-1.64h-.01c-.8 0-1.18.74-1.18 1.64S36.7 9.3 37.5 9.3m-2.98 8.02q.06.45.24.61.19.18.53.2.4-.03.57-.27.12-.18.15-.54l.08-1.02v-.01l-.01-.15-.02-.16-.03-.15-.01-.14-.02-.16-.03-.14-.01-.15-.03-.15-.02-.14-.02-.13-.03-.14v-.02l-.02-.1-.02-.13-.02-.11-.02-.11-.03-.1-.02-.1-.03-.14-.04-.16-.04-.16-.04-.16-.05-.17-.04-.18-.04-.18-.04-.19-.04-.19-.03-.18-.05-.38-.01-.2-.01-.19v-.37l.02-.2.03-.18.05-.18.05-.18.08-.17.1-.16.04-.07a3 3 0 0 0-.61-.07q-.14 0-.27.02c-2.05.17-1.21 2.5-.86 3.77.24.89.52 2.95.62 3.58m1.34-4.25.21.85c.25 1.03.5 3.4.59 4.11s.34.87.85.92c.51-.05.77-.2.85-.92.09-.72.34-3.08.58-4.1l.22-.86c.22-.94.4-2.03 0-2.74-.27-.45-.77-.75-1.65-.75s-1.4.3-1.65.75c-.4.7-.22 1.8 0 2.74m-1.1-3.38.25.03c.43 0 .7-.23.85-.58q.14-.37.14-.84a2 2 0 0 0-.14-.72c-.16-.42-.47-.7-.94-.7l-.16.01c-.59.1-.84.69-.82 1.41.02.68.29 1.25.82 1.39'/%3E%3C/svg%3E");
}

a.soc.fb {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5.5 5 15 15'%3E%3Cpath fill='%23fff' d='M13.5 18.95h-2.67V12.5H9.49v-2.22h1.34V8.94c0-1.8.75-2.89 2.89-2.89h1.78v2.22h-1.12c-.83 0-.88.32-.88.9v1.1h2l-.23 2.23H13.5z'/%3E%3C/svg%3E");
}

a.soc.fb:hover { background-color: #3a5997; }
a.soc.dr:hover { background-color: #e97900; }
a.soc.tw:hover { background-color: #00acee; }
a.soc.ig:hover { background-color: #2e5e86; }
a.soc.yt:hover { background-color: #fd3832; }

div#lightbox-shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background: black;
    z-index: 998;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
    filter: alpha(opacity=85);
    -moz-opacity: 0.85;
    -khtml-opacity: 0.85;
    opacity: 0.85;
}

div.lightbox-shadow-full {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
    filter: alpha(opacity=100) !important;
    -moz-opacity: 1 !important;
    -khtml-opacity: 1 !important;
    opacity: 1 !important;
}

div#lightbox {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}

div#lightbox.lightbox-full {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

div#lightbox.lightbox-full img {
    max-width: 90vw;
    max-height: 90vh;
    display: block;
}

div.lightbox-wrap-galery {
    position: relative;
    width: min(61.5rem, 100%);
    height: 100%;
    margin: 0 auto;
}

div.gallery-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: pan-y;
    cursor: grab;
}

div.gallery-viewport.is-dragging {
    cursor: grabbing;
}

div.gallery-strip {
    display: flex;
    height: 100%;
    will-change: transform;
    transition: transform 0.35s ease;
}

div.gallery-strip.gallery-no-anim {
    transition: none;
}

div.gallery-strip div.gallery-slide {
    flex: 0 0 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

div.gallery-strip div.slide-content {
    display: inline-block;
    height: 100%;
    width: auto;
    max-width: 100%;
}

div.gallery-strip div.slide-img-wrap {
    width: max-content;
    height: calc(100% - 5.8rem);
    max-width: 100%;
}

div#lightbox.lightbox-full div.gallery-strip div.slide-img-wrap img {
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

div.gallery-strip div.slide-details {
    position: relative;
    height: 5.8rem;
    background: rgba(0, 0, 0, 0.72);
    overflow: hidden;
}

div.gallery-strip div.slide-details div.lightbox-image-title {
    color: white;
    font-family: "Roboto", 'Arial', sans-serif;
    font-size: 1.15rem;
    font-weight: 300;
    padding: 1em 1.3rem;
    line-height: 1em;
}

div.gallery-strip div.slide-details a.lightbox-image-download {
    display: inline-block;
    color: white;
    font-family: "Roboto", 'Arial', sans-serif;
    font-weight: 400;line-height:1;
    padding: 0 0 0 1.3rem;margin-left:1.3rem;
    background: url('../../images/box-download.png') 0 0 no-repeat;
    background-size: auto 300%;
}

div.gallery-strip div.slide-details a.lightbox-image-download:hover {
    background-position: 0 100%;
}

div#lightbox a.lightbox-prev,
div#lightbox a.lightbox-next {
    position: absolute;
    width: 4rem;
    height: 100%;
    top: 0;
    z-index: 5;
}

div#lightbox a.lightbox-prev {
    left: 0;
}

div#lightbox a.lightbox-next {
    right: 1.3rem;
}

div#lightbox a.lightbox-prev::before,
div#lightbox a.lightbox-next::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 4rem;
    height: 4rem;
    background-color: rgba(0, 0, 0, 0.3);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: auto 3rem;
    transform: translateY(-50%);
}

div#lightbox a.lightbox-prev::before {
    left: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='33.5 16.5 12 23'%3E%3Cpath d='M34 17 L45 28 L34 39' fill='none' stroke='%23fff' stroke-width='0.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    transform: translateY(-50%) scaleX(-1);
}

div#lightbox a.lightbox-next::before {
    right: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='33.5 16.5 12 23'%3E%3Cpath d='M34 17 L45 28 L34 39' fill='none' stroke='%23fff' stroke-width='0.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    transform: translateY(-50%);
}

div#lightbox a.lightbox-prev:hover::before,
div#lightbox a.lightbox-next:hover::before {
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

div#lightbox a.lightbox-close-right {
    position: absolute;
    display: block;
    top: 1.3rem;
    right: 1.3rem;
    width: 4rem;
    height: 4rem;
    z-index: 7;
}

div#lightbox a.lightbox-close-right::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4rem;
    height: 4rem;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 3.4rem auto;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6 L18 18 M18 6 L6 18' fill='none' stroke='%23fff' stroke-width='0.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

div#lightbox a.lightbox-close-right:hover::before {
    box-shadow: inset 0 0 0 1px #ff0000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6 L18 18 M18 6 L6 18' fill='none' stroke='%23ff0000' stroke-width='0.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ===== Buttons ===== */

a.btn-grey {
    display: inline-block;
    background: #d6d7da;
    color: var(--text-color);
     font-family: var(--sec-font-family);
    font-size: 0.85rem;line-height:1.2;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.5em 0.6em 0.4em 0.6em;
    margin: 0 0 0.6rem 0;
    border-right: 1px solid #c5c5c5;
    border-bottom: 1px solid #c5c5c5;
}

a.btn-grey:hover {
    background-color: #caccd0;
    text-decoration: none;
}

a.print {
    display: block;
    width: 1.6rem;
    height: 1.9rem;
    background: url('../../images/PrintIcon_melna.png') 50% 50% no-repeat;
    background-size: 100% auto;
}

a.print:hover {
    background-image: url('../../images/PrintIcon_Gaisha.png');
}

a.btn-red {
    display: inline-block;
    background: #df2d28;
    color: white;
     font-family: var(--sec-font-family);
    font-size: 0.85rem;line-height:1;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.5em 0.6em;
    margin: 0 0 0.6rem 0;
    border-right: 1px solid #901c1a;
    border-bottom: 1px solid #901c1a;
}

a.btn-red:hover {
    background: #c52723;
    text-decoration: none;
}

a.btn-transp {
    display: inline-block;
    background: rgba(0,0,0,0.3);
    color: white;
     font-family: var(--sec-font-family);
    font-size: 0.75rem;
    font-weight: 300;
    padding: 0.35rem 0.7rem;
    margin: 0;
}

a.btn-transp:hover {
    background: black;
    text-decoration: none;
}

a.btn-download {
    background-image: url('../../images/route/download.png');
    background-repeat: no-repeat;
    background-position: 6px 50%;
    padding-left: 1.9rem;
    padding-right: 3.6rem;
    position: relative;
    max-width: 100%;
    overflow: hidden;
}

a.btn-download .btn-download-label {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}

a.btn-download:hover {
    background-image: url('../../images/route/download-hover.png');
}

a.btn-download .file-extension {
    bottom: -1px;
    color: white;
    font-size: 1.15rem;
    line-height: 1.8rem;
    position: absolute;
    right: -1px;
    text-align: center;
    top: 0;
    width: 3.1rem;
}

a.btn-extension {
    color: white;
    font-size: 1.15rem;
    height: 1.6rem;
    line-height: 1.8rem;
    padding: 0;
    text-align: center;
    width: 3.1rem;
}

a.btn-download .file-extension.gpx,
a.btn-extension.gpx {
    background-color: #bcbb00;
    border-right: 1px solid #a8a202;
    border-bottom: 1px solid #a8a202;
}

a.btn-extension.gpx:hover {
    background-color: #b2b100;
}

/* Split download button: a .gpx that has derived map geometry also gets a
   narrow "show on map" segment. The download half keeps its own look, the two
   halves share the middle edge and the right half carries the outer radius. */
.btn-split {
    display: inline-flex;
    vertical-align: top;
    max-width: 100%;
}

.btn-split > a.btn-download:first-child {
    border-radius: 0;
}

.btn-split > a.btn-download-show {
    background-image: none;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    display: inline-block;
    padding: 0;
    width: 2.4rem;
}

.btn-split > a.btn-download-show:hover,
.btn-split > a.btn-download-show:focus {
    background-image: none;
    background-color: #6d6d6d;
}

.btn-split > a.btn-download-show .btn-download-show-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s7-6.4 7-11.2a7 7 0 1 0-14 0C5 15.1 12 21.5 12 21.5z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 1.15rem 1.15rem;
    display: block;
    height: 1.7rem;
}

/* The extension badge no longer sits on the outer edge when split. */
.btn-split > a.btn-download:first-child .file-extension {
    border-right: 0;
}

a.btn-download .file-extension.pdf,
a.btn-extension.pdf {
    background-color: #e00023;
    border-right: 1px solid #b7001c;
    border-bottom: 1px solid #b7001c;
}

a.btn-extension.pdf:hover {
    background-color: #c7001f;
}

.rating a.btn-extension {
    margin-top: 0.2rem;
}

a.hidden {
    display: none;
}

/* ===== Cookie alert ===== */

#cookie-alert {
    z-index: 10;
    background: rgba(40, 40, 40, 0.95);
    color: #e1e1e1;
    padding: 1.3rem 0 0.65rem 0;
    font-size: 0.9rem;
    position: fixed;
    width: 100%;
    transition: all 0.5s;
    opacity: 0;
    bottom: -3.8rem;
}

#cookie-alert .container {
    width: 65.6rem;
    max-width: 100%;
    margin: 0 auto;
}

#cookie-alert .content {
    padding-right: 6.4rem;
    padding-left: 1.5rem;
}

#cookie-alert .content a, #cookie-alert .content a:visited {
    color: #0f96b0;
}

#cookie-alert .content a:hover {
    text-decoration: underline;
}

#cookie-alert a.cookie-close {
    float: left;
    margin-right: 1rem;
    position: relative;
    z-index: 15;
}

@media (max-width: 768px) {
    #cookie-alert {
        padding-right: 6.4rem;
    }
    #cookie-alert .container {
        width: 1024px;
        max-width: 75%;
        margin: 0 1.5rem;
        display: flex;
    }
    #cookie-alert .content {
        padding-right: 1rem;
        padding-left: 0;
    }
    #cookie-alert a.cookie-close {
        float: left;
    }
}

/* ===== App holder ===== */

/* ===== Listen box / audio button ===== */

.listen_box {
    border-style: solid;
    border-color: #cccece;
    border-width: 0;
    max-width: 19.2rem;
    margin-top: 4.8rem;
}

.audio_button {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 19.2rem;
    height: 4.5rem;
    background-color: var(--brand-primary);
    cursor: pointer;
    box-sizing: border-box;
}

.audio_button:hover {
    background-color: var(--overlay-hover);
}

.audio_button.ab_small {
    height: 2.6rem;
    max-width: 10.9rem;
}

.ab_text {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 1.3rem;
    text-transform: uppercase;
    color: #ffffff;
    padding: 0 0.5rem;
    min-height: 0;
}

.audio_button.ab_small .ab_text {
    font-size: 1.3rem;
}

.ab_icon {
    flex: 0 0 4.5rem;
    height: 4.5rem;
    background-image: url('../images/speaker_button.svg');
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.audio_button.ab_small .ab_icon {
    flex: 0 0 2.6rem;
    height: 2.6rem;
    background-size: 2.6rem 2.6rem;
}

.nosvg .ab_icon {
    background-image: url('../images/speaker_button.png');
}

.playing .ab_icon {
    background-image: url('../images/pause-button.svg');
}

.nosvg .playing .ab_icon {
    background-image: url('../images/pause-button.png');
}

.nosvg .ab_small .ab_icon {
    background-image: url('../images/speaker_button_small.png');
}

.nosvg .playing .ab_small .ab_icon {
    background-image: url('../images/pause-button_small.png');
}

.ab_audio {
    display: none;
}

.ab_tabs {
    float: right;
    margin-bottom: 0.65rem;
}

@media screen and (max-width: 850px) {
    .listen_box { margin-top: 0; }
}

@media screen and (max-width: 480px) {
    .ab_tabs {
        position: relative;
        float: left;
        margin-bottom: 1.3rem;
    }
}

/* ===== Objekts — side panel + TripAdvisor widget ===== */

div.objekts div.right300 div.side {
    background: #ebebeb;
    padding: 1rem 1.6rem;
}

.widSSP {
    width: 100% !important;
}

/* ===== Public form system =====
   Shared core styles for public (visitor-facing) forms. Used by Newsletter,
   UsrRegister, Booking and the future public object-edit form. Themed by the
   --form-* / --btn-* tokens in base.css :root. Unscoped so it works under
   #contents, footers and standalone iframe bodies alike.
   Panel-admin forms keep their own .panelVisualContent + panel --* theme. */

.form .form-label,
.form-field .form-label {
    display: block;
    color: var(--field-label-color);
    margin: 0 0 0.35em 0;
    font-size: 0.95rem;
}

.form-field {
    margin: 0.3rem 0;
}

.form-field.has-error label,
.form-field.has-error .form-label {
    color: var(--field-err-color);
}

.form .text,
.form input[type="text"],
.form input[type="password"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="number"],
.form select,
.form textarea {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-color);
    padding: 0.55em 0.75em;
    font-family: var(--main-font-family);
    font-size: 0.95rem;
    line-height: 1.3;
    border-radius: var(--input-radius);
    outline: none;
}

.form textarea {
    resize: vertical;
    min-height: 4em;
}

.form select {
    padding: 0.5em 0.5em;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
    border-color: var(--input-focus-border);
}

.form-field.has-error .text,
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea,
.row.err input,
.row.err select,
.row.err textarea {
    border-color: var(--field-err-color);
}

.field-err,
.form-field .field-err {
    display: block;
    color: var(--field-err-color);
    font-size: 0.8rem;
    margin-top: 0.25em;
}

/* Buttons: native <button> and <input type=submit>. Anchor buttons a.btn-*
   keep their own styling below. */
button.btn,
input[type="submit"].btn,
a.btn {
    display: inline-block;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-color);
    border-top: 1px solid var(--btn-primary-accent-hover);
    border-right: 1px solid var(--btn-primary-bg);
    border-bottom: 1px solid var(--btn-primary-bg);
    border-left: 1px solid var(--btn-primary-accent);
    padding: 0.55em 1.2em;
    font-family: var(--main-font-family);
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.2;
}

button.btn:hover,
input[type="submit"].btn:hover,
a.btn:hover {
    background: var(--btn-primary-hover-bg);
}

button.btn:disabled,
input[type="submit"].btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn.btn-secondary,
button.btn-secondary {
    background: #d6d7da;
    color: var(--text-color);
    border-right: 1px solid #c5c5c5;
    border-bottom: 1px solid #c5c5c5;
    border-top: 1px solid #e6e7e7;
    border-left: 1px solid #e6e7e7;
}

.btn.btn-secondary:hover,
button.btn-secondary:hover {
    background: #caccd0;
}

/* Olive "green" modifier (brand #bebd00) - used by UsrRegister auth submits to
   keep the historical a.btn-green look on native buttons. */
.btn.btn-green,
button.btn-green {
    background: var(--btn-primary-accent);
    color: #4e394e;
    border-top: 1px solid #f0ef35;
    border-right: 1px solid #666703;
    border-bottom: 1px solid #666703;
    border-left: 1px solid #f0ef35;
}

.btn.btn-green:hover,
button.btn-green:hover {
    background: var(--btn-primary-accent-hover);
}

/* Anchor buttons (link-styled buttons, e.g. UsrRegister "Continue" links). */

/* Form messages */
.form-msg {
    padding: 0.7em 1em;
    border-radius: var(--input-radius);
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
}

.form-msg.ok { background: var(--form-msg-ok-bg); color: var(--form-msg-ok-color); }
.form-msg.error { background: var(--form-msg-err-bg); color: var(--form-msg-err-color); }

/* Muted inline hint below a field/button (e.g. the newsletter unsubscribe
   friction-gate note). Plain and unscoped - part of the public form kit. */
.form-hint {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #888;
}

/* Form table layout (ported from the panel .form-table pattern but public,
   unscoped, themed by public tokens). Used by the future public object-edit
   form and any wider two-column label/field form. */
.form-table {
    width: 100%;
    border-collapse: collapse;
}

.form-table td {
    padding: 8px 5px;
    vertical-align: top;
}

.form-table .td-label {
    width: var(--field-label-width);
    text-align: right;
    padding-right: 15px;
    color: var(--field-label-color);
    font-weight: 500;
}

.form-table .td-divider {
    background: #f0f0f0;
    padding: 10px;
    font-weight: bold;
}

.form-table .td-field input:not([type=checkbox]):not([type=radio]),
.form-table .td-field select,
.form-table .td-field textarea {
    width: 100%;
    box-sizing: border-box;
}

/* Button row at the bottom of a form (panel .tabs-bottom-buttons equivalent) */
.form-actions {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #e8e8e8;
    text-align: right;
}

/* Honeypot (spam trap) - visually hidden, not display:none so bots fill it */
.newsletter-hp {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    border: 0;
    padding: 0;
    margin: 0;
}

/* ===== UsrRegister auth forms =====
   Shared auth-page layout: signin/signup two-panel, social stack, PIN forms,
   checkbox. Inputs/labels/buttons/rows use the public form kit above; these
   rules only handle layout containers. */
#iframe div.profile-forms {
    height: 100%;
}

div.profile-forms div.wrap {
    padding: 1rem;
}

div.profile-forms h2 {
    font-family: "Roboto", 'Arial', sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1em;
    margin: 0;padding:0;
    text-transform: uppercase;
}

div.profile-forms div.row {
    padding: 0 0 0.35rem 0;
}

div.profile-forms div.submit {
    position: relative;
    padding: .5em 0;
    text-align: right;
}

/* Sign in: two-panel flex layout */
.profile-forms.signin {
    display: flex;
    align-items: stretch;
}

div.signin div.left {
    flex: 1 1 55%;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e5e5e5;
}

div.signin div.left div.wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
}

div.signin div.forgot {
   font-size: 0.85rem;
    padding: .5em 0;
    text-align: right;
}

div.signin div.left div.create {
    margin-top: auto;
    padding-top: 1em;
    font-size: 0.85rem;
}

/* Full-page (non-iframe) placement */
.profile-forms.signin {
    max-width: 42rem;
    margin: max(2rem, 6vh) auto;
    border: 1px solid #e5e5e5;
}

#iframe .profile-forms.signin {
    max-width: none;
    margin: 0;
    border: 0;
}

#iframe .profile-forms h2 {
    display: none;
}

/* Social sign-in buttons */
div.profile-forms div.social {
    flex: 1 1 45%;
    margin-top:1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 20px;
}

div.profile-forms div.social ul.social {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; 
    gap: 1rem;
}

div.profile-forms div.social ul.social li {
    margin: 0; display: inline-block;
}

div.profile-forms div.social ul.social li a {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    text-transform: uppercase;
    color: white;
    width: 100%;max-width:32rem;
    padding: 0 0 0 50px;
    font-size: 0.85rem;border-radius:5px;
}

div.profile-forms div.social ul.social li a.fb {
    background: url(../../images/profile/btn-fb.png) 0 0 no-repeat;
}

div.profile-forms div.social ul.social li a.tw {
    background: url(../../images/profile/btn-tw.png) 0 0 no-repeat;
}

div.profile-forms div.social ul.social li a.gp {
    background: url(../../images/profile/btn-gp.png) 0 0 no-repeat;
}

div.profile-forms div.social ul.social li a.eg {
    background: url(../../images/profile/btn.png) 0 0 no-repeat;
}

/* Sign up: two-panel flex layout */
form#signup.left-right {
    display: flex;
    align-items: stretch;
    gap: 0;
}

form#signup.left-right div.left,
form#signup.left-right div.right {
    position: relative;
    float: none;
    width: auto;
    min-width: 280px;
    flex: 1 1 50%;
    height: 100%;
}



/* Company signup: standalone single-column form (never in an iframe).
   This larger form is the exception to the centered-card auth convention:
   no card background, no centering, just a width constraint, left-aligned. */

form#company-signup.form {
    max-width: 48rem; margin:0;padding:0;
}

form#company-signup h2 {
    margin:0 0 1.25rem 0;
}

form#company-signup hr.company-divider {
    border: 0;
    border-top: 1px solid #8a6d3b;
    margin: 1.5rem 0;
}

div.signup div.full {
    position: relative;
    width: 100%;
    height: 100%;
}

div.signup div.full div.help {
    font-size: 12px;
}

/* Checkbox (native appearance) */
input.checkbox,
.profile-forms input.checkbox {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
    width: 24px;
    height: 24px;
    border: 1px solid #B7B7B7;
}

.checkbox-container {
    padding-top: 8px;
    margin-top: -8px;
}

.checkbox-container .checkbox {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -1px;
    margin-right: 6px;
}

.checkbox-container a {
    color: #0F6CB9;
    text-decoration: underline;
}

/* ===== UsrRegister auth forms: shared reusable components =====
   These replace the inline style="..." blocks that used to pepper the
   auth/profile templates. All use the public form tokens. */

/* Centered form card wrapper (replaces width:400px;margin:0 auto;padding:40px). */
div.profile-forms div.wrap {
    width: auto;
    max-width: 26rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
}

/* Wider wrapper variant (profile page). */
div.profile-forms div.wrap.wrap-wide {
    max-width: 30rem;
}

/* Full-page success screen (replaces #usr-register-success inline flex/height). */
.success-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}

.success-screen .inner {
    text-align: center;
    padding: 2.5rem;
}

/* PIN entry input (replaces the repeated 200px/large-letter-spaced input style). */
.profile-forms .pin-input {
    display: block;
    width: 200px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.55rem;
    letter-spacing: 6px;
    padding: 0.55rem;
    border: 2px solid #ddd;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s;
}

.profile-forms .pin-input:focus {
    border-color: #4a7c3f;
}

/* Centered PIN form + its submit row. */
.profile-forms form#pin-form {
    text-align: center;
}

.profile-forms form#pin-form .submit {
    text-align: center;
}

/* Muted intro/subtext paragraphs (replaces color/margin/font inline styles). */
.profile-forms .form-note {
    margin: 0 0 1.25rem;
    font-size: 0.9rem;
    color: #888;
}

.profile-forms .form-subnote {
    margin-top: 1.25rem;
    font-size: 0.8rem;
}

.profile-forms .accent-line {
    color: #4a7c3f;
}

/* Accent-colored inline links (resend PIN, register-again, go-back). */
.profile-forms a.link-accent {
    color: #4a7c3f;
    text-decoration: underline;
    cursor: pointer;
}

/* Resend-PIN block. */
.profile-forms .resend-area {
    margin: 0.95rem 0;
    font-size: 0.8rem;
}

.profile-forms #resend-countdown {
    color: #888;
}

.profile-forms #resend-msg {
    margin: 0.3rem 0;
    font-size: 0.8rem;
    color: #4a7c3f;
}

/* Inline field error message reuse (msg-error -> form-msg error). */
.profile-forms .msg-error.form-msg {
    margin: 0.6rem 0;
    font-size: 0.9rem;
}

/* Profile approval notice box. */
.profile-forms .approval-note {
    background: #f4f4ee;
    border: 1px solid #e3e3d5;
    border-radius: 6px;
    padding: 10px 14px;
    margin: 0 0 1rem;
    font-size: 0.8rem;
}

.profile-forms .approval-note .ok { color: #2e7d32; font-weight: 600; }
.profile-forms .approval-note .pending { color: #b8860b; font-weight: 600; }
.profile-forms .approval-note .meta { color: #888; margin-left: 8px; }

/* Section divider + title (company details). */
.profile-forms .section-divider {
    margin: 1.25rem 0;
    border: none;
    border-top: 1px solid #eee;
}

.profile-forms .section-title {
    margin: 0 0 0.7rem;
    font-size: 1rem;
    font-weight: 600;
}

/* Hint text (e.g. "Leave empty to keep current password"). */
.profile-forms .form-hint {
    font-size: 0.8rem;
    color: #888;
}

/* Auth forms responsive: collapse panels on clearly-mobile widths */
@media screen and (max-width: 600px) {

    .profile-forms.signin {
        flex-wrap: wrap;
    }

    .profile-forms.signin div.left,
    .profile-forms.signin div.social {
        flex: 1 1 100%;
        min-width: 0;
    }

    .profile-forms.signin div.left {
        border-right: 0;
        border-bottom: 1px solid #e5e5e5;
    }

    form#signup.left-right {
        flex-wrap: wrap;
    }

form#signup.left-right div.left,
form#signup.left-right div.right {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    height: auto;
}
}

/* ===== Share buttons ===== */

p.share {
    margin: 0;float:right;
    font-size: 0.85rem;
    color: #666;
    line-height: 1.1rem;
}
@media screen and (max-width: 800px) {
 p.share{ float:none;}
}
p.share .share-btn {
    display: inline-block;
    width: 1.8rem;
    height: 1.8rem;
    margin: 0 0.2rem;
    vertical-align: middle;
    text-indent: -9999px;
    overflow: hidden;
    text-decoration: none;
    border-radius: 3px;
    background-size: 200% 500%;
    background-repeat: no-repeat;
}

p.share .share-fb {
    background-image: url('../images/btn-soc-small.svg');
    background-position: 0% 0%;
}
p.share .share-fb:hover {
    background-position: 100% 0%;
}

p.share .share-tw {
    background-image: url('../images/btn-soc-small.svg');
    background-position: 0% 50%;
}
p.share .share-tw:hover {
    background-position: 100% 50%;
}

p.share .share-dr {
    background-image: url('../images/btn-soc-small.svg');
    background-position: 0% 25%;
}
p.share .share-dr:hover {
    background-position: 100% 25%;
}