* { box-sizing: border-box; }
body { font-family: 'Helvetica', 'Arial', sans-serif; font-size: 16px; margin: 0; background-color: darkred;  display: block; opacity: 0; transition: opacity 0s; -webkit-transition: opacity 0s;
 }
@media print, screen and (min-width: 480px) { 
	body { margin:10px 10px auto 10px; } 
}

.line { height: 50px; background-color: red; position: static;}

button { font-size: 16px; cursor: pointer; border: 0; transition: all ease 0.5s; }

input, select, textarea { width:100%; border: 0; padding: 5px 10px; font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif; font-size: 16px; }
select { fftext-align:center; }
textarea { height:auto; }

.login-error {  color: red; font-size: 18px; font-weight: 600; text-align: center; margin-left:auto; padding: 10px 20px;}
.cont-login { max-width:480px; }

.navbar-row { display: flex; flex-direction: row; align-items: center; } 
.navbar-col-row { display: flex; flex-direction: column;  }
.navbar-col { display: flex; flex-direction: column;  }
.navbar-col2 { display: flex; flex-direction: column; flex: 1; }
.navbar-labelbutton1, .navbar-labelbutton2 { justify-content: flex-end;  }
.navbar-icon1 { display: none !important; }
.navbar-title, .navbar-labelbutton1, .navbar-labelbutton2 { color: darkred; font-size: 30px; font-weight: 600; display: flex; flex: 1; align-items: center; } 
.navbar-count { display: flex; align-items: center; color: #333; font-size: 30px; font-weight: 600; }
.navbar-menu { color: #333; font-size: 30px; font-weight: 600; padding-right: 10px; }
.navbar-image { display: none;}
@media print, screen and (min-width: 480px) { 
	.navbar { margin-bottom:10px; }
	.navbar-image { display: block; height:50px; }	
}
@media print, screen and (min-width: 768px) {	
	.navbar-col-row { flex-direction: row; flex: 1; justify-content: flex-end; gap: 2px;}
	.navbar-labelbutton2 { display: none; }
	.navbar-icon1 { display: block !important; }
}

.menubar { z-index: 1;  }
.menubar input:checked ~ .menunav1, .menubar input:checked ~ .menunav2 { display: flex; }
.menunav1, .menunav2 { display: none; position: absolute; top: 50px; row-gap: 2px; background-color: #f4e7e7; }
.menunav1, .menunav2 { min-width:150px; }
.menunav2 { right:0; }
.navbar-button { font-size: 18px; background-color: #666666; color: white;  max-width:150px; width:100%; height:50px; font-weight: 600; }
.navbar-button:hover { background: #ddd; color: black;}
@media print, screen and (min-width: 480px) {	
	.menunav1, .menunav2 { top: 80px; }	
}
@media print, screen and (min-width: 768px) {	
	.menunav2 { display: flex; flex-direction: row; flex: 1; position: static;  }	
}

.editbar { display: flex; gap:2px; padding: 10px 0px 10px 0px; }
.editbar-button { max-width:150px; width:100%; font-weight: 600; transition: all ease 0.5s; height:40px;}
.editbar-button:hover { background: #ddd; color: black; }
.editbar-button-save { background-color: green; color: white; }
.editbar-button-back { background-color: #666666; color: white; }
.editbar-button-delete { background-color: red; color: white; }
@media print, screen and (min-width: 480px) { 
	.editbar { padding: 10px 0px 10px 0px; }
}

.hide { display: none; }


.cont-1-left, .cont-2-left { display: flex; flex-direction: column; flex: 1; overflow:auto; max-height: calc(100vh - 44px); }
.cont-21-left { display: flex; flex-direction: column; flex: 1; overflow:auto; max-height: calc(100vh - 60px); }
.cont-1-right, .cont-2-right { flex: 1; overflow:auto; max-height: calc(100vh - 44px);  }
.cont-panel { padding:0px 10px 10px 10px; background-color: #f4e7e7; }
.cont-panel-toppadding { padding-top:10px; }
.cont-row { display: flex; flex-direction: row;  } 
.cont-row-gap { display: flex; flex-direction: row; column-gap: 10px; } 
.cont-col {  flex-direction: column; flex: 1; }
.cont-col-gap { display: flex; flex-direction: column; flex: 1; row-gap: 10px; }
.cont-col-row-gap { display: flex; flex-direction: column; column-gap: 20px; } 
.cont-grid {  display: grid; grid-auto-rows: 25px; grid-gap: 2px;  } 
.grid-movie, .grid-movie-edit { grid-template-columns: auto auto; }
.grid-customer, .grid-customer-edit { grid-template-columns: auto auto auto; }
.grid-data, .grid-data-edit { grid-template-columns: auto auto; }
.grid-employee, .grid-employee-edit { grid-template-columns: auto auto; }
.grid-reservation, .grid-reservation-edit { grid-template-columns: auto auto; }
.grid-reservation-right { grid-template-columns: 60px 60px 60px 60px; grid-gap: 2px; float: right;}
.grid-col-hide-left, .grid-col-hide-middle, .grid-col-hide-right, .grid-col-hide-rest { display: none; }
.grid-col-hide-left-edit, .grid-col-hide-middle-edit, .grid-col-hide-right-edit { display: none; }
.grid-col-hide-left-edit-2, .grid-col-hide-middle-edit-2, .grid-col-hide-right-edit-2 { display: none; }
.grid-header { font-size: 18px; font-weight: 600; text-align: left; background-color: #f4e7e7; color: darkred; position: sticky; top: 0px; transition: all ease 0.5s;}
.grid-header-2 { background-color: #666666; color: #fff; text-align: center; padding: 0px 10px; }
.grid-header:hover { background: #E7E7E7; }
.grid-text {  text-align: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; transition: all ease 0.3s; }
.grid-text-more { overflow: visible; white-space: normal; }
.grid-text-center { text-align: center; }
.grid-row-odd { background-color: white; }
.grid-row-even { background-color: #E7E7E7; }
.grid-row-select { background-color: yellow; }
.grid-row{ display: contents; }
.grid-row:hover > .grid-text, .grid-row:hover > .grid-number { background-color: rgba(0, 0, 0, .2) }
.nomobile { display: none; }
@media print, screen and (min-width: 480px) { 
	.cont-grid { grid-auto-rows: 35px;} 
	.cont-1-left, .cont-2-left {   max-height: calc(100vh - 100px); }
	.cont-21-left { max-height: calc(100vh - 505px); }
	.icons { font-size: 25px; }
}
@media print, screen and (min-width: 768px) {
	.cont-col-row-gap { display: flex; flex-direction: row;  } 
	.cont-1-right { flex: 0 0 450px; }
	.cont-2-right { flex: 1 1 900px; }
	.grid-customer { grid-template-columns: auto auto auto auto auto; }
	.grid-employee { grid-template-columns: auto auto auto; }
	.grid-movie { grid-template-columns: auto auto auto auto; }
	.grid-reservation { grid-template-columns: 150px auto auto; }
	.grid-col-hide-left { display: block; }
	.cont-1-left {  display: flex;  }
	.cont-21-left { max-height: calc(100vh - 385px); }

}
@media print, screen and (min-width: 1024px) {
	.grid-customer { grid-template-columns: auto auto auto auto auto auto; }
	.grid-employee { grid-template-columns: auto auto auto auto; }
	.grid-data { grid-template-columns: auto auto auto; }
	.grid-movie { grid-template-columns: auto auto auto auto 150px; }
	.grid-reservation { grid-template-columns: 150px auto auto 60px 60px 60px 60px; }
	.grid-col-hide-middle { display: block; }
}
@media print, screen and (min-width: 1200px) {
	.cont-2-right { flex: 0 0 900px; }
	.grid-customer-edit { grid-template-columns: auto auto auto auto auto; }
	.grid-employee-edit { grid-template-columns: auto auto auto ; }
	.grid-col-hide-left-edit { display: block; }
	.cont-2-left {  display: flex;  }
	.cont-21-left {  display: flex;  }

	
}
@media print, screen and (min-width: 1500px) {
	.grid-customer { grid-template-columns: repeat(10, auto); }
	.grid-customer-edit { grid-template-columns: repeat(6, auto); }
	.grid-employee { grid-template-columns: repeat(6, auto); }
	.grid-employee-edit { grid-template-columns: repeat(4, auto) ; }
	.grid-data { grid-template-columns: repeat(5, auto); }
	.grid-data-edit { grid-template-columns: repeat(3, auto); }
	.grid-movie { grid-template-columns: auto auto auto auto 150px auto auto auto auto ; }
	.grid-movie-edit { grid-template-columns: repeat(4, auto); }
	.grid-reservation { grid-template-columns: 150px auto auto auto auto auto 60px 60px 60px 60px; }
	.grid-reservation-edit { grid-template-columns: 150px auto auto; }
	.grid-col-hide-right { display: block; }
	.grid-col-hide-rest { display: block; }
	.grid-col-hide-right-edit { display: block; }
	.grid-col-hide-middle-edit { display: block; }
	.grid-col-hide-left-edit-2 { display: block; }
}
@media print, screen and (min-width: 1800px) {
	.grid-movie-edit { grid-template-columns: auto auto auto auto 150px; }
	.grid-reservation-edit { grid-template-columns: 150px auto auto 60px 60px 60px 60px; }
	.grid-col-hide-middle-edit-2 { display: block; }
	
}

.panel-header { font-size: 18px; padding: 5px 0px; text-align: left; color: darkred; font-weight: 600; display: flex; justify-content: left; align-items: center; white-space: nowrap; flex: 0 0 140px;}
.panel-text { padding: 5px 10px; text-align: left; flex: 1; word-break: break-all; }

.nowrap {white-space: nowrap !important; }

.noscrollbarff {  overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none;} 
.noscrollbarff::-webkit-scrollbar { display: none; }	

.image { width:100%; }

.moviebanner-panel { padding:10px; background-color: #f4e7e7; }
.moviebanner-image {display: none;}
.moviebanner-cont-center {flex: 1;}
.moviebanner-cont-right { } 
.moviebanner-subject, .moviebanner-description {display: none;}
.moviebanner-title { color: #333; font-size: 22px; font-weight: 600;  }
.moviebanner-col-row, .moviebanner-col-row-2 { display: flex; flex-direction: column; gap: 10px;} 
.moviebanner-header {  display: grid; place-items: center; background-color: #666666; color: #fff; font-size: 18px; font-weight: 600; }
.moviebanner-header-right { display: flex; justify-content: right; align-items: center; font-size: 16px; font-weight: 600; color: darkred; }
.moviebanner-header-right2 { color: #666666; }
.moviebanner-total { display: flex; justify-content: center; align-items: center;  font-size: 18px; background-color: #ddd; color: darkred; font-weight: 600;}
.moviebanner-total-right { color: #666666; }
.moviebanner-number { display: grid; place-items: center; font-size: 18px; background-color: #ddd; color: darkred; font-weight: 600;}
.moviebanner-number2 { color: #666666; }
.moviebanner-date { color: darkred; font-size: 20px; font-weight: 600; }
.moviebanner-subject {  color: #666666; font-size: 16px; font-weight: 600; text-align: justify;}
.moviebanner-description {  color: #333; font-size: 16px; font-weight: 600; text-align: justify;}
.moviebanner-navi { background-color: #666666; color: white; font-size: 35px; height: 50px; width: 50px; }
.grid-moviebanner { grid-template-columns: auto repeat(4, minmax(50px, 60px)); grid-gap: 2px; }

@media print, screen and (min-width: 768px) {
	.moviebanner-panel { height: 277px; margin-bottom:10px; }
	.moviebanner-title { font-size: 2.5vw;  }
	.moviebanner-col-row { flex-direction: row; column-gap: 20px; } 
	.moviebanner-subject { display: block; font-size: 18px; }
}
@media print, screen and (min-width: 1024px) {
	.moviebanner-col-row-2 { flex-direction: row; column-gap: 20px; } 
	.moviebanner-hide-text {display: block;}
	
	.moviebanner-header-right { font-size: 18px; padding: 5px 10px;}
}
@media print, screen and (min-width: 1200px) {
	
	.moviebanner-image {display: block; }
}
@media print, screen and (min-width: 1500px) {
	.ffmoviebanner-title { font-size: 42px; }
	.moviebanner-date { font-size: 22px; }
	
	.moviebanner-description { display: block; font-size: 18px; }
}

.colspan2 { grid-column-end: span 2; }
.colspan3 { grid-column-end: span 3; }
.colspan4 { grid-column-end: span 4; }

.back-green-light { background-color: #ccffcc; }
.back-orange-licht { background-color: #ffe0b5; }
.back-red-licht { background-color: #ffbfaa; } 



@media print { 
	body { background: white !important; }
	
	.pagebreak { clear: both; page-break-after: always; }
	.noprint { display:none; }
	.cont-col-gap { row-gap: 0px; background-color: #fff;}
	.moviebanner-col-row-2 { margin-bottom: 5px; }

	.moviebanner-panel { height: auto; padding:2px; background-color: #fff; margin-bottom: 10px; }
	.grid-moviebanner { grid-template-columns: auto repeat(4, 50px); }
	.moviebanner-title { padding-left: 5px; font-size: 26px;  }
	.moviebanner-date { padding-left: 5px; font-size: 16px;  }
	.111moviebanner-header-right { background-color: #f4e7e7; }
	.icons { font-size: 20px; }
	
	.cont-panel { padding:2px; background-color: black; }
	
	.grid-header { font-size: 16px; }
	
	.cont-grid { gap: 2px; grid-auto-rows: 32px;}
	.grid-text { font-size: 16px; font-weight: 600;}
	.grid-reservation { grid-template-columns: auto auto auto auto 50px 50px 50px 50px; }
	.grid-row-even { background-color: white; }
	
	.cont-21-left { max-height: 100%; }
	
	
	.grid-movie { grid-template-columns: auto auto auto; }
	
}