/*
 * bootstrap overrides and customization
 */
@media (max-width: 992px){
    .container{
        max-width:100%;
        padding-left: 0px;
        padding-right: 0px;
    }
}

div.required > label::after {
  content: "*";
  color: red;
}

.input-group-addon {
  padding: 6px;
}

.btn-stackable {
   margin-bottom: .25rem;
   margin-top: .25rem;
}

.bg-danger-light {
  background-color: #fbe7e9;
}

.bg-danger-light-force {
  background-color: #fbe7e9 !important;
}

/* CSS Pseudo-Elements Level 4 Editor's Draft
   - Browsers not mentioned in vendor prefixes
   - Browser of newer versions than mentioned in vendor prefixes */
input::placeholder {
  color: #cccccc !important;
}

/* - Chrome ≤56,
   - Edge
   - Safari 5-10.0
   - iOS Safari 4.2-10.2
   - Opera 15-43
   - Opera Mobile 12-12.1
   - Android Browser 2.1-4.4.4
   - Samsung Internet ≤6.2
   - QQ Browser */
input::-webkit-input-placeholder {
  color: #cccccc !important;
}

/* Firefox 19-50 */
input::-moz-placeholder {
  color: #cccccc !important;
}

/* - Internet Explorer 10–11
   - Internet Explorer Mobile 10-11 */
input:-ms-input-placeholder {
    color: #cccccc !important;
}

/*
 * Navigation bar
 */
 .navbar .search-container {
  float: right;
}

.navbar .search-container button {
  padding: 6px 10px;
  border: none;
  cursor: pointer;
}

.navbar .search-container button:hover {
  background: #ccc;
}

.row {
    margin-right: 0px;
    margin-left: 0px;
}

.form-text.text-muted {
    font-size: 0.9rem;
}

.toggle.btn.btn-sm{
  margin-right: 10px;
}

/* change height of progress bar for non condensed tables */
.table:not(volontero-condensed) tbody .progress {
  height: 30px;
}
.table:not(volontero-condensed) tbody .progress .progress-bar {
  height: 30px;
}
.table:not(volontero-condensed) tbody .progress span {
  line-height: 30px;
  z-index: 2; /* required for proper printing */
}
.table:not(volontero-condensed) tbody .progress small{
  line-height: 30px;
  z-index: 2; /* required for proper printing */
}


/* reduce padding left and right for very small devices */
@media (max-width: 576px) {

  /* we put here only the column values we are actually using */
  .col, col-md-3, .col-md-3, .col-md-9, .col-12, .form-control {
    padding-right: 7px;
    padding-left: 7px;
  }
}

@media (min-width: 576px) {
  .table:not(volontero-condensed) tbody .progress {
    font-size: 0.9em; /* increase font size, scaled to smaller progress bar font size (0.75em) */
  }
}

/* set modal lg window to take more horizontal space */
@media (min-width: 576px) {
  .modal-lg {
    max-width: 98%;
  }
}
@media (min-width: 768px) {
  .modal-lg {
    max-width: 90%;
  }
}
@media (min-width: 1200px) {
  .modal-lg {
    max-width: 1100px;
  }
}
.volontero-condensed td, .volontero-condensed th {
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

.volontero-condensed input {
  text-align: center;
  padding: 0em;
  font-size: 0.9em;
  height: auto; /* after bootstrap update, height was fixed to small value */
}

.volontero-condensed .time-input input {
  min-width: 3em;
  padding-right: 0px !important;
}

.volontero-condensed .nb-input input {
  padding-right: 0px !important;
}

/* Custom color for the timeslot row that have assigned volunteers. Tune the :hover as well */
.volontero-condensed tr.timeslot-assigned {
  background-color: rgb(255, 228, 181, 0.5) !important;
}
.volontero-condensed tr.timeslot-assigned:hover {
  background-color: rgba(223, 207, 178, 0.54) !important;
}

.volontero-condensed div.form-group {
  margin-bottom: 0px;
}

/* Disable background images that appears on server errors. It messes up my condensed table
   New after the bootstrap upgrade... */
.volontero-condensed .form-control.is-valid,
.volontero-condensed .form-control.is-invalid {
  padding-right: 0em;
  background-image: none;
}

.volontero-image-button {
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
    padding: 0px;
}

.volontero-image-button-disabled {
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor: default;
    overflow: hidden;
    outline:none;
    padding: 0px;
}

.volontero-std-col {
    max-width: 600px;
}

.volontero-ext-col {
    max-width: 810px;
}

.volontero-help {
  margin-bottom: 1em;
  margin-left: 1em;
  margin-right: 1em;
}
.volontero-help ul {
  margin-bottom: 0px;
}

.volontero-checkbox-group {
  padding-top: 15px;
  display: flex;
  height: auto; /* after bootstrap update, height was fixed to small value */
}

.volontero-checkbox-group .not-public-workplace {
  color: CornflowerBlue ;
}

/* Proper text wrapping for multiline labels (do not show below checkbox) */
.volontero-checkbox-group label {
  display: inline;
}

/* Proper text wrapping for multiline labels (do not show below checkbox) */
.volontero-checkbox-group .checkbox {
  margin-bottom: .5rem
}

.volontero-spaced-button {
  margin-bottom: 5px;
  margin-top: 5px;
}

#volontero-datatable,
#volonteer-table,
#printable-datatable {
  margin-top: 6px;
}

.volontero-table-summary {
  padding-bottom: 10px;
}

.dataTables_wrapper.container-fluid {
  padding-right: 0px;
  padding-left: 0px;
}

.volontero-table-external-border {
  border: 1px solid #dee2e6;
}

.vertical-spacer {
  height: 20px;
}

.vertical-spacer-double {
  height: 50px;
}

.borderless td, .borderless th {
    border: none;
}

.narrow-field {
    width: 200px;
}

.super-narrow-field {
    width: 100px;
}

td.volontero-action {
    width: 20px;
    padding-right: 2px;
    padding-left: 2px;
}

td.volontero-action-multiple {
    padding-right: 2px;
    padding-left: 2px;
}

td.volontero-action form,
td.volontero-action-multiple form,
.dataTable tr td ul li form { /* when in responsive datatable, things get re-arranged */
    display: inline;
}

table > tbody > tr > td > ul {
    padding-left: .8rem;
}

/* Hide the buttons from data tables */
.dt-buttons {
  text-align: center;
  /* otherwise it is not centered in small layouts */
  width: auto !important;
}

@media (max-width: 576px) {
  td.volontero-action form {
      display: block;
  }

  /* Hide print button for small devices, because it's probably not supported */
  #print-button { display: none }
 }

 @media (max-width: 768px) {
  /* Hide the buttons from data tables */
  .dt-buttons { display: none }

  /* Hide the page length selection on small devices */
  #volonteer-table_length { display: none }
}



footer {
  margin-bottom: 20px;
}

/* timeslot management */
.card {
  margin-top: 10px;
}

.timeslot-opening-day-box {
  vertical-align: top;
  width: 248px;
  display: inline-block;
  vertical-align: top;
  margin-right: 5px;
  border: 1px;
}

.days-selector {
  margin-bottom: 10px;
}

/* bootstrap tab customization */
.tab-content-bordered
{
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 10px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* table header rotation
 * credits to https://www.jimmybonney.com/articles/column_header_rotation_css/
*/

.table-header-rotated-container {
  padding-right: 180px;
  font-size: 14px;
}

.table-header-rotated thead tr th {
  border-top: 0px;

  /* overrides for the volontero-scrollable class */
  background-color: initial !important;
  border-right: none !important;
  border-left: none !important;
}

 /* overrides for the volontero-scrollable class */
 .table-header-rotated .fixed-first div {
   border-top: none !important;
   border-left: none !important;
 }

.table-header-rotated th.row-header{
  width: auto;
  min-width: 200px;
  left: 0px;
  position: sticky;
  background-color:white;
}

.table-header-rotated td{
  width: 40px;
  border-top: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  vertical-align: middle;
  text-align: center;
}

.table-header-rotated th.rotate-45{
  height: 180px;
  min-width: 40px;
  max-width: 40px;
  vertical-align: bottom;
  padding: 0;
  line-height: 0.8;

  /* overrides for the volontero-scrollable class */
  background-color: initial;
}

.table-header-rotated th.rotate-45 > div{
  position: relative;
  top: 0px;
  left: 90px; /* 180 * tan(45) / 2 = 80 where 160 is the height on the cell and 45 is the transform angle*/
  height: 100%;
  -ms-transform:skew(-45deg,0deg);
  -moz-transform:skew(-45deg,0deg);
  -webkit-transform:skew(-45deg,0deg);
  -o-transform:skew(-45deg,0deg);
  transform:skew(-45deg,0deg);
  overflow: hidden;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
  z-index: 99; /* To show it in print mode */
  background-color: white;
}

.table-header-rotated th.rotate-45 span {
  -ms-transform:skew(45deg,0deg) rotate(315deg);
  -moz-transform:skew(45deg,0deg) rotate(315deg);
  -webkit-transform:skew(45deg,0deg) rotate(315deg);
  -o-transform:skew(45deg,0deg) rotate(315deg);
  transform:skew(45deg,0deg) rotate(315deg);
  position: absolute;
  bottom: 80px; /* 40 cos(45) = 28 with an additional 2px margin*/
  left: -95px; /*Because it looked good, but there is probably a mathematical link here as well*/
  display: inline-block;
  width: 226px; /* 80 / cos(45) - 40 cos (45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/
  text-align: left;
}

/*
 * Availability table colors
*/
.volontero-availability-table {
  font-size: 14px;
}

.volontero-availability-table .not-available {
  background-color: WhiteSmoke;
  width: 40px;
}

.volontero-availability-table .full {
  background-color: #d9d9d9;
  width: 40px;
}

.volontero-availability-table .almost-full {
  background-color: Moccasin   ;
  width: 40px;
}

.volontero-availability-table .available {
  background-color: LightGreen;
  width: 40px;
}

/*
 * special styles for printing
 */
 @media print {
    hr.break {page-break-after: always;}
    #print-button { display: none; }

    /* Hide the search box for data tables */
    .dataTables_filter { display: none }

    /* Hide the buttons from data tables */
    .dt-buttons { display: none }

    /* set headers a bit smaller */
    h2, h1 { font-size: 1.5rem; }

}


/*
 * trick for printing with Firefox until this bug is fixed...
 * it impacts the event summary page which has row elements for the graphs
 * https://bugzilla.mozilla.org/show_bug.cgi?id=939897
 * https://github.com/twbs/bootstrap/issues/23489
 */
@-moz-document url-prefix() {
  @media print {
    .row,
    .form-row { display: block !important; }
  }
}


/*
 * special styles for data tables
 */
table {
  border-spacing: 0;
}

div.dataTables_info {
  white-space: normal !important; /* allow the pagination info to be split on two pages */
  margin-bottom: 10px;
}


table.volontero-condensed th::before {
  bottom: 0.3em !important;
}

table.volontero-condensed th::after {
  bottom: 0.3em !important;
}

td.nowrap, th.nowrap {
  white-space: nowrap;
}

/*
 * Scrollable data table with fixed header and first column
 */

 /* This is the container for a */
div.volontero-scrollable {
  max-height: 80vh
}

/* Fix the upper left cell to both scroll positions */
table.volontero-scrollable .fixed-first {
  position: sticky;
  background-color: white !important;
  z-index: 3;
  top: 0px;
  left: 0px;
}

/* Stick header row to the top of the table */
table.volontero-scrollable thead th {
  background: white;
  position: sticky;
  top: 0;
  z-index: 2;
  line-height: 1em; /* trick due to inability to stick thead elements in chrome */
}

/* We cannot stick the thead on chrome and derivative - so we need to trick with the th
   and set the correct height since we have two of them.
*/
table.volontero-scrollable thead tr:nth-of-type(2) th {
  top: 1.8em;
}

/* Stick first column to the left of the table */
table.volontero-scrollable > tbody > tr > th {
  position: sticky !important;
  position: -webkit-sticky !important;
  background-color: white;
  left: 0px;
  z-index: 2;
  background-clip: padding-box;
  font-weight: normal;
}

/* Custom bordering because we cannot use the bootstrap bordering
   which is using border-collapse
*/
table.volontero-scrollable {
  border-collapse: separate;
  border-bottom: 1px solid #dee2e6;
}

table.volontero-scrollable .fixed-first {
  border-left: 1px solid #dee2e6;
  border-top: none;
  border-bottom: 1px solid #dee2e6;
}

table.volontero-scrollable td {
  border-right: 1px solid #dee2e6;
}

table.volontero-scrollable tbody th {
  border-right: 1px solid #dee2e6;
  border-left: 1px solid #dee2e6;
}

table.volontero-scrollable thead th {
  border-right: 1px solid #dee2e6;
  border-top: none;
  border-bottom: 1px solid #dee2e6;
}

/* Set some styling for the first column */
@media (min-width: 768px) {
  table.volontero-scrollable > tbody > tr > th {
    font-weight: normal;
    min-width:150px;
  }
}

/* Workaround to make the borders visible on header roww */
table.volontero-scrollable thead tr th {
  background-clip: padding-box;
}


.loader {
    border: 6px solid #f3f3f3; /* Light grey */
    border-top: 6px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 39px;
    height: 39px;
    animation: spin 2s linear infinite;
    margin: auto;
}

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

/* Make progress bars appear when printing web pages. */
@media print {
  .progress {
      position: relative;
  }
  .progress:before {
      display: block;
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 0;
      border-bottom: 2rem solid #eeeeee;
  }
  .progress-bar {
      /*position: absolute;*/
      top: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      border-bottom: 2rem solid #337ab7;
  }
  .progress-bar.bg-success {
      border-bottom-color: #28a745;
  }
  .progress-bar.bg-info {
      border-bottom-color: #5bc0de;
  }
  .progress-bar.bg-warning {
      border-bottom-color: #ffc107;
  }
  .progress-bar.bg-danger {
      border-bottom-color: #dc3545;
  }

  .progress-bar span {
    top: 0.35em;
  }

  .progress-bar small {
    top: 0.4em;
  }
}