body {
}

::placeholder{
    color:#EEEEEE;
}


.pagingFadeIn{
    animation-name:fadeInAnim;
    animation-duration:0.9s;
    animation-fill-mode:forwards;
}
@keyframes fadeInAnim{
    from{ opacity:0.0;}
    to  { opacity:1.0;}
}

.pagingFadeOut{
    opacity:0.0;
    animation-name:fadeOutAnim;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
}
@keyframes fadeOutAnim{
    from{ opacity:1.0;}
    to  { opacity:0.0;}
}

.pageLoadFiller{
    opacity:0.5;
    animation-name:FillerAnim;
    animation-duration:1.0s;
    animation-fill-mode:forwards;
}
@keyframes FillerAnim{
    from{ opacity:0.0;}
    to  { opacity:0.5;}
}

.cutter
{
    width: 100px;  
    white-space: nowrap;  
    overflow: hidden;  
    text-overflow: ellipsis;  
    -webkit-text-overflow: ellipsis;  
    -o-text-overflow: ellipsis;  
}

.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12
{
    min-width: 90px;
}

.hide
{
    display:none;
}

.hide-input
{
    display:none;
}

.hidden
{
    visibility:hidden;
}

.highlight  td
{
    background: #fdffe4 !important;
}


.allow_edit{
  background: #EC9913 !important;
}



.error_input
{
  background: #FCD6DF !important;
}

.mainmenu button
{
    width: 100%;
}

.col-no-padding
{
    padding-left:0px!important;
    padding-right:0px!important;
}

.no-margin
{
    margin: 0;
}

table.boshukubuntab
{
    width: 30%;
    min-width: 300px;
}
table.boshukubuntab td
{
    border:solid 1px;
    padding-left: 10px;
}

.attr-data-content
{
    overflow-y  : auto;    
    max-height      : 60vh;    
}

.item-row
{
    margin-bottom:5px;
    margin-right:15px;
}
.hiddenfield
{
    visibility:collapse;
    display:none;
}

.bw-100
{
    width:100px;
}

.bw-130
{
    width:130px;
}


/* labelをボタンらしく */
.upload-label {
  display: inline-block;
  cursor: pointer; /* カーソルを指に */
  margin: 1em 0; /* まわりの余白 */
  padding: .7em 1em; /* 文字まわりの余白 */
  line-height: 1.4; /* 行間 */
  background: #3e8bff; /* 背景色 */
  color: #FFF; /* 文字色 */
  font-size: 0.95em; /* フォントサイズ */
  border-radius: 2.5em; /* 角の丸み */
  transition: 0.2s; /* ホバーをなめらかに */
}
/* ホバー時 */
.upload-label:hover {
  box-shadow: 0 8px 10px -2px rgba(0, 0, 0, 0.2); /* 影を表示 */
}
/* inputは隠す */
.upload-label input {
  display: none;
}

.download-link {
    text-decoration: underline;
    color:#6d87bd;
}
.download-link:hover{
    cursor:pointer;
}

.modal-backdrop{
}


.form-control
{
    margin-left:20px;
}



html,body {
   width: 100%;
   padding:0px;
   margin: 0px;
   overflow:hidden;  
   font-family:Noto Sans JP,Local Gaiji,メイリオ, Meiryo, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, Osaka, ＭＳ Ｐゴシック, MS PGothic, sans-serif ;
/*   border:2px solid; */
}


/* jqgrid用 */
.ui-widget-content {
   font-family:Noto Sans JP,Local Gaiji,メイリオ, Meiryo, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, Osaka, ＭＳ Ｐゴシック, MS PGothic, sans-serif ;
}




/* jquery-tabのpddgin調整(デフォルトだと大きいので */
.ui-tabs    .ui-tabs-panel{
/*  padding: 0.5em 0.5em 0.5em 0.5em; */
}

.thumb_cell_normal{
    float:left;
    margin:4px;
    text-align:center;
    font-size:11pt;
}

.shadow{

  text-shadow: 2px 2px 2px rgba(0,0,0,0.9);
}

.main{

/*
 * background-color:#CCCCCC;
 * */
   padding:0px;
   margin: 2px;
/*   border: 1px solid; */
   height:88%;
   border-color:yellow;
   

}

.throw{


}


.view_img{

    width:100%;
}

.view_img div{

    width:80%; 
    margin: 0 auto;

}


.img-preview{

        border:none;
        float:left;
        margin:2px ;
        width:200px;
        height:200px;
        padding:4px;
        background-position:center center;
        background-size:contain;
        background-repeat:no-repeat;
        background-color:#FFFFFF;
        position:relative; 

}

.img-preview-info {  
        border-color:#555555;
        border:solid;
        border-radius: 4px;        /* CSS3草案 */  
        -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */  
        -moz-border-radius: 4px;   /* Firefox用 */  
        background-color:#428bca;
        color:#EEEEEE;
        margin:2px;
        padding:4px;
        position:absolute;
        right:0px;
        bottom:0px;
        width:120px;
        font-size:14pt;

    filter:alpha(opacity=85);
     -moz-opacity:0.85;
     -khtml-opacity: 0.85;
     opacity:0.85;
        
}  

.img-preview-info-small {  
        font-size:7pt;
        color:#EEEEEE;
}  


hr {
  -moz-border-bottom-colors: none;
  -moz-border-image: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: #DDDDDD -moz-use-text-color #FFFFFF;
  border-style: solid none;
  border-width: 1px 0;
  margin: 18px 0;
}


.envelope_tn_content{

        border:solid;
        border-width: 0px;
        float:left;
        margin: 4px;
        width:124px;
        height:250px;
        padding:2px;
        background-position:center center;
        background-size:contain;
        background-repeat:no-repeat;
        background-color:#FFFFFF;
        position:relative; 
        overflow:hidden;

}


.tn_content{

        border:solid;
        border-width: 1px;
        float:left;
        margin: 0 auto;
        margin-bottom: 3px;
        width:120px;
    /*  height:180px; */
        padding:2px;
        background-position:center center;
        background-size:contain;
        background-repeat:no-repeat;
        background-color:#FFFFFF;
        position:relative; 

}

.title_in_envelope_tn_content{
    white-space:wrap;
}

.link2{
    border:solid;
    border-width:0px;
}
.tag{
    float:left;
    padding:0px 2px 0px 2px ;
}

.tag_name{
    text-decoration:underline;
}

.comment_datetime{
    font-size:8pt;
}

.content_datetime{
    font-size:9pt;
    color:#999;
}

.tagbox{
    border-style:solid;
    border-width:1px;
    border-color:#CCC;
    background-color:#EFEFEF;
    padding:4px 10px 4px 10px;
}

.pagelink_current{
    font-size:18pt;
}

.pagelink{

}


/*
 * test
 *
 * */
      .layer-switch {
        position: absolute;
        top:  5px;
        left: 45px;
        background: rgba(255,255,255,0.4);
        border-radius: 4px;
        padding: 2px;
        cursor:pointer;
        z-index:392;
      }
      .ol-touch  {
      }
      .layer-switch a {
        display: block;
        color: white;
        font-size: 16px;
        font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
        font-weight: bold;
        margin: 1px;
        text-decoration: none;
        text-align: center;
        border-radius: 2px;
        height: 22px;
        width: 22px;
        background: rgba(0,60,136,0.5);
      }
      .layer-switch a:hover {
        background: rgba(0,60,136,0.7);
      }
      .ol-touch  a {
        font-size: 20px;
        height: 30px;
        width: 30px;
        line-height: 26px;
      }


      .message-area-switch {
        position: absolute;
        bottom:  35px;
        right: 7px;
        z-index:20;
        background: rgba(255,255,255,0.4);
        border-radius: 4px;
        padding: 2px;
      }

      .message-area-switch a {
        display: block;
        color: white;
        font-size: 16px;
        font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
        font-weight: bold;
        margin: 1px;
        text-decoration: none;
        text-align: center;
        border-radius: 2px;
        height: 22px;
        width: 22px;
        background: rgba(0,60,136,0.5);
      }
      .message-area-switch a:hover {
        background: rgba(0,60,136,0.7);
      }


      .bookmark-switch {
        position: absolute;
        top:225px;
        right: 12px;
        z-index:20;
        background: rgba(255,255,255,0.4);
        border-radius: 4px;
        padding: 2px;
      }

      .bookmark-switch a {
        display: block;
        color: white;
        font-size: 16px;
        font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
        font-weight: bold;
        margin: 1px;
        text-decoration: none;
        text-align: center;
        border-radius: 2px;
        height: 22px;
        width: 22px;
        background: rgba(0,60,136,0.5);
      }
      .bookmark-switch a:hover {
        background: rgba(0,60,136,0.7);
      }

      .cesium-switch {
        position: absolute;
        top:10px;
        left: 110px;
        z-index:20;
        background: rgba(255,255,255,0.4);
        border-radius: 4px;
        padding: 2px;
      }


      .cesium-switch a {
        display: block;
        color: white;
        font-size: 16px;
        font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
        font-weight: bold;
        margin: 1px;
        text-decoration: none;
        text-align: center;
        border-radius: 2px;
        height: 22px;
        width: 22px;
        background: rgba(0,60,136,0.5);
      }
      .cesium-switch a:hover {
        background: rgba(0,60,136,0.7);
      }


      .cesium-switch-on a {
        display: block;
        color: white;
        font-size: 16px;
        font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
        font-weight: bold;
        margin: 1px;
        text-decoration: none;
        text-align: center;
        border-radius: 2px;
        height: 22px;
        width: 22px;
        background: rgba(200,60,136,0.5);
      }






.shadow_text{

color:#FFF;
font-weight:bold;
font-size:16pt;
filter:dropshadow(color=#000000,offX= 0,offY=-1)
dropshadow(color=#000000,offX= 1,offY= 0)
dropshadow(color=#000000,offX= 0,offY= 1)
dropshadow(color=#000000,offX=-1,offY= 0);
 
-webkit-text-stroke-color: #000;
-webkit-text-stroke-width: 1px;
 
text-shadow: black 1px 1px 0px, black -1px 1px 0px,
             black 1px -1px 0px, black -1px -1px 0px;
}




.rule_level0 {
    font-size:12pt;
    background:#FFFFFF;
    border:1px #000 solid;
}
.rule_level1 {
    font-size:19pt;
    background:#FFE451;
    border:1px #000 solid;
    padding:4px;
}
.rule_level2 {
    font-size:12pt;
    background:#F9AFF3;
    border:1px #000 solid;
}
.rule_level3 {
    font-size:12pt;
    background:#F15B33;
    border:1px #000 solid;
}


.rule-text{
    font-size:11pt;
}

.box_kikaku{
    border:solid 1px;
    position:relative;
    width:142px;
    float:left;margin:2px;
}

.img_kikaku{
    width:140px;
}


.box_dirt_mesh{
    border:solid 1px;
    position:relative;
    width:262px;
    height:222px;
    float:left;margin:2px;
}

.img_dirt_mesh{
    width:260px;
    height:220px;
}


.warn_text{
    padding:4px 0px 8px 0px;
    border-style:   solid;
    border-width:   1px;

}


.box_tidal_tidal_min{
    float:left;
    border:solid 1px;
    position:relative;
    width:252px;
    margin:2px;
}
.img_tidal_tidal_min{
    width:250px;
}

.box_tidal_tidal{
    float:left;
    border:solid 1px;
    position:relative;
    width:202px;
    margin:2px;
}

.img_tidal_tidal{
    width:200px;
}


.img_tsunami{
    width:300px;
    border:1px solid;
}

.img_keikaimini{
    height:150px;
    border:1px solid;
}
.img_keikai{
    height:220px;
    border:1px solid;
}



.in .out {
    width:90%;
}


/*  元map.css  */

.map {
    position: static;
    min-width:200px;
    min-height:100px;
    width: 100%;
    height:100%;
    padding: 0px;
    border:solid 0px; 
/*   margin: 10px 10px 10px 10px; */
/*  cursor:move; */

}

.minimap {
    position: relative;
    min-width:200px;
    min-height:200px;
    width: 100%;
    height:350px;
    padding: 0px;
    border:solid 1px; 
/*   margin: 10px 10px 10px 10px; */
/*  cursor:move; */

}

.pointmap {
    position: relative;
    min-width:200px;
    min-height:100px;
    width: 100%;
    height:100vh;
    padding: 0px;
    border:solid 1px; 
/*   margin: 10px 10px 10px 10px; */
/*  cursor:move; */

}

.map_envelope{

    position:absolute;
    margin:0px;
    padding:0px;
    border:solid 0px;
    color:#FF0000; 
    height:calc(100vh - 90px);
/*    height:90%;
    height:calc(100% - 36px);

*/
}




.legend        {border:solid; border-color:#809EC4; position:absolute; top:10px; left:auto; right:10px; padding:0px; border-radius:4px; color:#000000; background: rgba(255, 255, 255, 0.9); z-index:100; }

.toolbox       {border:solid; border-color:#809EC4; position:absolute; top:45px; left:45px; padding:0px; 
                border-radius:4px; color:#DDDDDD; background: rgba(255, 255, 255, 0.4); z-index:10; 
}

.info_area          {border:solid; border-color:#809EC4; position:absolute; bottom:30px; right:10px; padding:0px; border-radius:4px; color:#DDDDDD; background: rgba(255, 255, 255, 0.9); z-index:10; }
.info_area_body     { color:#444444; font-size:14pt; padding:4px; width:400px;height:300px;}

/*
.bookmark_area  { position:absolute;border:solid; border-color:#809EC4; padding:12px; right:10px; top:220px;  border-radius:4px; color:#DDDDDD; background: rgba(205, 205, 205, 0.9); z-index:10; }
*/
.bookmark_body  { color:#444444; font-size:14pt; padding:4px; width:490px;height:300px; overflow:auto;}
.bookmark_thumbnail_div  { color:#444444; font-size:14pt; padding:0px; width:140px;height:100px; position:relative;margin:2px; float:left;}
.bookmark_thumbnail_img  { color:#444444; font-size:14pt; border:solid 1px;padding:0px; width:100%;height:100%;position:absolute; cursor:pointer;}
.bookmark_thumbnail_del  {  right:4px; top:4px; padding:0px; width:20px;height:20px;  z-index:140; cursor:pointer; position:absolute;}
.bookmark_thumbnail_str  { font-size:11pt;color:#3333AA; font-weight:bolder; width:90%; white-space:nowrap;overflow:hidden; text-overflow:ellipsis;;left:2px; bottom:1px; padding:1px;   z-index:140;  position:absolute; cursor:pointer; text-shadow: 1px 1px 0 #bfbfbf,1px -1px 0 #bfbfbf,-1px 1px 0 #bfbfbf,-1px -1px 0 #bfbfbf,4px 4px 4px #000; }
.bookmark_thumbnail_dt  {  background-color:#FFF;left:4px; top:2px; padding:0px;   z-index:140;  position:absolute;  font-size:9pt; }

.bookmark-area {
    position:absolute;
    top:200px  !important;
    right:.5em !important;
    left:auto  !important;
}
.bookmark-field {
    width:440px;
    height:500px;
    margin:6px;

}

.ol-custom {
}

.ol-custom > button {
    position:absolute;
    border-width:0px;
    right:0px;
    left:auto;
    z-index:1000;
}

   .ol-popup {
     position: absolute;
     background-color: white;
     -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
     filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
     min-width:120px;
     max-width:500px;
     max-height:500px;
  /*   overflow:auto; */
     padding: 15px;
     border-radius: 10px;
     border: 1px solid #cccccc;
     bottom: 12px;
     left: -50px;
   }
   .ol-popup:after, .ol-popup:before {
     top: 100%;
     border: solid transparent;
     content: " ";
     height: 0;
     width: 0;
     position: absolute;
     pointer-events: none;
   }
   .ol-popup:after {
     border-top-color: white;
     border-width: 10px;
     left: 48px;
     margin-left: -10px;
   }
   .ol-popup:before {
     border-top-color: #cccccc;
     border-width: 11px;
     left: 48px;
     margin-left: -11px;
   }
   .ol-popup-closer {
     text-decoration: none;
     position: absolute;
     top: 2px;
     right: 8px;
   }
   .ol-popup-closer:after {
     content: url('../img/icon_close16.png');
   }

/*
 *    .ol-zoom .ol-zoom-out {
 *            margin-top: 204px;
 *               }
 *
 *                  .ol-zoomslider {
 *                       top: 40px;
 *                            left: 8px;
 *                                 width:25px;
 *                                      height:195px;
 *                                           background-color: transparent;
 *                                              }
 *
 *
 *                                              */
   /*OverViewMap（索引図） 表示設定 */
   .ol-custom-overviewmap,
   .ol-custom-overviewmap.ol-uncollapsible {
     bottom: auto;
     left: auto;
     right: 0;
     top: 0;
   }

   .ol-custom-overviewmap:not(.ol-collapsed)  {
     border: 1px solid black;
   }

   .ol-custom-overviewmap .ol-overviewmap-map {
     border: none;
     width: 200px;
   }

   .ol-custom-overviewmap .ol-overviewmap-box {
     border: 2px solid red;
   }

   .ol-custom-overviewmap:not(.ol-collapsed) button{
     bottom: auto;
     left: auto;
     right: 1px;
     top: 1px;
   }


/*
 *    .ol-touch .ol-zoom .ol-zoom-out {
 *            margin-top: 212px;
 *               }
 *
 *                  .ol-touch .ol-zoomslider {
 *                          top: 40px;
 *                              }
 *
 *                                 .ol-zoom-extent{top:10px; left:80px; z-index:90;}
 *                                 */

input[type=number] {
    text-align: right;

}

.focus-left:focus
{
  text-align: left;
}
  
   
/* ===  selector ==== */
.selector_item{
    color:#EEEEEE;
}
.selector_item:hover{
    color:#3333FF;
    text-decoration:underline;
    cursor:pointer;
}



.tooltip {
/*
 *   position: absolute;
 *   */

  white-space: nowrap; 
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  color: white;
  font-size:8pt;
  opacity: 0.8;
  padding: 4px 8px;

}

.tooltip-measure {

  color: white;
  padding: 4px 8px;
  background: #333333;
  border-radius: 5px;
  opacity: 0.8;
  font-weight: bold;
  font-size:12pt;
}

.tooltip-paper {
  opacity: 1;
  color:#222222;
  font-weight: bold;
  font-size:12pt;
  background: rgba(200, 200, 200, 0.8);
  border:solid 2px;
  border-color:#777;
  border-radius: 5px;
  padding:20px;
}
.tooltip-static {
  background-color: #FF9312;
  color: black;
  font-size:12pt;
  border: 1px solid white;
  opacity: 0.8;
  padding: 4px 8px;
  white-space: nowrap; 
}
.tooltip-measure:before,
.tooltip-static:before {
  border-top: 6px solid rgba(0, 0, 0, 0.5);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: "";
  position: absolute;
  bottom: -6px;
  margin-left: -7px;
  left: 50%;
}
.tooltip-static:before {
  border-top-color: #ffcc33;
}

.modal-wide .modal-dialog{
    //width:80%;
    width:800px;
}

.search_dialog{
/*
 *     width: 800px;
 *         height:2000px;
 *         */
}

.speech-bubble {
   position: relative;
   width: 36px;
   height: 22px;
   line-height: 22px;
   color: #FFFFFF;
   text-align: center;
   padding: 1px;
   background: #e05d51;
   border-radius: 5px;
   border: #dceff5 solid 2px;
}

.speech-bubble:after {
   content: '';
   position: absolute;
   border-style: solid;
   border-width: 9px 3px 0;
   border-color: #e05d51 transparent;
   display: block;
   width: 0;
   z-index: 1;
   bottom: -9px;
   left: 16px;
}

.speech-bubble:before {
   content: '';
   position: absolute;
   border-style: solid;
   border-width: 10px 4px 0;
   border-color: #dceff5 transparent;
   display: block;
   width: 0;
   z-index: 0;
   bottom: -12px;
   left: 15px;
}

.multiselect-container {
  clear:both;
  position:relative;
  clear:both;
  position:relative;
}



.legend_box {
    cursor:pointer;
    z-index:999999;
    width: 280px;  
    margin: 2em 0;
    background: #f1f1f1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.legend_box .legend_box_title {
    font-size: 1.0em;
    background: #77A6DF;
    padding: 6px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.legend_box p {
    padding: 15px 20px;
    margin: 0;
}

.out{
    text-align:left;

}



      .ol-custom-overviewmap,
      .ol-custom-overviewmap.ol-uncollapsible {
        bottom: auto;
        left: auto;
        right: 10px;
        top: 50px;
      }

      .ol-custom-overviewmap:not(.ol-collapsed)  {
        border: 1px solid black;
      }

      .ol-custom-overviewmap .ol-overviewmap-map {
        border: none;
        width: 300px;
      }

      .ol-custom-overviewmap .ol-overviewmap-box {
        border: 2px solid red;
      }

      .ol-custom-overviewmap:not(.ol-collapsed) button{
        bottom: auto;
        left: auto;
        right: 1px;
        top: 1px;
      }



        .paint_pad-control {
            top: 10px;
            right: 200px;
            position: absolute;
        }



.d1km {
    width:80px;
    height:75px;
}
.d1kmtd {
    padding:0px;
}


ul {
    list-style:none;
}


@media screen and (max-width:1550px) {
.timestamp {
    margin: 0px 0px 14px 2px;
    position: relative;
    top: 5px;
    left:4px;
}
}


@media screen and (min-width:1551px) {
.timestamp {
    margin: 0px 0px 4px 2px;
    position: absolute;
    top: 10px;
    right:20px;
}
}

.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
.loader {
 opacity:1.0;
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.swal2-height-auto {
  height:0px !important;

}





.ol-popup {
    display: none;
    position: absolute;
    background-color: white;
    padding: 15px 25px 15px 15px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
}

.ol-popup:after, .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
}

.ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
}

.ol-popup-content {
    min-width:  300px;
    max-height: 500px;
    overflow-x: auto;
}

.ol-popup-closer {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 150%;
    padding: 0 4px;
    color: gray;
    text-decoration: none;
}

.ol-popup-closer:after {
    content: "\2716";
}

.ol-popup div.infoResult {
    min-width: 130px;
}

.ol-popup div.infoResult p {
    padding: 0.1em;
    margin: 0;
}

.ol-popup-content h3 {
    margin: 0.25em 0;
}

.ol-popup.marker {
    margin-bottom: 30px;
}