body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: url('backround_photo.jpg') no-repeat center center fixed;
    background-size: cover;
    position: relative;
    box-sizing: border-box; 
    overflow-x: hidden; 
    
}

h1 {
    margin: 0;
    font-size: 40px;
    font-weight: 800;
}
.buttons label {
    flex: 1;
    font-weight: 700;
    border: none;
    color: white;
    padding: 15px 20px;
    background-color: #0066cc;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
@media (max-width: 550px) {
    h1 {
        margin: 0;
        margin-bottom: 20px;
        font-size: 30px;
        font-weight: 800;
        text-align: center;
    }

    .buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .buttons label {
        width: 90%;
        font-size: 14px;
        padding: 10px;
    }

}

.buttons label:hover {
    background-color: #004999;
    transform: scale(1.05);
}

.buttons label:active {
    background-color: #003366;
    transform: scale(0.95);
}

header {
    position: relative; 
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    display: flex;
    flex-wrap: wrap;
    color: white;
    justify-content: space-between;
    align-items: center;
    background-color: #0066cc;
    padding: 20px;
    width: 100vw;
    text-decoration: none;
    font-size: 16px;
    box-sizing: border-box;
    margin: 0; 
}

footer {
    font-size:10px;
    font-weight: 700;
    margin-top: 200px;
    background-color: darkgrey;
    display:flex;
    left: 0;
    bottom: 0;
    justify-content: space-between;
    align-items: center;
    position:fixed;
    width: 100%;
    padding-bottom:100px;
}


/* GIA TO LOGIN CONTAINER */
#login_container {
  background-color: #0066cc;
  position:absolute;  
  padding: 10px 20px 30px 20px;
  width: 40%; 
  margin-top: 200px;
  margin-bottom: 200px;
  margin-left: 30%;
  margin-right: 30%;
  border-radius: 20px;
  box-shadow: 10px 10px 5px rgb(43, 42, 42);
  box-sizing: border-box;
}
#login_container h2 {
    color: aliceblue;
    word-wrap: break-word;
}

.lgin {
    text-align: left; 
    margin-left: 1px;
    margin-bottom: 20px;
    border-radius: 5px;
    font-size: 16px;
    width: 50%; 
}

.lgin:focus {
    
    background-color: rgb(63, 67, 68);
    border:#3b3939;
}

.lgin_submit { 
    border-radius: 20px;
    margin-right:70px;
    width: auto;
    display: block;
    margin-left: auto;
    font-weight: 700;
    border: none;
    background-color: #0066cc;
    color: white;
    font-size: 16px;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  .lgin_submit:hover {
    background-color: #004999;
}

.lgin_submit:active {
    background-color: #003366;
    transform: scale(0.95);
}

  .frgt {
    width: auto;
    display: block;
    margin: 15px 0;
    cursor: pointer; 
    text-align: right; 
}


.hide {
    display: none;
  }
 
.frgt:hover + .hide {
    display: block;
    font-weight: 700;
    color: rgb(0, 0, 0);
    
} 

@media (max-width: 550px) {
    #login_container {
        width: 70%;
        margin-left: 15%;
        margin-right: 15%;
        margin-top: 100px;
        margin-bottom: 100px;
        padding: 20px 15px;
    }

    #login_container h2 {
        font-size: 16px;
        text-align: center;
    }

    .lgin {
        width: 100%;
        font-size: 14px;
    }

    .lgin_submit {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        padding: 10px;
        font-size: 14px;
    }

    .frgt {
        text-align: center;
        margin-top: 10px;
        font-size: 14px;
    }

    .hide {
        font-size: 12px;
        text-align: center;
    }
}
/* GIA TO LOGIN CONTAINER */

/* GIA TO NEWS CONTAINER */
#news_container{
    display: none;
    background-color: #0066cc;
    width: 40%;
    padding: 10px 20px 30px 20px;
    margin-top: 200px;
    margin-bottom: 200px;
    margin-left: 30%;
    margin-right: 30%;
    border-radius: 20px;
    box-shadow: 10px 10px 5px rgb(43, 42, 42);
    box-sizing: border-box;
    overflow: hidden;
}

#news_container h2 {
    color: aliceblue;
    text-align: center;
    word-wrap: break-word;
}


input[type="radio"] {
    display: none;
  }


#news_list{
    margin-top: 10px;
    margin-bottom:1px;
    border-radius: 10px;
    background-color: aliceblue;
    padding: 5px 20px 5px;
    list-style: none; 
    box-sizing: border-box; 
    overflow: hidden;

}

#news_list li {
    padding: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

#news_list li span {
    display: block;
    font-size: 14px;
    color: #333;
    line-height: 1.5; 
    word-wrap: break-word; 
    overflow-wrap: break-word; 
}

@media (max-width: 550px) {
    #news_container {
        position: relative;
        width: 70%;
        margin-left: 10%;
        margin-right: 15%;
        margin-top: 100px;
        margin-bottom: 300px;
        padding: 20px;
    }
    #news_container h2 {
        margin: 0;
        padding-right:30px;
        color: aliceblue;
        text-align: center;
        word-wrap: break-word;
    }
    #news_list{
        
        margin-top: 10px auto;
        margin-bottom:1px;
        border-radius: 10px;
        background-color: aliceblue;
        padding: 5px 20px 5px;
    }
    
    #news_list li {
        padding: 10px;
        margin-bottom: 10px;
        margin-top: 10px;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 5px;
        word-wrap: break-word; 
        overflow-wrap: break-word;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    #news_list li span {
        display: block;
        font-size: 14px;
        color: #333;
        line-height: 1.5;
    }
}




.exit-button {
    background-color: #0066cc;
    color: white;
    font-size: 16px; 
    font-weight: bold; 
    padding: 10px 20px;
    border: none; 
    border-radius: 8px; 
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
}
.log_off {
    flex:1;
    font-weight: 700;
    border: none;
    color:white;
    padding:20px 1px;
    background-color: #0066cc;
    text-align: center;
    text-decoration: none;
    font-size: 15px;
    cursor: pointer;
    position:static;

}

.exit-button:hover {
    background-color: #004999; 
    transform: scale(1.05); 
}

.exit-button:active {
    background-color: #004999; 
    transform: scale(0.95); 
}
/* Arxi apo prosthikes 4/12/2024 */
.green-button {                   /* prasino koumpi ston kathigiti */
    background-color: green;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    position: fixed;  
    bottom: 155px;     
    right: 12px;      
}

.green-button:hover {
    background-color: darkgreen;
}

.close-button {                           /* to koumpi  x */
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: gray;
    color: white;
    border: none;
    font-size: 30px;
    padding: 10px;
    cursor: pointer;
    border-radius: 0%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.close-button:hover {
    background-color: darkred;
}




/* Telos apo  Prosthikes */

.rad_butt{
    
    border-radius: 10px;
    padding-left:10px;
    margin-top: 30px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 100%;
    background-color: #213d58;
    display: flex;
    flex-wrap: wrap;             
    justify-content: space-between; 
    transition: background-color 0.3s ease;

    
}
.rad_butt label{
    padding-top: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    padding-left:50px;
    padding-right:50px;
    padding-bottom: 20px;
    color:white;
    background-color: #213d58;
    text-align: center;
    font-size: 15px;
    cursor: pointer;
    height: 100%;
    height: auto; 
    margin: 0 10px; 
}


.rad_butt label:hover {
    background-color: #36577a;
    border-radius: 5px;
}

.rad_butt input[type="radio"]:checked + label {
    background-color: #4a6a8c; 
    border-radius: 10px;
}


table, th, td { 
    padding-left:20px;
    padding-right:20px;
    border: 1px solid white;
    border-collapse: collapse;
  }
  th{
    border-radius: 5px;
    background-color: #6994cc; 
  }

/* pros8hkh tou managment_container*/
#subj_container,#assignment_container,#history_container,#invitations_container,#statistics_container,#managment_container {
    display: flex; 
    border-radius:10px;
    align-items: center;
    margin-top: 140px;
    margin-right: 40px;
    padding: 25px 50px 60px 50px;
    margin-bottom: 150px; 
    background-color: aliceblue;
    flex-wrap: wrap;             
    justify-content: space-between; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin-left: 30px;
    overflow: auto;
} 




table, th, td { 
    padding-left:20px;
    padding-right:20px;
    border: 1px solid white;
    border-collapse: collapse;
  }
  th{
    border-radius: 5px;
    background-color: #6994cc;
  }

/*mexri kai to "no.invitation gia to invitation_container*/
    #invitations_container {
    margin: 20px;
    padding: 10px;
}

/* αλλαγεσ για φορμα edit στον καθηγητη */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: auto; 
    height: auto; 
    background-color: white; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    border-radius: 10px; 
    padding: 20px; 
    overflow: auto; 
    
}

.form-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    width: 400px; 
    max-width: 90%; 
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 15px; 
}


.form-content label {
    font-size: 14px;
    color: #333;
    font-weight: bold;
}

.form-content input[type="text"],
.form-content textarea,
.form-content input[type="file"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.form-buttons {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.btn {
    padding: 8px 12px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn-primary {
    background-color: #007bff;
    color: #fff;
}

.btn-primary:hover {
    background-color: #0056b3;
}

.btn-secondary {
    background-color: #6c757d;
    color: #fff;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

.btn-danger {
    background-color: #dc3545; 
    color: #fff;
}

.btn-danger:hover {
    background-color: #c82333; 
}
  /* τελος αλλαγων για φορμα edit */




  .chart-grid {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.chart-item {
    width: 30%; 
    min-width: 150px; 
    max-width: 250px; 
}

canvas {
    width: 100% !important; 
    height: 200px !important; 
}


.modal-content {
    background-color: white;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
    border-radius: 8px;
}
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}




#managment_container
{
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 200px;
    padding: 10px;
    padding-bottom: 60px;
    overflow: auto;
}


#invitations_header {
    display: flex;
    font-weight: bold;
    margin-bottom: 10px;
}

#invitations_header span {
    flex: 1;
    text-align: center;
}


#invitation_id {
    list-style-type: none;
    padding: 0;
}

#invitation_id li {
    background-color: rgb(122, 132, 221);
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #ccc;
}

#invitation_id li span {
    flex: 1;
    text-align: center;
}


#invitation_id div button {
    padding: 5px 10px;
    margin-left: 5px;
    cursor: pointer;
}

#invitation_id div button.accept {
    background-color: green;
    color: white;
}

#invitation_id div button.decline {
    background-color: red;
    color: white;
}

.no-invitation {
    font-size: 16px;
    color: #000000;
    text-align: center;
    padding: 10px;
    list-style-type: none;
}











/* GIA  THN ANATHESH DIPLWMATIKWN*/

#assignment_container h2 {
    color: #213d58;
    text-align: center;
    margin-bottom: 20px;
}


#assignment_insert {
    display: flex;
    flex-direction: column;
    gap: 15px;
}


#assignment_insert label, #titl_id {
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}


#assignment_insert input,
#assignment_insert select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 50%;
    box-sizing: border-box;
    font-size: 14px;
}


#assignment_insert button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease;
}


#assignment_insert button:hover {
    background-color: #45a049;
}

#assignment_insert tr {
    margin-bottom: 5px;
}
#student_search_info {
    font-weight: bold;
    font-size: 16px;
    color: #333; 
    margin-bottom: 30px;
}

                /* GIA THN DIAXEIRISH DIPLWMATIKWN */
#under_assignment,#active_thesis,#under_examination {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; 
    align-items: left; 
   
}

#under_assignment li {
    display: flex; 
    justify-content: flex-start;
    align-items: flex-start;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 5px 0; 
    background-color: #829fee;
    max-width: 90%; 
    position: relative;
}

#active_thesis li {
    display: flex; 
    justify-content: flex-start; 
    align-items: flex-start;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 5px 0; 
    background-color: #325ac9;
    max-width: 90%; 
    position: relative;
}
#under_examination li {
    display: flex; 
    justify-content: flex-start; 
    align-items: flex-start;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 5px 0; 
    background-color: #123cb1;
    max-width: 90%; 
    position: relative;
}

#under_assignment li span,
#active_thesis li span,
#under_examination li span  {
    flex: 1; 
    margin: 0 10px; 
    padding: 5px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-align: left;
}

#under_assignment h4,#active_thesis h4,#under_examination h4 {
    margin: 0 0 5px 0; 
    font-size: 20px;
    color: #0f0f0f;
    display: inline;
}
.button-container {
    display: flex;
    justify-content: space-between; 
    gap: 5px;
    flex-wrap: wrap; 
    align-items: center;
    margin: 5px 0;
}
.button-container button {
    padding: 10px 20px;
    font-size: 14px;
    border: none;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 30%;
    min-width: 200px;
    
}


.show_invites-btn, .my_drafts,.thesis_draft,.grading_btn {
    background-color: #4CAF50;
    color: white; 
    border: none;
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 5px; 
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.show_invites-btn:hover,.my_drafts:hover,.thesis_draft:hover {
    background-color: #45a049; 
}

button {
    padding: 10px 20px;
    font-size: 14px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}


.cancel-btn,.announcement_btn,.grading_btn {
    background-color: #e74c3c; 
    color: white;
}


.cancel-btn.disabled {
    background-color: #dcdcdc; 
    color: #a1a1a1;
    cursor: not-allowed; 
}


.cancel-btn:hover,.grading_btn:hover {
    background-color: #c0392b; 
}

.my_drafts {
    background-color: #4CAF50;
}
.under_exam,.announcement_btn {
    background-color: #2a36d6; 
}
.under_exam:hover,.announcement_btn:hover{
    background-color: #1622ca;

}


/* GIA THN DIAXEIRISH DIPLWMATIKWN */

/*           KWDIKAS GIA TO POP UP ME TIS PROSKLHSEIS KAI TA INVITES STO THESIS MANAGMENT CONTAINER */

.invite_pop_up, .drafts_pop_up {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 30px 40px; 
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none;
    max-width: 800px; 
    width: 90%; 

}

.new_draft {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 30px 40px; 
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none; 
    max-width: 800px;
    width: 90%; 

}
/* KWDIKAS GIA TO KEIMENO THS ANAKOINWSHS */
.announcement_text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 30px 40px; 
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 999;
    display: none; 
    max-width: 800px; 
    width: 90%; 
    border-radius: 10px;

}
/*           KWDIKAS GIA TO POP UP ME TIS PROSKLHSEIS KAI TA INVITES STO THESIS MANAGMENT CONTAINER */

.not_allowed_pop_up, .you_sure_pop_up, .cancel_active, .ue_not_allowed_pop_up, #ue_you_sure_pop_up, .links_pop_up, .grade_opening_sup, .grade_opening_mem, .grading_pop_up {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px; 
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none; 
    max-width: 90%; 
    width: 400px; 
    box-sizing: border-box; 
    text-align: center; 
    overflow: hidden; 
    border-radius: 8px; 
}

.inv_buttons {
    display: flex;
    justify-content: center; 
    gap: 15px; 
    margin-top: 10px; 
}

button.accept {
    background-color: #4CAF50; 
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
    max-height: 40px;
}

button.accept:hover {
    background-color: #218838; 
    transform: scale(1.05); 
}
button.decline {
    background-color:  #e74c3c; 
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-right: 20px;
    max-height: 40px;
}

button.decline:hover {
    background-color: #c82333; 
    transform: scale(1.05);
}



.invite-header {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    padding: 10px 0;
    border-bottom: 2px solid #ccc;
}


.invite-header .header-item {
    flex: 1;
    text-align: center;
}


.invitations {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}


.invitations span {
    flex: 1;
    text-align: center;
}


#invite_closepop_up{
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #e74c3c;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    display: block;
    width: 100%;
    text-align: center;
}



#cancel_closepop_up, #confirm_closepop_up {
    margin-top: 20px; 
    padding: 10px 20px; 
    background-color: #007BFF; 
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block; 
    width: auto; 
    text-align: center;
}

.invite-table {
    margin-top: 20px;
}


.invite-table h2 {
    text-align: center;
    font-size: 22px; 
    margin-bottom: 20px;
}

.cancel_active .form-group {
    margin-bottom: 10px;
    text-align: left;
}

.cancel_active label {
    font-weight: bold;
    font-size: 14px;
    display: block;
    margin-bottom: 5px;
    color: #555;
}

.cancel_active input {
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

.cancel_active #months_diff_result {
    margin-top: 20px;
    font-size: 16px;
    font-weight: 500;
    color: #444;
}
/*    KOMMATI POP UP BA8MOLOGHSHS - PROBOLH BA8MOLOGIAS*/


.invitation-row{
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    flex: 1;
    text-align: left;
    border-radius: 5px;
}
.graders {
    list-style: none;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #f9f9f9;
    max-width: 600px;
    margin: 20px auto;
    font-family: Arial, sans-serif;
    margin-bottom: 5px;
    margin-bottom: 5px;
}

.graders .header-row {
    background-color: #4CAF50;
    color: white;
    text-align: center;
    padding: 5px 5px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.graders .grades-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
}

.graders .grades-row:last-child {
    border-bottom: none;
}

.graders .grades-name {
    flex: 1;
    text-align: left;
    font-weight: bold;
    color: #333;
}

.graders .grades-grade {
    flex: 0;
    text-align: right;
    background-color: #e7f3e7;
    color: #4CAF50;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 5px;
}

.graders .no-grades-row {
    text-align: center;
    padding: 20px;
    font-size: 1.2em;
    color: #777;
}

.graders .grades-row:hover {
    background-color: #f1f1f1;
}

.grading-form .form-group {
    margin-bottom: 15px;
}

.grading-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

.grading-form input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    box-sizing: border-box;
    margin-top: 5px;
}

#grade_input:hover {
    background-color: #45a049; 
    transform: scale(1.05); 
}
#cancel_grade_close:hover {
    background-color: #d7352c; 
    transform: scale(1.05); 
}
/*    KOMMATI POP UP BA8MOLOGHSHS - PROBOLH BA8MOLOGIAS*/




/* css για το thema making */
body.form-container {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}

h2.form-title {
    font-size: 2rem; 
    color: #ffffff; 
    text-align: center;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); 
}


form.form-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
}

label.form-label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
    color: #555;
}

input.form-input,
textarea.form-textarea,
input.form-file {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

button.form-button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
}

button.form-button:hover {
    background-color: #0056b3;
}

button.close-button {
    background-color: #e74c3c;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
}

button.close-button:hover {
    background-color: #c0392b;
}
/* css για το thema making */






/* KATHIGITHS.PHP */
.title1 {
    font-family: 'Playfair Display', serif;    
    font-size: 32px; 
    color: #274d71; 
    text-align: center; /* Kentarisma tou titlou */
}

/* Genika styl gia tin forma filtrou */
#filter-form {
    display: flex; 
    justify-content: space-between; /* Exisorropisi twn stoixeiwn */
    align-items: center; 
    gap: 30px; /* Apostasi anamesa sta stoixeia */
    padding: 20px; 
    max-width: 800px; /* Megisto platos tis formas */
    margin: 0 auto; /* Kentarisma tis formas stin othoni */
    background-color: #f8f9fa; 
    border-radius: 8px; 
    border: 1px solid #ddd; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Prostheti skia gia kalyteri emfanisi */
}

/* Styl gia tis etiketes (labels) */
#filter-form label {
    font-size: 14px; 
    font-weight: 600;
    color: #555; /* Xrwma etiketas */
}

/* Styl gia ta pedia epilogis (select) */
#filter-form select {
    padding: 10px; /* Esoteriko padding */
    font-size: 14px; 
    border-radius: 6px; 
    border: 1px solid #ccc; /* Perigrama tou pedioy */
    background-color: white; 
    color: #333; 
    cursor: pointer; /* Allagi tou deikti se xeri */
}

/* Styl gia to koumpi "Filtrarismo" */
#filter-form button {
    background-color: #007bff; 
    color: white; 
    border: none; /* Xwris perigrama */
    padding: 12px 24px; 
    font-size: 16px; 
    font-weight: bold; 
    border-radius: 6px; 
    cursor: pointer; /* Allagi tou deikti se xeri */
    transition: background-color 0.3s ease; 
}

/* Efe hover gia to koumpi */
#filter-form button:hover {
    background-color: #0056b3; /* Skouro mple sto hover */
}

/* Efe focus gia to koumpi */
#filter-form button:focus {
    outline: 2px solid #0056b3; /* Perigrama focus */
}

/* Styl gia tin eidopoiisi (error message) otan den yparxoun dedomena */
#history_container table tbody tr td {
    text-align: center; /* Kentarisma keimenou */
    font-size: 16px; 
    color: #888; 
    padding: 10px; /* Esoteriko padding */
}

#history_container table tbody tr td[colspan="3"] {
    font-weight: bold; 
    color: #e74c3c; /* Kokkino chroma gia error */
}

/* Styl gia to modal */
.modal1 {
    display: none; /* Arxika krymmeno */
    position: fixed; /* Statheri thesi stin othoni */
    z-index: 1000; /* Protereotita sto modal */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Dynatotita scrolling */
    background-color: rgba(0, 0, 0, 0.6); /* Diafania fonto */
    backdrop-filter: blur(5px); /* tholosi */
}

/* Esoteriko periexomeno tou modal */
.modal-content1 {
    background-color: #ffffff; 
    padding: 30px; 
    border: none; /* Xwris perigrama */
    width: 70%; /* Platos modal */
    max-width: 800px; 
    border-radius: 15px; 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Skia gia emfanisi */
    position: absolute; 
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9); /* Metatopisi kai meiosi megethous */
    animation: fadeIn 0.3s ease-out forwards; /* Efe fade-in */
    opacity: 0; /* Arxiki diafaneia */
}

/* Koumpi gia kleisimo tou modal */
.close {
    color: #e74c3c; 
    font-size: 24px; 
    font-weight: bold; 
    position: absolute; /* Apoliti thesi */
    top: 10px; /* Apostasi apo to pano */
    right: 15px; /* Apostasi apo ta dexia */
    cursor: pointer; /* Allagi tou deikti */
    transition: color 0.3s ease; /* Efe metavasis xrwmatos */
}

.close:hover {
    color: rgb(200, 10, 10); /* Pio skouro kokkino sto hover */
}

/* Efe emfanisis tou modal */
@keyframes fadeIn {
    from {
        opacity: 0; /* Arxiki diafaneia */
        transform: translate(-50%, -50%) scale(0.9); /* Arxiki meiosi */
    }
    to {
        opacity: 1; /* Pliris emfanish */
        transform: translate(-50%, -50%) scale(1); /* Teliki diastasi */
    }
}

/* 7/12/2024  ftixtike gia na exei wheel to subj container */
#subj_container {   
    display: block;  
    max-height: 400%; 
    overflow-y: auto; 
}

/* #subj_container table tbody: Orismos ypsous kai scroll sto subj_container */
#subj_container table tbody {
    display: block; 
    height: 300px;  
    overflow-y: scroll;  /* Prosthiki katakoryfou scroll otan ta dedomena einai polla */
    width: 100%;  
}

/* #subj_container table thead kai tbody tr: Orismos fixed layout gia to subj_container */
#subj_container table thead, #subj_container table tbody tr {
    display: table; 
    width: 100%;  
    table-layout: fixed; /* Orismos tou table layout os fixed gia isotimi diataxi */
}

/* #subj_container table thead: Prosarmogi fonto gia kefalides subj_container */
#subj_container table thead {
    background: #f0f0f0; 
}








#status_filter_lb{
    font-size: 14px; 
    font-weight: 600;
    color: #555; 
}


#status_filter {
    padding: 10px; 
    font-size: 14px; 
    border-radius: 6px; 
    border: 1px solid #ccc; 
    background-color: white; 
    color: #333; 
    cursor: pointer; 
}
#role_filter_lb{
    font-size: 14px; 
    font-weight: 600;
    color: #555; 
}


#role_filter {
    padding: 10px; 
    font-size: 14px; 
    border-radius: 6px; 
    border: 1px solid #ccc; 
    background-color: white; 
    color: #333; 
    cursor: pointer; 
}


#filter-button{
    background-color: #184768; 
    color: white; 
    border: none; 
    padding: 12px 24px; 
    font-size: 16px; 
    font-weight: bold; 
    border-radius: 6px; 
    cursor: pointer;
    transition: background-color 0.3s ease; 
}


#filter-button:hover {
    background-color: #0056b3; 
}


#filter-button:focus {
    outline: 2px solid #0056b3; 
}




/* Βασικό στυλ για τον πίνακα */
#status-history-table {
    width: 100%;
    border-collapse: collapse; /* Ενώνει τα περιγράμματα των κελιών */
    margin: 20px 0;
    font-size: 16px;
    text-align: left;
    background-color: #f9f9f9;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd; /* Εξωτερικό περίγραμμα του πίνακα */
}

/* Επικεφαλίδα του πίνακα */
#status-history-table thead tr {
    background-color: #007bff; /* Μπλε απόχρωση */
    color: #ffffff; /* Λευκά γράμματα */
    font-weight: bold;
    text-align: center;
}

/* Κελιά του πίνακα */
#status-history-table th,
#status-history-table td {
    padding: 12px 15px;
    text-align: center;
    border: 1px solid #ddd; /* Προσθέτει γραμμές γύρω από τα κελιά */
}

/* Γραμμές του πίνακα */
#status-history-table tbody tr {
    transition: background-color 0.3s ease;
}

/* Εναλλαγή χρωμάτων στις γραμμές */
#status-history-table tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* Ανοιχτό γκρι */
}

/* Hover εφέ */
#status-history-table tbody tr:hover {
    background-color: #f1f8ff; /* Απαλό μπλε */
}

/* Προσαρμογή για μικρότερα μεγέθη οθόνης */
@media screen and (max-width: 500px) {
    #status-history-table {
        font-size: 14px;
    }
    #status-history-table th,
    #status-history-table td {
        padding: 10px 8px;
    }
}



/* Stil gia ton pinaka */
#history_container table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-family: 'Roboto', sans-serif; /* Mporeite na allaxete ti grammatosi */
    font-size: 16px;
    color: #333;
    background-color: #f9f9f9; /* Elafry gri fondo */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Prosthiki skias */
}

/* Kefalida tou pinaka */
#history_container table thead th {
    background-color: #184768; /* Mple kefalida */
    color: white;
    text-align: center;
    padding: 12px;
    border: 1px solid #ddd;
}

/* Grammes somatos tou pinaka */
#history_container table tbody tr {
    text-align: center;
    border-bottom: 1px solid #ddd;
    transition: background-color 0.3s;
}

#history_container table tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* Enallassomeno gri xroma */
}

#history_container table tbody tr:hover {
    background-color: #e6f7ff; /* Elafry mple otan perna to pontiki */
}

/* Stiles tou pinaka */
#history_container table tbody td {
    padding: 10px;
    border: 1px solid #ddd; /* Perigrammata */
    vertical-align: middle;
}

/* Koumpi "Plirofories" */
#history_container table tbody .info-button {
    background-color: #184768bf;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#history_container table tbody .info-button:hover {
    background-color: #1311b4; /* Pio skouro mple */
}









/* GRAMMATEIA.PHP */
/* Styl gia ton pinaka */
#thesisTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-family: 'Roboto', sans-serif; /* Mporite na allaxete ti grammatoseira */
    font-size: 16px;
    color: #333;
    background-color: #f9f9f9; /* Elafro gri fondo */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Prosthesi skias */
}

/* Kefalida tou pinaka */
#thesisTable thead th {
    background-color: #184768; /* Mple kefalida */
    color: white;
    text-align: center;
    padding: 12px;
    border: 1px solid #ddd;
}

/* Grammes somatos tou pinaka */
#thesisTable tbody tr {
    text-align: center;
    border-bottom: 1px solid #ddd;
    transition: background-color 0.3s;
}

#thesisTable tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* Enallasomeno gri xroma */
}

#thesisTable tbody tr:hover {
    background-color: #e6f7ff; /* Elaftro mple otan pernaei to pontiki */
}

/* Stiles tou pinaka */
#thesisTable tbody td {
    padding: 10px;
    border: 1px solid #ddd; /* Perigrammata */
    vertical-align: middle;
}

/* Koumpi "Provoli" */
#thesisTable tbody .showinfo-button {
    background-color: #184768bf;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#thesisTable tbody .showinfo-button:hover {
    background-color: #1311b4; /* Pio skouro mple */
}

/* GIA TO EISAGOGI DEDOMENON ME JSON */
/* Styl gia tous titlous */
.title2 {
    font-family: 'Playfair Display', serif; 
    font-size: 32px; 
    color: #274d71; 
    text-align: left; /* Kentarisma tou titlou */
}

/* Styl gia to uploadForm */
#uploadForm {
    display: flex; 
    align-items: center; /* Katheti stoixisi sto kentro */
    gap: 10px; /* Apostasi metaxy ton stoixeion */
    padding: 10px; /* Esoteriko perithorio */
    background-color: #f7f9fc; /* Apalo fondo */
    border: 1px solid #d1d5db; /* Lepto perigrapho */
    border-radius: 8px; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Elaftia skia */
    margin: 20px auto; /* Kentarisma formas */
    max-width: 600px; /* Megisto platos formas */
}

/* Styl gia to input arxeiou */
#uploadForm input[type="file"] {
    font-size: 14px; 
    padding: 8px; /* Esoteriko perithorio */
    border: 1px solid #d1d5db; 
    border-radius: 6px; /* Strongylemenes gwnies */
    background-color: #ffffff; 
    color: #333; /* Chromatismos keimenou */
    cursor: pointer; /* Deiktis pontikiou */
    transition: border-color 0.3s ease; /* Efe metavasis */
    flex-grow: 1; /* Epitrepei sto input na megathinei */
}

/* Efek focus gia to input arxeiou */
#uploadForm input[type="file"]:focus {
    border-color: #274d71; /* Chromatismos perigraphou sto focus */
    outline: none; /* Afairesi default outline */
}

/* Styl gia to koumpi "Anevasma" */
#uploadForm button {
    background-color: #274d71; /* Kyrio chroma koumpiou */
    color: #ffffff; 
    border: none; 
    border-radius: 6px; 
    padding: 10px 20px; /* Esoteriko perithorio */
    font-size: 16px; 
    font-weight: bold; /* Entoni graphi */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Efe metavasis */
}

/* Efe hover gia to koumpi */
#uploadForm button:hover {
    background-color: #4CAF50; /* Pio skouro chroma sto hover */
}

/* Efe focus gia to koumpi */
#uploadForm button:focus {
    outline: 2px solid #4CAF50; /* Grammi estiasis */
    outline-offset: 2px; /* Apostasi apo to koumpi */
}






/* GIA ENERGES DIPLOMATIKES */
/* Genika style gia tis formes */
#protocol-form, #cancel-thesis-form {
    margin: 20px auto; /* Kentrarisma twn formwn */
    padding: 20px; 
    max-width: 600px; /* Megisto platos formas */
    background-color: #f7f9fc; 
    border: 1px solid #d1d5db; /* Lepto perigramma */
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Elafria skia */
}

/* Style gia tis etiketes (labels) */
#protocol-form label, #cancel-thesis-form label {
    font-size: 14px; 
    margin-bottom: 6px; /* Apostasi katw apo tis etiketes */
    display: block; /* Kanoume tis etiketes block oste na katalamvanoun olo to platos */
}

/* Style gia ta pedia eisagogis */
#protocolForm input[type="number"], 
#protocolForm input[type="date"], 
#cancelForm input[type="number"], 
#cancelForm textarea,
#cancelForm select {
    width: 100%; 
    padding: 10px; 
    margin-bottom: 15px; /* Apostasi apo to epomeno pedio */
    border: 1px solid #d1d5db; /* Perigramma */
    border-radius: 6px; 
    font-size: 14px; /* Megethos grammatos */
    color: #333; /* Xrwma keimenou */
}

/* Style gia tin perioxi keimenou (textarea) */
#cancelForm textarea {
    height: 120px; /* Ypsos gia to pedio keimenou */
}

/* Style gia ta koumpia (buttons) */
#protocolForm button, #cancelForm button {
    background-color: #274d71; 
    color: #ffffff; 
    border: none; /* Afairesi perigrammatos */
    border-radius: 6px; 
    padding: 12px 20px; 
    font-size: 16px; 
    font-weight: bold; /* Entoni grafi */
    cursor: pointer; /* Deiktis pontikiou */
    transition: background-color 0.3s ease; /* Efe metavasis */
    width: 100%; 
}

/* Efe hover gia ta koumpia */
#protocolForm button:hover, #cancelForm button:hover {
    background-color: #4CAF50; /* Pio skouro xrwma sto hover */
}

/* Efe focus gia ta koumpia */
#protocolForm button:focus, #cancelForm button:focus {
    outline: 2px solid #4CAF50; /* Grammi estiasis */
    outline-offset: 2px; /* Apostasi apo to koumpi */
}

/* Style gia ta pedia epilogis (select) */
#protocolForm select, #cancelForm select {
    width: 100%; 
    padding: 10px; 
    border: 1px solid #d1d5db; /* Perigramma */
    border-radius: 6px; 
    font-size: 14px; 
}

/* Style gia ta koumpia anipsosis i epektasis */
#protocolForm button[type="submit"]:disabled, #cancelForm button[type="submit"]:disabled {
    background-color: #b0bec5; /* Xrwma gia koumpi apenergopoiimeno */
    cursor: not-allowed; /* Apagoreytikos deiktis */
}

/* GIA YPO EXETASI DIPLOMATIKES */
/* Style gia to container tis formas */

/* Style gia tis etiketes (labels) */
#updateStatusForm label {
    font-size: 14px; 
    margin-bottom: 8px; /* Apostasi apo epomeno stoixeio */
    display: block; /* Kalyteri topothetisi etiketas */
}

/* Style gia to pedio epilogis diplomatikis (select) */
#updateStatusForm select {
    width: 100%; 
    padding: 10px; 
    margin-bottom: 20px; /* Apostasi katw */
    border: 1px solid #d1d5db; /* Perigramma */
    border-radius: 6px; /* Strongylemenes gwnies */
    font-size: 14px; 
    color: #333; /* Xrwma keimenou */
}

/* Style gia to koumpi "Metatropi se Peratwmeni" */
#updateStatusForm button {
    background-color: #274d71; /* xrwma koumpiou */
    color: #ffffff; /* Xrwma keimenou */
    border: none; /* Afairesi perigrammatos */
    border-radius: 6px; 
    padding: 8px 16px; /* Mikrotero padding */
    font-size: 14px; /* Mikrotero megethos grammatos */
    font-weight: bold; 
    cursor: pointer; /* Deiktis pontikiou */
    transition: background-color 0.3s ease; /* Efe metavasis */
    width: auto; /* Prosomoiwnetai sto megethos tou periexomenou */
    margin: 0 auto; /* Kentrarisma tou koumpiou */
}

/* Efek hover sto koumpi */
#updateStatusForm button:hover {
    background-color: #2ecc71; /* Skouro prasino sto hover */
}

/* Efek focus sto koumpi */
#updateStatusForm button:focus {
    outline: 2px solid #2ecc71; 
    outline-offset: 2px; 
}

/* Style gia to apotelesma enimerwsis */
#statusUpdateResult {
    margin-top: 20px; /* Apostasi apo pano */
    font-size: 16px; 
}

/* Style gia epitixes minima */
#statusUpdateResult p {
    margin: 0; /* Apotropi default apostasis */
    font-weight: bold; /* Entoni grafi */
}

/* Style gia epitixes minima se prasino */
#statusUpdateResult p {
    color: #27ae60; /* Prasino xrwma */
}

/* Style gia minima sfalmatos se kokkino */
#statusUpdateResult p {
    color: #e74c3c; /* Kokkino xrwma */
}




/* Βασικό στυλ για τον πίνακα του subj_container */
.styled-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 16px;
    text-align: left;
    background-color: #f9f9f9;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd; 
    word-wrap: break-word;
}

.styled-table thead tr {
    background-color: #007bff; 
    color: #ffffff; 
    font-weight: bold;
    text-align: center;
}


.styled-table th,
.styled-table td {
    padding: 12px 15px;
    text-align: center;
    border: 1px solid #ddd; 
}


.styled-table tbody tr {
    transition: background-color 0.3s ease;
}

.styled-table tbody tr:nth-child(even) {
    background-color: #f2f2f2; 
}


.styled-table tbody tr:hover {
    background-color: #f1f8ff; 
}


.styled-table tbody {
    display: block;
    height: 300px; 
    overflow-y: auto; 
    width: 100%;
}


.styled-table thead {
    display: table;
    width: 100%;
    table-layout: fixed;
    background: #f0f0f0;
}