@charset "utf-8";

.modal {
	display:none;
	position:fixed;
	z-index:100000;
	left:0;
	top:0;
	width:100%;
	height:100%;
	overflow:hidden;
	background-color:rgba(0,0,0,0.4);
}

.modal.open {
	display:block;
}

#modal_company .modal-content {
	top:3%;
	width:90%;
	height:94%;
	margin:0 auto;
	position:relative;
	overflow:hidden;
	max-width:1400px;
}

#modal_team .modal-content {
	top:3%;
	width:100%;
	max-width:800px;
	margin:0 auto;
	height:94%;
	position:relative;
	overflow:hidden;
	background-color:#fff;
}

/* modal - calender update */
#modal_calender .modal-content {
	top:50%;
	left:50%;
	margin-top:-250px;
	margin-left:-250px;
	width:500px;
	height:500px;
	position:relative;
	overflow:hidden;
	background-color:#fff;
	padding:30px 30px;
	box-shadow:4px 5px 6px 2px rgb(0 0 0 / 20%);
}

#modal_calender .modal-content .calender-editor {position:relative; width:100%; padding:30px 0 0 0;}
#modal_calender .modal-content .calender-editor ul {margin:0; padding:0; width:100%; position:relative;}
#modal_calender .modal-content .calender-editor ul li {margin-bottom:30px !important;}
.calender-editor .calender-editor-title {margin-bottom:8px;}
.calender-editor .calender-editor-title label {color:#333; font-weight:400;}
.calender-editor .calender-editor-input input {border:1px solid #a9a9a9; padding:10px 10px; height:38px; width:100%; color:#595a5e;}
.calender-editor-input .select-datepicker {width:50%; float:left; position:relative;}
.calender-editor-input .select-datepicker:first-child {padding:0 15px 0 0;}
.calender-editor-input .select-datepicker:last-child {padding:0 0 0 15px;}
.calender-editor-input .select-datepicker:last-child:before {content:"~"; position:absolute; top:9px; left:-5px; width:10px; height:20px;}
.calender-editor-input .select-datepicker .datepicker-input-wrap {width:100%; position:relative;}
.calender-editor-input .select-datepicker .datepicker-input-wrap input.datepicker-in {padding:10px 10px 10px 46px;}
.calender-editor-input .select-datepicker .datepicker-image-wrap {position:absolute; left:0; top:1px; display:inline-block; width:36px; height:36px; background-color:#fafafa; text-align:center; border-right:1px solid #a9a9a9;}
.calender-editor-input .select-datepicker .datepicker-image-wrap img {width:20px; margin-top:8px;}
.calender-editor-input .select-datepicker:first-child .datepicker-image-wrap {left:1px;}
.calender-editor-input .select-datepicker:last-child .datepicker-image-wrap {left:16px;}
#modal_calender .modal-content .box-btn {position:relative; display: inline-block; text-decoration:none; min-width: 90px; height: auto; background-color: #fff; border: 0; color: #565656; text-align: center; padding: 6px 18px 6px 18px; border:1px solid #bbbbbb; margin-left:10px;}
#modal_calender .modal-content .box-btn:hover {color:#222; font-weight:400;}
#modal_calender .modal-content .box-btn.btn-active {background-color:#3b404f; color:#fff; border:1px solid #e9e9e9; }
#modal_calender .modal-content .box-btn.btn-active:hover {background-color:#2e3549;}

@media only screen and (max-width:600px){
	#modal_company .modal-content,
	#modal_team .modal-content {
		width:100%;
		height:100%;
		top:0%;
		max-width:100%;
	}

	#modal_calender .modal-content {
		left:0;
		height:540px;
		margin-top:-270px;
		margin-left:0px;
		width:100%;
		max-width:100%;
	}

	.calender-editor-input .select-datepicker {width:100%;}
	.calender-editor-input .select-datepicker:first-child, .calender-editor-input .select-datepicker:last-child  {padding:0;}
	.calender-editor-input .select-datepicker:first-child {margin-bottom:20px;}
	.calender-editor-input .select-datepicker:last-child:before {transform: rotate( 90deg ); top:-18px; left:50%; margin-left:-10px;}
	.calender-editor-input .select-datepicker:last-child .datepicker-image-wrap {left:1px;}
}

.modal-content .modal-header {
	background-color:#2e3549;
	width:100%;
	height:50px;
}

.modal-content .modal-header h2 {
	color:#fff;
	line-height:50px;
	padding-left:20px;
	font-weight:300;
	letter-spacing:1px;
}
.modal-content .modal-body {
	position:relative;
	width:100%;
	height:calc(100% - 50px);
}

#modal_file .modal-content {
	width:240px;
	height:170px;
	position:absolute;
	top:50%;
	margin-top:-85px;
	left:50%;
	margin-left:-120px;
	border:1px solid #454545;
	font-size:14px;
	background-color:#fff;
}

.modal-close {
	position:absolute; 
	top:0px;
	right:20px;
	color:#fff;
	font-size:26px;
	line-height:50px;
	width:46px;
	height:46px;
	cursor:pointer;
	display:block;
	text-align:center;
}
#modal_file .modal-close {display:none;}

.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}

@media only screen and (max-width:768px) {
	.modal-content {max-width:96%;}
}