/* Import colors from the color variable css */
/* @import '../css/color-variable.css'; */

@import url('https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap');
/*
:root {
    --main-theme-color: #5c0c51;
    --main-btn-color: #5c0c51;
    --main-langback: #9969939e;
    --main-loginsignup: #5b0c51;
    --main-tabback: #ab3c80;
    --main-font-color: #4c4c4e;
    --main-inputback-color: #f4f4f4;
    --main-gri-color: linear-gradient(to right, #3d0435, #56184d, #712b66, #8c3f80, #a8539c);
}*/

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #ffffff;
    font-family: 'Roboto', sans-serif;
}

.div-hidden {
    display: none;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #00b4f2;
    border-radius: 10px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #00b4f2;
    }


input[type="checkbox"] {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
    width: 16px;
    height: 16px;
    background-color: #f3f3f3;
    position: relative;
    top: 5px;
    height: 16px !important;
    border: 1px solid var(--main-langback);
}

    input[type="checkbox"]:checked:after {
        width: 10px;
        height: 10px;
        content: '';
        background: var(--main-langback);
        position: absolute;
        top: 2px;
        left: 2px;
    }

input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background-color: #f3f3f3;
    position: relative;
    border: 1px solid var(--main-langback);
    top: 3px;
    border-radius: 50px;
    margin: 0px 5px 0 0;
    height: 16px !important;
}

    input[type="radio"]:checked:after {
        width: 10px;
        height: 10px;
        content: '';
        background: var(--main-langback);
        position: absolute;
        top: 2px;
        left: 2px;
        border-radius: 50px;
    }

p {
    font-size: 14px;
    text-align: justify;
}


.help-block {
    color: red;
}

.overview-tooltip {
    background: var(--main-langback);
    color: #fff;
    z-index: 10;
    padding: 2px;
    border-radius: 5px;
    border: 2px solid var(--main-theme-color);
    font-size: 12px
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 25px;
    box-shadow: 0px 0px 14px -10px #000;
    background: var(--main-theme-color);
}

.footer-mian div p {
    margin: 0;
    color: #fff;
    padding: 3px 4px;
    font-size: 12px;
}

.footer-mian div a {
    color: #fff;
}

.ol-overviewmap {
    right: .5em;
}

    .ol-overviewmap .ol-overviewmap-map {
        border: 2px solid var(--main-theme-color);
    }

.ol-control button {
    background-color: var(--main-theme-color);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    bottom: 10px !important;
    left: 10px !important;
}

    .ol-control button:focus, .ol-control button:hover {
        text-decoration: none;
        background-color: var(--main-theme-color);
    }

.map-coordinates {
    position: absolute;
    bottom: 8px;
    right: 170px;
    background: var(--main-langback);
    width: auto;
    padding: 2px 5px;
    margin: 0;
    color: #fff;
    font-size: 12px;
    border-radius: 3px;
    height: 24px;
}

.ol-collapsed + .map-coordinates {
    right: 50px;
}


.nav-ul-citi li a span i {
    position: absolute;
    right: 20px;
    font-size: 22px;
}

.header-img-eoffice {
    padding: 0 0 0 0;
    margin: 0 35px 0 0;
}

    .header-img-eoffice .eofficelogo {
        width: 100px;
    }

    .header-img-eoffice .courtcase {
        width: 65px;
    }

    .header-img-eoffice .header1 {
        width: 136px;
    }

@media only screen and (min-width : 1025px) and (max-width : 1300px) {
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) {
}

@media only screen and (min-width : 320px) and (max-width : 767px) {
    footer {
        height: 45px;
    }

    .content-sec {
        height: calc(100vh - 140px);
    }

    .footer-mian div p {
        font-size: 9px;
        text-align: center !important;
    }

    .helpcimg {
        margin: 0 0 20px 0;
        width: 100%;
    }

    .ol-custom-overviewmap {
        display: none;
    }
}

.field-validation-error {
    color: red;
}

.redClass {
    background-color: PaleVioletRed;
}

.greenClass {
    background-color: YellowGreen;
}

.report-table {
    background: #fff;
}

.projectClass {
    padding-left: 15px;
    padding-top: 5px;
}
/*table.dataTable tbody tr td {
    color: #000;
    font-weight: 500;
    background: #fff;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}*/

/*table.dataTable thead > tr > th {
    max-width: 190px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    table.dataTable tbody tr td:last-child {
        max-width: 100%;
    }*/

fieldset {
    min-width: 0;
    padding: 20px;
    margin: 0;
    border: 1px solid #A9A9A9;
}

legend {
    display: block;
    width: auto;
    max-width: 100%;
    padding: 5px 10px;
    margin-bottom: .5rem;
    font-size: 1.5rem;
    line-height: inherit;
    color: inherit;
    white-space: normal;
    border: 1px solid #A9A9A9;
}

.required:after {
    content: " *";
    color: red;
}