@charset "utf-8";
/* CSS Document */
@font-face {
  font-family: "ge_ss_twolight";
  src: url("../fonts/ge_ss_two_light.eot");
  src: url("../fonts/ge_ss_two_light.eot?#iefix") format("embedded-opentype"),
    url("../fonts/ge_ss_two_light.woff") format("woff"),
    url("../fonts/ge_ss_two_light.ttf") format("truetype"),
    url("../fonts/ge_ss_two_light.svg#ge_ss_twolight") format("svg");
  font-weight: normal;
  font-style: normal;
}
body {
  background: #373b38;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 0px auto;
  padding: 0px;
  font-family: "Tajawal", sans-serif !important;
  direction: rtl;
}
.Header2 {
  height: 80px;
  /*width: 100%;*/
  /*position: relative;*/
  overflow: hidden;
  /*background: linear-gradient(to left, #ACACAC 0%,#C9C9C9 0%,#fdfefc 41%,#fefefd 100%);*/
  background: linear-gradient(to top, #373b38 55%, #fefefd 0%);
  padding-right: 320px;
}
.Logo {
  /*display: inline;
    width: 363px;
    height: 90px;
    position: relative;
    float: right;
    background: url("../images/logo.png") no-repeat;*/
  display: block;
  width: 363px;
  height: 90px;
  float: right;
  background: url("../images/logo.png") no-repeat;
  position: absolute;
}
.SearchBar {
  height: 25px;
  position: relative;
  float: right;
  font-size: 12px !important;
  margin-top: 5px;
  /*margin-right: 10px;*/
  margin-right: 55px;
}

.ToolBar {
  height: 45px;
  background-color: #373b38 !important;
  margin-top: 36px;
  margin-right: 45px; /*****/
  direction: rtl;
  width: 100%;
}
.basemapIcon,
.themesIcon,
.dataDiscoveryIcon,
.printExportIcon,
.selectIcon,
.locateIcon,
.drawIcon,
.timeSliderIcon,
.cameraIcon,
.dpIcon,
.workspaceBookmarkIcon,
.extractIcon,
.helpIcon {
  width: 45px !important;
  height: 45px !important;
  cursor: pointer;
  background: url("../images/toolbar/basemaps.png") center center no-repeat;
  vertical-align: middle;
  display: inline-block;
  float: right;
}
.themesIcon {
  background: url("../images/toolbar/themes.png") center center no-repeat;
}
.dataDiscoveryIcon {
  background: url("../images/toolbar/discover.png") center center no-repeat;
}
.printExportIcon {
  background: url("../images/toolbar/print-export.png") center center no-repeat;
}
.selectIcon {
  background: url("../images/toolbar/select.png") center center no-repeat;
}
.locateIcon {
  /*background: url('../images/toolbar/locate.png') center center no-repeat;*/
  background: url("../images/toolbar/attch_.png") center center no-repeat;
}
.drawIcon {
  background: url("../images/toolbar/measure.png") center center no-repeat;
}
.timeSliderIcon {
  background: url("../images/toolbar/timeslider.png") center center no-repeat;
}
.cameraIcon {
  background: url("../images/toolbar/cam.png") center center no-repeat;
}
.dpIcon {
  background: url("../images/toolbar/dp.png") center center no-repeat;
}
.workspaceBookmarkIcon {
  background: url("../images/toolbar/sharebtn.png") center center no-repeat;
}
.extractIcon {
  background: url("../images/toolbar/bmark-ws.png") center center no-repeat;
}
.helpIcon {
  background: url("../images/toolbar/help.png") center center no-repeat !important;
}
.basemapIcon:hover,
.themesIcon:hover,
.dataDiscoveryIcon:hover,
.printExportIcon:hover,
.selectIcon:hover,
.locateIcon:hover,
.drawIcon:hover,
.timeSliderIcon:hover,
.cameraIcon:hover,
.dpIcon:hover,
.workspaceBookmarkIcon:hover,
.extractIcon:hover,
.helpIcon:hover {
  background-color: #000000;
}
.RightPanel {
  width: 35px;
  height: auto;
  position: absolute;
  margin: 5px 10px;
}
.MainMap {
  width: auto;
  background: linear-gradient(to top, #373b38, #fff) !important;
  min-height: 865px;
}
/*******************************************************************************/
.RightPanel {
  margin: 10px;
  text-align: center;
  padding: 0px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
  z-index: 999;
  background: linear-gradient(to top, #c6c7c6, #fdfdfd);
  border-radius: 5px;
  padding-bottom: 5px;
}
main {
  margin: 0px auto;
  padding: 0px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
  background: #efefef;
}
input.ShowHideBt {
  display: none;
  visibility: hidden;
}
label {
  display: block;
  padding: 0px;
  text-align: center;
  border-bottom: 1px solid #ccc;
  color: #000;
}
label:hover {
  color: #000;
}
label[for="toggle"]::before,
label[for="toggleB"]::before,
label[for="toggleC"]::before {
  font-family: "Tajawal", sans-serif !important;
  font-weight: bold;
  font-size: 0px;
  content: "+";
  vertical-align: text-top;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 3px;
  background: url(../images/expand.png) no-repeat;
  cursor: pointer;
}
#expand,
#expandB,
#expandC {
  height: 0px;
  overflow: hidden;
  transition: height 0.2s;
  color: #fff;
}
#expandB {
  transition: height 0.5s;
}
/*//bookmark*/
#expandC {
  transition: height 0.5s;
}
#toggle:checked ~ #expand {
  height: 80px;
}
#toggleB:checked ~ #expandB {
  height: 185px;
}
/*//bookmark*/
#toggleC:checked ~ #expandC {
  height: 185px;
}
#toggle ~ .RightPanel {
  margin-top: 75px;
}
#toggle:checked ~ .RightPanel {
  margin-top: 5px;
}
#toggle:checked ~ label::before,
#toggleB:checked ~ label::before,
#toggleC:checked ~ label::before {
  content: "-";
  background: url(../images/collaps.png) no-repeat;
}
.RToolBar {
}
.listIcon,
.ZoominIcon,
.ZoomoutIcon,
.InfoIcon,
.PointerIcon,
.ZoomIcon,
.Zoom-outIcon,
.EarthIcon,
.CurrentPosition,
.PrintIcon {
  background: url(../images/GIS_icons.png) no-repeat 0px 0px;
  border: 0px;
  cursor: pointer;
  vertical-align: middle;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 5px auto;
}
.listIcon:hover,
.ZoominIcon:hover,
.ZoomoutIcon:hover,
.InfoIcon:hover,
.PointerIcon:hover,
.ZoomIcon:hover,
.Zoom-outIcon:hover,
.EarthIcon:hover,
.CurrentPosition:hover,
.PrintIcon:hover {
  background-color: #fff !important;
}
.ZoominIcon {
  background: url(../images/GIS_icons.png) no-repeat 0px -16px !important;
}
.ZoomoutIcon {
  background: url(../images/GIS_icons.png) no-repeat 0px -32px !important;
}
.InfoIcon {
  background: url(../images/GIS_icons.png) no-repeat 0px -48px !important;
}
.PointerIcon {
  background: url(../images/GIS_icons.png) no-repeat 0px -64px !important;
}
.ZoomIcon {
  background: url(../images/GIS_icons.png) no-repeat 0px -80px !important;
}
.Zoom-outIcon {
  background: url(../images/GIS_icons.png) no-repeat 0px -128px !important;
}
.EarthIcon {
  background: url(../images/GIS_icons.png) no-repeat 0px -96px !important;
}
.PrintIcon {
  background: url(../images/GIS_icons.png) no-repeat 0px -112px !important;
}
.CurrentPosition {
  background: url(../images/GIS_icons.png) no-repeat 0px -144px !important;
}
/*****************************************************************************************************/
h3 {
  margin: 0;
}

h3 a {
  width: 45px;
  height: 45px;
  display: block;
  text-decoration: none;
  text-shadow: 1px 1px 1px rgb(128, 10, 85);
}
h3.listIcon a {
  width: 16px;
  height: 16px;
  display: block;
  text-decoration: none;
  border-bottom: 0px solid rgba(128, 10, 85, 0.5);
  text-shadow: 0px 0px 0px rgb(128, 10, 85);
}
h3:hover {
  background-color: #000;
}
h3.open {
  background-color: #000;
}
h3.listIcon.open {
  background-color: #fff;
}
h3.listIcon:hover {
  background-color: #fff;
}
/*h3.open a { background-position: 13px -25px; }*/
h3 + div {
  padding: 10px;
}

/* Pre hide sections with JavaScript on
--- */
h3 + div {
  display: none;
}

/* CSS3 Animation example
--- */
#AnimatedMenu h3 + div {
  height: 0px;
  padding: 0px;
  overflow: hidden;
  background: #000;
  display: block !important;
  transition: all 0s ease;
}
#AnimatedList h3 + div {
  height: 0px;
  padding: 0px;
  overflow: hidden;
  background: #000;
  display: block !important;
  transition: all 0s ease;
}
#AnimatedMenu .content {
  padding: 10px;
}
#AnimatedList .content {
  padding: 10px;
}
#AnimatedMenu h3.open + div {
  height: 300px !important;
  width: 500px;
  background: linear-gradient(to top, #999, #fff);
  float: right;
  position: absolute;
  margin-top: 45px;
  border-radius: 0 0 10px 10px;
  border: 1px solid #999;
  border-bottom: 5px solid #666;
  border-top: 0px solid #666;
  color: #000;
}
#AnimatedList h3.open + div {
  height: 600px !important;
  width: 400px;
  background: linear-gradient(to top, #f8f8f8, #fff);
  float: right;
  position: absolute;
  margin-top: -25px;
  border-radius: 10px 0px 0px 10px;
  border: 1px solid #999;
  border-left: 5px solid #666;
  border-top: 1px solid #666;
  color: #000;
  margin-right: 35px;
  border-bottom: 1px solid #666;
  overflow: auto;
}
/********************************ListLayer***********************/
.esriTabContainer ul {
  padding: 0px !important;
}
.esriTabContainer ul[role="tablist"] {
  padding-right: 10px !important;
}
.esriTabContainer ul[role="tablist"] li {
  width: 43%;
  float: right !important;
  border: 1px solid #ccc !important;
  border-radius: 10px 10px 0 0;
  margin-left: 3px;
  text-align: center !important;
  background: linear-gradient(to bottom, #cccccc, #f8f8f8);
  border-bottom: 0px !important;
  border-top: 2px solid #999 !important;
}
.esriLayerList .esriTabMenu .esriTabMenuSelected {
  background: linear-gradient(to bottom, #fefefe, #f8f8f8);
  font-weight: bold;
  color: #000;
}
.esriTabContainer li {
  width: 100%;
}
.esriTabContainer label,
.esriTabContainer * {
  text-align: right !important;
  font-family: "ge_ss_twolight";
  border-bottom: 0px !important;
}
.esriLayerList .esriCheckbox {
  float: right !important;
}
.esriLayerList .esriToggleButton {
  float: left !important;
}
.esriLayerList .esriScaleInvisible .esriLabel {
  color: #999 !important;
  text-shadow: 0 2px 0 #fff;
}
.esriLegendLayerLabel {
  padding-top: 5px;
  float: left;
  width: 90%;
  margin-top: -8px;
}
.esriLegendLayer {
  width: 10%;
  margin: 10px 0 10px 0;
}
#esri_dijit_Legend_0_layer0_1 .esriLegendLayer {
  width: 100%;
  margin: 10px 0 0px 0;
}
.esriLegendService {
  padding-bottom: 20px;
  margin-right: 15px;
}