/* FullCalendar */
#calendar a {
	text-decoration: none;
	color: #20232a;
}
.fc-daygrid-event {
	border-radius: 2px;
}

/* Modal */
#modal-overlay {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .4);
	z-index: 2;
}
#modal-container {
	position: absolute;
	width: 500px !important;
	max-width: 90%;
	background: #fff;
	border-radius: 3px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
	z-index: 3;
}
#modal-header {
	position: absolute;
	width: 100%;
	height: 40px;
	z-index: 4;
}
#modal-content {
	position: relative;
	padding: 5%;
}
#modal-close {
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	height: 40px;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="rgb(34,34,34)" d="M13.69 3.81L9.5 8l4.19 4.19c.19.19.31.46.31.75 0 .58-.47 1.06-1.06 1.06-.29 0-.56-.12-.75-.31L8 9.5l-4.19 4.19c-.19.19-.46.31-.75.31C2.47 14 2 13.53 2 12.94c0-.29.12-.56.31-.75L6.5 8 2.31 3.81C2.12 3.62 2 3.35 2 3.06 2 2.47 2.47 2 3.06 2c.29 0 .56.12.75.31L8 6.5l4.19-4.19c.19-.19.46-.31.75-.31.59 0 1.06.47 1.06 1.06 0 .29-.12.56-.31.75z"/></svg>') 50% no-repeat;
	opacity: .3;
	cursor: pointer;
	z-index: 4;
}
#modal-close:hover {
	opacity: 1;
}
#modal-container.modal-loading {
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 128 128"><g><path fill="rgb(34,34,34)" d="M75.4 126.63a11.43 11.43 0 0 1-2.1-22.65 40.9 40.9 0 0 0 30.5-30.6 11.4 11.4 0 1 1 22.27 4.87h.02a63.77 63.77 0 0 1-47.8 48.05v-.02a11.38 11.38 0 0 1-2.93.37z"/><animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="1200ms" repeatCount="indefinite"/></g></svg>') no-repeat 50% #fff;
}

/* Form */
#modal-content {
	font-family: 'Open Sans', sans-serif;
}
#modal-content input,
#modal-content select,
#modal-content textarea {
	width: 100%;
	padding: 5px 8px;
	border-radius: 3px;
	font-family: 'Open Sans', sans-serif;
	font-size: 100%;
	line-height: 1.5;
	color: #4b4f56;
	border: 1px solid #cececc;
	box-sizing: border-box;
}
#modal-content input[type=checkbox] {
	width: auto;
}
#modal-content button {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	padding: 5px 8px;
	background: #2C3E50;
	border: 1px solid transparent;
	border-radius: 3px;
	color: #fff;
	font-size: 100%;
	line-height: 1.5;
	cursor: pointer;
	margin-right: 10px;
}
#modal-content button:hover {
	background: #1a252f;
}
#modal-content button:active {
	box-shadow: 0 0 0 3px rgba(76, 91, 106, .5);
	transform: translateY(2px);
}
#modal-content p {
	font-size: 13px;
	margin-bottom: 0;
}
#modal-content input.error,
#modal-content textarea.error {
	border-color: #f25555;
}
#modal-content span {
	font-weight: 300;
}

/* Color picker */
.color-picker {
	display: none;
	position: absolute;
	margin-top: 2px;
	width: 166px;
	padding: 2px;
	background: #fff;
	border: 1px solid #cececc;
	z-index: 101;
	border-radius: 3px;
}
.color-picker>div {
	display: inline-block;
	width: 16px;
	height: 16px;
	float: left;
	margin: 2px;
	cursor: pointer;
	border-radius: 2px;
}
.color-picker>div:hover {
	width: 20px;
	height: 20px;
	margin: 0;
}

/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
@media screen and (min-width: 601px) {
  div.calendar {
    font-size: 12px;
  }
   #vicontent {
    width:95%;
	margin:auto;
  }
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
  #calendar div {
    font-size: 12px;
  }
  #calendar div.fc-button-group {
    font-size: 10px;
  }
  #calendar div.fc-toolbar-title {
    font-size: 16px;
  }
  .fc-toolbar-chunk {
    position:relative;
	float:right;
  }
  .fc-toolbar-title {
	  width:100%;
	  font-size:1.2em;
	  text-align:right;
  }
  #vicontent {
    font-size: 12px;
	width:98%;
	margin:auto;
  }
}