body {
    font-family: 'Chakra Petch', sans-serif;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: 'Kanit', sans-serif;
    font-weight: 400;
}
.page-content {
    padding: calc(70px + 24px) calc(5px / 2) 70px calc(5px / 2);
}
.table {
    width: 100% !important;
}
.dtr-details {
    width: 100%;
}
.card-body {
    padding: 1rem;
}
.card {
    margin-bottom: 10px;
}
input[type="date"] {
    display:block;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    min-height: 1.2em; 
    min-width: 96%;
    padding: 0px 2px;
    border: 1px solid #ccc;
    border-radius: 3px;
}
.footer {
    left: 0;
}
.navbar-header {
    margin-left: 0px;
    height: 65px;
}
.mt-main {
    margin-top: 68px;
}
.page-title-box {
    padding-bottom: 10px;
}
.logo {
    padding-right: 15px;
    width: 155px;
    height: auto;
}
body {
    background-color: #eeeeee;
}
#page-topbar {
    border-bottom: 3px solid #ff0000;
}
.navbar-custom {
}
.navbar-topic {
    font-family: 'Prompt', sans-serif;
    padding: 10px;
    background-color: #3d3d3d;
    color: #fff;
    font-size: 26px;
    font-weight: 600;
    padding-left: 17px;
    display: block;
    margin-bottom: 20px;
    text-align: center;
    padding: 20px 15px;
}
.red-line {
    width: 100px;
    height: 5px;
    background-color: #ff0000;
    margin-top: 5px;
}
.red-bar {
    padding: 0 17px;
    margin-bottom: 10px;
    display: block;
    height: 40px;
    font-family: 'Prompt', sans-serif;
}
.red-bar .step {
    width: 33.3333333%;
    float: left;
    border-bottom: 3px solid #c2bfbf;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #c2bfbf;
}
.red-bar .step.active {
    color: #ff0000;
    border-bottom: 3px solid #ff0000;
}
.s-li {
    border-left: 1px solid #000;
    padding-left: 10px;
    font-family: 'Prompt', sans-serif;
    color: #000;
}
img {
    width: 150px;
    height: 50px;
}
li {
    list-style: none;
}
.wrapper {
position: relative;
overflow-x: hidden;
max-width: 100%;
border-radius: 13px;
}
.wrapper .icon {
position: absolute;
top: 0;
height: 100%;
width: 120px;
display: flex;
align-items: center;
}
.icon:first-child {
left: 0;
display: none;
/* background: linear-gradient(90deg, #fff 70%, transparent); */
}
.icon:last-child {
right: 0;
justify-content: flex-end;
/* background: linear-gradient(-90deg, #fff 70%, transparent); */
}
.icon i {
width: 40px;
height: 40px;
cursor: pointer;
font-size: 1.2rem;
text-align: center;
line-height: 40px;
border-radius: 50%;
background-color: #e5e5e5;
}
.icon i:hover {
    background: #ff0000;
    color: #fff;
}
.icon:first-child i {
margin-left: 5px;
} 
.icon:last-child i {
margin-right: 5px;
} 
.wrapper .tabs-box {
display: flex;
list-style: none;
overflow-x: hidden;
scroll-behavior: smooth;
padding: 20px 55px;
gap: 48px;
}
.tabs-box.dragging {
scroll-behavior: auto;
cursor: grab;
}
.tabs-box .tab {
cursor: pointer;
font-size: 1.18rem;
padding: 13px 20px;
}
.tabs-box .tab:hover{
    border-radius: 10px;
}
.tabs-box.dragging .tab {
user-select: none;
pointer-events: none;
}
.tabs-box .tab.active{
    color: #fff;
    border-color: transparent;
    padding: 0;
}

.tab > img {
    width: 270px;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
}
.tabs-box .tab {
    padding: 0px 3px 3px 3px;
}
.tabs-box .tab.active {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 10px;
    position: relative;
}

.tabs-box .tab.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/assets/images/selected-over-lay.png');
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 2;
    border-radius: 10px;
}
.btn-danger {
    color: #fff;
    background-color: #ff0000;
    border-color: #ff0000;
}
.selected > img {
    width: 60px;
    height: auto;
    z-index: 1;
    padding-right: 15px;
}
.selected {
    text-align: right;
}
.step2 {
    display: none;
}
.step3 {
    display: none;
}
.branch {
    display: flex;
    justify-content: center;
    gap: 25px;
    padding: 0;
    margin: 0;
}
.branch .tab-radio {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    cursor: pointer;
    transition: all 0.3s;
    width: 155px;
    
}
.select-car {
    display: none;
}
.b-active {
    /* box-shadow: rgb(149 157 165 / 45%) 0px 8px 24px; */
    background-color: #ff0000;
    color: #fff;
}
.branch label {
    width: 100%;
    text-align: center;
    margin-bottom: 0;
}
input[type="radio"]{
    visibility: hidden;
    height: 0;
    width: 0;
}
.book-tp {
    padding-left: 15px;
}
a {
    color: #ff0000;
}
a:hover, a:active {
    color: #ff0000;
}
.swal-text {
    text-align: center;
}
.swal-button, .swal-button:hover, .swal-button:focus, .swal-button:visited{
    background-color: #ff0000;
    color: #fff;
}
.swal-button:active {
    background-color: #ce0404;
    color: #fff;
}
@media (min-width: 769px) {
    .navbar-topic {
        padding: 60px 15px;
    }
    .navbar-topic > p {
        margin-bottom: 0 !important;
        font-size: 28pt;
    }
}
.card ,.btn, input,select {
    font-size: 14pt !important;
}