/* Uploading CSS */
#dz_area {
    width: 100%;
    height: 100%;
    min-height: 533px;
    max-height: 100%;
    overflow: auto;
    background-color: #e5e5e5;
}

    #dz_area:before {
        content: attr(data-message);
        position: fixed;
        left: 50%;
        top: 50%;
        color: #999;
        z-index: 0;
    }

.dzContainer {
    position: relative;
    display: inline-block;
    margin: 5px;
    padding: 5px;
    border: solid 1px #999;
    background-color: #e5e5e5;
}

.imgContainer {
    display: inline-block;
    width: 218px;
    height: 218px;
    background-color: #ccc;
    background-position: center center;
    background-repeat: no-repeat;
    border: solid 1px #ccc;
    vertical-align: top;
}

.fieldsContainer {
    display: inline-block;
    width: 225px;
    height: 218px;
    margin-left: 5px;
    vertical-align: top;
    overflow: auto;
}

    .fieldsContainer > div {
        width: 219px;
    }

    .fieldsContainer::-webkit-scrollbar {
        width: 5px;
    }

    .fieldsContainer::-webkit-scrollbar-track {
        background: transparent;
    }

    .fieldsContainer::-webkit-scrollbar-thumb {
        background: #777;
        border-radius: 3px;
        border: 1px solid transparent;
        background-clip: content-box;
    }

        .fieldsContainer > div label {
            font-size: 10px !important;
        }

        .fieldsContainer > div input[type=text], .fieldsContainer input[type=number] {
            width: 100%;
            min-height: 22px !important;
            margin: -5px 0px 1px 0px;
            padding: 2px 3px;
            border: solid 1px #ccc;
            font-size: 10px !important;
        }

        .fieldsContainer > div input[type=number] {
            width: 100%;
        }

        .fieldsContainer > div input[type=checkbox] {
            width: 44px;
            height: 22px;
            margin-top: 3px;
        }

        .fieldsContainer > div textarea {
            width: 100%;
            min-height: 22px !important;
            margin: -3px 0px 1px 0px;
            padding: 2px 3px;
            border: solid 1px #ccc;
            font-size: 10px !important;
            vertical-align: top;
            resize: none;
        }

    .fieldsContainer button {
        font-size: 15px !important;
    }

.buttonsContainer {
    display: inline-block;
    width: 27px;
    height: 218px;
    vertical-align: top;
}

/* Creating Fields CSS */
.page_headers_labels {
    font-size: 12px !important;
}

.page_headers_inputs {
    min-height: 20px !important;
    padding: 1px 4px !important;
    font-size: 11px !important;
}

.context-menu {
    display: none;
    width: 150px;
    position: absolute;
    background-color: #fff;
    border: solid 1px #ccc;
    z-index: 99999;
}

    .context-menu ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
    }

    .context-menu li {
        height: 28px;
        line-height: 28px;
        padding: 0px 5px;
        cursor: pointer;
    }

        .context-menu li:hover {
            background-color: rgb(49, 132, 149);
        }

        .context-menu li a {
            display: block;
            color: rgb(49, 132, 149);
        }

        .context-menu li:hover a {
            color: #fff;
        }


/* LeafletJS Marker Button */
.markers-button {
    position: absolute;
    width: 34px;
    height: 34px;
    top: 10px;
    right: 10px;
    z-index: 1000;
    background-color: rgb(255, 255, 255);
    border: 2px solid rgb(204, 204, 204);
    border-radius: 5px;
}

.markers-panel {
    position: absolute;
    width: 284px;
    height: 312px;
    top: 46px;
    right: 10px;
    z-index: 1000;
    padding: 3px 5px;
    background-color: rgb(255, 255, 255);
    border: 2px solid rgb(204, 204, 204);
    border-radius: 5px;
    overflow: auto;
}

    .markers-panel .marker-container {
        width: 100%;
        margin-bottom: 5px;
        padding: 3px 0px;
    }

        .markers-panel .marker-container .marker-button {
            width: 100%;
            padding: 3px 0px;
            border: none;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

        .markers-panel .marker-container .marker-fields {
            padding: 4px;
            border-left: solid 1px #e5e5e5;
            border-right: solid 1px #e5e5e5;
        }

            .markers-panel .marker-container .marker-fields:last-child {
                padding: 4px;
                border-bottom: solid 1px #e5e5e5;
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
            }

.markers-data-save-button {
    position: absolute;
    width: 282px;
    height: 30px;
    top: 360px;
    right: 11px;
    z-index: 1001;
}

.map_target {
    position: absolute;
    z-index: 2000;
    font-size: 16px;
    color: #fff;
}

img.huechange {
    filter: hue-rotate(120deg);
}