// 1. Configuration and helpers
@import './abstracts/variables';
@import 'colors';


// 2. Vendors
@import 'custom-bootstrap';


// 3. Base
@import 'text-types';


// 4. Layout

@import './layout.scss';

// 5. Components
@import './components/buttons.scss';
@import './components/sidepanel.scss';


// 6. Page-specific styles

@import './components/rendering.scss';
@import './components/event-rendering.scss';
@import './components/mobile-rendering.scss';

@import './components/participants.scss';

// 7. Themes


/* AG: please do not change basic behaviour of html elements in global style sheet!!
ol,
ul {
  list-style: none;
  padding: 0px;
  display: flex;
  margin: 0px;
}
*/

.nav-link {
  font-size: 1rem;
  font-weight: 300;
}

.card {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  border: 0;
  font-weight: 400;
}


@media (min-width: 768px) {
  .navbar-nav .nav-item a.nav-link {
    margin-right: 1rem;
  }
}

.content-area {
  margin-top: 60px;
  margin-top: 0px; // Mitko issue with project view without navigation
  min-height: 100vh;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow-y: hidden;
}

.content-body {
  margin-top: 60px;
}

@media (min-width: 1200px) {
  .content-area {
    margin-top: 0px;
  }

  .content-body {
    margin-top: 80px;
  }
}

.table-wrapper {
  background-color: $white;
  opacity: 1.0;
}

.div-opacity {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 5px;
  background-color: rgba(20, 7, 7, 0.3);
  color: $white;
}


.toggle-option-text-small {
  font-size: 0.8rem;
  vertical-align: super;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: none !important;
}

::-webkit-scrollbar {
  width: 7px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(155, 155, 155, 0.5);
  border-radius: 20px;
  border: transparent;
}

.light-font-color{
  color: $dark-grey !important;
}

.dark-font-color{
  color: $white !important;
}

.font-weight-400 {
  font-weight: $regular-weight;
}

.font-weight-500 {
  font-weight: $medium-weight;
}

.font-weight-600 {
  font-weight: $semi-bold-weight;
}

.font-20 {
  font-size: $big-extra;
}

.font-16 {
  font-size: $standard;
}

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

.w-space {
  white-space: break-spaces;
}

.cur-pointer {
  cursor: pointer
}

.premium-logo-design {
  width: 55px;
  height: 20px;
  object-fit: contain;
}

.new-premium-label {
  background-color: $yellow;
  padding: unset !important;
  text-align: center;
  border-radius: 3px;
  font-style: italic;
  font-weight: $semi-bold-weight;
  width: 50px;
}

.justify-content-space-between {
  justify-content: space-between !important;
}

.beta-text {
  color: $primary;
  font-weight: $semi-bold-weight;
}

::v-deep {
  .custom-link {
    color: $primary;
    cursor: pointer;
  }
}

input:disabled {
  cursor: no-drop;
}

/*--- Styles for tabs component ----*/
// .vue-tablist {
//   list-style: none;
//   display: flex;
//   padding-left: 0;
//   border-bottom: 1px solid #e2e2e2;
// }

// .vue-tab {
//   padding: 5px 10px;
//   cursor: pointer;
//   user-select: none;
//   border: 1px solid transparent;
//   border-bottom-color: #e2e2e2;
//   border-radius: 3px 3px 0 0;
//   background-color: white;
//   position: relative;
//   bottom: -1px;
// }

// .vue-tab[aria-selected='true'] {
//   border-color: #e2e2e2;
//   border-bottom-color: transparent;
// }

// .vue-tab[aria-selected='false'] {
//   color: $checked-color;
//   text-decoration: underline;
// }

// .vue-tab[aria-disabled='true'] {
//   cursor: not-allowed;
//   color: #999;
// }

/*---------------------------------  styles for the test page only -------------------*/


// .d-myParticipant {
//   font-weight: 100;
// }

// .k-userParticipant {
//   font-weight: 600;
// }

// .d-scrollableContainer {
//   display: flex;
//   text-align: left;
//   justify-content: flex-start;
//   flex-grow: 0;
//   margin-bottom: 10px;
//   //margin: 0 auto;

//   .d-expandableScrollContent {
//     display: flex;
//     flex-direction: row;
//     border: 1px solid #d4dade;
//     flex-grow: 0;
//     margin: 0;
//     margin-left: 100px;
//     overflow-x: auto;


//     .d-date {
//       font-size: 26px;
//       font-weight: 500;
//       font-family: 'Fira Sans', 'Trebuchet MS', 'Helvetica Neue', 'Arial',
//         sans-serif;
//       margin: 4px 0;
//     }

//     .d-day {
//       color: #5d6e79;
//       text-transform: uppercase;
//       font-weight: 500;
//       font-style: normal;
//       font-family: 'Fira Sans', 'Trebuchet MS', 'Helvetica Neue', 'Arial',
//         sans-serif;
//       -webkit-font-smoothing: antialiased;
//       -moz-osx-font-smoothing: grayscale;
//       letter-spacing: 1px;
//     }

//     .d-participance-count {
//       font-size: 1.5rem;
//     }

//     aside {
//       border-right: 1px solid #d4dade;
//       // background-color: rgb(255, 255, 255);
//       width: $aside_width;
//       flex-shrink: 0;
//       display: flex;
//       flex-direction: column;
//       justify-content: flex-end;
//       position: sticky;
//       left: 0;

//       .d-myParticipantInfo {
//         display: none;
//       }

//       .participant-icons {
//         display: flex;
//         width: 15px;
//         flex-shrink: 0;
//         padding-top: 8px;
//       }

//       .d-name-text {
//         white-space: nowrap;
//         position: relative;
//         line-height: 1;
//       }

//       .d-participants {
//         .d-participantInfo {
//           white-space: nowrap;
//           text-overflow: ellipsis;
//           line-height: 1.4;
//           padding: 2px;
//           text-align: left;
//           flex-grow: 1;
//           padding-left: 7px;

//           .d-name-only {
//             white-space: nowrap;
//             text-overflow: ellipsis;
//             line-height: 1;
//             padding: 0px 8px;
//             padding-left: 0px;
//             position: relative;
//             display: flex;
//           }
//           .d-name-edit {
//             position: absolute;
//             right: 0;
//             top: 0;
//           }

//           .d-name-email {
//             white-space: nowrap;
//             text-overflow: ellipsis;
//             line-height: 1;
//             font-size: 0.6rem;
//             padding: 2px;
//           }

//           .d-text {
//             white-space: nowrap;
//             text-overflow: ellipsis;
//             line-height: 1;
//             text-overflow: ellipsis;
//           }
//         }
//       }

//       .d-newParticipant {
//         height: 39px;
//         // background: #98cdfb;
//         // background: $primary;

//         .d-participantInfo {
//           white-space: nowrap;
//           overflow: hidden;
//           text-overflow: ellipsis;
//           line-height: 1.4;

//           .d-text {
//             white-space: nowrap;
//             overflow: hidden;
//             text-overflow: ellipsis;
//             line-height: 1;
//           }
//         }
//       }
//     }

//     .d-options {
//       display: flex;
//       flex-grow: 1;
//       flex-direction: row;
//       align-items: stretch;

//       .d-option {
//         display: flex;
//         flex-grow: 1;
//         flex-direction: column;
//         align-items: strech;

//         .d-headerGroup {
//           display: flex;
//           flex-direction: column;
//           border-bottom: 1px solid #d4dade;
//           flex-grow: 1;
//           // background: $k-background;
//           color: white;

//           .d-optionDetails {
//             flex-direction: column;
//             flex-grow: 1;
//             display: flex;
//             align-items: stretch;
//           }

//           .d-text {
//             text-align: center;
//             padding: 0 4px;
//             margin-bottom: 16px;
//             flex-grow: 1;
//             max-width: 180px;
//             white-space: nowrap;
//             overflow-wrap: break-word;
//             text-overflow: ellipsis;
//             overflow: hidden;
//           }

//           .d-NewPreference {
//             justify-content: center;
//             min-width: 72px;
//             // background: #98cdfb;
//             // background: $primary;
//             // background: #eeeeee;
//           }

//           .d-optionDate {
//             padding: 0 20px;
//             flex-basis: auto;
//             display: flex;

//             .d-dateGroup {
//               display: flex;
//               flex-direction: column;
//               align-items: center;
//               .d-month {
//                 display: block;
//               }
//               .d-date {
//                 display: block;
//               }
//               .d-day {
//                 display: block;
//               }
//             }
//           }
//         }
//       }
//     }

//     .d-choice,
//     .d-time {
//       flex-direction: column;
//       flex-grow: 1;
//       display: flex;
//       align-items: stretch;
//     }

//     .d-time {
//       text-align: center;
//       //align-items: flex-end;
//     }

//     .flex-item {
//       // background: #ffffff;
//       padding: 10px;
//       border: 0px solid #333333;
//       //flex-basis: 100px;

//       color: #ffffff;
//       font-size: 1em;
//       text-align: center;
//     }

//     .d-choiceDetails {
//       flex-direction: column;
//       display: flex;
//     }

//     .flex-container {
//       padding: 0;
//       margin: 0;
//       list-style: none;

//       -ms-box-orient: horizontal;
//       display: -webkit-box;
//       display: -moz-box;
//       display: -ms-flexbox;
//       display: -moz-flex;
//       display: -webkit-flex;
//       display: flex;
//     }

//     .nmbParticipants {
//       border: 1px solid #d4dade;
//       border-right: 0px solid #d4dade;
//       border-top: 1px solid #d4dade;
//     }

//     .d-option {
//       padding: 0 0px;
//       border-right: 1px solid #d4dade;
//       //border-bottom: 1px solid #d4dade;
//     }

//     .d-participantCount {
//       justify-content: flex-end;
//       border-top: 1px solid #d4dade;
//       color: rgba(55, 152, 212, 0.8);
//       padding: 10px 0px;
//       text-align: center;
//       // background: white;
//       font-size: 0.9rem;
//     }

//     .d-participationChoices {
//       .d-name {
//         width: $aside_width;
//         justify-content: left;
//         border-bottom: 1px solid #d4dade;
//         border-left: 1px solid #d4dade;
//       }
//     }

//     .d-choice {
//       min-width: 72px;
//       justify-content: center;
//       border-left: 1px solid #fefefe;
//       border-bottom: 1px solid #d4dade;
//     }

//     .d-checked {
//       // background-color: #cdeaa1;
//       color: #486818;
//     }

//     .d-name {
//       font-size: 1em;
//       line-height: 1;
//       border-bottom: 1px solid #d4dade;
//     }

//     .d-participantCountHeader {
//       font-size: 1.3rem;
//       line-height: 1;
//       border-bottom: 1px solid #d4dade;
//     }

//     .d-unchecked {
//       // background-color: #fcede9;
//       color: #b43a18;
//     }

//     .d-preferences,
//     .d-participants {
//       display: flex;
//       flex-direction: column;
//     }

//     .d-participants {
//       justify-content: flex-end;
//     }

//     .d-choiceDetails {
//       flex-direction: column;
//       display: flex;
//     }
//   }
// }

// @media (max-width: 580px) {
//   .d-scrollableContainer {
//     margin: 0;

//     .d-expandableScrollContent {
//       flex-direction: column;
//       flex-grow: 1;
//       display: flex;

//       overflow-x: hidden;

//       aside {
//         border-right: 1px solid #d4dade;
//         background-color: rgb(255, 255, 255);
//         width: 100%;
//         flex-shrink: 0;
//         display: flex;
//         flex-direction: column;
//         justify-content: flex-start;
//         position: flex;
//         left: 0;

//         .d-myParticipantInfo {
//           display: flex;
//           font-size: 1.3rem;
//           border-bottom: 1px solid #d4dade;
//         }
//       }

//       .d-options {
//         display: flex;
//         flex-grow: 1;
//         flex-direction: column;
//         align-items: stretch;

//         .d-option {
//           display: flex;
//           flex-grow: 1;
//           flex-direction: row;
//           align-items: strech;

//           .d-headerGroup {
//             display: flex;
//             flex-direction: row;
//             border-bottom: 1px solid #d4dade;
//             flex-grow: 1;

//             .d-NewPreference {
//               justify-content: center;
//               align-items: center;
//               display: flex;
//             }

//             .d-text {
//               text-align: left;
//               padding: 8px;
//               margin-bottom: 8px;
//               max-width: none;
//             }

//             .d-optionDate {
//               padding: 0 0px;
//               flex-basis: 72px;
//               display: flex;
//               flex-shrink: 0;
//               align-items: flex-end;
//               justify-content: center;

//               .d-dateGroup {
//                 display: flex;
//                 flex-direction: column;
//                 align-items: center;

//                 .d-month {
//                   display: block;
//                 }
//                 .d-date {
//                   display: block;
//                 }
//                 .d-day {
//                   display: block;
//                 }
//               }
//             }

//             .d-optionDetails {
//               display: flex;
//               align-items: stretch;
//               flex-grow: 1;
//               justify-content: center;
//               flex-direction: column;

//               .d-time {
//                 display: flex;
//                 flex-direction: row;
//                 align-items: flex-end;
//                 margin-top: 8px;
//                 margin-left: 8px;
//               }

//               .d-participantCount {
//                 display: flex;
//                 flex-direction: row;
//                 align-items: flex-start;
//                 border-top: 0px solid #d4dade;
//                 margin-left: 8px;
//                 text-align: left;
//                 justify-content: flex-start;
//               }
//             }
//           }
//           .d-preferences {
//             .d-choice {
//               display: none;
//             }
//             .d-myParticipant {
//               display: flex;
//               justify-content: center;
//               align-items: center;
//             }
//           }
//         }
//       }

//       .d-participants {
//         display: none;
//       }

//       .d-choice {
//         flex-direction: row;
//       }
//     }
//   }
// }