.ttbm_hotel_lists_wrapper.list-view .ttbm_hotel_lists_card {
display: flex;
flex-direction: column;
}
.ttbm_hotel_lists_wrapper.list-view .ttbm_hotel_location_lists_card {
display: flex;
flex-direction: column;
}
.ttbm_hotel_lists_wrapper.list-view .ttbm_hotel_lists_popular_card {
display: flex;
flex-direction: column;
}
.ttbm_hotel_lists_wrapper.list-view .ttbm_hotel_lists_card_content{
display: flex;
flex-direction: row;
padding: 7px;
}
.ttbm_hotel_lists_wrapper.grid-view  .ttbm_hotel_lists_card_content{
display: block;
}
.ttbm_hotel_inline_booking{
padding: 7px;
}
.ttbm_hotel_inline_booking .booking_form_wrapper h5{
margin:0;
margin-bottom:8px;
}
.ttbm_hotel_inline_booking .ttbm_widget_content{
padding: 0;
}
.mp_tour_ticket_type{
border: 1px solid var(--color_border)  ;
border-radius: 5px;
background-color: #fff;
margin-bottom: 10px;
}
.mp_tour_ticket_item{
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
padding: 10px;
border-bottom: 1px solid #ddd;
}
.mp_tour_ticket_type .mp_tour_ticket_item:last-child {
border: none !important;
}
.ttbm-hotel-room-info h6{
margin: 0;
margin-bottom: 3px;
font-size: 15px;
}
.ttbm-hotel-room-info .seat-count{
background-color: #f3f3f3;
color: #666;
padding: 0 8px;
border-radius:50px;
font-size: 14px;
} .ttbm_hotel_lists_wrapper.grid-view {
display: grid; gap: 20px;
}
.ttbm_hotel_lists_wrapper.grid-view .ttbm_hotel_lists_card {
display: block;
}
.ttbm_hotel_lists_wrapper.grid-view .ttbm_hotel_location_lists_card {
display: block;
}
.ttbm_hotel_lists_wrapper.grid-view .ttbm_hotel_lists_popular_card {
display: block;
}
.ttbm_hotel_lists_wrapper.grid-view .ttbm_hotel_lists_image {
width: 100%;
height: 180px;
}
.ttbm_hotel_lists_wrapper.grid-view .ttbm_hotel_lists_content {
padding: 12px;
}
.ttbm_hotel_lists_card {
display: flex;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
font-family: Arial, sans-serif;
margin: 10px 0;
background: #fff;
}
.ttbm_hotel_location_lists_card {
display: flex;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
font-family: Arial, sans-serif;
margin: 10px 0;
background: #fff;
}
.ttbm_hotel_lists_popular_card {
display: flex;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
font-family: Arial, sans-serif;
margin: 10px 0;
background: #fff;
}
.ttbm_hotel_lists_wrapper.grid-view {
display: grid;
gap: 20px;
}
.ttbm-grid-columns-2 {
grid-template-columns: repeat(2, 1fr);
}
.ttbm-grid-columns-3 {
grid-template-columns: repeat(3, 1fr);
}
.ttbm-grid-columns-4 {
grid-template-columns: repeat(4, 1fr);
}
.ttbm-grid-columns-1 {
grid-template-columns: repeat(1, 1fr);
}
.ttbm_hotel_lists_image {
position: relative;
flex: 0 0 240px;
height: 196px;
overflow: hidden;
}
.ttbm_hotel_lists_image img {
width: 100%;
height: 100% !important;
object-fit: cover;
}
.ttbm_hotel_lists_wishlist {
position: absolute;
top: 8px;
right: 8px;
border: none;
background: #fff;
border-radius: 50%;
padding: 6px 10px;
cursor: pointer;
font-size: 16px;
}
.ttbm_hotel_lists_content {
flex: 1;
padding: 12px 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.ttbm_hotel_lists_header {
display: flex;
justify-content: space-between;
align-items: center;
}
.ttbm_hotel_lists_header .ttbm_hotel_lists_title {
font-size: 18px;
font-weight: bold;
color: #0056b3;
margin: 0;
}
.ttbm_hotel_lists_rating_box {
text-align: right;
}
.ttbm_hotel_lists_rating_text {
display: block;
font-size: 14px;
color: #333;
}
.ttbm_hotel_lists_rating {
display: inline-block;
margin-top: 4px;
background: #003580;
color: #fff;
font-weight: bold;
border-radius: 4px;
padding: 4px 8px;
font-size: 14px;
}
.ttbm_location_separator{
color: #555;
}
.ttbm_hotel_lists_location {
font-size: 14px;
margin: 6px 0;
color: #555;
}
.ttbm_hotel_lists_location a {
color: #0056b3;
text-decoration: none;
}
.ttbm_hotel_lists_offer {
position: relative;
margin: 10px 0;
}
.ttbm_hotel_lists_offer_badge {
background: #28a745;
color: #fff;
padding: 3px 8px;
border-radius: 4px;
font-size: 13px;
cursor: pointer;
}
.ttbm_hotel_lists_offer_tooltip {
display: none;
position: absolute;
top: 28px;
left: 0;
background: #fff;
border: 1px solid #ddd;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
padding: 10px;
border-radius: 6px;
width: 260px;
font-size: 13px;
z-index: 10;
}
.ttbm_hotel_lists_offer:hover .ttbm_hotel_lists_offer_tooltip {
display: block;
}
.ttbm_hotel_lists_footer {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-top: auto;
}
.ttbm_hotel_lists_price_box {
display: flex;
flex-direction: column;
}
.ttbm_hotel_lists_nights {
font-size: 13px;
color: #444;
}
.ttbm_hotel_lists_price {
font-size: 18px;
font-weight: normal;
color: #444444;
}
.ttbm_hotel_lists_note {
font-size: 10px;
color: #888;
}
.ttbm_hotel_lists_button {
background: #0071c2;
color: #fff !important;
padding: 10px 7px;
text-decoration: none;
border-radius: 4px;
font-weight: bold;
font-size: 12px;
}
.ttbm_hotel_lists_button:hover {
background: #005b99;
color: #fff;
}
.ttbm_hotel_lists_room_description {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
color: #555;
} .ttbm_hotel_price_slider {
width: 100%;
font-family: Arial, sans-serif;
text-align: left;
}
.ttbm_hotel_taxonomy_top{
margin-top: 1px;
}
.ttbm_slider_inputs {
position: relative;
height: 40px;
}
.ttbm_slider_inputs input[type=range] {
position: absolute;
left: 0;
top: 15px;
width: 100%;
-webkit-appearance: none;
background: none;
pointer-events: none;
border: unset !important;
}
.ttbm_slider_inputs input[type=range]::-webkit-slider-thumb {
pointer-events: auto;
-webkit-appearance: none;
height: 18px;
width: 18px;
border-radius: 50%;
background: #0073aa;
border: 2px solid #fff;
cursor: pointer;
border: unset !important;
}
.ttbm_hotel_slider_track {
position: relative;
top: 37px;
left: 0;
right: 0;
height: 5px;
background: #ddd;
border-radius: 5px;
}
.ttbm_hotel_slider_track::before {
content: '';
position: absolute;
top: 0;
height: 100%;
background: #0073aa;
border-radius: 5px;
left: 0;
right: 0;
}
.ttbm_hotel_load_more_btn{
display: block;
width: 100%;
padding: 10px !important;
font-size: 16px;
} .ttbm_hotel_search_wrapper {
display: flex;
justify-content: center;
margin: 40px 0;
}
.ttbm_hotel_search_box {
display: flex;
align-items: center;
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
padding: 30px 20px;
gap: 10px;
flex-wrap: wrap; width: 100%;
}
.ttbm_hotel_search_field {
display: flex;
align-items: center;
background: #f9f9f9;
border-radius: 30px;
padding: 10px 15px;
flex: 1;
min-width: 200px;
transition: background 0.3s ease;
}
.ttbm_hotel_search_field:hover {
background: #f1f1f1;
}
.ttbm_hotel_search_icon {
font-size: 18px;
margin-right: 8px;
color: #444;
}
.ttbm_hotel_search_input,
.ttbm_date_input {
border: none;
outline: none;
background: transparent;
font-size: 15px;
width: 100%;
color: #333;
}
.ttbm_hotel_search_btn {
background: #0071c2;
border: none;
color: #fff;
font-size: 16px;
font-weight: 600;
padding: 12px 30px;
border-radius: 30px;
cursor: pointer;
transition: background 0.3s ease;
}
.ttbm_hotel_search_btn:hover {
background: #005fa3;
}
.ttbm_location_wrapper { position: relative; }
.ttbm_location_dropdown {
position: absolute;
top: 50px;
left: 0;
width: 100%;
background: #fff;
border: 1px solid #ddd;
max-height: 200px;
overflow-y: auto;
list-style: none;
margin: 0;
padding: 0;
z-index: 99;
border-radius: 10px;
}
.ttbm_location_dropdown li {
padding: 8px 12px;
cursor: pointer;
}
.ttbm_location_dropdown li:hover {
background: #f0f0f0;
}
.ttbm_available_room{
display: inline-block;
font-weight: 600;
font-size: 13px;
padding: 6px 10px;
border-radius: 999px;
background: linear-gradient(135deg,#1db954,#1aa34a);
color: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,.12);
line-height: 1;
min-width: 36px;
text-align: center;
}
.ttbm_see_available_hotel{
cursor: pointer;
}
.ttbm_hotel_book_cancel_btn{
display: flex;
gap: 10px;
}
@media(max-width: 768px){
.ttbm_hotel_lists_wrapper.grid-view{
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media(max-width: 480px){
.ttbm_hotel_lists_wrapper.grid-view{
grid-template-columns: repeat(1, 1fr) !important;
}
}.ks-portal,
.ks-portal * {
box-sizing: border-box;
}
.ks-portal {
width: 100%;
max-width: 1120px;
margin: 0 auto;
padding: 34px 18px 64px;
color: #172554;
font-family: inherit;
}
.ks-staff-portal {
max-width: 1180px;
} .ks-page-header {
width: 100%;
margin-bottom: 20px;
padding: 26px 28px;
border: 1px solid #e6edf7;
border-radius: 24px;
background: #ffffff;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.045);
}
.ks-page-header--compact {
padding: 22px 26px;
}
.ks-eyebrow {
display: inline-flex;
margin-bottom: 10px;
padding: 6px 10px;
border-radius: 999px;
background: #ecfeff;
color: #0f766e;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.ks-page-header h1 {
margin: 0 0 8px !important;
color: #173b8f !important;
font-size: 34px !important;
line-height: 1.12 !important;
letter-spacing: -0.035em;
}
.ks-page-header p {
max-width: 720px;
margin: 0 !important;
color: #52627f !important;
font-size: 15px !important;
line-height: 1.65 !important;
} .ks-panel {
width: 100%;
padding: 24px;
border: 1px solid #e6edf7;
border-radius: 22px;
background: #ffffff;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.045);
}
.ks-panel + .ks-panel,
.ks-panel + .ks-alert,
.ks-alert + .ks-panel {
margin-top: 16px;
}
.ks-panel-title {
margin-bottom: 16px;
}
.ks-panel-title h3,
.ks-section-head h2,
.ks-panel h2 {
margin: 0 0 6px !important;
color: #173b8f !important;
font-size: 24px !important;
line-height: 1.2 !important;
letter-spacing: -0.025em;
}
.ks-panel-title p,
.ks-section-head p,
.ks-panel p {
margin: 0 !important;
color: #52627f !important;
font-size: 14px !important;
line-height: 1.65 !important;
}
.ks-empty {
color: #64748b !important;
font-size: 14px !important;
} .ks-primary-button,
.ks-danger-button,
.ks-small-button,
.ks-clean-form button {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
text-decoration: none !important;
cursor: pointer;
font-weight: 900;
transition: all 0.18s ease;
}
.ks-primary-button,
.ks-clean-form button {
min-height: 46px;
padding: 12px 18px;
border-radius: 13px;
background: #0f766e;
color: #ffffff !important;
box-shadow: 0 10px 20px rgba(15, 118, 110, 0.16);
}
.ks-primary-button:hover,
.ks-clean-form button:hover {
background: #115e59;
color: #ffffff !important;
}
.ks-danger-button {
width: 100%;
min-height: 44px;
padding: 11px 16px;
border-radius: 13px;
background: #b91c1c;
color: #ffffff !important;
box-shadow: 0 10px 20px rgba(185, 28, 28, 0.12);
}
.ks-danger-button:hover {
background: #991b1b;
color: #ffffff !important;
}
.ks-small-button {
min-height: 34px;
padding: 8px 12px;
border-radius: 999px;
background: #eef2ff;
color: #3730a3 !important;
font-size: 12px;
} .ks-clean-form,
.ks-action-form {
width: 100%;
}
.ks-clean-form label,
.ks-action-form label {
display: block;
margin-bottom: 14px;
}
.ks-clean-form label span,
.ks-action-form label span {
display: block;
margin-bottom: 6px;
color: #1e3a8a;
font-size: 12px;
font-weight: 900;
}
.ks-clean-form input,
.ks-action-form input,
.ks-action-form textarea {
width: 100%;
min-height: 46px;
padding: 11px 13px;
border: 1px solid #d6e0ef;
border-radius: 13px;
background: #ffffff;
color: #0f172a;
font-size: 14px;
box-shadow: none;
}
.ks-action-form textarea {
min-height: 88px;
resize: vertical;
}
.ks-clean-form input:focus,
.ks-action-form input:focus,
.ks-action-form textarea:focus {
outline: none;
border-color: #0f766e;
box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.10);
} .ks-lookup-panel {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(320px, 1.15fr);
gap: 28px;
align-items: start;
}
.ks-panel-copy h2 {
margin: 0 0 8px !important;
color: #173b8f !important;
font-size: 24px !important;
}
.ks-panel-copy p {
color: #52627f !important;
}
.ks-result-panel {
margin-top: 16px;
}
.ks-result-head {
display: flex;
justify-content: space-between;
gap: 18px;
align-items: flex-start;
margin-bottom: 18px;
}
.ks-result-head h2 {
margin: 0 0 8px !important;
color: #173b8f !important;
font-size: 26px !important;
}
.ks-result-status {
flex: 0 0 auto;
} .ks-info-list,
.ks-detail-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.ks-info-list div,
.ks-detail-list div {
min-width: 0;
padding: 13px;
border: 1px solid #edf2f7;
border-radius: 15px;
background: #fbfdff;
}
.ks-info-list span,
.ks-detail-list span {
display: block;
margin-bottom: 5px;
color: #64748b;
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ks-info-list strong,
.ks-detail-list strong {
display: block;
color: #173b8f;
font-size: 14px;
font-weight: 900;
word-break: break-word;
} .ks-steps {
width: 100%;
margin-top: 16px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.ks-step {
padding: 16px;
border: 1px solid #e6edf7;
border-radius: 18px;
background: #ffffff;
}
.ks-step span {
display: inline-flex;
width: 30px;
height: 30px;
margin-bottom: 10px;
align-items: center;
justify-content: center;
border-radius: 999px;
background: #f1f5f9;
color: #64748b;
font-size: 12px;
font-weight: 900;
}
.ks-step strong {
display: block;
margin-bottom: 4px;
color: #173b8f;
font-size: 15px;
}
.ks-step small {
display: block;
color: #64748b;
font-size: 12px;
line-height: 1.45;
}
.ks-step.is-active {
border-color: #99f6e4;
background: #f0fdfa;
}
.ks-step.is-active span {
background: #0f766e;
color: #ffffff;
} .ks-alert {
width: 100%;
margin: 16px 0;
padding: 14px 16px;
border-radius: 16px;
border: 1px solid #e6edf7;
background: #ffffff;
}
.ks-alert strong {
display: block;
margin-bottom: 4px;
color: #173b8f;
}
.ks-alert p {
margin: 0 !important;
color: #52627f !important;
font-size: 14px !important;
}
.ks-alert--success {
border-color: #bbf7d0;
background: #f0fdf4;
}
.ks-alert--danger {
border-color: #fecaca;
background: #fef2f2;
}
.ks-alert--danger strong,
.ks-alert--danger p {
color: #991b1b !important;
}
.ks-alert--soft {
background: #f8fafc;
} .ks-layout {
display: grid;
grid-template-columns: 230px minmax(0, 1fr);
gap: 20px;
align-items: start;
}
.ks-sidebar {
padding: 18px;
border: 1px solid #e6edf7;
border-radius: 22px;
background: #ffffff;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.045);
}
.ks-sidebar-brand {
margin-bottom: 18px;
padding-bottom: 16px;
border-bottom: 1px solid #e6edf7;
}
.ks-sidebar-brand strong {
display: block;
color: #173b8f;
font-size: 17px;
}
.ks-sidebar-brand span {
display: block;
margin-top: 3px;
color: #64748b;
font-size: 13px;
}
.ks-nav a {
display: flex;
align-items: center;
min-height: 42px;
margin-bottom: 6px;
padding: 10px 12px;
border-radius: 13px;
color: #475569 !important;
text-decoration: none !important;
font-size: 14px;
font-weight: 850;
}
.ks-nav a:hover,
.ks-nav a.is-active {
background: #ecfeff;
color: #0f766e !important;
}
.ks-main {
min-width: 0;
}
.ks-section-head {
margin-bottom: 16px;
padding: 20px 22px;
border: 1px solid #e6edf7;
border-radius: 22px;
background: #ffffff;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.045);
} .ks-metric-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-bottom: 16px;
}
.ks-metric-grid--three {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ks-metric-card {
padding: 18px;
border: 1px solid #e6edf7;
border-radius: 18px;
background: #ffffff;
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.035);
}
.ks-metric-card span {
display: block;
margin-bottom: 8px;
color: #64748b;
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ks-metric-card strong {
display: block;
color: #173b8f;
font-size: 30px;
line-height: 1;
}
.ks-metric-card small {
display: block;
margin-top: 8px;
color: #64748b;
font-size: 12px;
} .ks-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 26px;
padding: 5px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 900;
line-height: 1.2;
white-space: nowrap;
}
.ks-badge--neutral {
background: #f8fafc;
color: #475569;
border: 1px solid #e2e8f0;
}
.ks-badge--success {
background: #ecfdf5;
color: #047857;
border: 1px solid #bbf7d0;
}
.ks-badge--info {
background: #eef2ff;
color: #3730a3;
border: 1px solid #c7d2fe;
}
.ks-badge--warning {
background: #fffbeb;
color: #b45309;
border: 1px solid #fde68a;
}
.ks-badge--danger {
background: #fef2f2;
color: #b91c1c;
border: 1px solid #fecaca;
} .ks-filter-bar {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.ks-filter-bar a {
display: inline-flex;
min-height: 36px;
align-items: center;
padding: 8px 13px;
border: 1px solid #e6edf7;
border-radius: 999px;
background: #ffffff;
color: #475569 !important;
text-decoration: none !important;
font-size: 13px;
font-weight: 850;
}
.ks-filter-bar a:hover,
.ks-filter-bar a.is-active {
background: #ecfeff;
color: #0f766e !important;
border-color: #99f6e4;
} .ks-table-wrap {
width: 100%;
overflow-x: auto;
}
.ks-table {
width: 100%;
border-collapse: collapse;
}
.ks-table th {
padding: 12px 10px;
border-bottom: 1px solid #e6edf7;
color: #334155;
font-size: 12px;
font-weight: 900;
text-align: left;
background: #fbfdff;
white-space: nowrap;
}
.ks-table td {
padding: 12px 10px;
border-bottom: 1px solid #eef2f7;
color: #172554;
font-size: 14px;
vertical-align: middle;
}
.ks-table td small {
display: block;
margin-top: 3px;
color: #64748b;
font-size: 12px;
}
.ks-table tr:hover td,
.ks-table tr.is-selected td {
background: #f8fffe;
} .ks-split {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 16px;
align-items: start;
}
.ks-detail-panel {
position: sticky;
top: 18px;
}
.ks-detail-status {
margin-bottom: 14px;
}
.ks-detail-list {
margin-bottom: 16px;
}
.ks-action-area {
display: grid;
gap: 14px;
}
.ks-action-form {
padding: 14px;
border: 1px solid #e6edf7;
border-radius: 16px;
background: #f8fafc;
} @media only screen and (max-width: 1080px) {
.ks-layout {
grid-template-columns: 1fr;
}
.ks-sidebar {
position: static;
}
.ks-nav {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ks-nav a {
margin-bottom: 0;
}
.ks-split {
grid-template-columns: 1fr;
}
.ks-detail-panel {
position: static;
}
}
@media only screen and (max-width: 820px) {
.ks-lookup-panel {
grid-template-columns: 1fr;
}
.ks-metric-grid,
.ks-metric-grid--three {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ks-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ks-result-head {
display: block;
}
.ks-result-status {
margin-top: 12px;
}
}
@media only screen and (max-width: 560px) {
.ks-portal {
padding: 24px 14px 52px;
}
.ks-page-header,
.ks-panel,
.ks-section-head,
.ks-sidebar {
padding: 18px;
border-radius: 18px;
}
.ks-page-header h1 {
font-size: 29px !important;
}
.ks-info-list,
.ks-detail-list,
.ks-metric-grid,
.ks-metric-grid--three,
.ks-steps {
grid-template-columns: 1fr;
}
.ks-nav {
display: block;
}
.ks-nav a {
margin-bottom: 6px;
}
}