/*****************************************************************************************************
Client			: Chandernagore College                                       
Developer		: www.sdsglobalexim.com                                       
Author			: Arindam Chakraborty                                                       
No of Lines		: 384
Last Updated On	: 2020-01-08
*****************	ARRANGEMENTS	*****************************************************************	
General code		: 14 - 2006
index.php			: 2008 - 3019

COLOURS USED UP::
1. #ffb973
2. #9ed7e0

FONTS
font-family: 'Rye', cursive;  			--> Old English Font type | For Header Title
font-family: 'Roboto', cursive; 		--> General Text
font-family: 'Oswald', sans-serif;		--> Menu
font-family: 'Abril fatface;			--> class h1 "Welcome Section"
font-family: 'cambria;					--> Titles, Sub-titles
font-family: 'Lalezar', cursive;
font-family: 'Ewert', cursive;	
/* ===========================================================================================================================================================================
##########		Dialog Box To Messages		########################### 
============================================================================================================================================================================== */	
	.dialog-container
	{
		position:fixed;
		left:0;
		top:0;
		width:100%;
		height:100%;
		background-color:rgba(0,0,0,0.1);
		z-index:9990;
	}
		.dialog
		{
			position:relative;
			width:600px;
			height:150px;
			margin:0 auto;
			background-color:#bbbbbb;
			z-index:9991;
			top:50%;
			transform:translateY(-50%) !important;
			border:2px solid #333;
		}
			.dialog-header
			{
				position:relative;
				width:100%;
				height:30px;
				margin:0;
				padding-left:10px;
				box-sizing:border-box;
				
				text-align:left;
				line-height:30px;
				background-color:#7c7c7c;
				
				font-size:1.0em;
				font-weight:bold;
				color:#051627;
			}
			.dialog-body
			{
				position:relative;
				width:100%;
				height:70px;
				margin:0;
				padding:25px 15px;
				box-sizing:border-box;
				
				text-align:center;
				//line-height:25px;
				background-color:transparent;
				
				font-size:0.9em;
				font-weight:bold;
				word-spacing:1px;
				color:#c10500;
			}
			.dialog-footer
			{
				position:relative;
				width:100%;
				height:50px;
				margin:0;
				padding-left:10px;
				box-sizing:border-box;
				
				text-align:left;
				line-height:25px;
				background-color:transparent;
				
				font-size:0.8em;
				font-weight:bold;
				color:#121;
			}
		.dialog-close
		{
			position:relative;
			display:block;
			width:100px;
			height:28px;
			margin:11px auto;
			
			background-color:#386767;
			color:#fff;
		}
	
/* =========================================================================================================================================================================
##########################		TOOLTIP		###################################################
============================================================================================================================================================================ */	
	
	.tooltip
	{
		position:absolute;
		display:block;
		width:140px;
		height:25px;
		left:0px;
		bottom:120%;
		border-radius:4px;
		
		background-color:#5b5b5b;
		color:#fff;
		font-size:12px;
		font-family:verdana;
		text-align:center;
		line-height:25px;
		
		z-index:999999 !important;
		
		opacity:0;
		transform:scaleY(0);
		transition: all 0.3s ease;
	}
	.tooltip:after
	{
		content:'';
		position:absolute;
		left:15px;
		bottom:-5px;
		width:0;
		height:0;
		border-top:5px solid #5b5b5b;
		border-left:5px solid transparent;
		border-right:5px solid transparent;		
	}

/* =========================================================================================================================================================================
##########################		CALENDER		###################################################
============================================================================================================================================================================ */	

	.calendar
	{
		position:relative;		
		width:98%;
		max-width:200px;
		height:auto;
		margin:5px auto;
		box-sizing:border-box;
	}
		.calendar .calendar-header
		{
			position:relative;
			width:100%;
			height:25px;
			margin-bottom:3px;
			box-sizing:border-box;
			
			font-size:14px;
			font-weight:bold;
			background-color:#3a6da7;
			color:#fff;
			
			text-align:center;
			line-height:25px;
		}
		.calendar table
		{
			width:100%;
			height:auto;
			border-spacing:2px;
			font-family:times;
			font-size:11px;
		}
			.calendar table th
			{
				width:14.28%;
				height:30px;
				background-color:#308aba;
				color:#fff;
				border:1px solid #666;
			}
			.calendar tr
			{
				background-color:#bcdcf3;
			}
			.calendar table td
			{
				//padding:5px;
				border:1px solid #999;
				font-weight:bold;
				max-width:40%;
				text-align:center;
				height:22px;
			}
	
		.available_day
		{
			background-color:#89c1e0;
		}
		.currentDay
		{
			background-color:#bf0000;
			color:#ffffff;
			font-size:14px;
		}

/* =========================================================================================================================================================================
##########################			DATEPICKER		###################################################
============================================================================================================================================================================ */		
	
	.datepicker
	{
		position			: relative;
		float				: left;
		box-sizing			: border-box;
		display				: block;	
		width				: auto;
		height				: auto;
		margin				: 0;
		padding				: 5px 10px;
		
		background-color	: rgba(30,30,30,0.2);
		text-align			: left;
	}
		.datepicker select
		{
			position			: relative;
			display				: block;
			float				: left;
			height				: 35px !important;
			margin				: 0;
			margin-right		: 5px;
			padding				: 0;
			
			background-color	: #eee;
			color				: #112751;
			
			font-family			: tahoma;
			font-size			: 11px;
			font-weight			: 400;
			
			border				: none;			
		}
		.datepicker select[name=dtpYear]
		{
			width				: 80px !important;
		}
		.datepicker select[name=dtpMonth]
		{
			width				: 100px !important;
		}
		.datepicker select[name=dtpDate]
		{
			width				: 80px !important;
		}
		
		.datepicker .bttnDTP
		{
			position			: relative;
			display				: block;
			box-sizing			: border-box;
			float				: left;
			width				: 35px;
			height				: 35px;
			line-height			: 35px;
			margin				: 0;
			margin-right		: 5px;
			padding				: 0;
			background-color	: transparent;
			border				: 2px solid #333;
			text-align			: center;
			font-size			: 20px;
			font-weight			: 600;
			transition			: 0.3s;
		}		
		.datepicker .bttnDTP[name=dateSet]
		{
			color				: #18253d;
		}
		.datepicker .bttnDTP[name=dateSet]:hover
		{
			background-color	: #18253d;
			color				: #fff;
		}
		.datepicker .bttnDTP[name=dateClose]
		{
			margin-right		: 0;
			color				: #f00;
		}
		.datepicker .bttnDTP[name=dateClose]:hover
		{
			background-color	: #f00;
			color				: #fff;
			border-color		: #f00;
		}
			/*.datepicker button i
			{
				position			: relative;
				display				: block;
				top					: 50%;
				transform			: translateY(-50%);
			}*/
/* =========================================================================================================================================================================
##########################			ACCORDIAN		###################################################
============================================================================================================================================================================ */

	.accord-frame
	{
		position:relative;
		float:left;
		width:100%;
		height:auto;
		margin-bottom:2px;
	}
		.accord-frame-header
		{
			position			: relative;
			float				: left;
			width				: 100%;
			height				: 40px;
			background-color	: #942e10;
			font-weight			: bold;
			color				: #fff;
			box-sizing			: border-box;
			line-height			: 40px;
			padding-left		: 15px;
			cursor				: pointer;
			display				: flex;
			flex-wrap			: wrap;
		}
		.accord-frame-header:hover
		{
			background-color	: #fff !important;
			color				: #942e10;
			border				: 2px solid #942e10;
		}
			.accord-frame-header span.accord-frame-header-text
			{
				flex				: 1;
				font-family			: "Ubuntu",sans-serif;
				font-size			: 1.2rem;
				font-weight			: 500;
			}
			.accord-frame-header:hover span.accord-frame-header-text
			{
				font-weight			: 600;
			}
			.accord-frame-header span.accord-frame-header-icon
			{
				width				: 30px;
			}
		.accord-frame-content
		{
			position			:relative;
			float				:left;
			width				:100%;
			height				:auto;
			border				:2px solid #942e10;
			border-top			:none;
			font-family			: times;
			font-size			:14px;
			font-weight			:bold;
			color				:#0c4489;
			box-sizing			:border-box;
			padding				:15px;
			text-align			:justify;
			display				: none;
		}