body, #main-div {
  background: #fcfcfc;
}

.container-page {
  max-width: 960px;
  box-shadow: rgba(0,0,0,0.3) 0 0 4px;
  padding-top: 5px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  background: white;
  margin-top: 15px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 2px;
}


/**** element styles ****/
hr {
  border-color: #cccccc;
  margin: 0px;
}

/***** new navbar ****/

nav.navbar {
  padding-bottom: 0;
  border: none;
  background: white;
  margin-bottom: 0;
}

nav.navbar .navbar-header a {
  font-size: 25px;
  line-height: 17px;
}

nav.navbar.navbar-default a {
  color: #434343;
  font-weight: bold;
}

nav.navbar.navbar-default a:hover {
  color: #000000;
  text-decoration: none;
}

nav.navbar .navbar-item-right > a {
  padding-top: 10px;
  padding-bottom: 8px;
}

nav.navbar .navbar-item-right img {
  margin-right: 2px;
}

/**** class-based style modifiers ****/

.no-margins {
  margin: 0px;
}

.with-margins {
  margin: 10px;
}

.col-centered {
  float: none;
  margin: 0 auto;
}


/* onpromet home page */

.site-header {
  background-image: url(/static/images/onpromet_header.jpg);
  background-position: center top;
  background-color: #f9f9f9;
  background-repeat: no-repeat;
  background-size: contain;
  max-height: calc(100vh - 120px);
  height: 100vh;
  min-height: 85vh;
  text-align: center;
}

.site-header > .col-xs-12 {
  height: 100%;
}

.site-header h1 {
  width: 100%;
  text-shadow: rgba(0, 0, 0, 0.92) 0px 1px 4px, rgba(0, 0, 0, 0.52) 0px 1px 16px;
  color: #fbfbfb;
  font-weight: bold;
}

.site-header .lead {
  color: white;
  text-shadow: rgba(0, 0, 0, 0.92) 0px 1px 4px, rgba(0, 0, 0, 0.52) 0px 1px 16px;
}

@media (max-width: 850px){
  .site-header h1 {
    position: initial;
    margin-top: 45px;
    font-size: 30px;
  }

  .site-header .lead {
    position: absolute;
    width: calc(100% - 30px);
    font-size: 14px;
    top: 50%;
    color: black;
    text-shadow: rgba(255, 255, 255, 0.92) 0px 1px 4px, rgba(154, 154, 154, 0.52) 0px 1px 16px;
  }

  .site-header .btn-container {
    position: absolute;
    width: calc(100% - 30px);
    top: 75%;
  }

  .site-header .btn-container .btn {
    border-color: #009800;
    background-color: #12ca12;
  }
}

@media (min-width: 850px){
  .site-header h1 {
    position: relative;
    top: 100px;
    font-size: 50px;
  }

  .site-header .lead {
    position: absolute;
    width: 80vw;
    top: 50%;
    left: calc(50% - 40vw);
    font-size: 23px;
  }

  .site-header .btn-container {
    position: absolute;
    bottom: 15%;
    width: 40vw;
    left: calc(50% - 20vw);
  }

}

.site-header .btn:hover {
  box-shadow: 0 0 15px 6px rgba(255, 255, 255, 0.53);
  background: #08c308;
  border-color: #00d800;
}

.site-header .btn {
  background-color: #10b510;
  border-color: #00d800;
  box-shadow: 0 0 20px 2px rgba(255, 255, 255, 0.43);
  text-shadow: rgba(0, 0, 0, 0.78) 0px 1px 4px, rgba(0, 0, 0, 0.52) 0px 1px 16px;
}

.home-page__personas .jumbotron {
  padding-left: 35px !important;
  padding-right: 35px !important;
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

.home-page__personas ul {
  padding-left: 22px;
}

.home-page__personas li {
  margin-top: 10px;
}

.home-page__personas h2 {
  margin-top: 0;
  margin-bottom: 20px;
}

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


#footer {
  margin: 5px 10px 3px 10px;
}

.footer__separator {
  color: #aaa;
}
.footer__separator::before {
  content: "\2027";
}

.footer__navbar-item {
  color: #434343;
}

.footer__navbar-item:hover {
  color: #000000;
  text-decoration: underline;
}

/**** Creation/edition of a promise ****/

.promise-form {

}

.promise-form input[type=checkbox] {
  margin-top: 0;
}

.promise-form label {
  font-weight: normal;
}

.promise-form__input {
  display: inline-block;
  margin: 0 10px;
}

.promise-form__condition, .promise-form__global-condition-state {
  display: inline-block; /* temporary, until there are more than 1 type of condition available */
}

.promise-form__execution-date-begin-condition, .promise-form__execution-date-begin-condition-state {
  display: inline-block; /* temporary, until there are more than 1 type of condition available */
}

.promise-form__execution-date-end {
  display: inline-block;
}

.promise-form__execution-time-begin, .promise-form__execution-time-end {
  display: inline-block;
}

.promise-form__time-input {
  width: initial;
  vertical-align: middle;
  line-height: initial !important;
}

/***** begin display style solution #1 *****/

/*
.promise-form__condition--state-disabled {
  color: #aaa;
  cursor: not-allowed;
  text-decoration: line-through;
}

.promise-form__input--state-disabled {
  color: #aaa;
  background: #eaeaea;
  text-decoration: line-through;
}
*/

/***** end display style solution #1 *****/

/***** begin display style solution #2 *****/

.promise-form__condition--state-disabled {
  visibility: hidden;
  opacity: 0; /* this hides the clear icon in date field */
}

.promise-form__global-condition-state--state-disabled label {
  text-decoration: line-through;
}

.promise-form__global-condition-state--state-disabled label::after {
  content: "...";
}


.promise-form__execution-date-begin-condition--state-disabled {
  visibility: hidden;
  opacity: 0; /* this hides the clear icon in date field */
}

.promise-form__execution-date-begin-condition-state--state-disabled label {
  text-decoration: line-through;
}

.promise-form__execution-date-begin-condition-state--state-disabled label::after {
  content: "...";
}


.promise-form__execution-date-end-condition-state {
  display: inline-block;
}

.promise-form__execution-date-end-condition {
  display: inline-block;
}

.promise-form__execution-date-end-condition--state-disabled {
  visibility: hidden;
  opacity: 0; /* this hides the clear icon in date field */
}

.promise-form__execution-date-end-condition-state--state-disabled label {
  text-decoration: line-through;
}

.promise-form__execution-date-end-condition-state--state-disabled label::after {
  content: "...";
}

/***** end display style solution #2 *****/

.promise-form__execution-date-begin-condition-state--state-enabled.promise-form__execution-date-begin-condition-state--show-only-when-state-is-enabled {
  display: inline;
}

.promise-form__execution-date-begin-condition-state--state-disabled.promise-form__execution-date-begin-condition-state--show-only-when-state-is-enabled {
  display: none;
}

.promise-form__execution-date-begin-condition-state--state-enabled.promise-form__execution-date-begin-condition-state--show-only-when-state-is-disabled {
  display: none;
}

.promise-form__execution-date-begin-condition-state--state-disabled.promise-form__execution-date-begin-condition-state--show-only-when-state-is-disabled {
  display: inline;
}

.promise-form__execution-date-begin {
  display: inline-block;
}

.promise-form__sentence-input {
  width: 650px;
}

.promise-form__date-input {
  width: initial;
  /* at least for #number_of_participants_goal_reached_maximum_date */
  vertical-align: middle;
  padding: 0 10px;
  line-height: 100%;
}

.promise-form__minimum-supporters-input {
  width: 4em;
  text-align: center;
  padding: 6px 2px;
}

.promise-form__description-input {
  /*width: 600px;
  max-width: 650px;*/
  display: block;
  min-height: 140px !important;
  height: initial;
  padding: 2px;
}

.promise-form__possible-answers ul {
  padding-left: 0;
}

.promise-form__possible-answers li {
  list-style: none;
}

.promise-form__author-subscribes-to-users-answers .promise-form__input {
  width: initial;
}

.promise-form__submit-button {
  margin-top: 10px;
}


/**** Listing promises ****/


.promises-list {
  margin-top: 0;
}

.promises-list .display-options {
  font-size: 12px;
  margin-bottom: 14px;
  margin-top: 14px;
  line-height: 20px;
}

.display-options__filters, .display-options__order-by {
  display: inline-block;
}

.display-options__filters {
  margin-left: 14px;
}

.display-options__filters__date-picker {
  width: initial;
  display: inline-block;
  vertical-align: middle;
  line-height: initial !important;
  height: 22px;
  padding: 0 5px;
  margin-left: 5px;
  font-size: 12px;
}

.promises-list .newsletter-subscription-container {
  text-align: center;
  float: right;
  display: inline-block;
  padding: 12px;
  margin-bottom: 15px;
  background-color: #fbfbfb;
  border: 1px solid transparent;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .promises-list .newsletter-subscription-container {
    float: none;
    width: 100%;
  }
}

.promises-list .newsletter-subscription-container form {
  padding-top: 5px;
}

.promises-list .newsletter-subscription-container form div#mc_embed_signup_scroll,
.promises-list .newsletter-subscription-container form .mc-field-group,
.promises-list .newsletter-subscription-container form .clear,
.promises-list .newsletter-subscription-container form .form-control
 {
  display: inline;
}

.promises-list .newsletter-subscription-container form .email {
  max-width: 225px;
  margin-bottom: 2px;
}

@media (max-width: 768px) {
  .promises-list .newsletter-subscription-container form .email {
    width: 200px;
    padding-left: 8px;
    padding-right: 2px;
  }
}

@media (min-width: 768px) {
  .promises-list .newsletter-subscription-container form .email {
    width: 187px;
  }
}

@media (min-width: 900px) {
  .promises-list .newsletter-subscription-container form .email {
    margin-left: 5px;
    width: 225px;
  }
}

/**** A promise shown in a list of promises ****/

.promise-item {
  display: block;
  padding: 6px 12px 12px 12px;
  margin-bottom: 15px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.promise-item__author {
  display: inline-block;
}

.promise-item-full__creation-date {
  margin-top: 30px;
}

.promise-item-full__delete {
  margin-top: 10px;
}

.promise-item__sentence {
  display: inline-block;
  font-size: 110%;
}

.promise-item__sentence-link {
  color: initial;
}

.promise-item__sentence-link:hover {
  color: initial;
  text-decoration: underline;
}

.promise-item__minimum-supporters, .collective-action-item__execution-dates {
  margin-top: 2px;
  margin-bottom: 15px;
}

.collective-action-item__top-menu {
  display: inline-block;
}

.collective-action-item__top-menu__menu-element {
  vertical-align: top;
}

.collective-action-item__edit {
  margin-left: 10px;
}

.collective-action-item__watch_participations {
  display: inline-block;
  line-height: 17px;
  height: 22px;
}

.collective-action-item__watch_participations .dropdown-menu {
  width: 250px;
}

.collective-action-item__watch_participations .dropdown-menu button {
  border: 0;
  text-align: left;
  background-color: #fff;
  width: 100% !important;
  color: inherit;
  display: block;
  padding: 4px 10px;
}

.collective-action-item__watch_participations .dropdown-menu button:hover {
  background-color: #ddd;
}

.collective-action-item__watch_participations__caret {
  margin-left: 3px !important;
}

.promise-item__remaining-time {
  cursor: help;
}

.promise-item__remaining-time, .promise-item__status {
  text-align: center;
  margin-bottom: 10px;
}

.promise-item__progress-bar {
  margin-top: 4px;
}

.promise-item__progress-bar .progress {
  margin-bottom: 8px;
}

.promise-item__progress-bar-label {
  max-width: 100%;
}

.promise-item__progress-bar-label_zero {
  color: black;
}

.promise-item__progress-bar-maybe-label {
  max-width: 100%;
  opacity: 0.6;
  color: rgba(255,255,255,0);
}

.promise-item__progress-bar-maybe-label:hover {
  color: rgba(255,255,255,1);
}

.promise-item__participate {
  text-align: center;
  margin-top: 20px;
}

.promise-item__participate__title {
  margin-bottom: 8px;
}

.promise-item__participate-button__caret {
  margin-left: 5px !important;
}

.promise-item__participate .dropdown-menu > li > a {
  white-space: normal; /* this avoids having the dropdown menu go out of screen (for menu elements that are long sentences) */
}

.collective-action-item__participate__answer-selector__answer {
  text-align: left;
}

.collective-action-item__participate__answer-selector__answer__icon {
  width: 1em;
  margin-right: 4px;
}

.collective-action-item__participate__answer-selector__answer__icon--for-answer-YES,
.collective-action-item__participate__answer-selector__answer__icon--for-answer-YES_IF_NECESSARY {
  color: green;
}

.collective-action-item__participate__answer-selector__answer__icon--for-answer-MAYBE {
  color: orange;
  top: 0;
  font-weight: bold;
}

.collective-action-item__participate__answer-selector__answer__icon--for-answer-NO {
  color: red;
}

.collective-action-item__participate__answer-selector__answer.active .collective-action-item__participate__answer-selector__answer__icon {
  color: white;
}

.collective-action-item__participate__possible-answer-info {
  min-height: 3em;
  margin-top: 5px;
  margin-bottom: 10px;
}

.promise-item__share {
  text-align: center;
  margin-top: 25px;
  margin-bottom: 10px;
}

.promise-item__share > .alert {
  margin-top: 10px;
}

.promise-item__nav__badge {
  color: #aaa;
  font-size: small;
  margin-left: 3px;
}

.promise-item__participants-list {
  list-style-type: none;
  padding-left: 0;
}

.promise-item__participants-list__participant {
  padding-bottom: 8px;
}

.promise-item__participants-list__participant__remove-participation {
  display: inline;
}


/**** A promise fully displayed on a promise page ****/

.promise-item-full__minimum-supporters {
  margin-bottom: 25px;
}

.promise-item-full__active-section {
  margin-top: 15px;
  overflow: auto; /* So that content displayed via markdown and which is too big do not break page structure (a horizontal scrollbar appears instead. */
}

.promise-item-full__active-section img {
  max-width: 100%;
  height: auto;
}

.promise-item-full__active-section h1 {
  font-size: 23px;
}

.promise-item-full__active-section h2 {
  font-size: 20px;
}

.promise-item-full__active-section h3 {
  font-size: 18px;
}

.promise-item-full__active-section h4 {
  font-weight: bold;
  font-size: 15px;
}

.promise-item-full .nav .badge {
  /*
  v1:
  background-color: #337ab7;

  v2:
  */
  background-color: #ececec;
  color: #337ab7;
  font-weight: initial;
}

.promise-item-full ul.pager > li.info > a {
  border: none;
  color: #90949c;
}

.promise-item-full ul.pager > li.info > a:hover {
  background-color: initial;
}

.promise-item-full ul.pager > li.disabled {
  visibility: hidden;
}


/**** Promise comments ****/

.comment-item {
  padding: 4px 0;
}

.comment-item__author-avatar {
  float: left;
  padding-right: 8px;
}

.comment-item__content {
  font-size: 12px;
  font-family: Helvetica, Arial, sans-serif;
  overflow: hidden;
}

.comment-item__content__publication-date {
  display: inline-block;
  padding-left: 5px;
  color: #90949c;
}

/* We may use this soon, if we want to look more like Facebook
.comment-item__content p:first-of-type {
  display: inline-block;
}
*/

.comment-item__content p:last-of-type {
  margin-bottom: 0;
}

.comment-item__content__author-name {
  display: inline-block;
  font-weight: bold;
  white-space: nowrap;
  color: #365899;
}

.comment-item__content__actions {
  clear: both;
  padding-top: 2px;
}

.comment-item__content__actions__separator {
  color: #90949c;
}


/**** Promise comment form ****/

.promise-comment-form__content-input {
  max-width: 100%; /* So that user cannot expand it too much, which would result in hiding part of their draft comment */
  min-height: 140px !important;
  height: initial;
  padding: 1px;
}

.promise-comment-form__content-input .pell-content {
  height: 90px;
}

/**** Recent activity ****/

.recent-activity-page {
  margin-top: 20px;
}

.activity-item {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 6px 10px;
  margin: 6px;
}


/**** Page: Manage invitations ****/

.invitation-workflow {
  margin: 0;
  padding: 0;
}

.invitation-workflow > .row {
  width: 100%;
}

.invitation-workflow > .row:nth-of-type(1) .invitation-workflow__column {
  border-left: 1px solid #d2d2d2;
}

.invitation-workflow__column {
  height: 100%;
  padding-left: 15px;
  padding-right: 0;
}

.invitation-workflow__write-email__preview img {
  max-width: 100%;
  height: auto;
  max-height: 400px;
}

.invitation-workflow > .row:nth-of-type(1) .invitation-workflow__column:nth-of-type(1) {
  border-left: none;
  height: 100%;
}

.invitation-workflow__add-emails {
  margin-right: 15px;
}

.invitee-row-with-checkbox {
  display: flex;
  align-items: center;
  width: 100%;
}

.invitee-row-with-checkbox__dropdown-menu {
  margin-right: 5px;
  visibility: hidden;
}

.invitee-row-with-checkbox:hover .invitee-row-with-checkbox__dropdown-menu {
  visibility: visible;
} 

.invitee-row-with-checkbox__dropdown-menu__dropdown-toggle {
  border-color: rgba(0,0,0,0);
}

.invitee-row-with-checkbox__dropdown-menu:hover .invitee-row-with-checkbox__dropdown-menu__dropdown-toggle {
  border-color: #ccc;
}

.invitee-row-with-checkbox__checkbox {
  vertical-align: middle;
  margin: 0 15px 0 0 !important;
}

.invitees-list__elements {
  clear: both;
  padding-left: 1px;
  max-height: 450px;
  overflow-y: auto;
}

.invitees-list__element {
  flex-grow: 1;
}

.invitees-list__title {
  float: left;
  font-weight: bold;
  margin-bottom: 8px;
}

.invitees-list__select-all {
  float: right;
  cursor: pointer;
  padding-right: 15px;
}

.invitee-card {
  margin-bottom: 5px;
}

.invitee-card__image {
  display: table-cell;
  vertical-align: top;
}

.invitee-card__body {
  display: table-cell;
  padding-left: 10px;
}

.invitee-card__body__title {
  font-size: initial;
}

.invitee-card__body__content {
  font-size: small;
  text-overflow: ellipsis;
  max-width: 230px;
  overflow: hidden;
  white-space: nowrap;
}

#invitees_list_submit_button_container {
  margin-top: 20px;
  margin-bottom: 10px;
}

#invitees_list_write_email_button_container {
  width: 100%;
  text-align: center;
  padding-top: 10px;
}

/**** Page: Manage invitations > Section: Write e-mail ****/

.invitation-workflow__write-email__subject {
  width: calc(100% - 50px);
  margin-left: 5px;
}

.invitation-workflow__write-email__message {
  margin-left: 20px;
}


/**** Other ****/

.help-tooltip {
  cursor: help;
}

/*
Make text not selectable in the browser, so that it does not get highlighted when user clicks on checkbox label
See https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#4407335
*/
.disable-select {
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

.complete-pagination {
  text-align: center;
  margin: 20px 0;
}

.complete-pagination .pagination {
  margin: 0;
}

.complete-pagination .pager {
  margin: 0;
}


/* WYSIWYG editor */

.pell-actionbar {
  padding-bottom: 3px;
}

.pell-button {
  width: 25px !important;
  height: 25px !important;
  margin: 0 2px 0 0;
  padding: 0;
}

.pell-content {
  resize: both;
}

.pell-content img {
  max-width: 400px;
  max-height: 400px;
}

.remove-format-icon, .remove-link-icon {
  font-family: serif;
  background: linear-gradient(to left top, transparent 47.75%, currentColor 49.5%, currentColor 50.5%, transparent 52.25%);
}

.remove-format-icon {
  padding: 0 3px;
}