/*!
Theme Name: Purple Moon Designs
Theme URI: https://sw-es.co.uk/
Author: Purple Moon Designs
Author URI: https://www.purplemoondesigns.co.uk
Description: This theme was developed for SWES Glasgow by Purple Moon Designs. 
Version: 1.0.0

*/

/*******************************
================================
GLOBAL
================================
*******************************/

html,
body,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
textarea {
  font-family: "Nunito", sans-serif;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 130px;
}

body {
  margin: 0;
}

img {
  width: auto;
  max-width: 100%;
  border-style: none;
}

.content_wrap {
  max-width: 1800px;
  margin: 0 auto;
  width: 95%;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999999;
  background: #fff;
  box-shadow: 30px 30px 60px rgb(0 0 0 / 30%);
}

.row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.pd-50 {
  padding: 50px 0px;
}
.shadowbox {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.row.inline-table {
  display: inline-table;
}

.relative {
  position: relative;
}

.block {
  display: inline-block;
}

.short {
  width: 90%;
  margin: 0 auto;
}

.cnt_10 {
  width: 10%;
  -ms-flex-pack: inherit;
  -webkit-justify-content: inherit;
  justify-content: inherit;
}

.cnt_20 {
  width: 20%;
  -ms-flex-pack: inherit;
  -webkit-justify-content: inherit;
  justify-content: inherit;
}

.cnt_25 {
  width: 100%;
  -ms-flex-pack: inherit;
  -webkit-justify-content: inherit;
  justify-content: inherit;
  display: inherit;
}

.cnt_30 {
  width: 100%;
  -ms-flex-pack: inherit;
  -webkit-justify-content: inherit;
  justify-content: inherit;
}

.inline-table .cnt_30 {
  display: inherit;
}

.cnt_33 {
  width: 100%;
  -ms-flex-pack: inherit;
  -webkit-justify-content: inherit;
  justify-content: inherit;
}

.cnt_40 {
  width: 100%;
  -ms-flex-pack: inherit;
  -webkit-justify-content: inherit;
  justify-content: inherit;
}

.cnt_50 {
  width: 100%;
  -ms-flex-pack: inherit;
  -webkit-justify-content: inherit;
  justify-content: inherit;
}

.cnt_60 {
  width: 100%;
  -ms-flex-pack: inherit;
  -webkit-justify-content: inherit;
  justify-content: inherit;
}

.cnt_70 {
  width: 100%;
  -ms-flex-pack: inherit;
  -webkit-justify-content: inherit;
  justify-content: inherit;
}

.cnt_80 {
  width: 80%;
  -ms-flex-pack: inherit;
  -webkit-justify-content: inherit;
  justify-content: inherit;
}

.cnt_90 {
  width: 90%;
  -ms-flex-pack: inherit;
  -webkit-justify-content: inherit;
  justify-content: inherit;
}

.cnt_full {
  width: 100%;
  -ms-flex-pack: inherit;
  -webkit-justify-content: inherit;
  justify-content: inherit;
}

.margin-right {
  margin: 0 0 20px;
}

.mb-25 {
  margin-bottom: 25px;
}

.mb-50 {
  margin-bottom: 25px;
}

.align-center {
  align-items: center;
}

.column {
  flex-direction: column;
}

.no-wrap {
  flex-wrap: nowrap;
}

/*******************************
================================
TYPOGRAPHY
================================
*******************************/

a {
  background-color: transparent;
  text-decoration: none;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

a:hover {
  cursor: pointer;
}

p {
  margin: 0;
  line-height: 1.5;
  color: #000;
  font-size: 21px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 10px;
  line-height: 1;
}

img {
  width: auto;
  max-width: 100%;
  border-style: none;
}

h2 {
  font-size: 32px;
}

.fs-16 {
  font-size: 12px;
}
.fs-18 {
  font-size: 14px;
}

.fs-21 {
  font-size: 17px;
}

.fs-24 {
  font-size: 20px;
}

.fs-32 {
  font-size: 24px;
}
.bold {
  font-weight: bold;
}
.fw-500 {
  font-weight: 500;
}

.fw-semi {
  font-weight: 700;
}
/*******************************
================================
COLOURS
================================
*******************************/

:root {
  --green: #228b22;
  --orange: #ee8d09;
  --red: #f04949;
  --grey: #b7b7b7;
  --blue: #0f2da4;
  --pale: #d2d7e9;
  --lavender: #e9ebf4;
  --transcharcoal: rgba(29, 29, 29, 0.4);
  --charcoal: #1d1d1d;
  --dark: #18191c;
  --darkgray: #323232;
}

.overlay:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
  opacity: 40%;
}

.white {
  color: #fff;
}

.gradient {
  background: rgb(230, 0, 126);
  background: -moz-linear-gradient(
    312deg,
    rgba(230, 0, 126, 1) 0%,
    rgba(174, 0, 96, 1) 80%,
    rgba(115, 0, 63, 1) 100%
  );
  background: -webkit-linear-gradient(
    312deg,
    rgba(230, 0, 126, 1) 0%,
    rgba(174, 0, 96, 1) 80%,
    rgba(115, 0, 63, 1) 100%
  );
  background: linear-gradient(
    312deg,
    rgba(230, 0, 126, 1) 0%,
    rgba(174, 0, 96, 1) 80%,
    rgba(115, 0, 63, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e6007e",endColorstr="#73003f",GradientType=1);
}
body {
  background-color: var(--pale);
}

.fc-blue {
  color: var(--blue);
}

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

.fc-transcharcoal {
  color: var(--transcharcoal);
}
.fc-charcoal {
  color: var(--charcoal);
}
.fc-dark {
  color: var(--dark);
}
.fc-darkgray {
  color: var(--darkgray);
}
button.pdf-gen {
  width: 100%;
  padding: 15px;
  border-radius: 12px;
  border: none;
}
button.invoice-button {
  width: 100%;
  padding: 15px;
  border-radius: 12px;
  border: none;
  margin-top: 20px;
}

.pdf-gen i {
  margin-right: 5px;
}

button.pdf-gen:hover {
  background-color: var(--orange);
}
button.invoice-button:hover {
  background-color: var(--orange);
}

.bg-red {
  background-color: var(--red);
}

/*******************************
================================
HEADER
================================
*******************************/

header.header-class {
  position: relative;
  width: 100%;
  background-color: #0f2da4;
}

.topbar-con {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.tb {
  width: 33.333%;
  height: 5px;
}

.tb.tb-red {
  background-color: #ef476f !important;
}

body {
  margin: 0px;
}

.tb.tb-blue {
  background-color: #00d8ff;
}

.tb.tb-dark {
  background-color: #26547c;
}

/* mobile */
.flex.row.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0px;
}
.flex.row.header-bar {
  padding: 10px;
  box-sizing: border-box;
}

.mobile-nav {
  display: none;
}

a {
  text-decoration: none;
  transition: 0.5s;
}
li {
  list-style: none;
}

ul.header-ul {
  padding-left: 0px;
  display: flex;
  align-items: center;
  list-style: none;
}

li.menu-item a:hover {
  color: #ef476f;
}

ul.header-ul li {
  margin: 0px 10px;
  border-radius: 10px;
  width: 100%;
}

.menu-item {
  padding: 10px;
}

.menu-item.green {
  background-color: #00dc7c;
  color: white;
}
a.mob-item {
  display: flex;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  color: white;
}
ul#menu-main-menu a {
  color: white;
}

.mobile-nav {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.header-nav {
  position: absolute;
  left: 0px;
  bottom: 0px;
  max-height: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  height: max-content;
  transition: max-height 0.3s ease-in-out;
  background-color: #0f2da4;
  transform: translate(0px, 100%);
}

.flex.row.header-bar {
  position: relative;
}
.header-nav.active {
  max-height: 400px;
}

ul.header-ul {
  display: flex;
  flex-direction: column;
  height: max-content;
  padding-left: 0px;
  display: flex;
  align-items: flex-start;
  list-style: none;
  width: 100%;
}

ul.header-ul li {
  margin: 0px 0px 10px;
  border-radius: 10px;
  width: 100%;
  box-sizing: border-box;
}
.menu-item.green {
  display: none;
}

.sub-row {
  display: flex;
  justify-content: space-between;
}
ul.sub-menu {
  overflow: hidden;
  max-height: 0px;
  transition: max-height 0.3s ease-in-out;
}
ul.sub-menu.active {
  max-height: 400px;
}
a.sub-btn {
  margin-left: 10px;
}
@media (min-width: 968px) {
}
@media (min-width: 1024px) {
  .mobile-nav {
    display: none;
  }

  div#header-nav {
    display: flex;
    position: static;
    max-height: unset;
    height: auto;
    align-content: flex-end;
    justify-content: center;
    align-items: flex-end;
    overflow: visible;
  }

  ul.header-ul {
    display: flex;
    flex-direction: row;
    width: max-content;
    align-items: center;
  }

  ul.header-ul li {
    width: unset;
    margin: 0px 10px;
  }

  .menu-item.active {
    width: max-content;
  }

  ul.sub-menu {
    position: absolute;
    padding: 0px;
    list-style: none;
    padding: 10px;
    width: max-content;
    transition: 0.5s;
    top: 30px;
    z-index: 10;
    display: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  }

  ul.sub-menu li {
    margin-bottom: 10px;
  }

  .menu-item.submenu {
    position: relative;
  }

  .menu-item.submenu:hover .sub-menu {
    max-height: 400px;
    display: block;
  }
  .menu-item.green {
    display: block;
    padding: 10px;
    width: unset;
    border-radius: 5px;
  }

  ul.sub-menu a {
    padding: 7px 30px 7px 20px;
    font-size: 16px;
    font-weight: 300;
    line-height: 32px;
    color: #656565;
  }
  .menu-item.green:hover {
    background-color: skyblue;
  }
  .header-nav {
    transform: translate(0px, 0%);
  }
}

/*******************************
================================
404
================================
*******************************/

main#primary {
  min-height: 80vh;
}

section.error-404.not-found {
  text-align: center;
  padding: 100px 0;
}

.page-header h1 {
  font-size: 40px;
  margin-bottom: 40px;
}

.not-found-content-con {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  align-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.not-found-content {
  max-width: 700px;
}
.cta-btn {
  width: 100%;
}

.not-found-content {
  max-width: 700px;
}

.not-found-content {
  max-width: 700px;
}

.not-found-title {
  margin-bottom: 15px;
}

.cta-btn a:hover {
  background-color: red;
}
.cta-btn a {
  width: 100%;
  border-radius: 5px;
  border: 1px solid black;
  display: flex;
  padding: 10px;
  box-sizing: border-box;
  font-weight: bold;
  font-size: 18px;
  color: black;
  transition: 0.5s;
}

/*******************************
================================
SINGLE BLOG
================================
*******************************/

.blog-content-box.shadowbox {
  width: 100%;
  padding: 30px;
  background-color: white;
  border-radius: 10px;
  box-sizing: border-box;
  margin-bottom: 25px;
}

.blog-title {
  margin-bottom: 20px;
}

.blog-content-box.shadowbox p {
  margin-bottom: 15px;
}

.blog-title h2 {
  font-size: 30px;
}

.blog-cnt {
  box-shadow: 0 0 32px 0 rgb(26 47 106 / 8%);
  border-radius: 6px;
}

.meta-content {
  position: relative;
}

.post-thumbnail img {
  height: auto;
  border-radius: 6px 6px 0 0;
}

.date-posted {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 80px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  border-radius: 4px;
  background: var(--blue);
  padding: 12px 0;
}

.date-posted span {
  color: #fff;
}

.info {
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dashed var(--blue);
}

.cat-box {
  display: flex;
}

.cat-box i {
  padding-right: 10px;
}

ul.single-cat-list li:first-child {
  display: block;
}

.info h2 {
  margin: 10px 0 0;
}

blockquote {
  padding: 20px 0 20px 40px;
  position: relative;
  border-left: solid 4px var(--blue);
  margin: 15px 0;
}

/* sidebar */

form.searchform.group {
  width: calc(100% - 10px);
  border: solid 1px #dadada;
  padding: 5px;
  position: relative;
  border-radius: 5px;
}

input[type="search"] {
  width: 90%;
  border: none;
  line-height: 30px;
  font-size: 16px;
  box-sizing: border-box;
  padding: 10px;
}

input[type="image"] {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translate(0px, -50%);
  width: 8%;
}
.siderbar-box {
  margin: 30px 0;
}

.blog-side-sec.shadowbox {
  width: 100%;
  padding: 20px;
  background-color: white;
  border-radius: 10px;
  box-sizing: border-box;
  margin-bottom: 25px;
}

.siderbar-box h3 {
  font-size: 25px;
  font-weight: 500;
  color: var(--blue);
}

ul.cat-list {
  margin-top: 10px;
}

ul.cat-list li {
  padding: 15px 0;
  font-size: 20px;
}

ul.cat-list a {
  color: #333333;
  font-weight: 400;
}

.rp-details a:hover,
ul.cat-list a:hover {
  color: var(--blue);
}

.recent-posts {
  margin: 10px 0;
  display: table;
}

.rp-img,
.rp-details {
  display: table-cell;
  vertical-align: middle;
}

.rp-img {
  width: 25%;
}

.rp-details {
  padding-left: 15px;
}

.recent-posts img {
  width: auto;
  height: 80px;
  object-fit: cover;
  border-radius: 3px;
  filter: grayscale(0);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.recent-posts img:hover {
  cursor: pointer;
  filter: grayscale(1);
}

.rp-details a {
  color: #333;
}

span.date {
  opacity: 70%;
  font-size: 13px;
  text-align: left;
}
/* Search */

.filter-control a.active {
  background-color: #4ed8dc;
}

.ssearch-con {
  max-width: 700px;
  margin: auto;
}

.filter-control-con {
  margin: 15px;
  box-sizing: border-box;
  width: 100%;
}

.filter-control {
  /* padding: 10px; */
  /* background-color: cadetblue; */
  /* text-align: center; */
}

.filter-control a {
  padding: 10px;
  background-color: cadetblue;
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  transition: 0.5s;
}

.filter-control a:hover {
  background-color: #4ed8dc;
}

/* archive */

.blog-sng {
  background-color: #f2f2f2;
  margin: 0 0 30px;
  padding: 15px 15px 30px;
  border-radius: 6px;
}

.blog-sng img {
  border-radius: 3px;
  margin-bottom: 10px;
  width: 100%;
  height: auto;
  filter: grayscale(0);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.blog-sng img:hover {
  filter: grayscale(1);
}

span.date {
  opacity: 70%;
  font-size: 13px;
}

.blog-sng a h2 {
  color: #333;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.blog-sng a h2:hover {
  color: var(--blue);
}

h1.white.relative span {
  color: var(--yellow);
}
.blog-card-con {
  margin: 10px;
  box-sizing: border-box;
  height: 100%;
}

.blog-card-img {
  height: 200px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 10px;
}

.blog-card {
  background-color: white;
  padding: 5px;
  border-radius: 5px;
  box-sizing: border-box;
}

/*******************************
================================
Login form
================================
*******************************/
.login-form-card {
  width: 100%;
  max-width: 400px;
  margin: auto;
  border-radius: 20px;
  padding: 60px 25px;
  box-sizing: border-box;
  border: 1px solid #e8e6e6;
  background-color: rgba(227, 227, 277, 0.2);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.login-field {
  color: white;
  background-color: transparent;
  border: 1px solid white;
  padding: 15px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 15px;
  border-radius: 5px;
}

.login-field::placeholder {
  color: white;
}

.lost-password-white {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  margin-bottom: 25px;
}

button.login-button.white.bg-orange {
  width: 100%;
  font-size: 20px;
  padding: 14px;
  border: none;
  border-radius: 10px;
  filter: drop-shadow(3px 3px 10px #444d55);
}
button.login-button.white.bg-orange:hover {
  background-color: white;
  color: black;
}

section.login-section {
  background: radial-gradient(120.27% 50% at 50% 50%, #0085ff 0%, #003465 100%);
  padding: 100px 0px;
}

.login-form-card .branding {
  display: flex;
  justify-content: center;
}

.login-form-card .heading {
  text-align: center;
  margin-bottom: 30px;
}

/*******************************
================================
Employee dashboard
================================
*******************************/

.ed-list-item {
  border-radius: 10px;
  border: 1px solid #d9d9d9;
  background: #fff;
  box-shadow: 0px 10px 50px 0px rgba(33, 52, 48, 0.08);
  padding: 10px;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.contact-details * {
  font-size: 12px;
}
.ed-customer-name {
  font-size: 14px;
}
.ed-job-title {
  font-size: 10px;
}
.job-iden {
  margin-right: 15px;
}
.contact-details {
  max-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.contact-details > p {
  margin-bottom: 10px;
}
.contact-details > a {
  margin-bottom: 10px;
}

.contact-details a:last-child {
  margin-bottom: 0px;
}

.contact-details i {
  margin-right: 5px;
}

.ed-detail {
  text-decoration: underline;
  color: black;
}
.ed-phone-number {
  color: black;
}
/*******************************
================================
Admin dashboard
================================
*******************************/

section.dashboard-header.mb-50 {
  margin-top: 50px;
}
.settings-button i {
  font-size: 40px;
  color: var(--orange);
  line-height: 1;
  margin-right: 10px;
}

.profile-button {
  width: 50px;
  line-height: 0;
}
.adh-cta {
  display: flex;
  justify-content: flex-end;
}

.adh-cta .row.flex.wrap.align-center {
  justify-content: flex-end;
}
.calendar-inner-con {
  background-color: var(--lavender);
  padding: 15px;
  box-sizing: border-box;
  border-radius: 10px;
}

.calendar-tabs {
  display: flex;
}

.calendar-tab {
  font-size: 21px;
  padding: 10px 15px;
  background-color: var(--lavender);
  margin-left: 5px;
  margin-right: 5px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  transition: 0.5s;
  cursor: pointer;
  text-align: center;
}
.calendar-tab:hover {
  background-color: var(--orange);
  color: white;
}

.calendar-tab.active {
  color: white;
  background-color: var(--blue);
}

.four-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns on large desktop */
  gap: 20px; /* Spacing between the grid items */
}
.job-stat.open {
  background-color: var(--orange);
}
.job-stat.unassigned {
  background-color: var(--grey);
}
.job-stat.rejected {
  background-color: var(--red);
}
.job-stat.review {
  background-color: var(--green);
}
.job-stat {
  padding: 20px;
  color: white;
  background-color: #f4f4f4; /* Light background for each stat */
  border: 1px solid #ddd; /* Border to separate each stat */
  text-align: center;
  font-size: 22px;
  font-weight: 500;
  border-radius: 8px; /* Optional rounded corners */
  box-shadow: 0px 9.922px 49.61px 0px rgba(33, 52, 48, 0.08);
}

/* Smaller desktop: 2 columns */
@media (max-width: 1024px) {
  .four-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on smaller desktops */
  }
}

/* Mobile: 1 column */
@media (max-width: 768px) {
  .four-grid {
    grid-template-columns: 1fr; /* 1 column for mobile */
  }
}

.add-con {
  display: flex;
  gap: 20px; /* Space between each button */
  margin: 20px 0; /* Optional margin for spacing around the container */
}

.add-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 30px;
  border: 1px solid #0f2da4;
  border-radius: 15px;
  font-size: 32px;
  font-weight: bold;
  color: #000;
  background-color: white;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.add-button i {
  margin-right: 10px; /* Space between the icon and text */
}

/* Hover effects */
.add-button:hover {
  background-color: #f4f4f4; /* Slightly darker background on hover */
  border-color: #0d2594; /* Darker blue border on hover */
}

/* Responsive behavior for mobile devices */
@media (max-width: 768px) {
  .add-con {
    flex-direction: column; /* Stack buttons vertically on mobile */
    gap: 10px; /* Smaller gap between buttons on mobile */
  }
}

.fc-toolbar-chunk div {
  display: flex;
  align-items: center;
}

.fc-toolbar-title {
  margin: 0 15px !important; /* Add margin to space the title from prev/next arrows */
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.fc-button-group {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fc-prev-button,
.fc-next-button {
  font-size: 16px;
  padding: 5px 10px; /* Add padding for better spacing */
}

.fc-today-button {
  margin-left: 20px; /* Add spacing to separate the 'Today' button from the arrows */
}

.fc-view-harness.fc-view-harness-active {
  background-color: white;
}

.week-card.active-day {
  border: 1px solid #ee8d09;
  background: rgba(238, 141, 10, 0.2);
  box-shadow: 0px 10px 50px 0px rgba(33, 52, 48, 0.08);
}

.week-view {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6 equal-width columns */
  grid-template-rows: 1fr; /* 1 row */
  column-gap: 10px; /* Space between columns */
  row-gap: 10px; /* Space between rows (in case you add more rows later) */
}

.week-view {
  display: grid;
  grid-template-columns: repeat(5, 1fr) 1.5fr; /* 5 equal-width columns and 1 wider column */
  gap: 20px; /* Gap between the columns */
  padding: 20px;
}

.week-card {
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid #d9d9d9;
  background: #fff;
  box-shadow: 0px 10px 50px 0px rgba(33, 52, 48, 0.08);
  display: flex;
  flex-direction: column;
  min-height: 400px;
}

.event-card {
  border-radius: 1px 4px 10px 1px;
  border: 1px solid #d9d9d9;
  background: #fff;
  display: flex;
  position: relative;
  margin-bottom: 15px;
  padding: 15px 0 10px 5px;
  border-left: 3px solid #ee8d09;
  flex-direction: column; /* Ensure the card content aligns vertically */
}
.event-card.status-approved {
  border-left-color: #228b22;
}

.event-card.status-in-progress {
  border-left-color: #ee8d09;
}
.event-card.invoiced {
  border-left-color: #ee8d09;
}

.event-card.status-unassigned {
  border-left-color: #b7b7b7;
}

.fc-daygrid-event-dot {
  display: none;
}

.fc-event-time {
  display: none;
}
p.job-title {
  color: #000;

  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

p.job-employee {
  color: #000;

  font-size: 8px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

img {
}

.employee-images img {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
}

.employee-images {
  position: absolute;
  right: 3px;
  top: 3px;
}

.day-context {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.day-of-the-week {
  color: #000;

  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.date {
  color: #000;

  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.employee-images img:not(:first-child) {
  margin-left: -5px;
}

.event-container .employee-images {
  display: none;
}

p.employee-name {
  color: #000;

  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

img.pro-pic {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  margin-right: 5px;
}

.employee-info {
  display: flex;
  align-items: center;
}

p.hours-heading {
  color: #7b86a1;

  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

p.hours {
  color: #000;

  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.employee-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  border: 1px solid #d9d9d9;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.employee-hours-con {
  text-align: center;
}

.fc-toolbar-chunk {
  display: flex;
  align-items: center;
}
/* Customize the Swal modal */
.add-employee-modal {
  border-radius: 15px;
  padding: 20px;
}

.add-employee-btn {
  background-color: var(--blue) !important;
  border-radius: 10px;
  padding: 15px 25px;
}

.cancel-btn {
  background-color: #f4f4f4;
  border-radius: 10px;
  color: #000;
  padding: 15px 25px;
}

/* Form group styling */
.form-group {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  text-align: left;
}

.form-group label {
  width: 170px;
  font-weight: bold;
  margin-bottom: 0px;
}

.swal2-input,
.swal2-popup.swal2-modal.swes-popup.swal2-show select,
.swal2-popup.swal2-modal.swes-popup.swal2-show div#job-files {
  width: calc(100% - 100px);
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin-left: 10px;
  margin-top: 0px;
  margin-right: 40.5px;
}

.swal2-textarea {
  width: calc(100% - 100px);
  margin-left: 10px;
}

/* Image upload container */
.image-upload-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.image-placeholder {
  width: 100px;
  height: 100px;
  background-color: #e0e0e0;
  border-radius: 50%;
  margin-right: 10px;
}

.delete-btn {
  background-color: #f4f4f4;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  color: #000;
}

.upload-btn,
.delete-btn {
  background-color: #f4f4f4;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  color: #000;
  margin-left: 10px;
}

.delete-btn:hover {
  background-color: #e0e0e0;
}

.swal2-popup.swal2-modal.swes-popup.swal2-show {
  width: 100%;
  max-width: 700px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 15px;
}

.swal2-popup.swal2-modal.swes-popup.swal2-show h2#swal2-title {
  text-align: left;
  font-weight: 900;
}

.swal2-popup.swal2-modal.swes-popup.swal2-show .swal2-actions {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  width: 100%;
}

.swal2-popup.swal2-modal.swes-popup.swal2-show
  span.select2.select2-container.select2-container--default {
  width: calc(100% - 100px) !important;
  margin-right: 40.5px;
  margin-left: 10px;
  box-sizing: border-box;
}

/*******************************
================================
HOME
================================
*******************************/

section.breadcrumbs {
  background: #0e445c;
  width: 100%;
  height: 100%;
  position: relative;
  left: 0px;
  top: 0px;
  right: 0px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.breadcrumbs-inner {
  width: 95%;
  border-radius: 10px 10px 0 0;
  margin: 0 auto 0;
  padding: 50px 0 0;
}

.breadcrumbs-bg-img {
  border-radius: 10px 10px 0 0;
  position: relative;
}

.bread-title-box.lonely-title {
  text-align: center;
  min-height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
  width: 90%;
  margin: 0 auto;
  max-width: 1000px;
  position: relative;
  z-index: 1;
}

.bread-title-box.lonely-title h2,
.bread-title-box.lonely-title p {
}

.bread-title-box.lonely-title h1 {
  color: #fff;
  margin-bottom: 20px;
}

.breadcrumbs-bg-img:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  border-radius: 10px 10px 0 0;
  opacity: 50%;
}

.bread-title-box.lonely-title p {
  color: #fff;
  font-size: 18px;
  max-width: 1000px;
  margin: 0 auto;
}

/*******************************
================================
add job pop up
================================
*******************************/

#job-customer,
#job-employees {
  width: calc(100% - 100px); /* Matches your other elements */
  padding: 10px; /* Matches the padding */
  border: 1px solid #ccc; /* Same border */
  border-radius: 10px; /* Rounded corners */
  margin-left: 10px; /* Same left margin */
  margin-top: 0px; /* No top margin */
  margin-right: 40.5px; /* Same right margin */
  margin-bottom: 10px; /* Optional: Adds some space below the element */
  box-sizing: border-box; /* Ensures padding doesn't affect width */
}

/* For Select2-specific styles */
.select2-container--default .select2-selection--multiple {
  border: 1px solid #ccc; /* Match your border */
  border-radius: 10px; /* Match rounded corners */
  padding: 10px; /* Match padding */
}

.select2-selection__rendered {
  display: flex;
  flex-wrap: wrap; /* Ensure multiple selections display well */
  gap: 5px; /* Space between selected items */
}

.select2-search__field {
  width: 100% !important; /* Ensure search field is full width */
  border: none; /* Remove default border */
}

/*******************************
================================
Table pages
================================
*******************************/

.standard-padding {
  padding: 100px 0px;
}

button.white.add-field {
  background-color: #0f2da4;
  border-radius: 10px;
  width: 100%;
  max-width: 150px;
  padding: 10px;
  box-sizing: border-box;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
}

button.white.add-field i {
  margin-right: 5px;
}

button.white.add-field:hover {
  background-color: var(--orange);
}
/* Container styles */
.page-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 cards in a row on large screens */
  gap: 20px;
}

@media (max-width: 1200px) {
  .page-stats {
    grid-template-columns: repeat(
      2,
      1fr
    ); /* 2 cards per row on smaller screens */
  }
}

@media (max-width: 768px) {
  .page-stats {
    grid-template-columns: 1fr; /* 1 card per row on mobile */
  }
}

/* Card styles */
.page-stats-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease-in-out;
}

.page-stats-card:hover {
  transform: translateY(-5px); /* Slight lift on hover */
}

/* Top row of card */
.top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.context {
  flex: 1;
}

.stats-heading {
  font-size: 18px;
  color: #666;
  margin-bottom: 5px;
}

.stat-figures {
  font-size: 32px;
  font-weight: bold;
  color: #333;
}

.graphic img {
  width: 50px;
  height: 50px;
}

/* Bottom row of card */
.bottom-row {
  display: flex;
  align-items: center;
}

.bottom-stats {
  font-size: 16px;
  color: #666;
}

.bottom-stats .green {
  color: #28a745;
  font-weight: bold;
}

/* Responsive text sizes */
@media (max-width: 1200px) {
  .stats-heading {
    font-size: 16px;
  }

  .stat-figures {
    font-size: 28px;
  }

  .bottom-stats {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .stats-heading {
    font-size: 14px;
  }

  .stat-figures {
    font-size: 24px;
  }

  .bottom-stats {
    font-size: 12px;
  }
}

.page-table {
  padding: 20px;
  background-color: white;
  border-radius: 20px;
}

.page-table table {
  text-align: left;
}

.page-table table tbody tr td {
  padding-top: 25px;
  padding-bottom: 25px;
}

.page-table a.paginate_button.previous {
  border: 1px solid #d9d9d9 !important;
  border-radius: 10px;
  margin-right: 15px;
}

.page-table a.paginate_button.next {
  border: 1px solid #d9d9d9 !important;
  border-radius: 10px;
  margin-left: 15px;
}

a.paginate_button.current {
  background: rgba(238, 141, 9, 0.2) !important;
  color: #ee8d09 !important;
  border-color: #ee8d09 !important;
}

.page-table table {
  margin-bottom: 25px;
}
.page-table table#employee-table tbody tr td {
  padding-top: 10px;
  padding-bottom: 10px;
}

td.customer-address {
  font-size: 14px;
  max-width: 90px;
}
.status-complete,
.status-approved {
  background-color: rgba(34, 139, 34, 0.1); /* Green */
  color: #228b22;
  padding: 10px 15px;
  border-radius: 5px;
  display: inline-block;
  text-align: center;
  min-width: 80px;
}

.status-in-progress {
  background-color: rgba(238, 141, 9, 0.1); /* Yellow */
  color: #ee8d09;
  padding: 10px 15px;
  border-radius: 5px;
  display: inline-block;
  text-align: center;
  min-width: 80px;
}
.status-invoiced {
  background-color: rgba(238, 141, 9, 0.1); /* Yellow */
  color: #ee8d09;
  padding: 10px 15px;
  border-radius: 5px;
  display: inline-block;
  text-align: center;
  min-width: 80px;
}

.status-rejected {
  background-color: rgba(240, 73, 73, 0.1); /* Red */
  color: #f04949;
  padding: 10px 15px;
  border-radius: 5px;
  display: inline-block;
  text-align: center;
  min-width: 80px;
}

.status-unassigned {
  background-color: rgba(183, 183, 183, 0.1);
  color: #434242;
  padding: 10px 15px;
  border-radius: 5px;
  display: inline-block;
  text-align: center;
  min-width: 80px;
}

/*******************************
================================
Job single
================================
*******************************/
.report-images {
  margin-top: 20px;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3-column layout */
  grid-gap: 10px; /* Space between the images */
}

.image-item {
  position: relative;
  overflow: hidden;
}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Crop images to fit the grid cell */
  display: block;
}

.image-item a {
  display: block;
  width: 100%;
  height: 100%;
}

/* Responsive layout: Adjust grid on smaller screens */
@media (max-width: 768px) {
  .image-grid {
    grid-template-columns: repeat(2, 1fr); /* 2-column layout for tablets */
  }
}

@media (max-width: 480px) {
  .image-grid {
    grid-template-columns: 1fr; /* Single column layout for mobile */
  }
}

.type-row.row.flex.wrap {
  display: flex;
  justify-content: space-between;
}

.job-page-container {
  padding: 50px 0px;
}
.job-page-content > .heading {
  margin-bottom: 30px;
}

.meta-content.row.flex.column a {
  color: inherit;
}
.meta-item {
  margin-bottom: 10px;
}
.submit-report-form .swal2-textarea {
  width: 100%;
  margin: 0px;
}

/* Style for radio inputs and labels */
.swal2-radio-group {
  display: flex;
  gap: 20px; /* Adjust space between Yes and No */
  align-items: center;
  justify-content: center;
}

.swal2-radio-group input[type="radio"] {
  display: none; /* Hide the default radio buttons */
}

.swal2-radio-group label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  color: #333;
  font-weight: normal;
  position: relative;
}

.swal2-radio-group input[type="radio"] + label:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border-radius: 5px;
  border: 2px solid #ccc;
  background-color: white;
  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.swal2-radio-group input[type="radio"]:checked + label:before {
  border-color: var(--blue); /* Blue border when checked */
  background-color: var(--blue); /* Blue background when checked */
}

.swal2-radio-group input[type="radio"]:checked + label:after {
  content: "✓";
  position: absolute;
  color: white;
  font-size: 12px;
  left: 13px;
  top: 5px;
  transform: translate(-5px, -2px);
}

.swal2-radio-group input[type="radio"]:not(:checked) + label:before {
  border-color: #ccc;
}

.swal2-radio-group input[type="radio"]:checked + label {
  font-weight: bold; /* Make the label bold when checked */
}
.hours-form-submit input {
  width: 50px;
  text-align: center;
  margin: 0px;
  font-size: 16px;
}

.hours-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0px 15px;
}

.hours-form-submit label {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
}

.hours-form-submit {
  display: flex;
  align-items: center;
  justify-content: center;
}
.job-page-content {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
}

.complete-button.white.bg-orange {
  border: none;
  border-radius: 10px;
  box-shadow: 0px 10.385px 51.923px 0px rgba(33, 52, 48, 0.08);
  display: flex;
  width: 100%;
  max-width: 290px;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin: auto;
  transition: 0.5s;
}

.bg-orange {
  background-color: var(--orange);
}

button.complete-button:hover {
  background-color: var(--blue);
}

/* Styling for the file download section */
.files-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.file-item-link {
  text-decoration: none;
  display: block;
}

.file-item {
  display: flex;
  align-items: center;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 15px;
  transition: background-color 0.2s ease-in-out;
}

.file-item:hover {
  background-color: #e5e7eb;
}

.file-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 24px;
  color: var(--blue);
}

.file-info {
  display: flex;
  flex-direction: column;
}

.file-name {
  font-weight: 600;
  color: #333;
  margin: 0;
}

.file-meta {
  color: #6b7280;
  font-size: 14px;
  margin-top: 4px;
}

.file-item .fa-file-image {
  color: var(--blue); /* Color for image icon */
}

.file-item .fa-file-zipper {
  color: var(--blue); /* Color for zip icon */
}

.reports-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.report-item {
  display: flex;
  align-items: center;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 15px;
  transition: background-color 0.2s ease-in-out;
}

.report-item:hover {
  background-color: #e5e7eb;
}

.report-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 24px;
}

.report-icon img.profile-image {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.report-info {
  display: flex;
  flex-direction: column;
}

.report-user-name {
  font-weight: 600;
  color: #333;
  margin: 0;
}

.report-meta {
  color: #6b7280;
  font-size: 14px;
  margin-top: 4px;
}

.report-status {
  color: #6b7280;
  font-size: 14px;
  margin-top: 4px;
}
/* Style for the files uploaded section */
.files-uploaded {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns on large screens */
  gap: 15px;
  margin-top: 10px;
}

.files-uploaded .file {
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.2s ease-in-out;
}

.files-uploaded .file:hover {
  background-color: #e5e7eb;
}

.files-uploaded img {
  width: 60px; /* Adjust the size of the file icons */
  height: 60px;
  margin-bottom: 10px;
}

.files-uploaded p {
  font-size: 14px;
  color: #4b5563;
  margin: 0;
}

/* Responsive design for smaller screens */
@media (max-width: 1200px) {
  .files-uploaded {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
  }
}

@media (max-width: 768px) {
  .files-uploaded {
    grid-template-columns: 1fr; /* 1 column on small screens */
  }
}

.meta-item p {
  display: flex;
}
.meta-item i {
  margin-right: 10px;
}

.single-profile-table {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row;
}

.d-line {
  width: 1px;
  background-color: #d3d8e7;
  margin: 0px 7px;
}

.fa-star {
  color: #feaa01; /* Gold color for stars */
  margin-right: 2px;
}
a.view-details {
  text-decoration: underline;
  color: black;
  font-weight: bold;
}
.single-profile-table img {
  width: 30px;
  border-radius: 50%;
  margin-right: 5px;
}

.single-profile-table .content {
  display: flex;
}

/*******************************
================================
FOOTER
================================
*******************************/

/*******************************
================================
MEDIA
================================
*******************************/

@media (min-width: 768px) {
  .copyright p {
    display: table-cell;
    vertical-align: middle;
  }
  p.white.right {
    text-align: right;
  }
  .copyright p {
    display: table-cell;
    vertical-align: middle;
  }
  .copyright {
    padding: 50px 0 25px;
    display: table;
    width: 100%;
    text-align: left;
  }
  /* global */

  .cnt_10 {
    width: 25%;
    -ms-flex-pack: inherit;
    -webkit-justify-content: inherit;
    justify-content: inherit;
  }

  .cnt_20 {
    width: 50%;
    -ms-flex-pack: inherit;
    -webkit-justify-content: inherit;
    justify-content: inherit;
  }

  .cnt_25 {
    width: 50%;
    -ms-flex-pack: inherit;
    -webkit-justify-content: inherit;
    justify-content: inherit;
  }

  .cnt_30 {
    width: 50%;
    -ms-flex-pack: inherit;
    -webkit-justify-content: inherit;
    justify-content: inherit;
  }

  .cnt_33 {
    width: 50%;
    -ms-flex-pack: inherit;
    -webkit-justify-content: inherit;
    justify-content: inherit;
  }
  .blog-card {
    height: 100%;
  }

  /*******************************
================================
TYPOGRAPHY
================================
*******************************/

  .fs-16 {
    font-size: 16px;
  }
  .fs-18 {
    font-size: 18px;
  }

  .fs-21 {
    font-size: 21px;
  }

  .fs-32 {
    font-size: 32px;
  }

  .fs-24 {
    font-size: 24px;
  }
}

@media (min-width: 1024px) {
  /* global */

  .margin-right {
    margin: 0 20px 0 0;
  }

  .margin-left {
    margin: 0 0 0 20px;
  }

  .row {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

  .table {
    display: table;
  }

  .cell {
    display: table-cell;
    vertical-align: middle;
  }

  .relative {
    position: relative;
  }

  .block {
    display: inline-block;
  }

  .short {
    width: 90%;
    margin: 0 auto;
  }

  .cnt_10 {
    width: 10%;
    -ms-flex-pack: inherit;
    -webkit-justify-content: inherit;
    justify-content: inherit;
  }

  .cnt_20 {
    width: 20%;
    -ms-flex-pack: inherit;
    -webkit-justify-content: inherit;
    justify-content: inherit;
  }

  .cnt_25 {
    width: 25%;
    -ms-flex-pack: inherit;
    -webkit-justify-content: inherit;
    justify-content: inherit;
  }

  .cnt_30 {
    width: 30%;
    -ms-flex-pack: inherit;
    -webkit-justify-content: inherit;
    justify-content: inherit;
  }

  .cnt_33 {
    width: 33.33333%;
    -ms-flex-pack: inherit;
    -webkit-justify-content: inherit;
    justify-content: inherit;
  }

  .cnt_40 {
    width: 40%;
    -ms-flex-pack: inherit;
    -webkit-justify-content: inherit;
    justify-content: inherit;
  }

  .cnt_50 {
    width: 50%;
    -ms-flex-pack: inherit;
    -webkit-justify-content: inherit;
    justify-content: inherit;
  }

  .cnt_60 {
    width: 60%;
    -ms-flex-pack: inherit;
    -webkit-justify-content: inherit;
    justify-content: inherit;
  }

  .cnt_70 {
    width: 70%;
    -ms-flex-pack: inherit;
    -webkit-justify-content: inherit;
    justify-content: inherit;
  }

  .cnt_80 {
    width: 80%;
    -ms-flex-pack: inherit;
    -webkit-justify-content: inherit;
    justify-content: inherit;
  }

  .cnt_90 {
    width: 90%;
    -ms-flex-pack: inherit;
    -webkit-justify-content: inherit;
    justify-content: inherit;
  }

  .cnt_full {
    width: 100%;
    -ms-flex-pack: inherit;
    -webkit-justify-content: inherit;
    justify-content: inherit;
  }

  .mb-50 {
    margin-bottom: 50px;
  }
}

@media (min-width: 1200px) {
}

.fc-toolbar-chunk div {
  display: flex;
  align-items: center;
}

.fc-toolbar-title {
  margin: 0 15px !important; /* Add margin to space the title from prev/next arrows */
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.fc-button-group {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fc-prev-button,
.fc-next-button {
  font-size: 16px;
  padding: 5px 10px; /* Add padding for better spacing */
}

.fc-today-button {
  margin-left: 20px; /* Add spacing to separate the 'Today' button from the arrows */
}

div#content {
  padding: 0 0 100px;
}
.fc-view-harness.fc-view-harness-active {
  background-color: white;
}
.employee-info img {
  border-radius: 50%;
}
.fc-button-primary {
  transition: 0.5s;
}
.event-card {
  transition: 0.5s;
}

.event-card:hover {
  background: rgba(238, 141, 9, 0.2);
  cursor: pointer;
}

.week-card.active-day {
  border: 1px solid #ee8d09;
  background: rgba(238, 141, 10, 0.2);
  box-shadow: 0px 10px 50px 0px rgba(33, 52, 48, 0.08);
}

.week-view {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6 equal-width columns */
  grid-template-rows: 1fr; /* 1 row */
  column-gap: 10px; /* Space between columns */
  row-gap: 10px; /* Space between rows (in case you add more rows later) */
}

.week-view {
  display: grid;
  grid-template-columns: repeat(5, 1fr) 1.5fr; /* 5 equal-width columns and 1 wider column */
  gap: 10px; /* Gap between the columns */
  padding: 20px;
}

.week-card {
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid #d9d9d9;
  background: #fff;
  box-shadow: 0px 10px 50px 0px rgba(33, 52, 48, 0.08);
  display: flex;
  flex-direction: column;
}

.event-card {
  border-radius: 1px 4px 10px 1px;
  border: 1px solid #d9d9d9;
  background: #fff;
  display: flex;
  position: relative;
  margin-bottom: 15px;
  padding: 10px;
  border-left: 3px solid #ee8d09;
  flex-direction: column; /* Ensure the card content aligns vertically */
}

p.job-employee {
  text-align: left;
}
p.job-title {
  color: #000;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-align: left;
}

.employee-images img {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.employee-images {
  position: absolute;
  right: 3px;
  top: 3px;
}

.day-context {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.day-of-the-week {
  color: #000;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.date {
  color: #000;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.employee-images img:not(:first-child) {
  margin-left: -10px;
}

p.employee-name {
  color: #000;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

img.pro-pic {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  margin-right: 5px;
}

.employee-info {
  display: flex;
  align-items: center;
}

p.hours-heading {
  color: #7b86a1;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

p.hours {
  color: #000;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.employee-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  border: 1px solid #d9d9d9;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.employee-hours-con {
  text-align: center;
}

.fc-toolbar-chunk {
  display: flex;
  align-items: center;
}

a.fc-event.fc-event-start.fc-event-end.fc-event-future.fc-daygrid-event.fc-daygrid-dot-event {
  -webkit-box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.1);
  box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.1);
  margin: 0 5px 10px;
}

.fc-event-title img {
  display: none;
}

.fc-event-title {
  padding: 5px;
}

.fc-event-title span {
  font-weight: 300;
}

.complete-button.white.bg-orange {
  width: 100%;
  text-align: center;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
  max-width: 90%;
  z-index: 9999;
}