@charset "utf-8";
/* CSS Document */

/*i{ margin-right: 10px;} */


.img_thumbnail {
	width: 100%;	
	margin-bottom:10px; 
	border-radius:10px;
}
.img_profile {
	width: 170px;
	height: 200px;
	margin-bottom:10px; 
	border-radius:10px;
}
.mb-10 {
	margin-bottom: 10px;
}
.limited-title {
   overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: calc(15ch + 1em); /* Assuming average character width is 1em */
}
.limited-text {
   overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: calc(40ch + 1em); /* Assuming average character width is 1em */
}

.limited-text-1 {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limit the number of lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

:root,
body[data-primary] {
    --primary: #d70000;
    --primary-light: #ff6b6b;
    --primary-hover: #b40000;
    --primary-dark: #760000;
    --rgba-primary-1: rgba(215, 0, 0, 0.08);
    --rgba-primary-2: rgba(215, 0, 0, 0.16);
    --rgba-primary-3: rgba(215, 0, 0, 0.24);
    --rgba-primary-4: rgba(215, 0, 0, 0.32);
    --rgba-primary-5: rgba(215, 0, 0, 0.4);
    --rgba-primary-6: rgba(215, 0, 0, 0.52);
    --rgba-primary-7: rgba(215, 0, 0, 0.64);
    --rgba-primary-8: rgba(215, 0, 0, 0.76);
    --rgba-primary-9: rgba(215, 0, 0, 0.88);
    --bs-primary: #d70000;
    --bs-primary-rgb: 215, 0, 0;
    --bs-link-color: #d70000;
    --bs-link-color-rgb: 215, 0, 0;
    --bs-link-hover-color: #9f0000;
    --bs-link-hover-color-rgb: 159, 0, 0;
    --bs-focus-ring-color: rgba(215, 0, 0, 0.24);
    --tryal-gradient: linear-gradient(135deg, #d70000 0%, #8b0000 100%);
    --body-bg: #fff7f7;
    --headerbg: #fff7f7;
    --nav-headbg: #fff1f1;
    --sidebar-bg: #ffffff;
}

body[data-theme-version="light"] {
    --body-bg: #fff7f7;
    --headerbg: #fff7f7;
    --nav-headbg: #fff1f1;
    --sidebar-bg: #ffffff;
}

body[data-theme-version="dark"] {
    --primary: #ff3b3b;
    --primary-hover: #ff6262;
    --primary-dark: #8a0000;
    --rgba-primary-1: rgba(255, 59, 59, 0.1);
    --rgba-primary-2: rgba(255, 59, 59, 0.2);
    --rgba-primary-3: rgba(255, 59, 59, 0.3);
    --rgba-primary-4: rgba(255, 59, 59, 0.4);
    --rgba-primary-5: rgba(255, 59, 59, 0.5);
    --rgba-primary-6: rgba(255, 59, 59, 0.6);
    --rgba-primary-7: rgba(255, 59, 59, 0.7);
    --rgba-primary-8: rgba(255, 59, 59, 0.8);
    --rgba-primary-9: rgba(255, 59, 59, 0.9);
}

.tryal-gradient {
    background: var(--tryal-gradient) !important;
}

.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

.btn-primary:focus {
    box-shadow: 0 0 0 0.25rem var(--rgba-primary-3) !important;
}

.content-body.default-height .btn-info,
.modal .btn-info {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

.content-body.default-height .btn-info:hover,
.content-body.default-height .btn-info:focus,
.modal .btn-info:hover,
.modal .btn-info:focus {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

body.role-manager a[href^="del-"],
body.role-company a[href^="del-"],
body.role-manager a[href*="/del-"],
body.role-company a[href*="/del-"],
body.role-manager .btn-danger,
body.role-company .btn-danger {
    display: none !important;
}

.user-permission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.user-permission-option {
    border: 1px solid rgba(215, 0, 0, 0.12);
    border-radius: 8px;
    padding: 14px;
    background: #ffffff;
    min-height: 88px;
}

.user-permission-option .form-check {
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.user-role-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(215, 0, 0, 0.09);
    color: var(--primary);
}

.user-role-badge.manager {
    background: rgba(37, 99, 235, 0.09);
    color: #2563eb;
}

.user-role-badge.company {
    background: rgba(18, 131, 82, 0.1);
    color: #128352;
}

.company-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.company-category-list span {
    border-radius: 999px;
    padding: 5px 10px;
    background: rgba(215, 0, 0, 0.08);
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
}

.city-page .container-fluid {
    max-width: 1500px;
}

.content-body.default-height > .container-fluid {
    max-width: 1500px;
}

.content-body.default-height .page-titles {
    margin-bottom: 1rem;
    padding: 0.95rem 1.1rem;
    background: #fff;
    border: 1px solid #f2dcdc;
    border-left: 4px solid var(--primary);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(31, 41, 55, 0.045);
}

.content-body.default-height .breadcrumb {
    margin: 0;
}

.content-body.default-height .breadcrumb a {
    font-weight: 700;
}

.content-body.default-height .card {
    overflow: hidden;
    border: 1px solid #efdddd;
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(31, 41, 55, 0.06);
}

.content-body.default-height .card-header {
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.35rem;
    background: #fff;
    border-bottom: 1px solid #f3e4e4;
}

.content-body.default-height .card-header .card-title {
    position: relative;
    margin: 0;
    padding-left: 0.9rem;
    color: #1f2937;
    font-weight: 800;
    letter-spacing: 0;
}

.content-body.default-height .card-header .card-title:before {
    position: absolute;
    top: 0.12rem;
    bottom: 0.12rem;
    left: 0;
    width: 0.25rem;
    content: "";
    background: var(--primary);
    border-radius: 999px;
}

.content-body.default-height .card-header .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin-bottom: 0 !important;
    white-space: nowrap;
}

.content-body.default-height .card-body {
    padding: 1rem 1.35rem 1.35rem;
}

.content-body.default-height table.display {
    color: #344054;
}

.content-body.default-height table.display thead th {
    padding: 1rem 0.85rem;
    background: #fff7f7;
    color: #475467;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
    border-bottom: 1px solid #eed8d8;
}

.content-body.default-height table.display tbody td {
    vertical-align: middle;
    padding: 0.95rem 0.85rem;
    border-color: #f0e7e7;
}

.content-body.default-height table.display tbody tr {
    transition: background-color 0.2s ease;
}

.content-body.default-height table.display tbody tr:hover {
    background: #fffafa;
}

.content-body.default-height table.display tbody img {
    width: 4.5rem;
    height: 3.5rem;
    object-fit: cover;
    border: 1px solid #eedede;
    border-radius: 8px;
    background: #fff7f7;
}

.content-body.default-height table.display tbody h4,
.content-body.default-height table.display tbody .h4 {
    margin: 0;
    color: #344054;
    font-size: 0.95rem;
    font-weight: 800;
}

.content-body.default-height .dataTables_wrapper .dataTables_filter input,
.content-body.default-height .dataTables_wrapper .dataTables_length select {
    border: 1px solid #eddada;
    border-radius: 8px;
    min-height: 2.45rem;
}

.content-body.default-height .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.content-body.default-height .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #fff !important;
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    border-radius: 8px;
}

.content-body.default-height .card-tabs {
    margin-bottom: 1rem;
    border-bottom: 1px solid #f0dfdf;
}

.content-body.default-height .card-tabs .nav-tabs {
    gap: 0.5rem;
    margin-bottom: 0 !important;
    border-bottom: 0;
}

.content-body.default-height .card-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.75rem 0.95rem;
    color: #667085;
    border: 0;
    border-radius: 8px 8px 0 0;
    font-weight: 800;
}

.content-body.default-height .card-tabs .nav-link.active {
    color: var(--primary);
    background: var(--rgba-primary-1);
}

.content-body.default-height .tab-content {
    padding-top: 0.25rem;
}

.content-body.default-height .form-validation > form > .row {
    gap: 1rem 0;
}

.content-body.default-height .form-validation .mb-3.row,
.modal .form-validation .mb-3.row {
    margin-bottom: 1rem !important;
}

.content-body.default-height .form-validation .mb-3.row > label.col-form-label,
.modal .form-validation .mb-3.row > label.col-form-label {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    margin-bottom: 0.45rem;
    padding-top: 0;
    color: #344054;
    font-weight: 800;
}

.content-body.default-height .form-validation .mb-3.row > label.col-form-label + div,
.modal .form-validation .mb-3.row > label.col-form-label + div {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}

.content-body.default-height .form-validation h3,
.modal .form-validation h3 {
    margin: 0 0 1rem;
    color: #1f2937;
    font-size: 1rem;
    font-weight: 800;
}

.content-body.default-height .form-check,
.modal .form-check {
    min-height: 2.8rem;
    padding: 0.75rem 0.85rem 0.75rem 2.4rem;
    background: #fffafa;
    border: 1px solid #f0dfdf;
    border-radius: 8px;
}

.content-body.default-height .form-check-input,
.modal .form-check-input {
    border-color: #d9b8b8;
}

.content-body.default-height .form-check-input:checked,
.modal .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.content-body.default-height .form-check-label,
.modal .form-check-label {
    color: #344054;
    font-weight: 700;
}

.content-body.default-height .img_thumbnail,
.content-body.default-height .tab-pane img:not(.logo-abbr) {
    object-fit: cover;
    border: 1px solid #eedede;
    border-radius: 8px;
    background: #fff7f7;
}

.content-body.default-height .tab-pane form .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.modal .modal-dialog {
    max-width: min(1120px, calc(100% - 2rem));
}

.modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(31, 41, 55, 0.22);
}

.modal .modal-header,
.modal .modal-footer {
    border-color: #f0dede;
    background: #fffafa;
}

.modal .modal-header {
    padding: 1.2rem 1.35rem;
}

.modal .modal-title {
    margin: 0;
    color: #1f2937;
    font-weight: 800;
    letter-spacing: 0;
}

.modal .modal-body {
    padding: 1.35rem;
}

.modal .modal-footer {
    padding: 1rem 1.35rem;
}

.modal .form-validation > form > .row > [class*="col-xl"] {
    min-width: 0;
    padding: 1.15rem;
    background: #fff;
    border: 1px solid #f0dfdf;
    border-radius: 8px;
}

.modal .form-control,
.modal .bootstrap-select .btn,
.content-body.default-height .form-validation .form-control,
.content-body.default-height .form-validation .bootstrap-select .btn {
    border-color: #ead9d9 !important;
    border-radius: 8px !important;
}

.modal textarea.form-control,
.content-body.default-height .form-validation textarea.form-control {
    height: auto;
    min-height: 7rem;
    resize: vertical;
}

.btn-instagram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    color: var(--primary) !important;
    background: var(--rgba-primary-1) !important;
    border: 1px solid var(--rgba-primary-2) !important;
}

.btn-instagram:hover,
.btn-instagram:focus {
    color: #fff !important;
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

.content-body.default-height .d-flex > .btn.btn-xs.sharp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.city-page-titles {
    margin-bottom: 1rem;
}

.city-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1.35rem;
    background: #fff;
    border: 1px solid #f2dcdc;
    border-left: 4px solid var(--primary);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(31, 41, 55, 0.06);
}

.city-page-head h2,
.city-panel-header h4,
.city-detail-hero h2,
.city-thumbnail-copy h5 {
    margin: 0;
    color: #1f2937;
    font-weight: 700;
    letter-spacing: 0;
}

.city-page-head h2 {
    font-size: 1.8rem;
    line-height: 1.2;
}

.city-page-head p {
    margin: 0.35rem 0 0;
    color: #6b7280;
    max-width: 42rem;
}

.city-eyebrow {
    display: inline-flex;
    align-items: center;
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: uppercase;
}

.city-add-btn {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.city-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.city-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 5.25rem;
    padding: 1rem 1.15rem;
    background: #fff;
    border: 1px solid #f1dfdf;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(31, 41, 55, 0.045);
}

.city-stat span {
    color: #6b7280;
    font-weight: 600;
}

.city-stat strong {
    color: var(--primary);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
}

.city-panel,
.city-detail-shell,
.city-empty-state {
    background: #fff;
    border: 1px solid #efdddd;
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(31, 41, 55, 0.06);
}

.city-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.35rem;
    border-bottom: 1px solid #f3e4e4;
}

.city-panel-body {
    padding: 1rem 1.35rem 1.35rem;
}

.city-table {
    color: #344054;
}

.city-table thead th {
    padding: 1rem 0.85rem;
    background: #fff7f7;
    color: #475467;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
    border-bottom: 1px solid #eed8d8;
}

.city-table tbody td {
    vertical-align: middle;
    padding: 0.95rem 0.85rem;
    border-color: #f0e7e7;
}

.city-table tbody tr {
    transition: background-color 0.2s ease;
}

.city-table tbody tr:hover {
    background: #fffafa;
}

.city-destination-cell {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 15rem;
}

.city-thumb {
    width: 4.5rem;
    height: 3.5rem;
    flex: 0 0 4.5rem;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #eedede;
    background: #fff7f7;
}

.city-destination-cell h6 {
    margin: 0;
    color: #1f2937;
    font-weight: 700;
}

.city-destination-cell span,
.city-muted {
    color: #98a2b3;
    font-size: 0.78rem;
    font-weight: 600;
}

.city-country-chip,
.city-coordinate {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 100%;
    padding: 0.42rem 0.7rem;
    color: #344054;
    background: #f9fafb;
    border: 1px solid #edf0f2;
    border-radius: 8px;
    font-weight: 700;
}

.city-country-chip i {
    color: var(--primary);
}

.city-description {
    display: -webkit-box;
    max-width: 25rem;
    margin: 0;
    color: #667085;
    line-height: 1.55;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.city-action-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.city-panel .dataTables_wrapper .dataTables_filter input,
.city-panel .dataTables_wrapper .dataTables_length select {
    border: 1px solid #eddada;
    border-radius: 8px;
    min-height: 2.45rem;
}

.city-panel .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.city-panel .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #fff !important;
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    border-radius: 8px;
}

.city-modal {
    overflow: hidden;
    border: 0;
    border-radius: 8px;
}

.city-modal-header,
.city-modal-footer {
    border-color: #f0dede;
    background: #fffafa;
}

.city-modal-header {
    padding: 1.2rem 1.35rem;
}

.city-modal-header .modal-title {
    margin: 0.2rem 0 0;
    color: #1f2937;
    font-weight: 800;
}

.city-modal .modal-body {
    padding: 1.35rem;
}

.city-modal-footer {
    padding: 1rem 1.35rem;
}

.city-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.city-form-section {
    min-width: 0;
    padding: 1.15rem;
    background: #fff;
    border: 1px solid #f0dfdf;
    border-radius: 8px;
}

.city-section-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.city-section-heading i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.55rem;
    height: 2.55rem;
    flex: 0 0 2.55rem;
    color: var(--primary);
    background: var(--rgba-primary-1);
    border-radius: 8px;
}

.city-section-heading h6 {
    margin: 0;
    color: #1f2937;
    font-weight: 800;
}

.city-section-heading span {
    display: block;
    color: #98a2b3;
    font-size: 0.78rem;
    font-weight: 600;
}

.city-form .form-label {
    margin-bottom: 0.45rem;
    color: #344054;
    font-weight: 700;
}

.city-form .form-control,
.city-form .bootstrap-select .btn {
    border-color: #ead9d9 !important;
    border-radius: 8px !important;
}

.city-form .form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.2rem var(--rgba-primary-2);
}

.city-form textarea.form-control {
    height: auto;
    min-height: 7rem;
    resize: vertical;
}

.city-form .city-textarea-lg {
    min-height: 10rem;
}

.city-form .bootstrap-select {
    width: 100% !important;
}

.city-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f0dfdf;
}

.city-detail-hero {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1rem;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #f0dfdf;
    border-left: 4px solid var(--primary);
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(31, 41, 55, 0.06);
}

.city-detail-hero-media img {
    width: 11rem;
    height: 8.25rem;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #eedede;
    background: #fff7f7;
}

.city-breadcrumb {
    margin-bottom: 0.6rem;
}

.city-detail-hero h2 {
    margin-top: 0.15rem;
    font-size: 1.8rem;
    line-height: 1.2;
}

.city-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.75rem;
}

.city-meta-row span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.7rem;
    color: #344054;
    background: #f9fafb;
    border: 1px solid #edf0f2;
    border-radius: 8px;
    font-weight: 700;
}

.city-meta-row i {
    color: var(--primary);
}

.city-detail-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.city-detail-shell {
    padding: 1rem;
}

.city-tabs-wrap {
    margin-bottom: 1rem;
    border-bottom: 1px solid #f0dfdf;
}

.city-tabs {
    gap: 0.5rem;
    border-bottom: 0;
}

.city-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.75rem 0.95rem;
    color: #667085;
    border: 0;
    border-radius: 8px 8px 0 0;
    font-weight: 800;
}

.city-tabs .nav-link.active {
    color: var(--primary);
    background: var(--rgba-primary-1);
}

.city-tab-content {
    padding-top: 0.25rem;
}

.city-edit-panel {
    padding: 0;
}

.city-thumbnail-panel {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr) minmax(17rem, 24rem);
    align-items: center;
    gap: 1rem;
    padding: 1.15rem;
    border: 1px solid #f0dfdf;
    border-radius: 8px;
    background: #fffafa;
}

.city-thumbnail-preview img {
    width: 13rem;
    height: 9rem;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #eddada;
    background: #fff;
}

.city-thumbnail-copy p {
    margin: 0.4rem 0 0;
    color: #667085;
}

.city-thumbnail-control {
    display: grid;
    gap: 0.75rem;
}

.city-detail-shell #gallery .col-xl-3 > .mb-3 {
    height: 100%;
    padding: 0.9rem;
    background: #fffafa;
    border: 1px solid #f0dfdf;
    border-radius: 8px;
}

.city-detail-shell #gallery .img_thumbnail {
    width: 100%;
    height: 9.5rem;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #eddada;
}

.city-detail-shell #gallery form .form-control {
    margin-bottom: 0.65rem;
}

.city-detail-shell #gallery form .btn {
    width: 100%;
}

.city-empty-state {
    max-width: 34rem;
    margin: 3rem auto;
    padding: 2rem;
    text-align: center;
}

.city-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 1rem;
    color: var(--primary);
    background: var(--rgba-primary-1);
    border-radius: 8px;
}

.city-empty-state h4 {
    color: #1f2937;
    font-weight: 800;
}

.city-empty-state p {
    color: #667085;
}

body[data-theme-version="dark"] .city-page-head,
body[data-theme-version="dark"] .content-body.default-height .page-titles,
body[data-theme-version="dark"] .content-body.default-height .card,
body[data-theme-version="dark"] .content-body.default-height .card-header,
body[data-theme-version="dark"] .city-stat,
body[data-theme-version="dark"] .city-panel,
body[data-theme-version="dark"] .city-detail-hero,
body[data-theme-version="dark"] .city-detail-shell,
body[data-theme-version="dark"] .city-form-section,
body[data-theme-version="dark"] .city-empty-state,
body[data-theme-version="dark"] .modal .form-validation > form > .row > [class*="col-xl"] {
    background: #202020;
    border-color: #2b2b2b;
    box-shadow: none;
}

body[data-theme-version="dark"] .content-body.default-height .card-body,
body[data-theme-version="dark"] .city-modal-header,
body[data-theme-version="dark"] .city-modal-footer,
body[data-theme-version="dark"] .modal .modal-header,
body[data-theme-version="dark"] .modal .modal-footer,
body[data-theme-version="dark"] .city-thumbnail-panel,
body[data-theme-version="dark"] .city-detail-shell #gallery .col-xl-3 > .mb-3,
body[data-theme-version="dark"] .city-table thead th,
body[data-theme-version="dark"] .content-body.default-height table.display thead th,
body[data-theme-version="dark"] .content-body.default-height .form-check,
body[data-theme-version="dark"] .modal .form-check {
    background: #161717;
    border-color: #2b2b2b;
}

body[data-theme-version="dark"] .city-page-head h2,
body[data-theme-version="dark"] .content-body.default-height .card-header .card-title,
body[data-theme-version="dark"] .content-body.default-height .form-validation h3,
body[data-theme-version="dark"] .modal .form-validation h3,
body[data-theme-version="dark"] .modal .modal-title,
body[data-theme-version="dark"] .city-panel-header h4,
body[data-theme-version="dark"] .city-detail-hero h2,
body[data-theme-version="dark"] .city-thumbnail-copy h5,
body[data-theme-version="dark"] .city-section-heading h6,
body[data-theme-version="dark"] .city-destination-cell h6,
body[data-theme-version="dark"] .city-empty-state h4 {
    color: #fff;
}

body[data-theme-version="dark"] .content-body.default-height table.display tbody tr:hover {
    background: rgba(255, 59, 59, 0.06);
}

body[data-theme-version="dark"] .content-body.default-height table.display tbody td,
body[data-theme-version="dark"] .content-body.default-height .card-tabs,
body[data-theme-version="dark"] .city-panel-header,
body[data-theme-version="dark"] .city-tabs-wrap,
body[data-theme-version="dark"] .city-form-actions {
    border-color: #2b2b2b;
}

body[data-theme-version="dark"] .content-body.default-height table.display tbody h4,
body[data-theme-version="dark"] .content-body.default-height table.display tbody .h4,
body[data-theme-version="dark"] .content-body.default-height .form-validation .mb-3.row > label.col-form-label,
body[data-theme-version="dark"] .modal .form-validation .mb-3.row > label.col-form-label,
body[data-theme-version="dark"] .content-body.default-height .form-check-label,
body[data-theme-version="dark"] .modal .form-check-label {
    color: #e5e7eb;
}

body[data-theme-version="dark"] .city-country-chip,
body[data-theme-version="dark"] .city-coordinate,
body[data-theme-version="dark"] .city-meta-row span {
    background: #161717;
    border-color: #2b2b2b;
    color: #e5e7eb;
}

body[data-theme-version="dark"] .city-table tbody tr:hover {
    background: rgba(255, 59, 59, 0.06);
}

@media only screen and (max-width: 87.5rem) {
    .city-detail-hero {
        grid-template-columns: 9rem minmax(0, 1fr);
    }

    .city-detail-hero-media img {
        width: 9rem;
        height: 7rem;
    }

    .city-detail-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media only screen and (max-width: 61.9375rem) {
    .city-page-head,
    .city-detail-hero {
        align-items: flex-start;
    }

    .city-page-head,
    .city-detail-hero,
    .city-thumbnail-panel {
        display: flex;
        flex-direction: column;
    }

    .city-stat-grid,
    .city-form-grid {
        grid-template-columns: 1fr;
    }

    .city-thumbnail-preview img {
        width: 100%;
        height: 12rem;
    }

    .city-thumbnail-control {
        width: 100%;
    }
}

@media only screen and (max-width: 35.9375rem) {
    .city-page-head,
    .city-panel-header,
    .city-panel-body,
    .city-detail-hero,
    .city-detail-shell,
    .city-modal .modal-body,
    .city-modal-header,
    .city-modal-footer {
        padding: 1rem;
    }

    .city-form-actions,
    .city-modal-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .city-form-actions .btn,
    .city-modal-footer .btn,
    .city-add-btn {
        width: 100%;
        justify-content: center;
    }
}