* {
    font-family: 'Segoe UI';
    margin: 0 auto;
    padding: 0 auto;
    position: relative;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

@keyframes pulse{
    0%{
        box-shadow: 0px 0px 5px 0px rgba(173,0,0,.3);
    }
    50%{
        box-shadow: 0px 0px 5px 9px rgba(173,0,0,.3);
    }
    100%{
        box-shadow: 0px 0px 5px 9px rgba(173,0,0,0);
    }
}

.Rec{
	animation-name: pulse;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.card-instructions-content a {
    vertical-align: unset !important;
}

.darkmode--activated .card-instructions-content a {
    vertical-align: unset !important;
}

a {
    text-decoration: none;
    width: 100%;
    vertical-align: middle;
    transition: all 0.3s;
}

.darkmode--activated a {
    transition: all 0.3s;
}

.darkmode-toggle {
    z-index: 1000;
}

code {
    background-color: #eef1f6;
    color: #596981;
    border-radius: 2px;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 1px;
    padding-bottom: 1px;
    line-height: 1.4;
    font-size: 14px;
    border: 1px solid rgba(0, 0, 0, .1);
    display: inline-block;
    height: fit-content;
    transition: all 0.3s;
}

.darkmode--activated code {
    background-color: #2d2d2d;
    color: white;
    border: 1px solid #878787;
    transition: all 0.3s;
}

textarea {
    resize: none;
}

.nicEdit-panelContain {
    transition: all 0.3s;
    border-top-left-radius: 18.125px;
    border-top-right-radius: 18.125px;
    padding-left: 18.125px;
    padding-right: 18.125px;
}

.darkmode--activated .nicEdit-panelContain {
    background-color: #3b3a39 !important;
    transition: all 0.3s;
}

.nicEdit-main {
    transition: all 0.3s;
    outline: none;
}

.darkmode--activated .nicEdit-main {
    background: #4e4d4b;
    transition: all 0.3s;
}

.error_msg {
    padding: 1rem;
    color: #721c24;
    background-color: #f8d7da;
    border-left: 4px solid #721c24;
    border-radius: 0.5rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 50px;
}

.error_msg .error_msg_title ion-icon {
    height: 22px;
    margin-right: 0.5rem;
    width: 22px;
    vertical-align: bottom;
}

.error_msg .error_msg_title {
    font-weight: 700;
}

.error_msg .error_msg_content {
    margin-left: 1.8rem;
}

table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 11px;
    font-family: sans-serif;
    min-width: 400px;
    width: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

table thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
}

table th,
table td {
    padding: 5px 20px;
}

table tbody tr {
    color: black;
    border-bottom: 1px solid #dddddd;
    transition: all 0.3s;
}

.darkmode--activated table tbody tr {
    color: white;
    transition: all 0.3s;
}

table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
    transition: all 0.3s;
}

.darkmode--activated table tbody tr:nth-of-type(even) {
    background-color: #3f3f3f;
    transition: all 0.3s;
}


table tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
}

table tbody tr.active-row {
    font-weight: bold;
    color: #009879;
}

/* Page */

.bottom-page {
    width: 100%;
    padding-top: 50px;
}

.fa {
    padding-right: 10px;
}

.only {
    color: crimson;
}

/* Header */

.header {
    width: 100%;
    height: 3rem;
    background: #444791;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    margin-bottom: 50px;
}

.header .container-header {
    padding: 5px;
    display: inline-flex;
}

.header .container-header img {
    width: 108px;
    height: 40px;
}

.header .container-header h1 a {
    color: white;
    padding-top: 7.5px;
    padding-left: 25px;
    font-family: 'Segoe UI';
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.2s;
}

.header .container-header h1 a:hover {
    transition: all 0.2s;
    opacity: 75%;
}

.header .container-header span {
    color: #7B83EB;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 5px;
    font-weight: 500;
    font-size: 20px;
}

.header .container-header h2 a {
    color: white;
    padding-top: 12.5px;
    font-family: 'Segoe UI';
    font-weight: 400;
    font-size: 10px;
    text-decoration: none;
    transition: all 0.2s;
}

.header .container-header h2 a:hover {
    transition: all 0.2s;
    opacity: 75%;
}

/* Avatar */

.container-avatar {
    float: right;
}

.img-avatar {
    width: 2rem;
    margin-top: 0.5rem;
    margin-right: 25px;
    transition: all 0.2s;
    cursor: pointer;
    z-index: 5;
    border-radius: 100%;
    border: 2px solid lightgray;
}

.img-avatar:hover {
    transition: all 0.2s;
    opacity: 75%;
}

.img-avatar-no-transition {
    transition: none !important;
}

/* Avatar Dropdown */

.dropdown-avatar {
    visibility: hidden;
    position: absolute;
    right: 5px;
    top: 55px;
    background-color: #FFFFFF;
    width: 290px;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,0.15);
    z-index: 999;
}

.darkmode--activated .dropdown-avatar {
    background-color: #2D2C2C;
    color: white;
}

.avatar-active {
    visibility: visible;
}

.user-menu {
    display: flex;
    border-bottom: 1px solid #E0E0E0;
    padding: 12px 16px;
    margin-bottom: 6px;
}

.darkmode--activated .user-menu {
    border-bottom: 1px solid #605E5C;
}

.user-menu::before {
    position: absolute;
    top: -16px;
    left: 245px;
    display: inline-block;
    content: "";
    border: 8px solid transparent;
    border-bottom-color: #E0E0E0;
}

.darkmode--activated .user-menu::before {
    border-bottom-color: #373644;
}

.user-menu::after {
    position: absolute;
    top: -14px;
    left: 245px;
    display: inline-block;
    content: "";
    border: 7px solid transparent;
    border-bottom-color: #FFFFFF;
}

.darkmode--activated .user-menu::after {
    border-bottom-color: #2D2C2C;
}

.user-menu img {
    align-self: center;
    width: 70px;
    margin-bottom: 8px;
}

.profile-name {
    font-weight: bold;
    font-size: 20px;
    color: #444791;
    padding-top: 8px;
}

.darkmode--activated .profile-name {
    color: #6264A7;
}

.profile-user {
    font-size: 12px;
    padding-top: 10px;
}

.profile-group {
    font-size: 12px;
}

.stats li , .settings li , .problem li {
    display: flex;
    text-decoration: none;
    color: #333333;
    font-weight: 400;
    font-size: 14px;
    padding: 12px 16px;
}

.stats li:hover , .settings li:hover , .problem li:hover {
    background-color: #F5F5F5;
}

.darkmode--activated .stats li:hover , .darkmode--activated .settings li:hover , .darkmode--activated .problem li:hover {
    background-color: #33344A;
}


.stats li a , .settings li a , .problem li a {
    font-weight: 600;
    transition: none !important;
    padding-top: 4px;
}

.stats li p , .settings li p , .problem li a {
    color: #444791;
    padding-top: 4px;
}

.darkmode--activated .stats li p , .darkmode--activated .settings li p , .darkmode--activated .problem li a {
    color: #E2E2F6;
}

.stats li ion-icon {
    padding-right: 12px;
    color: #444791;
}

.darkmode--activated .stats li ion-icon {
    color: #6264A7;
}

.settings {
    border-top: 1px solid #E0E0E0;
    padding-top: 6px;
    padding-bottom: 6px;
    margin-top: 6px;
    border-bottom: 1px solid #E0E0E0;
    margin-bottom: 6px;
}

.darkmode--activated .settings {
    border-top: 1px solid #605E5C;
    border-bottom: 1px solid #605E5C;
}

.settings li ion-icon {
    padding-right: 12px;
    color: #444791;
}

.darkmode--activated li ion-icon {
    color: #6264A7;
}

.settings li .switch label {
    margin-right: 0 !important;
}

.darkmode-day , .darkmode-night {
    padding-top: 3px;
}

.settings .settings-memory a {
    padding-bottom: 5px;
}

.settings .settings-memory .switch {
    padding-top: 5px;
}

/* Problem */

.dropdown-problem {
    display: none;
}

.problem-active {
    display: block;
}

.problem li {
    display: block;
}

.problem li .text-problem {
    text-align: center;
    padding-bottom: 12px;
    cursor: pointer;
}

.problem li .text-problem .report-problem {
    color: red;
    font-weight: 300;
}

.problem li .dropdown-problem {
    padding-top: 12px;
    /* display: block; */
}

.problem li .dropdown-problem textarea {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    width: 100%;
    height: 80px;
}

.darkmode--activated .problem li .dropdown-problem textarea {
    color: white;
    background-color: #373644;
}

.problem li .dropdown-problem textarea:focus {
    background-color: #fbfbfb;
    outline: none;
}

.darkmode--activated .problem li .dropdown-problem textarea:focus {
    background-color: #3B3A39;
}

.submit-problem {
    width: 100%;
    height: 30px;
    color: white;
    background-color: #444791;
    border: 0;
    border-radius: 50px;
    cursor: pointer;
}

.submit-problem:hover {
    background-color: #5e61a8;
}

/* Cards */

.card {
    display: grid;
    grid-template-columns: min-content 2fr max-content;
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 20px;
    height: 75px;
    background-color: white;
    border-radius: 37.5px;
    overflow: hidden;
    z-index: 5;
    transition: all 0.3s;
}

.card:hover {
    box-shadow: 0 2px 6px 0 rgba(0,0,0,.11);
    cursor: pointer;
}

.darkmode--activated .card {
    background-color: #3f3f3f;
    transition: all 0.3s;
}

.point {
    padding-left: 1em;
    padding-right: 1em;
    color: black;
    font-size: 14px;
    font-weight: 300;
    transition: all 0.3s;
}

.darkmode--activated .point {
    color: white;
    transition: all 0.3s;
}

.modify-user {
    display: flex; 
    padding: 0.5em;
    width: fit-content;
    margin-left: 50px;
    margin-right: 50px;
    background-color: white;
    overflow: hidden;
    z-index: 4;
    border-radius: 37.5px;
    padding-left: 37.5px;
    padding-right: 18.25px;
    transition: all 0.3s;
}

.darkmode--activated .modify-user {
    transition: all 0.3s;
    background-color: #3f3f3f;
}

/* Card Icon */

.card-i-content {
    padding: 20px;
}

ion-icon {
    font-size: 2em;
    align-items: center;
    vertical-align: middle;
}

.school-outline {
    color: #444791;
}

.darkmode--activated .school-outline {
    color: #9299f7;
}

.home-outline {
    color: #c427c3;
}

.alert-outline {
    color: #c84b17;
}

.alert-circle-outline {
    color: red;
}

.add-outline {
    color: #444791;
}

.darkmode--activated .add-outline {
    color: #9299f7;
    transition: all 0.3s;
}

/* Card Title Content */

.card-title-content {
    display: block;
    margin: 0;
    margin-top: 1em;
    width: fit-content;
}

.card-panel-content {
    display: block;
    margin: 1.1em;
    width: fit-content;
}

.card-instructions-content {
    color: #737373;
    font-family: 'Segoe UI';
    font-weight: 400;
    font-size: 14px;
    width: 100%;
    float: left;
    margin-top: 0.5em;
    margin-bottom: 1.1em;
    transition: all 0.3s;
}

.darkmode--activated .card-instructions-content {
    color: white;
    transition: all 0.3s;
}

h3 {
    color: #444791;
    font-family: 'Segoe UI';
    font-weight: 600;
    font-size: 1em;
    vertical-align: middle;
    transition: all 0.3s;
}

.darkmode--activated h3 {
    color: #9299f7;
    transition: all 0.3s;
}

h4 {
    color: #737373;
    font-family: 'Segoe UI';
    font-weight: 400;
    font-size: 14px;
    vertical-align: middle;
    transition: all 0.3s;
}

.darkmode--activated h4 {
    color: white;
    transition: all 0.3s;
}

.darkmode--activated .card-arrow-content h4 {
    color: #9299f7;
    transition: all 0.3s;
}

h5 {
    color: #737373;
    font-family: 'Segoe UI';
    font-weight: 400;
    font-size: 14px;
    vertical-align: middle;
    transition: all 0.3s;
}

.darkmode--activated h5 {
    color: white;
    transition: all 0.3s;
}

p.envoi {
    display: inline;
    font-style: italic;
    font-size: smaller;
    margin-left: 10px;
}

/* Card Icon Arrow */

.card-arrow-content {
    padding: 20px;
    display: flex;
}

.card-arrow-content h4 {
    padding-top: 0.4em;
    padding-right: 1em;
}

.chevron-down-outline {
    font-size: 1em;
    padding-top: 0.6em;
    padding-right: 0.6em;
    color: #444791;
    transition: all 0.3s;
}

.darkmode--activated .chevron-down-outline {
    color: #9299f7;
    transition: all 0.3s;
}

.dot-checked {
    height: 20px;
    width: 20px;
    background-color: green;
    border-radius: 50%;
    display: inline-block;
    margin-top: 7px;
    opacity: 50%;
}

.dot-unchecked {
    height: 20px;
    width: 20px;
    background-color: red;
    border-radius: 50%;
    display: inline-block;
    margin-top: 7px;
    opacity: 50%;
}

/* Status */

.statut-devoir-non-lu {
    color: #444791;
    font-weight: 600;
}

.statut-devoir-lu , .statut-devoir-envoye , .statut-devoir-retourne {
    color: #444791;
}

.statut-devoir-envoye-retard , .statut-devoir-pas-envoye {
    color: crimson;
}

.statut-devoir-retard {
    color: crimson;
    font-weight: 600;
}

/* Panel */

.active {
    box-shadow: 0 2px 6px 0 rgba(0,0,0,.11);
}

.panel {
    display: none;
    grid-template-columns: min-content 2fr max-content;
    margin-left: 50px;
    margin-right: 50px;
    background-color: white;
    overflow: hidden;
    z-index: 4;
    transition: all 0.3s;
    border-top-left-radius: 37.5px;
    border-top-right-radius: 37.5px;
    border-bottom-left-radius: 37.5px;
    border-bottom-right-radius: 37.5px;
    margin-top: -75px;
    padding-top: 75px;
    padding-left: 18.75px;
    padding-right: 18.75px;
    padding-bottom: 18.75px;
}

.darkmode--activated .panel {
    background-color: #2d2d2d;
    transition: all 0.3s;
}

/* Button */

.btn , .btn-inactif {
    color: white;
    background-color: #5b5fc7;
    border: 1px solid transparent;
    border-radius: 1rem;
    box-shadow: 0 0.2rem 0.4rem -0.075rem rgb(0 0 0 / 25%);
    font-size: .875rem;
    height: 2rem;
    justify-content: center;
    min-width: 6.429rem;
//    max-width: 17.5rem;
    line-height: 1.15;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    text-decoration: none;
    margin-top: 1.1em;
    font-weight: 600;
    cursor: pointer;
}

.btn:hover , .btn-inactif:hover {
    background-color: #4f52b2;
    border-color: #4f52b2;
    color: white;
}

.btn-inactif {
    opacity: 50%;
}

.btn-inactif:hover {
    cursor: not-allowed;
}

.btn-a {
    font-size: .875rem;
    font-weight: 600;
    color: white;
}

.btn-devoir {
    border: none;
    cursor: pointer;
    height: 1.25rem;
    align-items: center;
    color: #5b5fc7;
    padding: 0;
    background: transparent;
}

.darkmode--activated .btn-devoir {
    color: #9299f7;
}

/* Input */

::-webkit-calendar-picker-indicator {
    transition: all 0.3s;
}

.darkmode--activated ::-webkit-calendar-picker-indicator {
    filter: invert(1);
    transition: all 0.3s;
}

.switch {
    position: relative;
    display: inline-block;
}

.switch-input {
    display: none;
}

.switch-label {
    display: block;
    width: 48px;
    height: 30px;
    text-indent: -150%;
    clip: rect(0 0 0 0);
    color: transparent;
    user-select: none;
    margin-right: 20px;
    margin-top: 5px;
}

.switch-label:before, .switch-label:after {
    content: "";
    display: block;
    position: absolute;
    cursor: pointer;
}

.switch-label:before {
    width: 48px;
    height: 24px;
    background-color: #dedede;
    border-radius: 9999em;
    // transition: background-color 0.15s ease;
    // transition: all 0.3s;
}

.darkmode--activated .switch-label:before {
    // transition: all 0.3s;
    background-color: #3b3a39;
}

.switch-label:after {
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,0.45);
    // transition: all 0.3s;
}

.darkmode--activated .switch-label:after {
    // transition: all 0.3s;
    background-color: #878787;
}

.switch-input:checked + .switch-label:before {
    background-color: #5b5fc7;
}

.switch-input:checked + .switch-label:after {
    left: 24px;
}

.container-msg {
    display: flow-root;
}

.inputfile::-webkit-file-upload-button {
    cursor: pointer;
}

.inputfile {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
    opacity: 0;
    z-index: 999999999;
}

.label {
    margin-top: 10px;
}

.label label {
    z-index: 999999;
}

.form-control {
    display: block;
    width: 1000px;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: calc((1.5em + 0.75rem + 2px)/2);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    margin-bottom: 1.1em;
    transition: all 0.3s;
}

.darkmode--activated .form-control {
    background-color: #3b3a39;
    border: 1px solid #878787;
    color: white;
    transition: all 0.3s;
}

.form-control:focus {
    border-bottom-color: #5b5fc7;
    border-bottom-width: 3px;
    outline: none;
    background: #fafafa;
}

.darkmode--activated .form-control:focus {
    background: #4e4d4b;
}

.btn-submit {
    color: #fff;
    background-color: #218838;
    border-color: #1e7e34;
    box-shadow: none;
    cursor: pointer;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    border: 1px solid transparent;
    padding: 10px 10px;
    font-size: 6px;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: 0.5s;
    float: right;
}

.btn-submit:hover {
    color: #fff;
    background-color: #1e7e34;
}

.btn-little {
    height: 32px;
    margin-left: 10px;
}

.input-table-points {
    border: 1px solid #ced4da;
    border-radius: 1rem;
    width: 50px;
    transition: all 0.3s;
    color: black;
    text-align: center;
}

.darkmode--activated .input-table-points {
    background-color: #3b3a39;
    transition: all 0.3s;
    color: white;
}

.input-table-commentaire {
    border: 1px solid #ced4da;
    border-radius: 1rem;
    width: 1000px;
    transition: all 0.3s;
    color: black;
    padding-left: 10px;
}

.darkmode--activated .input-table-commentaire {
    background-color: #3b3a39;
    transition: all 0.3s;
    color: white;
}


.fileslist {
    background-color: #f5f5f5;
    align-items: center;
    border-radius: 1.125rem;
    position: relative;
    border: 1px solid #dadce0;
    width: 100%;
    height: 2.25rem;
    cursor: pointer;
    text-align: left;
    vertical-align: middle;
    display: flex;
    margin-top: 10px;
    transition: all 0.3s;
}

.darkmode--activated .fileslist {
    background-color: #3b3a39;
    border: 1px solid #878787;
    transition: all 0.3s;
}

.fileslist p , .fileslist a {
    font-size: 14px;
    font-weight: 600;
    color: #252424;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    width: 100%;
    transition: all 0.3s;
}

.darkmode--activated p , .darkmode--activated a {
    color: white;
}

.fileslist a span ion-icon {
    padding-right: 12px;
}

.fileslist a span {
    vertical-align: middle;
    display: inline-block;
}

.fileslist button {
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
    padding-right: 10px;
}

.fileslist ion-icon:hover {
    --ionicon-stroke-width: 40px;
}

.fileslist button ion-icon {
    color: black;
    opacity: 50%;
    width: 20px;
    transition: all 0.3s;
}

.darkmode--activated .fileslist button ion-icon {
    color: white;
    opacity: 50%;
    width: 20px;
    transition: all 0.3s;
}

/* Période */

.period-divider::before {
    background: rgb(91, 95, 199);
    height: 1px;
    flex: 1 1 0%;
    content: "";
}

.period-divider {
    margin-left: 3.2rem;
    margin-right: 3.2rem;
    margin-bottom: 50px;
    color: rgb(91, 95, 199);
    font-weight: 700;
    text-align: center;
    line-height: 1.3333;
    font-size: 1.2rem;
    -webkit-box-align: center;
    align-items: center;
    display: flex;
}

.period-divider::after {
    background: rgb(91, 95, 199);
    height: 1px;
    flex: 1 1 0%;
    content: "";
}

.period-content {
    margin-right: 2rem;
    margin-left: 2rem;
    font-weight: 700;
    text-align: center;
    color: rgb(91, 95, 199);
    line-height: 1.3333;
    font-size: 1.2rem;
}