:root {
	--background-selidas: rgb(240, 235, 248);
	--background-koumpiou: #0C6DB3;
	--background-koumpiou-hover: #193D5E;
	--background-koumpiou-active: #0C6DB3;
	--color-grammaton: white;
}
html, body {margin:0; padding:0; width:100%; background-color: var(--background-selidas); text-align:center; font-family: 'docs-Roboto', Helvetica, Arial, sans-serif;}
html {
    height: 100%;
	scrollbar-width: none;
	color: var(--color-grammaton);
}

body::-webkit-scrollbar{
	display: none;
}

body {
    min-height: 100%;
}

#container {
	width:90%;
	height:95%;
    margin: auto;
	text-align:center;
	padding-top:30px;
}

.button {
	height:48%;
	display: flex;
    align-items: center; /* Κάθετη στοίχιση */
    justify-content: center; /* Οριζόντια στοίχιση */
	background-color: var(--background-koumpiou);
	-webkit-border-radius: 15px;
    -webkit-box-shadow:2px 2px 3px lightgray,-2px -2px 3px lightgray;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-bottom:20px;
	font-size:3em;
	padding:5px;
}

.button:hover{
	background-color: var(--background-koumpiou-hover);
	cursor: pointer;
}

.button:active{
	background-color: var(--background-koumpiou-active);
}

#buttonspay {
	width:100%;
	height:48%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;	
}


#comments {
	color:black;
	vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 120px;
	cursor:pointer;
	margin-bottom:10px;
}

#comments img {
    width: 100px;
    height: 100px;
}
#comments span {
    display: block;
}

.swal2-confirm {
	background-color: var(--background-koumpiou) !important;
	box-shadow: var(--background-koumpiou-hover) !important;
}