/*
 Stylesheet for Tigra Calendar v5.0
 Product is Public Domain (Free for any kind of applicaiton, customization and derivative works are allowed) 
 URL: http://www.softcomplex.com/products/tigra_calendar/

  - all image paths are relative to path of stylesheet
  - the styles below can be moved into the document or in existing stylesheet
*/

/* input box in default state */ 
.tcal
{
 background-image: url('/images/cal_01.png');
 background-repeat: no-repeat;
 background-position: right; 
 background-size: contain;
 padding-right: 20px;
 cursor: pointer;
}

/* additional properties for input boxe in activated state, above still applies unless in conflict */
.tcalActive
{

}
/* container of calendar's pop-up */
#tcal {
 position: absolute;
 visibility: hidden;
 z-index: 100;
 width: 650px;
 margin-top: 2px;
 padding: 0 6px;
 background-color: black;
 background-image: url('/images/bg_01.jpg');
 background-size: cover;
 border: 1px solid silver;
 border-radius: 10px;
 color: white;
}

#cal_up
{
 display: flex;
 flex-direction: row;
 width: 100%;
 min-height: 215px;
}

#cal1
{
 margin-right: 30px;
}

.cal_section
{
 width: 50%;
}

#cal_down
{
 text-align: right;
 line-height: 30px;
 padding-right: 10px;
}

#ctrl_clear
{
 display: none;
 color: red;
 cursor: pointer;
}

/* table containing navigation and current month */
.tcalControls {
	border-collapse: collapse;
	border: 0;
	width: 100%;
}
.tcalControls td {
	border-collapse: collapse;
	border: 0;
	padding: 0;
	width: 16px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	cursor: pointer;
}
.tcalControls th {
	border-collapse: collapse;
	border: 0;
	padding: 0;
	line-height: 30px;
	/*font-size: 13px;*/
	text-align: center;
	font-family: Tahoma, Geneva, sans-serif;
	font-weight: bold;
	white-space: nowrap;
}

.ctrl_img
{
 background-repeat: no-repeat;
 background-position: center; 
 background-size: contain;
}
#tcalPrevYear { background-image: url('/images/arr_yl_01.png'); }
#tcalPrevMonth { background-image: url('/images/arr_l_01.png'); }
#tcalNextMonth { background-image: url('/images/arr_r_01.png'); }
#tcalNextYear { background-image: url('/images/arr_yr_01.png'); }

/* table containing week days header and calendar grid */
.tcalGrid
{
 border-collapse: collapse;
 width: 100%;
}
.tcalGrid th
{
 padding: 5px 0px 20px 0px;
 text-align: center;
 font-family: Tahoma, Geneva, sans-serif;
 font-size: 16px;
 color: gray;
}
.tcalGrid td
{
 border: 0;
 border-collapse: collapse;
 padding: 4px 0;
 text-align: center;
 font-family: Tahoma, Geneva, sans-serif;
 width: 14%;
 /*font-size: 13px;*/
 cursor: pointer;
}		
.tcalGrid td.tcalOtherMonth
{ 
 color: darkred; 
 cursor: default;
}
/*.tcalGrid td.tcalWeekend { background-color: #ACD6F5; }*/
.tcalGrid td.tcalFree { background-color: #424242; }
.tcalGrid td.tcalToday { border: 1px solid red; }
.tcalGrid td.tcalSelected { background-color: darkgreen; }
.tcalHalfSelEnd
{
 background-image: linear-gradient(to top left, rgba(255,0,0,0), darkgreen);
}
.tcalHalfSelStart
{
 background-image: linear-gradient(to bottom right, rgba(255,0,0,0), darkgreen);
}
.tcalTakenSelStart
{
 background-image: linear-gradient(to bottom right, rgba(255,0,0,0), darkred);
}
.tcalTakenSel { background-color: darkred; }
.tcalTakenSelEnd
{
 background-image: linear-gradient(to top left, rgba(255,0,0,0), darkred);
}
.tcalCombTendSstart
{
 background-image: linear-gradient(to top left, darkgreen, darkred);
}
.tcalCombTstartSend
{
 background-image: linear-gradient(to top left, darkred, darkgreen);
}

@media only screen and (max-width: 768px) /* phone 768px */
{
 #tcal
 {
  width: 100%;
  max-width: 560px;
 }
}

@media only screen and (max-width: 480px) /* phone 480px */
{
 #tcal
 {
  width: 100%;
  max-width: 480px;
 }
 #cal_up
 {
  flex-direction: column;
 }
 #cal1
 {
  margin-right: 0;
 }
 .cal_section
 {
  width: 100%;
 }
}