@font-face {
    font-family: 'Ciutadella';
    url('Ciutadella Light')  format('truetype'), /* Safari, Android, iOS */
}

@font-face {
    font-family: 'Ciutadella Bold';
    url('Ciutadella Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
}

@font-face {
    font-family: 'Ciutadella SemiBold';
url('Ciutadella SemiBold.ttf')  format('truetype'), /* Safari, Android, iOS */
}

@font-face {
    font-family: 'Ciutadella Medium';
url('Ciutadella Medium.ttf')  format('truetype'), /* Safari, Android, iOS */
}

body{
    background: #F4EAE9;
    margin: 0px;
    font-family: "Ciutadella Medium";
}

#divLoginHeader{
    position: fixed;
    width: calc(100% + 200px);
    height: 200px;
    background: url('swirl_top_green_blue.png');
    background-size: cover;
    top:0px;
    left: -75px;
    overflow: visible;
    padding-left: 125px;
    padding-top: 30px;
    box-sizing: border-box;
}

#divLoginHeader h1{
    margin: 0px;
    padding: 0px;
    color: #ffffff;
}

#pLoginSubTitle{
    color: #ffffff;
    margin: 0px;
    padding: 0px;
}

#divLoginFooter{
    position: fixed;
    width: calc(100% + 200px);
    height: 250px;
    background: url('swirl_botom_blue_green.png');
    background-size: cover;
    bottom:0px;
    left: -75px;
    overflow: visible;
    padding-left: 125px;
    padding-top: 30px;
    box-sizing: border-box;
}

#divLoginWrapper{
    width: 100%;
    padding-left: 50px;
    padding-right: 50px;
    box-sizing: border-box;
    margin-top: 300px;
}

input{
    width: 100%;
    height: 40px;
    background: #ffffff;
    color: #323232;
    border: none;
    margin-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    border-radius: 5px;
}

input[type=submit]{
    background: #88AFDB;
    color: #ffffff;
}

#divPopupBackground{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: rgb(255,255,255, 1);
    opacity: 0.8;
    -webkit-backdrop-filter: blur(50px);
    z-index: 10;
}

#divPopup{
    width: 220px;
    max-height: 400px;
    background: rgba(80,80,80,0.8);
    position: fixed;
    z-index: 10;
    left: calc(50% - 110px);
    top: calc(50% - 100px);
    border-radius: 20px;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

#pPopupTitle{
    color: #ffffff;
    width: 100%;
    text-align: center;
    margin: 0px;
    padding: 0px;
    margin-bottom: 10px;
}

#pPopupText{
    color: #ffffff;
    width: 100%;
    text-align: center;
    font-size: 80%;
    margin: 0px;
    padding: 0px;
    font-family: "Ciutadella Medium";
}

#pPopupOk{
    width: 60px;
    height: 30px;
    background: #88AFDB;
    color: #ffffff;
    font-size: 13px;
    text-align: center;
    border-radius: 5px;
    padding-top: 7px;
    box-sizing: border-box;
    margin: auto;
    margin-top: 20px;
}

#divTabbar{
    position: fixed;
    width: 100%;
    height: 80px;
    background: #f8f8f8;
    border-top: 1px solid #f1f1f1;
    bottom: 0px;
    left: 0px;
}

.bodyWhite{
    background: #f8f8f8;
}

#divTabbar ul{
    width: 100%;
    height: 80px;
    margin: 0px;
    padding: 0px;
}

#divTabbar ul li{
    list-style-type: none;
    width: 25%;
    text-align: center;
    height: 80px;
    padding-top: 16px;
    box-sizing: border-box;
    color: #dcdcdc;
    float: left;
    display: block;

}

#divTabbar ul li p{
    margin: 0px;
    padding: 0px;
    font-size: 14px;
}

#divTabbar ul li img{
    width: 25px;
    height: 25px;
    filter: invert(93%) sepia(0%) saturate(1%) hue-rotate(30deg) brightness(94%) contrast(96%);
}

.liSelected p{
    color: #DBB09D;
}

.liSelected img{
    filter: invert(80%) sepia(15%) saturate(660%) hue-rotate(331deg) brightness(93%) contrast(84%) !important;
}

#divHeaderDashboard{
    position: fixed;
    width: calc(100% + 60px);
    height: 250px;
    background: url('blue_header_single.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    top: -40px;
    left: 0px;
}

.imgCucumber{
    position: fixed;
    opacity: 0.8;
}

#imgCucumberOne{
    bottom: 120px;
    left: 20px;
    width: 80px;
    opacity: 0.3;
}

#imgCucumberTwo{
    bottom: 35%;
    right: -20px;
    width: 120px;
    opacity: 0.3;
}


#imgCucumberThree{
    top: 35%;
    left: -30px;
    width: 70px;
    opacity: 0.3;
}

#divAvatarWrapper{
    width: 150px;
    height: 150px;
    background: #ffffff;
    border-radius: 75px;
    position: fixed;
    left: calc(50% - 75px);
    top: 30px;
}

#imgAvatar{
    width: 144px;
    height: 144px;
    border-radius: 72px;
    margin-left: 3px;
    margin-top: 3px;
}

#pUserDisplay{
    background: #83A894;
    color: #ffffff;
    padding: 10px;
    text-align: center;
    height: 40px;
    border-radius: 20px;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    position: fixed;
    top: 140px;
    padding-top: 12px;
}

#divContentDashboard{
    position: fixed;
    width: 100%;
    height: calc(100% - 290px);
    overflow: scroll;
    top: 200px;
    padding: 20px;
    box-sizing: border-box;
}

#divDashboardTitle{
    width: 100%;
    float: left;
}

#divDashboardTitle p{
    float: left;
}

#divDashboardTitle p:first-of-type{
    color: #c5c5c5;
    font-size: 12px;
    padding: 0px;
    margin: 0px;
    margin-top: 3px;
}

#divDashboardTitle p:last-of-type{
    color: #88AFDB;
    padding: 0px;
    margin: 0px;
    margin-left: 5px;
}

.divNotificatie{
    width: 100%;
    min-height: 50px;
    background: #ffffff;
    border-radius: 15px;
    float: left;
    margin-top: 14px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
    padding: 10px;
    box-sizing: border-box;
}

.divNotificatie table{
    width: 100%;
}

.imgBell{
    width: 18px;
    filter: invert(67%) sepia(71%) saturate(315%) hue-rotate(183deg) brightness(90%) contrast(90%);
}

.pNotificationTitle{
    margin: 0px;
    padding: 0px;
    color: #323223;
    margin-bottom: 5px;
    width: 100%;
    font-family: "Ciutadella Medium";
    font-size: 15px;
}

.pNotificationDescription{
    margin: 0px;
    padding: 0px;
    font-family: "Ciutadella";
    color: #323223;
    font-size: 13px;
}

#divHamburgerMenu{
    position: fixed;
    top: 40px;
    right: 30px;
    width: 30px;
    filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(115deg) brightness(104%) contrast(101%);
}

#imgLogo{
    position: fixed;
    top: 40px;
    left: 20px;
    width: 20%;
}

#divTimetableHeader{
    position: fixed;
    width: calc(100% + 60px);
    height: 250px;
    background: url('blue_header.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    top: -40px;
    left: 0px;
    padding-top: 60px;
    padding-left: 70px;
    box-sizing: border-box;
}

#divTimetableHeader h1{
    color: #ffffff;
    margin: 0px;
    padding: 0px;
}

#divTimetableHeader p{
    color: #ffffff;
    margin: 0px;
    padding: 0px;
}

#divTimetableContent{
    position: fixed;
    width: 100%;
    height: calc(100% - 290px);
    overflow: scroll;
    top: 210px;
    padding: 20px;
    box-sizing: border-box;
}

#selectStage{
    width: 100%;
    height: 35px;
    border: 0px;
    background: #f1f1f1;
    color: #88AFDB;
    outline: 0;
    text-align: center;
}

.divTimetableRow{
    position: relative;
    height: 240px;
    width: calc(100% + 40px);
    margin-left: -20px;
    float: left;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    margin-top: 20px;
}

.divTimetableItem{
    width: 180px;
    height: 190px;
    margin-right: 10px;
    display: inline-block;
    padding: 10px;
    box-sizing: border-box;
}

.divTimetableCard{
    width: 180px;
    height: 180px;
    background: #000000;
    margin-top: 20px;
    position: relative;
    border-radius: 10px;
}

.pTimeStart{
    float: left;
    width: 50%;
    display: block;
    margin: 0px;
    padding: 0px;
    color: #5e5e5e;
}

.pTimeEnd{
    float: left;
    width: 50%;
    display: block;
    margin: 0px;
    padding: 0px;
    color: #dcdcdc;
}

.pTimetableDayTitle{
    width: 100%;
    margin: 0px;
    padding-left: 20px;
    box-sizing: border-box;
}

.divTimetableBottom{
    height: 50px;
    width: 100%;
    position: absolute;
    bottom: 0px;
    background: #dcdcdc;
    border-radius: 0px 0px 10px 10px;
}

.divTimetableRow .divTimetableItem:first-of-type{
    margin-left: 10px;
}

.divTimetableRow .divTimetableItem:last-of-type{
    margin-right: 30px;
}

.divTimetableInfo{
    position: absolute;
    width: 75%;
    height: 80%;
    bottom: 0px;
    right: 0px;
    border-radius: 0px 0px 10px 0px;
}

.divTimetableInfoText{
    position: absolute;
    width: 80px;
    height: 70px;
    bottom: 0px;
    right: 10px;
    color: #ffffff;
}

.divTimetableInfoText p{
    margin: 0px;
    padding: 0px;
    width: 80px;
    display: inline-block;
    float: left;
    white-space: pre-line;
}

.divTimetableInfoText p:first-of-type{
    font-size: 18px;
}

.divTimetableInfoText p:last-of-type{
    font-size: 12px;
}

.divTimetableInfo img{
    position: relative;
    width: 100%;
    height: 100%;
}


.pTimetableTime{
    font-size: 13px;
    margin: 0px;
    padding: 0px;
    margin-left: 10px;
    margin-top: 10px;
    color: #b7b7b7;
    font-family: "Ciutadella Bold";
}

.divTimetableRow .divTimetableItem:nth-of-type(1) .divTimetableInfo img{
    filter: invert(63%) sepia(46%) saturate(171%) hue-rotate(95deg) brightness(95%) contrast(80%);
}
.divTimetableRow .divTimetableItem:nth-of-type(2) .divTimetableInfo img{
    filter: invert(72%) sepia(31%) saturate(439%) hue-rotate(173deg) brightness(89%) contrast(93%);
}
.divTimetableRow .divTimetableItem:nth-of-type(3) .divTimetableInfo img{
    filter: invert(87%) sepia(18%) saturate(837%) hue-rotate(315deg) brightness(86%) contrast(99%);
}
.divTimetableRow .divTimetableItem:nth-of-type(4) .divTimetableInfo img{
    filter: invert(45%) sepia(22%) saturate(522%) hue-rotate(172deg) brightness(94%) contrast(89%);
}
.divTimetableRow .divTimetableItem:nth-of-type(5) .divTimetableInfo img{
    filter: invert(86%) sepia(3%) saturate(3679%) hue-rotate(322deg) brightness(92%) contrast(88%);
}
.divTimetableRow .divTimetableItem:nth-of-type(6) .divTimetableInfo img{
    filter: invert(30%) sepia(81%) saturate(2846%) hue-rotate(172deg) brightness(95%) contrast(103%);
}

.divTimetableRow .divTimetableItem:nth-of-type(7) .divTimetableInfo img{
    filter: invert(63%) sepia(46%) saturate(171%) hue-rotate(95deg) brightness(95%) contrast(80%);
}
.divTimetableRow .divTimetableItem:nth-of-type(8) .divTimetableInfo img{
    filter: invert(72%) sepia(31%) saturate(439%) hue-rotate(173deg) brightness(89%) contrast(93%);
}
.divTimetableRow .divTimetableItem:nth-of-type(9) .divTimetableInfo img{
    filter: invert(87%) sepia(18%) saturate(837%) hue-rotate(315deg) brightness(86%) contrast(99%);
}
.divTimetableRow .divTimetableItem:nth-of-type(10) .divTimetableInfo img{
    filter: invert(45%) sepia(22%) saturate(522%) hue-rotate(172deg) brightness(94%) contrast(89%);
}
.divTimetableRow .divTimetableItem:nth-of-type(11) .divTimetableInfo img{
    filter: invert(86%) sepia(3%) saturate(3679%) hue-rotate(322deg) brightness(92%) contrast(88%);
}
.divTimetableRow .divTimetableItem:nth-of-type(12) .divTimetableInfo img{
    filter: invert(30%) sepia(81%) saturate(2846%) hue-rotate(172deg) brightness(95%) contrast(103%);
}

#divMapMobile{
    background: #ffffff;
    position: fixed;
    width: 100%;
    height: calc(100% - 80px);
    top:0px;
    left: 0px;
}

#camera{
    position: fixed;
    width: 100%;
    height: calc(100% - 80px);
    top:0px;
    left: 0px;
    background: black;
}

#divCameraTrigger{
    width: 60px;
    height: 60px;
    background: #83A894;
    border-radius: 30px;
    position: fixed;
    bottom: 100px;
    left: calc(50% - 30px);
}

#divSwitchCamera{
    width: 60px;
    height: 60px;
    background: #83A894;
    border-radius: 30px;
    position: fixed;
    top: 20px;
    right: 20px;
}

#divUploadPhoto{
    width: 60px;
    height: 60px;
    background: #88AFDB;
    border-radius: 30px;
    position: fixed;
    left: 20px;
    top: 20px;
    display: none;
}

#divDeletePhoto{
    width: 60px;
    height: 60px;
    background: #88AFDB;
    border-radius: 30px;
    position: fixed;
    left: 20px;
    top: 90px;
    display: none;
}

#divFlash{
    width: 60px;
    height: 60px;
    background: #88AFDB;
    border-radius: 30px;
    position: fixed;
    right: 20px;
    top: 90px;
}

#divCameraTrigger img{
    filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(115deg) brightness(104%) contrast(101%);
}

#divSwitchCamera img{
    filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(115deg) brightness(104%) contrast(101%);
}

#divDeletePhoto img{
    filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(115deg) brightness(104%) contrast(101%);
}

#divUploadPhoto img{
    filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(115deg) brightness(104%) contrast(101%);
}

#divFlash img{
    filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(115deg) brightness(104%) contrast(101%);
}