@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');



:root{

    --color-primary: #111e88;

    --color-danger: #ff6b16;

    --color-danger2: #f80000;

    --color-success: #41f1b6;

    --color-success2: #0bcd6c;

    --color-warning: #ffbb55;

    --color-white: #fff;

    --color-info-dark: #7d8da1;

    --color-info-light: #ffffff;

    --color-dark: #363949;

    --color-shadow: #626264;

    --color-light: rgba(124, 136, 243, 0.808);

    --color-primary-variant: #7380ec;

    --color-dark-variant: #677483;

    --color-background: #f6f6f9;



    --card-border0radius: 2rem;

    --card-border1radius: 3rem;

    --card-border2radius: 4rem;

    --card-border3radius: 5rem;



    --card-padding: 1.8rem;

    --padding-1: 1.2rem;



    --box-shadow: 0 2rem 3rem var(--color-dark);

    --box-shadowlight: 0 2rem 3rem var(--color-info-dark);

    --box-shadow2: 0 1.5rem 4rem 0.01rem var(--color-shadow);

    

}



*{

    margin: 0;

    padding: 0;

    outline: 0;

    appearance: none;

    border: 0;

    text-decoration: none;

    list-style: none;

    box-sizing: border-box;

}



::-webkit-scrollbar {

    width: 10px;

    

  }

  

  /* Track */

  ::-webkit-scrollbar-track {

    box-shadow: inset 0 0 5px grey; 

    border-radius: 10px;

    margin-bottom: 3rem;

    margin-top: 3rem; 

    

  }

   

  /* Handle */

  ::-webkit-scrollbar-thumb {

    background: var(--color-primary-variant); 

    border-radius: 10px;

  }

  

  /* Handle on hover */

  ::-webkit-scrollbar-thumb:hover {

    background: var(--color-primary); 

  }



html{

    font-size: 11px;

}



body{

    width: 100vw;

    height: 100vh;

    font-family: poppins, sans-serif;

    font-size: 0.88rem;

    background: var(--color-background);

    user-select: none;

    overflow-x: hidden;

}



.container{

    display: grid;

    width: 100%;

    height: 100%;

    /* margin: 0 auto; */

    padding-bottom: 10%;

    gap: 1.8rem;

    grid-template-columns: 14rem auto ;

    padding-top: 1rem;

    overflow: hidden;

}



a{

    color: var(--color-dark);

}



img{

    display: block;

    width: 100%;

}



h1{

    font-weight: 800;

    font-size: 1.8rem;

}



h2{

    font-size: 1.4rem;

}



h3{

    font-size: 1rem;

}



h4{

    font-size: 0.8rem;

}



h5{

    font-size: 0.77rem

}



small{

    font-size: 0.75rem;

}



.timeDuration{

    max-width:60px; 

    text-align: center;

}



.priceInput{

    max-width: 65px;

    text-align: center;

}



button{

    margin-top: 1rem;

    min-width: 7rem;

    background-color: var(--color-primary-variant);

    color: white;

    padding-left: 1rem;

    padding-right: 1rem;

    padding-top: 0.7rem;

    padding-bottom: 0.7rem;

    border: 0.2rem solid var(--color-dark-variant);

    border-radius: 1rem;

    box-shadow: 0 0.5rem 1rem 0.1rem var(--color-info-dark);

    font-size:small;

    font-weight: 800;

    cursor: pointer;

    transition: background-color 300ms ease-in-out,border-color 300ms ease-in-out;

}



button:disabled{

    background-color: var(--color-info-dark);

}



button:hover{

    background-color: #b6bcf8;

    border-color: #b6bcf8;

}



input, textarea{

    border: 1px solid var(--color-dark-variant);

    border-radius: 1rem;

    margin-left: 1rem;

    margin-right: 1rem;

    padding: 0.5rem;

    max-width: 30rem;

}



.panel-item *{

    vertical-align: top;

}



input[type="checkbox"]{

    width: 1rem;

    height: 1rem;

}



span[haslabe=true]::before{

    content: attr(label);

}



select{

    border: 1px solid var(--color-dark-variant);

    border-radius: 1rem;

    margin-left: 1rem;

    margin-right: 1rem;

    padding: 0.5rem;

    min-width: 17rem;

    max-width: 30rem;

    max-height: 4rem;

    font-weight: 500;

    background-image:url(./src/img/expand.png);

    background-repeat: no-repeat;

    background-position-x: right;

    background-size: contain;

    cursor: pointer;

}







.label-before::before{

    content: attr(label);

    color: var(--color-dark);

    font-weight: 500;

}



.searchbar{

    background-image:url(./src/img/searchicon.png);

    background-repeat: no-repeat;

    background-position: right center;

    background-size: 22px;

    background-position-x: 98%;

    min-width: 20rem;

}



option{

    text-align: center;

}







.profile-photo{

    width: 2.8rem;

    height: 2.8rem;

    border-radius: 50%;

    overflow: hidden;

}



.text-muted{

    color: var(--color-info-dark);

}



p{

    color: var(--color-dark-variant);

}



b{

    color: var(--color-dark);

}



.primary{

    color: var(--color-primary);

}



.danger{

    color: var(--color-danger2);

    border-color: var(--color-danger2);

}



.success{

    color: var(--color-success);

}



.warning{

    color: var(--color-warning);

}



aside{

    /* height: 100%; */

    margin-bottom: 2rem;

    background: rgb(243, 243, 243);

    box-shadow: var(--box-shadow);

    border-top-right-radius: 2rem;

    border-bottom-right-radius: 2rem;

}



[onclick]{

    cursor: pointer;

}



aside .top{

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 1.4rem;

    color: #3d3d3d;

}



aside .logo{

    display: flex;

    gap: 0.4rem;

}



aside .logo img{

    width: 4rem;

    height: 4rem;

}





aside .sidebar{

    display: flex;

    flex-direction: column;

    height: 86vh;

    position: relative;

    top: 3rem;

}



aside h3{

    font-weight: 500;

}



aside .sidebar a{

    display: flex;

    color: #3d3d3d;

    margin-left: 2rem;

    gap: 1rem;

    align-items: center;

    position: relative;

    height: 3.7rem;

    transition: all 300ms ease;

}



aside .sidebar a span{

    font-size: 1.6rem;

    transition: all 300ms ease;

}



aside .sidebar a:last-child{

    position: absolute;

    bottom: 5rem;

    width: 100%;

}



aside .sidebar a.active{

    background: var(--color-light);

    color: white;

    margin-left: 0;

}



aside .sidebar a.active::before{

    content: "";

    width: 8px;

    height: 100%;

    background: var(--color-primary);

}





aside .sidebar a.active span{

    color: white;

    margin-left: calc(1rem - 3px);

}



aside .sidebar a:hover{

    color: white;

    margin-left: 0;

    background-color: var(--color-light);

}



aside .sidebar a:hover::before{

    content: "";

    width: 8px;

    height: 100%;

    background-color: var(--color-light);

}



aside .sidebar a:hover span{

    color: white;

    margin-left: 1rem;

}



#main-content{

    margin: 1rem;

    margin-bottom: 3rem;

    padding: 2rem;

    text-align: center;

    align-items: center;

    background-color: var(--color-white);

    border-style: solid 5px var(--color-dark);

    box-shadow: var(--box-shadow2);

    border-radius: var(--card-border0radius);

    overflow: auto;

    

}



.pagetitle{

    padding: 1rem;

    text-align: center;

}





/*  Log in css */





.conteiner-login {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -webkit-justify-content: center;

    -ms-flex-pack: center;

    justify-content: center;

    height: 97%;

}



.conteiner-login .window {

    z-index: 100;

    color: #fff;

    position: relative;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-flex-flow: column;

    -ms-flex-flow: column;

    flex-flow: column;

    box-shadow: 0 8rem 20rem var(--color-dark);

    height: 500px;

    width: 360px;

    background: var(--color-background);

    border: 5px solid var(--color-dark);

    border-radius: var(--card-border0radius);

}





.conteiner-login .content {

    padding-left: 25px;

    padding-right: 25px;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-flex-flow: column;

    -ms-flex-flow: column;

    flex-flow: column;

    z-index: 5;

}



.conteiner-login .login-logo {

    margin-top: 2rem;

    text-align: center;

}



.conteiner-login .login {

    font-weight: 200;

    margin-top: 2rem;

    text-align: center;

    font-size: 2.5rem;

    letter-spacing: 0px;

    letter-spacing: 0.05rem;

}



.login h1{

    text-align: center;

    font-size: xx-large;

    font-weight: 800;

    color: var(--color-primary-variant);

    border-bottom: 2px solid var(--color-dark);

}



.login form{

    align-items: center;

    font-size: large;

    padding: 2rem;

}



.login label{

    display: flex;

    font-weight: 800;

    color: var(--color-dark-variant);

    justify-content: center;

}



.login input{

    width: 100%;

    margin: 0.2rem;

    border: 4px solid var(--color-primary-variant);

    border-radius: var(--card-border0radius);

    padding: 0.7rem;

}



.loginbtn{

    color: var(--color-info-light);

    background-color: var(--color-primary-variant);

    font-size: larger;

    font-weight: 700;

}



.login ::placeholder {

    text-align: center;

    font-size: large;

    font-weight: 600;

    padding: 4rem;

}



.copyright{

    background: var(--color-primary-variant);

    text-align: center;

    font-size: medium;

    font-weight: 600;

    color: white;

    z-index: 1;

    position: fixed;

    bottom: 0;

    width: 100%;

    border-top-right-radius: 1000rem;

    border-top-left-radius: 1000rem;

}



.loginerror{

    color: white;

    font-size: 1.3rem;

    background-color: var(--color-danger);

    width: 100%;

    text-align: center;

    padding: 0.2rem;

    border-top-right-radius: 1.5rem;

    border-top-left-radius: 1.5rem;

}



/* end of login





start of right side */



.rightside{

    margin-bottom: 2rem;

    background: rgb(243, 243, 243);

    align-items: center;

    text-align: center;

    padding-top: 9rem ;

    box-shadow: var(--box-shadow);

    border-top-left-radius: 2rem;

    border-bottom-left-radius: 2rem;

}



.rightside span{

    margin-top: 1.2rem;

    font-size: 2.4rem;

    color: #3d3d3d;

}



.hovertext {

    position: relative;

}

  

.hovertext:before {

    content: attr(data-hover);

    visibility: hidden;

    opacity: 0;

    width: 80px;

    background-color: black;

    color: #fff;

    text-align: center;

    border-radius: 5px;

    padding: 5px 0;

    transition: opacity 0.5s ease-in-out;

  

    position: absolute;

    z-index: 1;

    right: 0;

    top: 110%;

}

  

.hovertext:hover:before {

    opacity: 1;

    visibility: visible;

}



   td, th {

    border: 1px solid #dddddd;

    text-align: left;

    padding: 8px;

}

  

tr:nth-child(even) {

    background-color: #dddddd;

}



.timetables a{

    cursor: pointer;

}



.timetables{

    padding: 1rem;

    margin: 1rem;

    display: grid;

    justify-content: center;

    grid-template-columns: auto auto auto;

    grid-gap: 2rem;

}



.timetableitem h2{

    margin-left: 1rem;

    margin-right: 1rem;

}



.editabletable td[contenteditable="true"] {

    background-color: yellow;

}



.editing{

    background-color: yellow;

}



.editabletable .eddited{

    background-color: cyan;

}



table{

    font-family: arial, sans-serif;

    padding: 1rem;

    border-collapse: collapse;

    width: 95%;

    text-align: center;

    align-items: center;

    margin-left: auto;

    margin-right: auto;

    border:2px solid #363949;

    box-shadow: var(--box-shadowlight);

}



.table{

    padding: 1rem;

    text-align: center;

    align-items: center;

}

th{

    text-align: center;

    padding: 0.1rem;

    font-weight: 800;

    font-size:medium;

    border:2px solid #363949;

    background: var(--color-primary-variant);

    color: white;

}



tbody td{

    text-align: center;

    font-size: medium;

    font-weight: 600;

    border:2px solid #363949 ;

}



.hidden{

    display: none;

    visibility: hidden;

}





.show{

    display: block;

}



.panel{



    border: 3px solid var(--color-primary-variant);

    padding: 1rem;

    margin: 1rem;

    border-radius: 2rem;

    font-size: medium;

    font-weight: 300;

    height:max-content;

}



.panel .panel-item-title{

    margin-bottom: 1rem;

    padding-bottom: 1.5rem;

    border-bottom: 2px solid var(--color-dark-variant);

    font-size: large;

}



.timerclock{

    text-align: right;

    padding-right: 3rem;

    font-size: 1.8rem;

}



.panel-item{

    padding: 2.5rem;

    padding-top: 0.2rem;

    margin-bottom: 1rem;

    border-bottom: 2px solid var(--color-dark-variant);

    line-height: 2.6;

}



.panel-item:last-child{

    border-bottom: none;

}



.panel-item .searchbar{

    margin-right: 70%;

    width: 25%;

    margin-bottom: 1rem;

}



.panel-tabs-header-2{

    height: 4rem;

    display: flex;

    align-items: center;  

    width: 100%; 

    margin: 0.5rem;

    margin-bottom: 2rem;

    padding-left: 30%; 

    padding-right: 30%; 

}



.panel-tabs-header-2 > a {

    width: calc(100% / 2);

    text-align: center;

    color: var(--color-info-dark);

    cursor: pointer;



}



.panel-tabs-header-2 > a.active {

    background-color: var(--color-primary-variant);

    color: white;

    padding: 1rem;

    margin: 1rem;

    box-shadow: 1px 0.1rem 2rem var(--color-dark-variant);

    border-radius: 2rem;

}



.panel-tabs-header-2 > a:hover {

    background-color: var(--color-primary-variant);

    color: white;

    padding: 1rem;

    box-shadow: 1px 0.1rem 2rem var(--color-dark-variant);

    border-radius: 2rem;

    transition: 100ms ease-in-out 0ms;

}



.panel-tabs-header-2 > a.active:hover {

    background-color: var(--color-light);

    transition: 100ms ease-in-out 0ms;

}



.panel-tabs-body > div{

    display: none;

    opacity: 0;

    margin-top: 5px;

    transform: scale(0.9);

    transition: opacity 5000ms ease-in-out 0ms, transform 500ms ease-in-out 0ms;

}



.panel-tabs-body{

    border: 5px solid var(--color-primary-variant);

    padding: 2rem;

}



.panel-tabs-body > div.active{

    opacity: 1;

    display:block;

    transform: scale(1);

    margin-top: 0px;

}



.panel-tabs-body .panel-form{

    display: grid;

    width: 100%;

    padding: 1rem;

    text-align: center;

    gap: 0.5rem;

    grid-template-columns:25%  25% 25% auto;

}



.panel .required::before{

    content: "* ";

    color: red;

    font-weight: 600;

}



.panel-tabs-body p{

    text-align: left;

    color: red;

    font-size: smaller;

}



.search-panel4{

    text-align: left;

    display: grid;

    grid-template-columns:25% 25% 10% auto;

}







/* spinner style classes */



@keyframes spinner {

    0% {

      transform: translate3d(-50%, -50%, 0) rotate(0deg);

    }

    100% {

      transform: translate3d(-50%, -50%, 0) rotate(360deg);

    }

  }

  .spin::before {

    animation: 1.5s linear infinite spinner;

    animation-play-state: inherit;

    border: solid 15px #ffffff;

    border-bottom-color: var(--color-primary-variant);

    border-radius: 50%;

    content: "";

    height: 125px;

    width: 125px;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate3d(-50%, -50%, 0);

    will-change: transform;

    z-index: 3;

  }



  .spinbackground{

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgb(80 78 78 / 70%);

    z-index: 2;

  }





/* spinner style classes */





/* checkbox style classes */





/* The checkbox-container */

.checkbox-container {

    display: block;

    position: relative;

    margin-bottom: 12px;

    font-weight: 500;

    margin-right: auto;

    color: var(--color-dark);

    cursor: pointer;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

}

  

  /* Hide the browser's default checkbox */

.checkbox-container input {

position: absolute;

opacity: 0;

cursor: pointer;

height: 0;

width: 0;

}

  

  /* Create a custom checkbox */

.checkmark {

position: absolute;

top: 0;

left: auto;

margin-left: 1rem;

height: 25px;

width: 25px;

background-color: #eee;

}

  

  /* On mouse-over, add a grey background color */

.checkbox-container:hover input ~ .checkmark {

background-color: #ccc;

}

  

  /* When the checkbox is checked, add a blue background */

.checkbox-container input:checked ~ .checkmark {

background-color: var(--color-primary-variant);

}

  

  /* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {

content: "";

position: absolute;

display: none;

}

  

  /* Show the checkmark when checked */

.checkbox-container input:checked ~ .checkmark:after {

display: block;

}

  

  /* Style the checkmark/indicator */

.checkbox-container .checkmark:after {

left: 9px;

top: 5px;

width: 5px;

height: 10px;

border: solid white;

border-width: 0 3px 3px 0;

-webkit-transform: rotate(45deg);

-ms-transform: rotate(45deg);

transform: rotate(45deg);

}



    /* checkbox style classes */



    /* modal style classes */



.modal {

    display: none; /* Hidden by default */

    position: fixed; /* Stay in place */

    z-index: 1; /* Sit on top */

    padding-top: 1rem; /* Location of the box */

    padding-bottom: 4rem;

    left: 0;

    top: 0;

    width: 100%; /* Full width */

    height: 100%; /* Full height */

    overflow: auto; /* Enable scroll if needed */

    background-color: rgb(0,0,0); /* Fallback color */

    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

    opacity: 0;

    transition: all 250ms ease-in-out 0ms;



}

  

  /* Modal Content */    

.modal-content {

    margin: auto;

    padding: 2rem;

    align-items: center;

    background-color: var(--color-white);

    border-style: solid 5px var(--color-dark);

    box-shadow: var(--box-shadow2);

    border-radius: var(--card-border0radius);

    overflow: auto;

    width: 95%;

    max-height: 100%;

    appearance: revert;

}



.modal-content .panel input {

    appearance: revert;

}



.modal-content .panel input[type="checkbox"]{

    width: 1.4rem;

    height: 1.4rem;

}



.title{

    text-align: center;

    font-size: 3rem;

    margin-bottom: 1rem;

    border-bottom: solid 2px black;

}

  

  /* The Close Button */

.modalclose {

    position: fixed;

    color: var(--color-info-dark);

    font-size: 4rem;

    font-weight: bold;

    right: 5.6rem;

    top: 0rem;

}

  

.modalclose:hover,

.modalclose:focus {

color: #000;

text-decoration: none;

cursor: pointer;

}



#createrouteinfoitem{

    display: grid;

    grid-template-columns: 33% 33% auto;

    align-items: center;

    text-align: center;

    font-weight: 600;

}





.busstopconteiner{

    display: grid;

    grid-template-columns: 59% auto;

    text-align: center;

    gap: 1rem;

}



.busstopconteiner table tbody * {

    font-size: 1.4rem;

}



.toolbox{

    display: flex;

    /* grid-auto-flow: column; */

    padding: 0.5rem;

    border-radius: 1rem;

    background-color: #e3e3e3;

    flex-shrink: 0;

    gap: 0.5rem;

    align-items: center;

    align-content: center;

    justify-content: center;

}



.toolbox div{

    padding: 0.5rem;

}



.toolbox .searchbar{

    margin-right: unset;

    margin-bottom: unset;

}





.toolbox span{

    cursor: pointer;

    max-width: max-content;

}



.toolbox select{

    text-align: left;

}

.toolbox option{

    text-align: left;

}



#routeselect option,#newrouteselect option{

    text-align: left;

}





.newbusstopheader{

    display: grid;

    grid-template-columns: auto;

    column-gap: 1rem;

    grid-auto-flow: column;

    padding-top: 0.5rem;

    padding-bottom: 0.5rem;

}





.newbusstop{

    padding: 1rem;

    margin: 1rem;

    background-color: white;

    border: 0.2rem solid var(--color-dark);

    border-radius: 1rem;

    width: -webkit-fill-available;

}



.newbusstop p{

    color: var(--color-primary-variant);

    font-weight: 600;

}



.newbusstop p::before{

    content: attr(label);

    color: black;

    font-weight: 400;

}



.newbusstopinputs{

    display: grid;

    grid-template-rows: auto;

    grid-auto-flow: row;

    gap: 0.5rem;

    text-align: left;

    padding: 1rem;

}

.newbusstopinputs span:first-child input:first-child{

    max-width: 9rem;

}

.newbusstopinputs span:first-child::after{

    content: attr(timebefore);

}

.newbusstopinputs span:last-child input:last-child {

    width: 100%;

}



.routebusstoplist {

    border-right: 5px solid var(--color-primary-variant);

}



.newroutebusstops{

    background-color: lightgray;

    padding: 0.7rem;

    border: 5px outset var(--color-primary-variant);

    border-radius: 1rem;

    margin: 1rem;

}





.newbusstopdelete {

    height: 0rem;

    position: sticky;

    width: 0rem;

    left: 85rem;

    font-size: 2.7rem;

    cursor: pointer;

}





.newbusstopdir input[type=checkbox]{

    background-color: var(--color-primary-variant);

    appearance: none;

    cursor: pointer;

    border-radius: 0.5rem;

    width: 8rem !important;    

    height: 2.5rem !important;

    text-align: center;

    align-content: center;

    transition: all 500ms ease-in-out 0ms;

}



.newbusstopdir input[type=checkbox]::before{

    content: "Μετάβαση";

    font-weight: 600;

}



.newbusstopdir input[type=checkbox]:checked::before{

    content: "Επιστροφή";

    font-weight: 600;

}



.newbusstopdir input[type=checkbox]:checked{

    background-color: var(--color-success);

}



.newbusstopoutline{

    display: flex;

}



.newbusstopoutline::before {

    content: attr(newbusstopid);

    color: red;

    font-size: 2rem;

    font-weight: 600;

    position: relative;

    background-color: white;

    text-align: center;

    align-self: center;

    padding: 0.5rem;

    margin-inline: -8px;

    margin-left: 0.05rem;

    border: 2px solid var(--color-dark);

    border-radius: 3rem;

}



.busstopsaddbtn{

    font-size: xx-large !important;

    background-color: white;

    border: 2px double var(--color-dark);

    border-radius: 2rem;

    width: -webkit-fill-available;

    box-shadow: 0 3px 6px var(--color-shadow);

    max-width: 9rem;

    cursor: pointer;

}

    /* modal style classes */



/* Gid Layout Gia ta leoforia */



.radiopanel{

    display: grid;

    grid-template-columns: auto auto auto auto auto;

    padding: 10px;

}



.radiopanel p {

    font-size:medium

}



.small-panel{

    display: grid;

    grid-template-columns: auto auto auto auto auto;

    padding: 10px;

}



.small-panel p {

    font-size:medium

}



.radioitem{

    background-color: #dddfe1;

    border-radius: 2rem;

    padding: 20px;

    margin: 1rem;

    font-size: 30px;

    text-align: center;

    cursor: pointer;

}



.small-panel-item{

    background-color: #dddfe1;

    border-radius: 2rem;

    padding: 20px;

    margin: 1rem;

    font-size: 30px;

    text-align: center;

    cursor: pointer;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

}



.small-panel-item img{

    max-width: 100px;

}



.radioselected{

    background-color: #0bcd6c;

}





.radioitem img{

    max-height: 70px;

    margin-left: auto;

    margin-right: auto;

    width: auto;

}







.tab{

    margin: 1rem;

    padding: 1rem;

    display: grid;

    grid-template-columns: auto auto auto auto auto auto;

    grid-gap: 1rem;

    justify-content: center;

    background: rgb(214, 213, 213);

    border-radius: 1rem;

    border: solid 1px rgb(37, 177, 241);

}



.tab button.active {

    background-color: #00bef7;

  }



.notification{

    margin-bottom: 1rem;

    font-size: medium;

}



.closesidepanel{

    display: none;

}



.mobilemenu{

    display: none;

}



.tablinks{

    padding: 1.5rem;

    font-size: 2rem;

    margin: 1rem;

}



.tabdefault{

    display: none;

}



/* to menou gia tin kataxorisi ton dematon */

#manualrecordlist{

    padding: 1rem;

    display: grid;

    grid-template-rows: auto auto auto;

    grid-gap: 2rem;

}



#manualrecordlist h3{

    font-size: xxx-large;

}



#manualrecordlist span{

    font-size: 9rem;

}



#manualrecordlist a{

    background-color: var(--color-primary-variant);

    color: white;

    border: solid 2px black;

    border-radius: 2rem;

    padding: 1rem;

}



#manualrecordlist a:hover{

    background-color: var(--color-light);

}



.map{

    height: 400px;

    width: 100%;

}



.modal-map{

    margin-top: 3rem;

}



.success-message {

    color: white;

    background-color: var(--color-success);

    border: 1px solid var(--color-success2);

    padding: 1rem;

    border-radius: 1.5rem;

    margin: 1rem 0;

    font-weight: 600;

}



/* Error message box */

.error-message {

    color: darkred;

    background-color: var(--color-danger);

    border: 1px solid var(--color-danger2);

    padding: 1rem;

    border-radius: 1.5rem;

    margin: 1rem 0;

    font-weight: 600;

}



.timeerror{

    background-color: var(--color-danger2) !important;

}





@media screen and (min-width: 1300px) and (max-width: 1720px){

    .staffitem{

        max-width: 20rem;

    }

    .staffpanel{

        grid-template-columns: auto auto auto auto;

    }

}



@media screen and (min-width: 1100px) and (max-width: 1300px){

    .staffitem{

        max-width: 20rem;

    }

    .staffpanel{

        grid-template-columns: auto auto auto ;

    }

}





/* Styles for the loading screen */

.loading-screen {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(255, 255, 255, 0.8);

    display: none;

    justify-content: center;

    align-items: center;

    z-index: 9999; /* Ensure it is on top of other elements */

}



/* Styles for the spinner */

.spinner {

    border: 16px solid #f3f3f3; /* Light grey */

    border-top: 16px solid #3498db; /* Blue */

    border-radius: 50%;

    width: 120px;

    height: 120px;

    animation: spin 2s linear infinite;

}



/* Animation for the spinner */

@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}





.media-controls {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 5rem;

}



.media-controls span{

    font-size: 5rem;

}



.volumebar {

    width: 150px;

    margin-left: 10px;

    margin: 0;

    padding: 0;

}



.small-panel-item.active{

    background-color: #00bef7;

}



.small-panel-item:hover{

    background-color: #087ca0;

}