@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


body {
    background-color: #1a202a;
    font-family: "Montserrat", sans-serif;
    font-size:11px;
    font-weight:400;
    letter-spacing:0px
}

.bg-dark {
    --bs-bg-opacity: 1;
    background-color: #282c3a !important;
}

.nav-link {
    font-size: 14px;
}

.navbar {position: fixed;
    width: 100%;
    top: 0;
    left: 0px;
    border-bottom: 1px solid #1a202a;
    z-index:200;
    padding:4px 0px
}

@media (min-width: 1400px) {
    .navbar-expand-lg {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
    }
}
body {margin-top: 90px;}

main {
    min-height: calc(100vh - 140px);
}

.page-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.footer {
    margin-top: 40px;
    padding: 15px;
    background: #282c3a !important;
    color: #ffffff;
    text-align: center;
}

.form-label {
    margin-bottom: .5rem;
    font-size:12px;
    font-weight:500;
    color:#a4b1be;
    letter-spacing:0px}

.h1, h1 {
    font-size:22px;
    color: #fff;
    font-weight:500;
    text-transform:uppercase
}

.h2, h2 {
    font-size:22px;
    color: #fff;
    font-weight:500;
    text-transform:uppercase
}

.form-select {
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    background-color: #282c3a;
    color:#fff;
    border:1px solid #3c4461 !important
}

.form-select {
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    background-color: #373d51 !important;
    color:#fff;
    border:1px solid #3c4461 !important
}

.form-control {
    background-color: #373d51 !important;
    color:#fff;
    border:1px solid #3c4461 !important
}

input[readonly], textarea[readonly] {
    background-color: #1a202a !important;
    color: #697179 !important;
    border: 1px solid #3c4461 !important;
    font-weight: 500;
    cursor: default;
}

input[readonly]:focus,textarea[readonly]:focus{background-color: #1a202a;
    color: #a4b1be;
    border: 1px solid #3c4461;}

.form-control:focus, .form-select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    background-color: #282c3a;
    color:#fff;
    border:1px solid #3c4461 !important
}
/* Dropdown fields */
.form-select,
select.form-control {
    cursor: pointer;
}

.form-select:focus,
select.form-control:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.form-control,
.form-select {
    border-radius: 6px;
    transition: all .15s ease-in-out;
}

.form-select {
    background-color: #282c3a;
    color: #fff;
    border: 1px solid #3c4461 !important;

    /* Custom arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23a4b1be' d='M3.2 5.5 8 10.3l4.8-4.8'/%3E%3C/svg%3E");
    background-size: 14px;
}

.form-select:hover {
    border-color: #0d6efd !important;
}

/* Rotate arrow on focus */
.form-select:focus {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 0.2rem rgba(13,110,253,.25);
}
.form-select option {
    background-color: #282c3a;
    color: #fff;
    padding: 8px;
}

.form-select option:checked {
    background: #0d6efd;
    color: #fff;
}

.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
    background: #282c3a;
    border: 1px solid #3c4461;
    color: #fff;
    min-height: 38px;
}

.ts-control input {
    color: #fff !important;
}

.ts-dropdown {
    background: #282c3a;
    border: 1px solid #3c4461;
}

.ts-dropdown .option {
    color: #fff;
    padding: 10px;
}

.ts-dropdown .option:hover,
.ts-dropdown .active {
    background: #0d6efd;
    color: #fff;
}

.ts-wrapper.focus .ts-control {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13,110,253,.25);
}

.ts-wrapper.multi .item {
    background: #0d6efd;
    color: #fff;
    border: none;
}
/* Date / Time picker icon */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.8;
    filter: invert(1);
    transition: all 0.2s ease;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    transform: scale(1.1);
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.8;
    filter: invert(1);
    transition: all 0.2s ease;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    transform: scale(1.1);
}

.ts-control input::placeholder {color: #6c757d !important;opacity: 1;}


.btn-outline-secondary{font-size:12px;color:#6c757d}
.btn-outline-secondary:hover {font-size:12px;color:#a4b1be;border: 1px solid #a4b1be;
    background:none}

.patrol-type-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

@media (min-width: 800px) {
    .patrol-type-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1000px) {
    .patrol-type-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.patrol-type-btn {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #282c3a, #1a202a);
    border: 1px solid #3c4461;
    color: #a4b1be;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
    box-shadow: 0 4px 10px rgba(0,0,0,.25);
    transition: all .18s ease-in-out;
    font-size: 13px;
}

.icon-circle {
    width: 100px;
    height: 100px;
    border-radius: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    font-size: 15px;
    border:1px solid #3c4461;
    background:#1a202a
}

.icon-circle i {
    color: #a4b1be;
    font-size: 45px;
}


/* Patrol Types */
.vehicle {

}

.foot {

}

.bicycle {

}

.sector {

}

.operation {

}

.response {

}

.other {

}

.ts-wrapper.multi .ts-control>div {
    background: #0e58c6;
    border: 1px solid #3c4461;
    color: #dee2e6;
    cursor: pointer;
    margin: 0 3px 3px 0;
    padding: 3px 8px;
}

.h4, h4 { color: #a4b1be;
    font-size:16px}

.h5, h5 {
    font-size: 16px;
    color: #fff;
    border-bottom: 1px solid #3c4461;
    padding: 5px 0px;
}

.page-card {
    background: #282c3a;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    border:2px solid #3c4461 !important
}

#topKmList{color:#fff;
    font-size:15px}

#topTimeList{color:#fff;
    font-size:15px}

.ow-heading3-blue
{color:#198754;
    font-size:14px}
.ow-heading3-green
{color:#0d6efd;
    font-size:14px}

#dateRange {
    font-size: 17px;
    color: #fff;
    font-weight: 300;
    margin-bottom: 6px;
    border-bottom: 1px solid #3c4461;
    padding: 5px 0px;
}

.me-2 {
    margin-right: .5rem !important;
    font-size: 15px;
}

.bi-play-fill{font-size:18px !important}

.ow-bt-red {
    background: linear-gradient(180deg, #ea5455 0%, #c62828 100%);
    border: 1px solid #a61e1e;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 24px;
    border-radius: 6px;
    margin-top: 10px;

    box-shadow:
            0 2px 2px #000,
            0 4px 12px rgba(0, 0, 0, 0.50);

    transition: all 0.15s ease;
}

.ow-bt-red:hover {
    background: linear-gradient(180deg, #ff6b6b 0%, #dc3545 100%);
    color: #fff;

    transform: translateY(-1px);

    box-shadow:
            0 0 0 #a61e1e,
            0 0 18px rgba(220, 53, 69, 0.45);
}

.ow-bt-red-sm {
    background: linear-gradient(180deg, #ea5455 0%, #c62828 100%);
    border: 1px solid #a61e1e;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    border-radius: 6px;
    margin-top: 10px;
    font-size: 13px;
    box-shadow:
            0 2px 2px #000,
            0 4px 12px rgba(0, 0, 0, 0.50);

    transition: all 0.15s ease;
}

.ow-bt-red-sm:hover {
    background: linear-gradient(180deg, #ff6b6b 0%, #dc3545 100%);
    color: #fff;

    transform: translateY(-1px);

    box-shadow:
            0 0 0 #a61e1e,
            0 0 18px rgba(220, 53, 69, 0.45);
}

.ow-bt-green {
    background: linear-gradient(180deg, #28c76f 0%, #1f9d55 100%);
    border: 1px solid #1b8a4b;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    padding: 12px 24px;
    border-radius: 6px;
    margin-top: 10px;

    box-shadow:
            0 2px 2px #000,
            0 4px 12px rgba(0, 0, 0, 0.50);

    transition: all 0.15s ease;
}

.ow-bt-green:hover {
    background: linear-gradient(180deg, #31d97b 0%, #22b362 100%);
    color: #fff;

    transform: translateY(-1px);

    box-shadow:
            0 0px 0 #146c3b,
            0 0px 18px rgba(40, 199, 111, 0.35);
}

.ow-bt-orange {
    background: linear-gradient(180deg, #ffc107 0%, #e0a800 100%);
    border: 1px solid #c69500;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 24px;
    border-radius: 6px;
    margin-top: 10px;

    box-shadow:
            0 2px 2px #000,
            0 4px 12px rgba(0, 0, 0, 0.50);

    transition: all 0.15s ease;
}

.ow-bt-orange:hover {
    background: linear-gradient(180deg, #ffcd39 0%, #ffc107 100%);
    color: #ffffff;

    transform: translateY(-1px);

    box-shadow:
            0 0 18px rgba(255, 193, 7, 0.45);
}

.ow-bt-orange-sm {
    background: linear-gradient(180deg, #ffc107 0%, #e0a800 100%);
    border: 1px solid #c69500;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    border-radius: 6px;
    margin-top: 10px;

    box-shadow:
            0 2px 2px #000,
            0 4px 12px rgba(0, 0, 0, 0.50);

    transition: all 0.15s ease;
    font-size: 13px;
}

.ow-bt-orange-sm:hover {
    background: linear-gradient(180deg, #ffcd39 0%, #ffc107 100%);
    color: #ffffff;

    transform: translateY(-1px);

    box-shadow:
            0 0 18px rgba(255, 193, 7, 0.45);
}

.ow-bt-green-sm {
    background: linear-gradient(180deg, #28c76f 0%, #1f9d55 100%);
    border: 1px solid #1b8a4b;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    border-radius: 6px;
    margin-top: 10px;
    box-shadow:
            0 2px 2px #000,
            0 4px 12px rgba(0, 0, 0, 0.50);
    transition: all 0.15s ease;
    font-size: 13px;
}

.ow-bt-green-sm:hover {
    background: linear-gradient(180deg, #31d97b 0%, #22b362 100%);
    color: #fff;

    transform: translateY(-1px);

    box-shadow:
            0 0px 0 #146c3b,
            0 0px 18px rgba(40, 199, 111, 0.35);
}
.ow-bt-blue {
    background: linear-gradient(180deg, #0d6efd 0%, #0a58ca 100%);
    border: 1px solid #084298;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 24px;
    border-radius: 6px;
    margin-top: 10px;

    box-shadow:
            0 2px 2px #000,
            0 4px 12px rgba(0, 0, 0, 0.50);

    transition: all 0.15s ease;
}

.ow-bt-blue:hover {
    background: linear-gradient(180deg, #3d8bfd 0%, #0d6efd 100%);
    color: #fff;

    transform: translateY(-1px);

    box-shadow:
            0 0 18px rgba(13, 110, 253, 0.45);
}

.btn-full-width{width: 100%;}

.ow-bt-dark {
    background: linear-gradient(180deg, #334053 0%, #1b222b 100%);
    border: 1px solid #282b38;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 24px;
    border-radius: 6px;
    margin-top: 10px;

    box-shadow:
            0 2px 2px #000,
            0 4px 12px rgba(0, 0, 0, 0.50);

    transition: all 0.15s ease;
}

.ow-bt-dark:hover {
    background: linear-gradient(180deg,  #334053 0%, #1b222b 100%);
    color: #fff;

    transform: translateY(-1px);

    box-shadow:
            0 0 0 #334053,
            0 0 18px rgb(83 70 71 / 45%);
}

.ow-bt-blue-sm {
    background: linear-gradient(180deg, #0d6efd 0%, #0a58ca 100%);
    border: 1px solid #084298;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    border-radius: 6px;
    margin-bottom: 5px;
    box-shadow:
            0 2px 2px #000,
            0 4px 12px rgba(0, 0, 0, 0.50);
    transition: all 0.15s ease;
    font-size: 13px;
}

.ow-bt-blue-sm:hover {
    background: linear-gradient(180deg, #3d8bfd 0%, #0d6efd 100%);
    color: #fff;

    transform: translateY(-1px);

    box-shadow:
            0 0 18px rgba(13, 110, 253, 0.45);
}


.ow-bt-blue-xs {
    background: linear-gradient(180deg, #0d6efd 0%, #0a58ca 100%);
    border: 1px solid #084298;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    border-radius: 6px;
    margin-bottom: 5px;
    transition: all 0.15s ease;
    font-size: 13px;
}

.ow-bt-blue-xs:hover {
    background: linear-gradient(180deg, #3d8bfd 0%, #0d6efd 100%);
    color: #fff;
    transform: translateY(0px);
    box-shadow:
            0 0 18px rgba(13, 110, 253, 0.45);
}

.form-check-input {
    width: 2em;
    height: 2em;
    margin-top: .25em;
    margin-right: 7px;
    border: 1px solid #3c4461;
}

.form-check-label {
    font-size: 12px;
    font-weight: 500;
    color: #a4b1be;
    letter-spacing: 0px;
    padding-top: 5px;
}

.ow-bt-secondary{
    border: 1px solid #a4b1be;
    color: #a4b1be;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    border-radius: 6px;
    margin-bottom: 5px;
    transition: all 0.15s ease;
    font-size: 13px;
}

.ow-bt-secondary:hover {
    color: #808a95;
    border: 1px solid #808a95;
}

.table-dark {
    --bs-table-color: #fff;
    --bs-table-bg: #1a202a;
    --bs-table-border-color: #4d5154;
    --bs-table-striped-bg: #2c3034;
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: #373b3e;
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: #323539;
    --bs-table-hover-color: #fff;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

.nav-link2 {
    font-size: 14px;
    background: none;
    margin: 0px 5px 0px 0px;
    padding: 7px 10px;
    color: #a4b1be;
    border: 1px solid #a4b1be;
    border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    border-bottom: 0px;
}

.nav-link2.active{background: linear-gradient(180deg, #0d6efd 0%, #0a58ca 100%);
    border: 1px solid #084298;
    color:#fff
}

input::placeholder,textarea::placeholder {color: #969ea6 !important;opacity: 1; /* Ensures Firefox does not fade the color */ font-style: italic;}

.res-name{font-size:17px;
    color:#fff;
    font-weight:700}

.res-detail{font-size:15px;
    color:#d8e6f3}

.res-phone{font-size:15px;
    color:#d8e6f3}

.ice-detail{font-size:15px;
}

.ice-res-heading {font-size:17px;}

.res-count{color:#fff}

.res-buttons .ow-bt-blue-sm {margin: 10px 0px 0px 0px !important}
.res-buttons .ow-bt-secondary {margin: 10px 0px 0px 0px !important}

@media (max-width: 1000px){
    #exportResidentsBtn{display:none}
    #importResidentsBtn{display:none} }

.ow-kms{color:#28c76f}
.ow-hours{color:#ffc107 }

#totalTime{color:#ffc107}
#totalKm{color:#28c76f}

.my-patrols-km {color:#28c76f}
.my-patrols-time {color:#ffc107}

.my-parols{color:#fff;
    font-size:14px}

.my-patrols-heading{font-weight:300;
    font-size:23px}

.my-parols .card-body{font-size:14px}

.members-detail{font-size: 15px;
    color: #d8e6f3;
}

.text-muted {
    color: #ccc !important;
    font-size: 15px
}

.front-logo{
    width: 300px;
    margin-left:auto;
    margin-right:auto;
    padding:20px 0px}

@media (max-width: 370px) {
    .front-logo{
        width: 100%;
        padding:20px 0px}
}

.joinpatrol{
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    border:2px solid #3c4461 !important
}

.joinpatrol div.card-body{font-size:14px}
.joinpatrol .card-header{font-size:15px;background-color: #282c3a !important;color:#fff}
.joinpatrol .card-footer{background-color: #282c3a !important}

.fs-5 {
    font-size: 15px !important;
}

@media (max-width: 520px) {
    .my-profile-page .nav-item{width:100%}
    .nav-link2 {
        width: 100%;
    }
    .user-edit-page .nav-item{width:100%}
}

.ice-members-detail {
    font-size: 15px;
    background: #fff;
}

.edit-patrol-page .ow-bt-blue-sm{margin-top:13px}

@media (max-width: 400px){
    .edit-patrol-page .ow-bt-red-sm {margin-left:-2px !important}}

#userStatusText{border:0px}

@media (max-width: 992px){
.nav-link {
    font-size: 16px;
}
.menu-logout{margin:5px 0px 10px 0px}
}