@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
@import url("./analytic.css");

/* * Reset */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* Variables */
:root {
  --primary-color: #673ab7;
  --light-blue: #e2f1ff;
  --light-purple: rgba(209, 195, 236, 0.2);
  --input-bg: #f6f6f6;
  --placeholder-grey: #a0a0a2;
  --dark-grey: #424242;
  --dark-blue: #1f2b5d;
  --darker-blue: #002648;
  --side-background: #1d272c;
}

/* Base Styles */
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", sans-serif;
  overflow: auto;
}

body.padded {
  padding: 67px 0;
}

body.padded-sm {
  padding: 61px 0 0 0;
}

body.custom-padded-sm {
  padding: 50px 0 0 0;
}

/* body.dash-pad{
    padding-top: 50px;
} */
body.bg-light-purple {
  background-color: #e5e5e5;
}

li {
  list-style: none;
}

i {
  color: #000;
}

a {
  text-decoration: none;
  color: var(--primary-color);
}

.text-primary {
  color: var(--primary-color) !important;
}

h6 {
  font-weight: 500;
  color: var(--darker-blue);
}

h3 {
  font-weight: 700;
  color: var(--dark-blue);
}

h5.intro {
  color: var(--dark-blue);
  font-weight: 500;
}

textarea {
  width: 100%;
  border-radius: 4px;
  height: 150px;
}

textarea::placeholder {
  color: var(--placeholder-grey);
}

textarea:hover,
textarea:focus {
  border-color: var(--primary-color);
  outline: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
}

/* Utilities */
.btn {
  text-transform: none;
}

.badge {
  box-shadow: none;
}

.badge {
  font-size: 13px !important;
}

.badge-warning {
  background-color: #e07000 !important;
}

.badge-dark {
  background-color: var(--darker-blue) !important;
  font-weight: normal;
}

.btn-primary {
  background-color: var(--primary-color);
  color: #fff;
  border-radius: 4px;
  border: none !important;
}

.btn-light {
  color: #28363a;
  box-shadow: 0 1px 2px 0 rgb(0, 0, 0, 0.16);
  border-radius: 4px;
}

.btn-light-blue {
  background: #0088ff22;
  color: var(--darker-blue);
}

.btn-outline-primary {
  color: var(--primary-color);
  border-radius: 4px;
  box-shadow: none;
  border-color: var(--primary-color);
}

.form-control:focus {
  box-shadow: none;
}

.header {
  font-size: 25px;
}

.btn-outline-warning {
  color: #e07000 !important;
  box-sizing: none !important;
  border: 1px solid #d2752b !important;
  box-shadow: 0px 0px 1px#D2752B;
}

.btn-outline-warning:not([disabled]):not(.disabled).active {
  background: #e07000 !important;
  color: #fff !important;
  transition: all 1s ease;
}

.btn-outline-default {
  color: #32a65a !important;
  box-sizing: none !important;
  border: 1px solid #56a362 !important;
  box-shadow: 0px 0px 1px#56A362;
}

.btn-outline-default:not([disabled]):not(.disabled).active {
  background: #32a65a !important;
  color: #fff !important;
  transition: all 1s ease;
}

.btn-default {
  color: #fff;
  background: #32a65a !important;
}

.btn-default-custom {
  background: rgb(214, 237, 222) !important;
  color: rgba(50, 166, 90, 100%) !important;
  font-weight: 500;
  border-radius: 50% !important;
  width: 40px;
  height: 40px;
  border: none !important;
  outline: none;
}

.btn-warning-custom {
  color: rgb(224, 205, 0) !important;
  background: rgba(250, 193, 5, 0.519) !important;
  font-weight: 500;
  border-radius: 50% !important;
  width: 40px;
  height: 40px;
  border: none !important;
  outline: none;
}

.btn-trial-custom {
  color: rgb(224, 205, 0) !important;
  background: rgba(70, 70, 69, 0.519) !important;
  font-weight: 500;
  border-radius: 50% !important;
  width: 40px;
  height: 40px;
  border: none !important;
  outline: none;
}

.btn-default:disabled {
  background: rgb(214, 237, 222) !important;
  color: rgba(50, 166, 90, 100%) !important;
  font-weight: 500;
  box-shadow: none;
  font-size: inherit;
}

.btn-outline-danger {
  color: #d0021b !important;
  box-sizing: none !important;
  border: 1px solid #d0021b !important;
  box-shadow: 0px 0px 1px #d0021b;
}

.btn-outline-danger:not([disabled]):not(.disabled).active {
  background: #d0021b !important;
  color: #fff !important;
  transition: all 1s ease;
}

.btn-warning:disabled {
  color: rgba(224, 112, 0, 100%) !important;
  background: rgba(251, 234, 217, 100%) !important;
  font-weight: 500;
  box-shadow: none;
  font-size: inherit;
}

.btn-danger:disabled {
  background: #ec3d3d40 !important;
  font-weight: 500;
  box-shadow: none;
  font-size: inherit;
  color: #d0021b;
}

.btn-white,
.btn-white:hover {
  color: var(--primary-color) !important;
  font-weight: 400;
  border-radius: 4px;
}

.btn-outline-light {
  box-shadow: none;
  border: 0.5px solid #494949 !important;
  color: #494949 !important;
  border-radius: 4px;
}

.btn-outline-light:hover {
  box-shadow: none;
}

.txt-primary {
  color: var(--primary-color);
}

.table-responsive {
  width: 100%;
}

.day {
  background: var(--darker-blue);
  max-width: 200px;
  text-align: center;
  color: #fff;
  padding: 3px;
  border-radius: 50px;
  font-size: 12px;
}

.btn-danger {
  background-color: #d0021b !important;
  border-radius: 4px;
}

.accordion a,
.accordion a i {
  color: var(--dark-grey);
}

.bg-light-blue {
  background: var(--light-blue);
}

.alert-warning {
  background: transparent;
  position: relative;
  color: #1f2b5d;
  font-weight: 500;
  border: none;
}

.alert-warning::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #e07000;
  opacity: 21%;
  border-radius: inherit;
}

.dropdown .dropdown-menu .dropdown-item:hover,
.dropdown .dropdown-menu .dropdown-item:active {
  background-color: transparent;
  color: #212529 !important;
}

table td {
  vertical-align: middle !important;
  font-size: 14px;
  font-weight: 300;
}

table th {
  font-size: 1rem;
  background-color: #f3f0fa;
}

.fade:not(.show) {
  display: none;
}

.w-400 {
  font-weight: 400;
}

.w-500 {
  font-weight: 500;
}

.w-600 {
  font-weight: 600;
}

.h-100 {
  height: 100%;
}

.fs-13 {
  font-size: 13px !important;
}

.fs-15 {
  font-size: 15px !important;
}

/* Homepage Styles */
.smarter-way {
  min-height: 100vh;
  background: url("../assets/img/login.png") no-repeat center center/cover;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.smarter-way.forgot-pass {
  background: url("../assets/img/forgot-password.png") no-repeat center center/cover;
}

.smarter-way h1 {
  font-weight: 600;
}

.register-sec {
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.register-sec-lg {
  height: auto;
}

.register-sec h3,
.register-sec p {
  color: var(--dark-grey);
}

.register-sec p.light {
  color: #707070;
}

#register-form {
  width: 100%;
}

#register-form #passwordStrength {
  display: none;
}

#register-form #passwordStrength p {
  font-weight: normal;
}

#register-form #passwordStrength p i {
  color: var(--dark-grey);
}

#register-form #passwordStrength p.head {
  font-weight: 600;
}

#register-form .btn {
  font-size: 0.9rem;
}

#register-form h2,
.verification h2 {
  font-weight: 700;
  color: var(--dark-grey);
}

#register-form p {
  font-weight: 600;
}

.form-group p {
  color: var(--dark-grey);
  font-weight: 500;
  font-size: 14px;
}

.verify-content p {
  font-size: 14px;
}

#register-form ::placeholder {
  color: var(--placeholder-grey);
}

#register-form label {
  color: var(--dark-grey);
}

.reg-footer a,
.register-sec a {
  font-weight: 600;
  font-size: 14px;
}

.s-up {
  color: var(--placeholder-grey);
}

.form-control::placeholder {
  color: var(--placeholder-grey);
}

.form-control:disabled,
textarea {
  background-color: inherit;
}

#register-form label.tnc {
  font-weight: 100;
  font-size: 13px;
}

#register-form p.tiny {
  color: var(--placeholder-grey);
}

#register-form a:hover {
  color: var(--primary-color);
}

select.form-control {
  height: 48px !important;
  line-height: 48px !important;
}

#register-form input,
#register-form select,
#settings input,
.filter-controls input {
  font-size: 14px;
  background: var(--input-bg);
  cursor: pointer;
  border: none;
}

#register-form .form-error,
#report-container .form-error {
  color: #d0021b;
  font-size: 0.8rem;
}

#report-container .form-error {
  display: none;
}

.input-error {
  border-color: #d0021b !important;
}

.filter-controls {
  width: 100%;
}

.filter-controls input,
.filter-controls .input-group {
  background: #fff !important;
  color: var(--dark-grey);
}

.filter-controls input::placeholder {
  color: var(--placeholder-grey);
}

.filter-controls .input-group {
  border: 1px solid #00000029 !important;
}

.filter-controls .dropdown .btn,
.filter-controls .custom-dropdown {
  color: var(--dark-grey);
  font-weight: 400;
  box-shadow: none;
  border: 1px solid var(--input-bg);
  border-radius: 5px;
  height: 100%;
  width: 100%;
}

.filter-controls .dropdown .btn-primary {
  color: #fff;
  border: none;
}

.filter-controls .btn {
  font-size: 14px;
}

#register-form .input-group,
#settings .input-group,
.filter-controls .input-group {
  background: var(--input-bg);
  border-radius: 5px;
  cursor: pointer;
  border: 2px solid var(--input-bg) !important;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}

#register-form .input-group:hover,
#settings .input-group:hover {
  box-shadow: 0 0 5px var(--primary-color);
}

#register-form .options {
  transition: display 2s ease;
}

.reg-footer {
  height: 5vh;
  color: var(--placeholder-grey);
  font-size: 12px;
  display: flex;
  flex-direction: column;
}

.support {
  order: 1;
}

.copyright {
  order: 2;
}

/* Email Verification */
.verification p {
  color: #707070;
}

.verification a {
  font-weight: normal;
}

.verification p span.font-weight-bold {
  color: #2c2c2c;
}

.verify-content p {
  color: var(--dark-grey);
}

/* line */
.line {
  border-bottom: 1px solid var(--placeholder-grey);
}

/* Double Nav Styles */
.navbar {
  background: #fff;
  z-index: 1010;
  box-shadow: 0 1px 1px #00000029;
}

#mobile-nav {
  background: #f6f6f6;
  width: 100%;
}

#mobile-nav a {
  color: var(--primary-color);
  font-weight: 500;
}

#mobile-nav #back-link {
  color: var(--dark-grey);
}

#mobile-nav p {
  font-weight: 500;
}

.breadcrumb-dn p {
  color: var(--dark-grey);
  font-weight: 500;
}

/* Notifications */
.notification-wrapper {
  position: relative;
}

.notification-content {
  display: none;
  position: absolute;
  right: 1%;
  border: 1px solid var(--purple);
  top: 100%;
  border-radius: 5px;
  min-width: 300px;
  height: 350px;
  overflow: auto;
  background: #fff;
  box-shadow: 0 1px 2px #55555552;
  z-index: 99;
}

.notification-content .notification-body {
  min-height: 70%;
}

.notification-content #clearAllNotfications a {
  color: var(--placeholder-grey);
  font-size: 0.8rem;
}

.admin-notification {
  /* left: -265px; */
}

.notification-content.open {
  display: block;
}

.notification-content ul {
  padding: 0.5rem;
}

.notification-content a {
  color: var(--primary-color);
  display: inline;
  font-size: 1rem;
}

.notification-header {
  border-bottom: 1px solid #55555552;
  color: var(--darker-blue);
  font-size: 1.1rem;
}

.notification i {
  color: #d0021b;
  font-size: 12px;
}

.notification:hover {
  background: var(--input-bg);
  border-radius: 5px;
}

/* SideNav */
.side-nav {
  background: var(--side-background);
  z-index: 1000;
  width: 240px !important;
}

.side-nav .collapsible-body a {
  height: 35px;
  line-height: 35px;
  padding-left: 35px;
}

.side-nav .collapsible>li a.collapsible-header.active,
.side-nav .collapsible>li a.collapsible-header:hover {
  background-color: inherit;
}

.side-nav a,
.side-nav button {
  height: 35px;
  line-height: 35px;
  padding-left: 10px;
}

.side-nav button {
  display: block;
  font-size: 14px;
  background-color: transparent;
  border: none;
}

.side-nav a svg,
.side-nav .side-link button svg {
  width: 15px;
  margin-bottom: 3px;
  margin-right: 0.5rem;
}

.side-nav .side-links {
  height: 97%;
  display: flex;
  flex-direction: column;
}

.side-nav .logo a {
  padding-left: 0;
}

.side-nav a i {
  color: #fff;
}

.side-nav>ul {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.side-nav .avatar {
  height: 90px;
  width: 90px;
}

#logout-link {
  justify-self: flex-end;
}

.avatar {
  border-radius: 50%;
  height: 40px;
  width: 40px;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #424242 !important;
  text-align: center;
  position: relative;
  box-shadow: 0 1px 2px #00000029;
}

#slide-out .avatar h1 {
  font-size: 35px;
}

.editProfilePic {
  position: absolute;
  right: -5%;
  top: 65%;
}

#user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#user-info p {
  font-size: 14px;
}

#user-info a {
  line-height: initial;
}

.side-nav .btn-outline-primary {
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
}

.side-nav .btn-outline-primary:hover {
  background: var(--primary-color) !important;
  color: #fff !important;
}

.side-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.side-link a {
  font-size: 14px !important;
  /* color: #C2ACE8 !important; */
}

.side-link.current,
.side-link.current:hover {
  background: var(--primary-color);
}

.side-link.current a,
.side-link:hover a {
  font-weight: 500;
  color: #fff !important;
}

.side-link:hover {
  background: var(--dark-blue);
}

.icon {
  width: 40px;
}

.envelope-img {
  width: 200px;
}

/* Search Employees */
#isCollapsible {
  height: 100%;
}

#searchInput {
  border: 1px solid #00000029;
  border-radius: 4px;
  padding-right: 15px;
  margin-left: 10px;
  width: 320px;
  position: relative;
}

#searchInput img {
  position: absolute;
  right: 15px;
  top: 30%;
}

#searchInput>input {
  width: 90%;
  border: none;
  outline: none;
}

#searchInput>input::placeholder {
  font-size: 15px;
}

#searchInput>button {
  background: none;
  border: none;
}

.side-nav .collapsible-body a {
  padding-left: 60px;
}

/* Reports Page */
#report-container {
  width: 100%;
  margin: auto;
}

#report-container h5 {
  font-size: 20px;
  font-weight: 900;
  color: var(--darker-blue);
}

#report-container h5.big-tag {
  font-weight: 600;
  font-size: 16px;
}

#report-container h4 {
  font-size: 17px;
  font-weight: 900;
  color: var(--darker-blue);
}

#report-container p {
  font-weight: 400;
  color: var(--dark-blue);
}

#report-container p.text-black {
  color: #000;
}

#report-container p.hint {
  font-size: 0.9rem;
}

.category-header {
  border-bottom: 1px solid #00000029;
}

#incident,
#accident {
  width: 100%;
  position: relative;
  height: 220px;
  border-radius: 3px;
  box-shadow: 0 0 2px #bdbdbd;
}

#incident.selected::before,
#accident.selected::before {
  content: "";
  position: absolute;
  background: var(--light-blue);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  border-radius: 3px;
  box-shadow: 0 0 2px var(--primary-color);
}

#report-container input:radio,
#report-container label {
  font-size: 14px;
}

#newReportFooter {
  background: #fff;
  z-index: 996;
}

#newReportFooter p {
  font-weight: 500;
  color: #424242;
}

#accident label,
#incident label {
  color: var(--darker-blue);
}

#guestName .form-control {
  width: 80%;
}

#guestName {
  display: none;
}

.who-options label {
  color: #424242;
}

.progress-bar {
  background: var(--primary-color) !important;
}

.progress {
  background: var(--light-blue) !important;
}

/* Step 2 */
#report-container h6 {
  color: #212121;
}

#report-container .header-content h3 {
  color: var(--darker-blue);
}

#report-container .header-content p {
  font-size: 16px;
}

.where {
  font-weight: 400;
  color: var(--dark-grey);
}

.date-time .form-control {
  border: none;
  background: #fff;
}

.date-time .input-group {
  border: 1px solid #00000029;
  cursor: pointer;
  border-radius: 4px;
}

.howInjurySevere,
.howDamageSevere,
.nameOfWitness {
  display: none;
}

/* Modal Styles */
.modal {
  z-index: 1060;
}

.modal-title {
  font-weight: 600;
  font-size: 20px;
  color: #06232c;
}

.modal-body p {
  font-size: 16px;
  color: #605d71;
}

.modal-body .avatar p {
  color: #fff;
}

.modal-body h5 {
  color: var(--darker-blue);
  font-weight: 600;
}

.modal-body .assign .btn-primary {
  height: 100%;
}

.modal-content {
  border-radius: 5px !important;
  position: relative;
}

.modal-close {
  font-size: 18px;
  position: absolute;
  top: -15px;
  right: -35px;
}

.modal-close i {
  color: var(--input-bg) !important;
}

.modal-footer .btn {
  padding-left: 3.7rem;
  padding-right: 3.7rem;
}

.modal-header {
  border-top-right-radius: 5px !important;
  border-top-left-radius: 5px !important;
  background-color: var(--light-purple);
}

/* Delete Modal Buttons */
.modal-delete {
  background-color: #d0021b;
}

.modal-body .form-control:hover,
.modal-body .form-control:focus {
  border-color: #0088ff;
  outline: none;
}

.modal-body label {
  color: #424242;
  font-weight: 500;
}

.modal-body .edit-user {
  color: #212121;
}

/* Your Report Modal */
.your-report p {
  font-size: 16px;
  color: #212121;
}

.modal-body .custom-dropdown {
  height: 45px;
}

.your-reports-table thead {
  background: #f6f6f6;
}

.your-reports-table td {
  vertical-align: middle;
  font-size: 14px;
}

/* Department Members */
#members-list {
  position: relative;
}

#members-list .deleteicon {
  position: absolute;
  right: 5%;
}

#members-list .member .employeeName {
  font-weight: 500;
  color: var(--dark-grey);
}

/*Assign Report Dropdown*/
.custom-dropdown,
.user-dropdown,
.leads-dropdown {
  width: 100%;
  display: inline-block;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 0 2px var(--dark-grey);
  transition: all 0.5s ease;
  position: relative;
  font-size: 14px;
  color: var(--dark-grey);
  height: 100%;
  text-align: left;
}

.user-dropdown,
.leads-dropdown {
  box-shadow: none;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

.custom-dropdown .select,
.user-dropdown .select,
.leads-dropdown .select {
  cursor: pointer;
  display: block;
  padding: 7px;
  height: 100%;
  display: grid;
  align-items: center;
}

.user-dropdown .select-role,
.user-dropdown .select-role i,
.leads-dropdown .select-role,
.leads-dropdown .select-role i {
  color: var(--placeholder-grey);
}

.custom-dropdown:hover,
.user-dropdown:hover,
.leads-dropdown:hover {
  box-shadow: 0 0 4px var(--primary-color);
}

.custom-dropdown:active,
.user-dropdown:active,
.leads-dropdown:active {
  background-color: #f8f8f8;
  outline: none;
}

.custom-dropdown.active:hover,
.user-dropdown.active:active,
.leads-dropdown:hover,
.leads-dropdown:active,
.leads-dropdown.active,
.custom-dropdown.active,
.user-dropdown.active {
  box-shadow: 0 0 4px var(--primary-color);
  border-radius: 2px 2px 0 0;
  background-color: #f8f8f8;
}

.custom-dropdown .custom-dropdown-menu,
.user-dropdown .user-dropdown-menu,
.leads-dropdown .leads-dropdown-menu {
  position: absolute;
  background-color: #fff;
  width: 100%;
  left: 0;
  margin-top: 1px;
  box-shadow: 0 1px 2px var(--primary-color);
  border-radius: 0 1px 2px 2px;
  overflow: hidden;
  display: none;
  max-height: 144px;
  overflow-y: auto;
  z-index: 9;
}

.user-dropdown .user-dropdown-menu,
.leads-dropdown .leads-dropdown-menu {
  max-height: none;
}

.custom-dropdown .custom-dropdown-menu li p,
.custom-dropdown .select p,
.user-dropdown .select p,
.leads-dropdown .select p {
  color: #596b71;
  font-size: 15px;
}

.user-dropdown .user-dropdown-menu li p,
.leads-dropdown .leads-dropdown-menu li p {
  color: var(--darker-blue);
  font-size: 14px;
  font-weight: 100;
}

.user-dropdown .user-dropdown-menu li p.actual {
  font-size: 15px;
  font-weight: 600;
}

.custom-dropdown .custom-dropdown-menu li,
.user-dropdown .user-dropdown-menu li,
.leads-dropdown .leads-dropdown-menu li {
  padding: 7px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.user-dropdown .user-dropdown-menu li,
.leads-dropdown .leads-dropdown li {
  border-bottom: 1px solid #ccc;
}

.custom-dropdown .custom-dropdown-menu,
.user-dropdown .user-dropdown-menu,
.leads-dropdown .leads-dropdown-menu {
  padding: 0;
  list-style: none;
}

.custom-dropdown .custom-dropdown-menu li:hover,
.user-dropdown .user-dropdown-menu li:hover,
.leads-dropdown .leads-dropdown-menu li:hover {
  background-color: #f2f2f2;
}

.custom-dropdown .custom-dropdown-menu li:active,
.user-dropdown .user-dropdown-menu li:active,
.leads-dropdown .leads-dropdown-menu li:active {
  background-color: #e2e2e2;
}

.custom-dropdown .custom-dropdown-menu li .avatar,
.user-dropdown .user-dropdown-menu li .avatar,
.leads-dropdown .leads-dropdown-menu li .avatar {
  height: 30px;
  width: 30px;
  align-self: flex-start;
}

.custom-dropdown .select .avatar,
.user-dropdown .select .avatar,
.leads-dropdown .select .avatar {
  height: 25px;
  width: 25px;
}

.custom-dropdown .select .avatar p,
.user-dropdown .select .avatar p,
.leads-dropdown .select .avatar p {
  font-size: 10px;
}

.custom-dropdown .custom-dropdown-menu li .avatar p,
.custom-dropdown .select .avatar p,
.user-dropdown .user-dropdown-menu li .avatar p,
.user-dropdown .select .avatar p,
.leads-dropdown .leads-dropdown-menu li .avatar p,
.leads-dropdown .select .avatar p {
  color: #fff;
}

/* Upload Csv Modal */
.upload-csv {
  width: 100%;
  height: 200px;
  border: 1px dashed #bac3c6;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.upload-csv.over,
.upload-csv:hover {
  border: 1px solid var(--primary-color);
}

/* Dashboard Modals */
#adminOnboard .modal-content {
  border-radius: 30px !important;
}

#adminOnboard .modal-header {
  border-top-right-radius: 30px !important;
  border-top-left-radius: 30px !important;
  border-bottom: none;
}

#adminOnboard .modal-body h5 {
  color: #06232c;
}

#adminOnboard .modal-body p {
  font-size: 14px;
}

#adminOnboard .modal-footer a {
  color: #001a03;
  font-size: 13px;
}

#adminOnboard .modal-footer p {
  color: #596b71;
  font-size: 13px;
  opacity: 60%;
}

/* Dashboard Styles */
.dash-main,
.dash-footer,
.dash-header .navbar {
  padding-left: 200px !important;
}

.dashboard-links {
  font-size: 12px;
}

#welcome-sec {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #e2f1ff;
  box-shadow: 0 1px 2px#0088FF50;
  border-radius: 10px;
}

#welcome-sec img {
  order: 1;
  width: 100%;
}

#welcome-sec .welcome-greeting {
  order: 2;
}

#welcome-sec .welcome-greeting h1 {
  color: var(--dark-blue);
  font-weight: 600;
  font-size: 1.7rem;
}

#welcome-sec .welcome-greeting p {
  color: var(--dark-blue);
}

#welcome-sec .welcome-greeting .btn-primary {
  box-shadow: 0px 1px 3px #00000033;
}

.activity-grid {
  display: grid;
}

#activity-sec #activityCards {
  order: 2;
}

#activity-sec h5 {
  color: var(--dark-grey);
  font-weight: 500;
}

#activity-sec .analytics {
  height: 245px;
}

.activity-text h6 {
  font-weight: normal;
  text-align: left;
}

.activites .activity .activity-details,
.notification {
  display: flex;
  align-items: center;
}

.activites .activity .activity-details .avatar,
.notification .avatar {
  height: 50px;
  width: 50px;
  align-self: flex-start;
}

.number-stat p {
  color: var(--dark-grey);
  font-size: 13px;
  font-weight: 200;
}

.number-stat h5 {
  font-size: 1.6rem;
  color: var(--dark-grey);
  font-weight: 500;
}

.num-stat-grid .number-stat:hover {
  background-color: var(--input-bg);
  cursor: pointer;
}

.time {
  color: var(--placeholder-grey);
  font-size: 12px;
}

.number-stat {
  box-shadow: 0 1px 2px #55555552;
  display: flex;
  align-items: center;
  border-radius: 3px;
  height: 100%;
}

.chart-container {
  box-shadow: 0 1px 2px #55555552;
  border-radius: 3px;
}

.chart-container p {
  font-size: 14px;
  color: var(--dark-grey);
  font-weight: 400;
}

#quick-links>p {
  color: var(--dark-grey);
  font-weight: 500;
}

.quick-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 90px;
  width: 90px;
  border-radius: 50%;
  box-shadow: 0 1px 2px #5555551f;
  transition: transform 0.2 ease;
}

.quick-link:hover {
  transform: scale(1.025);
}

.quick-link .badge {
  position: absolute;
  top: -5px;
  left: 70%;
  border-radius: 50%;
  font-weight: normal;
  background-color: #e54600;
  box-shadow: none;
  padding: 5px 8px;
}

.quick-link img {
  width: 30px;
}

#toProfile {
  background-color: rgba(224, 135, 45, 0.9);
}

#toReport {
  background-color: #c2ace8;
}

#toAnnouncement {
  background-color: #364962;
}

#toCalendar {
  background-color: #dd6c8a;
}

#toPolicy {
  background-color: #6eba7d;
}

#toEmployee {
  background-color: #8c8ece;
}

#toTimeoff {
  background-color: #0088ff;
}

/* Reports Dashboard */
#reports-nav {
  width: 100%;
}

#reports-nav ul {
  display: flex;
  border-bottom: 0.2px solid #e8e8e8;
}

#reports-nav ul li a {
  color: var(--dark-grey);
  font-weight: 400;
  display: inline-block;
}

#reports-nav ul li a.active {
  border-bottom: 3px solid var(--primary-color);
  color: var(--primary-color);
}

#no-drafts {
  height: 70vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#no-drafts p {
  color: var(--dark-blue);
}

/* Assign-Report Modal */
.assign-report h6 {
  color: #06232c;
}

.assign-report p {
  color: #212121;
}

/* Reports Views Page */
#resolution {
  position: absolute;
  top: 0;
  background: #fff;
  box-shadow: 0 0 2px #00000029;
  display: none;
}

#resolution.showing {
  display: block;
}

#back-link,
#back-link i {
  color: var(--dark-grey);
}

#resolution .avatar {
  height: 35px;
  width: 35px;
  font-size: 16px;
}

#resolution .btn.btn-sm {
  font-size: 13px;
}

#resolution .resolution {
  border-bottom: 0.2px solid #70707058;
}

#resolution h5 {
  font-size: 24px;
  font-weight: 900;
  color: var(--darker-blue);
}

#resolution .bold {
  font-weight: 700;
}

#resolution .small {
  font-size: 12px;
  color: #596b71;
}

.comments .small {
  font-size: 10px;
  color: var(--placeholder-grey);
}

.comments .chat .message {
  border: 1px solid #55555552;
  border-radius: 5px;
}

.comments .chat i {
  color: var(--dark-grey);
}

.comments .chat #show-replies {
  color: var(--dark-grey);
  font-weight: 500;
  font-size: 12px;
}

.comments .chat .msg {
  font-weight: 500;
  font-size: 14px;
}

/* Admin Views */
.comments .select-wrapper {
  width: 150px;
  border: none;
  border-radius: 4px;
  box-shadow: none;
  background: #e2f1ff;
}

.comments .select-wrapper .form-control {
  color: var(--primary-color);
}

.md-form input[type="text"]:not(.browser-default) {
  border-bottom: none;
}

.select-wrapper span.caret {
  right: 5px;
}

.comments textarea {
  border: 2px solid #e2f1ff;
}

.comments a#cancelComment {
  color: var(--dark-grey);
}

/* Your Report Modal */

.yourReport p {
  font-size: 16px;
}

/* Add Photo Page */

.image-preview {
  width: 100%;
  height: 270px;
}

.dropzone {
  border: 2px dashed #00000029;
  border-radius: 5px;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

.dropzone.hover {
  border-color: var(--primary-color);
}

.caption {
  background: var(--input-bg);
  border: 1px solid var(--placeholder-grey);
  border-radius: 4px;
  color: var(--dark-blue);
}

.caption::placeholder {
  color: var(--placeholder-grey);
}

.caption:focus {
  outline: none;
}

.icons {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  display: none;
  transition: display 1s ease;
}

.icons a i {
  color: #fff;
}

.icons a#icon-delete i:hover {
  color: red;
}

.icons a#icon-change i:hover {
  color: var(--primary-color);
}

.image-thumbnail {
  width: 100%;
  height: 270px;
  border-radius: 5px;
  box-shadow: 1px 2px 4px var(--input-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.image-thumbnail:hover>.icons {
  display: block;
}

.image-thumbnail:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  border-radius: 5px;
  opacity: 0.4;
}

.photo-row {
  width: 100%;
  overflow: auto;
}

.add-another {
  width: 100%;
  height: 270px;
  overflow: hidden;
  border: 2px dotted #00000029;
  border-radius: 5px;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  align-self: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  align-items: center;
}

.add-another:hover {
  border-color: #56a362;
}

/* Settings Page */
#settings {
  border-radius: 5px;
  height: 100vh;
}

#settings #personalDetails .avatar {
  width: 75px;
  height: 75px;
}

#settings .page-header h3 {
  color: var(--placeholder-grey);
  font-weight: 900;
}

#settings p {
  color: var(--dark-grey);
}

#settings #personalDetails a,
#settings h5,
#settings label {
  color: var(--dark-grey);
  font-weight: 500;
}

#settings h6 {
  color: #06232c;
  font-weight: 600;
  font-size: 1.1rem;
}

#settings #generalSettings h6 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--dark-grey);
}

#settings .change-warning {
  font-size: 12px;
}

/* Report */
.reports-table {
  border: 2px solid #f6f6f6;
}

/* Coming soon */
#coming_soon {
  border-radius: 5px;
  height: 80vh;
  box-shadow: 0 1px 2px #ccc;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#coming_soon h1 {
  font-weight: 500;
  color: var(--darker-blue);
}

#coming_soon p {
  font-size: 20px;
  color: var(--placeholder-bg);
  font-weight: 400;
  line-height: 2;
}

.reports-table thead,
.reports-table tfoot {
  background: #f6f6f6;
}

.reports-table thead th {
  color: var(--dark-grey);
  font-weight: 500;
}

.table-ctrls,
.table-ctrls i {
  color: var(--dark-grey);
}

.table-ctrls .dropdown-lt {
  background: var(--light-purple);
  border: 0.2px solid var(--primary-color);
  border-radius: 5px;
}

.table-ctrls .dropdown .btn {
  box-shadow: none;
}

.table-ctrls .dropdown {
  border: 0.2px solid var(--placeholder-grey);
  border-radius: 4px;
}

.deleteBtn {
  height: 80%;
}

.table-ctrls .deleteBtn,
.table-ctrls .deleteBtnMobile {
  display: none;
}

.table-ctrls .deleteBtn.show,
.table-ctrls .deleteBtnMobile.show {
  display: inline-block;
}

#showOlder,
#showNewer {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 45%;
  text-align: center;
}

#showOlder:hover,
#showNewer:hover {
  background-color: var(--light-blue);
  cursor: pointer;
}

/* Users */
.no-users {
  height: 350px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid #f6f6f6;
}

#employeesTable .avatar {
  height: 40px;
  width: 40px;
  font-size: 16px;
}

.employee-details a {
  color: var(--primary-color) !important;
  font-weight: 600;
}

.employee-details p {
  color: var(--dark-grey);
  font-weight: 100;
}

/* Add Users */
#users-selected {
  background: var(--light-blue);
  color: var(--primary-color);
  display: inline-block;
  font-weight: 500;
  font-size: 0.8rem;
  border-radius: 50px;
}

#addUsersForm .custom-select {
  color: var(--placeholder-grey);
}

.pg-header h4 {
  font-weight: 700;
  color: var(--darker-blue);
}

.pg-header p {
  font-weight: 400;
  color: var(--darker-blue);
}

/* Alerts */
.alert-success {
  background: rgba(242, 249, 244, 100%);
  border-color: var(--light-blue);
}

.alert-success p {
  color: #212121;
  font-weight: lighter !important;
}

/* Admin Dashboard */
.admin-welcome {
  background: var(--light-purple);
  border-radius: 8px;
}

.admin-welcome p {
  color: #1f2b5d;
}

.admin-activities>h6 {
  font-size: 1.1rem;
}

.admin-activities>h6 span {
  font-size: 0.8em;
}

.activity-card {
  box-shadow: 0 1px 2px #55555552;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.activity {
  border-bottom: 0.2px solid #70707043;
  padding: 15px 0;
  display: flex;
}

.activity-card-header {
  background-color: #ebe0ff;
  display: flex;
  align-items: center;
  padding: 15px 20px;
}

.activity-card-header img {
  width: 20px;
  height: 20px;
}

.activity-card-body {
  padding: 0 20px;
  min-height: 150px;
  max-height: 370px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
}

.activity-card-body .activity {
  width: 100%;
}

.activity>div:first-child {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 60%;
  flex: 0 0 60%;
  max-width: 60%;
}

.activity-card-body label {
  font-size: 13px;
  font-weight: 400;
  margin-bottom: 10px;
  color: var(--dark-grey);
}

.activity-card-body .employee-details {
  font-size: 14px;
}

.activity-card-body .employee-details a {
  font-weight: normal;
}

.activity-card-body .avatar h1 {
  font-size: 16px;
}

.admin-analytics h3 {
  color: var(--dark-blue);
  font-weight: 700;
}

.admin-personal h5 {
  color: var(--dark-blue);
  font-size: 22px;
  font-weight: 300;
}

.admin-personal p {
  color: var(--dark-blue);
  font-size: 14px;
}

.admin-analytics .chart-container {
  width: 100%;
  height: 230px;
}

/* Analytics Page */
#analyticsCanvas,
#analyticsTable {
  box-shadow: 0 1px 2px #00000029;
}

.analytics-filter .btn-primary {
  background-color: #0088ff22 !important;
  color: var(--dark-blue);
  border: 1px solid var(--primary-color);
  box-shadow: none;
}

.analytics-filter .btn {
  box-shadow: 0px 2px 4px #55555552;
}

/* Employees Table */
.profile-pct {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  color: #fff;
  font-size: 13px;
}

.profile-pct.profile-high {
  background-color: #6dd390;
}

.profile-pct.profile-mid {
  background-color: #ffa852;
}

.profile-pct.profile-low {
  background-color: #ff6074fc;
}

/* User Profile Pages */
#profile-header {
  width: 100%;
  max-height: 250px;
  height: 33vh;
  display: flex;
  background: url("../assets/img/profile-bg.png") no-repeat center center/cover;
}

#profile-header .profile-info {
  flex: 1;
  align-self: center;
}

#profile-header .avatar {
  width: 110px;
  height: 110px;
}

#profile-header .info-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}

#profile-header .info-content p#user_title {
  color: #b1bcc7;
  font-size: 14px;
}

#profile-body {
  /* background-color: #f7fbff; */
  height: auto;
}

#profile-nav {
  background-color: #fff;
  /* box-shadow: 0 1px 2px #65656560; */
  display: none;
}

#profile-nav li {
  width: 100%;
  border-bottom: 0.2px solid #00000029;
  border-right: 0.2px solid #00000029;
  padding: 0;
}

#profile-nav li:hover {
  background-color: #ddefff;
}

#profile-nav li a {
  color: var(--darker-blue);
  font-weight: 400;
  display: block;
  padding: 1.1rem 1.4rem;
  width: 100%;
  height: 100%;
}

#profile-nav li a.active {
  background-color: #f8f5ff;
  border-right: 5px solid var(--primary-color);
}

.profile-content {
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 1px 2px #48484829;
}

.profile-content #refereesTable td {
  font-size: 13px !important;
}

.profile-content-item {
  margin-right: 5rem;
  margin-bottom: 1.3rem;
  position: relative;
}

.profile-content-item label {
  font-size: 13px;
  margin-left: 5px;
  margin-bottom: 0.2rem;
  color: #3d5974;
}

.profile-content-item .form-control {
  padding-left: 9px !important;
  min-width: 219px;
  color: #3d5974;
  border: 1px solid var(--input-bg);
}

.profile-content-item .form-control:hover {
  background-color: #f0f5fa;
}

.profile-content-item .form-control:focus {
  border: 1px solid var(--primary-color);
  border-radius: 4px;
}

.profile-content-item .btn {
  box-shadow: none;
  border: 0.2px solid #3d5974;
  border-radius: 4px;
  color: #1c1d1d;
  padding: 2px;
  font-size: 14px;
  line-height: 0;
  margin: 0 3px 0 0;
}

.profile-content-item .material-icons {
  font-size: 20px;
}

.profile-content-item .select-wrapper {
  background-color: #fff;
  min-width: 219px;
  border: 1px solid var(--input-bg);
}

.profile-content-item .select-wrapper>span.caret {
  display: none;
}

.profile-content-item .select-wrapper:hover {
  background-color: #f0f5fa;
}

.profile-content-item .select-wrapper:hover span.caret {
  display: inline;
}

/* TimeOff */
.tab-caption {
  color: #364962;
  font-weight: 500;
}

#timeoffTypesTable th,
#timeoffAppsTable th {
  padding: 0.75rem;
}

#timeoffApplications .filter-controls,
#timeoffHistory .filter-controls {
  width: auto;
}

.used {
  color: #d0021b !important;
}

.available {
  color: #1bb715 !important;
}

#timeoffDetailsModal .modal-body .title {
  font-size: 0.9rem;
  color: #6c8095;
  margin-bottom: 0.5rem;
}

#timeoffDetailsModal .modal-body .value {
  color: var(--darker-blue);
  font-weight: 300;
}

/* Create Leave Type */
#newLeaveTypeForm .mdb-select {
  background-color: #fff;
  width: 97%;
}

.modal .select-wrapper {
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  padding-left: 0.75rem;
}

.modal .select-wrapper input {
  margin-bottom: 0;
}

#newLeaveTypeForm .mdb-select input {
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  padding-left: 0.75rem;
}

#newLeaveTypeForm label {
  font-size: 0.9rem;
  color: var(--dark-grey);
  font-weight: 500;
}

#newLeaveTypeForm .select-wrapper .form-control {
  color: var(--dark-grey);
}

#timeDayConfigModal .modal-body h6,
#timeDayConfigModal .modal-body .setup p #timeDayConfigModal .modal-body label {
  color: var(--dark-grey);
  font-size: 14px;
}

#timeDayConfigModal .modal-body h6 {
  font-weight: 600;
}

#timeDayConfigModal .modal-body .footer p {
  font-size: 13px;
  color: var(--dark-grey);
}

#timeDayConfigModal .form-check-input[type="checkbox"]+label:before,
#generalSettings .form-check-input[type="checkbox"]+label:before {
  width: 25px;
  height: 25px;
  background: #dfe2e3;
  border-color: transparent;
}

#timeDayConfigModal .form-check-input[type="checkbox"]:checked+label:before,
#generalSettings .form-check-input[type="checkbox"]:checked+label:before {
  width: 10px;
  height: 1.37rem;
  background-color: #fff;
  border-bottom-color: var(--primary-color);
  border-right-color: var(--primary-color);
}

#timeDayConfigModal .form-check-input[type="checkbox"]+label,
#generalSettings .form-check-input[type="checkbox"]+label {
  padding-left: 0px;
  padding-top: 35px;
  font-size: 15px;
}

/* View Leave Info Page */
.info-content {
  border: 1px solid #76757529;
  border-radius: 4px;
  /* width: 75%; */
}

.info-content .info-item span {
  color: #6c8095;
  font-size: 0.9rem;
  font-weight: 400;
}

.info-content .info-item .item-details p {
  color: var(--dark-grey);
  font-weight: lighter;
}

.info-content .info-item .item-details p.title {
  color: var(--darker-blue);
  font-weight: 500;
}

.fakerDropdownInput {
  position: relative;
  width: 100%;
}

.fakerDropdownInput>[class*="fa-"] {
  position: absolute;
  right: 15px;
  top: calc(50% - 16px / 2);
}

.fakerDropdownInput #whoIsEntitledID {
  cursor: pointer;
  padding-right: 30px;
}

.fakerDropdownInput #whoIsEntitledID::placeholder {
  color: #333333;
}

.fakerdropdown--item .menu>.item.active.selected {
  display: none;
}

.fakerdropdown--item .menu {
  height: 100%;
  padding: 10px;
  border: 1px solid #cccccc;
}

.fakerdropdown--item .menu {
  font-size: 14px;
  height: 100%;
  padding: 10px;
  border: 1px solid #cccccc;
  position: relative;
}

.fakerdropdown--item .menu>.item:not(.disabled) {
  position: relative;
  padding-left: 20px;
  cursor: pointer;
}

.fakerdropdown--item .menu>.item:not(.disabled):before {
  content: "";
  background: #e2e8ed;
  width: 15px;
  height: 15px;
  position: absolute;
  left: 0;
  top: calc(50% - 15px / 2);
}

.fakerdropdown--item .menu>.item:not(:last-child) {
  margin-bottom: 6px;
}

.fakerdropdown--item .menu .menu-search {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 10px;
}

.fakerdropdown--item .menu .menu-search [class*="fa-search"] {
  position: absolute;
  top: calc(50% - 14px / 2);
  right: 10px;
  color: #424242;
}

.fakerDropdownInput.active #whoIsEntitledID {
  border-radius: 4px 4px 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.fakerDropdownInput #whoIsEntitledID {
  min-height: calc(1.5em + 0.75rem + 2px);
  height: 100%;
}

.fakerdropdown--item .d-flex-col-6 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.fakerdropdown--item .d-flex-col-6 {
  flex: 0 0 50%;
  max-width: 50%;
  height: 100%;
  min-height: 145px;
  max-height: 145px;
}

.fakerdropdown--item.active .menu {
  border-top: 0;
}

a.fakerDropdownMulti-label {
  font-size: 13px;
  background: #e2e2e2;
  padding: 5px 10px;
  line-height: 1;
  border-radius: 3px;
  cursor: default;
}

a.fakerDropdownMulti-label>.fas.fa-times {
  color: #2a2a2a;
  font-size: 14px;
  margin-left: 5px;
  cursor: pointer;
  width: 15px;
  height: 15px;
  text-align: center;
}

#whoIsEntitledID .fakerDropdownMulti-label:not(:last-child) {
  margin-right: 5px;
}

#whoIsEntitledID .fakerDropdownMulti-label {
  margin-bottom: 5px;
}

/* Organization Policy Styles */
.docDropzone {
  height: 150px;
  border-width: 1px;
  font-size: 12px;
}

.docDropzone:hover {
  cursor: pointer;
}

/* Announcements Styles */
.note-toolbar {
  background: #fff !important;
}

.note-editor.note-frame {
  border: 1px solid #ced4da !important;
}

.note-btn-group {
  box-shadow: none !important;
}

.note-btn-group .note-btn {
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.note-btn-group .note-btn i {
  color: #333;
}

#no-announcements {
  height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#publish_button {
  position: sticky;
}

#newAnnouncementForm .card {
  box-shadow: none;
  border-radius: 0.25rem;
}

#newAnnouncementForm label {
  font-weight: 500;
  color: var(--dark-grey);
}

#newAnnouncementForm label span {
  font-weight: normal;
}

#announcement-dropzone {
  height: 300px;
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#announcement-dropzone.populated:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #333;
  opacity: 0.3;
  border-radius: inherit;
}

#announcement-dropzone p {
  color: var(--placeholder-grey);
  font-weight: normal;
}

.announcement-title {
  color: var(--darker-blue);
}

#announcementsComments>p {
  color: var(--darker-blue);
  font-weight: 500;
}

.cmt-links .cmt-cancel {
  color: var(--dark-grey);
  opacity: 0.52;
}

.like-icon {
  background-color: #f6f6f6;
  padding: 5px 10px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  color: #002648;
  transition: transform 0.05s ease;
}

.like-icon:hover {
  color: var(--primary-color);
  transform: scale(1.05);
}

.announcementComment {
  font-size: 12px;
}

.announcementComment .commenter {
  display: flex;
  align-items: center;
  color: var(--dark-grey);
}

.announcementComment .avatar {
  width: 28px;
  height: 28px;
}

.announcementComment .avatar h1 {
  font-size: 14px;
}

.announcementComment .comment-body p {
  color: var(--dark-grey);
}

.announcementComment .comment-body .comment-date {
  color: var(--placeholder-grey);
  font-size: 10px;
  font-weight: normal;
}

/* Timesheet Styles */
.timesheet-filters .btn-outline-light {
  height: 100%;
  padding: 0.9rem 20px;
  margin: 0;
  color: #06232c !important;
  border: 1px solid var(--input-bg) !important;
  font-size: 16px !important;
}

.task-input {
  background: #f6f6f6;
  border-radius: 4px;
  width: 80px;
  height: 35px;
  border: none;
  outline: none;
  padding: 7px 20px;
  font-size: 13px;
}

.payslip-input {
  background: #f6f6f6;
  border-radius: 4px;
  width: 100px;
  height: 35px;
  border: none;
  outline: none;
  padding: 7px 20px;
  font-size: 13px;
}

#timesheetTable .add-task {
  width: 600px;
  position: relative;
}

#timesheetTable button {
  background-color: transparent;
  color: #c4c4c4;
  border: none;
  outline: none;
}

#timesheetTable a {
  color: #c4c4c4;
}

#timesheetTable .add-task .new-task {
  position: absolute;
  top: 95%;
  left: 20%;
  z-index: 5;
  background-color: #fff;
  border-radius: 4px;
  font-size: 14px;
  box-shadow: 1px 2px 4px var(--placeholder-grey);
  display: none;
}

#timesheetTable .add-task .new-task .form-control {
  background-color: #f6f6f6;
  height: auto;
  width: 300px;
  border: none;
}

#timesheetTable .add-task .new-task .new-task-search {
  border-bottom: 1px solid #c4c4c4;
}

#timesheetTable .add-task i {
  color: #6c8095;
}

#timesheetTable .add-task .client p,
#timesheetTable .add-task .client button {
  color: #707070;
  font-weight: 500;
}

#timesheetTable .add-task p {
  margin-bottom: 0;
}

#timesheetTable .add-task .projects,
#timesheetTable .add-task .task {
  display: none;
}

#timesheetTable .add-task .project p,
#timesheetTable .add-task .project button {
  color: var(--primary-color);
}

#timesheetTable .add-task .task button {
  color: #424242;
  font-weight: 300;
}

#projectsTable button:not(.btn) {
  color: #596b71;
  border: none;
  background: transparent;
  outline: none;
}

#projectsTable i {
  color: #596b71;
}

#projectsTable .tasks-sec {
  position: relative;
}

#projectsTable .tasks-sec .show-tasks {
  position: absolute;
  top: 100%;
  left: 20%;
  z-index: 5;
  width: 300px;
  background-color: #fff;
  border-radius: 4px;
  font-size: 14px;
  box-shadow: 1px 2px 4px var(--placeholder-grey);
  display: none;
}

#projectsTable .tasks-sec .show-tasks .task-row {
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#projectsTable .tasks-sec .show-tasks .task-row:hover {
  background: rgba(196, 196, 196, 0.24);
  cursor: pointer;
}

/* #timesheetTable .add-task .new-task */

/* Website Header */

#showcase {
  background: linear-gradient(109.06deg, #271745 10.13%, #46287c 81.22%);
  min-height: 900px;
  position: relative;
  display: flex;
  flex-direction: column;
}

#showcase .navbar {
  background: transparent;
  box-shadow: none;
}

#showcase .top-nav-collapse {
  background-color: var(--primary-color);
}

#showcase .navbar a {
  color: #fff;
  font-weight: 100;
}

#report-container {
  padding-bottom: 67px;
}

.showcase-content {
  margin-top: 7em;
  color: #fff;
  position: relative;
  z-index: 1;
}

.showcase-content h1 {
  font-weight: 700;
  font-size: 2.15rem;
}

#showcase-text {
  max-width: 995px;
  align-items: center;
  text-align: center;
  margin: auto;
}

.showcase-content h1 span.anytime {
  display: inline-block;
  position: relative;
}

.showcase-content h1 span.anytime::before {
  content: "";
  display: block;
  position: absolute;
  height: 15px;
  bottom: 5px;
  width: 100%;
  background-color: var(--primary-color);
  z-index: -1;
}

.showcase-content h1 span.anywhere {
  display: inline-block;
  position: relative;
}

.showcase-content h1 span.anywhere::before {
  content: "";
  display: block;
  position: absolute;
  height: 15px;
  bottom: 5px;
  width: 100%;
  background: rgb(224, 112, 0);
  z-index: -1;
}

.showcase-content .btn-primary {
  font-size: 1rem;
}

.showcase-content h1 span.cursor {
  display: inline-block;
  background-color: #fff;
  margin-left: 0.1rem;
  width: 2.5px;
  height: 50px;
  animation: blink 1s infinite;
}

.container p span.cursor.typing {
  animation: none;
}

@keyframes blink {
  0% {
    background-color: #fff;
  }

  49% {
    background-color: #fff;
  }

  50% {
    background-color: transparent;
  }

  99% {
    background-color: transparent;
  }

  100% {
    background-color: #fff;
  }
}

.showcase-content p {
  font-weight: 200;
  line-height: 1.5;
  color: #f6f6f6;
  font-size: 18px;
}

.showcase-content img {
  max-width: 100%;
  display: block;
  margin: auto;
}

/* timesheet */

#timesheet {
  margin-top: -30em;
}

.mosaic_item {
  margin-left: -11em;
  /* margin-top: -30em; */
}

@media screen and (max-width: 760px) {
  .mosaic_item {
    display: none;
  }
}

/* Website Create Report Section */
#create-reports {
  position: relative;
}

.orange-underline {
  border-bottom: 3px solid #e6903a;
}

#create-reports h4,
#features h4 {
  font-weight: 700;
  color: var(--darker-blue);
  line-height: 1.5;
}

#create-reports p {
  color: var(--dark-grey);
  line-height: 2;
}

#create-reports p.bold {
  color: var(--darker-blue);
  font-weight: 500;
}

span.bold {
  color: var(--darker-blue);
  font-weight: 700;
}

#features {
  position: relative;
}

#features #features-title p {
  color: var(--dark-grey);
  font-size: 15px;
  line-height: 2;
}

#create-reports h6,
#features h5 {
  font-weight: 700;
}

#features h5 {
  color: var(--darker-blue);
}

#features .feature {
  background-color: #fff;
  box-shadow: 0 3px 6px #00000014;
  border-radius: 4px;
  padding: 30px;
}

#features .feature img {
  width: 50px;
  margin-bottom: 15px;
}

#features .feature p {
  color: var(--dark-grey);
  line-height: 2;
  font-size: 14px;
}

#features .feature h5 {
  font-size: 1.15rem;
}

#create-reports ul li {
  display: flex;
}

/* Call to action */
#call-to-action {
  height: 438px;
  width: 100%;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  margin: auto;
  background-color: #331e5b;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-left: 2em;
  padding-right: 2em;
}

#call-to-action>div {
  color: #fff;
  text-align: center;
}

#call-to-action h2 {
  font-weight: 600;
}

#call-to-action p {
  font-weight: lighter;
}

#call-to-action img {
  display: none;
}

/* Pricing Page */
#pricing-sec h2 {
  color: var(--darker-blue);
}

#pricing-sec .switches-container {
  margin-left: auto;
}

/* Cookie Consent Popup */
#consent-popup {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  padding: 20px;
  margin: auto;
  background: var(--light-blue);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1200px;
  transform: translate3d(0, 150%, 0);
  transition: transform 0.3s cubic-bezier(0.6, 0.4, 0, 1);
}

#consent-popup.is-visible {
  transform: translate3d(0, 0, 0);
}

#consent-popup div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}

#consent-popup div span {
  color: rgba(0, 0, 0, 0.8);
  flex-grow: 1;
  line-height: 1.4em;
}

#consent-popup .btn {
  display: block;
  width: 100%;
}

/* Onboarding Popover */
.tour-backdrop {
  background-color: #27272795 !important;
}

.popover {
  position: relative;
}

#endTour {
  position: absolute;
  top: 20px;
  right: 25px;
}

#endTour i {
  color: #a2a2a2;
}

.popover-title {
  background-color: transparent !important;
  color: #06232c;
  padding: 8px !important;
  border-bottom: none !important;
}

.popover-content {
  color: #596b71;
  opacity: 90%;
  font-weight: normal !important;
  padding: 5px 9px 20px 9px !important;
}

.popover-footer {
  padding: 5px;
  border-top: 1px solid #7070704e;
}

.popover-footer .pop-count {
  flex: 1;
  color: #596b71;
  opacity: 60%;
}

.popover-footer a {
  color: #6c8095;
}

.popover.right>.arrow {
  border-right-color: transparent !important;
}

/* footer */

#footer {
  /* background: #ffffff; */
  background: var(--light-purple);
  color: #000;
  /* color: #ffffff; */
}

#footer a {
  font-family: Poppins;
  font-style: normal;
  font-weight: normal;
  font-size: 13px;
  line-height: 16px;
  /* color: #000000; */
}

#footer a:hover {
  color: var(--primary-color);
}

/* 
#footer hr {
  background: var(--primary-color);
} */

#footer p {
  font-family: Poppins;
  font-style: normal;
  font-weight: normal;
  font-size: 13px;
  line-height: 16px;
  /* color: #000000; */
}

#footer-content {
  border-bottom: 1px solid var(--dark-blue);
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
}

.footer-sec-links {
  display: flex;
  gap: 2rem;
}

#footer #footer-about a {
  color: var(--primary-color);
  text-decoration: underline;
  font-weight: lighter;
}

/* #footer #footer-follow a,
#footer #footer-follow a i {
  color: #0000;
}

#footer #footer-follow a:hover,
#footer #footer-follow a:hover i {
  color: #0000;
} */

#footer .footer-sec p.footer-sec-title {
  font-weight: 400;
}

#footer .footer-sec a {
  display: block;
}

/* FAQs */
.website-header,
.website-footer {
  background-color: #3b2268;
  color: white;
}

.faq-accordion {
  color: var(--primary-color);
  padding-top: 1rem;
  padding-bottom: 2rem;
}

.accordion-button:not(.collapsed) {
  color: var(--primary-color);
  background-color: #f8f5ff;
}

.accordion-header button {
  color: var(--primary-color);
}

.accordion-body {
  font-size: 15px;
  background-color: #f8f5ff;
}

.website-footer .row {
  border-bottom: 1px solid var(--primary-color);
}

.footer-nav {
  font-size: 15px;
}

.website-footer ul {
  padding-left: 0;
}

.sm-logo img {
  width: 60%;
}

.faq-accordion .accordion-body,
.faq-accordion .accordion-button {
  padding: 1rem 4rem;
}

/* website-contact-us page */
.a-nav,
.a-nav .navbar {
  background-color: #3b2268;
}

.a-nav .navbar {
  box-shadow: none;
}

.a-nav h2 {
  font-weight: 600;
}

.a-nav p {
  font-weight: 100 !important;
}

.a-nav p.light {
  color: #9c9c9d;
  font-size: 13px;
}

.message h4 {
  color: var(--darker-blue);
  font-weight: 600;
}

.message label {
  font-weight: 300;
}

.list-inline-item a {
  color: #ffffff;
}

.grey-1 {
  color: var(--dark-grey);
  font-weight: 200;
}

/* website success modal */
.success {
  color: #06232c;
}

.success-text {
  color: #605d71;
}

/* About us page */
.dark-text {
  margin-top: 60px;
  margin-bottom: 80px;
}

.dark-text h3 {
  color: var(--darker-blue);
  font-weight: 600;
}

.dark-text p {
  color: #424242;
  font-size: 16px;
  line-height: 1.8rem;
  text-align: justify;
  text-justify: inter-word;
}

/* Privacy Policy */
.privacy-policy {
  position: relative;
  /* margin-top: 15rem; */
}

.privacy-policy h4 {
  color: var(--darker-blue);
  font-weight: 600;
}

.privacy-policy p {
  font-size: 15px;
  color: var(--darker-blue);
  line-height: 1.7;
}

.privacy-policy #pp-nav {
  position: sticky;
  top: 50px;
}

.privacy-policy #pp-nav li a {
  color: var(--darker-blue);
}

.privacy-policy #pp-nav li a.active {
  color: var(--primary-color);
  font-weight: 500;
}

#pp-callToAct {
  position: relative;
  z-index: 2;
}

#pp-callToAct h2 {
  color: var(--darker-blue);
  font-weight: 700;
}

#pp-callToAct p {
  color: var(--dark-grey);
}

.notification-symbol {
  padding: 4px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 2px;
}

.reply_wrapper {
  border-radius: 5px;
  background-color: #e8e8e8;
  padding: 5px;
  margin-bottom: 5px;
}

.report-content-field .edit-previewed-content {
  display: none;
}

.report-content-field:hover .edit-previewed-content {
  display: block;
}

/* Term of Service */
.tos-date {
  font-size: 12px;
  color: #9c9c9d;
}

.tos {
  color: var(--darker-blue);
}

.tos h4 {
  font-weight: 500;
}

.tos p {
  font-size: 14px;
  padding-bottom: 0.5rem;
  text-align: justify;
  text-justify: inter-word;
}

#verification-send {
  color: #00afff;
  text-decoration: underline;
  border: none;
  background: transparent;
}

.w15 {
  width: 15% !important;
}

.w70 {
  width: 70% !important;
}

.qc-display-flex {
  display: flex !important;
}

.qc-justiy-content-between {
  justify-content: space-between !important;
}

.qc-padding-35 {
  padding: 35px !important;
}

.qc-announcement-new-notification {
  margin-left: 5px;
  font-size: 13px;
  padding: 2px 4px;
  background: #2d9d12;
  color: #ffffff;
  border-radius: 2px;
}

.col-5.qc-col--2 {
  flex: 0 0 50%;
  max-width: 50%;
}

@media only screen and (min-width: 576px) {
  .modal .qc-modal--default {
    max-width: 650px !important;
  }

  /* .table-responsive {
    width: 75% !important;
  } */
}

@media (min-width: 992px) {
  .login-btn {
    display: none !important;
  }

  .wmd-7 {
    width: 7% !important;
  }

  .wmd-85 {
    width: 85% !important;
  }
}

/* 404 page */
.error-page {
  color: var(--darker-blue);
  padding: 1rem 34%;
}

.error-page h5 {
  font-weight: 600;
}

.qclose-margin-bottom-30 {
  margin-bottom: 30px !important;
}

@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }

  100% {
    background-position: 468px 0;
  }
}

.placeholder {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: #f6f7f8;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background-size: 800px 104px;
  height: 10px;
  position: relative;
}

/* User Guide Styles */
.guide h3 {
  font-weight: 600;
}

.guide p {
  font-weight: 300;
  font-size: 16px;
}

.guide li {
  list-style: auto;
  font-size: 15px;
  margin-bottom: 20px;
}

.guide img {
  max-width: 100%;
}

.badge-red {
  background-color: #ff4545;
  font-size: 7px;
  padding: 4px;
  border-radius: 4px;
}

.d-flex-center {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.coming-template {
  display: flex;
  flex-direction: column;
}