:root {
    /* Ramblers colours */
    /* 2021  */
    --mintcake:#9BC8AB;
    --sunset:#F08050;
    --granite:#404141;
    --rosycheeks:#F6B09D;
    --sunrise:#F9B104;
    --cloudy:#FFFFFF;
    --skyBlue:#00A9FF;
    --lightgrey: #C0C0C0;
    --midgrey: #808080;
    --cancelled:#C60C30;
    --gradeEVENT:#A0A0A0;
    --gradeEA:#808080;
    --gradeE:#A0A0A0;
    --gradeL:#9BC8AB;
    --gradeM:#F08050;
    --gradeS:#F9B104;
    --gradeT:#404141;
    /* June 2017 -  */
    --pantone0110:#D7A900;
    --pantone0159:#C75B12;
    --pantone0186:#C60C30;
    --pantone0555:#206C49;
    --pantone0583:#A8B400;
    --pantone1815:#782327;
    --pantone4485:#5B491F;
    --pantone5565:#8BA69C;
    --pantone7474:#007A87;
}

/* Ramblers additions */
div.loading-error{
    border-radius: 10px;
    border:3px solid;
    border-color: red;
    padding:10px;
}
.cancelled {
    color:var(--cancelled);
}
.oldBrowser {
    color:var(--cancelled);
}
.ra.error {
    color:var(--cancelled);
    font-weight: bold;
}

/* css code to handle json walk feeds */
span.walksummary img{
    height:30px;
    width:30px;
    padding:2px;
}

div.paginatedList tr.ra.walk.month{
    background-color: #ddd;
}
div.paginatedList tr.ra.walk.month h3,
div.paginatedList h3.ra.walk.month{
    background-color: #ddd;
    margin:0px;
    padding:10px;
}

div.ra.contentContainer[data-tab='Grades'],
div.ra.contentContainer[data-tab='Table'],
div.ra.contentContainer[data-tab='List'],
div.ra.contentContainer[data-tab='Contacts'],
div.ra.contentContainer[data-tab='Calendar'],
div.ra.contentContainer[data-tab='Map']{
    background-color: #D8D8D8;
    padding:5px;
}

/* Ramblers additions */
.cancelledWalks {
    background-color: var(--cloudy);
    border-radius: 10px 10px 10px 10px;
    padding: 10px;
    border-width: 2px;
    border-style: solid;
    border-color: var(--cancelled);
}
.cancelledWalks h3 {
    color:var(--cancelled);
    border-bottom: 1px solid #d1d1d1;
    box-shadow: 0 1px 0 #ffffff;
    margin-top: 0px;
}

.cancelledWalk {
    color:#000000;
}
.cancelreason {
    margin-left: 30px;
    color:var(--cancelled);
    font-size: 110%;
}

.nextwalkCancelled a,
span.walkCancelled,
div.fc a.walkCancelled{
    color:var(--cancelled);
    text-decoration: line-through;
}

span.walkerror {
    color: var(--cancelled);
}

div.walkstdfulldetails div.description p{
    margin: 0px;
}
div.walkstdfulldetails div.walkitem {
    margin: 2px;
    border-radius: 10px 10px 10px 10px;
    padding: 5px;
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* IE 11 */
    display:block;
    width:97%;
    border: 2px solid #cccccc  ;
    background-color: #eeeeee;
    line-height: 1.5em;
    font-size: 115%;
    word-wrap: break-word;
}

div.walkstdfulldetails  div.group {
    font-size: 115%;
    padding: 7px;
    color: #000000;
}
div.walkstdfulldetails div.group.grade-t {
    color: var(--cloudy) !important;
}
div.walkstdfulldetails  span.walktitle{
    color: #303030;
    font-size: 26px;
}
div.walkstdfulldetails  div.walkitem.walkdates {
    font-size: 90%;
    font-style: italic;
}

div.location.notes {
    font-size: 14px;
    line-height: 100%;
    font-style: italic;
}
div.walkitem.transport summary{
    cursor: pointer;
    font-weight: bold;
    display:list-item;
}

div.walkitem.transport ul{
    margin-top: 10px;
    margin-bottom: 10px;
}

div.walkitem.flags ul,
div.walkitem.flags ul li{
    padding: 0;
    margin: 0 0 0px 25px;
}
div.walkstdfulldetails> div.walkitem.map {
    padding: 0px;
    border: 0px solid #cccccc  ;
    margin:2px;
}
div.walkstdfulldetails div.festivals > ul,
div.walkstdfulldetails div.strands > ul,
div.walkstdfulldetails div.suitability > ul,
div.walkstdfulldetails div.surroundings > ul,
div.walkstdfulldetails div.theme > ul,
div.walkstdfulldetails div.specialStatus > ul,
div.walkstdfulldetails div.facilities > ul {
    margin-bottom: 0px;
}
div.walkstdfulldetails.walkCancelled.stdfulldetails div.walkitem.reason{
    text-decoration: none !important;
    font-weight: bold;
    color:var(--cancelled);
}
div.walkstdfulldetails.walkCancelled.stdfulldetails div.walkitem.group{
    color:#000000;
}

div.walkstdfulldetails.walkCancelled.stdfulldetails div.walkitem {
    color: #b0b0b0;
}

/* Popups */

.rapopup {
    color:var(--pantone1815);
    cursor: pointer;
}
.rapopup:after {
    padding-left:10px;
    content: url(../images/google20.jpg);
}
.mappopup {
    font-weight: normal;
}
ul.mappopup.osmaps{
    margin-top: 0px;
    margin-bottom: 0px;
}
ul.mappopup.osmaps li{
    font-weight: normal;
    font-size:  85%;
    margin-top: 0px;
}
div.mappopup.extra {
    background-color: var(--lightgrey);
    border-radius: 10px;
    padding:3px;
}
div.place div.notexact{
    font-size:  80%;
}

.place .mappopup {
    font-size:  90%
}
.events.links {
    font-size: .8em;
}
div.mediapopup {
    display: grid;
    height: 100%;

}
img.walkmedia{
    max-width: 90%;
    max-height: 90vh;
    margin: auto;
    border-radius: 8px;
}
div.mediapopup div{
    margin: auto;
}


abbr[title] {
    border-bottom: 1px dotted #d5d5d5;
}
.distnear {
    color:   var(--pantone0159)
}
.distfar {
    color:   #8a1727;
    font-weight: bold;
}
.distnotfound {
    font-style: italic;
}

table.fc-scrollgrid tbody {
    background-color: white;
}
div.groupA,div.groupG,div.groupS {
    font-weight: bold;
}



@media only screen and (min-width: 769px){
    div.walkstdfulldetails {
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;
        border-radius: 10px 10px 10px 10px;
        padding: 5px;
        padding-right:10px;
        min-width: 200px;
    }
}

@media only screen and (max-width: 768px){
    div.walkstdfulldetails {
        border-radius: 10px 10px 10px 10px;
        padding: 5px;
        padding-right:10px;
        background-color: #ffffff;
        min-width: 200px;

    }
}

#grade-Event {
    background-color: var(--gradeEVENT);
}
#grade-ea {
    background-color: var(--gradeEA);
}
#grade-e {
    background-color: var(--gradeE);
}
#grade-l {
    background-color: var(--gradeL);
}
#grade-m {
    background-color: var(--gradeM);
}
#grade-s {
    background-color: var(--gradeS);
}
#grade-t {
    background-color: var(--gradeT);
}

.grade-event{
    background-color: var(--gradeEVENT) !important;
}
.grade-ea {
    background-color: var(--gradeEA) !important;
}
.grade-e {
    background-color: var(--gradeE) !important;
}
.grade-l {
    background-color: var(--gradeL) !important;
}
.grade-m {
    background-color: var(--gradeM) !important;
}
.grade-s {
    background-color: var(--gradeS) !important;
}
.grade-t {
    background-color: var(--gradeT) !important;
}
div.leaflet-popup-content div.walkPublished img{
    height:30px;
    width:30px;
    float: right;
    margin: 0px 0px 0px 5px;
}
div.leaflet-popup-content div.walkCancelled img{
    display:none;
}


div.nextwalk div.walkPublished,
div.nextwalk div.walkCancelled{
    min-height: 30px;
    line-height: 1.2em;
}
div.nextwalk span.grade.middle{
    float:left;
}

input.slider {
    -webkit-appearance: none;
    width: 50%;
    height: 15px;
    background: #BBBBBB;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

input.slider:hover {
    opacity: 1;
}

input.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #04AA6D;
    cursor: pointer;
}

input.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #04AA6D;
    cursor: pointer;
}


/* The Modal (background) */
div.js-modal.ramblers {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 20000; /* Sit on top */
    padding-top: 30px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: #333; 
   
}
div.clear,
div.ra-clear{
    clear: both;
}
.ra-modal-header {
    content: "";
    display: table;
    clear: both;
    float:right;
}
/* Modal Content */
.ra-modal-content {
    margin: auto;
    width: auto;
    max-width: 90%;
    max-height: 85%;
    background-color:#ffffff;
    border-radius: 25px;
    padding: 20px;
    content: "";
    display: table;
    clear: both;
    -ms-word-break: break-all;
    word-break: break-all;
    /* Non standard for webkit */
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.modal-data {
    overflow-y: auto;
    max-height:85%;
}
.modal-outline{
    margin: 2px;
    border-radius: 10px 10px 10px 10px;
    padding: 15px;
    border: 2px solid #cccccc;
    background-color: #eeeeee;
}
.modal-outline img{
    border-radius: 10px;
}
table.ra-diagnostics {
    border-collapse: collapse;
}
table.ra-diagnostics th{
    border: 1px solid;
}
table.ra-diagnostics tr,
table.ra-diagnostics td{
    vertical-align: top;
    border: 1px solid;
    border-color: grey;
}
pre.ra-diagnostics {
    white-space: pre-wrap;
    outline: 1px solid #ccc;
    padding: 5px;
    margin: 5px;
    margin-top:0px;
    .string {
        color: green;
    }
    .number {
        color: darkorange;
    }
    .boolean {
        color: blue;
    }
    .null {
        color: magenta;
    }
    .key {
        color: red;
    }
}

/* The Close Button */
.link-button.modal-close,
.link-button.modal-print{
    margin-right:15px;
}
span.ra.help.icon {
    cursor:pointer;
    display: inline-block;
    margin-left:10px;
    width:20px;
    height:20px;
    bottom:-3px;
    background-image: url("../images/help.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position:relative;
}
div.ra.help.helpblock{
    position: absolute;
    max-width:400px;
    border: 1px solid var(--granite);
    border-radius: 10px;
    padding:5px;
    background-color:#EEEEEE;
}
div.ra.help.helpblock span{
    color:var(--skyBlue);

}
div.ra.help.helpblock div.help-border{
    display: block;
    width: 95%;
    height: 3px;
    background: var(--skyBlue);
}
div.ra.help.helpblock span.close{
    color:black;
    float: right;
    padding-right: 20px;
}
div#ra-help-helptag{
    z-index: 99999;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .ra-modal-content {
        /*   width: 100%;*/
    }
}


.pointer {
    cursor: pointer;

}
.pointer:hover{
    text-decoration: underline;

}
.pointer.link {
    cursor: pointer;
    font-weight: bold;
    color: var(--granite);
}
.pointer.link:hover {
    cursor: pointer;
    text-decoration: underline;
}
span.ra-details {
    width:100%;
    top:-5px;
}
.floatright {
    float:right;
}
img.ra-detailsimg {
    float:right;

    overflow:auto;
}

[data-page] {
    min-height: 25px;
    min-width: 25px;
}
img.ra-grade.pointer {
    padding-right:10px;
}
.rawalks table{
    width:100%;
}
@media only screen and (max-width: 960px){
    .rawalks table{
        font-size: .8em;
    }
    .rawalks table img{
        display:none;
    }
}
.rawalks table.contacts{
    width:auto;
}
.rawalks table.contacts td{
    width:25%;
}


span.ra-open,
span.ra-closed {
    padding-top:7px;
    float: right;
    width:35px;
    height:26px;
    background-size: 35px 26px;
    background-repeat: no-repeat;
    clear:both;
}
span.ra-closed {
    background-image:url("../images/close.png");
}
span.ra-open {
    background-image:url("../images/open.png");
}
span.ra-rightopen {
    float: right;
    width:35px;
    height:26px;
    background-image:url("../images/close.png");
    background-size:  35px 26px;
    background-repeat: no-repeat;
}
span.walksummary  {
    padding-top:2px !important;
    padding-bottom:2px !important;
    width:100%;
}
span.walkdetail  {
    width:100%;
    height: auto;
    display:inline-block;
}
@media only screen and (min-width: 960px) {
    .ra-route-filter button {
        padding-top:4px;
        padding-bottom:4px;
        margin-bottom:9px;
        display:inline;
    }
    .ra-route-filter {
        float: right;
    }
}

span.map{
    top:10px;
    height:30px;
    width:30px;
}
span.map.help {
    content:url(../leaflet/images/help.png);
}
span.maphelp[data-descr]:hover::after {
    width:150px;
}

span.grade{
    padding-right:10px;
}
span.grade.details{
    float:left;
}
span.middle.grade {
    height:30px;
    vertical-align: middle;
    display: inline;
}
span.left.grade {
    float:left;
    padding-right:10px;
    padding-bottom:5px;

}
span.right.grade {
    float:right;
    padding-left:0px;
    padding-top:5px;
    margin-left:10px;
    margin-bottom:5px;
}

span[data-descr] {
    position: relative;
    cursor: pointer;
}

span[data-descr]:hover::after {
    content: attr(data-descr);
    position: absolute;
    top: -30px;
    min-width: 100px;
    border: 2px #ffffff solid;
    border-radius: 10px;
    background-color: var(--pantone0555);
    padding: 5px;
    color: #eeeeee;
    font-size: 14px;
    line-height: 14px;
    z-index: 9999;
}
span.new[data-descr]:hover::after {
    background-color:rgb(0, 128, 0);
    left:0px;
    min-width: 150px;
}
span.updated[data-descr]:hover::after {
    background-color: rgb(0, 156, 0);
    left:0px;
    min-width: 150px;
}
span[data-descr].walkCancelled:hover::after {
    background-color: var(--cancelled);
    min-width: 110px;
}
span.middle[data-descr]:hover::after{
    left:40px;
    top:-25px;
}
span.left[data-descr]:hover::after{
    top:-15px;
}

span[data-descr="Technical"]:hover::after {
    background-color: var(--gradeT);
}
span[data-descr="Strenuous"]:hover::after {
    background-color: var(--gradeS);
}
span[data-descr="Moderate"]:hover::after {
    background-color: var(--gradeM);
}
span[data-descr="Leisurely"]:hover::after {
    background-color: var(--gradeL);
}
span[data-descr="Easy"]:hover::after {
    background-color: var(--gradeE);
}
span[data-descr="Easy Access"]:hover::after {
    background-color: var(--gradeEA);
}
span[data-descr="Event"]:hover::after {
    background-color: var(--gradeEVENT);
}

img.mediathumbl{
    float:left;
    max-height: 70px;
    max-width:110px;
    -webkit-border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    border-radius: 6px 6px 6px 6px;
    margin-right:5px;
}
img.mediathumbr{
    float:right;
    max-height: 70px;
    max-width:110px;
    -webkit-border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    border-radius: 6px 6px 6px 6px;
    margin-left:5px;
}
div.walk-image{
    display: inline-block;
    max-width:40%;
    padding:8px;
    cursor: pointer;
}



span.link{
    cursor:pointer;
    color: var(--granite);
    font-weight: bold;
    margin-left:5px;
}
/*  Display.php/js walks filter                    */
table.detailsView {
    display: block;
    overflow-x: auto;
}
table.detailsView tr td{
    vertical-align: top;
}

details.ra-detailsButton summary{
    background-color:#DDDDDD;
    border-radius: 10px;
    font-size:115%;
    cursor: pointer;
    padding:8px;
    height:25px;
    float: right;
    list-style: none;
}
details.ra-detailsButton summary.active{
    background-color: var(--sunset);
    color:white;
}
details.ra-detailsButton summary::-webkit-details-marker {
    display: none; /* for safari */
}
details.ra-detailsButton summary::before {
    vertical-align:middle;
    content: url(close.png);
}

details.ra-detailsButton[open] summary::before {
    vertical-align:middle;
    content: url(open.png);
}
details.ra-detailsButton[open] summary{
    margin-bottom:10px;
}
div.ra-filtergroup {
    padding-left:10px;
    break-inside: avoid-column;
    font-weight:600;
}
div.ra-filtergroup div input[type=date] {
    font-size: 12px;
    width: 110px;
    display: inline;
    margin-left: 10px !important;
}
div.ra-filtergroup div label {
    display: inline;
}

div.ra-filteritem{
    border-radius: 10px 10px 10px 10px;
    padding-left:5px;
    padding-right:5px;
    padding-bottom:1px;
    padding-top:1px;
    margin:5px;
    border:1px solid var(--midgrey);
    background-color: white;
    color:black;
    width: fit-content;
    line-height: 1;
    cursor: pointer;
}

div.ra-filteritem.nilFilter{
    line-height: 85%;
    font-size: 85%;
    color: gray;
}
div.ra-filteritem:hover{
    background-color: var(--lightgrey);
}
div.ra-filteritem.active,
input.ra-filteritem.active,
select.ra-filteritem.active{
    background-color: var(--sunset);
}

div.ra-filteritem.right {
    cursor: pointer;
    margin-bottom:5px;
    background-color: var(--mintcake);
    border:1px solid var(--mintcake);
    color:white;
    border-radius: 10px 10px 10px 10px;
    padding-left:5px;
    padding-right:5px;
    margin-top:10px;
    float:right;
    clear:both;
}
div.ra-filteritem.right.active{
    background-color: white;
    border:1px solid white;
    font-weight:bold;
    color:var(--mintcake);
}
div.ra-filteritem.right:hover {
    background-color: var(--lightgrey);
    color:white;
}

div.ra-filter-spacer{
    height: 10px;
}
div.ra-walksfilter{
    clear:both;
    background-color: #DDDDDD;
    border-radius: 10px 10px 10px 10px;
    column-count: 3;
    column-gap: 5px;
    column-rule-style: solid;
    column-rule-color: #AAAAAA;
    padding: 10px;
    margin-bottom: 10px;
}

div.ra-filtergroup h3{
    font-size:110%;
    font-weight: bold;
    line-height: 110%;
    margin-top:5px;
    margin-bottom: 5px;
}
@media only screen and (max-width: 1200px) {
    div.ra-walksfilter {
        column-count: 2;
        clear:right;
    }
}
@media only screen and (max-width: 820px) {
    div.ra-walksfilter {
        column-count: 1;
        clear:right;
    }
}
@media only screen and (max-width: 780px) {
    .ra.nonmobile  {
        display:none !important;
    }
}

div.walks div.toggler.pointer  {
    background:url(../images/close.png) no-repeat 100% 50%;
    background-position: right top;
}

div.walks div.toggler.active.pointer {
    background:url(../images/open.png) no-repeat 100% 50%;
    background-position: right top;
}
div.walks div.toggler span.item {
    display: inline-block;
    padding-right:40px;
}

/**
 * slider styles
 */
.csv-slider {
    width:350px;
    background-color:#FFFFFF;
    border-radius: .25rem;
    padding-left:10px;
    padding-right:10px;
    margin-bottom:9px;
}

.range-slider-value{
    width: 100px;
    box-sizing: border-box;
    padding: 0 5px;
}


.loadingcontainer {
    font-family: Helvetica;
    z-index: 20000; /* Sit on top */
    position:fixed;

    width:200px;
    height:150px;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255,255,255,.7);
}

.loading{

}
.circle{
    margin-top: 30px;
    width:20px;
    height:20px;
    position: absolute;
    border-radius: 50%;
    background-color: red;
    left:15%;
    transform-origin: 50%;
    animation: circle .5s alternate infinite ease;
}

@keyframes circle{
    0%{
        top:60px;
        height:5px;
        border-radius: 50px 50px 25px 25px;
        transform: scaleX(1.7);
    }
    40%{
        height:20px;
        border-radius: 50%;
        transform: scaleX(1);
    }
    100%{
        top:0%;
    }
}
.circle:nth-child(2){
    left:45%;
    animation-delay: .2s;
}
.circle:nth-child(3){
    left:auto;
    right:15%;
    animation-delay: .3s;
}
.shadow{
    margin-top: 30px;
    width:20px;
    height:4px;
    border-radius: 50%;
    background-color: rgba(0,0,0,.5);
    position: absolute;
    top:62px;
    transform-origin: 50%;
    z-index: -1;
    left:15%;
    filter: blur(1px);
    animation: shadow .5s alternate infinite ease;
}

@keyframes shadow{
    0%{
        transform: scaleX(1.5);
    }
    40%{
        transform: scaleX(1);
        opacity: .7;
    }
    100%{
        transform: scaleX(.2);
        opacity: .4;
    }
}
.shadow:nth-child(4){
    left: 45%;
    animation-delay: .2s
}
.shadow:nth-child(5){
    left:auto;
    right:15%;
    animation-delay: .3s;
}
.loadingcontainer span{
    margin-top: 30px;
    position: absolute;
    top:75px;
    font-size: 20px;
    letter-spacing: 10px;
    color: red;
    left:15%;
}

.fc-event-time, .fc-event-title {
    padding: 0 1px;
    white-space: normal;
}

table.fc-col-header th div a{
    color: #FFFFFF;
}
div.ra.calendar.event{
    white-space: initial;
    width:100%;
    height:100%;
}
div.ra.calendar.event:hover{
    background-color: #DDDDDD;
}
div.ra.places.popup{
    max-width:350px;
    max-height:150px;
    overflow: auto;
}
iframe.ra.contactForm {
    width:95%;
    height:480px;
    border-width: 0px;
}