.view-btn {
			color: #fff;
			border: 1px solid #337ab7;
			background-color: #337ab7;
		}
		.download-btn {
			color: #fff;
			border: 1px solid #5cb85c;
			background-color: #5cb85c;
		}
		.remove-btn {
			color: #fff;
			background-color: #d9534f;
			border: 1px solid #d43f3a;
		}
		.view-btn, .download-btn, .remove-btn { 
			border-radius: .25rem; 
			padding: .4rem .8rem; 
			outline: none!important; 
			transition: .25s linear;
			display: flex;
			align-items: center;
			justify-content: center;
			text-transform: capitalize;
			font-size: 1.15rem;
			width: max-content;
			margin: auto;
		}
		.view-btn:hover, .view-btn:focus, 
		.remove-btn:hover, .remove-btn:focus, 
		.download-btn:hover, .download-btn:hover { 
			color: #fff!important;
			box-shadow: 1px 2px 5px -1px rgba(0,0,0,.6);
		}
		.w-100 {width: 100%!important;}

		.text-blue {color: rgb(53, 119, 163)!important;}
		.text-orange { color: rgb(229, 117, 37)!important;}
		.text-black { color: #212427!important;}
		.text-gray { color: #666666!important;}
		.text-white { color: #f2f2f2!important;}
		.f-600 { font-weight: 600!important}
		.f-700 { font-weight: 700!important}
		.f-800 { font-weight: 800!important}

		.margin-auto {margin: auto!important}
		.m-0 {margin: 0!important}
		.m-1 {margin: .25rem!important}
		.m-2 {margin: .5rem!important}
		.m-3 {margin: 1rem!important}
		.m-4 {margin: 1.5rem!important}
		.m-5 {margin: 3rem!important}

		.mt-0 {margin-top: 0!important}
		.mt-1 {margin-top: .25rem!important}
		.mt-2 {margin-top: .5rem!important}
		.mt-3 {margin-top: 1rem!important}
		.mt-4 {margin-top: 1.5rem!important}
		.mt-5 {margin-top: 3rem!important}
		.mb-0 {margin-bottom: 0!important}
		.mb-1 {margin-bottom: .25rem!important}
		.mb-2 {margin-bottom: .5rem!important}
		.mb-3 {margin-bottom: 1rem!important}
		.mb-4 {margin-bottom: 1.5rem!important}
		.mb-5 {margin-bottom: 3rem!important}
		.ml-0 {margin-left: 0!important}
		.ml-1 {margin-left: .25rem!important}
		.ml-2 {margin-left: .5rem!important}
		.ml-3 {margin-left: 1rem!important}
		.ml-4 {margin-left: 1.5rem!important}
		.ml-5 {margin-left: 3rem!important}
		.mr-0 {margin-right: 0!important}
		.mr-1 {margin-right: .25rem!important}
		.mr-2 {margin-right: .5rem!important}
		.mr-3 {margin-right: 1rem!important}
		.mr-4 {margin-right: 1.5rem!important}
		.mr-5 {margin-right: 3rem!important}
		.p-0 {padding: 0!important}
		.p-1 {padding: .25rem!important}
		.p-2 {padding: .5rem!important}
		.p-3 {padding: 1rem!important}
		.p-4 {padding: 1.5rem!important}
		.p-5 {padding: 3rem!important}
		.pr-0 {padding-right: 0!important}
		.pr-1 {padding-right: .25rem!important}
		.pr-2 {padding-right: .5rem!important}
		.pr-3 {padding-right: 1rem!important}
		.pr-4 {padding-right: 1.5rem!important}
		.pr-5 {padding-right: 3rem!important}
		.pl-0 {padding-left: 0!important}
		.pl-1 {padding-left: .25rem!important}
		.pl-2 {padding-left: .5rem!important}
		.pl-3 {padding-left: 1rem!important}
		.pl-4 {padding-left: 1.5rem!important}
		.pl-5 {padding-left: 3rem!important}
		.pt-0 {padding-top: 0!important}
		.pt-1 {padding-top: .25rem!important}
		.pt-2 {padding-top: .5rem!important}
		.pt-3 {padding-top: 1rem!important}
		.pt-4 {padding-top: 1.5rem!important}
		.pt-5 {padding-top: 3rem!important}
		.pb-0 {padding-bottom: 0!important}
		.pb-1 {padding-bottom: .25rem!important}
		.pb-2 {padding-bottom: .5rem!important}
		.pb-3 {padding-bottom: 1rem!important}
		.pb-4 {padding-bottom: 1.5rem!important}
		.pb-5 {padding-bottom: 3rem!important}


		.d-flex {display: flex!important;}
		.flex-row { flex-direction: row!important;}
		.flex-column { flex-direction: column!important;}
		.flex-row-reverse { flex-direction: row-reverse!important;}
		.flex-column-reverse { flex-direction: column-reverse!important;}
		.flex-wrap {flex-wrap: wrap!important;}
		.align-items-start {align-items: flex-start!important;}
		.align-items-center {align-items: center!important;}
		.align-items-end {align-items: flex-end!important;}

		.justify-content-start {justify-content: flex-start!important;}
		.justify-content-between {justify-content: space-between!important;}
		.justify-content-center {justify-content: center!important;}
		.justify-content-end {justify-content: flex-end!important;}
		.justify-content-stretch {justify-content: stretch!important;}
		@media (min-width: 768px){
		.flex-md-wrap {flex-wrap: wrap!important;}
		.flex-md-row { flex-direction: row!important;}
		.flex-md-column { flex-direction: column!important;}
		.flex-md-row-reverse { flex-direction: row-reverse!important;}
		.flex-md-column-reverse { flex-direction: column-reverse!important;}
		.align-items-md-start { align-items: flex-start!important;}
		.align-items-md-center { align-items: center!important;}
		.align-items-md-end { align-items: flex-end!important;}
		.justify-content-md-start {justify-content: flex-start!important;}
		.justify-content-md-between {justify-content: space-between!important;}
		.justify-content-md-center {justify-content: center!important;}
		.justify-content-md-end {justify-content: flex-end!important;}
		.pr-md-0 { padding-right: 0!important}
		.pl-md-0 { padding-left: 0!important}
		.mr-md-0 { margin-right: 0!important}
		.ml-md-0 { margin-left: 0!important}
		.mt-md-0 { margin-top: 0!important}
		.mt-md-1 {margin-top: .25rem!important}
		.mt-md-2 {margin-top: .5rem!important}
		.mt-md-3 {margin-top: 1rem!important}
		.mt-md-4 {margin-top: 1.5rem!important}
		.mt-md-5 {margin-top: 3rem!important}
		.mb-md-0 {margin-bottom: 0!important}
		.mb-md-1 {margin-bottom: .25rem!important}
		.mb-md-2 {margin-bottom: .5rem!important}
		.mb-md-3 {margin-bottom: 1rem!important}
		.mb-md-4 {margin-bottom: 1.5rem!important}
		.mb-md-5 {margin-bottom: 3rem!important}
		.ml-md-0 {margin-left: 0!important;}
		.ml-md-1 {margin-left: .25rem!important;}
		.ml-md-2 {margin-left: .5rem!important;}
		.ml-md-3 {margin-left: 1rem!important;}
		.ml-md-4 {margin-left: 1.5rem!important;}
		.ml-md-5 {margin-left: 3rem!important;}
		
		.mr-md-0 {margin-right: 0!important;}
		.mr-md-1 {margin-right: .25rem!important;}
		.mr-md-2 {margin-right: .5rem!important;}
		.mr-md-3 {margin-right: 1rem!important;}
		.mr-md-4 {margin-right: 1.5rem!important;}
		.mr-md-5 {margin-right: 3rem!important;}
		
		.mr-md-auto {margin-right: auto!important;}
		.ml-md-auto {margin-left: auto!important;}
		.mt-md-auto {margin-top: auto!important;}
		.mb-md-auto {margin-bottom: auto!important;}
		}
		@media (min-width: 1024px){
		.flex-lg-wrap {flex-wrap: wrap!important;}
		.flex-lg-row { flex-direction: row!important;}
		.flex-lg-column { flex-direction: column!important;}
		.flex-lg-row-reverse { flex-direction: row-reverse!important;}
		.flex-lg-column-reverse { flex-direction: column-reverse!important;}
		.align-items-lg-start { align-items: flex-start!important;}
		.align-items-lg-center { align-items: center!important;}
		.align-items-lg-end { align-items: flex-end!important;}
		.justify-content-lg-start {justify-content: flex-start!important;}
		.justify-content-lg-between {justify-content: space-between!important;}
		.justify-content-lg-center {justify-content: center!important;}
		.justify-content-lg-end {justify-content: flex-end!important;}
		
		}
		@media (min-width: 1200px){
		.flex-xl-wrap {flex-wrap: wrap!important;}
		.flex-xl-row { flex-direction: row!important;}
		.flex-xl-column { flex-direction: column!important;}
		.flex-xl-row-reverse { flex-direction: row-reverse!important;}
		.flex-xl-column-reverse { flex-direction: column-reverse!important;}
		.align-items-xl-start { align-items: flex-start!important;}
		.align-items-xl-center { align-items: center!important;}
		.align-items-xl-end { align-items: flex-end!important;}
		.justify-content-xl-start {justify-content: flex-start!important;}
		.justify-content-xl-between {justify-content: space-between!important;}
		.justify-content-xl-center {justify-content: center!important;}
		.justify-content-xl-end {justify-content: flex-end!important;}
		}




		.aabsys-modal, .modal {
			max-width: 55%!important;
			margin: auto;
			margin-top: 30px;
			white-space: normal;
		}
		.aabsys-modal .modal-content textarea , .modal .modal-content textarea { width: 100%; resize: none; border: 1px solid #ccc;}
		
		.policyPopupModal .modal-dialog{
			width: 900px;
		}
		
		
		

		.timer-modal-footer {
			text-align: unset!important;
			display: flex;
			flex-direction: column;
		}


		
		.timer-modal-footer .p_message {
			color: red;
			float: none!important;
			margin: auto;
			margin-bottom: 1rem;
		}
		.modal-btns {
			display: flex;
			justify-content: flex-end;
			flex-direction: row;
			flex-wrap: wrap;
		}
		.modal-dialog {
			display: unset!important;
		}
		
		#confirmPunchOut .modal-dialog {

			width: auto!important;
			margin: 30px auto;
		}
		
		#confirmPunchOut .modal-body1 {
			margin: 10px;
		}
		#confirmPunchOut table tr.info-heading th {
			background-color: #0f90b7;
			padding: 5px 10px;
			color: #fff;
		}
		#confirmPunchOut input[type=checkbox] {
			height: 70px;
			width: 20px;
			vertical-align: middle;
		}


		
		.timer-modal-footer {
			text-align: unset!important;
			display: flex;
			flex-direction: column;
		}


		
		.timer-modal-footer .p_message {
			color: red;
			float: none!important;
			margin: auto;
			margin-bottom: 1rem;
		}
		.modal-btns {
			display: flex;
			justify-content: flex-end;
			flex-direction: row;
			flex-wrap: wrap;
		}
		.year-btn {
			margin-top: 5px;
			margin-right: 5px;
		}



		
		
		@media screen and (max-width: 1024px) {
			.aabsys-modal, .modal {
				max-width: 90%!important;
			}
		}
		
		
		@media (min-width: 768px){
			.modal-dialog {
				width: auto!important;
				margin: 30px auto;
			}

			.side-menu-container > .navbar-nav {
				width: 100%!important;
			}
			

		}
		@media (max-width: 768px){
			.side-menu-container > .navbar-nav {
				width: 100%!important;
			}
			.year-btn {
				margin-top: 10px;
				margin-right: 10px;
			}
		}
		@media screen and (max-width: 767px) {
			.aabsys-modal, .modal {
				max-width: 100%!important;
			}
			
			#confirmPunchOut .modal-dialog {
				margin: 30px auto;
				width: 0px;
			}
			#confirmPunchOut .modal-footer > p {
				color: red;
				font-size: 14px;
			}
			
			.side-menu {
				height: auto!important;
				margin-bottom: 50px;
			}
			.year-btn {
				margin-top: 15px;
				margin-right: 15px;
			}

		}
		



		.p_message{
			color: red important;
			font-size: 14px important;
		}
		
		.panel-heading { height: auto!important;}
		.panel-title>a, .panel-title>a:active{
			display: block;
			padding: 2px;
			color: #fff;
			font-size: 16px;
			font-weight: bold;
			text-transform: uppercase;
			letter-spacing: 1px;
			word-spacing: 3px;
			text-decoration: none;
		}
		.panel-heading  a:before {
		   font-family: 'Glyphicons Halflings';
		   content: "\e114";
		   float: right;
		   transition: all 0.5s;
		}
		.panel-heading.active a:before {
			-webkit-transform: rotate(180deg);
			-moz-transform: rotate(180deg);
			transform: rotate(180deg);
		} 
		.notiSect {
			height: 217px;
		}
		.hof-content {height: 100%}
		.modal-dialog.bigsize {
			width: 900px;
		}
		#work-from-header{
			font-size:16px;
			font-weight: bold;
			padding:10px 10px 10px 30px;
		}
		#work-from-body{
			font-size:14px;
			padding-left:50px;
		}
		.custom_css{
			margin-top: 20px;
			margin-right: 700px;
			margin-bottom: 12px;
			margin-left: 25px;
		}
		@media screen and (max-width: 800px) {
		  .left, .main, .right {
			width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
		  }
		}
		@media (max-width: 800px) {
		    div#confirmPunchOut{
				max-width: auto !important;
			}
		}
		blink {
		  -webkit-animation: 2s linear infinite condemned_blink_effect; /* for Safari 4.0 - 8.0 */
		  animation: 2s linear infinite condemned_blink_effect;
		}

		/* for Safari 4.0 - 8.0 */
		@-webkit-keyframes condemned_blink_effect { 
		  0% {
			visibility: hidden;
		  }
		  50% {
			visibility: hidden;
		  }
		  100% {
			visibility: visible;
		  }
		}

		@keyframes condemned_blink_effect {
		  0% {
			visibility: hidden;
		  }
		  50% {
			visibility: hidden;
		  }
		  100% {
			visibility: visible;
		  }
		}
		#regularize a {
			margin: 1rem .7rem 1rem 0;

		}
		.regularize> a {
			margin: 1rem .7rem 1rem 0;
			float: right;
		}
		@media screen and (max-width: 767px) {
			.btn.btn-sm.btn-viewAll{
				width: 100%
			}
		}
		
		.panel-title>a span {
			    width: 95%;
				white-space: normal;
				word-break: break-word;
				line-height: 1.3;
				letter-spacing: .25px;
		}
		.panel-title>a {
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: space-between;
		}
		.panel-heading a:before {
			position: absolute;
			right: 1.15rem;
		}
		
		

#confirmPunchOut .modal-body1 {
    margin: 10px;
}
#confirmPunchOut table tr.info-heading th {
    background-color: #0f90b7;
    padding: 5px 10px;
	color: #fff;
}
#confirmPunchOut input[type=checkbox] {
    height: 70px;
    width: 20px;
    vertical-align: middle;
}
.searchable.input-group {
    border: none;
    border-radius: 0px;
}
.searchable.input-group input.form-control {
    border: 1px solid #e6e6e6;
    border-radius: 6px !important;
    margin-bottom: 5px;
}
.searchable.input-group select.form-control {
    border: 1px solid #e6e6e6;
    border-radius: 6px !important;
}
.align-items-center {
    align-items: center!important;
}

.justify-content-between {
    justify-content: space-between!important;
}
.d-flex {
	display: flex!important;
}

/* Button used to open the chat form - fixed at the bottom of the page */
.open-button {
	display: none;
	background: linear-gradient(to bottom, rgb(53, 119, 163) 0%, rgb(24, 83, 123) 100%);
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    opacity: 0.8;
    position: fixed;
    bottom: 23px;
    right: 30px;
    width: 330px;
    box-shadow: 1px 6px 20px -8px black;
    border-radius: 2px;
	font-size: 14px;
}
.open-button a{
    color: white;
	font-size: 12px;
}

/* The popup chat - hidden by default */
.chat-popup {
  position: fixed;
  bottom: 0;
  right: .15rem;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  max-width: 400px;
  padding: 10px;
  background-color: white;
}

/* Full-width textarea */
.form-container textarea {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
  resize: none;
  min-height: 200px;
}

/* When the textarea gets focus, do something */
.form-container textarea:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/send button */
.form-container .btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}
@media (max-width:767px){
	#regularize { flex-direction: column; float: none !important;}
	.chat-popup { left:.15rem;}
}

.letterPopupModal .modal-dialog{
		width: 800px;
	}
	.letterPopupModal .close.LetterClose{
		display: none;
	}
	
	.login-section {
    height: 100vh;
    width: 100vw;
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
    /* overflow-y: auto; */
}