/** LOGIN PAGE**/
.mainSection{
	background-color:white;
	background-image: url('../../images/RampitCollage.jpg');
	background-size:contain;
	background-position: center center;
	background-repeat:no-repeat;
	background-size:cover;
}

.loginForm{
	border-radius:15px;
	border:1px solid #e9e9e9;
	margin:30px auto 0px;
	padding:10px 20px 0px;
	background-color:white !important;
	-webkit-box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.65);
	-moz-box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.65);
	box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.65);
}

.passwordInfo{
	border-radius:15px;
	border:1px solid #e9e9e9;
	margin:30px auto;
	padding:10px 20px 8px;
	background-color: white !important;
	-webkit-box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.65);
	-moz-box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.65);
	box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.65);
}

/** UNIVERSAL BOOTSTRAP BRANDING STYLING**/
.border-info{
	border-color:#002C4F!important;
}

.text-info{
	color:#002C4F!important;
}

.bg-light-grey{
	background-color: #efefef;
}

.text-rampit-red{
	color: #941214!important;
}
.text-rampit-blue{
	color: #002c4f!important;
}
.alert-info {
	color: #002c4f;
	background-color: #d1ecf1;
	border-color: #002c4f;
}

.darkBlueBG, .bg-rampit-blue{
	background-color:#002c4f;
	color:white;
}
.rampitRedBG, .bg-rampit-red{
	background-color:#941214;
	color:white;
}
.btn-ramp-darkred, .btn-danger{
	background-color:#941214;
	color:white;
	border:1px solid #941214;
}

a.btn-ramp-darkred .active{
	background-color: blue;
	color: #ffffff;
}
.btn-ramp-darkred,.btn-secondary,.btn-ramp-darkred:active,.btn-ramp-darkred:hover,.btn-secondary:active,.btn-secondary:hover{
	color: #ffffff !important;
}

.btn-ramp-darkred:hover, .btn-danger:hover{
	background-color:#941214;
	opacity:.8;
	color:white;
}

.btn-ramp-darkblue, .btn-info, .btn-primary,.dataTables_wrapper .dataTables_paginate .paginate_button.current{
	background-color:#002c4f;
	color:white !important;
	border:1px solid #002c4f;
}

.btn-ramp-darkblue:hover, .btn-info:hover, .btn-primary:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
	background-color:#002c4f;
	opacity:.8;
	color:white;

}

/** Outline-Info Button in Rampit Blue**/
.btn-outline-info, .dataTables_wrapper .dataTables_paginate .paginate_button:hover,.dataTables_wrapper .dataTables_paginate .paginate_button:active {
	color:#002C4F;
	background-color:transparent;
	background-image:none;
	border-color:#002C4F
}
.btn-outline-info:hover{
	color:#fff !important;
	background-color:#002C4F;
	border-color:#002C4F
}
.btn-outline-info.focus,.btn-outline-info:focus{
	box-shadow:0 0 0 .2rem rgba(15, 40, 59, .5)
}
.btn-outline-info.disabled, .btn-outline-info:disabled{
	color:#002C4F;
	background-color:transparent
}
.btn-outline-info:not(:disabled):not(.disabled).active,.btn-outline-info:not(:disabled):not(.disabled):active,.show>.btn-outline-info.dropdown-toggle{
	color:#fff;                                                                                                                     background-color:#002C4F;
	border-color:#002C4F
}
.btn-outline-info:not(:disabled):not(.disabled).active:focus,.btn-outline-info:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-info.dropdown-toggle:focus{
	box-shadow:0 0 0 .2rem rgba(15, 40, 59, .5)
}

/** Outline-Info Button in Rampit Blue**/
.btn-outline-danger{
	color:#941214;
	background-color:transparent;
	background-image:none;
	border-color:#941214;
}
.btn-outline-danger:hover{
	color:#fff;
	background-color:#941214;
	border-color:#941214;
}
.btn-outline-danger.focus,.btn-outline-danger:focus{
	box-shadow:0 0 0 .2rem rgba(148, 18, 20, 0.5)
}
.btn-outline-danger.disabled, .btn-outline-danger:disabled{
	color:#941214;
	background-color:transparent
}
.btn-outline-danger:not(:disabled):not(.disabled).active,.btn-outline-danger:not(:disabled):not(.disabled):active,.show>.btn-outline-danger.dropdown-toggle{
	color:#fff;                                                                                                                     background-color:#002C4F;
	border-color:#941214;
}
.btn-outline-danger:not(:disabled):not(.disabled).active:focus,.btn-outline-danger:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-danger.dropdown-toggle:focus{
	box-shadow:0 0 0 .2rem rgba(148, 18, 20, 0.5)
}

/** GENERAL BOOTSTRAP CUSTOMIZATION**/
.button{
	-webkit-appearance: button;
	overflow: visible;
	line-height: inherit;
	border-radius: 0;
	box-sizing: border-box;
	padding: 1.5px 8px 1.5px;
	align-items: flex-start;
	text-align: center;
	cursor: default;
	color: buttontext;
	background-color: buttonface;
	border-width: 2px;
	border-style: outset;
	border-color: buttonface;
	border-image: initial;text-rendering: auto;
	letter-spacing: normal;
	word-spacing: normal;
	text-indent: 0px;
	text-shadow: none;
	display: inline-block;
	margin-left:5px;
}

.button:hover{
	text-decoration:none;
}

nav .dropdown:hover .dropdown-menu {
	display: block;
	margin: 0px!important;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {

	background-color: #002C4F!important;

}

.custom-checkbox{
	margin-left: 43%;

}
.custom-checkbox-no-margin{
	margin-left: 0px !important;
	margin: 0px !important;

}

.icon-button{
	cursor: pointer;
}

.wide-dropdown{
	min-width: 200px;
}



/** ANNOUNCEMENTS **/
#announcementTable th{
	white-space: nowrap;
}

#announcements td{
	cursor: pointer !important;
}


/** TIMECARD SUMMARY**/
#timeclock td {
	white-space: nowrap;
}

.timeCard th, .timeCard td{
	font-size:.9em;
}


#requestVacation label{
	margin-top:10px;
	font-weight: 700;
}

#accrualReportTable td{
	white-space: nowrap;
	font-size: .85em !important;
	padding: 2px 10px !important;
}
#accrualReportTable th{
	white-space: nowrap;
	text-align:center;
	font-size: .85em !important;
	text-transform:capitalize;
}
#users, #timeoff , #timeclock, #announcements {
	cursor: pointer !important;
}


.circle_card{
	background-color: #941214;
	color: #ffffff !important;
	border-radius: 100px;
	width: 50px;
	text-align: center;
	margin-left:20px;
	margin-right: 20px;
}

.loading {
	-webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(359deg);
	}
}


/* Onboarding SECTION */

.container.onboarding {
	margin-top: 25px;
}

.container.onboarding .overflowAuto{
	max-height: 400px;
	overflow-y: auto;
	padding: 30px;
	border-bottom: 1px solid rgba(0,0,0,.125);
}

.container.onboarding .row.signature {
	padding: 1.25rem;
}

.container.onboarding .onboarding-checklist-sidenav li {
	padding: 3px;
}
.container.onboarding fieldset .form-check-inline .form-check-input,
.container.onboarding fieldset .form-check-inline .form-check-label {
	margin-top: 10px;
}

.container.onboarding .display-signature {
	display: block;
	margin: auto;
}
.container.onboarding .display-signature svg{
	height: 100px;
	width: 250px;
}

.container.onboarding .display-signature img{
	height: 100px;
	width: 250px;
}

.container.onboarding .display-owners-signature {
	display: block;
	margin: auto;
}
.container.onboarding .display-owners-signature svg{
	height: 100px;
	width: 250px;
}

.container.onboarding .display-owners-signature img{
	height: 100px;
	width: 250px;
}

.darkLink{
	color: #0056b3;
}

.profileImageDiv {
	width: 150px;
	max-height: 200px;
	overflow: hidden;
	position: relative;   /* new stuff from here down... */
}
.profileImage{
	width: 150px;
	border-radius: 100px;
}
.overlay {
	display: none;
	text-align: center;
	background: rgba(20, 20, 40, .8);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	color: white;
	font-size: 1.5rem;
	width: 150px;
	border-radius: 100px;
	cursor: pointer;
}
.profileImageDiv:hover .overlay {
	display: block;
}
.container.employeeProfile{
	max-width: 1600px;
}

.cursor-pointer{
	cursor: pointer;
}
/* announcements css*/
.announcements{
	margin-top:20px;
}
.cardIcon{
	font-size: 5em;
	text-align: center;
	margin-top: 15px;
}
.containerCards{
	width: 80%;
	margin: 0 auto;
}
.containerCards i{
	color: #941214;
}
.containerCards i{
	color: #941214;
}
.containerCards a{
	color: #212529;
}
.containerCards a:hover, .containerCards a:hover .card{
	text-decoration: none;
}
.containerCards a:hover .card{
	box-shadow: 0px 5px 5px 1px rgba(0, 0, 0, .2);
	/*border-color: #491217;*/
}

/*admin css*/
.admin{
	margin-top: 20px;
}
.container.admin{
	max-width: 1400px !important;
}
.admin-checklist-sidenav{
	list-style: none;
}/*
.admin-checklist-sidenav .nav-item a.active  {
	color: #002c4f;
}

.admin-checklist-sidenav .nav-item a.active:before {
	content: "|    ";
}*/
/*benefits css*/
.benefits{
	margin-top: 20px;
}
.greenHover a:hover{
	text-decoration: none !important;
	color: #28a745 !important;

}
.container.benefits{
	max-width: 1400px !important;
}
.benefits-checklist-sidenav{
	list-style:none;
}
/*
.benefits-checklist-sidenav .nav-item a.active  {
	color: #002c4f;
}

.benefits-checklist-sidenav .nav-item a.active:before {
	content: "|    ";
}
*/
.planHover a:hover{
	text-decoration: none !important;

}
.required:before{
	content: "| ";
	color: red;
	font-weight:bold;
}
.container.benefits{
	max-width: 1400px !important;
}
.benefits i{
	font-size: 1.5em;
}

.spinner {
	animation: spin 1.5s linear infinite;
	-webkit-animation: spin 1.5s linear infinite;
}

@keyframes spin {
	to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
	to { -webkit-transform: rotate(360deg); }
}

/*.onboarding-checklist-sidenav .nav-item a.active  {
	color: #002c4f;
}

.onboarding-checklist-sidenav .nav-item a.active:before {
	content: "|    ";

}*/

.documentsInfo i {
	font-size: 1.5em;
}


/*input masking */
/* Libary CSS */
.shell {
	position: relative;
	line-height: 1;}
.shell span {
	position: absolute;
	left: 3px;
	top: 1px;
	color: #777777;
	padding: 8px;
	pointer-events: none;
	}
.shell span i { /* any of these 3 will work */
	color: transparent;
	opacity: 0;
	visibility: hidden;
}


input.masked,
.shell span {
	padding-right: 10px;
	background-color: transparent;
	white-space: pre;
}

/* nav-pills */
.nav-pills .nav-link{
	margin-bottom: 3px;
}
.nav-pills .nav-item a.nav-link.active, .nav-pills .nav-item .show>.nav-link {
	background-color: #002c4f;
	color: #ffffff !important;
}
.nav-pills .nav-item a.nav-link{

	color: #002c4f;
}
.nav-pills .nav-item a.nav-link:hover{
	border: 1px solid #002c4f !important;
	padding: -1px;
	margin: -1px;
	color: #002c4f;
}

/* Installer Driver Onboarding pages*/
.appendixTitle{
	font-weight:bold;
	border-bottom: 2px solid #000000;
	margin-bottom: 40px;
	margin-top:50px;
}
.display-signature{
	height: 100px;
}


/* Small devices (landscape phones, 576px and up)*/
@media only screen and (max-width: 576px) {
	h1{
		font-size: 18px !important;
	}
	h2{
		font-size: 16px !important;
	}
	h3{
		font-size: 14px !important;
	}
	h4{
		font-size: 12px !important;
	}
	h5{
		font-size: 10px !important;
	}
	body,p,input,a,button,div, table, label, select, li, ol{
		font-size: 9px !important;
	}
	.p-5.printable_page{
		padding: 0px!important;
	}
	ol {
		margin-block-start: .5em;
		padding-inline-start: 15px;
	}
	.nav-item{
		white-space: nowrap;
	}

	.appendixTitle{
		margin-top:20px;
	}



}

/* Medium devices (tablets, 768px and up)*/
@media only screen and (max-width: 768px) {
	h1{
		font-size: 22px !important;
	}
	h2{
		font-size: 20px !important;
	}
	h3{
		font-size: 18px !important;
	}
	h4{
		font-size: 16px !important;
	}
	h5{
		font-size: 14px !important;
	}
	body,p,input,a,button,div, table, label, select, li, ol{
		font-size: 12px !important;
	}
	.p-5.printable_page{
		padding: 0px!important;
	}
	ol {
		margin-block-start: .5em;
		padding-inline-start: 15px;
	}
	.nav-item{
		white-space: nowrap;
	}
	.appendixTitle{
		margin-top:20px;
	}
}