#calendar{display:flex;position:relative}#calendar #days{align-items:center;display:flex;flex-wrap:wrap;height:500px;margin:80px 50px 2px;padding:0;width:100%}#calendar #days .day{background-position:50%;background-repeat:no-repeat;background-size:cover;border-right:1px solid #ddd;box-sizing:border-box;display:inline-block;height:250px;transition:background .2s ease;width:25%}#calendar #days .day:nth-child(4){border-right:none}#calendar #days .day:nth-child(-n+4){border-bottom:1px solid #ddd}#calendar #days .day.draggedOver{background:#FFF59D;background-image:none}#calendar #days .day h4{font-weight:500;font-size:.9em;margin:0;padding:20px 0;text-align:center;text-transform:uppercase;-webkit-user-select:none;-moz-user-select:none;user-select:none}#calendar #days .day.active h4{background-image:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.5) 80%,rgba(0,0,0,0))}#calendar #days .day p{margin:0;padding:0}#calendar-edit,#calendar-new{background:rgba(255,255,255,.8);display:block;height:100%;left:0;position:absolute;text-align:center;top:0;width:100%;z-index:100}#calendar-edit .form,#calendar-new .form{background:#FEFEFE;border:1px solid #ddd;border-radius:10px;display:block;height:100px;left:0;margin:0 auto;max-width:500px;padding:20px;position:absolute;right:0;text-align:left;top:10%;-moz-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;width:320px}#calendar-edit .form{height:170px}#calendar-edit .form .iconBack,#calendar-new .form .iconBack{background:#FDD835;border-radius:100px;cursor:pointer;height:40px!important;padding:2px 0 2px 2px;position:absolute;right:0;transform:rotate(180deg);top:-20px;width:40px!important;z-index:2}#calendar-edit .form input,#calendar-new .form input{background:#FFF;border:1px solid #fdd835;border-radius:10px;color:#222;cursor:default;display:inline-block;font-size:1em;height:20px;list-style-type:none;margin:10px 10px 0 0;opacity:1;padding:10px;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:calc(100% - 27px)}#calendar-edit .form input.default,#calendar-new .form input.default{color:#777}#calendar-edit .form .button,#calendar-new .form .button{background:#FFF;border:1px solid #fdd835;border-radius:10px;cursor:pointer;display:inline-block;float:right;font-size:.9em;margin:10px 5px 5px 0;padding:8px 10px;text-align:center}#calendar-edit .form .button.update{width:90px}#calendar-edit .form .button.delete{border-color:#E53935;width:90px}#calendar-edit .form .share{font-size:.9em;margin-top:28px;text-align:left}#calendar-edit .form .share p{width:100%}#calendar-edit .form .share p:first-child{height:25px;margin:0;padding-top:4px}#calendar-edit .form .share p:nth-of-type(2){cursor:pointer;margin:-5px 0 0;padding:0;text-decoration:underline}