@import url('//fonts.googleapis.com/css?family=Barlow:400,700&display=swap');
@import url('//fonts.googleapis.com/css?family=Barlow:400,700&display=swap');

/**
    RESET
 */
body {
  font-family: 'Barlow', sans-serif;
  color: #7b747e;
}

button,
input {
  border-radius: 5px;
}

.actionButton {
  background-color: #4C79AC;
  stroke: white;
  color: white;
  text-transform: uppercase;
  border: 0;
}

.primaryButton {
  background-color: #133A7F;
}

.paginateStyle svg {
  fill: #4C79AC;
}

#menuLogo,
#authLogo {
  background-image: url("//res.cloudinary.com/dgqvqcrci/image/upload/logo_perfimmo/emile.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

svg.iconBackground {
  fill: #133A7F;
}

/**
        Login Page
 */
#loginPage {
  background-image: url("/emile/fond_1.png");
  background-size: cover;
}


#loginPage #authLogo {
  width: 70%;
  height: 150px;
}

/***********************************
              Menu Page            *
 ***********************************/
#menuPage {
  background-image: url("/emile/fond_1.png");
  background-size: cover;
}

.menuPageUsername {
  color: #133A7F;
}

div.menuIcons {
  background-color: hsla(0, 0%, 100%, 0.7);
}

.menuIcons svg {
  fill: #4C79AC;
  padding: 0 1.7em;
}

.menuTextEntry {
  color: #7b747e;
}

.menuTextEntry a {
  color: #7b747e;
}

#ticketsPage,
#demandePage {
  background-image: url("/emile/fond_2.png");
  background-size: cover;
}

#ticketsPage a,
#demandePage a {
  color: #7b747e;
}

.menuBarAddRequest {
  background-color: #4C79AC;
  line-height: 52px;
}

.menuBarAddRequest span {
  color: white;
}

.otherLogo {
  background-color: white;
  box-shadow: 5px 5px 19px 0 rgba(0, 0, 0, 0.3);
}

.otherLogo figure {
  background-image: url("//res.cloudinary.com/dgqvqcrci/image/upload/logo_perfimmo/emile.svg");
  background-repeat: no-repeat;
}

/**
    Page Patrimony Header
 */
.patrimonyHeader {
  background-image: url("/emile/bandeau_bleu_haut.png");
  background-size: cover;
}

.patrimonyHeader *,
.patrimonyHeader {
  color: white;
}

.ticketNav {
  background-color: white;
}

.ticketItem {
  border-color: hsl(0, 0%, 70%) !important;
}

/**
 page detail ticket/demande
 */
#detailedTicketPage,
#detailedRequestPage {
  background-image: url("/emile/fond_2.png");
  background-size: cover;
}

#detailedTicketPage h3,
#detailedRequestPage h3 {
  font-size: 1em;
  font-weight: bold;
  color: black;
  margin: 0;
}

#detailedTicketPage ul,
#detailedRequestPage ul {
  padding-left: 0;
}

#detailedTicketPage .detailHeader,
#detailedRequestPage .detailHeader {
  padding: 0.5em;
  margin-bottom: 0.5em;
}

#detailedTicketPage .detailHeader .detailCellTitle,
#detailedRequestPage .detailHeader .detailCellTitle {
  border-right: thin solid hsl(0, 0%, 70%);
}

#detailedTicketPage .detailHeader #openTicketDate,
#detailedRequestPage .detailHeader #openTicketDate {
  font-size: 0.8em;
}

#detailedTicketPage .detailContent,
#detailedRequestPage .detailContent {
  background-color: white;
  padding: 0.5em 2em 0.5em;
}

#detailedTicketPage .detailContent .styleBloc,
#detailedRequestPage .detailContent .styleBloc {
  padding-bottom: 0.5em;
}

#detailedTicketPage .detailContent .styleBloc:not(:last-child),
#detailedRequestPage .detailContent .styleBloc:not(:last-child) {
  border-bottom: thin solid hsl(0, 0%, 70%);
}

#detailedTicketPage .detailContent .styleBloc:last-child,
#detailedRequestPage .detailContent .styleBloc:last-child {
  padding-bottom: 0;
}

#detailedTicketPage .styleBloc p,
#detailedRequestPage .styleBloc p {
  margin: 0;
}

#detailedTicketPage .styleBloc a,
#detailedRequestPage .styleBloc a {
  text-decoration: none;
  color: #4C79AC;
}

#detailedTicketPage .viewMessageStyle,
#detailedRequestPage .viewMessageStyle,
#detailedTicketPage .viewAddMessage,
#detailedRequestPage .viewAddMessage,
#detailedTicketPage .styleAction,
#detailedRequestPage .styleAction {
  background-color: hsl(0, 0%, 90%);
}

#detailedTicketPage .viewMessageStyle,
#detailedRequestPage .viewMessageStyle {
  padding-left: 2em;
  padding-top: 1em;
  padding-bottom: 1em;
}

#detailedTicketPage .viewMessageStyle h3,
#detailedRequestPage .viewMessageStyle h3 {
  color: black;
}

#detailedTicketPage .hasMessageStyle,
#detailedRequestPage .hasMessageStyle {
  border-color: #133A7F;
}

#detailedTicketPage .photoView,
#detailedRequestPage .photoView {
  margin-top: 0;
}

#detailedTicketPage .commentButton,
#detailedRequestPage .commentButton {
  background-color: transparent;
  fill: #4C79AC;
}

.stateActive {
  background-color: #4C79AC;
}

.stateInactive {
  background-color: hsl(0, 0%, 70%);
}

.stateTrait {
  border-color: hsl(0, 0%, 70%);
  border-bottom-width: 2px !important;
}

.stateMenu {
  background-color: white;
  box-shadow: 0 10px 10px -3px hsla(0, 0%, 70%, 0.7);
}

#demandePage h1 {
  text-align: center;
  color: black;
  font-size: 0.8em;
  text-transform: uppercase;
  font-weight: bold;
}

#demandePage .categoryLabel {
  font-size: 0.8em;
}

#demandePage label {
  background-color: #aaa5ac;
  color: white;
  text-transform: uppercase;
  margin-left: 0.5em;
  margin-top: 0.5em;
  font-size: 0.8em;
  padding: 0.2em 1em;
  display: inline-block;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  width: 71px;
  text-align: center;
}

#demandePage label#descriptionTitle {
  background-color: #7a747d;
}

/**
    Page patrimonies
 */
#patrimonyPage {
  background-color: #F0F0F0;
}

#patrimonyPage .choosenPatrimony,
#patrimonyPage .choosenPatrimony div {
  background-color: #A0AFCB;
  color: white;
}

/**
   Page Contacts
 */
#contactsPage {
  background-image: url("/emile/fond_1.png");
  background-size: cover;
}

#contactsPage h1 {
  text-transform: uppercase;
  color: #133A7F;
  font-size: 1.3em;
  line-height: 3em;
}

#contactsPage button,
#contactsPage .contactButton {
  background-color: #133A7F;
  fill: white;
  text-transform: uppercase;
}

#contactsPage button a,
#contactsPage .contactButton a {
  color: white;
}

#contactsPage button:disabled,
#contactsPage .contactButton:disabled {
  background-color: #A0AFCB;
}

.toggle {
  background-color: #cac8cb;
}

.toggleActive {
  background-color: #4e6b9f;
}