/* General styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding:0;
  background-color: #f9f9f9;
  color: #333;            
}

.header {
  background-color: #F05D60;
  background-image: url("https://nmc.olivetech.com/wp-content/uploads/2025/02/1-2.png");
  color: white;
  background-repeat: no-repeat;
  /* background-position: left center; */
  background-position: right center;
  text-align: center;
  /* height:150px; */
  background-size: cover;
  
}
.my-profile-container{
  display: flex;
  flex-direction:row;
  justify-content:space-between;
  width:70%;
  justify-self:center;
  margin: 0 auto;
}
.myprofile-div{
  text-align:left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 20px;
}
.delegate-div{
  text-align:left;
  padding-top: 20px;
}
.navigation-page{
  justify-self: center;
  padding-top:100px;
  width:70%;
  margin: 0 auto;
  
}

/* navigation tabs */
.progress-btn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background: #f8f9fa;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  color: #888;
  cursor: not-allowed;
  width: 250px;
  text-align: center;
}

.progress-btn .icon {
  font-size: 18px;
  margin-bottom: 5px;
}


.gridicons-container{
  display: flex;
  flex-direction: column;
}

/* Registration Form */
form{
  background-color:white;
  /* padding-left:50px;
  padding-right: 50px; */
  /* padding-top: 50px; */
  border-radius:10px;
  /* margin-top: 20px; */
}



.form-container {
  width: 70%;
  margin: 0 auto;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


.thousand-span{
  font-weight: bold;
  color: #000000;
}
.proceed-container{
  /* margin-left: 50px; */
  padding: 15px;
  /* margin-left: 50px; */
  background-color: #f1f1f1;
}
.proceed-heading{
  font-size: 18px;
  color: #21272a;
  margin-bottom: 0.1cm;
}
.your-application-paragraph{
  font-size: 14px;
  color: #21272a;
  margin-bottom: 0.1cm;
}
.you-cannot-edit{
  margin-bottom: 0.1cm;
  font-size: 14px;
  color: #ff0000;
}
.margining-zero-bellow{
  margin-bottom: 0.1cm;
}
.regi input[type="text"],
.regi input[type="email"],
.regi input[type="radio"] {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  color: #697077;
  background-color: #f2f4f8;
  border: none;
  border-bottom: 1px solid #c1c7cd;
  box-sizing: border-box;
  transition: border-color 0.3s ease, background-color 0.3s ease;
  margin-bottom: 0cm;
  
}

.regi input[type="text"]:focus,
.regi input[type="email"]:focus,
.regi input[type="radio"]:focus {
  border-bottom: 2px solid #007bff;
  background-color: #ffffff;
}
/* Add !important if necessary */
.regi input{
  border-bottom: 2px solid rgb(218, 227, 236) !important;
}

.regi textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    color: #697077;
    background-color: #f2f4f8;
    border: none;
    border-bottom: 1px solid #c1c7cd;
    box-sizing: border-box;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    margin-bottom: 0cm;
    
}

.regi textarea:focus{
    border-bottom: 2px solid rgb(218, 227, 236) !important;
    background-color: #ffffff;
    box-shadow: none;
}

.regi input::placeholder {
  color: #c1c7cd;
  font-size: 14px;
  opacity: 1; /* Ensure the placeholder is fully visible */
}


.button-track-session button {
  background-color: #0073aa;
  color: white;
  padding: 10px 15px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color:rgb(61, 80, 255);
}




.message {
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 4px;
  font-weight: bold;
  text-align: center;
}

.success {
  color: #155724;
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
}

.error {
  color: #721c24;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
}
.medical-container{
  display: flex;
  flex-direction:row;
  justify-content:space-between;
  padding-left:10px;
}
.yes-no-container{
  display: flex;
  flex-direction:row;
  justify-content:space-evenly;
 
}
.yes-radio{
  margin: 5px;
  color: #21272a;
}
/* Navigation bar */
.nav-bar {
  display: flex;
  justify-content: space-between;
  
}

.nav-bar button {
  margin: 0 ;
  padding: 20px 25px;
  background-color: #ffffff;
  color: #000000;
  border: none;
  border: 1px solid #ddd;
  cursor: pointer;
}

.nav-bar button.active {
  background-color: #dde1e6;
  font-weight: bold;
  color: #000000;
  
}

/*Select track session Forms container */
.form-container {
  display: none;
  background: #fff;
  padding-left:50px;
  padding-right: 50px;
  border-radius: 0px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width:70%;
}

.form-container.active {
  display: block;
  
}


.select-track-section{
  background-color: #ffffff;
  /* padding: 20px; */
  
}

.select-track-section select {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
}
.button-track-session button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}
.select-track-sectionn button:hover {
  background-color: #0056b3;
}
.track-container-days{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 20px;
}
.day1-column{
  width: 50%;
  margin-right: 15px;
  
}
.day2-column{
    width: 50%;
    margin-left: 15px;
}
.day-paragraph{
  color: #21272A;
  padding: 10px;
  text-align: center;
  background-color: #DDE1E6;
  margin-bottom: 0px;
  
}
.disabled-label {
    color: #DDE1E6 !important;
}
.radio-group {
  padding: 10px;
  border: 1px solid #DDE1E6;
}
.horizon-line-below-track{
  color:#e9f0f0;
  border-width:2px;
  
}
.button-track-session{
  display:flex;
  flex-direction:row;
  justify-content: center;
  
}
.track-container{
  height:auto;
}
.disabled-button{
  background-color: #ccc !important;
  height: 20px;
}

/* Travel section */
.travel-divide-container{
  display:flex;
  flex-direction:row;
  justify-content:space-evenly;
  margin-top: 5px;
}
.upload-section{
  margin-top: 20px;
  
}
.upload-photo{
  color:blue;
  border:2px solid blue ;
  margin:5px;
  background-color:#ffffff;
}
.vl {
  border-left: 1px solid gray;
  height: 150px;
}
.upload-box{
  display: flex;
  flex-direction:row;
}


.upload-remove-container{
  display: flex;
  flex-direction:column;
  justify-content:space-evenly;
}
.img-upload-remove-container{
  display: flex;
  flex-direction:row;
}
.image-requirements-container{
  background-color: #f1f1f1;
  padding: 10px;
  padding-left: 20px;
}

.step {
  flex: 1;
  text-align: left;
  border: 1px solid #ddd;
  font-size: 14px;
}

.horizon-line-tickets{
  color:#dde1e6;
  border-width:2px;
  margin-bottom: 0px;
}
.upload-option{
  background-color:#ffffff;
  color:#007bff;
  border:2px solid #007bff;
  display: flex;
  justify-content: row;
  align-items: center;
  align-content: space-between;
  /* margin-left: 20px; */
}
.remove-option{
  background-color:#ffffff;
  color:rgb(243, 31, 31);
}
.button-track-session{
  margin-top: 50px;
}
.ticket-save-button{
  background-color: #0f62fe;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}
.name-of-the-ticket{
  margin-bottom: 24px;
}
.arrival-departure-container{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
.arrival-upload-image-container{
  display: flex;
  width: 100%;
  padding: 18px 25px;
  justify-content: space-between;

}
.arrival-container{
  width: 100%;
  margin-right: 13px;
  border: 1px solid #DDE1E6;
  

}
.departure-container{
  width: 100%;
  margin-left: 13px;
  border: 1px solid #DDE1E6;

}
.arrival-heading{
  background-color: #DDE1E6;
  color: #21272A;
  text-align: center;
  height: 40px;
  font-size: 14px;
  align-items: center;
  display: flex;
  justify-content: center;
  font-weight: 700;
}


/*Downloads option */
.download-section {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 50px;
  
}
.download-padding{
  padding-top: 50px;
  margin-bottom: 20px;
}
.card {
  border: 0px solid #ddd;
  padding-top: 25px;
  text-align: center;
  width: 300px;
  height: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; 
  /* position: relative;   */
}
.card_Download {
  border: 0px solid #ddd;
  padding-top: 25px;
  text-align: center;
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; 
  /* position: relative;   */
}
.view-download-container img {
  max-width: 100%;
  height: 100% !important;
}
.view-download-container button {
  margin: 0px;
  cursor: pointer;
}
/* Modal styles */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.modal img {
  max-width: 90%;
  max-height: 90%;
  border: 5px solid white;
  box-shadow: 0px 0px 20px black;
}
.modal .close {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 30px;
  color: white;
  cursor: pointer;
}
.download-option-imgs{
  /* border-style:dashed; */
  /* border-width:2px; */
  width: 190px;
  height: 250px !important;
  background-size: 100% 100%;
  
}
.view-download-container{
  display: flex;
  flex-direction:row;
  justify-content:space-evenly;
  gap: 10px;
  margin-top: 10px;
}
.view-card{
  width: 130px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
/* id card */

.id-creation{
  position: relative;
  width: 190px;
  height: 250px;
  background: url('https://nmc.olivetech.com/wp-content/uploads/2025/02/idcard.jpg') no-repeat center center;
  background-size: 100% 100%;
  font-family: Arial, sans-serif;
  color: black;
  padding: 20px;
}
#full-card-view {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: 20px;
  z-index: 1000;
}



.id-card-creation canvas {
  display: block;
  margin: 0 auto;
}

.close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
}

.view{
  max-height: 45px;
}
.arrow-btn{
  margin-bottom: 0px;
  width: 60px !important;
}
.zone-area{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 80px;
  padding-top: 10px;
  padding-bottom: 0px;
  
}
.name-user{
  margin-top: 0px;
  font-size: 13px;
}.hkj{
  color: #aaa7a7;
}
/* Example locked (faded) style for nav buttons/headings */
.locked-tab {
  color: #999;           /* Grey text color */
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  cursor: not-allowed;
  opacity: 0.6;          /* Fades the entire element (including text) */
}

.locked-tab:hover {
  opacity: 0.6;          /* Remain faded on hover */
}
.form-container,
.nav-bar,
.step.nav-btn,
.locked-tab {
font-family: 'Open Sans', sans-serif;
}

.margining-zero-bellow{
  font-family: Roboto;
  font-weight: 700;
  font-size: 18px;
  line-height: 19.8px;
  letter-spacing: 0%;
}
.select-track-section select{
  max-width: 200%;
}
.accommodation-heading{
  font-family: Roboto;
  font-weight: 700;
  font-size: 18px;
  line-height: 19.8px;
  letter-spacing: 0%;
}

.custom-logout-button {
  /* Basic size and layout */
  display: inline-block;
  padding: 6px 20px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  
  /* Colors to match your image */
  color: #fff;           /* White text */
  background-color: #000;/* Black background */
  border: none;          /* Remove default button border */

  /* Add a top+left gold accent (adjust thickness & color to match your design) */
  border-top: 2px solid #FFD700;   /* gold color */
  border-left: 2px solid #FFD700;

  /* Optional: small spacing or rounded corners if you prefer */
  /* border-radius: 4px; */
  
  /* Transition for hover effect */
  transition: background-color 0.3s, color 0.3s;
}

.custom-logout-button:hover {
  /* Slight hover effect: lighten black or invert text, etc. */
  background-color: #222; 
}
form{
	background-color: #ffffff00;
    /* margin-top: 0px; */
}
.accordion {
  display: none;
}
/* On mobile/tablet up to 768px */
@media (max-width: 868px) {
  /* Hide tab-based layout */
  .nav-bar, 
  .form-container {
    display: none !important;
  }
  /* Show accordion */
  .accordion {
    display: block;
  }
}

/* Basic accordion styling */
.accordion-item {
  margin-bottom: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.accordion-header {
  width: 100%;
  background-color: #fafafa;
  color: #333;
  padding: 10px;
  text-align: left;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
}
.accordion-content {
  display: none;
  padding: 10px;
  background-color: #fff;
}
/* Show content when open */
.accordion-item.open .accordion-content {
  display: block;
}
/* Include FontAwesome or any icon library. 
   E.g., <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" /> */

/* Container for the entire mobile layout */
.mobile-accordion-layout {
  font-family: Arial, sans-serif;
  background-color: #fff;
  margin: 0;
  padding: 0;
}

/* Red header area */
.profile-header {
  background-color: #F05D60; /* Red shade */
  color: #fff;
  padding: 20px;
  position: relative;
}
.profile-header h2 {
  margin: 0 0 8px 0;
  font-weight: 700;
  font-size: 18px;
}
.profile-header p {
  margin: 0;
  font-size: 14px;
}
.participant-info {
  position: absolute;
  top: 20px;
  right: 20px;
  text-align: right;
}
.participant-name {
  font-size: 20px;
  font-weight: 700;
  display: block;
}
.participant-label {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  display: block;
}

/* The accordion list itself */
.accordion {
  margin: 0;
  padding: 0;
}

/* Each item */
.accordion-item {
  border-bottom: 1px solid #eee;
}

/* The 'button' that toggles open/close */
.accordion-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: #f8f9fa;
  border: none;
  padding: 15px;
  cursor: pointer;
  text-align: left;
  align-items: center;
}

/* Left side: title + status */
.left-content {
  display: flex;
  flex-direction: column;
  /* or row if you want them on one line */
}

/* Title styling */
.accordion-title {
  font-weight: 600;
  font-size: 16px;
  color: #21272A;
  margin-bottom: 4px;
}

/* Status text can vary color depending on class. E.g. .required, .locked, .completed */
.accordion-status {
  font-size: 14px;
  color: #888;
}
.accordion-status.required {
  color: red;
  font-weight: 600;
}
.accordion-status.locked {
  color: #9ba1a6; 
}
.accordion-status.completed {
  color: green;
}

/* Right side icons */
.right-icon {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* The arrow (chevron-down) could rotate if open */
.accordion-chevron {
  transition: transform 0.3s ease;
}

/* The content that slides open */
.accordion-content {
  display: none; /* hidden by default */
  padding: 15px;
  background-color: #fff;
  font-size: 14px;
}

/* When open, rotate arrow and show content */
.accordion-item.open .accordion-chevron {
  transform: rotate(180deg);
}
.accordion-item.open .accordion-content {
  display: block;
}
/* --- Base styles (desktop) can remain as you have them. --- */
/* For example, .proceed-container, .button-track-session, etc. */

/* --- Media query for tablets (~up to 768px) --- */
@media (max-width: 868px) {
  /* Make the container full width */
  .proceed-container {
    width: 100% !important;
    padding: 10px !important;
    margin: 0 auto;
  }

  /* The form’s label and input can be more mobile-friendly */
  form#personalInformationChange label {
    display: block;
    margin-bottom: 4px;
    font-size: 14px; /* slightly smaller if desired */
  }
  form#personalInformationChange input[type="text"],
  form#personalInformationChange input[type="email"],
  form#personalInformationChange textarea {
    width: 100% !important; 
    max-width: 100%;
    margin-bottom: 1rem; /* space after each field */
  }
  /* If you have big 'cols="130"' on the textarea, you can remove it or override */
  form#personalInformationChange textarea {
    cols: auto; /* ignore the large col count on smaller screens */
  }

  /* The .button-track-session can be centered */
  .button-track-session {
    justify-content: center;
    margin-top: 1rem;
  }
}

/* --- Media query for phones (~up to 576px) --- */
@media (max-width: 576px) {
  /* Tweak font sizes further if you like */
  form#personalInformationChange label {
    font-size: 13px;
  }
  form#personalInformationChange input,
  form#personalInformationChange textarea {
    font-size: 14px;
  }
  .proceed-heading {
    font-size: 16px; 
  }
  .your-application-paragraph {
    font-size: 13px;
  }
}
/* --- Base styles (desktop) can remain as you have them. --- */
/* For example, .proceed-container, .button-track-session, etc. */

/* --- Media query for tablets (~up to 768px) --- */
@media (max-width: 868px) {
  /* Make the container full width */
  .proceed-container {
    width: 100% !important;
    padding: 10px !important;
    margin: 0 auto;
  }

  /* The form’s label and input can be more mobile-friendly */
  form#personalInformationChange label {
    display: block;
    margin-bottom: 4px;
    font-size: 14px; /* slightly smaller if desired */
  }
  form#personalInformationChange input[type="text"],
  form#personalInformationChange input[type="email"],
  form#personalInformationChange textarea {
    width: 100% !important; 
    max-width: 100%;
    margin-bottom: 1rem; /* space after each field */
  }
  /* If you have big 'cols="130"' on the textarea, you can remove it or override */
  form#personalInformationChange textarea {
    cols: auto; /* ignore the large col count on smaller screens */
  }

  /* The .button-track-session can be centered */
  .button-track-session {
    justify-content: center;
    margin-top: 1rem;
  }
}

/* --- Media query for phones (~up to 576px) --- */
@media (max-width: 576px) {
  /* Tweak font sizes further if you like */
  form#personalInformationChange label {
    font-size: 13px;
  }
  form#personalInformationChange input,
  form#personalInformationChange textarea {
    font-size: 14px;
  }
  .proceed-heading {
    font-size: 16px; 
  }
  .your-application-paragraph {
    font-size: 13px;
  }
}
/* ========== Base desktop/tablet styles ========== */
/* You likely already have something like this: */
.track-container-days {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 20px;
}
.day1-column {
  width: 50%;
  margin-right: 15px;
}
.day2-column {
  width: 50%;
  margin-left: 15px;
}

/* ========== Media Query for Tablet (up to 768px) ========== */
@media (max-width: 868px) {

  /* Stack columns vertically */
  .track-container-days {
    flex-direction: column;
    align-items: flex-start;
  }
  .day1-column, .day2-column {
    width: 100% !important;  /* Full width */
    margin: 0 0 20px 0;      /* Add some spacing at the bottom */
  }

  /* The note container (the grey box) can go full width instead of 50px margins */
  /* We have inline styles in the HTML for margin-left:50px; etc. 
     If you can't remove them in code, override with !important */
  .select-track-section > div[style*="margin-left:50px"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  /* Ensure the note container's height auto adjusts for its content */
  .select-track-section > div[style*="height:82px"] {
    height: auto !important;
  }

  /* The radio-group can also go full width if needed */
  .radio-group {
    width: 100%;
    margin-bottom: 8px;
  }

  /* Center the Save button or make it 100% wide */
  .button-track-session {
    justify-content: center; 
  }
  .button-track-session button {
    /* Example if you want the button to fill the width on mobile: */
    /* width: 100%; */
    /* max-width: 300px; */
    margin: 0 auto;
  }
}

/* ========== Media Query for Phone (up to 576px) ========== */
@media (max-width: 576px) {
  /* Tweak font sizes further if you wish */
  .select-track-section h1,
  .day-paragraph {
    font-size: 16px;
  }
  .radio-group label {
    font-size: 14px;
  }
  .button-track-session button {
    font-size: 14px;
  }
}
/* On screens up to 768px wide (common tablet breakpoint) */
@media (max-width: 868px) {
  /* Stack the arrival and departure containers vertically */
  .arrival-departure-container {
    flex-direction: column;
    gap: 20px; /* a little spacing between them */
    
  }

  .arrival-container,
  .departure-container {
    margin: 0; /* remove horizontal margin so they fit full width */
    width: 100%;
    /* If you want more spacing, add margin-bottom: 10px; or so */
  }

  /* The heading note about image requirements can also be full width */
  .image-requirements-container {
    width: 100% !important;
    box-sizing: border-box;
    margin-bottom: 20px; /* or whatever spacing you prefer */
  }

  /* The file upload area can stack 
     (currently .arrival-upload-image-container is row). 
     Make it column-based if desired: */
  .arrival-upload-image-container {
    flex-direction: column;
    align-items: flex-start; /* so the button is below the canvas, for example */
    gap: 10px; /* spacing between canvas and button */
  }

  /* The "Name as per the Ticket" field can also be 100% wide */
  .name-of-the-ticket input[type="text"] {
    width: 100% !important;
  }

  /* If the "Save" button or the .button-track-session 
     area needs centering or full width: */
  .button-track-session {
    justify-content: center;
    margin-top: 20px;
  }
  .button-track-session button {
    /* Optional: full-width button on mobile */
    /* width: 100%; max-width: 300px; margin: 0 auto; */
  }
  .accordion-item.open .accordion-content {
    padding-left: 60px;
    padding-right: 60px;
  }
  .my-profile-container{
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
  .header{
    background-color: #F05D60;
    background-image: none;
  }
  input[type="text"],
  input[type="email"],
  textarea {
  width: 100%;
  padding: 0.5rem;
  margin-top: 0.3rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}
}

/* On screens up to 576px (typical phone breakpoint) */
@media (max-width: 576px) {
  /* Possibly reduce font sizes further */
  .arrival-heading {
    font-size: 13px;
    height: auto; /* if you want to remove fixed height */
    padding: 10px;
  }

  .arrival-upload-image-container {
    width: 100% !important;
    padding: 10px; /* reduce padding for smaller screens */
  }

  .button-track-session button {
    font-size: 14px;
    /* and so on... */
  }
  .accordion-item.open .accordion-content {
    padding-left: 30px;
    padding-right: 30px;
  }

}
/* Default (unopened) header style */
.accordion-header {
  background-color: #f8f9fa; /* or whatever your default is */
  color: #333;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover state */
.accordion-title:hover {
  background-color: #2f5aae;
  color: #fff;
}

/* When the accordion item is "open" (selected) */
.accordion-item.open .accordion-title {
  background-color: #2f5aae;
  color: #fff;
}
.custom-logout-button .logout-image {
    display: none;
}

@media screen and (max-width: 768px) {
    .custom-logout-button .logout-text {
         display: none;
    }
    .custom-logout-button .logout-image {
         display: inline-block;
         width: 30px; /* Adjust size as needed */
         height: auto;
    }
    .custom-logout-button{
      width: 60px; /* Adjust size as needed */
      height: 45px;
    }
}

@media (max-width: 576px) {

  .custom-logout-button{
    width: 55px;
    height: 45px;
    margin-top: 12px;
    margin-left: 20px;
  }

}