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

body, html {
    height: 100%;
}
ol li , .note-editable ul li{
  padding-left: 1.8rem !important;
  list-style-position: inside;
}
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #FFDCDB;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #ff1c4d;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #8e112c;
}

.cover-image {
    background-image: url('../../img/gravity-1.jpg');
    height: 100%;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.title {
    line-height: 1.4;
    letter-spacing: 0.02em;
    font-size: 46px;
    font-family: 'Bon Vivant Serif';
    font-weight: 400;
    font-style: normal;
    padding: 20px;
}

.description {
    color: rgba(0,0,0,1);
    text-transform: none;
    line-height: 1.8;
    letter-spacing: 0em;
    font-size: 16px;
    font-family: 'Montserrat';
    font-weight: 400;
    font-style: normal;
}

.form-error {
    font-size: 12px;
    color: red;
}

/* Helpdesk Update July 17 2024*/


#sidebar {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #FFFFFF;
  padding: 1rem;
}

.sidebar {
  flex: 0 0 18rem;
  height: 100%;
  background-color: #333;
  color: white;
  overflow-y: none;
  box-shadow: 0 0 5px 10px rgba(0, 0, 0, 0.2);
  transition: margin-left 0.3s ease;
  z-index: 999;
}


.sidebar.active {
  margin-left: -18rem;
  /* Hide the sidebar when active class is added */
}

.components {
  flex-grow: 1;
  padding: 20px;
  overflow-y: auto;
}

.nav-link {
  color: black;
  text-decoration: none;
}

.logout-container {
  padding: 0;
  text-align: center;
}

a[data-toggle="collapse"] {
  position: relative;
}

.dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}


#sidebar {
  padding: 20px;
  background: #ffffff;
}

#sidebar ul.components {
  padding: 20px 0;
  border-bottom: 1px solid #47748b;
}

#sidebar ul p {
  color: black;
  padding: 5px;
}

#sidebar ul li a {
  padding: 10px;
  font-size: 1.1em;
  display: block;
  padding-left: 1rem;
}

#sidebar ul li a:hover {
  color: #D4143C;
  border-radius: 10rem;
  background: #ffffff;
  transition: 0.2s;
  box-shadow: inset -11px 11px 22px #d9d9d9,
    inset 11px -11px 22px #ffffff;
}

#sidebar ul li a:active {
  color: #D4143C;
  border-radius: 10rem;
  background: #ffffff;
  transition: 0.1s;
  box-shadow: inset -11px 11px 22px #b6b6b6,
    inset 11px -11px 22px #f7f7f7;
}

#sidebar ul li.active>a {
  color: #ffffff;
  border-radius: 10rem;
  background: #D4143C;
  transition: 0.2s;
  box-shadow: inset -11px 11px 22px #b41133,
    inset 11px -11px 22px #f41745;
}

#sidebar ul li.active>a:hover {
  border-radius: 10rem;
  background: #fd1645;
  transition: 0.2s;
  box-shadow: inset -11px 11px 22px #fe1749,
    inset 11px -11px 22px #f91643;
}

#sidebar ul li.active>a:active {
  border-radius: 10rem;
  background: #990e2c;
  transition: 0.1s;
  box-shadow: inset -11px 11px 22px #aa1132,
    inset 11px -11px 22px #cf1339;
}

ul ul a {
  font-size: 0.9em !important;
  padding-left: 30px !important;
  background: #ffffff;
}

.logout-icon {
  color: black;
  font-size: 2rem;
  padding: 0;
  transition: 0.1s;
}

.logout-icon:hover {
  color: #D4143C;
  font-size: 2rem;
  padding: 0;
}

.logout-icon:active {
  color: #9d102c;
  font-size: 2rem;
  padding: 0;
}

.wrapper {
  display: flex;
  height: 100vh;
  overflow: hidden;
  /* Prevents scrollbars on the wrapper */
}

.content {
  flex: 1;
  /* Content takes up remaining space */
  height: 100%;
  width: 100vw;
  overflow-y: auto;
  /* Content scrollable */
  padding: 20px;
  /* Example padding */
  background-color: #f4f4f4;
  /* Example background color */
  padding: 0;
}


.user-info-logout {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  color: black;
  justify-content: space-between;
  /* Space between the user info and logout icon */
  padding: 10px;
  /* Padding around the section */
  flex-wrap: wrap;
  /* Allow wrapping for responsiveness */
  margin-top: auto;
}

.user-info {
  display: flex;
  align-items: center;
  flex-grow: 1;
  /* Allow the user info to grow */
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* Circular avatar */
  background: #D4143C;
  box-shadow: inset -11px 11px 22px #b41133,
    inset 11px -11px 22px #f41745;
  /* Background color for avatar */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  margin-right: 10px;
  /* Space between avatar and user details */
}

.user-details {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  /* Prevent text wrapping */
}

.user-name {
  font-weight: bold;
  margin: 0;
}

.user-type {
  font-size: 12px;
  margin: 0;
}

.logout-container {
  padding: 0;
  margin-left: auto;
  /* Align logout to the right */
}

/* Olympics design */

.circle-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 40rem;
  width: 40rem;
  margin: 0;
  overflow: hidden;
  border-radius: 50%;
  left: -8rem;
  top: -21rem;
}

.circle {
  position: relative;
  width: 35rem;
  height: 35rem;
  border-radius: 50%;
}

.circle-image {
  position: absolute;
  width: 12rem;
  height: 12rem;
  cursor: pointer;
  transition: transform 0.9s ease, left 0.9s ease, top 0.9s ease;
} 

@media (max-width: 1700px) {
  .circle-image {
    width: 10rem;
    height: auto;
  }
  .circle-container{
    top: -22rem;
    left: -8.5rem;
  }

}

@media screen and (max-width: 800px) {
  .circle-container {
    display: none;
  }
  
  .circle {
    display: none;
  }
  
  .circle-image {
    display: none;
  } 
}

.pos1 {
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pos2 {
  top: 30%;
  left: 85%;
  transform: translate(-50%, -50%);
}

.pos3 {
  top: 70%;
  left: 85%;
  transform: translate(-50%, -50%);
}

.pos4 {
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pos5 {
  top: 70%;
  left: 15%;
  transform: translate(-50%, -50%);
}

.pos6 {
  top: 30%;
  left: 15%;
  transform: translate(-50%, -50%);
}

/* end */

@media (max-width: 768px) {
  .user-info-logout {
    justify-content: center;
    /* Center content on smaller screens */
  }

  .avatar {
    margin-right: 5px;
    /* Reduce space on smaller screens */
  }

  .user-details {
    font-size: 14px;
    /* Adjust font size for smaller screens */
  }

  .user-type {
    font-size: 10px;
    /* Smaller font size for user type */
  }

  .logout-container {
    margin-left: 0;
  }

  .sidebar {
    margin-left: -18rem;
    /* Hide the sidebar when active class is added */
  }

  .sidebar.active {
    margin-left: 0rem;
  }
}

/* for the helpdesk_home style */
@font-face {
  font-family: 'social_gothicmedium';
  src: url('../font/social_gothic_medium-webfont.woff2') format('woff2'),
    url('../font/social_gothic_medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


.helpdesk-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  font-family: 'social_gothicmedium', sans-serif;
  overflow-x: hidden;
  overflow-y: hidden;
  background-image: url('./../../img/Beefing up.png');

}

/* Q4 2024 */
.gptw-container {
  position: fixed;
  top: 0;
  left: 25rem;
}

.gptw-container img {
  height: 300px;
  width: auto;
}

/*.mrClean-container {
  position: fixed;
  bottom: 0;
  right: 1rem;
}

.mrClean-container img {
  height: 360px;
  width: auto;
  
}

 .mc_img1Container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;

  background-size: cover;
  background-position: center;
  background-image: url('./../../img/bubble.png');
  border-radius: 50%;

  box-shadow: 0px 5px 30px rgba(0, 51, 153, 0.8);
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  bottom: 2rem;
  left: 30rem;
  width: 170px;
  height: 170px;
}

.mc_img1Container img {
  height: 100px;
  width: auto;
}

.mc_img2Container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;

  background-size: cover;
  background-position: center;
  background-image: url('./../../img/bubble.png');
  border-radius: 50%;

  box-shadow: 0px 5px 30px rgba(0, 51, 153, 0.8);
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  bottom: 17rem;
  left: 23rem;
  width: 170px;
  height: 170px;
}

.mc_img2Container img {
  height: 100px;
  width: auto;
}

.mc_img3Container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;

  background-size: cover;
  background-position: center;
  background-image: url('./../../img/bubble.png');
  border-radius: 50%;

  box-shadow: 0px 5px 30px rgba(0, 51, 153, 0.8);
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  bottom: 25rem;
  right: 5rem;
  width: 170px;
  height: 170px;
}

.mc_img3Container img {
  height: 170px;
  width: auto;
}

.mc_img4Container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;

  background-size: cover;
  background-position: center;
  background-image: url('./../../img/bubble.png');
  border-radius: 50%;

  box-shadow: 0px 5px 30px rgba(0, 51, 153, 0.8);
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  top: 2rem;
  right: 13rem;
  width: 170px;
  height: 170px;
}

.mc_img4Container img {
  height: 170px;
  width: auto;
}

.bubble-container {
  padding: 10%;
  width: 50vw;
  height: 50vw;
  max-width: 750px;
  max-height: 750px;
  background-size: cover;
  background-position: center;
  background-image: url('./../../img/bubble.png');
  border-radius: 50%;
  box-shadow: 0px 5px 30px rgba(0, 51, 153, 0.8);
  margin-top: -5rem;
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
 
.bubble-container:hover,
.mc_img1Container,
.mc_img2Container,
.mc_img3Container,
.mc_img4Container {
  box-shadow: 0px 5px 40px rgba(0, 85, 255, 0.8);
  animation: bubble-anim 2s ease-out infinite;

}

@keyframes bubble-anim {
  0% {
    transform: scale(1);
  }

  20% {
    transform: scaleY(0.95) scaleX(1.05);
  }

  48% {
    transform: scaleY(1.1) scaleX(0.9);
  }

  68% {
    transform: scaleY(0.98) scaleX(1.02);
  }

  80% {
    transform: scaleY(1.02) scaleX(0.98);
  }

  97%,
  100% {
    transform: scale(1);
  }
} */

.date-container,
.random-quote-container {
  text-align: center;
}

@media (max-width: 1800px) {
  .gptw-container {
    position: fixed;
    top: 0;
    left: 25rem;
  }

  .gptw-container img {
    height: 200px;
    width: auto;
  }

  /*.mrClean-container {
    position: fixed;
    bottom: 0;
    right: 1rem;
  }

  .mrClean-container img {
    height: 300px;
    width: auto;
    z-index: 1;
  }

   .mc_img1Container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 2rem;
    left: 27rem;
    background-size: cover;
    background-position: center;
    background-image: url('./../../img/bubble.png');
    border-radius: 50%;
    width: 150px;
    height: 150px;
    box-shadow: 0px 5px 30px rgba(0, 51, 153, 0.8);
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  }

  .mc_img1Container img {
    height: 80px;
    width: auto;
  }

  .mc_img2Container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 15rem;
    left: 23rem;
    background-size: cover;
    background-position: center;
    background-image: url('./../../img/bubble.png');
    border-radius: 50%;
    width: 150px;
    height: 150px;
    box-shadow: 0px 5px 30px rgba(0, 51, 153, 0.8);
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  }

  .mc_img2Container img {
    height: 80px;
    width: auto;
  }

  .mc_img3Container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 20rem;
    right: 5rem;
    background-size: cover;
    background-position: center;
    background-image: url('./../../img/bubble.png');
    border-radius: 50%;
    width: 150px;
    height: 150px;
    box-shadow: 0px 5px 30px rgba(0, 51, 153, 0.8);
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  }

  .mc_img3Container img {
    height: 150px;
    width: auto;
  }

  .mc_img4Container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 2rem;
    right: 12rem;
    background-size: cover;
    background-position: center;
    background-image: url('./../../img/bubble.png');
    border-radius: 50%;
    width: 150px;
    height: 150px;
    box-shadow: 0px 5px 30px rgba(0, 51, 153, 0.8);
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  }

  .mc_img4Container img {
    height: 150px;
    width: auto;
  }

  .bubble-container {
    background-size: cover;
    background-position: center;
    background-image: url('./../../img/bubble.png');
    border-radius: 50%;
    padding: 10%;
    width: 50vw;
    height: 50vw;
    max-width: 600px;
    max-height: 600px;
    box-shadow: 0px 5px 30px rgba(0, 51, 153, 0.8);
    margin-top: -5rem;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  } */

  .date-container,
.random-quote-container {
  text-align: center;
}
}

/* END */
.date-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  /* margin-top: 2rem; */
}

.current-day {
  font-family: 'social_gothicmedium', sans-serif;
  text-transform: lowercase;
  font-size: clamp(2rem, 6vw, 9rem);
  text-align: center;
  letter-spacing: .5rem;
  color:  #d11740;
  text-shadow: -1px -6px 10px rgba(0, 0, 0, 0.5);
}

.current-date,
.current-time {
  font-family: 'social_gothicmedium', sans-serif;
  color: #d11740;
  font-size: clamp(1rem, 2vw, 2.5rem);
  text-shadow: -1px -6px 10px rgba(0, 0, 0, 0.5);
}

#random-quote {
  font-family: Verdana, sans-serif;
  font-weight: bold;
  text-transform: capitalize;
  margin-top: 4rem;
  font-style: italic;
  width: 70vw;
  text-align: center;
  font-size: clamp(.5rem, 2vw, 2rem);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  color: #A31233;
  text-shadow: -1px -6px 10px rgba(0, 0, 0, 0.5);
}

.random-quote-container {
  display: flex;
  align-items: center;
  flex-direction: column;
}

#random-quote-number {
  position: relative;
  bottom: 1.5rem;
  font-family: Verdana, sans-serif;
  font-weight: bold;
  text-transform: capitalize;
  font-style: italic;
  width: 70vw;
  text-align: center;
  font-size: clamp(.5rem, 2vw, 1.3rem);
  font-weight: 900;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  color: #750C26; 
  z-index: 1;
}

/*Q4 2025*/
.sirLoin {
  position: fixed;
  bottom: -70px;
  right: -70px;
  display: inline-block;
  text-align: center;
  z-index: 1;
}

.sirLoin img {
  /* Responsive width setup */
  width: 25vw;         /* responsive to viewport width */
  max-width: 600px;    /* limit to 700px */
  min-width: 250px;    /* optional: don’t go too small */

  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.sirLoin img:hover {
  transform: scale(1.05);
}

.sirLoin .quote {
  position: absolute;
  bottom: 58%;
  left: 64%;
  transform: translate(-50%, -50%);
  
  background: rgba(255, 255, 255, 0.95);
  color: #A31233;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: clamp(.7rem, 1.5vh, 1.2rem);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1.5px solid #D11740;
  border-radius: 8px;
  padding: clamp(3px, 1vh, 6px) clamp(6px, 2vw, 12px);
  opacity: 0;
  transition: all 0.4s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  pointer-events: none;

  width: 50%;
  max-width: 200px;
  min-width: 200px;

  text-align: center;
  white-space: normal;
  line-height: 1.3;
}


.sirLoin:hover .quote {
  opacity: 1;
  transform: translate(-190%, -60%);
}


/* Optional: add a small subtext for professionalism */
.sirLoin .quote .sub {
  display: block;
  font-size: 0.5rem;
  font-weight: 400;
  font-style: italic;
  color: #750C26;
  margin-top: 4px;
}



/*Q4 2025 END*/


@media (max-width: 1800px) {
  .date-container {
    margin-top: .5rem;
  }

  #random-quote-number {
    bottom: 1.2rem;
    font-size: clamp(.5rem, 2vw, 1rem);
  }

  #random-quote {
    margin-top: 1rem;
    font-size: clamp(.5rem, 2vw, 1.5rem);
  }
  
}

/* modal */
.open-ticket-container,
.onhold-ticket-container,
.replied-ticket-container {
  cursor: pointer;
  padding: 10px;
  display: inline-block;
  width: 10 rem
}

.open-ticket-popup,
.onhold-ticket-popup,
.replied-ticket-popup {
  display: none;
  position: fixed;
  right: 1rem;
  top: 7rem;
  transform: translate(0, 0);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 1000;
}

.open-ticket-popup h2,
.onhold-ticket-popup h2,
.replied-ticket-popup h2 {
  margin-top: 0;
  color: #D4143C;
  text-align: center;
  background-color: white;
  padding: 1rem;
  margin: 0;
}

.open-ticket-popup a,
.onhold-ticket-popup a,
.replied-ticket-popup a {
  text-decoration: none;
  font-family: sans-serif;
  height: 1rem;
  color: white;
}

.open-ticket-popup p,
.onhold-ticket-popup p,
.replied-ticket-popup p {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  margin: 0;
  background: #D4143C;
  box-shadow: inset -11px 11px 22px #b41133,
    inset 11px -11px 22px #f41745;
}

.open-ticket-popup p:hover,
.onhold-ticket-popup p:hover,
.replied-ticket-popup p:hover {
  color: #D4143C;
  background: #ffffff;
  box-shadow: inset -11px 11px 22px #d9d9d9,
    inset 11px -11px 22px #ffffff;
}

#open-closePopup,
#onhold-closePopup,
#replied-closePopup {
  padding-left: 0;
  padding-right: 0;
  padding-top: .5rem;
  padding-bottom: .5rem;
  background-color: #ffffff;
  border-bottom: 2px solid #D1173F;
  border-top: none;
  border-left: none;
  border-right: none;
  color: #D1173F;
  width: 100%;
  box-sizing: border-box;
  /* Ensures padding and border are included in the element's total width and height */
}

#open-closePopup:hover,
#onhold-closePopup:hover,
#closed-closePopup:hover {
  background-color: #cfcfcf;
  cursor: pointer;
}

.open-popup-overlay .onhold-popup-overlay .replied-popup-overlay {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.ticket-update-container {
  display: flex;
  flex-direction: column;
  align-items: flex start;
  font-size: clamp(.5rem, 3vw, 1rem);
}

.ticket-update-container h6 {
  height: 1rem;
  font-size: clamp(.5rem, 3vw, 1rem);
}

.ticket-update-container svg {
  height: 50;
  width: 50;
}

.ticket-update-container circle {
  cx: 75;
  cy: 88;
  r: clamp(3px, 1vw, 10px);
}

.burger {
  display: none;
}

.burger-container {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
}

.ticket-update-container h6:hover {
  color: #D4143C;
}

.onhold-ticket,
.open-ticket,
.replied-ticket {
  display: flex;
  flex-direction: row;
  height: 2rem;
  margin: 0;
  align-items: flex-end;
  color:#d11740;
}

.blinking {
  -webkit-animation: 1s blink ease infinite;
  -moz-animation: 1s blink ease infinite;
  -ms-animation: 1s blink ease infinite;
  -o-animation: 1s blink ease infinite;
  animation: 1s blink ease infinite;
}

@-moz-keyframes blink {

  from,
  to {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

@-webkit-keyframes blink {

  from,
  to {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

@-ms-keyframes blink {

  from,
  to {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

@-o-keyframes blink {

  from,
  to {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}


@media screen and (max-width: 1425px) {

  /* Q4 2024 */ 
  .gptw-container {
    position: fixed;
    top: 0;
    left: 20rem;
  }

  .gptw-container img {
    height: 200px;
    width: auto;
  }

  /* .mrClean-container {
    position: fixed;
    bottom: 0;
    right: 1rem;
  }

  .mrClean-container img {
    height: 300px;
    width: auto;
    z-index: 1;
  }

  .mc_img1Container {
    bottom: 2rem;
    left: 27rem;
    width: 100px;
    height: 100px;
  }

  .mc_img1Container img {
    height: 50px;
    width: auto;
  }

  .mc_img2Container {
    bottom: 15rem;
    left: 23rem;
    width: 100px;
    height: 100px;
  }

  .mc_img2Container img {
    height: 50px;
    width: auto;
  }

  .mc_img3Container {
    bottom: 20rem;
    right: 5rem;
    width: 100px;
    height: 100px;
  }

  .mc_img3Container img {
    height: 100px;
    width: auto;
  }

  .mc_img4Container {
    top: 2rem;
    right: 12rem;
    width: 100px;
    height: 100px;
  }

  .mc_img4Container img {
    height: 100px;
    width: auto;
  } */

  /* .bubble-container {
    background-image: url('./../../img/bubble.png');
    padding: 10%;
    width: 50vw;
    height: 50vw;
    max-width: 600px;
    max-height: 600px;
    margin-top: -5rem;
  } */

}

/*change 1162 to 1189*/
@media screen and (max-width: 1189px) { 
  .helpdesk-home {
    background-image: url('./../../img/Beefing Up mobile.png');
  }

  
  
  /* Q4 2024 */ 
  .gptw-container {
    position: fixed;
    top: 0;
    left: 20rem;
  }

  .gptw-container img {
    height: 200px;
    width: auto;
  }

  /* .mrClean-container {
    position: fixed;
    bottom: 0;
    right: 1rem;
  }

  .mrClean-container img {
    height: 300px;
    width: auto;
    z-index: 1;
  }

  .mc_img1Container {
    bottom: 4rem;
    left: 35rem;
    width: 100px;
    height: 100px;
  }

  .mc_img1Container img {
    height: 50px;
    width: auto;
  }

  .mc_img2Container {
    bottom: 15rem;
    left: 23rem;
    width: 100px;
    height: 100px;
  }

  .mc_img2Container img {
    height: 50px;
    width: auto;
  }

  .mc_img3Container {
    bottom: 20rem;
    right: 3rem;
    width: 100px;
    height: 100px;
  }

  .mc_img3Container img {
    height: 100px;
    width: auto;
  }

  .mc_img4Container {
    top: 10rem;
    right: 2rem;
    width: 100px;
    height: 100px;
  }

  .mc_img4Container img {
    height: 100px;
    width: auto;
  } */

  /* .bubble-container {
    background-image: url('./../../img/bubble.png');
    padding: 10%;
    width: 50vw;
    height: 50vw;
    max-width: 500px;
    max-height: 500px;
    margin-top: -5rem;
  } */
  #random-quote {
    margin-top: 2rem;
    font-size: clamp(.5rem, 2vw, 1.5rem);
  }
}

@media screen and (max-width: 1000px) {
  .gptw-container {
    left: 1rem;
  }

  .gptw-container img {
    height: 150px;
    width: auto;
  }

  /* .mrClean-container {
    position: absolute;
    bottom: 0;
  }

  .mrClean-container img {
    height: 200px;
    width: auto;
    z-index: 1;
  }
.bubbleHolder{
  display: flex;
  margin-top: 2rem;
}
  .mc_img1Container,.mc_img2Container,.mc_img3Container,.mc_img4Container {
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  }

  .mc_img1Container img {
    height: 40px;
    width: auto;
  }

  .mc_img2Container img {
    height: 40px;
    width: auto;
  }

  .mc_img3Container img {
    height: 70px;
    width: auto;
  }

  .mc_img4Container img {
    height: 70px;
    width: auto;
  } */
}

@media screen and (max-width: 800px) {
  /* .bubble-container {
    background-image: url('./../../img/bubble.png');
    padding: 10%;
    width: 50vw;
    height: 50vw;
    max-width: 500px;
    max-height: 500px;
    margin-top: 1rem;
  } */

}

/* END */




@media screen and (max-width: 900px) {
  .burger {
    display: block;
    font-size: clamp(.5rem, 4vw, 1rem);
    z-index: 1;
  }

  .burger-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
  }

  .ticket-update-container h6 {
    height: .5rem;
  }

  .date-container {
    margin-top: 5rem;
  }
}

@media screen and (max-width: 748px) {
  .ticket-update-container h6 {
    height: .2rem;
  }
}


/* container design */
.btn-danger {
  background-color: #D4143C;
  border-color: #D4143C;
  color: white;
  /* Set text color to white for better contrast */
}

.btn-danger:hover {
  background-color: #B21236;
  /* Slightly darker shade for hover effect */
  border-color: #B21236;
}

.dataTables_filter {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.faq-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
}

.faq-icon {
  width: clamp(1.5rem, 3vw, 3rem);
  height: auto;
}

#issue_list_tbl_filter,
#issue_list_tbl_hr_filter,
#issue_list_tbl_admin_filter,
#issue_list_tbl_fin_filter,
#issue_list_tbl_flt_filter,
#issue_list_tbl_lgd_filter,
#issue_list_tbl_procu_filter,
#solved_by_list_tbl_filter,
#type_support_list_tbl_filter,
#issue_type_list_tbl_filter,d
#ofc_supplies_tbl_procu_filter,
#vehicle_tbl_procu_filter,
#location_tbl_filter {
  position: relative;
  right: 37rem;
}

/* Legal Table */
#issue_list_tbl_lgd th:nth-child(2), 
#issue_list_tbl_lgd td:nth-child(2) {
  max-width: 250px; /* Adjust this value */
  word-wrap: break-word; /* Allows text wrapping */
  white-space: normal;
}

#issue_list_tbl_lgd th:nth-child(2) select, 
#issue_list_tbl_lgd td:nth-child(2) select {
  max-width: 250px; /* Adjust to desired width */
  width: 100%; /* Ensure it matches the column */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* end */

.add_button {
  position: relative;
  top: 5.3rem;
  z-index: 2;
}

.add_button a {
  border-radius: 10rem;
  background: #D4143C;
  box-shadow: inset -11px 11px 22px #b41133,
    inset 11px -11px 22px #f41745;
}

.add_button a:hover {
  border-radius: 10rem;
  background: #840b23;
  box-shadow: inset -11px 11px 22px #a30f2f,
    inset 11px -11px 22px #cd1238;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: #F7F6FE;
  /* Light grey color for odd rows */
}

.table-striped tbody tr:nth-of-type(even) {
  background-color: #ffffff;
  /* White color for even rows */
}

table tbody tr {
  height: 64px;
  /* Set the height of the rows to 64px */
}


/* template_login */

.login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./../../img/hd_bg_login.png');
}

@media screen and (max-width: 767px) {
  .login-wrapper {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./../../img/hd_bg_phn.png');
  }


}

/*end*/
.selected {
    font-weight: bold;
  }

  .bold-row {
    font-weight: bold;
  }
  

.status-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color:#ff1a1a;
    border-radius: 50%;
    margin-right: 5px;
    animation: blink 0.5s infinite;
  }

  .status-indicatorreplied {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color:#ffae42;
    border-radius: 50%;
    margin-right: 5px;
  }


  .status-indicatoronhold {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color:#54B4D3;
    border-radius: 50%;
    margin-right: 5px;
  }

  
  .status-indicatorclosed {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color:#44cc00;
    border-radius: 50%;
    margin-right: 5px;
  }
  @keyframes blink {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

/*.card{
  border-radius: 8px;
  border: 1px solid #cccccc;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  box-sizing: border-box;
  width: 25em;
  height: 4em;
  transition: all linear 200ms;
}*/
/* .card:hover{
  transform: scale(1.1);
  transition: all linear 200ms;
  z-index: 1;
 box-shadow: 1px 1px 10px rgba(0,0,0,.3);
  cursor: pointer;
  background: #f2f2f2;

} */

.ml-2{
    color: black;
    display: inline-block;

}

/*.right{
  
    text-align: center;
  position: relative;
 bottom: 60px;


    

}*/


/*.ml-2:hover{
    color:  #ffffff;
}*/

a{
     color: black;
}


.required {
  color: red;
}

 
.link {
    cursor: pointer;
}

.link:hover {
    text-decoration: underline !important;
}

.btn {
    text-transform: uppercase;
}

.datatable_fixed_height {
    min-height: 550px;
}

.details-box img {
  width: auto;
  height: auto;
  max-width: 40%;
  border: 0.1px solid #e3e3e3;     /* Adds a black border around the image */
}

.alert {
  width: 100%;
  padding: 12px 16px;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  margin-bottom: 12px;
  font-size: 16px;
}

.alert.alert-success {
  background-color: rgba(227, 253, 235, 1);
  border-color: rgba(38, 179, 3, 1);
  color: rgba(60, 118, 61, 1);
}

.alert.alert-info {
  background-color: rgba(217, 237, 247, 1);
  color: rgba(49, 112, 143, 1);
  border-color: rgba(126, 182, 193, 1);
}


.alert.alert-warning {
  background-color: rgba(252, 248, 227, 1);
  border-color: rgba(177, 161, 129, 1);
  color: rgba(138, 109, 59, 1);
}

.alert.alert-danger {
  background-color: rgba(248, 215, 218, 1);
  border-color: rgba(220, 53, 69, 1);
  color: rgba(114, 28, 36,1);
}

/* website container */
.website-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-bottom: 1rem;
}

.website-container div img {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  transition: transform 0.3s ease, border-radius 0.3s ease;
}

.website-container div img:hover {
  transform: scale(1.40); /* Smoothly enlarge image */
  border-radius: 50%;
}
.navbar-brand{
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar-brand img{
  padding-left: 1rem;
}
/* END */

/*.card{
  border-radius: 8px;
  border: 1px solid #cccccc;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  box-sizing: border-box;
  width: 25em;
  height: 4em;
  transition: all linear 200ms;
}
.card:hover{
  transform: scale(1.1);
  transition: all linear 200ms;
  z-index: 1;
  box-shadow: 1px 1px 10px rgba(0,0,0,.3);
  cursor: pointer;
 
}*/

/*JULY 17 2024*/
.card {
  border: none;
  padding: 0;
  width: 450px;
  border-radius: 10rem;
  cursor: pointer;
}

.card-wrapper{
  display: block;
  padding: 20px;
  border-radius: 10rem;
  font-size: 1.25rem;
  color: #D4143C;
  background: #ffffff;
  transition: 0.2s;
  box-shadow: inset -11px 11px 22px #d9d9d9,
    inset 11px -11px 22px #ffffff;
}
.card-wrapper:hover {
  background: #f0f0f0; /* Darken background slightly */
  box-shadow: inset -11px 11px 22px #bfbfbf,
              inset 11px -11px 22px #e0e0e0; /* Darken the shadow */

}

.card .widget-content-wrapper .widget-content-left h5 {
  color: black;
  text-align: center;
  margin: 0;
}
.card .widget-content-wrapper:hover .widget-content-left h5 , .card .widget-content-wrapper:hover .widget-content-left i {
  color: #D4143C !important;
}
.card .widget-content-wrapper h5, .card .widget-content-wrapper h5{
  font-family: sans-serif;
}

.card .widget-content-wrapper .widget-content-left a {
  /* Your styling here */
  align-items: center;
 
  text-decoration: none;
}

.updateButton{
  z-index: 999;
  border-radius: 10rem;
  background: #D4143C;
  box-shadow: inset -11px 11px 22px #b41133,
    inset 11px -11px 22px #f41745;
              border: transparent;
}

.updateButton:hover {
  cursor: pointer;
  border-radius: 10rem;
  background: #840b23;
  box-shadow: inset -11px 11px 22px #a30f2f,
    inset 11px -11px 22px #cd1238;
}
.hr-submitButton{
  z-index: 999;
}

/* Legal Module */

#dvdetails1 {
  display: absolute;
  position: relative;
  bottom: 4rem;
}

.submitButton {
  display: absolute;
  position: relative;
  top: 15rem;
}

.updatebtn {
  z-index: 1;

}

/* existingCust style */
.limited-positioning .form-group { 
  display: flex; align-items: center; margin-bottom: 10px; 
} 
.limited-positioning .form-group label { 
  margin-right: 10px; width: 200px; /* Adjust this width as needed */ 
} 
.limited-positioning .form-group .required { 
  color: red; margin-left: 5px; 
} 
.limited-positioning .form-group input { 
  flex-grow: 1; min-width: 200px; /* Minimum width to fit the text */ 
} 
.limited-positioning .error { color: red; margin-left: 10px; }

/* Type of Support and Target Deadline*/
.custom-select-legal {
  width: 50%;
  display: block;
  margin-top: 5px; /* Optional spacing between label and field */
}

.no-wrap {
  white-space: nowrap;
}

/* for Other Products not found in List above and Other Documents Requested fields*/
.wide-input {
  width: 1000px !important;
  max-width: 200%; /* Ensures responsiveness */
}
/* end */






.add-icon {
  position: fixed;
  top: 1rem;
  right: 2rem;
  background-color: transparent;
  color: white;
  padding: 16px;
  font-size: 2rem;
  border: none;
  padding: 10px 20px;
  border-radius: 10rem;
  font-size: 1.25rem;
  color: #D4143C;
  background: #ffffff;
  transition: 0.2s;
  box-shadow: inset -11px 11px 22px #d9d9d9,
    inset 11px -11px 22px #ffffff;
}

.add-container:hover .addIcon {
  color: #D4143C; 
}

.add-container {
  display: none;
}

.addIcon {
  color: black;
  padding: 0;
  transition: 0.1s;
}
.add-icon:hover{
  background: #f0f0f0; /* Darken background slightly */
  box-shadow: inset -11px 11px 22px #bfbfbf,
              inset 11px -11px 22px #e0e0e0; /* Darken the shadow */
}

.addIcon:active {
  color: #9d102c;
  font-size: 2rem;
  padding: 0;
}

.data-base-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80%;
}
.deleteButton{
  color: #F41745;
}
.deleteButton:hover{
  color: #D0153C;
}
.editButton{
  color: rgb(0, 196, 0);
}
.editButton:hover{
  color: green;
}
/*end*/
/*.widget-content-wrapper{
    position:absolute;
 
    bottom:20;
    text-align:right;
}*/

.title-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 1rem;
}
.title-container h5{
  display: block;
  padding: 10px 20px;
  border-radius: 10rem;
  font-size: 1.25rem;
  color: black;
  background: #ffffff;
  transition: 0.2s;
  box-shadow: inset -11px 11px 22px #d9d9d9,
    inset 11px -11px 22px #ffffff;
}

.card1 {

  padding: 9px;
  width: 450px;
  height: 140px;
  box-shadow: 3px 10px 20px rgb(240, 240, 240);
  border: 8px solid #cccccc;

    


}

  

.form-disabled {
    opacity: .4;
    cursor: default;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
     color: #000;
    font-weight: bold;
    
}

.hide {
    display: none !important;
}





#errmsg{
  margin-top:4px;
  background: red;
  color:#fff;
  padding:4px;
  display:none;
 /* width: 250px;*/
}

.select2-selection__rendered{
    display: block;
    width: 100%;
   /* padding: 0.375rem 0.75rem;*/
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

@media print {
    .panel-heading {
        display:none
    }
}

.no-underline:hover {
    text-decoration: none;
}

* {box-sizing: border-box;}
.card-header * {list-style-type: none;}

/*.required:after{
    content:"*";
    font-weight:bold;
    color: red;
    margin-left: 5px;
}*/

.card-header {
    padding: 50px 25px;
    width: 100%;
}

.card-header ul {
    margin: 0;
    padding: 0;
}

.card-header ul li {
    color: white;
    font-size: 20px;
    letter-spacing: 3px;
}

.weekdays {
    margin: 0;
    padding: 10px 0;
}

.days {
    padding: 10px 0;
}

.badge1 {
    position:relative;
}
.badge1[data-badge]:after {
    content: attr(data-badge);
    position: absolute;
    top: -0.5px;
    right: -0.5px;
    font-size: .7em;
    background: red;
    color: white;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 18px;
    border-radius: 50%;
    box-shadow: 0 0 1px #333;
}

@media screen and (max-width:720px) {

    .weekdays td,
    .days td {
        width: 13.1%;
    }
}

@media screen and (max-width: 420px) {

    .weekdays td,
    .days td {
        width: 12.5%;
    }

    .days td .active {
        padding: 2px;
    }
}

@media screen and (max-width: 290px) {

    .weekdays td,
    .days td {
        width: 12.2%;
    }
}

form {    
    display: inline;
}

.form-inline .form-group label {
  width: 250px;
 margin: 20px 10px 5px 0;
}


@media (max-width: 800px) {
  .form-inline input {
    margin: 10px 0;
  }
  
  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }
}

.form-inline {  
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}




  
.card-headerfaq:before {
  float: right !important;
  font-family: FontAwesome;
  content:"\f068";
  padding-right: 5px;
  /* color: #000000; */
}


.card-headerfaq.collapsed[aria-expanded="true"]::before {
  /* Styles when card-headerfaq is collapsed and expanded (default state) */
  float: right !important;
  font-family: FontAwesome;
  content:"\f068";
  padding-right: 5px;
}





/* body{
background-color:#f5f5f5;
} */
.card-headerfaq.collapsed:before {
  float: right !important;
  content:"\f067";
  /* color: #f5f5f5; */
}


.card-headerfaq :hover{
  color: #ffffff;
  
}

.card-headerfaq[aria-expanded="true"] {
  color: #ffffff;
  
}

.mb-0 > a:active {
  color: #000000;
}
.mb-0 > a:focus  {
  text-decoration:none;
 
} 

.cardfaq:hover,
.cardfaq.active {
  background-color: #D1173F;
}



.cardfaq .card-headerfaq:hover {
  background-color: #D1173F; 
}  


.card-headerfaq {
  padding: 8px 8px;
  border-bottom: 1px solid transparent;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  cursor: pointer;
  transition: background-color 0.3s ease; /* Add transition animation */
  
}
.cardfaq {
  margin-bottom: 20px !important;
  background-color: #e6e6e6;
  border: 3px solid transparent;
  -webkit-box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
  box-shadow: 15px 16px 13px 8px rgb(4 4 4 / 5%);
  border-radius: 10px;
  /* background-color: #D1173F;  */
}


.card-headerfaq  {
  color: #000000;
  text-decoration: none;
  
}
.card-body{
  color: #000000;
  background-color:#f2f2f2;
  border-radius: 10px;
}


.jumbotron {
  padding: 20px;
  margin-bottom: 20px;
  color: inherit;
  background-color: #e6e6e6;
  text-align: center;
  color: #000000;
  border-radius: 10px;
  font-size: 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
  animation: jumbotron-scale 1s ease-in-out infinite alternate;
   /* background-image: url("https://ik.imagekit.io/8x8/v3/assets/blte621f0a2bd0e9f69/blt1e157c8aeac3fbd1/602751912e2b15565cb6cbb9/logo-google-workspace.svg");
  background-size: cover;
  background-position: right; */
}

@keyframes jumbotron-scale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.05);
  }
}

.jumbotron:hover {
  /* background-color: #FF4F7D; */
  animation: jumbotron-pulse 08s linear infinite;
}

@keyframes jumbotron-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}



.cardfaq:has(.collapse.show) {
  background-color: #D1173F;
}



.faq-logo {
  width: 200px; /* Adjust the width to your desired size */
  height: auto; /* Auto adjust the height while maintaining the aspect ratio */
  margin-bottom: 15px;
  border: 2px solid #fff; /* Add a white border */
  border-radius: 50%; /* Make the logo circular */

  mix-blend-mode: multiply; /* Apply a blend mode */
}


.faq-logo:hover {
  transform: scale(1.1); /* Increase the size on hover */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Add a shadow effect */
  transition: transform 0.3s, box-shadow 0.3s; /* Apply smooth transitions */
}
.faq-logo:hover {
  transform: scale(1.1); /* Increase the size on hover */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Add a shadow effect */
  transition: transform 0.3s, box-shadow 0.3s; /* Apply smooth transitions */
}

/* 
.headingmb-0{

  color: #000000;
} */
/* 
.headingmb-0 > a[aria-expanded="true"] {
  color: #ffffff;
  
}

.headingmb-0 a {
  color: #000000;
  text-decoration: none;
  
} */

.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}
.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}