﻿@import url(https://fonts.googleapis.com/css?family=Raleway:400,600,500,300,200,100,700,800,900);



/* General Styles === */
html, body {height: 100%;}

body { background: #fff; font-weight: normal; }
img{border: 0;}
ul{list-style: none outside none;}
a:link, a:hover, a:active, a:visited{ text-decoration: underline;  color: #003363;}

/* Main Structure === */ 
#container{
	padding: 180px 0 0;transition:padding 0.3s ease 0s; 

}


#container.is-sticky{
	padding: 80px 0 0;
}


#header_wrap
{
width: 100%;
margin: 0px;position: fixed; top: 0; z-index:2;

background: #004b68 url(../images/header_bg_left.jpg) no-repeat top left;
border-bottom: 6px solid #047067;   transition:all 0.3s ease 0s; 

}

.is-sticky	#header_wrap {
	 background-image: none ;  

}


#wrapmaster
{
 
min-width:1050px; padding: 0 20px;
}


/* Structural Style === */
#header_master
{

min-width:1050px; padding: 0 20px;
position: relative;
padding: 0px 0 0 0;
height: 168px;
z-index: 10;transition:height 0.3s ease 0s;
}

.is-sticky	#header_master {
	height: 75px;
}


#welcomebox
{
width: 200px;
text-align: right;
position: absolute;
right: 24px;
top: 17px;
padding: 0px 0 0 0;
z-index: 10;
font: 600 12px 'Raleway', sans-serif;
color: #80A5B4;transition: all 0.4s ease 0;
}


.is-sticky #welcomebox {
		opacity: 0; visibility: hidden;

}

/* Welcome Text Style === */
#welcomebox a
{
color: #7FA5B3;
text-decoration: none;
}

#welcomebox a:hover
{
color: #fff;
}

/* Search Button Style === */


/* Buttons Style === */

#searchbutton  {
	transition:  all 0.4s ease 0.2s;
}
.is-sticky #searchbutton {
	opacity: 0; visibility: hidden;transition-delay: 0s;

}
 

#searchbutton a
{
float: left;
padding: 0;
position: absolute;
right: 24px;
top: 63px;
background: #7FA5B3;
width: 52px;
z-index: 10;
font: 700 13px 'Raleway', sans-serif;
text-transform: uppercase;
color: #004B67;
zoom: 1;
text-decoration: none;
padding: 9px 15px 9px 35px;
background: #9AB1BA url(../images/icon_search.png) no-repeat 11px center;
}


#searchbutton a:hover 
{
background: #fff url(../images/icon_search.png) no-repeat 11px center;
}



/* Header Master Style === */

	#logounit
	{
	width: 76px;
	margin: 0 auto;
	position: relative;
	top: 34px;
	padding: 0px 0 0 0;
	height: 71px;transition: all 0.4s ease .2s;	}

#logounit2{
		width: 48px;	
		display: inline-block;
		vertical-align: middle;
		margin: 0 20px 0 0;
		display: none;
}

#logounit2 img{
	width: 48px;
}

.is-sticky #logounit {
	opacity: 0; visibility: hidden;transition-delay: 0s;	}

.is-sticky #logounit2 {
	display: inline-block;
	}



#content_master
{
min-width:1050px; padding: 0 20px;
overflow: hidden;
padding: 0;
background: #fff;
}





/* Heading Style === */
.titlebox
{
width: 1001px;
}

.titlebox h1.head1
{
width: 400px;
font: 600 26px 'Raleway', sans-serif;
margin: 38px 0px 0px 0;
color: #004B67;
padding: 6px 0 30px 53px;
}

.titlebox span.membericon
{
	float: left;
}

.titlebox h2.head2
{
font: normal 26px 'Playfair Display', serif;
line-height: 1.3;
font-weight: 300;
width: 100%;
float: left;
margin: 0px 0px 0px 0;
color: #003363;
padding: 20px 0 24px 0;
}

span.singleline
{
display: block;
font-family: 'Raleway', sans-serif; 
font-weight: 600;
font-size: 13px;
color: #505050;
margin-bottom: 25px;
}

span.singleline.right
{
float: right;
}



/* Form Box Style === */
.formbox
{
	padding: 25px 26px 10px 24px;
box-sizing: border-box;
border: 1px solid #ccc;
width: 100%;
float: left;
margin: 0px 0 14px 0;
}

.formtable
{
width: 100%;	font: 600 14px 'Raleway', sans-serif;	color: #393939;

}
.formtable tr td
{
width: 330px;
}
	
	.formtable tr td table.tableinside td.title
	{
	width: 140px;
	height: 36px;
	vertical-align: middle;
	font-weight: 700;
	}

	.formtable tr td table.tableinside td.field
	{
	width: 200px;
	vertical-align: middle;
	}

input[type=text], input[type=email] {
	border: 1px solid #C2C1C1;
	color: #393939;
	font-weight: 400;
	letter-spacing: 0px;
	font-size: 13px;
	padding: 5px 10px;
	transition: all 0.2s ease 0s;
	display: inline-block;
	min-width: 120px;
	width: 100%;
	box-sizing: border-box;
}

	input[type=option]
	{
	border: 1px solid #C2C1C1;
	color: #393939;
	font-weight: 400;
	letter-spacing: 0px;
	padding: 5px 10px;
	transition: all 0.2s ease 0s;
	display: inline-block;
	font: 600 13px 'Raleway', sans-serif;
	
	}


textarea {
	border: 1px solid #C2C1C1;
	color: #393939;
	font-weight: 400;
	letter-spacing: 0px;
	font-size: 13px;
	padding: 5px 10px;
	transition: all 0.2s ease 0s;
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	min-height: 15px;
	font-family: 'Raleway', sans-serif;
}


select {
	border: 1px solid #C2C1C1;padding: 5px 10px;


}
	
	
/* Buttons Style === */
.button_group
{
width: 100%;
margin: 0;
}

.buttons_wrap
{
margin: 0px 0 15px 0;
}
.btn-primary {
color: #004B67;
background-color: #9AB1BA;
}
.btn {
display: inline-block;
margin-left: 1px;
padding: 6px 23px;
font: 700 14px 'Raleway', sans-serif;
height: 37px;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
text-transform: uppercase;
}

.btn:hover{ color: #fff; font-weight: bold; background:  #004b68;}





/* Table Style Two === */
table {
border-spacing: 0px;
border-collapse: collapse;
background-color: transparent;
width: 100%;

}
table.styled {
font-family: 'Raleway', sans-serif; font-weight: 600;
border: 0px;

font-size: 13px
}
table.styled tr th {
color: #FFF;
font: 700 13px 'Raleway', sans-serif;
border: 1px solid #004B68;
border-left:0;
border-bottom: none;
padding: 14px 10px;
}
th {text-align: left;}
td, th {padding: 0px;}

table.styled tr td {
    color: #3B3B3B;
    padding: 13px 10px;
    font: 500 13px "Raleway",sans-serif;
    line-height: 20px;
}


table.styled tr td:last-child,table.styled tr th:last-child {
	border-right: 0;
}


/* Table Style Two === */
table.two {border-color: #D1D1D1;}
table.two tr th {background: #004B68 none repeat scroll 0% 0%; min-width: 100px;}
table.two td, table.two th {border-right: 1px solid #D1D1D1;
}

table.two th {border-right: 1px solid #C2C1C1;}
table.two tr:nth-child(odd) {background: #fff;}
table.two tr:nth-child(even) {background: #D7E0E3;}



.data-list  {
	  border-width: 1px; border-style: solid;
margin: 58px 0px 0 0;overflow-x: auto;  overflow-y:hidden;
}


@media (max-width: 1090px) {
.data-list  { overflow-x: auto;} 
}
.data-list.two {border-color: #D1D1D1;}


.data-list-actions{
	border: 1px solid #d1d1d1; border-top: 0; padding: 13px 10px; margin: 0 0 15px 0;
}
.data-list-actions:after,.data-list-actions:before{
	content: ''; display: table;
}
.data-list-actions:after {
	clear: both;
}
 

/* Pagination */

#ks-eventPager {
width: 440px;
float: left;
margin-top: 4px;
margin-left: 10px;
}


.ks-btnFirstEvent, .ks-btnPrevEvent, .ks-btnLastEvent, .ks-btnNextEvent {
	border: none;
	text-indent: -99999px;
	background: url(../images/pager-btn-new.png) right top no-repeat;
	width: 6px;
	height: 7px;
	margin: 5px 8px 0 0;
	padding: 0 0px;
	display: block;
	float: left;
	cursor: pointer;
	font-size: 0;
	color: #fff;
}


.ks-btnPrevEvent {
	background-position: right top;
}
.ks-btnPrevEvent{
	margin-right: 4px;
	background-position: -26px top;
}
.ks-btnNextEvent {
	margin: 7px 5px 5px 10px;
	background-position: -7px -7px;
}
.ks-btnLastEvent {
	margin: 7px 5px 5px 2px;
	background-position: left top;
}


.ks-btnFirstEvent:hover {
	background-position: right -7px;
}
.ks-btnPrevEvent:hover {
	background-position: -26px -7px;
}
.ks-btnNextEvent:hover {
	background-position: -7px top;
}
.ks-btnLastEvent:hover {
	background-position: left -7px;
}
.ks-btnNumber {
	font-family: 'Raleway', sans-serif; 
	font-weight: 500;
	font-size: 13px;
	border: none;
	margin-right: -3px;
	margin-top: -2px;
	padding: 0;
	float: left;
	cursor: pointer;
	color: #99B1B9;
	background: none;
	letter-spacing: 0.3px;
}

.ks-btnNumber:hover{
	color: #000;
}

.ks-btnNumber.current{
	color: #000;
}

@media screen and (-webkit-min-device-pixel-ratio:0)
{
.ks-btnNumber {margin-right: 3px;}
}

@media all and (-ms-high-contrast:none)
     {
	.ks-btnNumber {margin-right: 3px; margin-top: 0px;}
	

     }

/* Print Button === */

.print_button
{
width: 85px;
margin: 0 auto;
background: url(../images/icon_print.png) no-repeat top left;
padding: 7px 0 0 34px;
 
height: 16px;
color: #004B67;
text-transform: uppercase;
font: 500 11px 'Raleway', sans-serif;
}

.print_button a
{
color: #004B67;
text-decoration: none;
}


/* Print Button === */

.record_list
{
width: 441px;
float: right;
text-align: right;
padding-right: 1px;
margin-top:-22px;
}
	.record_list ul
	{
		float: right;
	}
	
	.record_list ul li.title
	{
	color: #004B67;
	}

	.record_list ul li
	{
	float: left;
	font: 600 13px 'Raleway', sans-serif;
	color: #99B1B9;
	padding-right: 4px;
	margin-top: 5px;
	}
	
	.record_list ul li a
	{
	color: #99B1B9;
	text-decoration: none;
	}
	
	.record_list ul li a:hover
	{
	color: #004B67;
	}
	


/* Total Count === */

.total_count
{
width: 100%;
float: left;
color: #004B67;
margin-bottom: 20px;
font: 600 13px 'Raleway', sans-serif;
}





/* Action links Style === */
.links_wrap
{
width: 100%;
padding: 0px 0;
margin: 0px auto;
display: inline-block;
}
.action_links{display:inline-block; padding:0; margin: 0px 0 20px 0}
.action_links li{display:inline}
.action_links li a{text-decoration: underline; color: #003363; float:left; border-right: 1px solid #003363; padding: 0px 10px; transition:background-color .3s; font-size: 13px; font-family: 'Raleway', sans-serif; font-weight: 400;}
.action_links li a:hover,.w3-pagination li a:focus{color:#8f7743;}
.action_links li a:focus.active{background-color:#f00}
.action_links li a.first{padding-left: 0;}
.action_links li a.last{padding-right: 0;  border-right: none;}
.action_links li a:focus.noborder{background-color:#f00}







/* Footer Style === */
#footer
{
width: 100%;
height: 40px;
padding: 10px 0;
margin: 130px 0 0 0;
text-align: center;
color: #ACACAC;
font: 500 11px 'Raleway', sans-serif;
text-transform: uppercase;
}
	
.clearfloat 
{
clear:both;
height:0;
font-size: 1px;
}




















/* auto complete */

.auto-complete{
	position: absolute; background:#057068; min-width: 250px; margin: 8px 0 0; font: 600 12px "Raleway",sans-serif; left: 0; z-index:1;  display: none;

}
.auto-complete:before {
	
bottom: 100%;
	left: 16px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(5, 112, 104, 0);
	border-bottom-color: #057068;
	border-width: 8px;
}
.auto-complete li {
	padding: 8px 18px; color: #fff; cursor: pointer; line-height: 15px;
}
.auto-complete li:first-child {
	padding: 10px 18px 8px 18px;
}

.auto-complete li:hover{
	background: #043834;
}

.auto-complete li > span {
	display:block; font-weight: 400;
}

.auto-complete li > span:first-child {
	font-weight: 600;
}

.auto-complete li strong {
	color:#67bed9;  font-weight: normal;
}





/*modal window */

.modal-background,.page-loading { position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 99; background: rgba(51, 111, 134, 0.7); }


.modal-window {
	position: absolute; width: 850px; min-height: 300px; top: 20%; left: 50%; margin-left:-470px; z-index: 100; background: #fff; padding: 30px 45px; 
}

.modal-head { border-bottom: 6px #004b68 solid; padding:0 0 20px 0; position: relative;
	
}
.modal-head h2 {
	font: 600 26px 'Raleway', sans-serif; color: #004b68;
}


.modal-head .close {
	display: inline-block; position: absolute; top: 10px; right: 0; background: url('../images/icon_close.png') no-repeat; width: 18px; height: 15px;
}

.modal-content {
	padding: 30px 0;
}


.modal-foot {
	text-align: right;
}
 



/* page loading */


.page-loading div{
	position: absolute; top: 50%; left: 50%; margin: -18px 0 0 -18px; }

[data-loader=circle]
{
    width: 36px;
    height: 36px;

    -webkit-animation: circle infinite .75s linear;
       -moz-animation: circle infinite .75s linear;
         -o-animation: circle infinite .75s linear;
            animation: circle infinite .75s linear;

    border: 3px solid #fff;
    border-top-color: transparent;
    border-radius: 100%;
}
@-webkit-keyframes circle
{
    0%
    {
        -webkit-transform: rotate(0);
            -ms-transform: rotate(0);
             -o-transform: rotate(0);
                transform: rotate(0);
    }
    100%
    {
        -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
             -o-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}
@-moz-keyframes circle
{
    0%
    {
        -webkit-transform: rotate(0);
            -ms-transform: rotate(0);
             -o-transform: rotate(0);
                transform: rotate(0);
    }
    100%
    {
        -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
             -o-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}
@-o-keyframes circle
{
    0%
    {
        -webkit-transform: rotate(0);
            -ms-transform: rotate(0);
             -o-transform: rotate(0);
                transform: rotate(0);
    }
    100%
    {
        -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
             -o-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}
@keyframes circle
{
    0%
    {
        -webkit-transform: rotate(0);
            -ms-transform: rotate(0);
             -o-transform: rotate(0);
                transform: rotate(0);
    }
    100%
    {
        -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
             -o-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}




/* grid */



.row { margin: 0 -20px 10px; }
.row:after,.row:before{ content:'';display: table; }
.row:after {clear:both; }


.col-6 { float: left; width: 50%; padding: 0 20px; box-sizing: border-box; }
.col-4 { float: left; width: 33.33%; padding: 0 20px; box-sizing: border-box; }
.col-12 { padding: 0 20px;   box-sizing: border-box; }

/* forms */


/* custom checkbox */
.custom-checkbox input[type=checkbox] {
    	opacity: 0;
}
.custom-checkbox input[type=checkbox] + label {
	position: relative; margin: 0 0 0 15px;
}
.custom-checkbox input[type=checkbox] + label:before{
position: absolute;
	content:'';
    display:inline-block;
    width:23px;
    height:23px;
 	left: -31px;
 	top:-2px;
    background:url('../images/custom_checkbox.png') left bottom no-repeat;
    cursor:pointer;
}
.custom-checkbox input[type=checkbox]:checked + label:before{
    background:url('../images/custom_checkbox.png') left top no-repeat;
}



.form-group { margin: 0 0 10px; font: 500 14px 'Raleway', sans-serif;	color: #393939; }
.form-group:after,.form-group:before{ content:'';display: table; }
.form-group:after {clear:both; }

.form-group label { width: 130px; float: left; font-weight: 600; padding: 5px 0 0; }

.form-group div.field{ margin: 0 0 0 140px; position: relative; }
.form-group div.value{margin: 0 0 0 140px; padding: 5px 0 0; }

.form-group input[type=checkbox] { margin: 5px 0 0 ; }
.form-group .field.custom-checkbox  label{
	margin-left: 30px;
}

.form-group .field.custom-checkbox input[type="checkbox"] + label::before {
	top:0;
}



.date-picker {max-width: 160px; }
 
.date-picker input[type=text] { width: 110px;box-sizing: border-box; 	}


.date-trigger { display: inline-block; position: relative; top: 4px; margin-left: 4px; }

