body {
  background: #f7f9fc; /*background-main*/
  margin: 0px;
  height: 100%;
  color: rgba(0, 0, 0, 0.87);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

/* body background colour
https://stackoverflow.com/questions/52198452/how-to-change-the-background-color-of-the-shiny-dashboard-body*/
.content-wrapper, .right-side {
background-color: #f7f9fc;
}

.wrapper {
  padding: 48px;
  background-color: #f7f9fc !important;
}

/*
.col-sm-1{
  width:81%;
}*/

.col-sm-2{
  padding-left:0px;
}

/* Logo on smaller size screen */
@media (max-width: 767px){
.skin-black .main-header>.logo{
  color:#222;
}

}

/*Logo Underline : Header Divider*/
.skin-black .main-header { 
    border-width: 0;
    border-style: solid;
    border-color: rgba(0,0,0,0.12);
    border-bottom-width: thin;
    z-index:0;
margin-bottom: 24px;}


/*Logo Features: Title Name Feature*/
.skin-black .main-header .logo{
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
     /*font-weight:bold;
     letter-spacing:-1px; 
     font-size:30px; 
     color:#92d050;*/
	 
	margin-bottom: 18px;
    text-align: left;
    background-color: #f7f9fc; /*Change background colour of logo*/
    border-right: 0; /*Hidde Side line in the logo*/
    padding-left: 0;
    font-size: 24px;
    font-weight: 400;
    min-width: 300px;
	
/*font-size: 1.5rem;
	  font-weight: 600;
	  line-height: 1.25;*/
}

.skin-black .main-header .logo:hover { /* logo when hovered */
background-color: #f7f9fc; /*Change background colour of logo*/
}

.skin-black .main-header .navbar {
background-color: #f7f9fc;
}


/*Buttons with label success*/
/*
.btn-success {
    font-size: 18px;
    font-family: inherit;
    padding: 5px 12px;
    height: 55px;
    min-width: 21.85%;
    margin: 0px 10px 14px 20px;
    text-align: left;
    color: white;
    background: #727477;
    text-indent: 4px;
    vertical-align: middle;
    border-radius: 0px;
    border-color: transparent;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.18), 0 1px 5px 0 rgba(0,0,0,0.15);
    text-transform: uppercase;
    -webkit-transition: all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
    transition: all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.btn-success:hover {
    background-color:#90c44c;
    font-size: 18px;
    font-family: inherit;
    padding: 5px 12px;
    height: 55px;
    min-width: 21.85%;
    margin: 0px 10px 14px 20px;
    text-align: left;
    color: white;
    text-indent: 4px;
    vertical-align: middle;
    border-radius: 0px;
    border-color: transparent;
    box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18), 0 4px 15px 0 rgba(0,0,0,0.15);
    -webkit-transition: box-shadow 0.4s ease-out;
    transition: box-shadow 0.4s ease-out;
}
*/

/*box tab colour grey*/
 .nav-tabs-custom > .nav-tabs > li.active {
     border-top-color:#616365 
}
 .nav-tabs-custom {
     box-shadow:5px 5px 5px lightgrey 
}


/*Modal|Pop Up when press a polygon*/

/*Radios on the pop up - smoothm corner*/
#modal1 .modal-content  {-webkit-border-radius: 6px !important;-moz-border-radius: 6px !important;border-radius: 6px !important;}
#modal1 .modal-header {background-color: #F7F7F7; border-top-left-radius: 6px; border-top-right-radius: 6px}

/*Size of pop up*/
#modal1 .modal-dialog { width: 90%}

/* Other
#modal1 .modal-dialog { width: 240px; display: inline-block; text-align: left; vertical-align: top;}
#modal1 .modal { text-align: right; padding-right:10px; padding-top: 24px;}
#modal1 .modal-body {padding: 10px}
#modal1 .close { font-size: 16px}
*/

/* value box in the popup that annoate as yellow*/
.small-box.bg-yellow { background-color: #CFCFCF !important; color: #FFF !important; }

/*locate leaflet zoom control in a desired position*/
/*.leaflet-control-container { position: absolute; right: 56px } */
/*https://markusdumke.github.io/articles/2017/11/customize-leaflet-map-in-r-with-html-css-and-javascript/*/
.leaflet-left .leaflet-control{
        visibility: hidden;
      }

/*Text in the tab with word cloud*/
#textCatgory1{color: #92D050;
	 /*font-size: 20px;*/
	 font-style: italic;
	 }
#textCatgory2{color: #588925;
	 /*font-size: 20px;*/
	 font-style: italic;
	 }
#textCatgory3{color: #1D2C0C;
	/*font-size: 20px;*/
	 font-style: italic;
	 }
	 
	 
/* --- Cluster Marker Colour --- */

.marker-cluster-small {
	background-color: rgba(228, 231, 233, 0.6);/*rgba(181, 226, 140, 0.6);*/
	}
.marker-cluster-small div {
	background-color: rgba(204, 210, 213, 0.6);/*rgba(110, 204, 57, 0.6);*/
	}

.marker-cluster-medium {
	background-color: rgba(99, 111, 119, 0.6);/*rgba(241, 211, 87, 0.6);*/
	}
.marker-cluster-medium div {
	background-color: rgba(85, 94, 101, 0.6);/*rgba(240, 194, 12, 0.6);*/
	}

.marker-cluster-large {
	background-color: rgba(48, 51, 54, 0.8);/*rgba(253, 156, 115, 0.6);*/
	}
.marker-cluster-large div {
	background-color: rgba(35, 38, 41, 0.8);/*rgba(241, 128, 23, 0.6);*/
	}

/*
#text1.shinyjs-hide{
  display: none;
}
*/	

/*--- Change Time Range Colour --- */
.js-irs-0 .irs-single, .js-irs-0 .irs-bar-edge, .js-irs-0 .irs-bar {
                                                  background: #303336;
                                                  border-top: 1px solid #232629 ;
                                                  border-bottom: 1px solid #232629 ;}

/* changes the colour of the number tags */
.irs-from, .irs-to, .irs-single { background-color: #303336!important }

/* --- Calendar Colour --- */
.datepicker table tr td.active:active, .datepicker table tr td.active.active, .datepicker table tr td.active.highlighted:active, .datepicker table tr td.active.highlighted.active {
    color: #fff;
    background-color: #92d050;
    border-color: #92d050;
}

.form-control {
  cursor:pointer;
}

.form-control:focus {
    border-color: #92d050;
    box-shadow: none;
}

.datepicker table tr td span.active:active, .datepicker table tr td span.active.active, .datepicker table tr td span.active:hover:active, .datepicker table tr td span.active.active:hover, .datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active.disabled.active, .datepicker table tr td span.active.disabled:hover:active, .datepicker table tr td span.active.disabled.active:hover {
    color: #fff;
    background-color: #92d050;
    border-color: #92d050;
}

.datepicker table tr td span.active:active:hover, .datepicker table tr td span.active:active:focus, .datepicker table tr td span.active.focus:active, .datepicker table tr td span.active.active:hover, .datepicker table tr td span.active.active:focus, .datepicker table tr td span.active.active.focus, .datepicker table tr td span.active:hover:active:hover, .datepicker table tr td span.active:hover:active:focus, .datepicker table tr td span.active.focus:hover:active, .datepicker table tr td span.active.active:hover:hover, .datepicker table tr td span.active.active:hover:focus, .datepicker table tr td span.active.active.focus:hover, .datepicker table tr td span.active.disabled:active:hover, .datepicker table tr td span.active.disabled:active:focus, .datepicker table tr td span.active.disabled.focus:active, .datepicker table tr td span.active.disabled.active:hover, .datepicker table tr td span.active.disabled.active:focus, .datepicker table tr td span.active.disabled.active.focus, .datepicker table tr td span.active.disabled:hover:active:hover, .datepicker table tr td span.active.disabled:hover:active:focus, .datepicker table tr td span.active.disabled.focus:hover:active, .datepicker table tr td span.active.disabled.active:hover:hover, .datepicker table tr td span.active.disabled.active:hover:focus, .datepicker table tr td span.active.disabled.active.focus:hover {
    color: #fff;
    background-color: #92d050;
    border-color: #92d050;
}