﻿/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
}

footer {
    position: absolute;
    padding-top: 15px;
    left: 0;
    bottom: 0;
    height: 60px;
    width: 100%;
}

/* Custom css */

.logo-top-gap {
    margin-top: 80px;
}

.width-600 {
    width: 600px;
}

.width-250 {
    width: 250px;
}

.padding-bottom-20 {
    padding-bottom: 20px;
}

.btn-Right-Space {
    margin-right: 5px;
}

.table-narrow {
    width: 50%;
}

.table thead th {
    align-content: center;
}

.customerWarning {
    color: red;
}

.navbar-sticky {
    position: relative;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.btnColwith {
    min-width: 200px !important;
}

hr.message-inner-separator {
    clear: both;
    margin-top: 10px;
    margin-bottom: 13px;
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.15),rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
    background-image: -ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
    background-image: -o-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
}

/*--- station details ---*/
#mapDiv {
    margin: 0;
    height: 600px;
    width: 800px;
}

.esri-view-surface {
    padding-bottom: 10px;
}

.esri-attribution__sources {
    display: none;
}

#stationDetails .card {
    padding-bottom: 50px;
}

.esri-attribution__powered-by {
    font-size: 0.8em;
}

.esri-zoom {
    display: none;
}

.legendBox {
    width: 20px;
    height: 20px;
}

.colourUnicornOnly {
    background: rgb(255, 153, 153)
}

.colourMermanOnly {
    background: rgb(255, 178, 102)
}

.colourWfdOnly {
    background: rgb(255, 255, 51)
}

.colourUnicornMerman {
    background: rgb(153, 255, 51)
}

.colourUnicornWfd {
    background: rgb(153, 255, 255)
}

.colourMermanWfd {
    background: rgb(102, 178, 255)
}

.colourUnicornMermanWfd {
    background: rgb(178, 102, 255)
}

.colourOther {
    background: rgb(160, 160, 160)
}

.blue-info {
    color: rgb(73,160,222)
}

.green-info {
    color: green
}

/*--- custom checkbox ---*/
.checkbox-large {
    width: 25px;
    height: 25px;
    float: none;
    margin-left: 9px;
    margin-top: 10px;
    margin-bottom: 10px;
}


/*--- custom CRUD tables ---*/
.crudcol {
    width: 300px;
}

@media (max-width: 250px) {
    .crudcol {
        width: 100px;
    }
}

.btn-crud {
    margin: 2px;
}

/*--- homepage ---*/
.text-align-centre {
    text-align: center
}

.tooltip-inner {
    text-align: left !important;
    min-width: 400px !important;
}

/*datatables*/
.table {
    word-break: normal;
}


    .table th {
        text-align: center;
    }

.halfsize {
    width: 50%;
}

.fullwidth {
    width: 100%;
}

.aligntextleft {
    text-align-last: left;
}

.align-to-end {
    text-align: end;
}

.textbox-width {
    width: 400px;
}

.surveysampleswidth {
    min-width: 250px;
}

.left20 {
    padding-left: 20px;
}

.titlecol {
    width: 30%;
    padding-bottom: 5px;
}

.datacol {
    width: 70%;
    padding-bottom: 5px;
}


.checkbox {
    cursor: pointer;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    z-index: 1;
    margin: 0;
    zoom: 1;
    filter: alpha(opacity=0);
}

.uneditable {
    border: none;
    background: fixed;
}

.nomarginleft {
    margin-left: 0rem !important;
}

.nopaddingleft {
    padding-left: 0rem !important;
}

/*Kendo grid header*/
.k-grid .k-grid-header .k-header .k-link {
    height: auto;
}

.k-grid .k-grid-header .k-header {
    white-space: normal;
}

.k-grid-save-changes {
    color: #fff !important;
    background-color: #007bff !important;
    border-color: #007bff !important;
}

.k-tooltip-error .k-callout {
    color: #dc3545;
    position: absolute;
    left: 10px;
}
/*ched details template*/

#detailsModal dl {
    margin-bottom: 0 !important;
}

.k-grid td, .k-grid th {
    text-overflow: inherit !important;
    word-wrap: break-word !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.k-pager-numbers .k-link:not(.k-state-selected) {
    color: #19315a !important
}

li .k-state-selected {
    color: #fff !important;
    background-color: #287ea5 !important;
    border-color: #287ea5 !important;
}

.detailsModalTrigger, .nonPreNotifiedModalTrigger {
    text-decoration: underline;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.assignDocCheckButton {
    border: none;
    background: transparent;
}

/* all pages */

#close-shared-modal {
    margin: 20px 0px 0px 150px;
}

#modal-close-prompt-div {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 70px;
}

#release-modal-close-prompt-div {
    display: flex;
    justify-content: center;
    align-items: center;
}

#closeModalOkButton, #deletionPromptOkButton, #addDuplicateVehicleButton {
    margin-right: 5px;
}

.underline {
    text-decoration: underline !important;
}

/* collapsable button */
.collapsible {
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border-style: solid;
    border-color: #ffffff;
    border-width: thin;
    text-align: left;
    outline: none;
    font-size: 15px;
    border-radius: 5px;
    font-weight: bold;
}

.collapsible:hover {
    border-color: #A9A9A9;
}

.collapsible.active:after {
    content: "\2212" !important;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.collapsible:after {
    content: '\002B' !important;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.k-grid table tr:hover td {
    background: rgb(163, 218, 255) !important;
}

.pointer {
    cursor: pointer;
}

.bold {
    font-weight: bold;
}

.registration-ui {
    background: linear-gradient(to bottom, #f8d038 0%,#f5ca2e 100%);
    padding: .25em 1em .25em 1.75em;
    font-weight: bold;
    font-size: 2em;
    border-radius: 5px;
    border: 1px solid #000;
    box-shadow: 1px 1px 1px #ddd;
    position: relative;
    font-family: helvetica, ariel, sans-serif;
    cursor: pointer;
}

    .registration-ui:before {
        content: 'CHIP';
        display: block;
        width: 30px;
        height: 100%;
        background: #063298;
        position: absolute;
        top: 0;
        border-radius: 5px 0 0 5px;
        color: #f8d038;
        font-size: .3em;
        line-height: 85px;
        padding-left: 5px;
    }

    .registration-ui:after {
        content: '';
        display: block;
        position: absolute;
        top: 7px;
        left: 5px;
        width: 20px;
        height: 20px;
        border-radius: 30px;
        border: 1px dashed #f8d038;
    }

.vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* menu */
.dropdown-menu {
    box-shadow: 1px 1px 1px 1px #888888;
}

/*Conversation*/

.conversationClosed {
    padding: 5px;
}
.responseCard {
    display:none;
}

#duplicate-vehicle-prompt-div {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 50px;
}

.transparent{
    opacity: 0;
}

.hidden { display:none !important; }

.k-grid .k-column-title {
    white-space: normal;
}

/* for for a Kendo UI issue logged here: https://github.com/telerik/kendo-ui-core/issues/7284*/
.k-upload input[type=file], /* FF, IE7+, chrome (except button) */
.k-upload input[type=file]::-webkit-file-upload-button { /* chromes and blink button */
    cursor: pointer;
}

/* spacing fix for the result dropdown. Include in Div so it doesn't clash with the dropdowns on the home page and search page*/
#QuickSearchBox_listbox .k-list-item {
    padding-block: 10px !important;
    padding-left: 1rem;
}

.k-list-content {
    overflow: auto !important
}

.required-label::after {
    content: " *";
    color: red;
    font-weight: 100;
}

.field-validation-error, .validation-summary-errors {
    color: red;
}

.important-message {
    border: 1px solid #0070c0; /* Border color matches the blue header */
    border-left: 5px solid #0070c0; /* Thicker left border for emphasis */
    padding: 0; /* Padding inside the box */
    background-color: #f9f9f9; /* Light background for better contrast */
    margin: 20px 0; /* Spacing above and below the message */
}

    .important-message > strong:first-child  {
        display: block; /* Ensures "Important" is on its own line */
        background-color: #0070c0; /* Blue background */
        color: #fff; /* White text color */
        padding: 5px 10px; /* Padding inside the "Important" header */
        font-size: 1.1em; /* Slightly larger text for emphasis */
        margin-bottom: 10px; /* Spacing between header and the text */
    }

    .important-message p {
        margin: 0; /* Removes default paragraph margin */
        color: #333; /* Dark text color for readability */
        font-size: 0.95em; /* Slightly smaller text */
        padding: 0 10px;
    }