div.rd2 h1 {margin:0.4em 0 0.1em;}
div.rd2 h1 a {text-decoration: none; color:#333;}


div.dT1t {
    width:100%;
    display: table;
}
div.dT1r {
    display: table-row;
}
div.dT1d {
    display: table-cell;
    padding:5px 0;
}
div.dT1r:nth-child(even) {
    background:rgba(0,0,0,0.1);
}

div.dT2t {
    width:100%;
    display: table;
}
div.dT2r {
    display: table-row;
}
div.dT2d {
    display: table-cell;
    padding:0.45em;
}
div.dT2r:nth-child(odd) {
    background:rgba(0,0,0,0.1);
}


.dT1d.H {
    color:#444;
    font-size:0.75em;
    border-right:1px dotted #333;
    white-space: nowrap;
    padding-right:10px;
}
.dT1d:nth-child(2) {
    padding-left:10px;
    width:100%;
}

div.rd1 {
    display: flex;
    border: 0;
    flex-direction: row-reverse;
}
div.rd2 div.updated {
    margin:16px 0 16px;
    font-size:0.75em;
    color:#7b7;
}

div.rd2n {
    margin-top:20px;
}

div.rd3 {
    font-size: 0.85em;
}
div.tenant {
    font-size:0.8em;
    color:blue;
    padding:20px;
}
div.tenant a {
    text-decoration: none;
}
div.rd3 div.rating {
    font-size: 0.85em;
    color:#666;
}

div.rating {
    display:block;
    border-bottom:1px solid #aaa;
    margin:1px 0 1px;
}
#ratingValue {
    font-weight: bold;
}

div.rating > div:first-child {
    float:right;
    line-height: 0.9em;
}
div.rating > div:last-child {
    /*float:left;*/
    height:1.9em;
    background-repeat: no-repeat;
}
div.rate-box {border:0;width:1.6em;margin-right:1px;display: inline-block}

svg.rate-box-on {fill:#00f;stroke:#00f;stroke-width:1.25;stroke-miterlimit:10;}
svg.rate-box-off {fill:#777;stroke:#777;stroke-width:1.25;stroke-miterlimit:10;}

/*div.rating {display:flex;align-content: stretch;justify-content: center;}*/
/*div.rate-box {*/
    /*border:1px solid #000;*/
    /*margin:1px 1px 0 0;*/
    /*min-height:25px;*/
    /*min-width:16px;*/
    /*flex-grow:1;*/
/*}*/



div.rd3 div.p {
    margin-top:10px;
}
div.rd4 {display: block;margin-top:40px;}

div.p img {
    width:55px;
    height:55px;
    margin:1px 1px 0 0;
    border:1px solid #888;
}

div.p > img:last-child {
    border:1px solid transparent;
}

#fishing-spot {
    background: center center;
    background-size: auto auto;
    min-height: 340px;
    min-width: 300px;
    resize: both;
}

.rate-box.r01 {
    background:#e00;
}

.rate-box.r02 {
    background:#f33;
}

.rate-box.r03 {
    background:#f55;
}

.rate-box.r04 {
    background:#f86;
}
.rate-box.r05 {
    background:#fa8;
}
.rate-box.r06 {
    background:#ff6;
}
.rate-box.r07 {
    background:#ddd;
}
.rate-box.r08 {
    background:#9f7;
}
.rate-box.r09 {
    background:#4f2;
}
.rate-box.r10 {
    background:#2b0;
}
.rate-box.r11 {
    background:#49f;
}
.rate-box.r12 {
    background:#16e;
}

#markers {
    margin-top:2em;
    border-top:2px dotted #888;
    padding-top:2em;
}

.mi{
    display:flex;
    align-items: center;
    position: relative;
    /*vertical-align: middle;*/
    /*line-height: 100%;*/
    padding:0 5em 0.1em 2em;
    margin-bottom:0.5em;
}
.mi::after {

}
.mi:hover {
    background:rgba(0,0,255,0.2);
}
.mi > div:first-child {
    font-size:0.5em;
    position:absolute;right:0;top:0;
    text-align:right;
    color:#444;
    font-family: sans-serif;
    line-height: 1em;
}

.mp {
    position:absolute;left:0;top:0;
}

#ccd {
    background: rgba(255,255,255,0.85);
    font-size:.7rem;
    padding:.25em 1em .25em .75em;
    position: relative;
    box-sizing: border-box;
    transition: all 300ms ease-in-out;
    border:1px solid #fff;
    border-left:0;
}

#ccd div {
    position: absolute;
    right:-10px;
    top:0;
    width:20px;
    height:20px;
    background:#ff4500;
    border-radius:10px;
    cursor:pointer;
    border:2px solid #fff;
    box-shadow:0 0 3px #333;
    transition: all 300ms ease-in-out;
}

#ccd ul {
    list-style-type: none;
    margin:0;
    padding: 0;
}
#ccd ul li {
    margin:0;
    padding:0.1em 0;
    cursor:pointer;
    color:#000;
}
.mAV {
    color:blue !important;
    font-weight: bold;
    cursor:auto !important;
}

#cc {
    margin-top:1em;
    /*border-top:2px dotted #888;*/
    padding:2em 1em;
}

#markers > div:last-child {
    display:block;
    border:0;
    background: rgba(0,0,0,0.1);
    padding:0.3em 4em;
    margin-top:5px;
    font-size:0.7em;
    text-align:center;
}


.onlyMember {
    padding:1em;
    background:yellow;
    text-align:center;
    color:red;
    font-weight: bold;
}

h3 {margin-top:0;}

div.notf {
    text-align:center;
}

#addcc {
    text-align:center;
    margin-top:2em;
}

#addcc > textarea {
    display:block;
    width:100%;
    height:5em;
    font-size:0.9em;
    font-weight:normal;
    color:darkblue;
    padding:0.3em;
    margin-bottom:2px;
    border:1px solid darkblue;
    background:rgba(255,245,230,0.5);
}

#addcc > textarea:focus {
    font-weight: bold;
    color:darkblue !important;
}

#addcc > button {
    display:block;
}

div.success-addcc {
    border:1px solid green;
    background: rgba(100,255,100,0.6);
    color:#222;
    padding:1em;
}



#cc > .dT2t {
    font-size: 0.8em;
}

#by_area {
    margin-top:3em;
    padding:2em 1.5em;
    font-size:0.6em;
    line-height: 1.4em;
}

.chosen {
    border:1px solid blue !important;
}
#by_area > ul {
    margin:0;padding:0;
}
#by_area > ul > li{
    display: inline-block;
    margin-right:2em;
    background:#f0f0f0;
    padding:0 0.3em;
    border:1px solid #fff;
    overflow: hidden;
}

#by_area > ul > li > a {
    text-decoration: none;
    color:#777;
}

#by_area > ul > li > a:hover {
    text-decoration: underline;
    color:#555;
}


@media (min-width: 800px) {  /** DESKTOP **************/
    div.rd2 {
        flex-grow: 1;
        padding-left:30px;
    }
    #markers {
        padding-left:1em;
        padding-right:1em;
    }
    #cc {
        padding-left:1em;
        padding-right:1em;
    }
}


@media (max-width: 799px) {  /*********************************** MOBILE START */

    #by_area {
        font-size:0.65em;
        line-height: 2.2em;
    }

    div.rd1 {flex-direction: column;}

    #cc > .dT2t > .dT2r {
        display:block;
    }
    #cc > .dT2t > .dT2r > .dT2d {
        display:block;
    }
    #cc > .dT2t > .dT2r > .dT2d:last-child {
        padding-left:10px;
        margin-bottom:10px;
    }
    #addcc > textarea {
        font-size:0.9em;
        padding:0.5em;
        height:8em;
    }
    #addcc > button {
        display:block;
        font-size:0.9em;
        padding:0.5em;
        width:100%;
        /*background: rgba(0,0,0,0.1);*/
    }

}

div.mw1 {
    padding:0.8em;
    font-weight:bold;
    color:blue;
    text-decoration: underline;
    cursor: pointer;
}

div.mw2 {
    padding:0.5em 1em;
}

#new-fishing-spot {
    display: block;
    min-height:15vh;
    border:0;
}

div.dTAt {
    width:100%;
    display: table;
}
div.dTAr {
    display: table-row;
}
div.dTAd {
    display: table-cell;
    padding:5px 0;
    vertical-align: top;
}
.gc {
    font-family: monospace !important;
    font-size:0.9em !important;
    display: inline-block !important;
    margin-right:2px !important;
    border:1px solid rgba(0,0,0,0.3);
    padding:0.5em 1.5em !important;
    width: auto !important;
}

div.dTAd input,select,textarea {
    width:100%;
    padding:0.5em;
    font-size:1rem;
    font-family: sans-serif;
    border:2px solid rgba(0,0,0,0.3);
    font-weight: bold;
    line-height:1.2em;
}

div.dTAd input[placeholder], textarea[placeholder] {
    color:rgba(0,0,0,0.7);
    /*font-weight: normal;*/
    text-overflow: ellipsis;
}

div.dTAd input:focus {border:2px solid deepskyblue;}
div.dTAd textarea:focus {border:2px solid deepskyblue;}

.fis {
    display: inline-block;
    margin:0 0.3em 0.2em 0;
    border:1px solid rgba(0,0,0,0.2);;
    padding:0.15em 1.25em 0.1em 0;
    border-radius:1em;
    background:rgba(0,0,0,0.1);
    font-size:0.9em;
}

.fis input {
    display:inline-block !important;
    width:auto !important;
    margin:0 0.7em;
}


span.eDs {
    color:magenta;
}

div.eD {
    /*display:none !important;*/
}


#tacc {
    margin-bottom:2px;
}

.FD {
    max-height:6.5em;
    overflow-y: hidden;
    transition: all 4s 1s ease-in-out;
}

.FD:hover {
    max-height:2000px;
    transition: all 900ms ease-in-out;
}

.mapFixScroll {
    overflow-x: hidden;
    overflow-y: hidden;
    border:1px solid magenta;
}

#map_iw {
    padding:2em 2em;
}

#map_iw > button:first-child {
    padding:0.25em 1em;
}
#map_iw > button {
    /*border:1px solid blue;*/
    padding:0.5em 1em;
    white-space: nowrap;
    display: block;
    margin:2px 0;
    box-shadow: 1px 1px 1px #333;
}


.nd4t {
    font-size:60%;
    opacity:0.6;
    vertical-align: middle;
    font-style: italic;
}

#ainfo {
    margin-top:1em;
    display: block;
}

#ainfo div {
    float:right;
    text-align: right;
    font-size:80%;
    color: #00aaff;
    opacity: 0.8;
    line-height: 140%;
    font-family: sans-serif;
}