body,h1,h2,h3,h4,h5,h6 {font-family: "Playfair Display", sans-serif}


.w3-green {
    background-color: #54697f !important;
}

.w3-red {
    background-color: #8c9cab ! important;
}

.w3-light-gray {
    background-color: #cdd3d8 !important
}

.w3-text-star {
    color: #5b6f85;
}

.topdownline {
    background-image: url("/images/cornerd.png");
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 10%;
    position: relative;
}


.citationCard {
    width:100%;
    border-radius: 5px;
    margin-top: 1em;
    padding-top: 1em;
    font-size: large;
    background-image: url("/images/corner.png");
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 20%;
}
.citationCard:hover {
    background-color: #dde2e8;
}

.citationText {
    margin: 1em;
    font-family: 'Ms Madi', cursive;
    font-size: 1.5em;
}

.w3-theme-l5 {color:#000 !important; background-color:#f5f6f8 !important}
.w3-theme-l4 {color:#000 !important; background-color:#dde2e8 !important}
.w3-theme-l3 {color:#000 !important; background-color:#bbc6d1 !important}
.w3-theme-l2 {color:#000 !important; background-color:#99a9ba !important}
.w3-theme-l1 {color:#fff !important; background-color:#778ca2 !important}
.w3-theme-d1 {color:#fff !important; background-color:#526478 !important}
.w3-theme-d2 {color:#fff !important; background-color:#49596b !important}
.w3-theme-d3 {color:#fff !important; background-color:#404e5d !important}
.w3-theme-d4 {color:#fff !important; background-color:#374350 !important}
.w3-theme-d5 {color:#fff !important; background-color:#2d3843 !important}

.w3-theme-light {color:#000 !important; background-color:#f5f6f8 !important}
.w3-theme-dark {color:#fff !important; background-color:#2d3843 !important}
.w3-theme-action {color:#fff !important; background-color:#2d3843 !important}

.w3-theme {color:#fff !important; background-color:#5b6f85 !important}
.w3-text-theme {color:#5b6f85 !important}
.w3-border-theme {border-color:#5b6f85 !important}

.w3-hover-theme:hover {color:#fff !important; background-color:#5b6f85 !important}
.w3-hover-text-theme:hover {color:#5b6f85 !important}
.w3-hover-border-theme:hover {border-color:#5b6f85 !important}

.messagesGridLine {
    background-color: lightgray;grid-column-start: 1;grid-column-end: 3;height: 1px;
}

.connected {
    display: none;
}

.homediv {
    width: 100%;
    margin-bottom: 1em;
    margin-top: 8em;
    transition: margin 2000ms;
}

.homediv.connected {
    margin-top: 0em;
}

#allcitations {
    text-align: center;
    width: 100%;
    transition: all 2000ms;
}

#id01 {
    transition: all 1000ms;
}
 
#adminPane {
    transition: all 1000ms;
}

.rowValidation {
    max-width: 80%;margin: auto;display: flex;flex-direction: column;margin-bottom: 2em;
}

.rowValidationGrid {
    display: grid;grid-template-columns:  max-content 5em auto max-content;grid-template-rows: auto;
}

.messagerieGrid {
    display: grid;grid-template-columns:  max-content 5em auto 5em max-content;grid-template-rows: auto;
}

.messagerieNew {
    grid-column-start: 1;
    padding: 0 5em 0;
    text-align: center;
}
.messagerieFrom {
    grid-column-start: 2;
}
.messagerieDate {
    grid-column-start: 3;
}


.rowValidationButton {
    grid-column-start: 1;
    background-color: #cdd3d8;
}

.rowValidationButton:hover {
    background-color: #77a294 !important;
    color: white !important;
}

.rowSuppressionButton {
    grid-column-start: 1;
    background-color: #cdd3d8;
}

.rowSuppressionButton:hover {
    background-color: #a27794 !important;
    color: white !important;
}

.rowAddButton {
    grid-column-start: 1;
    background-color: #cdd3d8;
    color: transparent;  
    text-shadow: 0 0 0 black;
}

.rowAddButton:hover {
    background-color: #7f77a2 !important;
    color: white !important;
    color: transparent;  
    text-shadow: 0 0 0 white;
}


.rowValidationPseudo {
    grid-column-start: 3;align-self: center;
}

.rowValidationLogin {
    grid-column-start: 4;align-self: center;margin-right: 2em;font-style: italic;
}


#id04 {
    transition: all 1s;
}
.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.loader {
  color: #49596b;
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}