@import url('https://fonts.cdnfonts.com/css/calibre');

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

button,
input,
textarea {
    border-radius: 5px;
    outline-color: #52CDC5;
}

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

/*connection button*/
.primaryButton {
    background-color: #003F2D;
    opacity: 0.2;
}

/*couleur des fléches de pagination*/
.paginateStyle {
    fill: #003F2D;
}

#menuLogo,
#authLogo {
    background-image: url("/ca/ca.png");
    height: 250px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/*icone otp*/
svg.iconBackground {
    fill: #003F2D;
}

/**
  Login Page
 */
#loginPage {
    background-image: url("/ca/BackgroundCA-accueil.svg");
    background-size: cover;
}


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

/***********************************
              Menu Page            *
 ***********************************/
#menuPage {
    background-image: url("/ca/BackgroundCA-accueil.svg");
    background-size: cover;
}

.menuPageUsername {
    color: #133A7F;
}

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

/*icon in menus*/
.menuIcons svg {
    fill: #003F2D;
    padding: 0 1.7em;
}

.menuTextEntry {
    color: #7b747e;
}

.menuTextEntry a {
    color: #7b747e;
}

#ticketsPage,
#demandePage {
    background-image: url("/ca/BackgroundCA-demande.svg");
    background-size: cover;
}

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

.menuBarAddRequest {
    background-color: #003F2D;
    line-height: 66px;
}

.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("/ca/ca_long.svg");
    background-repeat: no-repeat;
}

/**
    Page Patrimony Header
 */
.patrimonyHeader {
    background-image: url("/ca/Header-Pg-demandeCA-v2.svg");
    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("/ca/BackgroundCA-demande.svg");
    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: 2em 2em 1em;
}

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

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

#detailedTicketPage .detailContent .styleBloc:not(:first-child),
#detailedRequestPage .detailContent .styleBloc:not(:first-child) {
    padding-top: 1em;
}

#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: #3f7eb1;
}

#detailedTicketPage .commentButton svg,
#detailedRequestPage .commentButton svg {
    width: 45px;
}

.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;
}

/*couleur de surbrillance choix patrimony*/
#patrimonyPage .choosenPatrimony,
#patrimonyPage .choosenPatrimony div {
    background-color: #52CDC5;
    color: white;
}

/**
   Page Contacts
 */
#contactsPage {
    background-image: url("/ca/BackgroundCA-demande.svg");
    background-size: cover;
}

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

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

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

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

.toggle {
    background-color: #cac8cb;
}

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