/*Set custom colours here*/
:root{ --color-primary: #3F8E9E; ;--color-link:   #3F8E9E;;--color-hover: #3F8E9E;--color-buttontext: #ffff;--color-pagination:  #3F8E9E;;--color-majorth:#000000;--color-minorth:#dbdbdb;--cassiopeia-color-primary: #3F8E9E;--color-white: #FFFFFF;
    --cassiopeia-color-link: #0e60a5;    --cassiopeia-color-hover: #2db5c4;}

/* SESSIONS*/
/* code to format the session meeting listings in columns.  2 columns for 2 sessoins etc.*/
.sessions-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .session {
            flex-basis: 48%; /* Adjust this value to control the width of each session cell */
            margin-bottom: 10px;
          
        }

        /* Media query for smaller screens */
        @media screen and (max-width: 768px) {
            .session {
                flex-basis: 100%; /* Set the width to 100% to make columns stack */
            }
        }

.editsession {
    width: 50%;
    /*margin: 0 auto;*/
}


/*.session-container {
        display: flex;
        flex-wrap: wrap;
    }

 .session {
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
    }

 @media screen and (max-width: 767px) {
 .session {
            width: 100%;
        }
    }

*/

/*.conference-name {
  text-align: center;
}*/


.attendee_row {
  display: flex;
  flex-wrap: wrap;
}

.attendee_row div {
  flex: 50%;
}

.attendee_row textarea {
  width: 500px;
}

/*FORM FIELDS*//*FORM FIELDS*//*FORM FIELDS*//*FORM FIELDS*//*FORM FIELDS*//*FORM FIELDS*//*FORM FIELDS*//*FORM FIELDS*//*FORM FIELDS*/

/* puts form fileds in a flexbox for responsiveness*/
.form-field {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }

  .form-field label {
    flex: 1 0 120px; /* don't grow, don't shrink, start at 120px */
    margin-right: 15px;
    font-weight: bold;
  }

  .form-field input,
  .form-field select {
    flex-grow: 1; /* take up the rest of the space */
  }

  @media screen and (max-width: 480px) {
    .form-field {
      flex-direction: column;
    }

    .form-field label {
      margin-bottom: 5px;
    }
  }
  
  .radio-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 5px;
}

.radio-container input[type="radio"] {
    width: 25px;
    height: 60px;
    margin-right: 25px;
}

.radio-container label {
    font-size: 16px;
}

.center-input {
    text-align: center;
}

.center-input label {
    flex: 1; /* Allow the label to take the available space */
    text-align: left; /* Align the label text to the left */
}
.center-input input[type="number"] {
  text-align: center;
}

.center-input select {
    text-align: center;
}
  
  

/*CONFERENCE FORM*//*CONFERENCE FORM*//*CONFERENCE FORM*//*CONFERENCE FORM*//*CONFERENCE FORM*//*CONFERENCE FORM*//*CONFERENCE FORM*/
/* sizes the conferece form on the conferencepreferences page*/
 .conference_form-container {
      max-width: 800px;  /* Adjust this to get the desired width */
      /*margin: auto;*/
      padding: 10px;
    }

/*code to align text and buttins on Coference list on conference page*/
.conference-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 10px;
}

.conference-name {
   width: 300px; /* Adjust the width as needed */
    margin-right: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  text-align: left;
}

input,
select {
    height: 60px; /* adjust this value as needed */
}

/* Custom styles for the input field select on the assign table page */
.tableassign-select {
    width: 200px!important;
  height: 40px!important;
  
}
/* Make Warning text red and bold*/
.warning {
        color: red;
        font-weight: bold;
    }


/*Assigning attendees page*/

 

/*MEETINGS*//*MEETINGS*//*MEETINGS*//*MEETINGS*//*MEETINGS*//*MEETINGS*//*MEETINGS*//*MEETINGS*//*MEETINGS*//*MEETINGS*//*MEETINGS*/

.meetings-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.meeting {
    flex-basis: 100%; /* Adjust this value to control the width of each meeting cell */
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between; /* Add this line to place the meeting-div and requests-div side by side */
}

.meeting-div,
 {
    width: 30%; /* Adjust this value to control the width of each meeting or request cell */
    /* Add any other desired styles */
}

.requests-div {
    border-left: 1px solid #ccc; /* Add a vertical line */
    padding-left: 10px; /* Add left padding for spacing */
  width: 100%;
}


/* Container for form on the assign meetings page */

.center-container {
  display: flex;
  justify-content: center;
}

.meeting-form-container {
  width: 50%;
}

.meeting-row {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%; /* Adjust the column widths as desired */
  justify-items: start;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
}

.meeting-column {
  display: flex;
  align-items: center;
}

.meeting-column:first-child {
  justify-content: flex-end;
  text-align: right;
}

table {
      padding: 10px!important;
    }
td, th {
    padding: 5px; /* Adjust the value as per your requirement */
}

.center-column {
  text-align: center;
}

.center-header {
  text-align: center;
}

 .name-button {
    display: inline-block;
    padding: 8px 16px;
    background-color: blue;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
  }


/*DRAGGABLE and DROPPABLE CODE*//*DRAGGABLE and DROPPABLE CODE*//*DRAGGABLE and DROPPABLE CODE*//*DRAGGABLE and DROPPABLE CODE*//*DRAGGABLE and DROPPABLE CODE*/
/* code for jquery drag and drop functions*/

.draggable {
            width: 150px;
            height: 55px;
            padding: 5px;
            margin: 5px;
            background: var(--color-link);
 			 border-radius: 10px;
  			color: white;
			font-weight: bold;
  			text-align: center;
            cursor: move!important;
        }

.name-button.draggable {
    cursor: move !important;
}


  .droppable {
  min-width: 250px;
  /*width: 80%;*/
  height: 65px;
  padding: 5px;
  margin: 5px;
  border: 1px solid #000;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

        .time-label {
            font-weight: bold;
            margin-right: 10px;
        }

       /* .droppable-item {
            display: flex;
          min-width: 100px;
            align-items: center;
        }*/

.droppable-item h4 {
  min-width: 100px; /* Set the minimum width for the text portion inside h4 */
  font-weight: bold;
  margin-right: 10px;
}

.droppable-container {
    display: flex;
    align-items: center;
}



/*@media (min-width: 992px) {
    body.wrapper-fluid .site-grid {
        grid-template-columns: [full-start] minmax(0, 0%) [main-start] minmax(0, 15%) repeat(2, minmax(0, 35%)) [main-end] minmax(0, 15%) [full-end];
    }
}*/

/*BUTTONS*//*BUTTONS*//*BUTTONS*//*BUTTONS*//*BUTTONS*//*BUTTONS*//*BUTTONS*//*BUTTONS*//*BUTTONS*//*BUTTONS*//*BUTTONS*//*BUTTONS*/
/* Custom Button Style */
.btn-dash {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
  

.btn-dash:hover {
  background-color: #2db5c4;
}

.btn-dash-icon {
  font-size: 50px;
  color: #ffffff;
  margin-top: 100px;
}

.btn-dash-text {
  font-size: 24px;
  font-weight: bold; /* Make the text bold */
  color: #ffffff;
  margin-top: 20px;
}

.confbtn-button.btn.btn-success {
  background-color: #5cb85c;
  border-color: #4cae4c;
  color: #ffffff;
  margin: 15px;
  padding: 15px;
  border-radius: 0.25rem;
  line-height: 1.5;
}

.confbtn-button.btn.btn-success:hover {
  color: var(--btn-hover-color, #fff);
  background-color: var(--btn-hover-bg, #3a6f3a);
  border-color: var(--btn-hover-border-color, #366936);
}

.confbtn-button.btn.btn-success:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--btn-focus-shadow-rgb, 96, 150, 96), 0.5);
}

.confbtn-button.btn.btn-success:active {
  color: var(--btn-active-color, #fff);
  background-color: var(--btn-active-bg, #366936);
  border-color: var(--btn-active-border-color, #336233);
  box-shadow: var(--btn-active-shadow, inset 0 3px 5px rgba(0, 0, 0, .125));
}

.confbtn-button.btn.btn-success:disabled {
  color: var(--btn-disabled-color, #fff);
  background-color: var(--btn-disabled-bg, #448344);
  border-color: var(--btn-disabled-border-color, #448344);
}


.confbtn-button.btn.btn-danger {
  background-color: #d9534f;
  border-color: #d9534f;
  color: #ffffff;
  margin: 15px;
  padding: 15px;
  border-radius: 0.25rem;
  line-height: 1.5;
}

.confbtn-button.btn.btn-danger:hover {
  color: var(--btn-hover-color, #fff);
  background-color: var(--btn-hover-bg, #c9302c);
  border-color: var(--btn-hover-border-color, #ac2925);
}

.confbtn-button.btn.btn-danger:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--btn-focus-shadow-rgb, 217, 83, 79), 0.5);
}

.confbtn-button.btn.btn-danger:active {
  color: var(--btn-active-color, #fff);
  background-color: var(--btn-active-bg, #ac2925);
  border-color: var(--btn-active-border-color, #8c1e19);
  box-shadow: var(--btn-active-shadow, inset 0 3px 5px rgba(0, 0, 0, .125));
}

.confbtn-button.btn.btn-danger:disabled {
  color: var(--btn-disabled-color, #fff);
  background-color: var(--btn-disabled-bg, #b94a48);
  border-color: var(--btn-disabled-border-color, #b94a48);
}



.button-group {
    display: flex;
    align-items: center;
    margin-left: 10px;
}

.button-group button {
    margin-left: 5px;
}


.logincontainer{
 display: flex;
          flex-wrap: wrap; /* allows the flex items to wrap onto multiple lines if necessary */
          width: 70%; /* sets the width of the container to 80% of the parent element */
          align-items: center; /* Vertically center the child element within the parent element */
   max-width: 650px;
   justify-content: center;
  margin: auto;
   padding: 10px;
   border: 5px solid var(--color-primary)!important;
         
           border-radius: 10px;
  
}



.success-message {
    color: green;
  font-weight: bold; /* Make the text bold */
    margin-bottom: 10px;
}

.error-message {
    color: red;
  font-weight: bold; /* Make the text bold */
    margin-bottom: 10px;
}



/*SPINNINGCIRCLEFOREMAILSEND*//*SPINNINGCIRCLEFOREMAILSEND*//*SPINNINGCIRCLEFOREMAILSEND*//*SPINNINGCIRCLEFOREMAILSEND*//*SPINNINGCIRCLEFOREMAILSEND*/
#loading-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top: 4px solid #fff;
  width: 40px;
  height: 40px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}