/*accesibility button*/

#accessibility-button{
    cursor: pointer !important;
  padding: 0;
  font-size: 1.2rem;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  overflow: hidden;
  border: none;
  background: transparent;
  transition:transform 0.2s ease;
  
   
}
#accessibility-menu {
  border: 1px solid #ccc;
  padding: 1rem;
  background-color:#e1e8ed;
  display: none; 
  width:400px; 
  border-radius:10%;
  margin:0;
  position:relative;
  height: 400px;
}

#accessibility-menu button{
    height:110px;
    font-weight: bold;
    width:110px;
    font-size:inherit;
    border-color: #222;
    border-radius:10%;
    margin: bottom 1rem;
    background-color: white;
    margin-top:1px;
    transition:background-color 0.4s ease;
  

  }
    #accessibility-button img{
    top:0;
    left:0;
    height:100%;
    width:100%;
  }
#accessibility-button img:hover{
transform:scale(1.2);
}
#accessibility-menu button:hover{
  border-color:blue;
  background-color:grey;
}
.accessibility-wrapper {
  position: relative; 
  display: inline-block;
  margin-left: 0; 
  margin-top: 100px;
}.accesibility-pos{
  position:fixed;
  bottom:1vh;
  right:1vw;
  z-index:100000;
}

.message-bar {
  position: absolute;
  top: -47%!important;
  left: -100%!important;
  transform: translateY(-50%);
  background-color: #001028 ;
  color: white;
  padding: 10px 15px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 17px!important;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  text-align: center;
  z-index: 100;
  width: 160px;
  height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  transition:transform 0.2 ease;
}


.accessibility-wrapper:hover .message-bar {
  visibility: visible !important;

}


.message-bar.hidden {
  visibility: hidden;
}



 /*Button css*/
   /*Font-SIZE*/ 





body.large-font p{
  line-height:1.3;
}


/*Paragraph-Gap*/
body.paragraphgap1 *:not(button){
  letter-spacing: 0.2em !important;
  word-spacing: 0.3em !important;

}
body.paragraphgap2 *:not(button) {
  letter-spacing: 0.5em !important;
  word-spacing: 0.6em !important;
}
/*Line-height*/
body.lined1 *:not(button){
  line-height: 1.8 !important;

}
body.lined2 *:not(button) {
  line-height: 2.4 !important;
}
/*Dyslexia friendly*/
body.dysl1 *{
  font-family: 'OpenDyslexic', sans-serif;
}
body.dysl2 *{
  font-family: 'Verdana', sans-serif;
}

/*Text allignment*/
body.left *:not(button){
  text-align: left!important;
}
body.right *:not(button){
  text-align:right!important;
}
body.center *:not(button){
  text-align:center!important;
}
body.fullwidth *:not(button){
  text-align: justify!important;
}

/*Links*/
body.link-1 a{

  color:yellow;
  background-color:black;
}
/*Image hiding*/
body.image-1 img { display:none !important; }
#accessibility-button img { display:block !important; }



#moving-mask{
  position: fixed;
  left: 0;
  width: 100%;
  height: 100px; /* ύψος παράθυρου ανάγνωσης */
  border-top: 4px solid blue;
  border-bottom: 4px solid orange;
  background: rgba(255, 255, 255, 0.6);
  pointer-events: none;
  z-index: 9999;
  transform: translateY(0);
  display: none;
  
}
body.bigpointer {
  cursor: none!important;
}

#custom-pointer {
 position: fixed;
  width: 30px;
  height: 30px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.7);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  display: none;
}
/*Tέλος inclusivity button*/


/*closing window*/

.styled-closing {
  height: 10px !important;
  width: 10px !important;
  border-radius: 100% !important;
  position: absolute;
  top: 6.6px;
  right: 10px;
  background-color: black;
  opacity: 1; /* Εξουδετερώνει την ημιδιαφάνεια του Bootstrap */
  transition:transform 0.2s ease;
}

.styled-button2{
 margin-bottom:1rem!important;
 background-color:white!important;
height: 95.7px !important;
  width: 93.4px !important;
 border-color:black!important;
 border-radius:10%!important;
 margin-top:1px!important;
 opacity: 1 !important;
 border: 2px solid black;
}
.styled-button2:hover{
 border-color:blue!important;
 background-color:grey!important;
}

.styled-closing:hover{
  transform:scaleY(1.1);
}