<style>
body {
	font-family: calibri;
	font-size: .8em;
	}

/* the table (within the div) that holds the date picker calendar */
.dpTable {
	font-family: calibri;
	font-size: 18px;
	text-align: center;
	color: #FCFCFC;
	background-color: #727071;
	border: 1px solid #727071;
	padding-bottom: 3px;
	width: auto;
	}

.dpButtonTD{
padding-top: 5px;
padding-bottom: 10px;
}

/* Fent HÓ / ÉV ------additional style information for the text that indicates the month and year */
.dpTitleText {
	font-size: 16px;
	color: #FFFFFF;
	font-weight: bold;
	text-align: center;
	}

/* the forward/backward buttons at the top */
.dpButton {
	font-family: calibri;
	font-size: 18px;
	color: #adabac;
	background-color: black;
	font-weight: bold;
	border: 1px solid black;
	padding: 10px;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 50px;
  width: 40px;
  height: 40px;
	}
  /*---- nyilak---*/
.dpButton i {
    top: 18px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
    border-right-color: white;
    border-width: 10px;
    margin-left: -16px;
}
.dpButton u {
    top: 18px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
    border-left-color: white;
    border-width: 10px;
    margin-left: -3px;
}

	/* NAP 1-31 a table cell that holds a date number (either blank or 1-31) */
.dpTD {
	text-align: center;
	width: 20px;
  padding: 10px;
	background-color: #585657;
	color: white;
	}
	
	/* HOVER NAP 1-31 -- the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */
.dpTDHover {
	background-color: white;
	cursor: pointer;
	color: black;
	text-align: center;
	width: 20px;
  font-weight: bold;
	}

/* TODAY --- a table cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlightTD {
	background-color: white;
	text-align: center;
	}
	
/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlight {
color: #31678E;
/*	background-color: green;*/
	font-weight: bold;
	text-align: center;
	}

/* HKSZCSPSZV ---- a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTD {
	background-color: #d0d0d0;
	color: black;
	padding: 10px;
	font-weight: bold;
	width: 20px;
	text-align: center;
	}



/* the "This Month" and "Close" buttons at the bottom */
.dpTodayButton {
	font-family: calibri;
	font-size: 15px;
	color: white;
	background: black;
	font-weight: bold;
	border: 1px solid black;
	padding: 4%;
	margin-left: 0px;
	margin-top: 6px;
  margin-bottom: 6px;
  width: 48%;
  border-radius: 40px;
	}
	
/*------------------------RESP-------------------------------*/
@media all and (max-width: 500px) { 
/*.................*/
#datepicker{
top: 100px !important;
}
/*.................*/
}

@media all and (max-width: 450px) { 
/*.................*/
#datepicker{
width: 100%;
left: 0px !important;
}
.dpTable{
width: 100%;
}
/*.................*/
}
/*-------------------------------------------------------*/
@media all and (min-width: 602px) and (max-width: 1200px){
h2{
padding-top: 0px;
padding-left: 0px;
}
#datepicker {
    top: 360px !important;
}
/*.................*/
}
/*////////////////*/
@media all and (min-width: 602px) and (max-height: 790px){
h2{
padding-top: 5px;
padding-left: 0px;
}
#datepicker {
    top: 220px !important;
    margin-left: -20px;
}
/*.................*/
}

</style>
