/*** 'Εκδοση 4.0.1
         * Δημιουργήθηκε στις 21/12/2024
         * Τροποποιήθηκε στις 15/02/2025
         */

/************************************************************************************************************************
*Περιστρεφόμενες κάρτες αρχικής σελίδας 
*
************************************************************************************************************************/
        /* Εδώ παραμένει η αρχική διάταξη για μεγάλες οθόνες και φορητούς υπολογιστές */

        /* Κεντρική διάταξη: Κάρτες σε σειρά με κενό μεταξύ τους */
        .custom-card-container {
            display: flex;
            grid-template-columns: repeat(auto-fit, minmax(19vw, 1fr)); /* Αυτόματη προσαρμογή του αριθμού των στηλών */
            gap: 14px; /* Ελάχιστο κενό ανάμεσα στις κάρτες */
            justify-content: center; /* Οι κάρτες τοποθετούνται στο κέντρο */
            margin: 10px auto;
            padding: 18px; /* Γενικό padding για καλύτερη εμφάνιση */
        }

        /* Κάρτες - ρυθμίσεις για μεγάλες οθόνες (1366px και πάνω) */
        @media (min-width: 1366px) {
            .custom-card {
                width: 30%; /* Κάθε κάρτα να καταλαμβάνει το 30% του συνολικού πλάτους */
                height: 250px;
                max-height: 300px; /* Προσθήκη για να διασφαλιστεί το ίδιο ύψος */
            }
        }

        /* Ειδική διάταξη για μεσαίες οθόνες (751px έως 1365px)  */
        @media (min-width: 751px) and (max-width: 1365px) {
            .custom-card-container {
                flex-direction: row; /* Οι κάρτες παραμένουν σε σειρές */
                flex-wrap: wrap; /* Οι κάρτες μετακινούνται στη νέα γραμμή αν δεν χωρούν */
                justify-content: center; /* Κεντράρισμα */
                gap: 20px; /* Κενό μεταξύ των καρτών */
                padding: 15px; /* Προσαρμοσμένο padding */
            }

            .custom-card {
                width: 65%; /* Κάθε κάρτα να καταλαμβάνει περίπου το 65% */
                height: 280px; /* Ύψος καρτών */
                max-width: 65%; /* Μέγιστο πλάτος 65% */
            }
        }

        /* Ειδική διάταξη για μικρές οθόνες (κινητά) */
        @media (max-width: 750px) {
            .custom-card-container {
                flex-direction: column; /* Οι κάρτες να στοιχίζονται κατακόρυφα */
                padding: 10px; /* Μικρότερο padding για κινητά */
            }

            .custom-card {
                width: 100%; /* Κάθε κάρτα να καταλαμβάνει το 100% του πλάτους */
                height: 250px; /* Καθορισμένο ύψος για τις κάρτες στις κινητές συσκευές */
            }
        }

        /* Εσωτερική κάρτα */
        .custom-card-inner {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s;
        }

        .custom-card:hover .custom-card-inner {
            transform: rotateY(180deg);
        }

        /* Πρόσοψη κάρτας */
        .custom-card-front {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center; /* Κεντράρει το περιεχόμενο κάθετα */
            align-items: center; /* Κεντράρει το περιεχόμενο οριζόντια */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            background-color: white;
            border: solid 2px #c9cccd
        }

        /* Πρόσοψη κάρτας - σλόγκαν */
        .custom-card-front .custom-bullets li {
            color: #555257 !important; /* Ορίζουμε το επιθυμητό χρώμα για το κείμενο της πρόσοψης */
            margin: 5px 0;
            font-size: 1.18em;
        }

        /* Πίσω πλευρά κάρτας */
        .custom-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transform: rotateY(180deg);
            padding: 20px;
            box-sizing: border-box;
            border: 2px solid #c9cccd;
        }

        .custom-card-back.header1 {
            background-color: #9F9690;
        }

        .custom-card-back.header2 {
            background-color: #716F72;
        }

        .custom-card-back.header3 {
            background-color: #676472;
        }

        /* Κεφαλίδες */
        .custom-header {
            width: 100%;
            height: 16%;
            vertical-align: middle;
            padding: 5px;
            text-align: center;
            color: white;
            font-size: 1.35em;
            font-weight: bold;
            border-radius: 10px 10px 0 0;
            position: absolute;
            top: 0;
            left: 0;
        }

        .custom-header1 {
            background-color: #9F9690;
        }

        .custom-header2 {
            background-color: #716F72;
        }

        .custom-header3 {
            background-color: #676472;
        }

        .custom-content h2 {
            font-size: 1.35em;
            font-weight: bold;
            color: #696969 !important; /* Χρώμα για το h2 */
            margin-bottom: 20px;
        }

        .custom-bullets {
            list-style: none;
            padding: 0; /* Αφαίρεση περιθωρίου */
            margin: 0;
            color: blue;
        }

        .custom-bullets li {
            margin: 5px 0;
        }

        /* Κείμενο πίσω πλευράς */
        .custom-back-text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: red !important;
            gap: 5px;
        }

        .custom-line {
            width: 70%;
            height: 1px;
            background-color: gray;
            margin: 0 auto;
        }

        /* Εικονίδιο περιστροφής */
        .rotate-icon {
            position: absolute;
            top: 10px; /* Απόσταση από το κάτω μέρος */
            right: 10px; /* Απόσταση από το δεξί μέρος */
            font-size: 1.5em; /* Μέγεθος εικονιδίου */
            color: #716f72!important; /* Χρώμα εικονιδίου */
            cursor: pointer; /* Δείκτης χεριού όταν περνάει από πάνω */
        }
 
/****************************************************************************************************
*Βαθμός δυσκολίας
*
****************************************************************************************************/
        .difficulty-state {  /*Είναι για τα εικονίδια που είναι στο χρώμα του κειμένου γεμάτα */
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            color:#d6d8db !important; /*εάν θέλουμε να ακουθεί το θέμα της πλατφόρμας var(--ck-color-base-border) !important; */
        }

        .difficulty-icon { /*Είναι για τα εικονίδια που είναι κενά */
            font-family: 'Font Awesome 6 Free';
            font-weight: 400;
            color:#d6d8db !important; /*εάν θέλουμε να ακουθεί το θέμα της πλατφόρμας var(--ck-color-base-border) !important; */
        }


/***************************************************************************************************************
*Αρχή περιορισμού mathjax
***************************************************************************************************************/
mjx-container.MathJax {pointer-events: none;}

/**Τέλος περιορισμού mathjax **/


/****************************************************************************************************
*Μορφοποίηση κώδικα Html
*
****************************************************************************************************/
.code-HTML {
    background-color: #2e2e2e; /* Σκοτεινό φόντο */
    color: #f8f8f2; /* Ανοιχτό κείμενο */
    padding: 15px;
    border-radius: 5px;
    overflow: auto; /* Για να εμφανίζεται scroll αν χρειαστεί */
    font-family: 'Courier New', Courier, monospace; /* Μονοδιάστατη γραμματοσειρά */
}

/* Χρώματα για τα tags μέσα στο div με κλάση code-HTML */
.code-HTML h1 { color: #ff79c6; } /* Ροζ για h1 */
.code-HTML h2 { color: #bd93f9; } /* Μωβ για h2 */
.code-HTML h3 { color: #50fa7b; } /* Πράσινο για h3 */
.code-HTML h4 { color: #ffb86c; } /* Πορτοκαλί για h4 */
.code-HTML h5 { color: #8be9fd; } /* Ανοιχτό μπλε για h5 */
.code-HTML h6 { color: #ff5555; } /* Κόκκινο για h6 */
.code-HTML p { color: #f8f8f2; } /* Ανοιχτό κείμενο για παραγράφους */
.code-HTML a { color: #8be9fd; } /* Ανοιχτό μπλε για συνδέσμους */
.code-HTML span { color: #f1fa8c; } /* Κίτρινο για span */
.code-HTML div { color: #f8f8f2; } /* Ανοιχτό κείμενο για div */
.code-HTML strong { color: #ff79c6; } /* Ροζ για έντονο κείμενο */
.code-HTML em { color: #50fa7b; } /* Πράσινο για πλάγιο κείμενο */
.code-HTML ul, .code-HTML ol { color: #f8f8f2; } /* Ανοιχτό κείμενο για λίστες */
.code-HTML li { color: #bd93f9; } /* Μωβ για στοιχεία λίστας */
.code-HTML blockquote { color: #ffb86c; } /* Πορτοκαλί για blockquote */
.code-HTML pre { color: #f8f8f2; } /* Ανοιχτό κείμενο για pre */
.code-HTML code { color: #66d9ef; } /* Χρώμα για inline κώδικα */
.code-HTML img { color: #f8f8f2; } /* Ανοιχτό κείμενο για εικόνες */
.code-HTML table { color: #f8f8f2; } /* Ανοιχτό κείμενο για πίνακες */
.code-HTML th { color: #ff5555; } /* Κόκκινο για κεφαλίδες πίνακα */
.code-HTML td { color: #f8f8f2; } /* Ανοιχτό κείμενο για κελιά πίνακα */


/****************************************************************************************************
*Μορφοποίηση Σχολίων
/*****************************************************************
/* Ρύθμιση για τις τελείες στο κάτω μέρος της λέξης που θα περιέχει σχόλιο */
.tooltip-t1-R_ {
  position: relative; /* Θέση σχετική για να τοποθετηθούν σωστά τα στοιχεία */
  display: inline-block; /* Εμφάνιση ως inline-block για να επιτρέπεται η χρήση του border */
  border-bottom: 1px dotted black; /* Διάστικτη γραμμή κάτω από το κείμενο */
}

/* Ρύθμιση για την εμφάνιση του μπαλονιού (σχολίου) */
.tooltip-t1-R_ .tooltip-t1-R_text {
  visibility: hidden; /* Αρχικά το μπαλόνι είναι κρυφό */
  width: 15vw; /* Πλάτος του μπαλονιού */
  background: rgba(35, 44, 59, 0.94); /* Χρώμα φόντου του μπαλονιού */
  color: #fff; /* Χρώμα κειμένου */
  text-align: left; /* Στοίχιση κειμένου αριστερά */
  border-radius: 4px; /* Στρογγυλεμένες γωνίες */
  padding: 20px; /* Εσωτερικό περιθώριο */
  position: absolute; /* Απόλυτη θέση για να τοποθετηθεί σωστά σε σχέση με το γονέα */
  z-index: 1; /* Ζωνοποίηση για να είναι πάνω από άλλα στοιχεία */
  top: -48px; /* Θέση από την κορυφή */
  left: 110%; /* Θέση από την αριστερή πλευρά */
}

/* Βέλος του μπαλονιού */
.tooltip-t1-R_ .tooltip-t1-R_text::after {
  content: ""; /* Δημιουργία ενός κεντρικού στοιχείου */
  position: absolute; /* Απόλυτη θέση για το βέλος */
  top: 50%; /* Κεντρική θέση κατακόρυφα */
  right: 100%; /* Θέση αριστερά του μπαλονιού */
  margin-top: -5px; /* Κεντράρισμα του βέλους */
  border-width: 5px; /* Πλάτος του βέλους */
  border-style: solid; /* Στυλ του βέλους */
  border-color: transparent black transparent transparent; /* Χρώμα του βέλους */
}

/* Εμφάνιση του μπαλονιού κατά την αιώρηση */
.tooltip-t1-R_:hover .tooltip-t1-R_text {
  visibility: visible; /* Ορατό κατά την αιώρηση */
}

/* Μορφοποίηση για αριστερή εμφάνιση */
.tooltip-t1-L_ {
  position: relative; /* Θέση σχετική */
  display: inline-block; /* Εμφάνιση ως inline-block */
  border-bottom: 1px dotted black; /* Διάστικτη γραμμή κάτω από το κείμενο */
}

.tooltip-t1-L_ .tooltip-t1-L_text {
  visibility: hidden; /* Αρχικά κρυφό */
  width: 15vw; /* Πλάτος του μπαλονιού */
  background: rgba(35, 44, 59, 0.94); /* Χρώμα φόντου */
  color: #fff; /* Χρώμα κειμένου */
  text-align: left; /* Στοίχιση κειμένου αριστερά */
  border-radius: 4px; /* Στρογγυλεμένες γωνίες */
  padding: 20px; /* Εσωτερικό περιθώριο */
  position: absolute; /* Απόλυτη θέση */
  z-index: 1; /* Ζωνοποίηση */
  top: -5px; /* Θέση από την κορυφή */
  right: 110%; /* Θέση δεξιά του μπαλονιού */
}

/* Βέλος του μπαλονιού */
.tooltip-t1-L_ .tooltip-t1-L_text::after {
  content: ""; /* Δημιουργία βέλους */
  position: absolute; /* Απόλυτη θέση */
  top: 50%; /* Κεντρική θέση κατακόρυφα */
  left: 100%; /* Θέση δεξιά του μπαλονιού */
  margin-top: -5px; /* Κεντράρισμα του βέλους */
    border-width: 5px; /* Πλάτος του βέλους */
  border-style: solid; /* Στυλ του βέλους */
  border-color: transparent transparent transparent black; /* Χρώμα του βέλους */
}

/* Εμφάνιση του μπαλονιού κατά την αιώρηση */
.tooltip-t1-L_:hover .tooltip-t1-L_text {
  visibility: visible; /* Ορατό κατά την αιώρηση */
}

/* Μορφοποίηση για επάνω από τη λέξη εμφάνιση */

.tooltip-t1-T_ {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip-t1-T_ .tooltip-t1-T_text {
  visibility: hidden;
  width: 250px;
  background:rgba(35, 44, 59, 0.94);
  color: #fff;
  text-align: left;
  border:1px solid #b2b2b2;
  border-radius: 4px;
  padding: 20px 20px;
  position: absolute;
  z-index: 500;
  bottom: 150%;
  left: 50%;
  margin-left: -150px;
}

.tooltip-t1-T_ .tooltip-t1-T_text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 7px;
  border-style: solid;
  border-color: #b2b2b2 transparent transparent transparent;
}

.tooltip-t1-T_:hover .tooltip-t1-T_text {
  visibility: visible;
}


/*****************************************************************
*Μορφοποίηση Σημειώσεων
******************************************************************/
.notice {
    padding: 15px;
    background-color: #fafafa;
    border-left: 6px solid #7f7f84;
    margin-bottom: 10px;
    font-style: italic;

}
.notice-sm {
    padding: 10px;
    font-size: 80%;
}
.notice-lg {
    padding: 35px;
    font-size: 120%;
}
.notice-success {
    border-color: #80D651;
    -webkit-box-shadow:0 5px 8px -6px rgba(128, 214, 81, 0.45);
    -moz-box-shadow:0 5px 8px -6px rgba(128, 214, 81, 0.45);
    box-shadow:0 5px 8px -6px rgba(128, 214, 81, 0.45);
}
.notice-success strong {
    color: #80D651;
    font-size:0.9rem;
}
.notice-info {
    border-color: #45ABCD;
    -webkit-box-shadow:0 5px 8px -6px rgba(69, 171, 205,  0.45);
    -moz-box-shadow:0 5px 8px -6px rgba(69, 171, 205,  0.45);
    box-shadow:0 5px 8px -6px rgba(69, 171, 205,  0.45);
}
.notice-info strong {
    color: #45ABCD;
    font-size:0.9rem;
}
.notice-warning {
    border-color: #FEAF20;
    -webkit-box-shadow:  0 5px 8px -6px rgba(254, 175, 32, 0.35);
    -moz-box-shadow:  0 5px 8px -6px rgba(254, 175, 32, 0.35);
    box-shadow:  0 5px 8px -6px rgba(254, 175, 32, 0.35);
}
.notice-warning strong {
    color: #FEAF20;
    font-size:0.9rem;
}
.notice-danger {
    border-color: #d73814;
    -webkit-box-shadow: 0 5px 8px -6px rgba(215, 56, 20, 0.25);
    -moz-box-shadow: 0 5px 8px -6px rgba(215, 56, 20, 0.25);
    box-shadow: 0 5px 8px -6px rgba(215, 56, 20, 0.25);
    
}
.notice-danger strong {
    color: #d73814;
    font-size:0.9rem;
}           

.promo {
    text-align: center;
    vertical-align: middle;
    color: #F5F5F5;
    background-color: #292929;
    border-bottom: 6px solid #FFFFFF;
    margin-bottom: 10px;
    -webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
       -moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
            box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
}

.promo a{color: orange; text-decoration: none;}
.promo a:hover{color: #80D651;}
    
.promo-lg {
    padding: 25px;
    font-size: large;
}

.promo-sm {
    padding: 5px;
    font-size:0.8em;
    padding-bottom: 40px;
} 

/*****************************************************************
* Μορφοποίηση tables - Βασικό CSS (από το παρεχόμενο)
******************************************************************/
.mb_table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 1rem;
  background-color: transparent;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  color: #333;
}

.mb_table th,
.mb_table td {
  padding: 0.75rem;
  vertical-align: middle;
  border-top: 1px solid #eceeef;
}

.mb_table thead th {
  vertical-align: middle;
  border-bottom: 2px solid #eceeef;
  background: #C0C0C0;
  font-size: 14px;
  color: #333;
  text-align: center;
  font-weight: 600;
}

.mb_table tbody + tbody {
  border-top: 2px solid #eceeef;
}

.mb_table .mb_table {
  background-color: #fff;
}

.mb_table-sm th,
.mb_table-sm td {
  padding: 0.3rem;
}

.mb_table-bordered {
  border: 1px solid #eceeef;
}

.mb_table-bordered th,
.mb_table-bordered td {
  border: 1px solid #eceeef;
}

.mb_table-bordered thead th,
.mb_table-bordered thead td {
  border-bottom-width: 2px;
}

.mb_table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(155, 155, 155, 0.06);
}

.mb_table-hover tbody tr {
  transition: background-color 0.2s ease-out;
}

.mb_table-hover tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.075);
}

/* Ειδικά στυλ για το τυπολόγιο ταλαντώσεων (προσαρμογές)
******************************************************************/
/* Μαθηματικοί τύποι */
.math-formula {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.1em;
  text-align: center;
  padding: 8px 5px;
  line-height: 1.4;
}

/* Επικεφαλίδα πίνακα */
.physics-table-header {
  text-align: center;
  margin: 20px 0 15px;
  font-family: Arial, sans-serif;
  color: #444;
  font-size: 1.5em;
  font-weight: bold;
}

/* Ανταποκριση σε κινητές συσκευές */
@media (max-width: 768px) {
  .mb_table th, 
  .mb_table td {
    padding: 0.5rem;
    font-size: 0.9em;
  }
  
  .math-formula {
    font-size: 0.95em;
    padding: 6px 3px;
  }
  
  .physics-table-header {
    font-size: 1.3em;
    margin: 15px 0 10px;
  }
}

/* Επιπλέον στυλ για ευελιξία (προαιρετικά)
******************************************************************/
/* Εναλλακτική επικεφαλίδα */
.alternate-thead th {
  background-color: #5a5a5a;
  color: white;
}

/* Πλαίσιο για ομάδες τύπων */
.formula-group {
  border-left: 4px solid #C0C0C0;
  padding-left: 10px;
  margin: 15px 0;
}

/* Επιπλέον στυλ για πίνακα ανατροφοδότησης βαθμών (προαιρετικά)
******************************************************************/
.performance-table {
  width: 100%;
  border-collapse: collapse;
}

.performance-table th,
.performance-table td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}

.performance-table th {
  background-color: #f2f2f2;
}

/************************************************************************************************************************
*Αποτροπή επιλογής κειμένου για αντιγραφή σε διάφορους browsers prcp
************************************************************************************************************************/
.preventcopy {
 -webkit-user-select: none; /*iOS Safari*/
 -webkit-user-select: none; /*Chrome/Safari/Opera*/
 -khtml-user-select: none; /*Konqueror*/
 -moz-user-select: none; /*Firefox*/
 -ms-user-select: none; /*Internet Explorer/Edge*/
 user-select: none; /*Non-prefixed version, currently not supported by any browser*/
}

/************************************************************************************************************************
*Αποτροπή επιλογής διακόπτη λήψης σε διάφορους browsers
************************************************************************************************************************/
/*iOS Safari*/ -webkit-user-select: none; 
/*Chrome/Safari/Opera*/  -khtml-user-select: none; 
/*Konqueror*/  -moz-user-select: none; 
/*Firefox*/  -ms-user-select: none; 
/*Internet Explorer/Edge*/  user-select: none; 
/*Non-prefixed version, currently not supported by any browser*/}
video::-webkit-media-controls { overflow: hidden !important; }
video::-webkit-media-controls-enclosure { width: calc(100% + 43px); margin-left: auto;} 
mjx-container.MathJax {pointer-events: none;}


/************************************************************************************************************************
*Χρώματολόγια eBook
************************************************************************************************************************\
/* Χρώματολόγιο No-1 (plesk theme) */
/* 1. Τίτλος κεφάλαιο σελίδας*/
.pgt-pl {
        float: left;
        width: 100%;
        background:#386CA9;
        color:#F0F0F0;
        padding:10px;
        /*font-family: sans-serif;*/
        font-size: 2em;
        text-align: center;
        border-bottom: 4px solid #d3d3d3;
        border-top:4px solid #d3d3d3;
}

/* 2. Κεφαλίδα ενότητα σελίδας*/
.pge-pl {    
		position: relative !important;
		width: 100% !important;
        text-align: center;
        background:#606D7A;
        color:#f0f0f0;
        font-weight: 300;
        border-top: 10px solid #f0f0f0;
        border-right: 2px solid #48535D;
        border-left: 2px solid #48535D;
        border-bottom: 2px solid #48535D;
        border-bottom-left-radius: 5px;
        border-radius: 0px;
        border-top-right-radius: 2px;
        padding:5px 8px;
        /*margin-top: 1.3em;*/
        margin-bottom:0.8em;
        font-family: sans-serif;
        font-size: 1.7em;        
}



/* ΔΟΚΙΜΑΣΤΙΚΟ */
/* Στυλ για τα difficulty spans */
.difficulty {
    font-size: .6em;
    font-weight: 600;
    padding: .3em;
    margin: .12em;
    display: inline-block;
}

/* Τα χρώματα που έχουμε ορίσει */
.very_easy {
    border-bottom: solid 4px #B6BFDE91;
    color: #BBBFCF;
}
.easy {
    border-bottom: solid 4px #7F97BFCC;
    color: #7F97BFCC;
}
.medium {
    border-bottom: solid 4px #576B8CD1;
    color: #576B8CD1;
}
.difficult {
    border-bottom: solid 4px #364358;
    color: #364358;
}
.very_difficult {
    border-bottom: solid 4px #1C232E;
    color: #1C232E;
}
.medium-activated {
    background: #7C899F;
    color: #fafafa;
}

/* Για τα τετράγωνα */
.difficulty-state,
.difficulty-icon {
    font-size: 1rem;
    transition: transform 0.2s ease;
}

.difficulty-state:hover,
.difficulty-icon:hover {
    transform: scale(1.05);
    cursor: default;
}

/* Notice styling */
.notice {
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    background-color: #e7f3ff;
    border-left: 6px solid #0d6efd;
    color: #084298;
}

.notice-info {
    background-color: #e7f3ff;
    border-color: #0d6efd;
}