/************* MEDIA CALLS *************/

/***************/
/*   STANDARD  */
/***************/

@media (max-width: 640px) {}

/***************/
/*   HANDHELD  */
/***************/

@media only screen and (orientation:landscape) and (max-device-width:1024px)  {}



/************* PAGE/STANDARD STYLING *************/

* {margin: 0; padding: 0;}

img  {border-style: none;}

html  {width: 100%;}

body  {font-family: 'Open Sans', sans-serif;}

a:link {color:inherit;text-decoration:none;}
a:visited {color:inherit;text-decoration:none;}
a:hover {color: inherit;text-decoration:none;}
a:active {color:inherit;text-decoration:none;}

.resize  {width: 100%;}

h1, h2, h3  {font-family: 'Montserrat', sans-serif;}

p  {color: #4b4b4b;}

span.bold  {font-weight: 700;}

.nodisplay  {display: none;}

.greyout  {cursor: not-allowed !important; opacity: 0.15;}

.clear  {clear: both;}

.float_left  {float: left;}
.float_right  {float: right;}

.outer-wrapper  {overflow: hidden;}

span.blue  {color: #00b6cf;}
spans.sans  {font-family: 'Open Sans', sans-serif;}
span.mont  {font-family: 'Montserrat', sans-serif;}

.checkboxlabel  {
	width: auto;
	height: auto;
	float: left;
}

.checkbox  {
	width: 17px;
	height: 17px;
	border: 1px solid #00b6cf;
	float: left;
	margin: 0 0 0 12px;
}

.checked  {
	background-image: url('../images/check.svg') !important;
	background-size: contain;
}

input[type=text]  {
	width: 100%;
	max-width: 400px;
	height: auto;
	display: block;
	font-size: 14px;
	box-shadow: none;
	border-radius: 10px;
	border: 1px solid #00b6cf;
	background-color: #FFF;
	padding: 4px 6px;
	margin-top: -3px;
}

.searchfield {padding: 6px 8px !important;}

select  {
	width: auto;
	min-width: 100px;
	height: auto;
	border: none;
	background-color: #FFF;
	border: 1px solid #00b6cf;
	color: #4b4b4b;
	padding: 4px 8px;
	-webkit-appearance: none;
	background-image: url('../images/drop_arrow.svg');
	background-repeat: no-repeat;
	background-position: 95% 50%;
	background-size: 12px auto;
}

div img  {width: 100%; height: auto;}

.table_wrapper, .table_function_container, .table_container, .container-header  {}



/************* HEADER STYLING *************/

#headercontainer  {
	width: 100%;
	min-width: 1024px;
	height: 100px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	background-color: #565c67;
	padding: 0 2%;
}

#headercontainer p {color: #fff;}
       
#header  {
	width: 100%;
	height: auto;
	margin: 0 auto;
}

#headerleft  {
	width: 33.3%;
	height: auto;
	float: left;
	padding: 20px 0;
}

#headermiddle  {
	width: 33.3%;
	height: auto;
	float: left;
	padding: 20px 0;
}

#headermiddle .searchfield  {
	line-height: 40px;
	border: 0px;
}

#headerright  {
	width: 33.4%;
	height: auto;
	float: left;
	padding: 8px 0;
}

#headerrightbuttoncontainer  {
	width: auto;
	height: auto;
	float: right;
	padding: 5px 0;
}

.headerrightbutton  {
	width: auto;
	max-width: 30px;
	height: auto;
	float: left;
	margin-left: 7px;
}

.headerrightbutton img  {cursor: pointer;}



/************* TOOLBAR STYLING *************/

.toolbarwrapper  {
	width: 100%;
	min-width: 1024px;
	height: auto;
	background-color: #f3f4f4;
	color: #4b4b4b;
	font-size: 12px;
	position: fixed;
	top: 100px;
	left: 0;
	padding: 14px 2%;
	z-index: 10;
}

.toolbartitle  {
	width: 20%;
	height: auto;
	float: left;
	line-height: 26px;
}

.toolbarcontainer  {
	width: auto;
	height: auto;
	float: right;
}

.toolbarmain  {
	width: auto;
	height: auto;
	float: left;
}

.subtoolbar  {
	width: auto;
	height: auto;
	float: left;
}

.toolbaritem  {
	width: auto;
	height: 24px;
	float: left;
	cursor: pointer;
	margin: 0 8px;
}

.toolbaritem img {
	width: auto !important;
	height: 100% !important;
}

.toolbar_group  {
	width: auto;
	height: auto;
	float: left;
	border-left: 1px solid #4b4b4b;
	margin: 0 6px;
}



/************* MAIN STYLING *************/

#maincontainer  {
	width: 100%;
	min-width: 1024px;
	height: auto;
	padding: 145px 0 40px 0;
}

#main  {
	width: auto;
	height: auto;
	padding: 40px 80px;
}



/************* CLIENT PROFILE STYLING *************/

fieldset  {
	width: 100%;
	min-width: 0;
	height: auto;
}

.page-header  {
	width: 100%;
	height: auto;
	font-family: 'Montserrat', sans-serif;
	color: #4b4b4b;
	padding: 0 20px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 22px;
}

#pagesubheaderleft  {
	width: 20%;
	height: auto;
	float: left;
}

#pagesubheaderleft img {
	width: 20px;
	height: auto;
	cursor: pointer;
}

#pagesubheadermiddle  {
	width: 60%;
	height: auto;
	float: left;
	text-align: center;
}

#pagesubheaderright  {
	width: 20%;
	height: auto;
	float: left;
}

#viewclient  {
	font-size: 13px !important;
	line-height: 20px !important;
	color: #4b4b4b;
}

#viewclient .page-header  {
	border: 1px solid transparent;
    -moz-border-image: -moz-linear-gradient(left, #FFF 20%, #00b6cf 45%, #4b4b4b 50%,  #00b6cf 55%, #FFF 80%);
    -webkit-border-image: -webkit-linear-gradient(left, #FFF 20%, #00b6cf 45%, #4b4b4b 50%,  #00b6cf 55%, #FFF 80%);
    border-image: linear-gradient(to right, #FFF 20%, #00b6cf 45%, #4b4b4b 50%,  #00b6cf 55%, #FFF 80%);
    border-image-slice: 1;
	border-top: 0px;
	border-right: 0px;
	border-left: 0px;
	padding-bottom: 16px;
	margin-bottom: 16px;
}

#viewclient-right .client_sub_container:nth-child(even)  {background-color: #f4f4f4 !important;}

#viewclient-left  {
	width: 25%;
	height: auto;
	float: left;
	margin-right: 2%;
}

#viewclient-right  {
	width: 73%;
	height: auto;
	float: left;
}



/************* TOMBSTONE DATA STYLING *************/

.tombstonedatawrapper  {
	width: 100%;
	height: auto;
	float: left;
	transition-property: background-color;
    transition-duration: 0.25s;
    transition-timing-function: linear;
	-webkit-box-shadow: 3px 3px 6px 0 rgba(0,0,0,0.2);
	box-shadow: 3px 3px 6px 0 rgba(0,0,0,0.2);
	border: 1px solid transparent;
    -moz-border-image: -moz-linear-gradient(top, #FFF 0%, #00b6cf 100%);
    -webkit-border-image: -webkit-linear-gradient(top, #FFF 0%, #00b6cf 100%);
    border-image: linear-gradient(to bottom, #00b6cf 0%, #FFF 100%);
    border-image-slice: 1;
	border-right: 0px;
}

.displayData  {background-color: #FFF;}

.modifyData  {background-color: #00b6cf; color: #FFF !important;}

#tombstone-btns-container  {
	width: 100%;
	height: auto;
	padding: 10px 20px 0 20px;
}

#tombstone-btns-container .tombstone-btns  {
	width: 20px;
	height: auto;
	float: right;
	cursor: pointer;
	margin-left: 10px;
}

#clientphoto  {
	width: 100%;
	height: auto;
	float: left;
	padding: 10px 20px 20px 20px;
}

#tombstonedata  {
	width: 100%;
	height: auto;
	float: left;
	padding: 0 0 18px 0;
}

.tombstonedataitem  {
	width: 100%;
	height: auto;
	padding: 2px 20px;
}

.tombstonedataitem .btn_flex_white,
.tombstonedataitem .btn_flex  {margin: 0;}

.modifyData .tombstonedataitem  {margin-bottom: 8px;}

.modifyData .tombstonedataitem input[type=text]  {margin-top: 3px;}

.clientinput200  {
	width: 200px;
	height: auto;
}

#tombstonedata #client_name  {
	text-align: center;
	color: #FFF;
	background-color: #4b4b4b;
	padding: 10px 20px !important;
	font-size: 16px !important;
	font-weight: 700;
	margin: 0 0 10px 0;
	transition-property: background-color;
    transition-duration: 0.25s;
    transition-timing-function: linear;
}

.tombstonedatawrapper:hover #client_name {background-color: #00b6cf;}

.save-cancel-buttons  {
	width: 100%;
	height: auto;
	padding: 2px 20px;
}

#close-client  {
	width: 20px;
	height: auto;
	float: right;
	cursor: pointer;
}

#edit-client  {
	width: 20px;
	height: auto;
	float: right;
	cursor: pointer;
	margin: 0 8px 0 0;
}



/************* ARCHIVE CLIENT STYLING *************/

#archive_linked_clients  {
	width: 100%;
	height: auto;
}

#archive_linked_clients_heading  {
	width: 100%;
	height: auto;
	margin-bottom: 20px;
}

#archive_linked_clients #container  {
	width: 100%;
	height: auto;
}

#archive_linked_clients #container input[type=checkbox]  {margin-right: 10px;}

#archive_linked_clients_buttons  {
	width: 100%;
	height: auto;
}



/************* FORM DATA STYLING *************/

#add-policy  {
	width: 16px;
	height: auto;
	float: right;
	cursor: pointer;
}

#form_wrapper  {
	width: 100%;
	height: auto;
	padding: 20px;
	background-color: #00b6cf;
	color: #FFF;
}

#form_wrapper .container_header  {color: #FFF;}

#form_wrapper .btn_flex_white  {margin-bottom: 0px;}

.formdataitem  {
	width: 100%;
	height: auto;
	margin-bottom: 10px;
}

.modal-item .split  {
	width: auto;
	height: auto;
	float: left;
	margin-right: 8px;
}

.modal-item .split select  {margin-top: -2px;}

#add_employment_history .modal-item .split:nth-child(1)  {width: 175px !important;}
#add_employment_history .modal-item .split:nth-child(2)  {}

.other-details-item  {margin-bottom: 8px;}

#profile .modal-item .split  {margin: 0 !important; border: 0px !important; padding: 0 !important}
#profile .modal-item .split:nth-child(1)  {width: 30% !important;}
#profile .modal-item .split:nth-child(2)  {width: 70% !important;}

.add_client_subgroup .split  {margin-bottom: 10px;}


.policy_form_split  {width: 50%; height: auto; float: left;}


/************* CLIENT SUB CONTAINER STYLING *************/

.client_sub_container  {
	width: 100%;
	height: auto;
	padding: 20px;
	margin-bottom: 8px;
}

#profile  {padding: 0px;}
#profile .split .displayData, #profile .split .modifyData  {padding: 20px;}
#profile .split:nth-child(2)  {padding: 20px;}

#profile .flip-container .displayData {background-color: transparent;}

#profile .flipped .container_header  {color: #FFF;}

.container_header  {
	width: 100%;
	height: auto;
	text-transform: uppercase;
	text-align: left;
	font-size: 24px;
	line-height: 30px;
	margin-bottom: 14px;
	font-family: 'Montserrat', sans-serif;
	color: #00b6cf;
}

.container_header .btn_nostyle  {width: 18px; height: 18px; margin-left: 6px;}
.container_header .btn_nostyle img  {width: 18px; height: 18px;}

#cancelClientSetets, #editClientSetets {
	width: 20px;
	height: auto;
	cursor: pointer;
	margin-left: 10px;
}

.client_sub_container .split  {
	width: 50%;
	height: auto;
	float: left;
}

.client_sub_container .split:nth-child(1)  {width: 50% !important; border-right: 1px solid #00b6cf; padding-right: 2%;}
.client_sub_container .split:nth-child(2)  {width: 50% !important; padding-left: 2%;}

#client_sub_container_forms .split:nth-child(1)  {border-right: 0px !important; padding-top: 20px;}
#client_sub_container_forms .split:nth-child(2)  {padding-left: 0% !important;}

#employer_likes .split:nth-child(1)  {width: 65% !important;}
#employer_likes .split:nth-child(2)  {width: 35% !important;}

#notes  {
	width: 100%;
	height: auto;
}

#notes .form-label-container  {
	width: 32% !important;
	max-width: 130px;
	height: auto;
	float: left;
}

#notes .form-input-container  {
	width: 68% !important;
	height: auto;
	float: left;
}

#notetitle  {
	width: 100%;
	height: 30px;
	line-height: 30px;
}

#notebody  {
	width: 400px;
	height: 180px;
	line-height: 18px;
}

#notes .subtable  {
	max-height: 300px !important;
	overflow-y: scroll;
}

#notes .subtable th:nth-child(1)  {width: 15%;}
#notes .subtable th:nth-child(2)  {width: 50%;}
#notes .subtable th:nth-child(3)  {width: 20%;}
#notes .subtable th:nth-child(4)  {width: 15%;}

#policies .subtable th:nth-child(1)  {width: 30%;}
#policies .subtable th:nth-child(2)  {width: 30%;}
#policies .subtable th:nth-child(3)  {width: 15%;}
#policies .subtable th:nth-child(4)  {width: 15%;}
#policies .subtable th:nth-child(5)  {width: 10%;}

#empHistory .subtable th:nth-child(1)  {width: 25%;}
#empHistory .subtable th:nth-child(2)  {width: 25%;}
#empHistory .subtable th:nth-child(3)  {width: 20%;}
#empHistory .subtable th:nth-child(4)  {width: 20%;}
#empHistory .subtable th:nth-child(5)  {width: 10%;}

#clientLikes .subtable th:nth-child(1)  {width: 50%;}
#clientLikes .subtable th:nth-child(2)  {width: 50%;}

#clientlistws  {
	width: 100%;
	height: auto;
}

.save-cancel-buttons  {
	width: 100%;
	height: auto;
	float: left;
	border-top: 1px solid #FFFFFF;
	margin-top: 10px;
	background-color: #FFFFFF;
}



/***************** SETS *****************/

#setManagerContainer  {
	width: 100%;
	height: auto;
}

.setpane  {
	width: 33.3%;
	height: auto;
	float: left;
	-webkit-box-shadow: 3px 3px 6px 0 rgba(0,0,0,0.2);
	color: #4b4b4b !important;
	box-shadow: 3px 3px 6px 0 rgba(0,0,0,0.2);
	border: 1px solid transparent;
    -moz-border-image: -moz-linear-gradient(top, #FFF 0%, #00b6cf 100%);
    -webkit-border-image: -webkit-linear-gradient(top, #FFF 0%, #00b6cf 100%);
    border-image: linear-gradient(to bottom, #00b6cf 0%, #FFF 100%);
    border-image-slice: 1;
	border-left: 0px;
	border-top: 0px;
	border-bottom: 0px;
	border-bottom-right-radius: 5px;
}

#leftSetPane  {}
#centreSetPane  {}
#rightSetPane  {}

#rightSetPane #setEntry  {
	width: 100%;
	height: auto;	
}

#rightSetPane .save-cancel-buttons  {padding: 0;}

.set_panel_heading_outer  {
	width: 100%;
	height: auto;
	float: left;
	border-bottom: 1px solid #00b6cf;
	border-right: 1px solid #FFFFFF;
	padding: 14px;
	background-color: #FFFFFF;
	color: #00b6cf;
	position: relative;
}

.set_panel_heading  {
	width: 100%;
	height: auto;
	font-family: 'Montserrat', sans-serif;
	text-transform: uppercase;
	font-weight: 500;
	font-size: 20px;
	line-height: 24px;
	float: left;
	padding-right: 18px;
}

#centreSetPane .set_panel_heading_outer  {background-color: #00b6cf; color: #FFFFFF; border-bottom: 1px solid #FFFFFF;}
#rightSetPane .set_panel_heading_outer  {background-color: #00b6cf; color: #FFFFFF; border-bottom: 1px solid #FFFFFF;}

.set_subnav  {
	width: 100%;
	height: auto;
	background-color: rgba(0,182,207,0.3);
	padding: 8px 14px 0px 8px;
	border-bottom: 1px solid #00b6cf;
	border-left: 1px solid #00b6cf;
}

.set_subnav_btn  {
	width: auto;
	height: auto;
	float: left;
	border: 1px solid #00b6cf;
	color: #FFFFFF;
	background-color: #00b6cf;
	padding: 4px 10px;
	cursor: pointer;
	border-radius: 3px;
	font-size: 14px;
	margin-right: 10px;
	margin-bottom: 8px;
}

.set_subnav_btn:hover  {
	color: #00b6cf;
	background-color: #FFFFFF;
}

.edit_set_btn  {
	width: 20px;
	height: auto;
	border: 1px solid #00b6cf;
	color: #FFFFFF;
	background-color: #00b6cf;
	cursor: pointer;
	border-radius: 3px;
	font-size: 14px;
	position: absolute;
	top: 16px;
	right: 8px;
}

.edit_set_btn img  {
	width: 100%;
	height: auto;
}

.set_panel_body  {
	width: 100%;
	height: auto;
	padding: 8px 14px;
	padding-bottom: 20px;
}

.set_manager_item  {
	width: 100%;
	height: auto;
	color: #4b4b4b;
	margin-bottom: 10px;
}

.set_manager_item:hover  {color: #00b6cf;}

.setDetails  {
	width: 100%;
	height: auto;
}

.set_print_envelope  {
	width: auto;
	height: auto;
	border: 1px solid #00b6cf;
	color: #FFFFFF;
	background-color: #00b6cf;
	padding: 4px;
	cursor: pointer;
	border-radius: 3px;
	font-size: 10px;
	margin-left: 4px;
}

.set_print_envelope:hover  {
	color: #00b6cf;
	background-color: #FFFFFF;
}



/************* FOOTER STYLING *************/

#footercontainer  {
	width: 100%;
	min-width: 1024px;
	height: auto;
	padding: 0 2%;
}



/************* CREDITS STYLING *************/

#creditscontainer  {
	width: 100%;
	min-width: 1024px;
	height: auto;
	padding: 8px 2%;
	background-color: #565c67;
	text-align: center;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 10;
}  

#creditscontainer p {
	color: #fff;
	font-size: 12px;
}






/********** MEDIA QUERIES **********/

@media (max-width: 767px) {

#headerleft  {width: 15%;}

#headermiddle  {width: 45%;}

#headerright  {width: 40%;}

.toolbartitle  {display: none;}

#creditscontainer,
#headercontainer,
.toolbarwrapper,
#maincontainer,
#footercontainer  {min-width: 0px !important;}	
	
	
#main  {padding: 40px 10px;}
#dashboardleft  {width: 100% !important;}
#dashboardright  {width: 100% !important;}
.dashboarditemcontainer  {width: 100% !important; margin-bottom: 16px;}
.dashboarditem  {}

#dashboardtitle .split:nth-child(1)  {margin-bottom: 16px;}

#clientlistws .tbl_standard th:nth-child(1),
#clientlistws .tbl_standard th:nth-child(4),
#clientlistws .tbl_standard th:nth-child(5),
#clientlistws .tbl_standard th:nth-child(6),
#clientlistws .tbl_standard th:nth-child(9),
#clientlistws .tbl_standard td:nth-child(1),
#clientlistws .tbl_standard td:nth-child(4),
#clientlistws .tbl_standard td:nth-child(5),
#clientlistws .tbl_standard td:nth-child(6),
#clientlistws .tbl_standard td:nth-child(9) {display: none;}

#clientlistws .tbl_standard th:nth-child(2),
#clientlistws .tbl_standard td:nth-child(2)  {width: 25%;}

#clientlistws .tbl_standard th:nth-child(3),
#clientlistws .tbl_standard td:nth-child(3)  {width: 30%;}

#clientlistws .tbl_standard th:nth-child(7),
#clientlistws .tbl_standard td:nth-child(7)  {width: 30%; overflow-wrap: break-word;}

#clientlistws .tbl_standard th:nth-child(8),
#clientlistws .tbl_standard td:nth-child(8)  {width: 15%;}


.client_email_column  {overflow-wrap: break-word;}

.tbl_standard th,
.subtable th,
.tbl_standard tr,
.subtable tr  {font-size: 14px !important; line-height: 20px !important;}

.tbl_standard td  {padding: 6px 2px;}

#viewclient-left,
#viewclient-right,
#employer_likes .split:nth-child(1),
#employer_likes .split:nth-child(2)  {width: 100% !important;}

#viewclient-left  {margin-bottom: 16px;}

.client_sub_container  {padding: 0px;}

.client_sub_container .split:nth-child(1),
.client_sub_container .split:nth-child(2)  {width: 100% !important; padding: 0 !important; margin-bottom: 16px;}

.setpane  {width: 50%;}

#filelist th:nth-child(1),
#filelist td:nth-child(1)  {display: none;}

}