.tabContainer {
    display: flex;
    justify-content: space-between;
	margin:0 auto;
    margin-bottom: 20px;
    overflow-x: auto;
    white-space: nowrap;padding:0px; 
}
.event-text a {
    color: #004083;
}
.doctor-time{ width:100%;}
.tab {
    flex: 1;
    text-align: center;
    padding: 5px;
    cursor: pointer;
    background-color: #ccc;
    transition: background-color 0.3s ease;
    display: inline-block;
    width: 200px;
}
.totalright{ border: 1px solid #ccc;
    box-shadow: 0 0 5px #ccc; padding:10px;}
.margintopbot{ margin-bottom: 20px;margin-left:0px !important;
    margin-top: 15px;}

.tab.active {
    background-color: #009fe4;
    color: white;
    border-color: #009fe4;
}

.stepcontainer {
    display: none;
}

.stepcontainer.active {
    display: block;
}

.boxview_ul li, .boxview2_ul li, .boxview1_ul li {
    list-style: none;
    display: flex;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px #ccc;
    padding: 10px;
    align-content: center;
    flex-direction: row;
    cursor: pointer;
}

.boxview_ul li {
    width: 30%;
}

.boxview2_ul li {
    width: 23%;
    float: left;
    margin: 0 20px 20px 0;
    height: 54px;
    display: flex;
    align-items: center;
}
.boxview1_ul li {
    width: 30%;
    float: left;
    margin: 0 20px 20px 0;
  line-height:31px;
    display: flex;
    align-items: center;
}

.boxview_ul h2, .boxview2_ul h2, .boxview1_ul h2 {
    margin: 0;
    color: #395096;
    margin-bottom: 0px;
    font-size: 15px;
    font-weight: 500 !important;
}
.boxview2_ul li:hover {
    color: #000; /* Text color changes to black */
    background-color: #f0f0f0; /* Light grey background on hover */
}
.boxview1_ul li:hover {
    color: #000; /* Text color changes to black */
    background-color: #f0f0f0; /* Light grey background on hover */
}

.img_left {
    flex: 0 0 100px;
    width: 3rem;
    height: 3rem;
    margin-right: 20px;
}

.img_left img {
    width: 100%; /* Ensure the image fills the div */
    height: auto;
    border-radius: 5px;
}

.content_right {
    flex: 1;
}

.content_right h5 {
    margin: 0;
    font-size: 20px;
}

.icon_arrow {
    text-align: right;
    position: relative;
    top: -22px; 
    left: 25px;
}

.back-button {
    padding: 0px;
   /* border: 6px solid #283350; */
    border-radius: 19px;
    width: 70px;
    background-color: #283350;
    color: #fff;
    font-size: 14px;
}

.back-button:hover {
    background-color: #fff;
    color: #000;
}
.action-button{
    padding: 0px;
   /* border: 6px solid #283350; */
    border-radius: 19px;line-height:25px;
   /* width: 70px; */
    background-color: #283350;
    color: #fff; padding: 0px 20px;
}
.action-button:hover{
  background-color: #fff;
    color: #000;  
}

.newapp-button{ 
    float:right;
    padding: 0px;
   /* border: 6px solid #283350; */
    border-radius: 19px;line-height:25px;
   /* width: 70px; */
    background-color: #283350;
    color: #fff; padding: 0px 20px;
    font-size: 14px;
}
.newapp-button:hover{
  background-color: #fff;
    color: #000;  
}


.proceed-button{
    padding: 0px;
   /* border: 6px solid #283350; width: 70px; */
    border-radius: 19px;
   padding: 0px 20px; line-height:25px;
    background-color: #283350;
    color: #fff; 
}
.proceed-button:hover{
  background-color: #fff;
    color: #000;  
}
.boxview1_ul{ padding-left:0px; }

.jq_heading {
    display: inline-table;
    font-size: 18px;
    margin-left: 20px;
}

.form-title {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: #333;
}

.appointment-form {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-group label {
    font-size: 1rem;
    color: #555;
}

.form-input {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    margin-top: 15px;
}

.form-input:focus {
    border-color: #e05556;
    outline: none;
}

.form-detail {
    padding: 18px;
    background-color: #d0d0d030;
    border: 0px solid #ddd;
    border-radius: 15px;
    font-size: 1rem;
    color: #333;
    margin-top: 20px;
}

.submit-button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #283350;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 20px;
    align-self: center;
}

.submit-button:hover {
    background-color: #283350;
}

.select-doctor {
    margin: 20px 20px 0px 20px;
    padding: 6px;
    width: 100px;
    text-align: center;
    border-radius: 10px;
    background: #102e52;
    border: none;
    color: #fff;
}

.select-doctor:hover {
    opacity: 0.7; /* Adjust opacity on hover */
}

.doctor-item-sss {
    display: flex;
    align-items: flex-start; /* Align items at the top */
    gap: 20px; /* Space between columns */
    box-shadow: 0px 1px 6px 0px #1959b1;
    padding: 17px 20px;
    margin-top: 15px;
}

.boxView1 {
    min-height: 210px;
}

.doct_panel {
    margin-bottom: 30px;
}

.ddd_info {
    font-size: 14px;
}

.ddd_avail {
    font-size: 14px;
}
#loadingSpinner {
    display: none;
    text-align: center;
    margin-top: 10px;
}

#doctorDetails .fas {
    color: #2e3e80;
    font-size: 25px;
    margin-right: 10px;
    margin-bottom: 15px;
}

.confirm_box_title {
    border-bottom: 2px solid #2e3e80;
    padding: 10px 0px;
    margin-bottom: 15px;
    font-size: 23px;
}

.doct_errorMsg {
    padding: 26px;
    text-align: center;
    color: red;
    font-size: 20px;
}

.mb_t {
    margin-bottom: 20px;
}

.content_slots {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: 20px;
}

.content_slots_layer {
    width: 54%;
}

.content_slots {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.time-slot {
    padding: 7px;
    background-color: #fff;
    border: 1px solid #0f2d5163;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    width: 140px;
    max-width: 140px;
    font-size: 14px;
}
.time-slot.selected {
    background-color: #0f2d51;
    color: #fff;
    border-color: #0f2d51;
}

.custom-date-input {
    position: relative;
    display: inline-block;
    width: 100%;
}

.custom-date-input input[type="date"] {
    width: 100%;
    padding: 6px 40px 5px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #555;
    background-color: #fff;
}

.custom-date-input input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0; /* Hide the default date picker icon */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.custom-date-input .calendar-icon {
    position: absolute;
    right: 10px;
    top: 66%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #888;
    font-size: 18px;
}

.custom-date-input input[type="date"]::placeholder {
    color: #888; /* Placeholder color */
    opacity: 1; /* Ensure placeholder is visible */
}

@media (max-width:1199px){
        .top-search-box {
        width: 8%;
    }
}

/* Media Queries for Mobile Responsiveness */
@media (max-width: 768px) {
    .boxview_ul, .boxview1_ul, .boxview2_ul{ padding-left: 0px !important;}
    .col-8{ width: 100%; !important;}
    .col-4{ width: 100%; !important;}
    .tab {
        width: 100%; /* Full width on smaller screens */
    }

    .boxview_ul li, .boxview2_ul li{
        width: 100%; /* Full width on smaller screens */
    }
    .boxview1_ul li {
         width: 46%;
    }

    .img_left {
        flex: 0 0 60px; /* Smaller image on mobile */
        width: 2rem;
        height: 2rem;
        margin-right: 10px;
    }

    .content_right h5 {
        font-size: 20px; /* Smaller font size on mobile */
    }

    .icon_arrow {
        top: -15px;
        left: 15px;
    }
    .newapp-button{ float:none; margin-top: 20px;
}

    .form-title {
        font-size: 1.5rem;
    }

    .appointment-form {
        max-width: 100%; /* Full width on mobile */
        width:100%;
    }

    .select-doctor {
        width: 80px; /* Smaller button on mobile */
    }

    .doctor-item-sss {
        flex-direction: column; /* Stack items vertically on mobile */
    }

    .content_slots_layer {
        width: 100%; /* Full width on mobile */
    }

    .time-slot {
        width: 100%; /* Full width on mobile */
    }
}

@media (max-width: 480px) {
        .appoint {
        height: 200px;
    }
    .tab {
        padding: 0px; /* More padding on smaller screens */
    }
    .boxview1_ul li {
         width: 100% !important;
    }

      .img_left {
        width: 4.2rem;
        height: 1.5rem;
        margin-right: 5px;
    }
    .form-input {
        padding: 5px; /* Smaller padding on mobile */
    }

    .submit-button {
        width: 100%; /* Full width button on mobile */
    }
}

/* Media Queries for Mobile Responsiveness */
@media (max-width: 768px) {
    .content_slots {
    margin-left: 0;
}
    .time-slot {
        flex: 1 1 calc(49% - 20px);
        width: 100%;
    }
}

@media (max-width:600px){
    .content_slots {
    margin-left: 0;
}
    .jq_heading {
    display: block;
}
    .appoint {
    width: 100%;
    margin: 0px auto;
    height: 190px;
}
.jq_heading {
    display: inline-table;
    font-size: 14px;
    margin-left: 20px;
}
    .boxview_content {
    display: flex;
}
        .boxview2_ul li {
    width: 100%;
}
.boxview1_ul li {
    width: 46%;
}
    .boxView1 {
    min-height: 146px;
}
    .boxview_ul li {
    width: 100%;
    justify-content: space-between;
}
     .appoint a {
        width: 55%;
}
}
@media (max-width: 480px) {
    .time-slot {
        flex: 1 1 calc(48% - 20px); /* 1 slot per row on small screens */
        width: 100%; /* Ensure full width on smaller screens */
    }
}