html.no-scroll {
  overflow: hidden;
}

#login img {
  width: 150px;
  align-self: center;
}

header #logo img {
    width: 150px;
    height: auto;
}

/* Layout */

body {
  flex-direction: row;
  align-items: stretch;
}

table {
  border: 1px solid #E9E9E9;
  border-radius: 12px;
  width: 100%;
  margin-bottom: 0.5rem;
}

th, td {
  padding: 1rem;
}

tbody tr:nth-child(odd) {
   background-color: #F9F9F9;
}

.table-summary {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.pagination {
  display: flex;
  flex-direction: row;
  gap: 4px;
}

.pagination a svg path {
  fill: #1D1D1B;
}

.infoIcon {
  vertical-align: middle;
}

.tooltip {
  position: relative;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: max-content;
  background-color: #1D1D1B;
  color: #fff;
  text-align: center;
  padding: 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 400;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  width: 190px;
  bottom: 24px;
  left: calc(-95px - 2px);
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #1D1D1B transparent transparent transparent;
}

.tooltip svg {
  vertical-align: middle;
  margin-bottom: 2px;
}

.actions-wrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
}

button.glyph {
  width: 32px;
  height: 32px;
  border-radius: 16px;
  padding: 0;
}

button:disabled {
  background-color: #D9D9D9;
  color: #F9F9F9;
  border: none;
  cursor: not-allowed;
}

button:disabled:hover {
  background-color: #D9D9D9;
  color: #F9F9F9;
  border: none;
  cursor: not-allowed;
}

button.glyph svg {
    padding-top: 0;
    margin: 0;
    padding-bottom: 0.2rem;
}

button.danger {
  background-color: #FCD2CF;
}

button.danger:hover {
  background-color: #FBBCB6;
}

button.approve {
  background-color: #318e86;
}

button.approve:hover {
  background-color: #226661;
}

button.reject {
  background-color: #8b0000;
}

button.reject:hover {
  background-color: #700101;
}

button.glyph:disabled {
    background-color: #D9D9D9;
    cursor: not-allowed;
}

button.glyph:disabled svg path {
    fill: white;
}

button.quarternary {
  background-color: #FFF;
  border: 1px solid #AE9DCB;
}

button.tertiary {
  color: #318E86;
}

button.tertiary:hover {
    color: #246C66;
}

.content {
  width: calc(100% - 3rem);
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.paragraph {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

p.small {
  line-height: 1.2rem;
}

#filters {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.filters {
  display: flex;
  flex-direction: row;
  gap: 3rem;
}

.filter {
  width: 300px;
}

#breadcrumb {
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
  margin-left: 1rem;
  font-size: 0.75rem;
  margin-bottom: 0.75rem;
}

.tag {
  background-color: #E9E9E9;
  border-radius: 4px;
  padding: 2px 6px 4px 6px;
  margin: 2px 0;
  font-size: 0.75rem;
  width: fit-content;
  display: inline-block;
}

.tag.error {
  background-color: #FCD2CF;
}

.tag.live {
  background-color: #9DE189;
}

.pageHeader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.pageHeader h5 {
  margin-top: 0;
}

.pageHeader p {
  margin: 0;
}

.pageHeader #primary {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

.pageHeader #primary img {
  width: 100px;
  height: 100px;
}

.pageHeader #primary span {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.pageHeader #primary div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pageHeader #primary div img {
  width: 24px;
  height: 24px;
}

.pageHeader #secondary {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
  text-align: right;
  gap: 3rem;
}

.pageHeader #secondary h6 {
  margin: 0;
}

.sectionHeader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.sectionHeader h3 {
  margin-bottom: 0;
}

p.highlight {
  padding: 0;
  margin: 0;
  font-family: "Cousine", monospace;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2rem;
  font-style: normal;
  text-transform: lowercase;
}

label {
  font-weight: 500;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.29289 9.29289C4.90237 9.68342 4.90237 10.3166 5.29289 10.7071L11.2929 16.7071C11.4804 16.8946 11.7348 17 12 17C12.2652 17 12.5196 16.8946 12.7071 16.7071L18.7071 10.7071C19.0976 10.3166 19.0976 9.68342 18.7071 9.29289C18.3166 8.90237 17.6834 8.90237 17.2929 9.29289L12 14.5858L6.70711 9.29289C6.31658 8.90237 5.68342 8.90237 5.29289 9.29289Z' fill='black'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 96%;
  background-position-y: 50%;
}

.toast {
  position: fixed;
  bottom: 1.5rem;
  right: -400px;
  transition: right 0.5s ease-out;
  width: 300px;
  height: 54px;
  background-color: #383836;
  border-radius: 0.2rem;
  padding: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  color: #FFF;
}

.toast.active {
  transition: right 0.5s ease-out;
  right: 1.5rem;
}

.toast .indicator {
  width: 0.25rem;
  border-radius: 0.2rem;
  height: 54px;
}

.toast.success .indicator {
  background-color: #9DE189;
}

.toast.error .indicator {
  background-color: #F98F86;
}

.toast p {
  margin: 0;
}

.mobile {
  display: none;
}

.small svg {
  vertical-align: sub;
  margin-right: 0.2rem;
}

.flag {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

ul#tabs {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  border-bottom: 1px solid #e9e9e9;
}

ul#tabs li {
  padding: 0 1rem;
  font-weight: 400;
}

ul#tabs li.current {
  border-bottom: 2px solid #000;
  text-decoration: none;
  margin: 0;
}



/* Modal */

#overlay {
  visibility: hidden;
  background-color: #000;
  opacity: 20%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal {
  visibility: hidden;
  position: fixed;
  top: 0;
  right: -450px;
  width: 450px;
  height: 100%;
  background-color: #FFF;
  border-radius: 12px 0 0 12px;
  padding: 20px 0;
  box-shadow: 2px 2px 12px 2px rgba(174, 157, 203, 0.25);
  transition: right 0.2s ease-out;
}

.modal .content {
  gap: 1rem;
}

.modal .modal-content {
  height: 75vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

.modal .modal-content .lang {
  width: 87.5%;
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 1rem;
}

.modal .modal-content .flag {
  justify-content: center;
}

.modal h5 {
  margin-top: 0;
}

.modal form {
  flex-direction: column;
  scroll-behavior: auto;
  gap: 0.7rem;
}

.modal form select, .modal form input {
  width: 95%;
}


/* FSModal */

.fsmodal {
  visibility: hidden;
  position: fixed;
  top: 100vh;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFF;
  border-radius: 12px;
  padding: 20px 0;
  box-shadow: 2px 2px 12px 2px rgba(174, 157, 203, 0.25);
  margin-top: 1rem;
  transition: top 0.5s ease-out;
}

.fsmodal .pageHeader #title {
  display: flex;
  gap: 1rem;
  align-items: self-start;
}

.fsmodal .content {
  margin: 0 1.5rem;
  padding: 0;
  max-width: none;
}

.fsmodal h5 {
  margin-top: 0;
  width: 100%;
}

.fsmodal .actions-wrapper {
  width: auto;
}

.fsmodal .actions-wrapper #notify-subscribers.active::after {
  content: url("/admin/img/loading.svg");
  height: 24px;
  margin-left: 0.5rem;
}

.fsmodal.active {
  visibility:visible;
  top: 0;
  transition: top 0.5s ease-out;
}

#editBillet aside #editBilletInfo-form-header {
    width: 300px;
}

#builder {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  height: 100vh;
}

#builder div#builder-header {
  width: calc(100% - 300px);
}

#builder div#article-content-en.active, #builder div#article-content-fr.active {
  width: 100%;
  display: block;
}

#builder div#article-content-en, #builder div#article-content-fr {
  display: none;
}

#builder aside {
  border-left: 1px solid #e9e9e9;
  padding: 0 1rem;
  width: 300px;
  height: 75vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

#builder aside form {
  flex-direction: column;
}

.fsmodal article#full {
  height: 70vh;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-top: 2rem;
}

.fsmodal article#full h3 {
  margin: 2em 0 1em 0;
  font-size: 1.5em;
}

.fsmodal article#full img {
  width: 100%;
    box-shadow: #FFF6ED -15px 15px;
    margin: 2em 0 2em 15px;
    width: calc(100% - 15px);
}

.fsmodal article#full p {
  text-align: justify;
  margin: 2em 3em;
}

.fsmodal article#fullblockquote {
    margin: 3em 0 3em 10%;
    font-style: italic;
    font-size: 1.3em;
    line-height: 2em;
    width: 80%;
    display: block;
    font-family: 'Playfair Display', serif;
    border-left: 2px solid #FFF6ED;
    padding-left: 2em;
}

.fsmodal article#full header {
    position: initial;
    width: 100%;
    background-color: transparent;
    height: auto;
    margin-bottom: 5em;
    font-weight: 600;
    letter-spacing: 0pt;
    list-style: none;
    font-size: 0.95rem;
    color: #000;
    text-transform: none;
    border: none;
    align-items: flex-start;
    padding: 0;
    display: block;
}

.fsmodal article#full footer {
    margin-top: 5em;
    line-height: 1.8rem;
    letter-spacing: 0pt;
    font-size: 0.95rem;
}

.fsmodal article#full div#details_full section figure iframe, .fsmodal article#full div#details_full section figure blockquote {
    margin: 0 auto !important;
    min-width: auto !important;
}

.fsmodal article#full span, .fsmodal article#full h2 {
  text-align: center;
}

.fsmodal article#full header a:link, .fsmodal article#full header a:hover, .fsmodal article#full header a:active, .fsmodal article#full header a:visited {
  color: #ff734e;
  text-decoration: none;
}

.fsmodal article#full h2 {
  font-size: 3.1em;
  font-family: 'Playfair Display', serif;
  line-height: 1.5em;
  padding: 0.5em 0.7em;
}

.fsmodal article#full blockquote {
    margin: 3em 0 3em 10%;
    font-style: italic;
    font-size: 1.3em;
    line-height: 2em;
    width: 80%;
    display: block;
    font-family: 'Playfair Display', serif;
    border-left: 2px solid #FFF6ED;
    padding-left: 2em;
}



.radio:focus-within {
  color: #318E86;
}

.modal form input[type="radio"] {
  appearance: none;
  background-color: #fff;
  margin: 0.3rem 0 0 0;
  font: inherit;
  color: #318E86;
  width: 1.15em;
  height: 1.15em;
  border: 1px solid #D5D5D4;
  border-radius: 50%;
  padding: 0;
  display: grid;
  place-content: center;
}

.modal form input[type="radio"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em #318E86;
}

.modal form input[type="radio"]:checked::before {
  transform: scale(1);
}

.modal form #addClass-form-url-fieldset, .modal form #addClass-form-password-fieldset, .modal form #addClass-form-studio-fieldset, .modal form #addClass-form-booking-fieldset {
  display: none;
}

.modal form #addClass-form-url-fieldset.active, .modal form #addClass-form-password-fieldset.active, .modal form #addClass-form-studio-fieldset.active, .modal form #addClass-form-booking-fieldset.active {
  display: block;
}

.modal form #addClass-form-url-fieldset {
  position: relative;
}

.modal form #addClass-form-url-fieldset button {
  float: right;
  margin-top: 0.55rem;
  position: absolute;
  right: 2rem;
}

.modal footer {
  width: calc(450px - 3rem);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  background-color: #FFF;
  padding-bottom: 1rem;
}

#overlay.active{
  visibility:visible;
}

.modal.active {
  visibility:visible;
  right: 0;
  transition: right 0.5s ease-out;
}

.no-scroll {
  overflow: hidden;
}





/* Index */

#login, #reset {
  width: calc(100vw - 8.5rem);
  margin: 4.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: calc(100vh - 8.5rem);
  justify-content: center;
}

#login form, #reset form {
  flex-direction: column;
}

#login .content, #reset .content {
  align-items: center;
}

#login .paragraph, #reset .paragraph {
	min-width: 400px;
  max-width: 400px;
}

#login #logo svg, #reset #logo svg {
  width: 250px;
}




/* Header */

header {
  background-color: #F9F9F9;
  border-right: 1px solid #E9E9E9;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  position: fixed;
  height: calc(100% - 3rem);
  width: 163px;
}

header nav, header nav ul {
  height: 100%;
  width: 100%;
}

header ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

header ul li {
  padding: 4px 10px;
  border-radius: 12px;
  margin-bottom: 0.75rem;
}

header ul li.active {
  background-color: #FFFFFF;
}

header ul li#nav-inbox a::after {
  content: "Inbox";
}

header ul li#nav-teachers a::after {
  content: "Teachers";
}

header ul li#nav-studios a::after {
  content: "Studios";
}

header ul li#nav-settings a::after {
  content: "Settings";
}

header ul li#nav-signout a::after {
  content: "Log out";
}

header ul li:hover {
  background-color: #FFF;
}

header ul li a:link, header ul li a:hover, header ul li a:active, header ul li a:visited {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: max-content;
  gap: 0.3rem;
  text-decoration: none;
}

header ul li a:hover {
  color: #318E86;
}

header img {
  width: 50px;
  border-radius: 25px;
  border: 1px solid #FFF;
}



#newsletter, #articles, #inbox, #settings {
  width: 100%;
  margin-left: 196px;
  padding: 1rem 0;
}

table tr.unpaid, table tr.inactive {
  opacity: 0.4;
}

/* Newsletter */

#newsletter table .table-number {
  width: 5%;
}

#newsletter table .table-email {
  width: 45%;
}

#newsletter table .table-date {
  width: 30%;
}

#newsletter table .table-language {
  width: 10%;
}

#newsletter table .table-action {
  width: 10%;
}



/* Articles */

#articles table .table-number {
  width: 5%;
}

#articles table .table-name {
  width: 35%;
}

#articles table .table-date {
  width: 16%;
}

#articles table .table-cat {
  width: 19%;
}

#articles table .table-comments {
  width: 10%;
}

#articles table .table-action {
  width: 15%;
}

#articles .description {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 2rem;
}

#articles .description .lang {
  width: calc(50% - 2rem);
  border: 1px solid #E9E9E9;
  border-radius: 12px;
  padding: 1rem;
}

#articles .description .lang h6 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}



/* Inbox */

#inbox table .table-number {
  width: 5%;
}

#inbox table .table-name {
  width: 40%;
}

#inbox table .table-language {
  width: 10%;
}

#inbox table .table-date {
  width: 25%;
}

#inbox table .rented {
  width: 10%;
}

#inbox table .table-action {
  width: 10%;
}




/* Spinner */
@-moz-keyframes flower-loader {
  0% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
    -moz-box-shadow: white 0 0 8px 0, #FBDF02 -6px -6px 0 2px, #FBDF02 6px -6px 0 2px, #FBDF02 6px 6px 0 2px, #FBDF02 -6px 6px 0 2px;
    box-shadow: white 0 0 8px 0, #FBDF02 -6px -6px 0 2px, #FBDF02 6px -6px 0 2px, #FBDF02 6px 6px 0 2px, #FBDF02 -6px 6px 0 2px;
  }
  50% {
    -moz-transform: rotate(1080deg);
    transform: rotate(1080deg);
    -moz-box-shadow: white 0 0 8px 0, #FBDF02 6px 6px 0 2px, #FBDF02 -6px 6px 0 2px, #FBDF02 -6px -6px 0 2px, #FBDF02 6px -6px 0 2px;
    box-shadow: white 0 0 8px 0, #FBDF02 6px 6px 0 2px, #FBDF02 -6px 6px 0 2px, #FBDF02 -6px -6px 0 2px, #FBDF02 6px -6px 0 2px;
  }
}
@-webkit-keyframes flower-loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-box-shadow: white 0 0 8px 0, #FBDF02 -6px -6px 0 2px, #FBDF02 6px -6px 0 2px, #FBDF02 6px 6px 0 2px, #FBDF02 -6px 6px 0 2px;
    box-shadow: white 0 0 8px 0, #FBDF02 -6px -6px 0 2px, #FBDF02 6px -6px 0 2px, #FBDF02 6px 6px 0 2px, #FBDF02 -6px 6px 0 2px;
  }
  50% {
    -webkit-transform: rotate(1080deg);
    transform: rotate(1080deg);
    -webkit-box-shadow: white 0 0 8px 0, #FBDF02 6px 6px 0 2px, #FBDF02 -6px 6px 0 2px, #FBDF02 -6px -6px 0 2px, #FBDF02 6px -6px 0 2px;
    box-shadow: white 0 0 8px 0, #FBDF02 6px 6px 0 2px, #FBDF02 -6px 6px 0 2px, #FBDF02 -6px -6px 0 2px, #FBDF02 6px -6px 0 2px;
  }
}
@keyframes flower-loader {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -moz-box-shadow: white 0 0 8px 0, #FBDF02 -6px -6px 0 2px, #FBDF02 6px -6px 0 2px, #FBDF02 6px 6px 0 2px, #FBDF02 -6px 6px 0 2px;
    -webkit-box-shadow: white 0 0 8px 0, #FBDF02 -6px -6px 0 2px, #FBDF02 6px -6px 0 2px, #FBDF02 6px 6px 0 2px, #FBDF02 -6px 6px 0 2px;
    box-shadow: white 0 0 8px 0, #FBDF02 -6px -6px 0 2px, #FBDF02 6px -6px 0 2px, #FBDF02 6px 6px 0 2px, #FBDF02 -6px 6px 0 2px;
  }
  50% {
    -moz-transform: rotate(1080deg);
    -ms-transform: rotate(1080deg);
    -webkit-transform: rotate(1080deg);
    transform: rotate(1080deg);
    -moz-box-shadow: white 0 0 8px 0, #FBDF02 6px 6px 0 2px, #FBDF02 -6px 6px 0 2px, #FBDF02 -6px -6px 0 2px, #FBDF02 6px -6px 0 2px;
    -webkit-box-shadow: white 0 0 8px 0, #FBDF02 6px 6px 0 2px, #FBDF02 -6px 6px 0 2px, #FBDF02 -6px -6px 0 2px, #FBDF02 6px -6px 0 2px;
    box-shadow: white 0 0 8px 0, #FBDF02 6px 6px 0 2px, #FBDF02 -6px 6px 0 2px, #FBDF02 -6px -6px 0 2px, #FBDF02 6px -6px 0 2px;
  }
}
/* :not(:required) hides this rule from IE9 and below */
.flower-loader:not(:required) {
  overflow: hidden;
  text-indent: -9999px;
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #318E86;
  border-radius: 100%;
  -moz-box-shadow: white 0 0 8px 0, #fd8 -6px -6px 0 2px, #fd8 6px -6px 0 2px, #fd8 6px 6px 0 2px, #fd8 -6px 6px 0 2px;
  -webkit-box-shadow: white 0 0 8px 0, #fd8 -6px -6px 0 2px, #fd8 6px -6px 0 2px, #fd8 6px 6px 0 2px, #fd8 -6px 6px 0 2px;
  box-shadow: white 0 0 8px 0, #fd8 -6px -6px 0 2px, #fd8 6px -6px 0 2px, #fd8 6px 6px 0 2px, #fd8 -6px 6px 0 2px;
  -moz-animation: flower-loader 5s infinite ease-in-out;
  -webkit-animation: flower-loader 5s infinite ease-in-out;
  animation: flower-loader 5s infinite ease-in-out;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  display: none;
  float: right;
  margin-top: 3.2rem;
  position: absolute;
  right: 2.5rem;
}

#addYogi-form-email-fieldset {
  position: relative;
}

.results {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1rem 0;
    width: 100%;
}

.results .pass {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    width: 95%;
}

.results .pass div {
  width: 100%;
}

.results .pass h4 {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.results .pass img {
    width: 150px;
    height: fit-content;
}

#addYogi-form-lang-fieldset div {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

#addYogi-form-lang-fieldset span {
  display: flex;
  gap: 0.2rem;
  align-items: center;
}

#addYogi-form-lang-fieldset span input[type="radio"] {
  margin: 0;
}



/* iPhone version */
@media screen and (max-width: 512px) { 

  body {
    flex-direction: column-reverse;
    gap: 0;
    justify-content: flex-end;
  }

  .content {
    padding: 0 0.75rem;
  }

  header {
    width: calc(100% - 1rem);
    height: auto;
    position: fixed;
    bottom: 0;
    border-right: none;
    border-top: 1px solid #E9E9E9;
    padding: 0.5rem;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    z-index: 1;
  }

  header #logo {
    display: none;
  }

  header img {
    width: 30px;
  }

  header nav ul {
    display: flex;
  }

  header ul {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  header ul #top, header ul #bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 63%;
  }

  header ul li {
    margin-bottom: 0;
    display: inline-block;
    padding: 10px;
    border-radius: 20px;
  }

  header ul li#nav-inbox a::after {
    content: none;
  }

  header ul li#nav-teachers a::after {
    content: none;
  }

  header ul li#nav-studios a::after {
    content: none;
  }

  header ul li#nav-settings a::after {
    content: none;
  }

  header ul li#nav-signout a::after {
    content: none;
  }

  header #logo svg {
    width: 44px;
  }

  th, td {
    padding: 1rem 0.75rem;
  }

  .mobile {
    display: block;
  }



  #login, #reset {
    width: 100vw;
    margin: 0;
  }

  #login .paragraph {
    min-width: 90vw;
    max-width: 90vw;
  }



  #newsletter, #articles, #inbox, #settings {
    width: 100%;
    margin-left: 0;
    margin-bottom: 85px;
  }

  #newsletter table .table-number, #newsletter table .table-date, #newsletter table .table-language {
    display: none;
  }

  #newsletter table .table-email {
    width: 80%;
  }

  #newsletter table .table-action {
    width: 20%;
  }

  .pageHeader {
    flex-direction: column;
  }

  .pageHeader #primary div span {
    display: none;
  }

  .pageHeader #secondary {
    gap: 1.1rem;
    align-items: center;
    flex-direction: column;
    border-top: 1px solid #e9e9e9;
    margin-top: 1rem;
    padding-top: 1rem;
  }

  .pageHeader #secondary h6 {
    text-align: center;
  }

  .pageHeader #secondary span {
    display: flex;
    gap: 1rem;
    justify-content: center;
  }

  .pageHeader #secondary a, .pageHeader #secondary button {
    width: 100%;
    display: block;
    clear: both;
  }

  #filters {
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 2rem;
  }

  .filters {
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }

  .filters fieldset, .filters fieldset select {
    max-width: 100%;
    width: 100%;
  }

  #articles table .table-number, #articles table .table-date, #articles table .table-cat, #articles table .table-comments {
    display: none;
  }

  #articles table .table-name {
    width: 70%;
  }

  #articles table .table-action {
    width: 30%;
  }

  #articles .description {
    flex-direction: column;
    gap: 1rem;
  }

  #articles .description .lang {
    width: calc(100% - 2rem);
  }

  .results .pass img {
    width: 100px;
  }


  #inbox table .table-number, #inbox table .table-language, #inbox table .table-date, #inbox table .table-rented {
    display: none;
  }

  #inbox table .table-name {
    width: 80%;
  }

  #inbox table .table-action {
    width: 20%;
  }


  #settings table .table-number, #settings table .table-permission {
    display: none;
  }

  #settings table .table-name {
    width: 80%;
  }

  #settings table .table-permission, #settings table .table-action {
    width: 20%;
  }


  .modal {
    width: 95%;
  }

  .modal .pageHeader {
    flex-direction: row;
  }

  .modal .content {
    height: 75%;
  }

  .modal footer {
    width: calc(95% - 3.3rem);
    bottom: 3.8rem;
    padding: 1rem 0;
    background-color: #fff;
  }

  .modal form footer button {
    width: auto;
  }

  #transactions table,
  #vod table,
  #agenda table,
  #newsletter table,
  #settings table {
    table-layout: fixed;
  }

  #transactions table .table-email,
  #vod table .table-nom,
  #agenda table .table-nom,
  #newsletter table .table-email,
  #settings table .table-email {
    min-width: 0;
    text-overflow: ellipsis;
    text-wrap: nowrap;
  }

  #settings table .table-email p {
    text-wrap: wrap;
  }
}