html {
    font-size: 16px;
}

body {
    font-family: "Roboto", "Helvetica Neue", Arial, sans-serif !important;
}

#main-body {
    margin-bottom: 50px;
}

.ui-header .ui-title {
    font-family: "Roboto Condensed", sans-serif !important;
    letter-spacing: -0.02em !important;
}

.mobile-br {
    display: inline;
    white-space: normal;
}

/* Show line break only on mobile devices */
@media only screen and (max-width: 480px) {
    .mobile-br::before {
        content: "\A";
        display: block;
        margin-top: -0.5em;
    }
}

@media only screen and (max-width: 320px) {
    .ui-header .ui-title, .ui-footer .ui-title {
        margin: 0 20% !important;
        text-overflow: ellipsis;
    }
}

@media only screen and (min-width: 321px) {
    .ui-header .ui-title, .ui-footer .ui-title {
        margin: 0 20% !important;
        text-overflow: inherit;
    }
}

.ui-mini {
    font-size: 0.90625rem;
}

.ui-btn {
    font-size: 1rem;
}

.ui-navbar li .ui-btn {
    font-size: 0.90625rem;
}

#add-report {
    text-overflow: initial;
    overflow: auto;
}

.ui-listview > li p {
    font-size: 0.84375rem;
}

#edit-view > .ui-li-static { /* edit list */
    padding: .2em 1em;
}

#edit-view {
    margin-bottom: 30px !important;
}

.ui-field-contain .ui-btn, .ui-navbar .ui-btn {
    padding: 0.6em 1em;
}

.ui-btn-icon-left {
    padding-left: 2.5em !important;
}

.ui-mobile label, .ui-controlgroup-label {
    display: block;
    margin: .2em;
}

.validation-summary-errors {
    font-style: italic;
    font-size: 0.8125rem;
}

    .validation-summary-errors li {
        list-style: none;
    }

.validationMessage, .validation-errors {
    color: red;
    font-size: 0.8125rem;
    line-height: 24px;
    font-style: italic;
    display: inline-block;
    vertical-align: bottom;
}

    .validationMessage:before {
        content: '* ';
    }

.validation-errors {
    list-style: none;
}

#form-container label, .required-noti, .lbl-txt {
    font-size: 0.84375rem;
    font-style: italic;
}

[data-role="fieldcontain"] {
    padding: 0;
}

.required-noti {
    color: red;
    padding-left: 2px;
    font-size: 25px !important;
}

.ui-controlgroup-label legend, .legend-header {
    font-size: 0.8125rem;
    font-style: italic;
    font-weight: bold;
}

#copyrights {
    position: absolute;
    width: 100%;
    bottom: 50px;
    font-style: italic;
    font-size: 11px;
    text-align: center;
    margin-bottom: 0.5rem;
}

.noty_message {
    font-size: 0.875rem !important;
    text-shadow: none !important;
    line-height: 1.3 !important;
}

.noty_buttons {
    font-size: 0.875rem;
}

#reporting-title {
    font-size: 0.8125rem;
    line-height: 24px;
    font-style: italic;
    display: inline-block;
    vertical-align: bottom;
}

.ui-radio {
    z-index: 1 !important;
}

a.cursor {
    color: dodgerblue !important;
    cursor: pointer;
}

@media only screen and (max-width: 480px) {
    .sub-type-count {
        width: 95% !important;
    }
}

.list-main {
    width: 103%;
}

.vertical-line {
    border-left: 2px solid #808080;
    height: 30px;
}

#div-upload i, #div-delete i {
    padding-top: 10px;
}

#div-upload, #div-delete {
    text-align: center;
}

    #div-detail a, #div-upload a, #div-delete a {
        text-decoration: none;
        overflow-wrap: break-word;
        color: #fff;
    }

#div-detail p {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    white-space: normal;
    color: #fff;
    padding-right: 5px;
}

@media screen and (orientation: landscape) {
    .image-container {
        margin: -1em auto !important;
    }

    .img_area {
        transition: 0.3s;
        background-repeat: no-repeat;
        background-size: cover;
        height: 70vh;
    }

    .previous {
        left: 19%;
        font-size: 1.5em;
    }

    .next {
        right: 19.5%;
        font-size: 1.5em;
    }

    .btn_download,
    .btn_history,
    .btn_delete,
    .btn_map,
    .btn_date {
        right: 20%;
    }
}

@media screen and (orientation: portrait) {
    .image-container {
        margin: -1em -1em !important;
    }

    .img_area {
        transition: 0.3s;
        background-repeat: no-repeat;
        background-size: cover;
        height: 40vh;
        margin: auto;
    }

    .previous {
        left: 0px;
        font-size: 1.5em;
    }

    .next {
        right: 0px;
        font-size: 1.5em;
    }

    .btn_download,
    .btn_history,
    .btn_delete,
    .btn_map,
    .btn_date {
        right: 5px;
    }
}

.dropbackground {
    background-color: gray;
    border: 0px solid white;
}

.image-container {
    z-index: 100;
    position: relative;
    margin: auto;
}

.slide {
    text-align: center;
}

.previous,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    padding: 10px;
    margin-top: -25px;
}

i:hover {
    color: whitesmoke !important;
    opacity: 0.5;
    transition: 1s;
}

.captionText {
    color: #000000;
    font-size: 0.875rem;
    position: absolute;
    padding: 12px 12px;
    bottom: 8px;
    width: 100%;
    text-align: center;
}

.btn_download {
    top: 0px;
}

.btn_history {
    top: 40px;
}

.btn_map {
    top: 75px;
}

.btn_delete {
    bottom: 10px;
}

.btn_date {
    bottom: 60px !important;
}

.btn_download, .btn_history, .btn_delete, .btn_map, .btn_date {
    display: inline-block;
    margin: 0 2px;
    bottom: 10px;
    width: 30px;
    height: 30px;
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    position: absolute;
    cursor: pointer;
}

.footerdot {
    cursor: pointer;
    margin: 0 2px;
    background-color: #bbbbbb;
    display: inline-block;
    transition: background-color 0.5s ease;
    height: 15px;
    width: 30px;
    border: 1px solid white;
    border-radius: 10px;
    background-color: rgba(255,255,255,0.2);
}

    .active,
    .footerdot:hover {
        background-color: #22aadd;
    }

.tooltip {
    position: relative;
    display: inline-block;
    opacity: 1 !important;
    z-index: unset !important;
}

    .tooltip .tooltiptext {
        visibility: hidden;
        background-color: #111111;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 0.5rem 0.5rem;
        position: absolute;
        align-content: center;
        z-index: 10000;
        right: 30px;
        width: 180px;
    }

    .tooltip .tooltipcomment {
        visibility: hidden;
        background-color: #111111;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 0.5rem 0.5rem;
        position: absolute;
        align-content: center;
        z-index: 10000;
        width: 180px;
    }

    .tooltip:hover .tooltiptext, .tooltip:hover .tooltipcomment {
        visibility: visible;
        font-size: 12px;
    }

.tooltipTerms {
    display: inline-block;
    opacity: 1 !important;
    z-index: unset !important;
}

    .tooltipTerms .tooltipTextTerms {
        visibility: hidden;
        background-color: #111111;
        color: #fff;
        text-align: justify-all;
        border-radius: 6px;
        padding: 0.5rem 0.5rem;
        position: absolute;
        z-index: 1000;
        right: 5px;
    }

    .tooltipTerms:hover .tooltipTextTerms {
        visibility: visible;
        font-size: 12px;
    }

.image-count {
    position: absolute;
    margin-left: 10px;
    padding: 2px 6px;
    background-color: #22aadd;
    color: white;
    font-weight: bold;
    font-size: 10px;
    border-radius: 30px;
}

.img-span {
    font-size: 0.8125rem;
}


.ui-grid-a > .ui-block-a.edit {
    width: 75%
}

.ui-grid-a > .ui-block-b.upload-delete {
    width: 25%;
}


:root {
    --theadColor: #333 !important;
    --theadTextColor: #fff !important;
    --darkColor: #333 !important;
    --lightColor: #fff !important;
    --darkRowColor: #333 !important;
}

table.dataTable {
    border: 1px solid #000 !important;
    background-color: #000 !important;
}

th, tr, td {
    border-color: #252525 !important;
}

thead {
    background-color: var(--theadColor);
}

    thead > tr,
    thead > tr > th {
        background-color: transparent !important;
        color: var(--theadTextColor) !important;
        font-weight: normal;
        text-align: start;
    }

table.dataTable thead th,
table.dataTable thead td {
    border-bottom: 0px solid #111 !important;
}

table.dataTable.display tbody tr.even > .sorting_1,
table.dataTable.order-column.stripe tbody tr.even > .sorting_1,
table.dataTable.display tbody tr.even,
table.dataTable.display tbody tr.odd > .sorting_1,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_1,
table.dataTable.display tbody tr.odd {
    background-color: var(--darkRowColor) !important;
    color: var(--lightColor) !important;
}

table.dataTable.display tbody tr:hover > .sorting_1,
table.dataTable.order-column.hover tbody tr:hover > .sorting_1,
tbody tr:hover {
    background-color: var(--darkColor) !important;
    color: #fff;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: none !important;
    background-color: var(--theadColor) !important;
    color: var(--lightColor) !important
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: none !important;
}

.paginate_button.current:hover {
    background: none !important;
    background-color: var(--theadColor) !important;
    color: #fff !important
}

.dataTables_info, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background-color: #333 !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_length {
    color: #333 !important;
}

#imageDownloadLog_wrapper label, #imageDownloadLog_wrapper a {
    color: white !important;
}

.text_wrap {
    white-space: normal !important;
}

.quota-heading {
    margin-top: 18px;
    width: 100%;
    text-align: center;
}

.quota-section {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
}

.flex-table {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.flex-row {
    display: flex;
}

.flex-header, .flex-cell {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .flex-header:not(:last-child),
    .flex-cell:not(:last-child) {
        flex: 1;
    }


    .flex-header:last-child,
    .flex-cell:last-child {
        flex: 2;
        min-width: 100px;
    }

.flex-header {
    font-weight: bold;
    overflow: visible;
    position: relative;
}

.align-text-left {
    justify-content: left;
}

.align-text-right {
    justify-content: right;
}

.align-text-center {
    justify-content: center;
}

.main-headings {
    margin-bottom: 10px;
}

.flex-header-group {
    display: flex;
    justify-content: left;
    flex: 2;
}

.quota-non-available {
    font-size: 0.8125rem;
}