.main-bg{

	overflow: hidden;

	height: 100vh;

}

.form-control:focus{

	box-shadow: none;

	outline: none;

	border-color: black;

}



.outer-form{

	padding: 30px;

	display: flex;

	justify-content: safe center;

	align-items: flex-start;

	flex-direction: column;

	height: 100vh;

}

.form-btn{

	padding: 1rem 2rem;

	background: #ff0000;

	color: white;

	border: none;

}

.form-btn:focus,.form-btn:hover{

	background: #c80303;

	color: white;

}

.bg-section{

	background: url('../img/component-bg.jpg');

	background-size: cover;

	background-repeat: no-repeat;

	height: 100%;

	background-position: center;

	padding: 30px;

	display: flex;

	justify-content: safe center;

	align-items: center;

	flex-direction: column;

	/*position: relative;*/

}

/*.bg-section video{

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%,-50%);

	width: 100%;

	height: 100%;

}*/

.form-section .line{

	height: 5px;

	width: 45px;

	background: #ff0000;

	margin-bottom: 15px;

}

.logo{

	max-width: 250px;

	margin-bottom: 15px;	

}

.speciality-box{

	display: flex;

	justify-content: safe center;

	align-items: center;

	flex-direction: column;

}

.speciality-box img{

	max-width: 60px;

	margin-bottom: 10px;

}

.speciality-box p{

	color: white;

}

.speciality-box{

	text-align: center;

}

.bg-section img{

	max-width: 70%;

}

tr,th,td{

	border-color: #ced4da !important;

}

table{

	border: 1px solid #ced4da !important;

	border-radius: 8px;

	overflow: hidden;

	box-shadow: 0 0 5px rgba(0,0,0,0.2);

}

thead{

	background: #00b894;

	color: white;

}

td,th{

	text-align: center;

	padding: 15px 10px !important;

}

th{

	text-transform: uppercase;

	font-size: 14px;

}

.edit-btn,.edit-btn:hover{

	padding: 8px 25px;

	border-radius: 60px;

	color: white;

	background: #00b66a;

	text-decoration: none;

}

.delete-btn,.delete-btn:hover{

	padding: 8px 25px;

	border-radius: 60px;

	color: white;

	background: #f54040;

	text-decoration: none;

}

input[type=time]::-webkit-datetime-edit-ampm-field {

  display: none !important;

}

.countdown li{

	list-style: none;

	font-weight: bold;

}

.countdown{

	padding-inline-start: 0;

	display: flex;

	justify-content: center;

	align-items: center;

}

.blink {

	    animation: blink-animation 1s steps(5, start) infinite;

	    -webkit-animation: blink-animation 1s steps(5, start) infinite;

	    color: red;

	}

	@keyframes blink-animation {

	  to {

	    visibility: hidden;

	  }

	}

	@-webkit-keyframes blink-animation {

	  to {

	    visibility: hidden;

	  }

	}

	table a{

		display: flex;

		justify-content: safe center;

		align-items: center;

	}

	table a i{

		margin-left: 5px;

	}

	.thankyou{

		height: 100vh;

		display: flex;

		justify-content: center;

		align-items: center;

		text-align: justify;

	}

	.thankyou div{

		display: flex;

		justify-content: center;

		align-items: center;

		flex-direction: column;

	}

	.thankyou img{

		border-radius: 50px;

		width: 300px;

		margin-bottom: 15px;

	}

	.thankyou div h1{

		font-weight: bold;

	}

	.icon-box{

		display: flex;

		justify-content: center;

		align-items: center;

		flex-direction: column;

		padding: 10px;

		border-radius: 8px;

		background: rgba(255,255,255,0.7);

		transition: 0.5s;

		height: 100%;

		text-align: center;

		min-height: 138px;

	}

	.icon-box img{

		max-width: 50px;

	}

	.icon-box:hover{

		background: rgba(255,255,255,1);

		transition: 0.5s;

	}

	.icon-box p{

		font-weight: 600;

		margin-bottom: 0;

		line-height: 1.2rem;

	}

	.side-logo img{

		width: 260px;

		margin-top: 30px;

	}

#timer{

	display: flex !important;

	justify-content: flex-end;

	align-items: center;

	font-size: 16px;

}

#time{

	margin-top: 0;

}

#timer span{

	margin-top: 0 !important;

}

table .date{

	white-space: nowrap;

}

.table-outer{

	overflow: scroll;

}

.time-picker {

	 display: flex;

	 justify-content: center;

	 flex-direction: column;

	 transition: all 0.4s ease;

	 height: 0;

	 overflow: hidden;

}

 .time-picker .set-time {

	 display: flex;

	 justify-content: center;

	 margin-bottom: 15px;

}

 .time-picker .label {

	 width: 60px;

	 margin: 0 5px;

	 text-align: center;

	 line-height: 34px;

	 display: inline-style;

}

 .time-picker .label a {

	 display: block;

	 border: 1px solid #ddd;

	 cursor: pointer;

	 font-size: 28px;

	 font-weight: bold;

	 border-radius: 3px;

}

 .time-picker .label a:hover, .time-picker .label a:active {

	 background-color: red;

	 color: #fff;

}

 .time-picker .label .set {

	 text-align: center;

	 box-sizing: border-box;

	 width: 100%;

	 height: 40px;

	 line-height: 34px;

	 font-size: 20px;

	 font-weight: bold;

	 border: transparent;

}

 .time-picker #submitTime {

	 text-align: center;

	 line-height: 34px;

	 border: 1px solid #ddd;

	 width: 128px;

	 margin: auto;

	 border-radius: 3px;

	 cursor: pointer;

	 text-transform: uppercase;

	 font-weight: bold;

}

 .time-picker.open {

	 border: 1px solid #ddd;

	 padding: 15px;

	 transition: all 0.5s ease;

	 height: auto;

	 background-color: #fcfcfc;

	 position: absolute;

	 z-index: 55;

}

.action-btn{

	height: 70px;

	width: 70px;

	background: #ff0000;

	border-radius: 50%;

	display: flex;

	justify-content: safe center;

	align-items: center;

	position: fixed;

	bottom: 30px;

	right: 30px;

	box-shadow: 0 0 9px 3px rgb(0 0 0 / 22%);

	cursor: pointer;

}

.action-btn i{

	font-size: 30px;

	color: white;

}

.floating-box{

	width: 350px;

	height: 450px;

	position: fixed;

	bottom: 115px;

	right: 30px;

	border: 3px solid #ff0000;

	background: white;

	display: none;

}

.floating-box-inner{

	overflow-y: scroll;

	height: 100%;

	padding: 10px;

}

.floating-box.active{

	display: block;

}

.floating-box .note-box .name{

	font-size:14px;

	color: #ff0000;

}

.floating-box .note-box{

	background: #efefef;

	padding: 10px;

	border-radius: 8px;

	margin-bottom: 10px;

}

.floating-box .note-box .name p{

	margin-bottom: 0px;

	text-transform: capitalize;

}

.floating-box .note-box p{

	margin-bottom: 0;

}

.floating-box .note-box .date{

	

}

.floating-box .note-box .date p{

	margin-bottom: 0;

	font-size: 13px;

	text-align: right;

	color: #b0abab;

}

.floating-box i{

	color: #ff0000;

	position: absolute;

	top: -25px;

	right: 0;

	font-size: 22px;

	cursor: pointer;

}

.name-status{

	display: flex;

	justify-content: space-between;

	align-items: center;

}

.name-status .status{

	font-size: 13px;

	background: #dddddd;

	color: white;

	padding: 3px 5px;

	border-radius: 5px;

}

.name-status .status span{

	margin-top: -2px;

}

.xdsoft_calendar td,.xdsoft_calendar th{

	padding: 0px !important;

}
body {
      overflow-x: hidden;
    }

    .sidebar {
      width: 250px;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      background: #000000;
      padding-top: 20px;
      transition: all 0.3s;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .sidebar.collapsed {
      width: 70px;
    }

    .sidebar a {
      display: flex;
      align-items: center;
      padding: 10px 20px;
      color: #fff;
      text-decoration: none;
    }

    .sidebar a i {
      margin-right: 10px;
      min-width: 20px;
      text-align: center;
    }

    .sidebar.collapsed a span {
      display: none;
    }

    .content {
      margin-left: 250px;
      padding: 20px;
      transition: all 0.3s;
    }

    .content.collapsed {
      margin-left: 70px;
    }

    .toggle-btn {
      position: fixed;
      top: 15px;
      right: 15px;
      z-index: 1001;
      border: none;
      background: transparent;
    }

    .sidebar-logo {
      display: flex;
      justify-content: center;
      margin-bottom: 30px;
    }

    .sidebar-logo img {
      max-width: 200px;
      height: auto;
      transition: all 0.3s;
    }

    .sidebar.collapsed .sidebar-logo img {
      max-width: 40px;
    }

    .nav-links {
      flex-grow: 1;
    }

    .logout-link {
      margin-bottom: 20px;
    }