﻿
    .leaflet-draw-toolbar {
	    background: #3399ff;
        background-color: magenta;
    }
    .leaflet-draw-actions a:hover {
	    background-color: #A0A098;
    }


    #tool-map-icon {
        width: 150px;
        height: 350px;
        position: absolute;
        z-index: 10;
        background: #fff;
        font-size:14px;
    }
    #tool-map-full {
        width: 150px;
        height: 350px;
        position: absolute;
        z-index: 10;
        background: #fff;
        font-size:14px;
    }
    .btn-map {
        background-color: #3399ff;
    }
    .btn-map:hover {
        background-color: #ff6666;
    }

    #tool-map-type {
        /*-webkit-box-shadow: 2px 1px 5px 1px rgba(0,0,0,0.15);
        -moz-box-shadow: 2px 1px 5px 1px rgba(0,0,0,0.15);
        box-shadow: 2px 1px 5px 1px rgba(0,0,0,0.15);*/
        position: absolute;
        margin-top: 10px;
        margin-right: 3px;
        width: 220px;
        height: auto;
        /*background: #fff;*/
        /*border: 1px solid #999;*/
        border-left: none;
        border-top: none;
        padding: 10px 15px;
        border-radius: 2px;
        transition-property: background;
        transition-duration: 5s;
        transition-timing-function: linear;
    }
    #tool-map-opacity {
        width: 150px;
        height: 350px;
        position: absolute;
        z-index: 10;
        background: #fff;
        font-size:14px;
    }
    #tool-map-bando {
        width: 150px;
        height: 350px;
        position: absolute;
        z-index: 10;
        background: #fff;
        font-size:14px;
    }
    #tool-map-Vn2000 {
        width: 150px;
        height: 350px;
        position: absolute;
        z-index: 10;
        background: #fff;
        font-size:14px;
    }
    #tool-map-infor {
        position: absolute;
        margin-top: 10px;
        margin-left: 10px;
        width: 350px;
        height: auto;
        border-left: none;
        border-top: none;
        padding: 10px 15px;
        border-radius: 0px;
    }
    #tool-map-timkiem {
        width: 300px;
        height: auto;
        position: absolute;
        z-index: 10;
        background: #fff;
        font-size:14px;
    }

    .label-tenhuyen {
        text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
        font-size: 12px;
        text-align: center;
        color: magenta;
    }
    .label-tenxa {
        text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
        font-size: 10px;
        text-align: center;
        color: #0000FF;
    }






    .sidenav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 3;
        top: 60px;
        left: 0;
        background-color:#fff;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 15px;
        padding-left: 0px;
        -webkit-box-shadow: 5px 1px 3px 1px rgba(0,0,0,0.15);
        -moz-box-shadow: 5px 1px 3px 1px rgba(0,0,0,0.15);
        box-shadow: 5px 1px 3px 1px rgba(0,0,0,0.15);
    }

        .sidenav a {
            /*padding: 8px 8px 8px 32px;*/
            text-decoration: none;
            /*font-size: 14px;*/
            color: #818181;
            /*display: block;*/
        }

            .sidenav a:hover {
                /*color: #f1f1f1;*/
            }

        .sidenav .closebtn {
            position: absolute;
            top: 0px;
            right: 5px;
            z-index: 4;
            /*font-size: 36px;*/
            height: 45px;
            width:20px;
            text-align:center;
            /*align-items: center;*/
            /*justify-content: center;*/
            /*margin-left: 50px;*/
        }
        .sidenav .closebtn:hover {
            color: red;
            background-color:#d1dde8;
            border-color: #d1dde8;
        }

        .openbtn {
            position: absolute; 
            top: 62px; 
            /*font-size:36px;*/ 
            height:50px;
            width:20px;
            text-align:center;
            z-index:2;
            cursor:pointer;
            color: red;
            background-color: #fff;
            border-color: #d1dde8;
            -webkit-box-shadow: 5px 1px 3px 1px rgba(0,0,0,0.15);
            -moz-box-shadow: 5px 1px 3px 1px rgba(0,0,0,0.15);
            box-shadow: 5px 1px 3px 1px rgba(0,0,0,0.15);
        }


    .text-labels {
        font-size: 2em;
        font-weight: 700;
        color: white;
        text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    }

    .css-label-huyen-ten {
        text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
        font-size: 12px;
        text-align: center;
        color: magenta;
        /*fontWeight: 'bold';*/
    }

    .countryLabel {
        background: rgba(255, 255, 255, 0);
        border: 0;
        border-radius: 0px;
        box-shadow: 0 0px 0px;
    }


    .my-label {
        position: absolute;
        width: 1000px;
        font-size: 20px;
    }

    .leaflet-div-icon {
        /*background-color: yellow;*/
        text-align: center;
        /*width: auto !important;*/
        text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
        font-size: 16px;
    }


    #panel-tool {
        width: 150px;
        height: 170px;
        position: absolute;
        margin-top: 10px;
        margin-right: 5px;
        z-index: 10;
        background: #fff;
    }

    .my-control {
        background: #fff;
        padding: 5px;
    }

    .leaflet-bar {
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
        border-radius: 5px;
    }


    #map-tool-panel-right {
        position: absolute;
        top: 2px;
        right: 0px;
        width: 200px;
        height: 195px;
        margin-right: 0px;
        z-index: 10;
    }
    /*.btn-map {
        background: #fff !important;
        color: #017801;
    }
        .btn-map:hover {
            background: #017801 !important;
            color: #fff;
        }*/
    .panel-control-layer {
        width: 150px;
        height: 250px;
        position: absolute;
        top: 10px;
        right: 50px;
        padding: 5px;
        z-index: 10;
        background: #fff;

    }
    .panel-control-maptype {
        width: 150px;
        height: 250px;
        position: absolute;
        top: 10px;
        right: 50px;
        padding: 5px;
        z-index: 10;
        background: #A9A9A9;
    }





/* Default mode */
.tabbable-line > .nav-tabs {
  border: none;
  margin: 0px;
}
.tabbable-line > .nav-tabs > li {
  margin-right: 2px;
}
.tabbable-line > .nav-tabs > li > a {
  border: 0;
  margin-right: 0;
  color: #737373;
}
.tabbable-line > .nav-tabs > li > a > i {
  color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover {
  border-bottom: 4px solid #fbcdcf;
}
.tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a {
  border: 0;
  background: none !important;
  color: #333333;
}
.tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i {
  color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu {
  margin-top: 0px;
}
.tabbable-line > .nav-tabs > li.active {
  border-bottom: 4px solid #f3565d;
  position: relative;
}
.tabbable-line > .nav-tabs > li.active > a {
  border: 0;
  color: #333333;
}
.tabbable-line > .nav-tabs > li.active > a > i {
  color: #404040;
}
.tabbable-line > .tab-content {
  margin-top: -3px;
  background-color: #fff;
  border: 0;
  border-top: 1px solid #eee;
  padding: 15px 0;
}
.portlet .tabbable-line > .tab-content {
  padding-bottom: 0;
}

/* Below tabs mode */

.tabbable-line.tabs-below > .nav-tabs > li {
  border-top: 4px solid transparent;
}
.tabbable-line.tabs-below > .nav-tabs > li > a {
  margin-top: 0;
}
.tabbable-line.tabs-below > .nav-tabs > li:hover {
  border-bottom: 0;
  border-top: 4px solid #fbcdcf;
}
.tabbable-line.tabs-below > .nav-tabs > li.active {
  margin-bottom: -2px;
  border-bottom: 0;
  border-top: 4px solid #f3565d;
}
.tabbable-line.tabs-below > .tab-content {
  margin-top: -10px;
  border-top: 0;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}






.label-loaidat {
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    font-size: 11px;
    text-align: center;
    color: '#0000FF';
}

    /* GPS RING location https://reactgo.com/css-pulse-animation/*/
    .css-icon {
	}
    .gps_ring {	
		 border: 3px solid red;
		 -webkit-border-radius: 30px;
		 height: 18px;
		 width: 18px;		
	    -webkit-animation: pulsate 1s ease-out;
	    -webkit-animation-iteration-count: infinite; 
	    /*opacity: 0.0*/
	}
	@-webkit-keyframes pulsate {
		    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
		    50% {opacity: 1.0;}
		    100% {-webkit-transform: scale(1.5, 1.5); opacity: 0.0;}
	}
