#tool-box {
    position: fixed;
    /*position: absolute;*/
    bottom: 0;
    left: 0;
    z-index: 2;
}
#map {
    position: fixed;
    /*position: absolute;*/
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.clear{
    clear: both;
}

ul {
    list-style-type: none;
    padding: 0;
    margin:0;
}

.btn{
    display: inline-block;
    cursor: pointer;
    padding: 1px 2px;
    border: 1px solid rgba(120,120,120,0.75);
    border-radius: 2px;
    background: linear-gradient(to bottom,
        #efefef 0%,#fcfcfc 32%,#e8e8e8 62%,#c4c4c4 100%);
    background-size: cover;
}
.btn:hover, .btn:active{
    border: 1px solid rgba(120,120,120,0.75);
    border-radius: 2px;
    background: linear-gradient(to bottom,
        #d8d8d8 0%,#fcfcfc 32%,#d8d8d8 62%,#a0a0a0 100%);
}

.tool-item {
    display: inline-block;
}

.tool-item .tool-handle{
    height: 75px;
    width: 75px;
}

/*POP-OUT*/

.pop-out {
    position: fixed !important;
    top:50px;
    left:50px;
    border-radius:5px;
    border: 1px solid black;
    padding: 0;
    background: linear-gradient(12deg, #e8e0d5 0%,#fff3ea 28%,#ede4ce 54%,#e8e0d5 100%);
    box-shadow: 10px 10px 15px rgba(26, 26, 26, 0.7);
}

.pop-out-over-lay {
    position: fixed;
    left:0;
    top:0;
    margin: 0;
    padding:0;
    z-index: 6;
    width:100%;
    height: 100%;
    background: rgba(49,49,49,0.75);
}

.pop-out-header {
    background: rgba(0,0,0,0.51);
    border-bottom: 1px solid black;
    cursor: move;
}


.pop-out .pop-out-title{
    color: #ffffff;
    font-weight: bold;
    text-transform: capitalize;
    display: inline;
    line-height: 25px;
}

.pop-out-footer {
    width:100%;
    background: rgba(0,0,0,0.51);
    border-top: 1px solid black;
    min-height: 8px;
}

.pop-out-close {
    margin:2px;
    float: right;
}

.pop-out.modal {
    margin: 0 auto;
    left: 40%;
    top: 10%;
}


.pop-out.modal-confirm {
    width:400px;
    height:200px;
}

.pop-out.modal-message {
    width:400px;
    height:150px;
}

.pop-out.modal-message .modal-message-inner-wrap,
.pop-out.modal-confirm .modal-confirm-inner-wrap {
    width:100%;
    height:calc(100% - 36px);
    text-align: center;
    overflow: auto;
}

.pop-out.modal  .modal-button-wrap {
    margin: 20px auto;
    text-align: center;
}

.pop-out.modal .modal-button-wrap .btn{
    font-weight: bold;
    padding: 10px 20px;
}

p.modal-message-message,
p.modal-confirm-message {
    margin-top: 30px;
}

    /*END POP-OUT*/

.pop-out.modal-message.confirm-delete-wrap {
    height: 190px;
}

.confirm-delete-label {
    margin-top: 30px;
}


.tool-content-wrap {
    width: 300px;
    min-height: 70px;
}


.tool-content-wrap{
    top:100px;
    left:50px;
}

.tool-content-wrap.switch{
    z-index:6
}

.tool-content-wrap.no-switch{
    z-index:4
}

.tool-content-inner-wrap{
    position: relative;
    height: 100%;
    min-height: 70px;
}

/*.tool-content-wrap{*/
    /*top:10px;*/
    /*left:10px;*/
    /*height: 450px;*/
/*}*/

#current-view .tool-content-wrap{
    top:50px;
    left:20px;
    height: 385px;
}
#available-layers .tool-content-wrap{
    top:40px;
    left:10px;
    height: 500px;
}
#enabled-layers .tool-content-wrap{
    top: 60px;
    left: 30px;
    height:350px;
}


#map-viewer .tool-content-wrap{
    top:10px;
    left:325px;
    width: calc(100% - 340px);
    height: 90%;
}


#available-layers .tool-content-inner-wrap {
    /*min-height: 100px;*/
}


.tool-item.active .tool-content-wrap {
    display:initial;
}

.tool-item.inactive .tool-content-wrap {
    display: none;
}

.tool-content {
    padding: 5px;
    position:relative;
    /*min-width: 300px;*/
    min-height: 30px;
    overflow: auto;
    height: calc(100% - 45px);
}

#available-layers .tool-content {
    padding: 0;
    width: 100%;
    height: calc(100% - 57px);
}

#enabled-layers .tool-content {
    height: calc(100% - 67px);
}

.map-viewer .tool-content {
    padding: 0;
    width: 100%;
    height: calc(100% - 36px);
}

.tool-content-header {
    text-align: center;
}

#available-layers .line-item {
    border-bottom: 1px solid rgba(52,52,52,0.61);
    cursor: pointer;
    line-height: 24px;
}

#available-layers .line-item.group-header {
    background: rgba(100,100,100,0.05);
}

#available-layers .line-item.group-header.hovered{
    background:red;
}

#available-layers .line-item.available-layer{
    border-bottom: 1px solid rgba(100,100,100,0.4);
    background: rgba(255,255,255,0.4);
}

#available-layers .line-item.available-layer.selected,
#available-layers .line-item.group-header.selected{
    background: #20b5ff;
    color: #ffffff;
}

#available-layers .line-item.available-layer.hidden {
    background: rgba(72,9,0,0.49);
}

#available-layers .line-item.available-layer.hidden.selected {
    background: rgba(85,0,115,0.49);
}

#available-layers .tool-handle{
    background: url("images/folder.png") center no-repeat;
    background-size: cover;
}
#enabled-layers .tool-handle{
    background: url("images/layers.png") center no-repeat;
    background-size: cover;
}
#current-view .tool-handle{
    background: url("images/crosshair.png") center no-repeat;
    background-size: cover;
}
#vector-styles .tool-handle{
    background: url("images/crosshair.png") center no-repeat;
    background-size: cover;
}
#available-layers .tool-handle:hover{
    background: url("images/folder-red.png") center no-repeat;
    background-size: cover;
}
#enabled-layers .tool-handle:hover{
    background: url("images/layers-red.png") center no-repeat;
    background-size: cover;
}
#current-view .tool-handle:hover{
    background: url("images/crosshair-red.png") center no-repeat;
    background-size: cover;
}
#vector-styles .tool-handle:hover{
    background: url("images/crosshair-red.png") center no-repeat;
    background-size: cover;
}

/*#map-viewer .tool-handle{*/
    /*background: url("images/layers.png") center no-repeat;*/
    /*background-size: cover;*/
/*}*/

.tool-item.active .tool-handle {
    opacity: 0.3;
}

.tool-item.inactive .tool-handle {
    opacity:1;
}

.view-tool-items {
    width: calc(100% - 10px);
}
.view-tool-items .view-label {

}

.view-tool-items .view-item {
    border: 1px solid rgba(52,52,52,0.61);
    background: rgba(235,235,235,0.87);
}

.view-tool-items .view-item .view-sub-item {

}

.group-container.hidden {
    background: #cbcbcb;
}

.group-container .group-toggle {
    display: inline-block;
    width: 24px;
    height: 24px;
    cursor:pointer;
}

.group-container .group-controls {
    float: right;
}

.item-controls .publish-config-controls {
    padding: 3px;
    margin-right: 15px;
    float: right;
}

.item-controls .not-root,
.item-controls.group > .group-controls,
.item-controls.layer > .layer-controls{
    display: inline-block;
}

.item-controls.root .not-root,
.item-controls.group > .layer-controls,
.item-controls.layer > .group-controls{
    display: none;
}

.layer-controls,
.group-controls {
    padding: 3px;
    margin-right: 15px;
    float: right;
    display:none;
}

.layer-controls .group-tool,
.group-controls .group-tool {
  margin-left: 5px;
}

.group-container.open {
    border-bottom: 2px solid rgba(100,100,100,0.5);
}

.group-container.open > .group-header .group-title {
    background: url("images/open_folder_24x24.png") left center no-repeat;
}

.group-container.closed > .group-header .group-title {
    background: url("images/folder_black_24x24.png") left center no-repeat;
}
.group-container.open > .group-header .group-toggle .toggle-open,
.group-container.closed > .group-header .group-toggle .toggle-close,
.group-container.open > .group-content {
    display: initial;
}
.group-container.closed > .group-header .group-toggle .toggle-open,
.group-container.open > .group-header .group-toggle .toggle-close,
.group-container.closed > .group-content {
    display: none;
}

.subview-toggle {
    float:right;
    width: 21px;
    height:21px;
    border: 1px solid rgba(46,46,46,0.71);
    margin-right: 4px;
}

.group-container .subview-toggle{
    margin-top: 5px;
}

.available-layer .subview-toggle {
     margin-top: 1px;
}

.available-layer.shown .layer-subview-toggle,
.available-layer.hidden .layer-subview-toggle:hover,
.group-container.shown > .group-header .group-subview-toggle,
.group-container.hidden> .group-header .group-subview-toggle:hover  {
    background: url("images/eye_open_24x24.png") center no-repeat,
    rgba(255,255,255,0.85);
    background-size: cover;
}

.available-layer.hidden .layer-subview-toggle,
.available-layer.shown .layer-subview-toggle:hover,
.group-container.hidden >.group-header .group-subview-toggle,
.group-container.shown >.group-header .group-subview-toggle:hover  {
    background: url("images/eye_closed24x24.png") center no-repeat,
    rgba(255,255,255,0.85);
    background-size: cover;
}

.group-container .group-title {
    /*background: url("images/folder_black_24x24.png") left center no-repeat;*/
    text-indent:24px !important;
    text-transform: capitalize;
    margin: 5px 0;
    display: inline-block;
    cursor: move;
}

.group-container .group-header:hover > .group-title{
    opacity:0.6;
}
.group-container .group-title:hover .group-toggle{
    opacity:1;
}

.available-layer {
    padding-left: 25px;
}

.level-line {
    display: inline-block;
    border-left:2px solid rgba(100,100,100,0.5);
    padding-left: 3px;
    text-indent: 0 !important;
}

.mapserver-view-main {
    background: linear-gradient(35deg,
    #E2DFC8 1%, #FDF9DB 15%, #FFF9C8 18%, #DBD6B5 25%,
    #E2DFC8 30%, #FDF9DB 45%, #FFF9C8 47%, #DBD6B5 50%,
    #E2DFC8 55%, #FDF9DB 70%, #FFF9C8 72%, #DBD6B5 75%,
    #E2DFC8 80%, #FDF9DB 95%, #FFF9C8 97%, #DBD6B5 100%)
}

.config-option-cont.hidden{
    display: none;
}

.layer-view-form input,
.layer-view-form textarea,
.layer-view-form select {
	width:100%;
}

.edit-group-form {
    margin: 0;
    padding: 20px 30px;
}

.edit-group-form-wrap {
    margin: 0 auto;
    padding: 0;
    overflow: auto;
    height: calc(100% - 32px);
}


.add-layer-form {
    margin: 0;
    padding: 10px 20px;
}

.add-layer-form-wrap,
.edit-layer-form-wrap {
    margin: 0 auto;
    padding: 0;
    overflow: auto;
    height: calc(100% - 32px);
}

.edit-layer-form {
    width:90%;
    margin-left: 5%;
    margin-top: 15px;
}

.layer-form-item {
    margin-bottom: 8px;
}

.layer-form-item label {
   font-weight: bold;
}

.add-layer-form select {
    width:95%;
}

.verify-layer-form{
    padding:15px 10px;
}

.verify-extent-wrap {
    padding-left: 10px;
}

.edit-extent-content {
    padding-left:10px;
}

.layer-editor
{
	max-width:600px;
}

.layer-edit-close{
    float: right;
}

.map-config-get-extent{
    float: right;
}

.layer-group-tool,
.enabled-layers-tool {
    height: 20px;
    width:20px;
}

.layer-tool {
    height: 16px;
    width:16px;
}

.publish-map-config {
    background: url("images/publish-map-24x24-black.png") center no-repeat,
    linear-gradient(to bottom,
      #efefef 0%,#fcfcfc 32%,#e8e8e8 62%,#c4c4c4 100%);
    background-size: cover;
}

.publish-map-config:hover {
    background: url("images/publish-map-24x24-black.png") center no-repeat,
    linear-gradient(to bottom,
      #d8d8d8 0%,#fcfcfc 32%,#d8d8d8 62%,#a0a0a0 100%);
    background-size: cover;
}

.layer-edit,
.group-edit {
    background: url("images/edit_24x24.png") center no-repeat,
        linear-gradient(to bottom,
            #efefef 0%,#fcfcfc 32%,#e8e8e8 62%,#c4c4c4 100%);
    background-size: cover;
}

.layer-delete,
.group-delete{
    background: url("images/trashcan_24x24.png") center no-repeat,
        linear-gradient(to bottom,
            #efefef 0%,#fcfcfc 32%,#e8e8e8 62%,#c4c4c4 100%);
    background-size: cover;
}
.layer-hide,
.group-hide {
    background: url("images/eye_closed24x24.png") center no-repeat,
    linear-gradient(to bottom,
            #efefef 0%,#fcfcfc 32%,#e8e8e8 62%,#c4c4c4 100%);
    background-size: cover;
}
.group-add-group{
    background: url("images/folder_plus_24x24.png") center no-repeat,
    linear-gradient(to bottom,
            #efefef 0%,#fcfcfc 32%,#e8e8e8 62%,#c4c4c4 100%);
    background-size: cover;
}
.group-add-layer{
    background: url("images/layers_plus_24x24.png") center no-repeat,
    linear-gradient(to bottom,
            #efefef 0%,#fcfcfc 32%,#e8e8e8 62%,#c4c4c4 100%);
    background-size: cover;
}
.layer-delete:hover,
.group-delete:hover{
    background: url("images/trashcan_24x24.png") center no-repeat,
        linear-gradient(to bottom,
            #d8d8d8 0%,#fcfcfc 32%,#d8d8d8 62%,#a0a0a0 100%);
    background-size: cover;
}
.layer-hide:hover,
.group-hide:hover {
    background: url("images/eye_closed24x24.png") center no-repeat,
    linear-gradient(to bottom,
            #d8d8d8 0%,#fcfcfc 32%,#d8d8d8 62%,#a0a0a0 100%);
    background-size: cover;
}
.group-add-group:hover{
    background: url("images/folder_plus_24x24.png") center no-repeat,
    linear-gradient(to bottom,
            #d8d8d8 0%,#fcfcfc 32%,#d8d8d8 62%,#a0a0a0 100%);
    background-size: cover;
}
.group-add-layer:hover{
    background: url("images/layers_plus_24x24.png") center no-repeat,
    linear-gradient(to bottom,
            #d8d8d8 0%,#fcfcfc 32%,#d8d8d8 62%,#a0a0a0 100%);
    background-size: cover;
}

.layer-edit:hover,
.group-edit:hover {
    background: url("images/edit_24x24.png") center no-repeat,
        linear-gradient(to bottom,
            #d8d8d8 0%,#fcfcfc 32%,#d8d8d8 62%,#a0a0a0 100%);
    background-size: cover;
}

.layer-add-form-alert {
    height: 25px;
    text-align: center;
    color:red;
    font-size: 14px;
}

.upload-new-layer-element {
    cursor: pointer;
    border: 1px solid rgba(46,46,46,0.71);
    padding: 15px;
    background: rgba(27,71,102,0.49);
}

.upload-new-layer-element:hover{
    background: rgba(81,205,223,0.69);
}

.upload-new-layer-file {
    display:none;
    cursor: pointer;
}

.upload-new-layer-file-items {
    border: 1px solid rgba(46,46,46,0.71);
    margin-top: 5px;
    padding:3px;
}

.upload-progress-container {
    background: white;
    width:90%;
    height: 25px;
}

.upload-progress-bar {
    width:1%;
    background: red;
}

.set-view-form {
    padding:15px;
}

.view-form-set-btn {
    float:right;
}


.layer-style-cont {
    width:100%;
}

.layer-style-cont:hover {
    background: rgba(18,18,18,0.3);
}

.layer-style-cont input.layer-opacity {
    width: calc(100% - 30px);
}

.layer-controls-control-wrap {
    display:none;
}

.site-name-cont input {
	width:100%
}

.config-layers .tool-content {
	height:auto;
}

.map-configuration-editor-form-wrap {
	height: calc(100% - 35px);
    max-height: 88%;
	overflow: auto;
	margin-bottom: 0;
}

.map-configuration-editor-form > *{
	width: 90%;
	margin-left:5%;
	margin-top:15px;
}

.map-configuration-editor.configuring .layer-style-cont input.layer-opacity {
    width: calc(100% - 120px);
}

.map-configuration-editor.configuring  .layer-controls-control-wrap {
    display: inline-block;
}

.layer-controls-control-wrap img {
    width: 24px;
    height: 24px;
}

.layer-controls-control.if-config {
    display: none;
}


.layer-controls-control-wrap.is-config  .layer-controls-control.if-config {
    display: inline-block;
}



.remove-layer-styler {
    display: inline-block;
    float: right;
}

.map-configuration-constrain-extent {
    display: none;
}

.map-configuration-constrain-extent.constraining {
    display: inline-block;
}


.style-tool-wrap {
    padding:5px;
}


/* control arrows */
i.arrow {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}

.arrow-right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.arrow-left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.arrow-up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.arrow-down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}



.origin-control {
    position: fixed;
    left:400px;
    top:50px;
    z-index: 50;
    background: rgba(202,202,202,0.73);
    border: 1px solid #000000;
    height: 180px;
    width: 180px;
}

.origin-control i.arrow {
    border-width: 0 25px 25px 0;
    border-color: rgba(11,11,11,0.73);
    height: 25px;
    width: 25px;
}

.origin-control i.arrow:hover {
    border-color: rgba(11,11,11,1);
}

.origin-control .arrow-box-top,
.origin-control .arrow-box-center,
.origin-control .arrow-box-bottom {
    height: 50px;
    text-align: center;
}


.origin-control .arrow-box-top {
    padding-top: 10px;
    width: 180px;
}

.origin-control .arrow-box-center {
    padding-left: 10px;
    width: 160px;
}

.origin-control .arrow-box-bottom {
    width: 180px;
}

.origin-control .arrow-box-bottom .arrow-down {
    margin-top: -4px;
}

.origin-control .arrow-left {
    float: left;
}

.origin-control .arrow-right {
    float: right;
}

/*OL overwrite*/

.ol-zoom, .ol-zoomslider {
    left: auto !important;
    right: .5em !important;
}
.ol-zoom .ol-zoom-out {
    margin-top: 204px;

}
.ol-zoomslider {
    background-color: transparent;
    top: 2.3em;

}
.ol-touch .ol-zoom .ol-zoom-out {
    margin-top: 212px;

}
.ol-touch .ol-zoomslider {
    top: 2.75em;

}
.ol-zoom-in.ol-has-tooltip:hover [ role=tooltip ],
.ol-zoom-in.ol-has-tooltip:focus [ role=tooltip ] {
    top: 232px;
}

.ol-scale-line {
    left: auto;
    top: 8px;
    bottom: auto;
    right: 88px;
}

.ol-attribution {
    font-size: 12pt;
    line-height: 12pt;
    bottom: 48px;
}

.ol-attribution li {
    display: block;
}

.ol-rotate {
    right: 2.7em;
}

.ol-mouse-position {
    top: 8px;
    right: auto;
    left:8px;
    color: #ffffff;
    border: 1px solid rgba(20,20,20,0.6);
    padding: 2px;
    background: rgba(55,55,55,0.45);
}


.ol-dragbox {
    background-color: rgba(255,255,255,0.4);
    border-color: rgba(100,150,0,1);
}