/* Overlay labels on inputs, textareas and selects */
.overlay-input {
    position: relative;
    width: 100%;
    margin: 1rem 0rem;
    height: 20px;
}
.overlay-label{
    z-index: 4;
}
.overlay-input > input,
.overlay-input > select,
.overlay-input > .overlay-label{
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all .5s;
    transition: all .5s;
}
.overlay-input > input,
.overlay-input > select{
    height: 40px;
}
.overlay-input > .overlay-label{
    height: 20px;
}
.overlay-input > select{
    width: 100%;
    padding: 10px 15px;
    font-size: 1rem;
    border: 1px solid silver;
    border-radius: 4px;
    background: white;
    box-sizing: border-box;
}
.overlay-input > .overlay-label {
    left: 15px;
    color: silver;
    cursor: text;
    pointer-events: none;
    font-size: 0.875rem;
    border-radius: 2px;
    padding: 0px 5px;
}
.overlay-input > .overlay-label.active,
.overlay-input > .overlay-label.fixed{
    top: -14px;
    left: 7px;
    font-size: 0.8rem;
    background: white;
    color: #333;
    cursor: default;
    border: 1px solid silver;
    border-radius: 2px;
    padding: 0px 5px;
    font-weight: bold;
    z-index: 4;
}
.overlay-input > .overlay-label.active.label-txta,
.overlay-input > .overlay-label.fixed.label-txta{
    top: -5px;
}

.overlay-input > .input-group-prepend{
    margin-top: -10px;
    height: 40px;
}
.overlay-input > .custom-file,
.overlay-input > .custom-file > .custom-file-label{
    height: 40px;
    line-height: 30px;
}
.overlay-input > .custom-file > .custom-file-label::after{
    height: 38px;
    line-height: 29px;
}
.overlay-input > .custom-file{
    margin-top: -10px;
}
.overlay-input.input-group > .overlay-label:not(.active):not(.fixed){
    left: 50px;
}

/* Table Modifications */
.table thead th {
    text-align: center;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}
.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.075);
}

/* DataTables customizations */
.dataTables_filter input,
.form-control.form-control-sm{
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 5px;
    height: 36px !important;
}
.dataTables_filter input:focus {
    border: 2px solid #ced4da;
}

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
    content: "\2193";
}

.dataTables_filter label{
    position:relative;
}
.dataTables_filter label:after {
    content: "\f002";
    font-family: "Font Awesome 7 Free";
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(-50%, -50%);
}

div.dataTables_wrapper div.dataTables_paginate {
    float: right;
}

.table.dataTable{
    width: 100% !important;
}

table.dataTable thead>tr>th.sorting_asc,
table.dataTable thead>tr>th.sorting_desc,
table.dataTable thead>tr>th.sorting,
table.dataTable thead>tr>td.sorting_asc,
table.dataTable thead>tr>td.sorting_desc,
table.dataTable thead>tr>td.sorting {
    padding-right: 0px;
}

table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before,
table.dataTable thead .sorting_desc_disabled:after {
    top: -4px;
}

/* Leaflet customizations */
.leaflet-control-my-location{
    position: absolute;
    z-index: 401;
    height: 30px;
    width: 30px;
    line-height: 28px;
    left: 10px;
    bottom: 10px;
    border-radius: 4px;
    background-color: #fff;
    border: 2px solid rgba(0, 0, 0, 0.2);
}
.leaflet-control-my-location:hover{
    background-color: #f4f4f4;
    cursor: pointer;
    color: #2e28f6;
}

/* General styles */
.text-strikeout {
    text-decoration: line-through;
}

.no-action {
    pointer-events: none;
    cursor: not-allowed;
}

input[type="checkbox"]:checked:after {
    content: "✔";
}

.btn-outline-light {
    border-color: #dae0e5;
}

.card-header {
    border-bottom: 1px solid #ddd;
}
/* Image Peviews */
.custom-file-input:lang(en) ~ .custom-file-label::after {
    content: "\f07c";
    font-family: var(--fa-family, var(--fa-style-family, "Font Awesome 7 Free"));
}
.custom-file-input:focus ~ .custom-file-label {
    border-color: inherit;
    box-shadow: none;
}
.preview-container{
    border: 2px dashed #ced4da;
    padding: 10px;
    border-radius: 5px;
    height: 170px;
    position: relative;
}
.image-preview {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 150px;
    max-width: 333px;
}
.btn-preview-remove{
    position: absolute;
    bottom: 5px;
    right: 5px;
    display: none;
}
.btn-preview-remove.visible{
    display: block;
}


/* Form validation */
.invalid-container{
    position: relative;
}
.invalid-field,
.invalid-field + .radio-mask{
    border: 1px solid #aa0011 !important;
    box-shadow: 0px 0px 4px #aa0011 !important;
}

.invalid-message{
    position: absolute;
    bottom: -25px;
    right: 7px;
    font-size: 0.8rem;
    background: #fff;
    color: #dc3546;
    cursor: default;
    border: 1px solid #aa0011 ;
    border-radius: 2px;
    padding: 0px 5px;
    font-weight: bold;
    z-index: 4;
    pointer-events: none;
    width: fit-content;
}

@media (max-width: 767px) {
    .nk-sidebar {
        z-index: 2000;
    }
}

#preloader {
    background: #ffffff45;
}

.separator {
    height: 1px;
    margin: 7px 0px;
    border: none;
    background: linear-gradient(90deg, transparent 0%, rgb(117, 117, 115) 49%, transparent 49%, transparent 49.5%, rgb(117, 117, 115) 49.5%, rgb(117, 117, 115) 50.5%, transparent 50.5%, transparent 51%, rgb(117, 117, 115) 51%, transparent 100%);
}

/* Pop up */
.pop-up-title {
    font-size: 1rem;
    color: #333;
    margin-bottom:5px;
}
.pop-up-subtitle {
    font-size: 0.9rem;
    color: #555;
    margin:5px 0px;
}
.pop-up-label {
    font-size: 0.85rem;
    color: #333;
    display: block;
    margin:0 0 5px 0
}
.pop-up-container {
    width: 100%;
    height: 100px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}
.pop-up-image {
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
    transition: transform 0.3s ease;
    /*max-width:100px; max-height:100px;*/
}

/* Leafltelt Styles */
.marker-cluster.cluster-ok {
    background-color: rgba(46, 204, 113, 0.6);
}
.marker-cluster.cluster-ok div {
    background-color: rgba(46, 204, 113, 0.9);
}

.marker-cluster.cluster-warning {
    background-color: rgba(243, 156, 18, 0.6);
}
.marker-cluster.cluster-warning div {
    background-color: rgba(243, 156, 18, 0.9);
}

.marker-cluster.cluster-danger {
    background-color: rgba(231, 76, 60, 0.6);
}
.marker-cluster.cluster-danger div {
    background-color: rgba(231, 76, 60, 0.9);
}

/* Texto */
.marker-cluster span {
    color: #fff;
    font-weight: bold;
}

/* Menu arrow adjustment */
.has-arrow:after {
    top: 25px !important;
}
.has-arrow.active:after {
    top: 25px !important;
    transform: rotate(225deg) translateY(-50%) !important;
}

.radio-wrapper{
    position: relative;
    height: 20px;
    /*cursor: pointer;*/
    display: inline-block;
    border-radius: 50%;
}
.radio-input{
    position: absolute;
    opacity: 0;
    cursor: pointer;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
}
.radio-mask{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 20px;
    width: 20px;
    border: 2px solid #007bff75;
    border-radius: 50%;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.5s ease;
    background-image: radial-gradient(circle at center, #fff 50%, #fff 55%);
}
.radio-mask:after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: #fff;
    transition: all 0.5s ease;
}
.radio-label{
    cursor: pointer;
}
.radio-input:checked + .radio-mask{
    border: 2px solid #007bff;
    /*background-image: radial-gradient(circle at center, #007bff 50%, #fff 55%);*/
}
.radio-input:checked + .radio-mask:after{
    background-color: #007bff;
}
.radio-input:disabled + .radio-mask{
    filter: grayscale(80%);
    cursor: not-allowed;
    box-shadow: none;
}