/*   
Theme Name: Aktivitetsschema Theme
Theme URI: https://[Företag].se
Description: The official [Företag] Wordpress Theme
Author: Ola Eborn
Author URI: https://eborninteractive.se
Version: 1.0
*/

/* CSS Document */

/* 

Färger:



*/

* {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
}

:root {
	--svart: #111;
	--vit: #fff;
	--ljusbla: #efebfa;
	--ljusgron: #d0d7d0;
	--bakgrund: #faf2de;
	--modal-transp: rgba(47,56,93,0.75);
	--modal:#2f385d;
	--accent: #df793e;
}

body {
	background:var(--bakgrund);
	color:var(--svart);
	margin:0;
	padding:0;
	font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	line-height:1.5;
	font-size:18px;
}

h1,h2,h3,h4,h5,h6 {
}

h1 {
	font-size:32px;
}
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong, h1 b, h2 b, h3 b, h4 b, h5 b, h6 b {
	/*font-weight:normal;*/
}

#page-wrap {
	width:100%;
	position:relative;
}

.inner-content {
	width:100%;
	position:relative;
}

header {
	
}

#main-content {
	
}

#main-content .inner-content {
	
}

aside {
	
}

footer {
	
}


/* schema */

.schema-container {
	width: 100%;
	overflow-x:auto;
	padding-left: 45px;
	padding-right:20px;
}

.main-heading {
	max-width: 747px;
	text-align: center;
	padding: 6px 0 0 0;
}

.schema {
	display:flex;
	width: calc(100% + 40px);
	position: relative;
}

.schema .dag {
	width: 100px;
	position: relative;
	z-index: 2;
}

.schema .dag .heading {
	font-size: 13px;
	font-weight: 600;
	text-align:center;
	margin-bottom: 4px;
}

.schema .dag .timmar {
	border:1px solid #444;
	margin-left: -1px;
	background: var(--vit);
	position: relative;
	z-index: 2;
}

.schema .dag:first-child .timmar {
	margin-left: 0;
}


.schema .dag tid {
	display:block;
	height: 30px;
	border-bottom:1px dotted #ccc;
	width: 100px;
	position: relative;
	z-index: 0;
}

.schema .dag tid:last-child {
	border-bottom:none;
}

.schema .dag tid span {
	display: none;
}

.schema .dag tid.aktiv {
	background: var(--accent) !important;
}

.schema .dag:last-child tid {
	margin-right: 20px;
}

span {
    position: absolute;
    left: -40px;
    font-size: 12px;
    color: #777;
    padding-top: 4px;
}

.aktivitet {
	position: absolute;
	background: #eee;
	color: #111;
	font-size: 11px;
	font-weight: 500;
	padding: 2px 4px;
	border:1px solid #ccc;
	margin: 10px 5px 0 5px;
	line-height: 1;
	z-index: 5;
	max-width: 91px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}

.timangivelser {
    position: fixed;
    left: 5px;
    top: 66px;
    font-size: 12px;
    color: #777;
    margin-left: -5px;
    width: 44px;
    padding-bottom: 0;
background:var(--bakgrund);
	padding-top: 20px;
	z-index: 5;
}

.admin-bar .timangivelser {
	top:calc(66px + 32px);
}

.timangivelser .timme {
    margin: 6px 0 12px;
    padding: 0 5px;
}

.update-modal-container {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	visibility: hidden;
	opacity: 0;
	transform: scale(0.8);
}

.showmodal {
	visibility: visible !important;
	opacity: 1 !important;
	transform: scale(1) !important;
	transition:0.4s all ease;
}

.closebtn {
	cursor: pointer;
}

.modal {
	width: 90%;
	max-width: 350px;
	background: rgba(0,0,0,0.75);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);	
	padding: 25px 15px 55px;
	border-radius: 8px;
	color: var(--vit);
	position: relative;
}

.modal h2 {
    color: var(--vit);
    margin-bottom: 7px !important;
}

.modal p {
	color:#ddd;
}

.modal .tid {
	color: var(--accent);
	font-weight: 600;
	text-transform:uppercase;
	font-size: 16px;
	margin-bottom: 0;
}

.modal .closebtn {
	width: 20px;
	position: absolute;
	right: 15px;
	top: 15px;
	opacity: 0.7;
}

.modal .buttons {
	color:var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom: 0;
	width: 100%;
	left: 0;
	padding-bottom: 10px;
}

.modal .buttons .btn {
	padding: 0 20px;
	font-size: 30px;
}

.modal input, .modal textarea, select {
	display: block;
	height: 40px;
	font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	background:#777;
	color: var(--vit);
	border-radius: 4px !important;
	width: calc(100%);
	margin-bottom: 15px;
	border: none;
	padding: 0 8px;
	font-size: 17px;
	font-weight: 400;
}

.modal input:focus, .modal textarea:focus, select:focus {
	outline:none;
}

.modal .edit-screen {
	margin-top: 25px;
	margin-bottom: 20px
}

.modal textarea {
	min-height: 80px;
	padding: 6px 8px;
}

.modal .buttons .btn.regbutton {
	background: #ccc;
	color: var(--svart);
	border-radius: 5px;
	font-size: 18px;
	margin: 5px 5px 7px 5px;
	padding: 5px 20px;
	font-weight: 600;
}

.modal .buttons  .btn.save.regbutton, .modal .buttons  .btn.deleteall.regbutton {
	background: var(--accent);
	color: var(--vit);
	border-radius: 5px;
}

.add-btn-section {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    max-width: 745px;
}

.btn {
	cursor:pointer;
}

.btn.addbtn, .btn.deletebtn {
	font-size: 45px;
	font-weight: 400;
	color: var(--vit);
	background: var(--svart);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	line-height: 0.5;
	cursor: pointer;
	text-align: center;
	padding-top: 10px;
	margin: 0 15px;
}


.btn.deletebtn img {
    width: 20px;
    margin: 6px 16px;
}

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #ccc
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #ccc;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #ccc;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #ccc;
}


.aktivitet.mandag {
    left: 0;
}

.aktivitet.tisdag {
    left: 100px;
}

.aktivitet.onsdag {
    left: 200px;
}

.aktivitet.torsdag {
    left: 300px;
}

.aktivitet.fredag {
    left: 400px;
}

.aktivitet.lordag {
    left: 500px;
}

.aktivitet.sondag {
    left: 600px;
}

.aktivitet.kl05 {
    top: calc(20px + 0px);
}

.aktivitet.kl0530 {
    top: calc(20px + 15px);
}

.aktivitet.kl06 {
    top: calc(20px + 30px);
}

.aktivitet.kl0630 {
    top: calc(20px + 45px);
}

.aktivitet.kl07 {
    top: calc(20px + 60px);
}

.aktivitet.kl0730 {
    top: calc(20px + 75px);
}

.aktivitet.kl08 {
    top: calc(20px + 90px);
}

.aktivitet.kl0830 {
    top: calc(20px + 105px);
}

.aktivitet.kl09 {
    top: calc(20px + 120px);
}

.aktivitet.kl0930 {
    top: calc(20px + 135px);
}

.aktivitet.kl10 {
    top: calc(20px + 150px);
}

.aktivitet.kl1030 {
    top: calc(20px + 165px);
}

.aktivitet.kl11 {
    top: calc(20px + 180px);
}

.aktivitet.kl1130 {
    top: calc(20px + 195px);
}

.aktivitet.kl12 {
    top: calc(20px + 210px);
}

.aktivitet.kl1230 {
    top: calc(20px + 225px);
}

.aktivitet.kl13 {
    top: calc(20px + 240px);
}

.aktivitet.kl1330 {
    top: calc(20px + 255px);
}

.aktivitet.kl14 {
    top: calc(20px + 270px);
}

.aktivitet.kl1430 {
    top: calc(20px + 285px);
}

.aktivitet.kl15 {
    top: calc(20px + 300px);
}

.aktivitet.kl1530 {
    top: calc(20px + 315px);
}

.aktivitet.kl16 {
    top: calc(20px + 330px);
}

.aktivitet.kl1630 {
    top: calc(20px + 345px);
}

.aktivitet.kl17 {
    top: calc(20px + 360px);
}

.aktivitet.kl1730 {
    top: calc(20px + 375px);
}

.aktivitet.kl18 {
    top: calc(20px + 390px);
}

.aktivitet.kl1830 {
    top: calc(20px + 405px);
}

.aktivitet.kl19 {
    top: calc(20px + 420px);
}

.aktivitet.kl1930 {
    top: calc(20px + 435px);
}

.aktivitet.kl20 {
    top: calc(20px + 450px);
}

.aktivitet.kl2030 {
    top: calc(20px + 465px);
}

.aktivitet.kl21 {
    top: calc(20px + 480px);
}

.aktivitet.kl2130 {
    top: calc(20px + 495px);
}

.aktivitet.kl22 {
    top: calc(20px + 510px);
}

.tom-kolumn .timmar {
    width: 15px; /* Skapar en extra marginal till höger */
    border: none !important; /* Tar bort eventuell kantlinje */
}

.tom-kolumn tid {
    width: 20px; /* Skapar en extra marginal till höger */
    border: none; /* Tar bort eventuell kantlinje */
}

input, textarea {
  caret-color: var(--accent); /* Du kan använda vilken färg som helst här */
}