.container2 { display: flex; justify-content: space-between; width: 100%; } .box { flex: 1; margin: 0 5px; text-align: center; padding: 10px; background-color: lightgrey; } .displayNone { display: none !important; } .displayBlock { display: block; } #SwimmingPoolTitle, #PoolTitle, #PoloTitle { clear: both; display: flex; flex-direction: column; cursor: pointer; } .LineGreen { width: 30px; height: 30px; background-color: lightgreen; border: 2px solid white; cursor: pointer; /*padding: 5px;*/ } .LineYellow { width: 30px; background-color: #f5e6ab; padding: 5px; } .LineRed { width: 30px; height: 30px; background-color: #e65054; border: 2px solid white; cursor: pointer; /*padding: 5px;*/ } #VerticalContainer { display: flex; justify-content: center; align-items: center; cursor: pointer; } .PoolLine { margin-right: 2px; margin-bottom: 2px; } .PoloLine { margin-right: 2px; margin-bottom: 2px; } .SwimmingPoolLine { margin-right: 2px; margin-bottom: 2px; } td.in-range:not(.end-date) { background-color: #c8e4f1 !important; } .hide { display: none; } .timeSelectBox { display: inline-block; width: 150px; margin: 0 10px 0 0; vertical-align: top; border: 1px silver solid; padding: 5px 10px; } input#date-range { padding: 0 10px; } .time_slider { display: none !important; height: 0px !important; } .butSetDefault { text-decoration: none; text-transform: uppercase; font-weight: bold; margin: 0em 1em; padding: 0.6em 0.7em; display: inline-block; text-align: center; cursor: pointer; color: white; background-color: red; border: 1px solid transparent; } /* hidden checkbox */ .hidden-checkbox { display: none; } .custom-checkbox-label { display: inline-block; width: 30px; height: 30px; background-color: #e65054; /* Kikapcsolt állapot (piros) */ border: 2px solid white; cursor: pointer; transition: background-color 0.3s ease; } .hidden-checkbox:checked + .custom-checkbox-label { background-color: #4caf50; /* Bekapcsolt állapot (zöld) */ }