/* Importing fonts */

@font-face {
    font-family: ProximaNova-Regular;
    src: url('../fonts/ProximaNova-Regular.otf');
    --playback-logo-image: url('../images/logo/athan-logo-white.png');
}

@font-face {
    font-family: ProximaNova-Semibold;
    src: url('../fonts/ProximaNova-Semibold.otf');
}

@font-face {
    font-family: ProximaNova-Bold;
    src: url('../fonts/ProximaNova-Bold.ttf');
}

@font-face {
    font-family: ProximaNova-Light;
    src: url('../fonts/ProximaNova-Light.otf');
}

html, body{
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
}
.page{
    position: absolute;
    top:10vh;
    /*left:100%;*/
    left : 0;
    width:100%;
    /*opacity: 0;*/
}

.adView{
    display:flex;
    background-color:#000;
    position:absolute;
    align-items: center;
    left:100%;
    top:0;
    width:100%;
    height:100vh;
    z-index:10;
    overflow: hidden;
}

.adView img{
    width:100%;
}
/* Styling main container */

.apptContainer{
    display: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items:center;
    height:100vh;
    background-color: #000;
}

/* ************ Appointment header styling ******************/

.apptHeader{
    display: flex;
    width:100%;
    height:10vh;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    background-color: #2886af;
  
}

/* Styling Doctor profile */

.docProfile{
    display: flex;
    flex-flow: column nowrap;
    /* align-items: center; */
    justify-content: center;
    padding: 0 1.5em;
}

/* Doctor image */

.docProfile img{
    width: 75%;
}

/* Doctor Name */

.docProfile .docName{
    color: #ffffff;
    font-size: 25px;
    font-family: ProximaNova-Semibold;
    line-height: 1.2;
    text-transform: capitalize;
}

/* Doctor Speciality */
.docSpeciality{
    font-family: ProximaNova-Light;
    font-size: 14px;
    color: #ffffff;
    text-transform: uppercase;
}

/* Styling Company logo */

.companyLogo{
    width: 12%;
    padding: 0 20px;
}

.companyLogo img{
    width: 100%;
}

/* ******************** Header Styling End ******************** */

/* ******************** Day and Date Section ****************** */

/* Day and date container styling */

.apptDayDate{
    display: flex;
    align-items: center;
    width:100%;
    height:10vh;
    background-color: #fff;
    color: #2886af;
    font-family: ProximaNova-Semibold;
}

/* Date container styling */

.apptDate, .apptDay{
    /* padding: 0 5px; */
}

/* Date container styling */

/* ******************** Day and Date Section End ****************** */

/**************** Appointment table section ******************** */

/* Styling Appointment Table */
.lastUpdated{
    color:#fff;
    font-size: 22px;
    padding:0 40px;
    font-family: ProximaNova-Regular;
}

.apptTableContainer{
    margin:0;
    overflow-x: hidden;
    width: 100%;
    background-color: #000;
    /* overflow: hidden; */
    height:90vh;
    box-sizing: border-box;
    background-color: #000000;
}

.apptTable{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-collapse: 0;
    border-spacing: 0;
    font-size: 28px;
    width: 100%;
    /*height:100%;*/
    font-family: ProximaNova-Regular;
    color:#000;
}

.apptTable tr.tableHead{
    background-color:#000000;;
    height: 7vh;
    font-family: ProximaNova-Bold;
    color:#ffffff;
    margin-bottom: 0;
}

.apptTable th, .apptTable td{
    display:flex;
    align-items: center;
    width:25%;
    overflow: hidden;
    /* height: 8vh;*/
    padding: 0 20px;
}





.apptTable  tr{
    display: flex;
    align-content: center;
    font-size: 18px;
    padding-left:6%;
    height:9vh;
    box-sizing: border-box;
    /* border: 1px solid #cecece; */
    background-color: #3d3d3d;
    margin-bottom: 10px;
}

.apptTable .estimetedTime{
    color: #74ee15;
    font-family: ProximaNova-Bold;
}

.apptTable .doctorName{
    color: #ffffff;
    font-family: ProximaNova-Bold;
}

/* .apptTable .doctorName{
    overflow: hidden;
    display: inline-block;
    width: 100%;
    text-overflow: ellipsis;
} */

.apptTable .doctorName span{
    overflow: hidden;
    display: inline-block;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apptTable .mobileNo{
    display: flex;
    color: #ffffff;
    font-family: ProximaNova-Bold;
}

.mobileNo .hiddenNo{
    line-height: 1.5;
}
.lastUpdatedStatus{
    color:#ccc;
    background-color:#000 !important;
    height:7vh;
    font-family: ProximaNova-Semibold;
    font-size:1.4em; 
}
/* .apptTable .activeRow{
    color: #000000;
    font-family: ProximaNova-Semibold;
    font-size: 18px;
    background-color: #effbff;
} */

/* .statusBox{ 
    width: 55%;
    padding:3% 0;
    border-radius: 20px;
    text-align: center;
    font-size: ProximaNova-Semibold;
} */
.diagStatus{
    color:  #4deeea;
    font-family: ProximaNova-Bold;
    text-align: center;
}

.confirmedStatus{
    color: #ffe700;
    font-family: ProximaNova-Bold;
    text-align: center;
}

.arrivedStatus{
    color: #74ee15;
    font-family: ProximaNova-Bold;
    text-align: center;