html,
body,
header {
    height: 100%;
    width: 100%;
    position: relative;
}

.navbar {
    background: rgba(22, 162, 105, 1);
    height: 42px !important;
}

#map {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
}

#mouseposisi {
    background-color: #fff;
    position: absolute;
    bottom: 5px;
    right: 45%;
    margin: 1px;
    border: 1px solid #bbb;
    text-overflow: ellipsis;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    width: 200px;
    transition: all 0.5s linear;
}

.scale-line {
    position: absolute;
    bottom: 35px;
    right: 250px;
    transition: all 0.5s linear;
}

#longitude {
    background-color: rgba(255, 255, 255, 1);
    position: absolute;
    width: 100px;
    height: 22px;
    bottom: 5px;
    right: 95px;
    margin: 1px;
    border: 1px solid #bbb;
    text-overflow: ellipsis;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#latitude {
    background-color: rgba(255, 255, 255, 1);
    position: absolute;
    width: 100px;
    bottom: 5px;
    height: 22px;
    right: 200px;
    margin: 1px;
    border: 1px solid #bbb;
    text-overflow: ellipsis;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.btn1 {
    border-radius: 4px;
    -webkit-box-shadow: 3px 3px 7px #666666;
    -moz-box-shadow: 3px 3px 7px #666666;
    box-shadow: 3px 3px 7px #666666;
    font-family: Arial;
    color: black;
    font-size: 12px;
    padding: 2px;
    background: #59bfff;
    border: solid #1f628d 1px;
    text-decoration: none;
}

.btn1:hover {
    background: #468dcf;
    text-decoration: none;
}

.simtaru-header,
.simtaru-header:hover,
.simtaru-header > .panel-header {
    color: white !important;
    border-color: rgba(22, 162, 105, 1) !important;
    background: white !important;
    background: -webkit-linear-gradient(top, #ffab2e 0, #ff9900 100%);
    background: -moz-linear-gradient(top, #ffab2e 0, #ff9900 100%);
    background: -o-linear-gradient(top, #ffab2e 0, #ff9900 100%);
    background: linear-gradient(to bottom, #ffab2e 0, #ff9900 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffab2e,endColorstr=#ff9900,GradientType=0);
}

#cmdGo {
    position: absolute;
    bottom: 5px;
    right: 55px;
}

#cmdClear {
    position: absolute;
    bottom: 5px;
    right: 10px;
}

.btn-toolbar-map {
    margin-top: 7px;
    margin-bottom: 7px;
    background-color: #0095a6;
}

/* Switch info */
.switch-info label input[type="checkbox"]:checked + .lever {
    background-color: #33b5e5;
}

.switch-info label input[type="checkbox"]:checked + .lever:after {
    background-color: #0099cc;
}

/* Switch danger */
.switch-danger label input[type="checkbox"]:checked + .lever {
    background-color: #ff4444;
}

.switch-danger label input[type="checkbox"]:checked + .lever:after {
    background-color: #cc0000;
}

/* Switch warning */
.switch-warning label input[type="checkbox"]:checked + .lever {
    background-color: #ffbb33;
}

.switch-warning label input[type="checkbox"]:checked + .lever:after {
    background-color: #ff8800;
}

/* Switch success */
.switch-success label input[type="checkbox"]:checked + .lever {
    background-color: #00c851;
}

.switch-success label input[type="checkbox"]:checked + .lever:after {
    background-color: #007e33;
}

.select-wrapper.md-form.md-outline + label {
    top: 0.5em !important;
    z-index: 2 !important;
}

.dx-overlay-wrapper {
    z-index: 14000 !important;
}

.swal2-container {
    z-index: 20000 !important;
}

.info-label {
    /* border: solid 1px #d5d5d5; */
    border-style: solid;
    border-width: 1px 1px 0 1px;
    border-color: #d5d5d5;
    background-color: #edf3f4;
    color: black;
    width: 100%;
    padding: 4px 10px 6px 4px;
    width: 100%;
}

.info-value {
    border: solid 1px #d5d5d5;
    padding: 5px 5px 6px;
    background-color: #fff;
    width: 100%;
    margin-bottom: 15px;
    word-wrap: break-word;
}

label.error {
    font-size: 80% !important;
    color: #dc3545 !important;
    margin-top: 2.25rem !important;
    background-color: transparent !important;
}

label.error.active {
    -webkit-transform: translateY(5px) !important;
    -ms-transform: translateY(5px) !important;
    transform: translateY(5px) !important;
}

.md-form.md-outline input[type="text"].error,
.md-form.md-outline input[type="text"]:focus.error,
.md-form.md-outline input[type="password"].error,
.md-form.md-outline input[type="password"]:focus.error,
.md-form.md-outline input[type="email"].error,
.md-form.md-outline input[type="email"]:focus.error,
.md-form.md-outline input[type="url"].error,
.md-form.md-outline input[type="url"]:focus.error,
.md-form.md-outline input[type="time"].error,
.md-form.md-outline input[type="time"]:focus.error,
.md-form.md-outline input[type="date"].error,
.md-form.md-outline input[type="date"]:focus.error,
.md-form.md-outline input[type="datetime-local"].error,
.md-form.md-outline input[type="datetime-local"]:focus.error,
.md-form.md-outline input[type="tel"].error,
.md-form.md-outline input[type="tel"]:focus.error,
.md-form.md-outline input[type="number"].error,
.md-form.md-outline input[type="number"]:focus.error,
.md-form.md-outline input[type="search-md"].error,
.md-form.md-outline input[type="search-md"]:focus.error,
.md-form.md-outline input[type="search"].error,
.md-form.md-outline input[type="search"]:focus.error,
.md-form.md-outline textarea.md-textarea.error,
.md-form.md-outline textarea.md-textarea:focus.error {
    border-color: #f44336;
    -webkit-box-shadow: inset 0 0 0 1px #f44336;
    box-shadow: inset 0 0 0 1px #f44336;
}

.md-form.md-outline input[type="text"]:focus:not([readonly]).error + label,
.md-form.md-outline input[type="text"].error + label:after,
.md-form.md-outline input[type="text"]:focus.error + label:after,
.md-form.md-outline input[type="password"]:focus:not([readonly]).error + label,
.md-form.md-outline input[type="password"].error + label:after,
.md-form.md-outline input[type="password"]:focus.error + label:after,
.md-form.md-outline input[type="email"]:focus:not([readonly]).error + label,
.md-form.md-outline input[type="email"].error + label:after,
.md-form.md-outline input[type="email"]:focus.error + label:after,
.md-form.md-outline input[type="url"]:focus:not([readonly]).error + label,
.md-form.md-outline input[type="url"].error + label:after,
.md-form.md-outline input[type="url"]:focus.error + label:after,
.md-form.md-outline input[type="time"]:focus:not([readonly]).error + label,
.md-form.md-outline input[type="time"].error + label:after,
.md-form.md-outline input[type="time"]:focus.error + label:after,
.md-form.md-outline input[type="date"]:focus:not([readonly]).error + label,
.md-form.md-outline input[type="date"].error + label:after,
.md-form.md-outline input[type="date"]:focus.error + label:after,
.md-form.md-outline
    input[type="datetime-local"]:focus:not([readonly]).error
    + label,
.md-form.md-outline input[type="datetime-local"].error + label:after,
.md-form.md-outline input[type="datetime-local"]:focus.error + label:after,
.md-form.md-outline input[type="tel"]:focus:not([readonly]).error + label,
.md-form.md-outline input[type="tel"].error + label:after,
.md-form.md-outline input[type="tel"]:focus.error + label:after,
.md-form.md-outline input[type="number"]:focus:not([readonly]).error + label,
.md-form.md-outline input[type="number"].error + label:after,
.md-form.md-outline input[type="number"]:focus.error + label:after,
.md-form.md-outline input[type="search-md"]:focus:not([readonly]).error + label,
.md-form.md-outline input[type="search-md"].error + label:after,
.md-form.md-outline input[type="search-md"]:focus.error + label:after,
.md-form.md-outline input[type="search"]:focus:not([readonly]).error + label,
.md-form.md-outline input[type="search"].error + label:after,
.md-form.md-outline input[type="search"]:focus.error + label:after,
.md-form.md-outline textarea.md-textarea:focus:not([readonly]).error + label,
.md-form.md-outline textarea.md-textarea.error + label:after,
.md-form.md-outline textarea.md-textarea:focus.error + label:after {
    color: #f44336;
    content: attr(data-error);
    opacity: 1;
}

.md-form.md-outline input[type="text"].form-control.error + label:after,
.md-form.md-outline input[type="text"].form-control:focus.error + label:after,
.md-form.md-outline input[type="password"].form-control.error + label:after,
.md-form.md-outline
    input[type="password"].form-control:focus.error
    + label:after,
.md-form.md-outline input[type="email"].form-control.error + label:after,
.md-form.md-outline input[type="email"].form-control:focus.error + label:after,
.md-form.md-outline input[type="url"].form-control.error + label:after,
.md-form.md-outline input[type="url"].form-control:focus.error + label:after,
.md-form.md-outline input[type="time"].form-control.error + label:after,
.md-form.md-outline input[type="time"].form-control:focus.error + label:after,
.md-form.md-outline input[type="date"].form-control.error + label:after,
.md-form.md-outline input[type="date"].form-control:focus.error + label:after,
.md-form.md-outline
    input[type="datetime-local"].form-control.error
    + label:after,
.md-form.md-outline
    input[type="datetime-local"].form-control:focus.error
    + label:after,
.md-form.md-outline input[type="tel"].form-control.error + label:after,
.md-form.md-outline input[type="tel"].form-control:focus.error + label:after,
.md-form.md-outline input[type="number"].form-control.error + label:after,
.md-form.md-outline input[type="number"].form-control:focus.error + label:after,
.md-form.md-outline input[type="search-md"].form-control.error + label:after,
.md-form.md-outline
    input[type="search-md"].form-control:focus.error
    + label:after,
.md-form.md-outline input[type="search"].form-control.error + label:after,
.md-form.md-outline input[type="search"].form-control:focus.error + label:after,
.md-form.md-outline textarea.md-textarea.form-control.error + label:after,
.md-form.md-outline
    textarea.md-textarea.form-control:focus.error
    + label:after {
    position: absolute;
    top: 4rem;
    left: 0;
}

label.error {
    font-size: 80% !important;
    color: #dc3545 !important;
    margin-top: 2.25rem !important;
    background-color: transparent !important;
}

label.error.active {
    -webkit-transform: translateY(5px) !important;
    -ms-transform: translateY(5px) !important;
    transform: translateY(5px) !important;
}

.panel-body {
    background-color: #fff !important;
}

.md-outline.select-wrapper + label {
    top: 0.5em !important;
    z-index: 2 !important;
}

.radio-img > input {
    display: none;
}
.radio-img > .base-image {
    cursor: pointer;
    border: 2px solid 05445e;
}
.radio-img > input:checked + .base-image {
    border: 2px solid #408c99;
}
.base-image {
    opacity: 0.8;
    width: 100px;
    height: 60px;
    background-position: center center;
    background-color: gray;
    background-size: cover;
    display: inline-block;
    border-radius: 7px;
}
.base-image:hover {
    opacity: 1;
}

/* .active{
        background-color: #4285f4;
    } */
.btnMap {
    width: 31px;
    height: 31px;
    box-shadow: 0px 10px 14px -7px rgba(22, 162, 105, 1);
    /* background: linear-gradient(to bottom, #599bb3 5%, #007bff 100%); */
    background-color: rgba(22, 162, 105, 1);
    border-radius: 50%;
    display: flex;
    cursor: pointer;
    color: #ffffff !important;
    font-family: Arial;
    font-size: 14px;
    text-decoration: none;
    margin-bottom: 10px;
    justify-content: center;
    align-items: center;
    border: none;
}
.btnMap:hover {
    /* background: linear-gradient(to bottom, #408c99 5%, #599bb3 100%); */
    /* background-color: #0a97f5; */
    box-shadow: 0px 10px 14px -5px #032952;
}
.btnMap:active {
    position: relative;
    top: 1px;
}

#toolbar {
    position: absolute;
    top: 65px;
    left: 10px;
    height: auto;
    width: 40px;
    z-index: 1;
}