@charset "UTF-8";
@import url("http://fonts.googleapis.com/css?family=Montserrat:400,700");
@import url("http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css");
*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
.header {
  position: absolute;
  top: auto;
  bottom: 0;
  left: auto;
  right: auto;
  z-index: 9;
  width: 100%;
  min-height: 60px;
  padding: 0;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 1px 4px rgba(228, 228, 228, 0.95);
  z-index: 9999;
}

html {
  box-sizing: border-box;
  font-family: "Montserrat", helvetica, arial, sans-serif;
  font-size: 100%;
  line-height: 1.5;
  color: #27313C;
  background-color: #F3F3F3;
}
@media (min-width:768px){.col-hb-4,.col-hb-3,.col-hb-2,.col-hb-1,.col-hb-12{float:left}.col-hb-4{width:32%}.col-hb-3{width:23.9%}.col-hb-2{width:18.8%}.col-hb-1{width:8.33333333%}.col-hb-12{width:100%}}

.col-hb-4,.col-hb-3,.col-hb-2,.col-hb-1,.col-hb-12{position:relative;min-height:1px;padding-right:15px;padding-left:15px}
input, button , select ,textarea ,label {
  -webkit-transition: all 0.5s ease;
          transition: all 0.5s ease;
  padding: 0.75em;
  font-size: inherit;
  border-radius: 3px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  background-color: #E2E5E5;
  border: 2px solid #E2E5E5;border-radius:5px;
  width:90%;
}

.l2 {
  width:100%;
}

input:focus, button:focus, textarea:focus, select:focus 
 {
  border-color: #919FAF;
  background-color: #919FAF;
}
::-webkit-input-placeholder {
  font-size: 0.75em;
  color: #919FAF;
}

button:focus, input:focus, textarea:focus, select:focus
  {
  position: relative;
  outline: none;
  color: white;
}

input[type=submit], button {
  display: inline-block;
  font-size: 0.875em;
  padding: 0.71429em 2.28571em;
  margin: 0.28571em 0;
  color: white;
  -webkit-font-smoothing: antialiased;
  background-color: #2AB0C5;
  border: 2px solid #2AB0C5;
  text-transform: uppercase;
}
input[type=submit]::before, input[type=submit]::after, button::before, button::after {
  font-family: "Ionicons";
  content: "";
  margin: 0 0.25em;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
input[type=submit]::after, button::after {
  content: "";
}
input[type=submit]:focus, button:focus {
  border-color: #2392a3;
  background-color: #2392a3;
}
input[type=submit]:focus::after, input[type=submit]:focus::before, button:focus::after, button:focus::before {
  opacity: 1;
}

input[type=checkbox] {
  position: relative;
  -webkit-appearance: none;
  height: 2em;
  width: 4em;
  border-radius: 1.5em;
  background-color: #E2E5E5;
  border-color: transparent;
  background-clip: padding-box;
  color: #919FAF;
  vertical-align: middle;
}
input[type=checkbox]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 50%;
  background-color: white;
  border-radius: 100%;
  border: 2px solid transparent;
  -webkit-transition: all 0.5s ease;
          transition: all 0.5s ease;
  background-clip: padding-box;
  z-index: 2;
}
input[type=checkbox]::after {
  position: absolute;
  left: 0.675em;
  top: 0.375em;
  font-family: "Ionicons";
  content: "";
  letter-spacing: 0.75em;
  z-index: 1;
}
input[type=checkbox]:focus {
  color: white;
  border-color: transparent;
  background-color: #919FAF;
}
input[type=checkbox]:checked {
  color: white;
  background-color: #1ABC9C;
  border-color: transparent;
}
input[type=checkbox]:checked::before {
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
}

.mt{
 width:100%;
 height:100%;
 
}
.mt td{
	 padding:5px;
}

.multiselect {
    width:90%;
    height:10.4em;
    border:solid 1px #c0c0c0;
    overflow:auto;
}

.multiselect label {
    display:block;

}
 
.multiselect-on {

    color:#ffffff;
    background-color:#919FAF;
}


.scrollbar2
{
	float: left;
	height: 100%;
	width: 100%;
	background: #F5F5F5;
	overflow-y: scroll;
	margin-bottom: 25px;
}

.scrollbar
{
	margin-left: 30px;
	float: left;
	height: 550px;
	width: 1200px;
	background: #F5F5F5;
	overflow-y: scroll;
	margin-bottom: 25px;
}

.force-overflow
{
	min-height: 450px;
}



/*
 *  STYLE 2
 */

#style-2::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #494949;
}


/*
 *  STYLE 1
 */

#style-1::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}

.responstable {
  margin: 0.5em 0;
  width: 100%;
  overflow: hidden;
  background: #FFF;
  color: #024457;
  border-radius: 10px;
  border: 3px solid #167F92;
  text-align:center;
}
.responstable tr:nth-child(odd) {
  background-color: #EAF3F3;
}

.responstable td {
	 border: 1px solid #D9E4E6;
}
.responstable th {
font-size:24px;
  border: 1px solid #167F92;
  background-color: #167F92;
  color: #FFF;
  padding: 1em;
    text-align: center;
}
.PACKAGE {
text-align:left;
}

h1 {
text-align:center;
}

.innerimage {position:absolute ; top:200px ; left:20px; width:100%; height:60%
	
} 

.smim{
	width:7em; height 7em;
}
.mim{
	width:7em; height:13em;
}

	
	/* 
	Max width before this PARTICULAR table gets nasty
	This query will take effect for any screen smaller than 760px
	and also iPads specifically.
	*/
	@media 
	only screen and (max-width: 760px),
	(min-device-width: 768px) and (max-device-width: 1024px)  {
	
		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr { 
			display: block; 
		}
		
		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr { 
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
		
		tr { border: 1px solid #ccc; }
		
		td { 
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee; 
			position: relative;
			padding-left: 50%; 
		}
		
		td:before { 
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 6px;
			left: 6px;
			width: 45%; 
			padding-right: 10px; 
			white-space: nowrap;
		}
		
		/*
		Label the data
		*/

	
	/* Smartphones (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px) {
		body { 
			padding: 0; 
			margin: 0; 
			width: 320px; }
		}
	
	/* iPads (portrait and landscape) ----------- */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		body { 
			width: 495px; 
		}
	}