/*** GENERIC ***/
body {background-color: #000000; padding: 0px; margin: 0px; font-family: Arial, Helvetica, sans-serif;}
h1 {color: #ffffff; padding: 0px; margin: 0px;}
h2, h3 {color: #e18c08;}
h4 {color: #ffffff;}
p {font-size: 18px; color:#FFFFFF;}
a {font-size: 18px; text-decoration: none;}
th, td, label, span, input, select, div, textarea {font-size: 18px; font-family: Arial, Helvetica, sans-serif;}
hr {color:#ffffff;}
.readonly{background-color: grey;}
.button {font-family: Arial, Helvetica, sans-serif; font-size: 18px; background-color: #e18c08; border: 1px solid #ffffff; color: #ffffff; border-radius: 8px; padding: 5px 15px 5px 15px; cursor: pointer;}
.button:hover {border: 1px solid #FFFFFF;}
.button a{color:#ffffff;}
.label p{color: #e18c08; font-weight: bold;}
input{height: 20px; border-radius: 8px; padding: 15px; margin:0px 0px 15px 0px; text-align: center;}
select{height: 50px; border-radius: 8px; width:auto; padding: 5px 15px 5px 15px; text-align: center;}
textarea {padding: 15px; border-radius: 8px; margin:0px 0px 15px 0px;}
.inputgrey{background-color: #7a7a7a; color:#ffffff;}
.clear {clear : both;}
.separateur {border-top: 1px solid #ffffff; margin-bottom: 30px;}
.search-out{text-align: center;}
.alert-success {background-color: #e18c08; color: #FFFFFF; text-align: center; padding:10px; width:100%; margin: 0px auto 20px auto;}
.alert-success h4{color: #FFFFFF;}
.container .alert {background-color: #e18c08; color: #FFFFFF; text-align: center; padding:10px; width:100%; margin: 0px auto 20px auto;}
/*** HEADER ***/
.header .connexion {margin:0px; background-color: #e18c08; display: flex; flex-direction: row; align-items: center; align-content: center;  padding-left: 20px; padding-right: 20px;}
.header .connexion .nom_prof {margin: 0px; width : 50%;}
.header .connexion .nav {margin: 0px; width : 50%; text-align: right;}
.header .connexion .nav nav ul {margin: 0px; display: flex; flex-direction: row; justify-content: flex-end;}
.header .connexion .nav nav ul li {margin: 10px 0px 10px 0px; list-style: none; padding: 0px 20px 0px 20px;}
.header .connexion .nav nav ul li.bord_navhead {border-left: 1px solid #ffffff;}
.header .connexion .nav nav ul li a {color: #FFFFFF;}
.header .connexion .nav nav ul li a .fa-solid{font-size: 26px;}
.header .logo-pms {background-color: #FFFFFF; width:180px; border-radius: 10px; margin: 15px auto 30px auto; padding: 10px; text-align: center;}
/*** LOGIN ***/
.content .connect {width:520px; border: 1px solid #ffffff; border-radius: 10px; margin:0px auto 30px auto; padding: 20px;  text-align: left;}
.content .connect p{color: #e18c08; font-size: 18px; text-transform: uppercase; font-weight: 600; text-align: left;}
.content .connect input {height: 35px; width: 500px; border-radius: 8px; padding:5px;}
.content .connect input.button{ width:30%; margin-right: 15px;}
.content .connect .alert {background-color: #E18c08; color: #FFFFFF; text-align: center; padding:5px; font-family: Arial, Helvetica, sans-serif; font-size: 18px; text-transform: uppercase;}
.content .connect .password {position: relative; width: 520px;}
.content .connect .password input {font-size: 18px; color: #000000;padding: 5px;width: 500px;border-radius: 8px; border: 2px solid #7a7a7a; transition: all 0.2s; text-align: left;}
.content .connect .password .password-icon {display: flex;align-items: center;position: absolute;top: 50%;right: -50px;transform: translateY(300%);width: 100px;color: #e18c08;transition: all 0.2s;}
.content .connect .password .password-icon:hover {cursor: pointer;color: #000000;}
.content .connect .password .password-icon span {margin: 0px; padding: 0px;}
.content .connect .password .password-icon .eyeoff {display: none;}
.content .connect .creat_account {margin-left:15px; color:#ffffff;}
.content .connect .creat_account a {color:#ffffff;}
.content .connect .creat_account a:hover {color:#e18c08;}
/*** SUBSCRIPTION ***/
.content .sub {width: 40%; border: 1px solid #ffffff; border-radius : 10px; margin:auto; padding: 15px 0px 15px 0px;}
.content .sub div {width:75%; margin:auto;}
.content .sub div p{color: #e18c08; font-weight: bold; margin:10px;}
.content .sub div input {text-align: left;}
.content .sub .password {position: relative; width: 75%;}
.content .sub .password input {font-size: 18px; color: #000000; width:100%; border-radius: 8px; border: 2px solid #7a7a7a; transition: all 0.2s;}
.content .sub .password .password-icon {display: flex;align-items: center;position: absolute;top: 52%;right: -90px;transform: translateY(-20%);width: 100px;color: #e18c08;transition: all 0.2s;}
.content .sub .password .password-icon:hover {cursor: pointer;color: #000000;}
.content .sub.password .password-icon span {margin: 0px; padding: 0px;}
.content .sub .password .password-icon .eyeoff {display: none;}
.content .sub .submit-connect {margin-top: 25px;}
.content .sub .submit-connect button{margin-right:15px;}
.content .sub .submit-connect a{color:#ffffff;}
/*** TITLE ***/
.title {text-align: center; margin: 0px 0px 30px 0px; border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff;}
.title h1{margin: 10px 0px 10px 0px; font-size: 25px;}
/*** BTN SOUS TITLE ***/
.btn-ajout{display: flex; flex-direction: row; align-items:center; justify-content: center;  border-bottom: 1px solid #ffffff; margin-bottom:30px; padding: 0px 0px 30px 0px;}
.btn-ajout div{margin: 0px 15px 0px 15px; color:#ffffff;}
.btn-ajout div a {color:#ffffff;}
/*** CONTAINER ***/
.container {margin-bottom: 50px;}
/*** CONTENT ***/
.atelier {display: flex; flex-wrap: wrap; justify-content: center; width: 100%; align-content: center; align-items: center; margin: 40px 0px 40px 0px;}
.atelier .icon_atelier {text-align : center; background-color: #ffffff; border-radius: 10px; width:210px; height: 130px; padding: 15px 15px 15px 15px; margin:15px; border: 2px solid #e18c08;}
.atelier .icon_atelier a {display: flex; flex-direction:column; align-items: center; color: #000000; text-transform: uppercase; font-weight: 600;}
.atelier .icon_atelier a img {margin-bottom: 10px; width: 55px; height: 70px;}
.content table {width: auto; margin: 30px auto 30px auto;}
.content table th {color: #e18c08; height:45px; border: 1px solid #ffffff; margin: 0px; padding:10px;}
.content table td {color: #ffffff; border: 1px solid #ffffff; text-align: center; padding:10px;}
.content table td span {color: #e18c08; font-weight: bold;}
.content .col-sm1 {padding:15px; border: 1px solid #ffffff; margin: 0px 15px 30px 15px; text-align: center;}
.content .col-sm2 {display: flex;}
.content .col-sm2 .col1, .content .col-sm2 .col2 {width: 50%; padding:15px; border: 1px solid #ffffff; margin: 0px 15px 30px 15px;}
.content .col-sm2 .col1 table td {text-align: left;border: none; padding:2px;}
.content .col-sm2 .col1 table td p {margin:0px;}
.content .col-sm2 .col1 table td p input {text-align: left;}
.content .col-sm2 .col2 {display: flex; flex-direction: column; align-items: center; justify-content: center;}
.content .col-sm2 .col2 .etiquette, .content.pt .etiquette  {width: 500px; height: auto; background-color: #FFFFFF; border-radius: 10px; margin: 0px auto 35px auto; padding: 15px; text-align: left;}
.content .col-sm2 .col2 .etiquette div span, .content.pt .etiquette div span {font-size:24px; }
.content .col-sm2 .col2 .etiquette .entete, .content.pt .etiquette .entete {font-weight: bold; text-decoration: underline;}
.content .col1.maintenance {display: flex; flex-direction: column; align-items: center;}
.content .col1.maintenance div p, .content .col2.maintenance div p {margin:2px;}
.content .col1.maintenance p label, .content .col2.maintenance p label, .content .col-sm1 p label {color: #e18c08; font-weight: bold;}
.content .col-sm2 .col1.prodtemoin {text-align: center;}
.content .col-sm2 .col1.prodtemoin .icon_prodtemoin, .content .col-sm2 .col2.prodtemoin .icon_prodtemoin, .content.pt .icon_prodtemoin {color: #FFFFFF;}
.content .col-sm2 .col1.prodtemoin .icon_prodtemoin .fa-solid, .content .col-sm2 .col2.prodtemoin .fa-solid, .content.pt .fa-solid {font-size: 80px;}
.content .machines{width:60%; height: 55px; margin: 5px auto 5px auto; padding: 0px 15px 0px 15px; display: flex; align-items: center; background-color: #7a7a7a; border-radius: 5px;}
.content .machines .colmach1{width: 70%;}
.content .machines .colmach2{width: 30%; display: flex; justify-content: flex-end;}
.content .machines .colmach2 .button_mach{width: 200px; height: 35px; color: #FFFFFF; background-color: #E18c08; border-radius: 5px; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF;}
.content .machines .colmach2 .button_mach a{color: #FFFFFF;}
.content .liststud {width: 60%; margin: auto; display: flex; align-items: center;}
.content .colstud1{width: 33%; border: 1px solid #ffffff; margin-right: 10px;}
.content .colstud2{width: 33%; border: 1px solid #ffffff; margin-left: 10px;}
.content .colstud3{width: 33%; border: 1px solid #ffffff; margin-left: 10px;}
.content .colstud1 h3, .content .liststud .colstud2 h3, .content .liststud .colstud3 h3, .content .liststud .colstud4 h3{text-align: center;margin: 10px;}
.content .selectclassegroupebalance{display: flex; align-items: center; padding: 10px;}
.content .selectclassegroupebalance select{ margin: 10px auto 10px auto; width: 100%;}
.content .btn-stud{width: 60%; margin: 20px auto 20px auto; text-align: center}
.content.pt {text-align: center; margin-bottom: 30px;}
.content.pt h2, .content.pt h3{text-align: center;}

/*** FOOTER ***/
.footer{ width:100%; background-color: #7a7a7a; height : 120px; display: flex; align-items: center; justify-content: center;}
.footer p { font-size: 30px; font-weight: bold;}
/*** MODAL ***/
.modal {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    animation: fadeIn .3s both;
}
.modal-wrapper {
    overflow: auto;
    width: 450px;
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    padding: 50px;
    background-color: #FFFFFF;
    border-radius: 10px;
    animation: slideFromTop .5s both;
    text-align: left;
}
.modal[aria-hidden=true] {
    animation-name: fadeOut;
}
.modal[aria-hidden=true] .modal-wrapper {
    animation-name: slideFromBottom;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes slideFromTop {
    from { transform: translateY(-50px); }
    to { transform: translateY(0px); }
}
@keyframes slideFromBottom {
    from { transform: translateY(0px); }
    to { transform: translateY(50px); }
}
.modal-wrapper button.btn-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #e18c08;
    color: #FFFFFF;
    border-radius: 50%;
    border : 1px solid #e18c08;
    padding: 7px 10px 7px 10px;
}
.modal-wrapper h1{
    color:#e18c08;
}
.modal-wrapper p{
    color:#000000;
}
@media screen and (max-width: 1199px) {
    .content table{width:95%; margin: 20px 20px 20px 20px;}
    .content .col-sm2 {display: flex; flex-direction: column; align-items: center;}
    .content .col-sm2 .col1, .content .col-sm2 .col2 {width: 90%;}
}