/*********************************************

 * Hijri - Gregorian Date Picker             *

 *                                           *

 * Design by ZulNs @Yogyakarta, January 2016 *

 *********************************************/



.calendar {

	font-family: "Times New Roman", Times, serif;

	font-size: 14px;

	width: 100%;

	cursor: default;

	background: #eef;

	background: -webkit-linear-gradient(#eff,#fef,#ffe);

	background: -moz-linear-gradient(#eff,#fef,#ffe);

	background: -o-linear-gradient(#eff,#fef,#ffe);

	background: linear-gradient(#eff,#fef,#ffe);

	-moz-box-shadow: 0 4px 8px rgba(0,0,0,.5);

	-webkit-box-shadow: 0 4px 8px rgba(0,0,0,.5);

	box-shadow: 0 4px 8px rgba(0,0,0,.5);

    position: absolute;

    z-index: 11;

}

.calendar .date-grid{

    display: table-row

}

.calendar .weekday-row{

    display: flex;

    justify-content: space-between;

}

.calendar .header-button,

.calendar .setting-button,

.calendar .weekday-row div,

.calendar .date-grid div {

	display: inline-block;

	text-align: center;

	height: 30px;

	line-height: 30px;

}

.calendar .weekday-row div,

.calendar .date-grid div {

	vertical-align: middle;

}

.calendar .header-row *,

.calendar .setting-button,

.calendar .date-grid .normal-date {

	cursor: pointer;

}

.calendar .header-row,

.calendar .month-field,

.calendar .year-field {

	color: #fff;

	background: #259;

    text-align: center;

    display: flex;

    justify-content: space-between;

    padding-right: 10px;

}

.calendar .setting-row {

	color: #fff;

	background: #2b7;

}

.calendar .header-button:active,

.calendar .header-button.active:active {

	color: #259;

	background: #ccf;

}

.calendar .header-button.active {

	color: #fff;

	background: #47b;

}

/*

.calendar .setting-button:active,

.calendar .setting-button.active:active {

	color: #2b7;

	background: #cfc;

}

*/

.calendar .setting-button.active {

	color: #fff;

	background: #4d9;

}

.calendar .setting-button.disabled {

	color: #777;

	background: #1a6;

	pointer-events: none;

}

.calendar .month-field,

.calendar .year-field {

	border: 0;

	outline: 0;

	padding: 0;

	font-family: "Times New Roman", Times, serif;

	font-size: 14px;

	text-align: center;

	text-align-last: center;

}

.calendar .month-field {

	width: 96px;

	-webkit-appearance: none;

	-moz-appearance: none;

	-o-appearance: none;

	appearance: none;

	overflow: hidden;

}

.calendar .month-field::-ms-expand {

	display: none;

}

.calendar .year-field {

	width: 40px;

}

.calendar .header-button {

	width: 16px;

/*    margin-right: 10px;*/

}

.calendar .setting-button {

	width: 40px;

}

.calendar .weekday-row div,

.calendar .date-grid .excluded-date {

	width: 39px;

}

.calendar .date-grid .normal-date {

	width: 30px;

	height: 24px;

	line-height: 24px;

	margin: 3px 4px;

}

.calendar .normal-date {

	color: #555;

}

.calendar .friday-date {

	color: #292;

}

.calendar .sunday-date {

	color: #c22;

}

.calendar .date-grid .excluded-date {

	font-size: .9em;

	color: #aaa;

}

.calendar .date-grid .normal-date:active {

	color: #fff;

	background: #939;

	-moz-box-shadow: 0 0 1px #000;

	-webkit-box-shadow: 0 0 1px #000;

	box-shadow: 0 0 1px #000;

}

.calendar .date-grid .current-date,

.calendar .date-grid .specialz-date,

.calendar .date-grid .selected-date {

	-moz-box-shadow: 0 1px 3px rgba(0,0,0,.5);

	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.5);

	box-shadow: 0 1px 3px rgba(0,0,0,.5);

}

.calendar .date-grid .current-date {

	color: #fff;

	background: #f31;

}

.calendar .date-grid .specialz-date {

	color: #fff;

	background: #2b7;

}

.calendar .date-grid .selected-date {

	color: #000;

	background: #ffc30d;

}





#datepicker,

#datepicker1,

#datepicker2{

    position: relative

}

#datepicker #pick-button,

#datepicker1 #pick-button1,

#datepicker2 #pick-button2{

    position: absolute;

    top: 0;

    left: 0;

    height: 39px;

    width: 37px;

    background-color: inherit;

    border: none;

    font-size: 18px;

    color: #5B5B5B;

    cursor: pointer

}

#datepicker #pick-button:focus,

#datepicker1 #pick-button1:focus,

#datepicker2 #pick-button2:focus,

.clender_container_ul li button:focus{

    outline:none

}

#picked-text,

#picked-text1,

#picked-text2{

    text-align: right;

    padding-right: 10px;

}

.clender_container .calendar{

/*    width: 273px*/

}

/*

.clender_container_ul{

    display: inline-block

}

*/

.clender_container_ul li{

    display: inline-block

}

.clender_container_ul li button{

    background-color: #000;

    border: none;

    border-radius: 9px;

    padding: 6px 10px;

    cursor: pointer;

}

.clender_container_ul li button img{

    display: inline-block

}

.clender_container{

    width: 100%

}

.clender_container.mini_calender{

    width: 279px

}

.clender_container.verymini_calender{

    width: 199px

}

.verymini_calender .calendar .header-button{

    width: 12px

}

.verymini_calender .calendar .month-field{

    width: 78px

}

.verymini_calender .calendar .setting-button{

     width: 29px;

}

.verymini_calender .calendar .date-grid .normal-date{

    width: 20px;

}

.verymini_calender .calendar .weekday-row div,

.verymini_calender .calendar .date-grid .excluded-date{

    width: 28px   

}



.verymini_calender #picked-text,

.verymini_calender #picked-text1{

    padding-right: 14px;

}

.low_perority .calendar{

    z-index: 2!important

}

@media (min-width: 1700px){



}

@media (max-width:1700px){

    .calendar .date-grid{

        padding-left: 15px;

    }

}

@media (max-width:575px){

    .calendar .date-grid{

        padding-left: 0!important;

    }

}

@media (max-width:450px){

    .calendar .date-grid{

        padding-left: 10px!important;

    }

}