/*----------------------------------------------------------------------------*/
/* MAIN                                                                       */
/*----------------------------------------------------------------------------*/

/* https://css-tricks.com/couple-takes-sticky-footer/ */

html, body
{
  height: 100%;
}

body
{
  margin:0px;
  display: flex;
  flex-direction: column;
}

.main
{
  margin:2.5em;
  flex: 1 0 auto;
}

/*----------------------------------------------------------------------------*/
/* HEADERS                                                                    */
/*----------------------------------------------------------------------------*/

.title-text
{
  color: white;
  font-weight: bold;
  font-size: large;
}

.se-container
{
  display:    flex;
  min-height: 80px;
  align-items: center; /* vertically */
  background: #3DCD58;
}

.se-item
{
  flex: 1;
}

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

/*----------------------------------------------------------------------------*/
/* OTHER                                                                      */
/*----------------------------------------------------------------------------*/

.disabled-link
{
  border-bottom: 2px solid lightgray;
}

/* Remove the milligram default margin-bottom */
/* Old colors */
/* background-color: #0060DF; */
/* background-color: #583dcd; */
.button
{
  background-color: #42b4e6;
  border: 0;
  margin-bottom: 0px;
}

.button-login
{
  background-color: white;
  border-color: white;
  color: gray;
}

/* try to reproduce the offical website */
.button:hover
{
  background:linear-gradient(-180deg,#51CBF9 0%, #45B9EA 80%);
}

.box-error
{
  color: #D8000C;
  background-color: #FFD2D2;
  border: 1px solid red;
  margin: 10px 0px;
  padding:10px;
  word-wrap: break-word;
}

.box-info
{
  color: #00529B;
  background-color: #BDE5F8;
  border: 1px solid blue;
  margin: 10px 0px;
  padding:10px;
  word-wrap: break-word;
}

.button-same-width
{
  min-width: 80px;
}

.min-width-200px
{
  min-width: 200px;
}

.admin-button
{
  min-width: 300px;
}

.font-small
{
  font-size: x-small;
}

/*----------------------------------------------------------------------------*/
/* BASICS HTML ELEMENTS                                                       */
/*----------------------------------------------------------------------------*/

td
{
  padding: 0;
}

th
{
  padding: 0;
}

h1
{
  border-bottom: 1px solid gray;
}

h1:not(:first-of-type)
{
  margin-top: 1em;
}

textarea
{
  height: auto; /* fix bug to take in account rows attribute */
}s

/* Remove milligram margin */
ul
{
  margin-bottom: 0;
}

.no-bullet
{
  list-style-type: none;
}

.no-bullet ul
{
  list-style-type: none;
}

pre
{
  border:        solid 30px #f4f5f6;
  border-top:    solid 10px #f4f5f6;
  border-bottom: solid 10px #f4f5f6;
  margin: 0;
  font-size: smaller;
}

img
{
  display: block;
}

/*----------------------------------------------------------------------------*/
/* MAIN PAGE WITH PROJECTS                                                    */
/*----------------------------------------------------------------------------*/

/* Ensure the space on the top and buttons of buttons in the rows */
table td
{
  vertical-align: middle; /* Ensure content remains vertically centered */
  /* min-height does not work in tables */
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

/* WORK-AROUND: align vertically checkboxes in table cells */
table td input[type="checkbox"]
{
  vertical-align: middle;
  margin: 0;
  position: relative;
  top: -1px;
}

.table-button
{
  background-color: #f8f9fa; /* Very light grey background */
  border: 1px solid #ced4da;   /* Light grey border */
  color: #495057;             /* Dark grey text for good contrast */
  font-weight: bold;
  font-size: 1.2rem;
  margin-left: 4px;
  margin-right: 4px;
  border-radius: 4px;
  text-align: center;
  display: inline-flex;  /* Transform the <a> into a flex container with text aligned */
  align-items: center;   /* vertically */
  height: 2.8rem; /* Standard height for table buttons */
  min-width: 90px; /* Uniform width for table buttons */
  padding-left: 0.5em; /* Reduced horizontal padding */
  padding-right: 0.5em; /* Reduced horizontal padding */
  justify-content: center; /* Center text within the button */
}

.table-button:first-of-type
{
  margin-left: 0;
}

.table-button:last-of-type
{
  margin-right: 0;
}

.table-button:hover
{
  background: linear-gradient(-180deg,#51CBF9 0%, #45B9EA 80%);
  border-color: #45B9EA;
  color: white;
}

/*----------------------------------------------------------------------------*/
/* PAGE PROJECT-HISTORY IMPROVEMENT                                           */
/*----------------------------------------------------------------------------*/

/* Prevent first columns from shrinking too much */
th, td
{
  white-space: nowrap;
}

/* Only the last column in tables with class 'history-table' should break long words */
.history-table td:last-child, .history-table th:last-child
{
  white-space: normal;
  word-break: break-all;
}

.history-table td
{
  padding-left: 1em;
}

/*----------------------------------------------------------------------------*/
/* PUT A HIDDEN FORM INSIDE A TABLE (USERS)                                   */
/*----------------------------------------------------------------------------*/

td form
{
  margin-bottom:0px;
}

td form fieldset
{
  margin-bottom:0px;
}

td form fieldset button
{
  margin-bottom:0px;
}

/*----------------------------------------------------------------------------*/
/* PUT A HIDDEN FORM INSIDE A TABLE (USERS)                                   */
/*----------------------------------------------------------------------------*/

.info-container
{
  display: flex;
}

.info-description
{
  margin-left: 2em;
  flex-grow: 1;
}

.info-nav a
{
  margin-left: 1em;
}

/*----------------------------------------------------------------------------*/
/* SPECIAL                                                                    */
/*----------------------------------------------------------------------------*/

.forget-link
{
  font-size: x-small;
  height: 36px;
  line-height: 36px;
  display: inline-block;
  margin-left: 1em;
}

tr:hover
{
  background-color: #EEEEEE;
}

input:read-only
{
  background-color: #eee;
}

.qr-code
{
  float: right;
}

.expand
{
  flex: 1;
}

.comment
{
  font-weight: bold;
}

.icp
{
  flex-shrink: 0;
  margin: auto;
}

/*----------------------------------------------------------------------------*/
/* PAGE EXPORT PROJECT                                                        */
/*----------------------------------------------------------------------------*/

.page-export select
{
  width: 100%;
}

.page-export .button-container
{
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

.page-export .button-container a
{
  min-width: 150px;
  margin-left: 1rem;
}

.page-export .button-container a:first-child
{
  margin-left: 0;
}

.page-export #export-status
{
  margin-right: auto; /* Pushes other elements to the right */
  display:      flex;
  align-items:  center; /* Vertically center content */
  padding-left: 0;
  opacity: 1;
  transition: opacity 0.5s ease-out; /* Must match ClearStatusTextTimeout */
}

.page-export #export-status.fade-out
{
  opacity: 0;
}

/*----------------------------------------------------------------------------*/
/* TEAM LIST HIGHLIGHTING                                                     */
/*----------------------------------------------------------------------------*/

.team-header
{
  background-color: #f0f0f0 !important; /* Light grey background */
  font-weight: bold;
}