

<!--
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
  	font-family: 'PT Sans', sans-serif;
    font-size:.98em; 
}

 body{   
	background-color:#333333;
 }

li{
	padding-bottom:10px;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #dedede;
  margin: .75em 0;
  padding: 0;
}

hr.soft 
{
  display: block;
  height: 4px;
  border: 0;
  border-top: 4px solid #444444;
  margin: .75em 0;
  padding: 0;

}

::placeholder {
    color: #bbbbbb;
 }
 
 ::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}


      
/* Track */
::-webkit-scrollbar-track {
  background:#333333;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #cccccc; 
  border-radius:5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #1BB0E4; 
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
  background-color: rgba(0,0,0,0.6);
}

.overlay[id="login_overlay"]
{
  background-color: rgba(0,0,0,1);
}

.large_modal {
	display:flex;
    flex-direction:column;
    position: absolute;

    float: left;
    left: 50%;
    top: 50%;
    
    transform: translate(-50%,  0);  
    width: 90%;
    line-height: 20px;
	background: #fff;
    background-size: contain;
    box-shadow: 0 3px 7px 2px rgba(0,0,0,.3);
    text-align: center;
    padding-bottom:15px;
    z-index: 22; /* 1px higher than the overlay layer */
    
     max-height: calc(100vh);; 
	overflow: auto;
}

.modal {
	display:flex;
    flex-direction:column;
    position: absolute;

    float: left;
    left: 50%;
        

    top: 50%;transform: translate(-50%,  -50%);  
    width: 700px;
    line-height: 20px;
	background: #fff;
    background-size: contain;
    box-shadow: 0 3px 7px 2px rgba(0,0,0,.3);
    text-align: center;
    z-index: 22; /* 1px higher than the overlay layer */
    
     max-height: calc(100vh - 50%);
							min-height: 200px;; 
	overflow-y: auto;
}

.modal.in-screen
{
    z-index: 10;
}

.modal[id="login"]
{
	justify-content:center;
  	background: #ffffff url(//opsantium.com/common/style/logo_xsm.png) no-repeat 50% 15px ;
    background-size: 200px;
	width:600pxpx;
    z-index:555;  
}

.modal[id="registration_form"]
{
	width:600pxpx;
}

.modal[id="draft"]{z-index:888;}
.modal[id="warning_modal"]{z-index:555;}

.modal-heading
{
	background:#333333;
    color:#ffffff;
    font-size: 1.25em;
    font-weight: bold;
    border-bottom: 2px solid #333333;
}

.modal-content
{
	margin:auto;
    padding:15px;
    padding-bottom:30px;
    width:90%;
}


.loading-modal {
    width: 300px;
    height: 100px;
    line-height: 20px;
    position: fixed;
    top: 50%; 
    left: 50%;
    margin-top: -100px;
    margin-left: -150px;
    border-radius: 10px;
    text-align: center;
    z-index: 999; /* 1px higher than the overlay layer */
}

.overlay[id="loading_overlay"]
{
  z-index: 998;
}

.tall-modal {
    width: 300px;
    height: 350px;
    position: fixed;
    top: 40%; 
    left: 50%;
    margin-top: -100px;
    margin-left: -150px;
	background: #EDF2E4;
    background-size: contain;
    border-radius: 10px;
    text-align: center;
    z-index: 11; /* 1px higher than the overlay layer */
}

.modal[name="welcome"] {
    width: 400px;
    line-height: 20px;
    position: fixed;
    top: 50%; 
    left: 50%;
    margin-top: -100px;
    border-radius: 10px;
    text-align: center;
    border: 5px solid #77AB41;
    z-index: 22; /* 1px higher than the overlay layer */
}

.short-modal {
    width: 300px;
    height: 220px;
    line-height: 20px;
    position: fixed;
    top: 50%; 
    left: 50%;
    margin-top: -100px;
    margin-left: -150px;
	background: #EDF2E4 url(//opsantium.com/common/style/logo_modal.png) no-repeat 5px 5px;
    background-size: contain;
    border-radius: 10px;
    text-align: center;
    z-index: 11; /* 1px higher than the overlay layer */
}

.main_container {
	padding: 0;
    border: 0;
    width: 100%;
	text-align: center; 
	color: #000000;
	min-height: 100%;
	height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
	height: 100%;
	margin: 0 auto -100px; /* the bottom margin is the negative value of the footer's height */
}

.main_container_noscript {
	padding: 0;
    border: 0;
    width: 100%;
	text-align: center; 
	color: #000000;
	min-height: 100%;
	height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
	height: 100%;
	margin: 0 auto -100px; /* the bottom margin is the negative value of the footer's height */
}

.noscriptmsg {
	padding: 0;
    border: 0;
    width: 100%;
	text-align: center; 
	color: #000000;
	min-height: 100%;
	height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
	height: 100%;
	margin: 0 auto -100px; /* the bottom margin is the negative value of the footer's height */
    background:#ffffff;
}


.main_logo_container{
	position: fixed;
	width: 100%;

	background: #f9f9f9;

	color:#000000;    
	background-size: 100% auto;
    background-position: bottom;
    align: right;
    font-size: .98em;
    height:contain;
    z-index:9;
    top:0;
    right:0;
    padding-top:10px; 
    padding-right:10px;
    padding-bottom:10px;
}

.main_hr_line
{
    position: fixed;
	background: url(//opsantium.com/common/style/ops_hr.png?229640)  no-repeat bottom right;
    height: 40px;
	width: 100%;
    top:45px;
    left:0;
    z-index:9;
}

.main_logo_container img {
  
 	height:100%;width:auto;   
}


.link_bar_container{
	background-color: #1681b0;
    color:#000000;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: .98em;
}

.link_bar_2_container{
	background-color: rgba(22,129,176,0.65) ;
    
    color:#000000;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: .98em;
}

.sub_logos_container{
	color: #000000;
    background-color: #FAFAFA;
    align: center;
}

.main_content_container{
	vertical-align:middle;
	color: #000000;
    align: center;
    min-height: 800px;
    
    padding:10px;
    
    padding-left:80px;padding-right:20px;min-width:500px;    
    padding-top:52px; 
    
    background-size:1000px;    margin-left: 0;
    background:#f9f9f9;
    min-height: 650px;
}

.main_content_container ul
{
	padding-left:20px;
}

.main_content_container_main
{
	color: #000000;
    align: center;
    min-height: 500px;
    padding: 20px;
    padding-top:45px; 
    
    
    padding-left:100px;padding-right:100px;    margin-left: 0;
    min-height: 650px;
    background:#f9f9f9;
}

.bkgd-splash
{
	position:fixed;
    top:0;
    right:0;
    height:100vh;
    width:100vh;
	background: linear-gradient(to right, white 45%, transparent), url(//opsantium.com/common/style/color_tw.png);    background-repeat: no-repeat;
    background-size: 1024px 1024px;
    background-position: right 0 top 0;
}


.bottom_banner{
    background-color: #f9f9f9;
    margin-left: 0;
}


.bottom_bar_container {
	background: #ffffff;
    color: #000000    align: center;
    font-size: .98em;
    padding: 4px;
    
    padding-left:50px;padding-right:10px;    vertical-align: bottom;
}

.toggle-content-div
{
	border:2px dashed #cccccc;
    border-top:none; 
    padding-left:20px;
    padding-right:20px;
    padding-bottom:20px; 
}

.toggle-header
{
    padding-top:20px;
    padding-bottom:2px;    
    font-weight:bold;	
    font-size:1.25em;
    text-align:left;
    margin-bottom:8px;
    border-bottom: 5px solid #cccccc;
}

.toggle-header-thin
{
    padding-top:15px;
    padding-bottom:2px;    
    font-weight:bold;	
    font-size:1em;
    text-align:left;
    margin-bottom:3px;
    border-bottom: 1px solid #333333;
}

.toggle-header-lineitem
{
	display:block;
    padding-top:15px;
    padding-bottom:2px;    
    font-size:1em;
    text-align:left;
    margin-bottom:3px;
}

.toggle-header-lineitem span
{
	display:block;
    float:right;
    width:50%;
    margin-left:10px;
}

.fade_overlay {
    -moz-animation-name: fadeOut;
    -webkit-animation-name: fadeOut;
    -ms-animation-name: fadeOut;
    animation-name: fadeOut;
    -moz-animation-duration: 3s;
    -webkit-animation-duration: 3s;
    -ms-animation-duration: 3s;
    animation-duration: 3s;
    position: fixed;

}

 @-moz-keyframes fadeOut 
 { 
 	0% {   
		opacity: 1; 
        visibility: visible; 
        top:50%;
        align:center;
        padding:20px 0 20px 0;
		width: 100%;       
        color:#ffffff;
        background-color:#77ab41;
        font-weight:bold;
        font-size:2em;
       }  
 	40% {   
		opacity: 1; 
        visibility: visible; 
        top:50%;
        align:center;
        padding:20px 0 20px 0;
		width: 100%;       
        color:#ffffff;
        background-color:#77ab41;
        font-weight:bold;
        font-size:2em;
       }  
	100% { 
    	opacity: 0; 
        visibility: hidden; 
        font-size:2em;
        top:50%;
        padding:20px 0 20px 0;
        color:#ffffff;
		width: 100%;       
        font-weight:bold;
    	}
} 

@-webkit-keyframes fadeOut 
{ 
	0% {   
		opacity: 1; 
        visibility: visible; 
        top:50%;
        align:center;
        padding:20px 0 20px 0;
		width: 100%;       
        color:#ffffff;
        background-color:#77ab41;
        font-weight:bold;
        font-size:2em;
       }  
 	40% {   
		opacity: 1; 
        visibility: visible; 
        top:50%;
        align:center;
        padding:20px 0 20px 0;
		width: 100%;       
        color:#ffffff;
        background-color:#77ab41;
        font-weight:bold;
        font-size:2em;
       }  
	100% {
    	opacity: 0; 
        visibility: hidden; 
        font-size:2em;
        top:50%;
        padding:20px 0 20px 0;
        color:#ffffff;
		width: 100%;       
        font-weight:bold;
       	}
} 

@-ms-keyframes fadeOut
{ 
	0% {   
		opacity: 1; 
        visibility: visible; 
        top:50%;
        align:center;
        padding:20px 0 20px 0;
		width: 100%;       
        color:#ffffff;
        background-color:#77ab41;
        font-weight:bold;
        font-size:2em;
       }  
 	40% {   
		opacity: 1; 
        visibility: visible; 
        top:50%;
        align:center;
        padding:20px 0 20px 0;
		width: 100%;       
        color:#ffffff;
        background-color:#77ab41;
        font-weight:bold;
        font-size:2em;
       }  
	100% {
    	opacity: 0; 
        visibility: hidden; 
        font-size:2em;
        top:50%;
        padding:20px 0 20px 0;
        color:#ffffff;
		width: 100%;       
        font-weight:bold;
      	}
} 

@-keyframes fadeOut
{ 
	0% {   
		opacity: 1; 
        visibility: visible; 
        top:50%;
        padding:20px 0 20px 0;
        align:center;
		width: 100%;       
        color:#ffffff;
        background-color:#77ab41;
        font-weight:bold;
        font-size:2em;
       }  
 	40% {   
		opacity: 1; 
        visibility: visible; 
        top:50%;
        align:center;
        padding:20px 0 20px 0;
		width: 100%;       
        color:#ffffff;
        background-color:#77ab41;
        font-weight:bold;
        font-size:2em;
       }  
	100% {
    	opacity: 0; 
        visibility: hidden; 
        font-size:2em;
        top:50%;
        padding:20px 0 20px 0;
        color:#ffffff;
		width: 100%;       
        font-weight:bold;
       	}
} 


/**
*  Picture preload divs
*/

.style_img_pre_1{background: url(//opsantium.com/style/favicon-152.png) no-repeat -9999px -9999px;}
	.style_img_pre_2{background: url(//opsantium.com/style/main_logo.png) no-repeat -9999px -9999px;}
	.style_img_pre_3{background: url(//opsantium.com/style/promo.png) no-repeat -9999px -9999px;}
	.style_img_pre_4{background: url(//opsantium.com/style/pilot_codes.png) no-repeat -9999px -9999px;}
	.style_img_pre_5{background: url(//opsantium.com/style/user_accounts.png) no-repeat -9999px -9999px;}
	.style_img_pre_6{background: url(//opsantium.com/style/adm_is.png) no-repeat -9999px -9999px;}
	.style_img_pre_7{background: url(//opsantium.com/style/watermark.png) no-repeat -9999px -9999px;}
	.style_img_pre_8{background: url(//opsantium.com/style/email_logo.png) no-repeat -9999px -9999px;}
	.style_img_pre_9{background: url(//opsantium.com/style/biz_accounts.png) no-repeat -9999px -9999px;}
	.style_img_pre_10{background: url(//opsantium.com/style/eggs.png) no-repeat -9999px -9999px;}
	.style_img_pre_11{background: url(//opsantium.com/style/categories.png) no-repeat -9999px -9999px;}
	.style_img_pre_12{background: url(//opsantium.com/style/colors.png) no-repeat -9999px -9999px;}
	
.content {
	padding: 0;
	text-align: center;
	color: #000000;
    font-size: 1em;
}

.heading {
    font-size: 1.5em;
	color: #485937;
}


.logo_name {
    font-size: 2.8em;
	color:#000000;}

.logo_name_preview {
	color:#000000;}


.sub-heading {
	padding: 0;
	text-align:center;
    font-family:Candara;
    font-size: 1em;
 	font-weight:bold;
	color: #485937;
}

.demo-heading
{
 	font-family: 'Oswald', sans-serif;
    font-size:2em;
    font-weight: bold;
    padding-top:10px;
    padding-bottom:20px;
	color:red;
}

#accent-heading {
    font-size:1.25em;
    font-weight: bold;
    padding-bottom:10px;
	color:#C66E27;
}

.page-heading {
 	font-family: 'Oswald', sans-serif;
    font-size:2em;
    font-weight: bold;
    padding-bottom:10px;
	color:#666666;
}

.page-heading.subtitle
{
	font-size:1.5em;
    font-weight: normal;
}

.page-heading.darkblue			{color:#114775}
.page-heading.medblue			{color:#1681b0}
.page-heading.lightblue			{color:#3299C5}

.page-heading.darkgreen			{color:#174B24}
.page-heading.medgreen			{color:#497A39}
.page-heading.lightgreen			{color:#76A35F}

.page-heading.darkorange		{color:#C66E27}
.page-heading.medorange			{color:#F47C20}
.page-heading.lightorange		{color:#FF8C3A}

.page-heading.darkred			{color:#7A0E10}
.page-heading.medred			{color:#A61E22}
.page-heading.lightred			{color:#D32927}

.page-heading.darkyellow		{color:#E8AF0A}
.page-heading.medyellow			{color:#E6BC21}
.page-heading.lightyellow		{color:#F8C507}

.page-heading.darkgrey			{color:#333333}
.page-heading.medgrey			{color:#666666}
.page-heading.lightgrey			{color:#aaaaaa}


.page-heading.darkblue.subtitle, 	.page-heading.medblue.subtitle, 	.page-heading.lightblue.subtitle 	{font-family:'Titillium Web', sans-serif;font-size:1.5em;font-weight: bold;}
.page-heading.darkgreen.subtitle, 	.page-heading.medgreen.subtitle, 	.page-heading.lightgreen.subtitle 	{font-size:1.5em;font-weight: normal;}
.page-heading.darkorange.subtitle, 	.page-heading.medorange.subtitle, 	.page-heading.lightorange.subtitle 	{font-size:1.5em;font-weight: normal;}
.page-heading.darkred.subtitle, 	.page-heading.medred.subtitle, 		.page-heading.lightred.subtitle 	{font-size:1.5em;font-weight: normal;}
.page-heading.darkyellow.subtitle, 	.page-heading.medyellow.subtitle, 	.page-heading.lightyellow.subtitle 	{font-size:1.5em;font-weight: normal;}
.page-heading.darkgrey.subtitle, 	.page-heading.medgrey.subtitle, 	.page-heading.lightgrey.subtitle	{font-size:1.5em;font-weight: normal;}


.accounting-heading {
 	font-family: 'Oswald', sans-serif;
    font-size:2em;
    font-weight: bold;
    padding-top:10px;
    padding-bottom:10px;
	color:#1681b0;
    align:left;
}

.accounting-subheading
{
    font-size:1.5em;
    font-weight: bold;
    padding-top:10px;
    padding-bottom:10px;
	color:#1681b0;
    align:left;
}


.quarter-heading {
 	font-family: 'Oswald', sans-serif;
    font-size:1.5em;
    font-weight: bold;
    padding-top:10px;
	color:#005cc1;
}

.page-sub-heading {
	padding:0;
    font-family:Candara;
    font-size:1.25em;
 	font-weight:bold;
	color:#485937;
}

.page-content {
    font-size:.98em;
	color:#000000;
}

.table_header
{
    font-size: 1em;
    font-weight: bold;
    padding: 5px;
    padding-top: 10px;
    padding-left:none;
    vertical-align: middle;
}
.table_subheader
{
	background-color:#F6F7F2;
    border-bottom: 1px solid #dddddd;
    font-size: .85em;
    font-weight: bold;
    color: #000000;
    padding: 5px;
    vertical-align: middle;
}
.table_content
{
    padding: 5px;
    vertical-align: middle;
    font-size: 1em;
	color: #000000;
}


//div tables
.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
  border: 1px solid #666666;         
  border-spacing: 5px; 
}

.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}

.div-table-col-s1 {
  float: left;
  display: table-column;         
  width: 100px;         
  background-color: #ccc;  
}

.div-table-col-s2 {
  float: left;
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}

.div-table-col-s3 {
  float: left;
  display: table-column;         
  width: 300px;         
  background-color: #ccc;  
}
sup { 
    vertical-align: super;
    font-size:  .55em;
}

/**
*  anchor tags
*/
a:link {
	color: #01427C;
	text-decoration: none;
	font-weight: normal;
    font-size: 14px;
    padding:none;
    border:none;
    outline:none;
}

a:visited {
	color: #01427C;
	text-decoration: none;
	font-weight: normal;
}

a:hover {
	color: #8DC16A;
	text-decoration: none;
	font-weight: normal;
}

a:active {
	text-decoration: none;
}

a.RFQLink {
	color: #3399FF;
	text-decoration: none;
	font-weight: bold;
    font-size: .98em;
}

a.RFQLink:visited {
	color: #3399FF;
	text-decoration: none;
	font-weight: bold;
}

a.RFQLink:hover {
	color: #FFFFFF;
	text-decoration: none;
	font-weight: bold;
}

a.RFQLink:active {
	text-decoration: none;
	text-align: right;
}

a.linkBar {
	padding: 10px;
    padding-left: 14px;
    padding-right: 14px;
	cursor: pointer;
	background-color: #1681b0; 
	color: #eeeeee;
    font-size: .98em;
}

a.linkBar:visited {
	color: #eeeeee;
	text-decoration: none;
	font-weight: bold;
}

a.linkBar:hover {
	background-color: #eeeeee; 
	color: #1681b0;
	text-decoration: none;
	font-weight: bold;
}

a.linkBar:active {
	text-decoration: none;
	text-align: right;
}


a.crumbLink {
	padding: 5px;
	cursor: pointer;
	background-color: none; 
	color: #aaaaaa;
    font-size: .98em;
    font-weight: normal;

}

a.crumbLink:visited {
	color: #aaaaaa;
	text-decoration: none;
}

a.crumbLink:hover {
	color: #333333;
	text-decoration: none;
}

a.crumbLink:active {
	text-decoration: none;
	text-align: right;
}

.cal_day_title
{
	background-color: #666666;
    color: #ffffff;
}

.linkBarColour {
	color: #eeeeee;
	font-weight: bold;
}

a.bottomLinkBar {
	padding: 4px;
    padding-left: 14px;
    padding-right: 14px;
	cursor: pointer;
	background-color: #ffffff; 
	color: #202D19;
    font-size: .98em;
}

a.bottomLinkBar:visited {
	color: #202D19	text-decoration: none;
	font-weight: bold;
}

a.bottomLinkBar:hover {
	background-color: #8DC16A; 
	color: #ffffff;
	text-decoration: none;
	font-weight: bold;
}

a.bottomLinkBar:active {
	color: #202D19	text-decoration: none;
	text-align: right;
}

.bottomLinkBarColour {
	color: #202D19;
	font-weight: bold;
}

a.linkBar2 {
	padding: 5px;
    padding-left: 14px;
    padding-right: 14px;
	cursor: pointer;
	background-color: #1681b0; 
	color: #eeeeee;
    font-size: .98em;
}

a.linkBar2:visited {
	color: #eeeeee;
	text-decoration: none;
	font-weight: bold;
}

a.linkBar2:hover {
	background-color: #eeeeee; 
	color: #1681b0;
	text-decoration: none;
	font-weight: bold;
}

a.linkBar2:active {
	text-decoration: none;
	text-align: right;
} 

a.content {
	color: #527000;
	text-decoration: none;
	font-weight: bold;
    font-size: .98em;
}

a.content:visited {
	color: #527000;
	text-decoration: none;
	font-weight: bold;
}

a.content:hover {
	color: #94BA2B;
	text-decoration: none;
	font-weight: bold;
}

a.content:active {
	text-decoration: none;
	text-align: right;
}

.service-sub-heading {
    font-size: 1.25em;
	color: #333333;
}

.service-content {
    font-size: 1em;
	color: #000000;
}

.service-heading
 {
 	padding-top:10px;
    font-size: 1.5em;
	color: #1681b0;
	font-weight:bold;
}

.accent_colour_1 {
    font-size: 1em;
	color: #1BB0E4;
}

.accent_colour_1_sm {
    font-size: .85em;
	color: #1BB0E4;
}

.accent_colour_2 {
	font-size: 1em;
	color: #12477B;
}


.accent_colour_2_sm {
	font-size: .85em;
	color: #12477B;
}

.accent_darkblue	{color: #114775;}
.accent_medblue		{color: #1681b0;}
.accent_lightblue	{color: #3299C5;}
.accent_darkgreen	{color: #174B24;}
.accent_medgreen	{color: #497A39;}
.accent_lightgreen	{color: #76A35F;}
.accent_darkorange	{color: #C66E27;}
.accent_medorange	{color: #F47C20;}

.accent_lightorange	{color: #FF8C3A;}
.accent_darkyellow	{color: #E8AF0A;}

.accent_medyellow	{color: #E6BC21;}

.accent_lightyellow	{color: #F8C507;}
.accent_darkred		{color: #7A0E10;}
.accent_medred		{color: #A61E22;}
.accent_lightred	{color: #D32927;}
.accent_darkgrey	{color: #333333;}
.accent_medgrey		{color: #666666;}
.accent_lightgrey	{color: #aaaaaa;}
	
.italic_note{
	padding-bottom:10px; 
    padding-top:10px;
    font-size: .85em;
}
.smallServiceCost {
    font-size: 1em;
	color: #1BB0E4;
	font-weight:bold;
}
.serviceHeaderCart {
    font-size: 1.25em;
	color: #1681b0;
}

.serviceCostCart {
    font-size: 1em;
}
.serviceContent {
    font-size: 1em;
}

#accounting-heading
{
    padding-top:10px;
    padding-bottom:10px;
    font-size:1.5em; 
	font-weight:bold;
    color:#005cc1;	
}

#accounting-sched
{
    font-size:.75em; 
    color:#005cc1;	
}

#order-header
{
	font-weight:bold;
    background-color:#dddddd;
    text-align:center;
}

#xxxsmall-font{
    font-size:.55em; 
}

#xxsmall-font{
    font-size:.65em; 
}

#xsmall-font{
    font-size:.75em; 
}

#small-font{
    font-size:.85em; 
}

#medium-font{
    font-size:1em; 
}

#large-font{
    font-size:1.25em; 
}

#xlarge-font{
    font-size:1.5em; 
}

#xxlarge-font{
    font-size:2em; 
}

#required{
	color:#ce0000;
    font-weight:bold;
    font-size:1.5em;
}

model-viewer {
  width: 800px;
  height: 600px;
}


.fade-out {
    animation: fadeOut 3s;
    -webkit-animation: fadeOut 3s;
    -moz-animation: fadeOut 3s;
    -o-animation: fadeOut 3s;
    -ms-animation: fadeOut 3s;  

    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;  
        
  	display:flex;
    flex-direction:column;
    position: absolute;

    float: left;
    left: 50%;
    top: 50%;
    
    transform: translate(-50%,  -50%);  
    width: 700px;
    height: 150px;
    line-height: 150px;
	background: #fff;
    background-size: contain;
    box-shadow: 0 3px 7px 2px rgba(0,0,0,.3);
    text-align: center;
    padding-bottom:15px;
    vertical-align:middle;
    
    font-size: 1.25em;
}

@keyframes fadeOut {
  0%   {opacity:0.9;visibility:visible;}
  60%  {opacity:0.9;}
  100% {opacity:0;visibility:hidden;}
}

@-moz-keyframes fadeOut {
  0%   {opacity:0.9;visibility:visible;}
  60%  {opacity:0.9;}
  100% {opacity:0;visibility:hidden;}
}

@-webkit-keyframes fadeOut {
  0%   {opacity:0.9;visibility:visible;}
  60%  {opacity:0.9;}
  100% {opacity:0;visibility:hidden;}
}

@-o-keyframes fadeOut {
  0%   {opacity:0.9;visibility:visible;}
  60%  {opacity:0.9;}
  100% {opacity:0;visibility:hidden;}
}

@-ms-keyframes fadeOut {
  0%   {opacity:0.9;visibility:visible;}
  60%  {opacity:0.9;}
  100% {opacity:0;visibility:hidden;}
}

.telDiv
{
	display:flex;
    flex-direction:column;
    position: fixed;	
    margin-top: 12px;
    padding-top:10px;;
    width: 100%;
	background: #ffffff;
    font-size:1.25em;
    font-weight:bold;
    color:#000000;  
    height: 35px;
    
    z-index:7;  
}

a.tel_link {
    color: #000000;	text-decoration: none;
	font-weight: bold;
    font-size: .98em;
}

a.tel_link:visited {
    color: #000000;	text-decoration: none;
	font-weight: bold;
    font-size: .98em;
}

a.tel_link:active {
     color:#000000;	text-decoration: none;
	font-weight: bold;
    font-size: .98em;
}

a.tel_link:hover {
     color:#000000;	text-decoration: none;
	font-weight: bold;
    font-size: .98em;
}

.tel_icon
{
	display:inline-block;
    vertical-align: middle;
    padding-right:10px;
    height:44px;
	background: url(//opsantium.com/common/style/tel_icon.png?407799)  no-repeat 50% 50%;    width:10px;
    background-size:90%;
}

.anchor-top
{
	display: block;
    position: relative;
    top: 250px;
    visibility: hidden;
}

/* Basic styling for the banner */
#cookie-banner {
   position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #333;
    opacity: 0.85;
    color: white;
    padding: 15px;
    text-align: center;
    z-index: 1000;
}
#cookie-banner button {
    margin-left: 10px;
    padding: 8px 16px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

/* Toggle functionality */
#toggle {
	display:none;
}

/* clicked on menu makes shadow around it */
#toggle:checked ~ .nav .nav-item {
  background-color: #1681b0;
  padding:10px;
}

#toggle:checked ~ .toggle-container .button-toggle:before {
  transform: scale(.7) rotate(45deg);
  top: 10px;
}

#toggle:checked ~ .toggle-container .button-toggle:after {
  transform:  scale(.7) rotate(-45deg);
  top: 10px;
}
#toggle:checked ~ .toggle-container .button-toggle-center {
  transform: scale(0);
}

#toggle:checked ~ .toggle-container .button-toggle {
  box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px rgba(0, 0, 0, 0.1);
}

#toggle:checked ~ .main_content_container {
}

#toggle:checked ~ .nav {
  pointer-events: auto;
  transform:translate(10px, 0px);
  width: 100%;  
  background-color: #1681b0;
  margin-bottom:0px;
}

#toggle:checked ~ .nav .nav-item {
  color: #eeeeee;
  letter-spacing: 0;
  height: 20px;
  opacity: 1;
  transform: scaleY(1);
  transition: 0.5s, opacity 1s;
  text-align:center;
  vertical-align:middle;
  width:190px;
  font-size: 1em;

  position: relative;
  display: inline-block;
  text-align:center;
  vertical-align:middle;
  text-transform: uppercase;
 
 }

#toggle:checked ~ .nav .nav-item:hover {

  color: #ffffff;	
}


#toggle:checked ~ .nav .nav-item:nth-child(n) {
  transition: 0s, opacity 1s;
}
#toggle:checked ~ .nav .nav-item:nth-child(n):before {
  transition: 0s, opacity 0s;
}
#toggle:checked ~ .nav .nav-item:before {
  opacity: 0;
}

/* Toggle button */
.button-toggle {
  position: relative;
  float:left;
  display: inline-block;
  top:-45px;
  left:5px;
  width: 30px;
  height: 25px;
  background-color: transparent;
  cursor: pointer;
  transition: 0.6s;
}

.button-toggle-center {
  position: relative;
  display: inline-block;
  float:left;
  width: 30px;
  height: 3px;
  background-color: #000000;
  cursor: pointer;
  transition: 0.6s;
}


.button-toggle:hover {
  box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px rgba(0, 0, 0, 0.1);
}

.button-toggle-center:hover  ~ .button-toggle{
  box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px rgba(0, 0, 0, 0.1);
}

.button-toggle:before, .button-toggle:after {
  position: absolute;
  content: '';
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #000000; /* color */
  transition: 0.6s;
}
.button-toggle:before {
  top: 10px;

}
.button-toggle:after {
  top: 20px;
}

/* Menu */
.nav {
  position:relative;
  display: inline-block;
  float:left;
  top:-25px;
  left:-10px;
  pointer-events: none;
  transition: 0s;
}

.nav-item {
  width:190px;
  white-space: nowrap;
  transform: scaleY(0.2);
  transition: 0s, opacity 0s;
  clear: both;
  color: transparent;
}

.nav-item:nth-child(n) {
  opacity: 0;
}

.nav-item:before {
  position: absolute;
  content: '';
  height: 2px;
  background-color: #000000;
  transform: translateY(-50%) scaleY(5);
  transition: 0.5s;
}

.lone-link-bar
{
	background-color: #1681b0;
    color: #eeeeee;
    padding:10px;
    text-align:left;
    font-size: 1em;
}

.lone-link
{
	color: #eeeeee;
}

.lone-link:active
{
	color: #eeeeee;
}

.lone-link:visited
{
	color: #eeeeee;
}

.lone-link:hover
{
	color: #ffffff;
}#pic_wrapper {
	display: block;
	text-align: center;   
	height: 480px;
	width:100%;
	margin:auto;
}

#pic_container {
	display:table;
	text-align: center;   
	height:481px;
	width:700px;
    margin: 0 auto;
    overflow-y: hidden; // hide vertical
    overflow-x: hidden;
}
#pic_prev{
	background-image: url(//opsantium.com/common/style/left_arrow.png);
	background-repeat:no-repeat;
	background-position:center center;
	display:table-cell;
	height:480px;
	width:30px;
	z-index:99;
	cursor: pointer;
}

#pic_next{
	background-image: url(//opsantium.com/common/style/right_arrow.png);
	background-repeat:no-repeat;
	background-position:center center;
	display:table-cell;
	height:480px;
	width:30px;
	z-index:99;
    cursor: pointer;
}

#pic_slider{
	display:table-cell;
	height:480px;
	width:640px;
    overflow-y: hidden; // hide vertical
    overflow-x: hidden;
}

/* center each picture */
#pic_img{ 
    display: inline-block;
    vertical-align: top;
    text-align:center;
    width:100%;
 }


model-viewer{
    width:400px;
    height:400px;
}.calendarButton {
	padding:12px;
    border:none;
}

.calendarButton:disabled
{
	padding:12px; 
    background-color:#929292; 
    color:#dddddd;
    border:none;
    cursor:default;
}


.calendarButton_arrows {
	padding:12px; 
    background-color:#666666; 
    color:white;
    border:none;
  	font-size:1.25em;
}

.calendarButton_arrows:hover {
	background-color:#cccccc;
}

.calNav_button
{
    width: 35px;
    height: 31px;
	cursor: pointer;
    color: rgba(0,0,0,0);
    font-weight: bold;
    text-align:left;
    
    border: none;
}

.calNav_button[rel="next"]
{
	background: url(//opsantium.com/common/style/cal_next.png) no-repeat 50% 0;
    background-size: contain;
}

.calNav_button[rel="next"]:hover
{
	background: url(//opsantium.com/common/style/cal_next_hover.png) no-repeat 50% 0;
    background-size: contain;
    border: none;
}

.calNav_button[rel="prev"]
{
	background: url(//opsantium.com/common/style/cal_prev.png) no-repeat 50% 0;
    background-size: contain;
}

.calNav_button[rel="prev"]:hover
{
	background: url(//opsantium.com/common/style/cal_prev_hover.png) no-repeat 50% 0;
    background-size: contain;
    border: none;
}

.calendarButton_active {
	padding:12px; 
    background-color:#1681b0; 
    color:white;
    border:none;
    cursor:pointer;

}

.calendarButton_active:hover {
	background-color:#114775;
}

.calendarButton_booked {
	padding:12px; 
    background-color:red; 
    color:#999;
    border:none;
    cursor:default;
}

.calendarButton_booked:hover{
    cursor:default;
}
.calendarButton_booked_res {
	padding:12px; 
    background-color:#929292; 
    color:#dddddd;
    border:none;
    cursor:default;
}

.calendarButton_booked_res:hover
{
    cursor:default;
}

.calendarButton_partial {
	padding:12px; 
    background-color:#63AA0F; 
    color:white;
    border:none;
}

.calendarButton_exist {
	padding:12px; 
    background-color:#76A35F; 
    color:white;
    border:none;
}

.calendarButton_chosen {
	padding:12px; 
    background-color:#114775; 
    color:white;
    border:none;
}

#invisible_button_thin{
    vertical-align:middle;
    padding: 6px;
    padding-top:4px;
    padding-bottom:4px;
	cursor: pointer;
	background-color:#f9f9f9; 
    border:none;
   color:white;     
}

#invisible_button_thin:active {background-color:#f9f9f9;border:none;}
#invisible_button_thin:hover {background-color:#f9f9f9;border:none;}
#invisible_button_thin:disabled {background-image: none;outline:0;cursor:not-allowed;}

/* INVISIBLE BUTTONS */
.invisi-btn
{
	width: 16px;
	height: 16px;
    vertical-align:middle;
	cursor: pointer;
    border:none;
}

.invisi-btn.sm
{
	width: 18px;
	height: 18px;
}

.invisi-btn.med
{
	width: 30px;
	height: 30px;
}

.invisi-btn.lrg
{
	width: 40px;
	height: 40px;
}

.invisi-btn.trash, .invisi-btn.sm.trash, .invisi-btn.med.trash, .invisi-btn.lrg.trash 										{background: url(//opsantium.com/common/style/trash_r.png) no-repeat 50% 0; background-size:contain;}
.invisi-btn.edit, .invisi-btn.sm.edit, .invisi-btn.med.edit, .invisi-btn.lrg.edit	 										{background: url(//opsantium.com/common/style/edit_b.png) no-repeat 50% 0; background-size:contain;}
.invisi-btn.cancel, .invisi-btn.sm.cancel, .invisi-btn.med.cancel, .invisi-btn.lrg.cancel									{background: url(//opsantium.com/common/style/cancel_r.png) no-repeat 50% 0; background-size:contain;}
.invisi-btn.save, .invisi-btn.sm.save, .invisi-btn.med.save, .invisi-btn.lrg.save											{background: url(//opsantium.com/common/style/save_g.png?1) no-repeat 50% 0; background-size:contain;}
.invisi-btn.bump, .invisi-btn.sm.bump, .invisi-btn.med.bump, .invisi-btn.lrg.bump											{background: url(//opsantium.com/common/style/bump_up.png) no-repeat 50% 0; background-size:contain;}
.invisi-btn.close, .invisi-btn.sm.close, .invisi-btn.med.close, .invisi-btn.lrg.close										{background: url(//opsantium.com/common/style/close_b.png) no-repeat 50% 0; background-size:contain;}
.invisi-btn.restore, .invisi-btn.sm.restore, .invisi-btn.med.restore, .invisi-btn.lrg.restore								{background: url(//opsantium.com/common/style/restore_b.png) no-repeat 50% 0; background-size:contain;}
.invisi-btn.addimg, .invisi-btn.sm.addimg, .invisi-btn.med.addimg, .invisi-btn.lrg.addimg									{background: url(//opsantium.com/common/style/addimg_b.png) no-repeat 50% 0; background-size:contain;}

.invisi-btn.trash:hover, .invisi-btn.sm.trash:hover, .invisi-btn.med.trash:hover, .invisi-btn.lrg.trash:hover				{background: url(//opsantium.com/common/style/trash_rh.png) no-repeat 50% 0; background-size:contain;}
.invisi-btn.edit:hover, .invisi-btn.sm.edit:hover, .invisi-btn.med.edit:hover, .invisi-btn.lrg.edit:hover					{background: url(//opsantium.com/common/style/edit_bh.png) no-repeat 50% 0; background-size:contain;}
.invisi-btn.cancel:hover, .invisi-btn.sm.cancel:hover, .invisi-btn.med.cancel:hover, .invisi-btn.lrg.cancel:hover			{background: url(//opsantium.com/common/style/cancel_rh.png) no-repeat 50% 0; background-size:contain;}
.invisi-btn.save:hover, .invisi-btn.sm.save:hover, .invisi-btn.med.save:hover, .invisi-btn.lrg.save:hover					{background: url(//opsantium.com/common/style/save_gh.png?1) no-repeat 50% 0; background-size:contain;}
.invisi-btn.bump:hover, .invisi-btn.sm.bump:hover, .invisi-btn.med.bump:hover, .invisi-btn.lrg.bump:hover					{background: url(//opsantium.com/common/style/bump_up_h.png) no-repeat 50% 0; background-size:contain;}
.invisi-btn.close:hover, .invisi-btn.sm.close:hover, .invisi-btn.med.close:hover, .invisi-btn.lrg.close:hover				{background: url(//opsantium.com/common/style/close_bh.png) no-repeat 50% 0; background-size:contain;}
.invisi-btn.restore:hover, .invisi-btn.sm.restore:hover, .invisi-btn.med.restore:hover, .invisi-btn.lrg.restore:hover		{background: url(//opsantium.com/common/style/restore_bh.png) no-repeat 50% 0; background-size:contain;}
.invisi-btn.addimg:hover, .invisi-btn.sm.addimg:hover, .invisi-btn.med.addimg:hover, .invisi-btn.lrg.addimg:hover			{background: url(//opsantium.com/common/style/addimg_bh.png) no-repeat 50% 0; background-size:contain;}

.invisi-btn.trash:disabled, .invisi-btn.sm.trash:disabled, .invisi-btn.med.trash:disabled, .invisi-btn.lrg.trash:disabled 			{ background-image: none; outline: 0; background-color:#dddddd; }
.invisi-btn.edit:disabled, .invisi-btn.sm.edit:disabled, .invisi-btn.med.edit:disabled, .invisi-btn.lrg.edit:disabled 				{ background-image: none; outline: 0; background-color:#dddddd; }
.invisi-btn.cancel:disabled, .invisi-btn.sm.cancel:disabled, .invisi-btn.med.cancel:disabled, .invisi-btn.lrg.cancel:disabled 		{ background-image: none; outline: 0; background-color:#dddddd; }
.invisi-btn.save:disabled, .invisi-btn.sm.save:disabled, .invisi-btn.med.save:disabled, .invisi-btn.lrg.save:disabled 				{ background: url(//opsantium.com/common/style/save_gd.png) no-repeat 50% 0; background-size:contain;; cursor:not-allowed; }
.invisi-btn.bump:disabled, .invisi-btn.sm.bump:disabled, .invisi-btn.med.bump:disabled, .invisi-btn.lrg.bump:disabled 				{ background-image: none; outline: 0; background-color:#dddddd; }
.invisi-btn.close:disabled, .invisi-btn.sm.close:disabled, .invisi-btn.med.close:disabled, .invisi-btn.lrg.close:disabled 			{ background-image: none; outline: 0; background-color:#dddddd; }
.invisi-btn.restore:disabled, .invisi-btn.sm.restore:disabled, .invisi-btn.med.restore:disabled, .invisi-btn.lrg.restore:disabled 	{ background-image: none; outline: 0; background-color:#dddddd; }
.invisi-btn.addimg:disabled, .invisi-btn.sm.addimg:disabled, .invisi-btn.med.addimg:disabled, .invisi-btn.lrg.addimg:disabled 		{ background-image: none; outline: 0; background-color:#dddddd; }


/* MODULE ICONS */

#email_icon
{
	width: 70px;
	height: 30px;
    vertical-align:middle;
	cursor: pointer;
    border:none;
	background: url(//opsantium.com/common/style/email.png) no-repeat 50% 0;
    background-size:contain;
}


#email_icon:hover {
	background-image:none;
	background: url(//opsantium.com/common/style/email_h.png) no-repeat 50% 0;
    background-size:contain;
}

#email_icon:disabled {
    background-image: none;
    outline: 0;
    background-color:#dddddd;
}

#email_icon_light
{
	width: 45px;
	height: 30px;
    vertical-align:middle;
	cursor: pointer;
    border:none;
	background: url(//opsantium.com/common/style/send_email_l.png) no-repeat 50% 0;
    background-size:contain;
}


#email_icon_light:hover {
	background-image:none;
	background: url(//opsantium.com/common/style/send_email_lh.png) no-repeat 50% 0;
    background-size:contain;
}

#email_icon_light:disabled {
    background-image: none;
    outline: 0;
    background-color:#dddddd;
}

#email_doc_icon
{
	width: 45px;
	height: 30px;
    vertical-align:middle;
	cursor: pointer;
    border:none;
	background: url(//opsantium.com/common/style/send_doc.png) no-repeat 50% 0;
    background-size:contain;
}


#email_doc_icon:hover {
	background-image:none;
	background: url(//opsantium.com/common/style/send_doc_h.png) no-repeat 50% 0;
    background-size:contain;
}

#email_doc_icon:disabled {
    background-image: none;
    outline: 0;
    background-color:#dddddd;
}

#email_doc_icon_sm
{
	width: 30px;
	height: 20px;
    vertical-align:middle;
	cursor: pointer;
    border:none;
	background: url(//opsantium.com/common/style/send_doc.png) no-repeat 50% 0;
    background-size:contain;
}


#email_doc_icon_sm:hover {
	background-image:none;
	background: url(//opsantium.com/common/style/send_doc_h.png) no-repeat 50% 0;
    background-size:contain;
}

#email_doc_icon_sm:disabled {
    background-image: none;
    outline: 0;
    background-color:#dddddd;
}


#note_icon
{
	width: 50px;
	height: 45px;
    vertical-align:middle;
	cursor: pointer;
    border:none;
	background: url(//opsantium.com/common/style/note.png) no-repeat 50% 0;
    background-size:contain;
}


#note_icon:hover {
	background-image:none;
	background: url(//opsantium.com/common/style/note_h.png) no-repeat 50% 0;
    background-size:contain;
}

#note_icon:disabled {
    background-image: none;
    outline: 0;
    background-color:#dddddd;
}

#edit_quote_icon
{
	width: 50px;
	height: 45px;
    vertical-align:middle;
	cursor: pointer;
    border:none;
	background: url(//opsantium.com/common/style/edit_quote.png?1) no-repeat 50% 0;
    background-size:contain;
}


#edit_quote_icon:hover {
	background-image:none;
	background: url(//opsantium.com/common/style/edit_quote_h.png) no-repeat 50% 0;
    background-size:contain;
}

#edit_quote_icon:disabled {
    background-image: none;
    outline: 0;
    background-color:#dddddd;
}

#trash_quote_icon
{
	width: 50px;
	height: 45px;
    vertical-align:middle;
	cursor: pointer;
    border:none;
	background: url(//opsantium.com/common/style/trash_quote.png) no-repeat 50% 0;
    background-size:contain;
}


#trash_quote_icon:hover {
	background-image:none;
	background: url(//opsantium.com/common/style/trash_quote_h.png) no-repeat 50% 0;
    background-size:contain;
}

#trash_quote_icon:disabled {
    background-image: none;
    outline: 0;
    background-color:#dddddd;
}

#confirm_job_icon
{
	width: 73px;
	height: 45px;
    vertical-align:middle;
	cursor: pointer;
    border:none;
	background: url(//opsantium.com/common/style/confirm_job_button.png?1) no-repeat 50% 0;
    background-size:contain;
}


#confirm_job_icon:hover {
	background-image:none;
	background: url(//opsantium.com/common/style/confirm_job_button_h.png) no-repeat 50% 0;
    background-size:contain;
}

#confirm_job_icon:disabled {
    background-image: none;
    outline: 0;
    background-color:#dddddd;
}


#edit_job_icon
{
	width: 50px;
	height: 45px;
    vertical-align:middle;
	cursor: pointer;
    border:none;
	background: url(//opsantium.com/common/style/edit_job.png) no-repeat 50% 0;
    background-size:contain;
}


#edit_job_icon:hover {
	background-image:none;
	background: url(//opsantium.com/common/style/edit_job_h.png) no-repeat 50% 0;
    background-size:contain;
}

#edit_job_icon:disabled {
    background-image: none;
    outline: 0;
    background-color:#dddddd;
}


#task_entry_icon
{
	width: 50px;
	height: 45px;
    vertical-align:middle;
	cursor: pointer;
    border:none;
	background: url(//opsantium.com/common/style/effort_track.png?1) no-repeat 50% 0;
    background-size:contain;
}


#task_entry_icon:hover {
	background-image:none;
	background: url(//opsantium.com/common/style/effort_track_h.png) no-repeat 50% 0;
    background-size:contain;
}

#task_entry_icon:disabled {
    background-image: none;
    outline: 0;
    background-color:#dddddd;
}


#schedule_icon
{
	width: 40px;
	height: 36px;
    vertical-align:middle;
	cursor: pointer;
    border:none;
	background: url(//opsantium.com/common/style/schedule.png) no-repeat 50% 0;
    background-size:contain;
}


#schedule_icon:hover {
	background-image:none;
	background: url(//opsantium.com/common/style/schedule_h.png) no-repeat 50% 0;
    background-size:contain;
}

#schedule_icon:disabled {
    background-image: none;
    outline: 0;
    background-color:#dddddd;
}

#invoice_icon
{
	width: 50px;
	height: 45px;
    vertical-align:middle;
	cursor: pointer;
    border:none;
	background: url(//opsantium.com/common/style/invoice.png) no-repeat 50% 0;
    background-size:contain;
}


#invoice_icon:hover {
	background-image:none;
	background: url(//opsantium.com/common/style/invoice_h.png) no-repeat 50% 0;
    background-size:contain;
}

#invoice_icon:disabled {
    background-image: none;
    outline: 0;
    background-color:#dddddd;
}

#materials_icon
{
	width: 50px;
	height: 45px;
    vertical-align:middle;
	cursor: pointer;
    border:none;
	background: url(//opsantium.com/common/style/material.png) no-repeat 50% 0;
    background-size:contain;
}


#materials_icon:hover {
	background-image:none;
	background: url(//opsantium.com/common/style/material_h.png) no-repeat 50% 0;
    background-size:contain;
}

#materials_icon:disabled {
    background-image: none;
    outline: 0;
    background-color:#dddddd;
}

#shipping_icon
{
	width: 63px;
	height: 45px;
    vertical-align:middle;
	cursor: pointer;
    border:none;
	background: url(//opsantium.com/common/style/shipping.png?1) no-repeat 50% 0;
    background-size:contain;
}


#shipping_icon:hover {
	background-image:none;
	background: url(//opsantium.com/common/style/shipping_h.png?1) no-repeat 50% 0;
    background-size:contain;
}

#shipping_icon:disabled {
    background-image: none;
    outline: 0;
    background-color:#dddddd;
}


#print_shipping_icon
{
	width: 80px;
	height: 45px;
    vertical-align:middle;
	cursor: pointer;
    border:none;
	background: url(//opsantium.com/common/style/shiplabel.png) no-repeat 50% 0;
    background-size:contain;
}


#print_shipping_icon:hover {
	background-image:none;
	background: url(//opsantium.com/common/style/shiplabel_h.png) no-repeat 50% 0;
    background-size:contain;
}

#print_shipping_icon:disabled {
    background-image: none;
    outline: 0;
    background-color:#dddddd;
}


#print_data_icon
{
	width: 80px;
	height: 45px;
    vertical-align:middle;
	cursor: pointer;
    border:none;
	background: url(//opsantium.com/common/style/print_notes.png) no-repeat 50% 0;
    background-size:contain;
}


#print_data_icon:hover {
	background-image:none;
	background: url(//opsantium.com/common/style/print_notes.png) no-repeat 50% 0;
    background-size:contain;
}

#print_data_icon:disabled {
    background-image: none;
    outline: 0;
    background-color:#dddddd;
}

#link_icon
{
	width: 50px;
	height: 45px;
    vertical-align:middle;
	cursor: pointer;
    border:none;
	background: url(//opsantium.com/common/style/link.png?1) no-repeat 50% 0;
    background-size:contain;
}


#link_icon:hover {
	background-image:none;
	background: url(//opsantium.com/common/style/link_h.png) no-repeat 50% 0;
    background-size:contain;
}

#link_icon:disabled {
    background-image: none;
    outline: 0;
    background-color:#dddddd;
}

#pay_icon
{
	width: 50px;
	height: 45px;
    vertical-align:middle;
	cursor: pointer;
    border:none;
	background: url(//opsantium.com/common/style/pay.png) no-repeat 50% 0;
    background-size:contain;
}


#pay_icon:hover {
	background-image:none;
	background: url(//opsantium.com/common/style/pay_h.png) no-repeat 50% 0;
    background-size:contain;
}

#pay_icon:disabled {
    background-image: none;
    outline: 0;
    background-color:#dddddd;
}

#pay_icon_med
{
	width: 40px;
	height: 36px;
    vertical-align:middle;
	cursor: pointer;
    border:none;
	background: url(//opsantium.com/common/style/pay.png) no-repeat 50% 0;
    background-size:contain;
}

#pay_icon_med:hover {
	background-image:none;
	background: url(//opsantium.com/common/style/pay_h.png) no-repeat 50% 0;
    background-size:contain;
}

#pay_icon_med:disabled {
    background-image: none;
    outline: 0;
    background-color:#dddddd;
}

#pay_icon_sm
{
	width: 30px;
	height: 27px;
    vertical-align:middle;
	cursor: pointer;
    border:none;
	background: url(//opsantium.com/common/style/pay.png) no-repeat 50% 0;
    background-size:contain;
}

#pay_icon_sm:hover {
	background-image:none;
	background: url(//opsantium.com/common/style/pay_h.png) no-repeat 50% 0;
    background-size:contain;
}

#pay_icon_sm:disabled {
    background-image: none;
    outline: 0;
    background-color:#dddddd;
}


#confirm_job_icon_sm
{
	width: 34px;
	height: 21px;
    vertical-align:middle;
	cursor: pointer;
    border:none;
	background: url(//opsantium.com/common/style/confirm_job_button.png?1) no-repeat 50% 0;
    background-size:contain;
}


#confirm_job_icon_sm:hover {
	background-image:none;
	background: url(//opsantium.com/common/style/confirm_job_button_h.png) no-repeat 50% 0;
    background-size:contain;
}

#confirm_job_icon_sm:disabled {
    background-image: none;
    outline: 0;
    background-color:#dddddd;
}



#clear_button_thin_r{
    vertical-align:middle;
    padding: 6px;
    padding-top:4px;
    padding-bottom:4px;
	cursor: pointer;
	background-color:none; 
    color:white;     
    border: 3px solid #77ab41;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
       -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    	    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    -webkit-border-radius: 8px;
  	   -moz-border-radius: 8px;
    	    border-radius: 8px;
}

#clear_button_thin_r:active {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    background-color:#FF0000;

}

#clear_button_thin_r:hover {
	background-image:none;
	background-color:#EDF9E1;
}

#clear_button_thin_r:disabled {
    background-image: none;
    outline: 0;
    background-color:#dddddd;
}



#accent_link
{
	background: none; 
    color: #1BB0E4; 
    font-weight:bold;
}

#accent_link:hover {
	background: none; 
    color: #12477B; 
    font-weight:bold;
}


#change_button{
    padding: 6px;
	cursor: pointer;
	background:#01333F; 
    color:#ffffff;     
    border: none;
	font-size:11px;
	font-weight:bold;
}

#change_button:active {
    background-image: none;
    outline: 0;
	border: none;
}

#change_button:hover {
	background-image:none;
	background:#DDC252; 
	text-decoration:underline;
}

#change_button:disabled {
    background-image: none;
    outline: 0;
    background-color:#dddddd;
}

#red_text_button{
    padding: 3px;
	cursor: pointer;
	color: #CE0000;
   	border:none;
    background:none;
    font-size: .85em;
}

#red_text_button:hover {
	color: #FF0000;
}

#red_text_button:disabled {
   color:#dddddd;
}

#pay_button{
    padding: 6px;
    padding-top:
    2px;    padding-bottom:4px;
	cursor: pointer;
	background-color:#77AB41; 
    color:white; 
    border:none;
}

#pay_button:hover {
	background-color:#90BF52;
}

#pay_button:disabled {
    background-color:#dddddd;
}


#blue_text_button{
    padding: 3px;
	cursor: pointer;
	color: #005CC1;
   	border:none;
    background:none;
    font-size: .85em;
}

#blue_text_button:hover {
	color: #007AFF;
}

#blue_text_button:disabled {
   color:#dddddd;
}


#blue_lrgtext_button{
    padding: 3px;
	cursor: pointer;
	color: #005CC1;
   	border:none;
    background:none;
    font-size: 1.5em;
}

#blue_text_button:hover {
	color: #007AFF;
}

#blue_text_button:disabled {
   color:#dddddd;
}


.toggle_button_thin{
	width:35px;
	cursor: pointer;
	color: #12477B; 
	border:none;
    background:none;
    font-weight:bold;
    font-size: 1.5em;
}

.toggle_button_thin:hover {
	background:none;
	color: #1BB0E4;
}

.toggle_button_thin:disabled {
    background: none;
    outline: 0;
    color:#dddddd;
}



.toggle_button_plus{
	width:20px;
	height:20px;
	cursor: pointer;
	border:none;
	background: url(//opsantium.com/common/style/toggle_d.png) no-repeat 50% 0;
    background-size:contain;
    vertical-align:middle;
}

.toggle_button_plus:hover {
	background: url(//opsantium.com/common/style/toggle_dh.png) no-repeat 50% 0;
    background-size:contain;
}


.toggle_button_minus{
	width:20px;
	height:20px;
	cursor: pointer;
	border:none;
	background: url(//opsantium.com/common/style/toggle_u.png) no-repeat 50% 0;
    background-size:contain;
}

.toggle_button_minus:hover {
	background: url(//opsantium.com/common/style/toggle_uh.png) no-repeat 50% 0;
    background-size:contain;
}



/**********************************************************************************************************************
 *  .btn
 */
 
.btn, a.btn
{
    padding: 8px;
    padding-left: 14px;
    padding-right: 14px;
    vertical-align:middle;
    margin:none;
	cursor: pointer;
	background-color:#000000; 
    color:#ffffff;    
    border: none;	
    font-weight:normal;
    font-size:15px;
    font-family: 'Titillium Web', sans-serif;
    outline:none;
    -webkit-border-radius: 5px;
  	   -moz-border-radius: 5px;
    	    border-radius: 5px;
}

.btn:hover
{
	border: none;
    padding: 8px;
    padding-left: 14px;
    padding-right: 14px;
	cursor: pointer;
}

.btn:disabled{background-color:#dddddd;}
.btn:visited{color:#ffffff;}
.btn:active{color:#ffffff;}

.btn.thin
{
    vertical-align:middle;
	padding: 6px;
    padding-top:4px;
    padding-bottom:4px;
    border: none;
    font-size:12px;
	
}


.btn.ultrathin
{
    padding: 4px;
    padding-top:2px;
    padding-bottom:2px;
    border: none;
}

.btn.fat
{
    padding: 20px;
    font-weight:bold;
    font-size: 18px;
    background:none;
}

.btn.tall
{
    vertical-align:middle;
	padding: 6px;
    padding-top:20px;
    padding-bottom:20px;
    border: none;
    font-size:12px;
     -webkit-border-radius: 0;
  	   -moz-border-radius: 0;
    	    border-radius: 0;    
}


.btn.green, 				.btn.thin.green, 			.btn.ultrathin.green,				.btn.fat.green				{background-color:#497A39;color:#ffffff;}
.btn.aqua, 					.btn.thin.aqua, 			.btn.ultrathin.aqua, 				.btn.fat.aqua				{background-color:#0198BB;color:#ffffff;}
.btn.blue, 					.btn.thin.blue, 			.btn.ultrathin.blue, 				.btn.fat.blue				{background-color:#105D9E;color:#ffffff;}
.btn.purple, 				.btn.thin.purple, 			.btn.ultrathin.purple, 				.btn.fat.purple				{background-color:#413091;color:#ffffff;}
.btn.red, 					.btn.thin.red, 				.btn.ultrathin.red, 				.btn.fat.red				{background-color:#C72927;color:#ffffff;}
.btn.orange, 				.btn.thin.orange, 			.btn.ultrathin.orange, 				.btn.fat.orange				{background-color:#EE7023;color:#ffffff;}
.btn.grey, 					.btn.thin.grey, 			.btn.ultrathin.grey, 				.btn.fat.grey			.btn.tall.grey			{background-color:#555555;color:#ffffff;}
.btn.blackgreen				.btn.thin.blackgreen, 		.btn.ultrathin.blackgreen, 			.btn.fat.blackgreen			{background-color:#000000;color:#ffffff;}
.btn.blackred				.btn.thin.blackred, 		.btn.ultrathin.blackred, 			.btn.fat.blackred			{background-color:#000000;color:#ffffff;}
.btn.blackblue				.btn.thin.blackblue, 		.btn.ultrathin.blackblue, 			.btn.fat.blackblue			{background-color:#000000;color:#ffffff;}
.btn.blackorange			.btn.thin.blackorange, 		.btn.ultrathin.blackorange, 		.btn.fat.blackorange		{background-color:#000000;color:#ffffff;}

.btn.blackgreen:hover, 		.btn.thin.blackgreen:hover, 	.btn.ultrathin.blackgreen:hover,	 .btn.fat.blackgreen:hover		{background-color:#497A39;}
.btn.blackred:hover, 		.btn.thin.blackred:hover, 		.btn.ultrathin.blackred:hover, 		 .btn.fat.blackred:hover		{background-color:#C72927;}
.btn.blackblue:hover,		.btn.thin.blackblue:hover, 		.btn.ultrathin.blackblue:hover,	 	 .btn.fat.blackblue:hover		{background-color:#4DB5EF;}
.btn.blackorange:hover,		.btn.thin.blackorange:hover, 	.btn.ultrathin.blackorange:hover, 	 .btn.fat.blackorange:hover		{background-color:#EE7023;}

.btn.green:hover, 		.btn.thin.green:hover, 		.btn.ultrathin.green:hover, 	.btn.fat.green:hover		{background-color:#63AA0F;}
.btn.aqua:hover, 		.btn.thin.aqua:hover, 		.btn.ultrathin.aqua:hover, 		.btn.fat.aqua:hover			{background-color:#03B9D8;}
.btn.blue:hover, 		.btn.thin.blue:hover, 		.btn.ultrathin.blue:hover, 		.btn.fat.blue:hover			{background-color:#4DB5EF;}
.btn.purple:hover, 		.btn.thin.purple:hover, 	.btn.ultrathin.purple:hover, 	.btn.fat.purple:hover		{background-color:#6550FF;}
.btn.red:hover, 		.btn.thin.red:hover, 		.btn.ultrathin.red:hover, 		.btn.fat.red:hover			{background-color:#ff403d;}
.btn.orange:hover, 		.btn.thin.orange:hover, 	.btn.ultrathin.orange:hover, 	.btn.fat.orange:hover		{background-color:#FF9810;}
.btn.grey:hover, 		.btn.thin.grey:hover, 		.btn.ultrathin.grey:hover, 		.btn.fat.grey:hover			.btn.tall.grey:hover			{background-color:#12477B;}

.btn.green:disabled, 	.btn.thin.green:disabled, 	.btn.ultrathin.green:disabled, 	.btn.fat.green:disabled		{background-color:#dddddd;cursor:default;}
.btn.aqua:disabled, 	.btn.thin.aqua:disabled, 	.btn.ultrathin.aqua:disabled, 	.btn.fat.aqua:disabled		{background-color:#dddddd;cursor:default;}
.btn.blue:disabled, 	.btn.thin.blue:disabled, 	.btn.ultrathin.blue:disabled, 	.btn.fat.blue:disabled		{background-color:#dddddd;cursor:default;}
.btn.purple:disabled, 	.btn.thin.purple:disabled, 	.btn.ultrathin.purple:disabled, .btn.fat.purple:disabled	{background-color:#dddddd;cursor:default;}
.btn.red:disabled, 		.btn.thin.red:disabled, 	.btn.ultrathin.red:disabled, 	.btn.fat.red:disabled		{background-color:#dddddd;cursor:default;}
.btn.orange:disabled, 	.btn.thin.orange:disabled, 	.btn.ultrathin.orange:disabled, .btn.fat.orange:disabled	{background-color:#dddddd;cursor:default;}
.btn.grey:disabled, 	.btn.thin.grey:disabled, 	.btn.ultrathin.grey:disabled, 	.btn.fat.grey:disabled		{background-color:#333333;color: #666666;cursor:default;}

.btn.blackgreen:disabled, 		.btn.thin.blackgreen:disabled, 		.btn.ultrathin.blackgreen:disabled,	 	.btn.fat.blackgreen:disabled		{background-color:#dddddd;cursor:default;}
.btn.blackred:disabled, 		.btn.thin.blackred:disabled, 		.btn.ultrathin.blackred:disabled, 		.btn.fat.blackred:disabled			{background-color:#dddddd;cursor:default;}
.btn.blackblue:disabled,		.btn.thin.blackblue:disabled, 		.btn.ultrathin.blackblue:disabled,	 	.btn.fat.blackblue:disabled			{background-color:#dddddd;cursor:default;}
.btn.blackorange:disabled,		.btn.thin.blackorange:disabled, 	.btn.ultrathin.blackorange:disabled, 	.btn.fat.blackorange:disabled		{background-color:#dddddd;cursor:default;}

.btn.accent{
	background:  none;
    color: #1BB0E4; 
    border: 2px solid  #1BB0E4;
}

.btn.accent:hover {
	background-image:none;
	background-color: #12477B;
    color: #ffffff;     
}

.btn.accent.fw
{
	display:block;
    width:95%;
    text-align:center;
    padding-top: 15px;
    padding-bottom: 15px;
	cursor: pointer;
}

.btn.accent.fw:disabled 
{
    background-image: none;
    outline: 0;
    background-color:#dddddd;
    color:#aaaaaa;
    border: 2px solid  #dddddd;
    cursor: default;
    
}

.btn.accent.fw.color1
{
	border: 1px solid   #1BB0E4;
	background-color: #1BB0E4;
    color: #ffffff;     
}

.btn.accent.fw.color1:hover {
	background-image:none;
    background-color: #54c4eb;
    color: #ffffff;     
}

.btn.accent.fw.color2
{
	border: 1px solid   #12477B;
	background-color: #12477B;
    color: #ffffff;     
}

.btn.accent.fw.color2:hover {
	background-image:none;
    background-color: #4e759c;
    color: #ffffff;     
}

.btn.line
{
    padding: 5px;
    font-weight:bold;
    font-size: 14px;
    background:none;
}

.btn.thinline
{
    padding: 3px;
    font-weight:bold;
    font-size: 14px;
    background:none;
}

.btn.fatline
{
    padding: 20px;
    font-weight:bold;
    font-size: 18px;
    background:none;
}
	
.btn.line.aqua, 			.btn.thinline.aqua, 			.btn.fatline.aqua			{color:#0198BB;border: 1px solid #0198BB;}
.btn.line.aqua:hover, 		.btn.thinline.aqua:hover, 		.btn.fatline.aqua:hover	{color:#ffffff;background-color: #03B9D8;}
.btn.line.aqua:disabled, 	.btn.thinline.aqua:disabled, 	.btn.fatline.aqua:disabled	{color:#dddddd;border:2px solid #dddddd;}
.btn.line.blue, 			.btn.thinline.blue, 			.btn.fatline.blue			{color:#105D9E;border: 1px solid #105D9E;}
.btn.line.blue:hover, 		.btn.thinline.blue:hover, 		.btn.fatline.blue:hover	{color:#ffffff;background-color: #4DB5EF;}
.btn.line.blue:disabled, 	.btn.thinline.blue:disabled, 	.btn.fatline.blue:disabled	{color:#dddddd;border:2px solid #dddddd;}
.btn.line.green, 			.btn.thinline.green, 			.btn.fatline.green			{color:#63AA0F;border: 1px solid #63AA0F;}
.btn.line.green:hover, 		.btn.thinline.green:hover, 		.btn.fatline.green:hover	{color:#ffffff;background-color: #7BD100;}
.btn.line.green:disabled, 	.btn.thinline.green:disabled, 	.btn.fatline.green:disabled {color:#dddddd;border:2px solid #dddddd;}
.btn.line.red, 				.btn.thinline.red, 				.btn.fatline.red			{color:#CE0000;border:1px solid #CE0000;}
.btn.line.red:hover, 		.btn.thinline.red:hover, 		.btn.fatline.red:hover		{color:#ffffff;background-color: #FF0000;}
.btn.line.red:disabled, 	.btn.thinline.red:disabled, 	.btn.fatline.red:disabled	{color:#dddddd;border:2px solid #dddddd;}
.btn.line.lightgrey, 			.btn.thinline.lightgrey, 				.btn.fatline.lightgrey			{color:#666666;border:1px solid #666666;}
.btn.line.lightgrey:hover, 		.btn.thinline.lightgrey:hover, 			.btn.fatline.lightgrey:hover	{color:#666666;border:1px solid #666666;}
.btn.line.lightgrey:disabled, 	.btn.thinline.lightgrey:disabled, 		.btn.fatline.lightgrey:disabled	{color:#666666;border:2px solid #666666;}


.btn.builder-box-compact
{
	background-color:#ffffff;
	display: inline-block;
    height:contain;
    color: #000000;
    font-size: .98em;
    padding:10px;
    vertical-align:top;
    border:2px solid #cccccc;
    margin-top:10px;
    margin-bottom:10px;
    width: 100%;
    cursor:pointer;
    text-align:left;
}

.btn.builder-box-compact:hover
{
	border: 2px solid #017abb;
    background-color: #edf8fc;
}


/* FOR THE BRANDING GRAPHICS UPLOAD */
#btn_thin_blue
{
    padding: 6px;
    padding-top:4px;
    padding-bottom:4px;
    border: none;
	background-color:#105D9E;
    color:#ffffff;
	cursor: pointer;
    border: none;
	
    font-weight:normal;
}
#btn_thin_blue:hover{background-color:#4DB5EF;}
#btn_thin_blue:disabled{background-color:#dddddd;}


/* FOR THE GOOGLE MAP MARKER ONLY */
#btn_ultrathin_blue
{
    padding: 4px;
    padding-top:2px;
    padding-bottom:2px;
    border: none;
	background-color:#105D9E;
    color:#ffffff;
	cursor: pointer;
    border: none;
	
    font-weight:normal;
}
#btn_ultrathin_blue:hover{background-color:#4DB5EF;}
#btn_ultrathin_blue:disabled{background-color:#dddddd;}


.invisi_button_thin{
	
    display:inline-flex;
    vertical-align:middle;
    width:10px;
    cursor: default;
    padding: 10px;
    padding-top:7px;
    padding-bottom:7px;
	background-color:#ffffff; 
    color:white;     
    border: none;
    font-weight:normal;
}

.invisi_button_thin:hover {
	background-color:#ffffff;
}

.invisi_button_thin:disabled {
    background-color:#ffffff;
}

#question_button{
	width: 25px;
    height: 25px;
    text-align: center;
    vertical-align:middle;
	cursor: pointer;
	background-color:#cccccc; 
    border: 1px solid #666666;
    color:#333333;     
    font-weight:bold;
    font-size: 1em;
    box-shadow: 0;
    border-radius:2px;
    
    
}

#question_button:hover {
	background-color:#ffffff;
    
}

#question_button:disabled {
    background-image: none;
    outline: 0;
    background-color:#dddddd;
}

#light_button_thin{
    padding-left: 4px;
    padding-right: 4px;
    padding-top:
    4px;	cursor: pointer;
	background-color:#CFE3FF; 
    color:white;     
    border: none;
    font-weight:normal;
}

#light_button_thin:hover {
	background-color:#EBF2FC;
}

#light_button_thin:disabled {
    background-color:#dddddd;
}

#light_button{
    padding: 10px;
    padding-left: 14px;
    padding-right: 14px;
	cursor: pointer;
	background-color:#CFE3FF; 
    color:#3F60AC;     
    border: none;
}

#light_button:hover {
	background-color:#EBF2FC;
}

#light_button:disabled {
    background-color:#dddddd;
}

#box_button{
	cursor: pointer;
    box-shadow: 0 10px 6px -6px #777;
	text-decoration: none;
	font-weight: normal;    
	border: 3px solid #cccccc;
    min-height: 100px;
}

#box_button:hover {
	background:#D5EAC3;
	border: 3px solid #333333;
	text-decoration: none;
	font-weight: normal;
}

#box_button:disabled {
    outline: 0;
}


#crystal_clear_button{
	cursor: pointer;
    box-shadow: 0;
	text-decoration: none;
	font-weight: normal;    
	border: none;
    background:none;
}


#black_button{
    padding: 8px;
    padding-left: 11px;
    padding-right: 11px;
	cursor: pointer;
	background:none; 
    color:white;   
    font-weight:bold;  
    border: none;
	font-size:1.25em;
}


#wysiwyg_button{
	min-width:90px;
    padding: 8px;
	cursor: pointer;
	background-color:#295FAC; 
    color:white;     
    border: 1px solid #ccc;
    border-color: #295FAC #295FAC #bfbfbf;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    border-bottom-color: #b3b3b3;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
       -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    	    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    -webkit-border-radius: 3px;
  	   -moz-border-radius: 3px;
    	    border-radius: 3px;
}

#wysiwyg_button:active {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    background-color:#389BF4;

}

#wysiwyg_button:hover {
	background-image:none;
	background-color:#389BF4;
}

#wysiwyg_button:disabled {
    background-image: none;
    outline: 0;
    background-color:#dddddd;
}

#wysiwyg_color
{
	width:89%;
    padding: 4px;
	cursor: pointer;
	background-color:#295FAC; 
    color:white;     
    border: 1px solid #ccc;
    border-color: #295FAC #295FAC #bfbfbf;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    border-bottom-color: #b3b3b3;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
       -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    	    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    -webkit-border-radius: 3px;
  	   -moz-border-radius: 3px;
    	    border-radius: 3px;
}

#wysiwyg_color:active
{
    outline: 0;
    background-color:#389BF4;
}

#wysiwyg_color:hover {
	background-image:none;
	background-color:#389BF4;
}

#wysiwyg_color:disabled {
    background-image: none;
    outline: 0;
    background-color:#dddddd;
}


#pageNav_button
{
    width: 40px;
    height: 35px;
	cursor: pointer;
    color: rgba(0,0,0,0);
    font-weight: bold;
    text-align:left;
    
    border: none;
}

#pageNav_button[rel="next"]
{
	background: url(//opsantium.com/common/style/next.png) no-repeat 50% 0;
    background-size: contain;
}

#pageNav_button[rel="next"]:hover
{
	background: url(//opsantium.com/common/style/next_hover.png) no-repeat 50% 0;
    background-size: contain;
    border: none;
}

#pageNav_button[rel="prev"]
{
	background: url(//opsantium.com/common/style/prev.png) no-repeat 50% 0;
    background-size: contain;
}

#pageNav_button[rel="prev"]:hover
{
	background: url(//opsantium.com/common/style/prev_hover.png) no-repeat 50% 0;
    background-size: contain;
    border: none;
}

#pageNav_button[rel="save"]
{
	background: url(//opsantium.com/common/style/save.png) no-repeat 50% 0;
    background-size: contain;
}

#pageNav_button[rel="save"]:hover
{
	background: url(//opsantium.com/common/style/save_hover.png) no-repeat 50% 0;
    background-size: contain;
    border: none;
}

#pageNav_button[rel="skip"]
{
	background: url(//opsantium.com/common/style/next.png) no-repeat 50% 0;
    background-size: contain;
}

#pageNav_button[rel="skip"]:hover
{
	background: url(//opsantium.com/common/style/next_hover.png) no-repeat 50% 0;
    background-size: contain;
    border: none;
}


#golive_button{
    padding: 12px;
    padding-left: 150px;
    padding-right: 150px;
	cursor: pointer;
	background-color:#007AFF; 
    color:white;     
    border: 2px solid #ccc;
    border-color: #007AFF #007AFF #bfbfbf;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    border-bottom-color: #b3b3b3;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
       -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    	    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    -webkit-border-radius: 15px;
  	   -moz-border-radius: 15px;
    	    border-radius: 15px;
    box-shadow: 5px 5px 5px #aaaaaa;
 	font-family: 'Oswald', sans-serif; 
    color: #ffffff;
	text-align: center; 
    font-size: 1.5em;
}

#golive_button:active {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
}

#golive_button:hover {
	background-image:none;
	background-color:#90BF52;
}

#golive_button:disabled {
    background-image: none;
    outline: 0;
    background-color:#dddddd;
}
select:required:invalid {
  color: gray;
}

option[id='bus_type']{
	color: #005cc1;
    font-size:1.25em;
    font-weight:bold;
}

textarea{
    resize: none;
    width: 100%;
    -webkit-box-sizing: border-box; /* <=iOS4, <= Android  2.3 */
       -moz-box-sizing: border-box; /* FF1+ */
            box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
    
     -webkit-border-radius: 0;
  	   -moz-border-radius: 0;
    	    border-radius: 0;
            
     border:1px solid #bbbbbb;   
}


input[type='file'], [rel='full_width'] {
    width: 100%;
}

input[type=color]
{
	width: 100px;
}

input[type='button'] {
	cursor: pointer;
}

input[type='text'],input[type='number'],input[type='email'], input[type='password']{
    -webkit-border-radius: 0;
  	   -moz-border-radius: 0;
    	    border-radius: 0;
    padding: 4px;
    padding-top: 8px;
    padding-bottom: 8px;
    border: 1px solid #bbbbbb;
}

input[name=task_timing] {
    width: 50px;
} 

input[rel='customer']
{
    width:98%;
}

input[type='date']{
    -webkit-border-radius: 5px;
  	   -moz-border-radius: 5px;
    	    border-radius: 5px;
 	padding: 4px;
    padding-top: 6px;
    padding-bottom: 6px;    
    background-color: #ffffff;
}

input[type='checkbox']{
	cursor: pointer;
    width:20px;
    height:20px;
}

input[id='tcn_checkbox']{
	cursor: pointer;
    width:20px;
    height:20px;
   	-ms-transform: scale(1.2); /* IE */
      -moz-transform: scale(1.2); /* FF */
      -webkit-transform: scale(1.2); /* Safari and Chrome */
      -o-transform: scale(1.2); /* Opera */
}


.qty-input
{
	width:85px;
    text-align:center;
}

.cost-input
{
	width:135px;
    text-align:center;
}

select{
	cursor: pointer;
    -webkit-border-radius: 5px;
  	   -moz-border-radius: 5px;
    	    border-radius: 5px;
    padding: 4px;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: #ffffff;
}

select[id="priority"]
{
    padding: 2px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size:.85em;
    
}

.tooltip {
	display: none;
    padding: 10px;
}

.input {
    position: relative;
}

.input:hover .tooltip {
    background: #dddddd;
    border-radius: 3px;
    bottom: 40px;
    display: inline;
    right: 0;
    position: absolute;
}




.check-group {
	display: inline-block;
	width: 230px;
	margin: 5px;
	padding: 10px;
	text-align: left;
	vertical-align: middle;
	background: #0D8AC1;
	box-shadow: 0 3px 7px 2px rgba(0,0,0,.3);
}

.check-group:hover
{
	background: #00C3FF;	
}


.check {
	font-size: 18px;
    color: #ffffff;
	position: relative;
	display: block;
	padding-left: 5px;
	cursor: pointer;
}

.check input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}

.check_indicator {
	position: absolute;
	top: 2px;
	right: 0;
	width: 20px;
	height: 20px;
	background: #e6e6e6;
    border: 1px solid #999;
}

/* Hover and focus states */
.check:hover input ~ .check_indicator{
	background: #D5FF85;
}

/* Checked state */
.check input:checked ~ .check_indicator {
	border-color: #D5FF85;
	background: #90BF52;
}

/* Hover state whilst checked */
.check:hover input:not([disabled]):checked ~ .check_indicator,
.check input:checked:focus ~ .check_indicator {
	border-color: #D5FF85;
	background: #90BF52;
}

/* Disabled state */
.check input:disabled ~ .check_indicator {
	pointer-events: none;
	opacity: .6;
	background: #e6e6e6;
}

/* Check mark */
.check_indicator:after {
	position: absolute;
	display: none;
	content: '';
}

/* Show check mark */
.check input:checked ~ .check_indicator:after {
	display: block;
}

/* Checkbox tick */
.check--checkbox .check_indicator:after {
	top: 4px;
	left: 8px;
	width: 3px;
	height: 8px;
	transform: rotate(45deg);
	border: solid #fff;
	border-width: 0 2px 2px 0;
}

/* Disabled tick colour */
.check--checkbox input:disabled ~ .check_indicator:after {
	border-color: #7b7b7b;
}


.file-upload {
    position: relative;
    overflow: hidden;
    margin: 5px;
}

.file-upload span {
    font-size: 10px;
}

.file-upload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}.builder {
	padding: 0;
	border: none;
    
    width: 75%;	text-align: center; 
	color: black;
	margin: 0 auto;
}


.builder_box{
	padding: 15px;
    width:  100%;
    background: #ffffff;
      -webkit-border-radius: 8px;
  	   -moz-border-radius: 8px;
    	    border-radius: 8px;
}

.main_bkgd_site_designer
{
	background: url(//opsantium.com/style/watermark.png) no-repeat 50%;
    background-size: contain; 
}

.builder-heading{
    font-size: 2em;
	color: #333333;
    padding-top: 15px;
    padding-bottom: 15px;
}

.builder-subtitle{
    font-size: 1.25em;
	color: #485937;
    padding-top: 10px;
    padding-bottom: 15px;
}

.builder-subheading{
    font-size: 1.5em;
	color: #ffffff;
    padding-top: 15px;
    background:#77AB41;
    border: 2px solid #999;
}

.builder-line-item
{
    padding:5px;
    background: #ffffff;
    border:1px solid #cccccc;
}

.builder-line-item.nobkgd
{
    padding:5px;
    background:none;
    border:1px solid #cccccc;
}

.builder-line-item.btmline
{
	border-left:none;
    border-top:none;
    border-right:none;
}

.line-item-highlight{
	color: #005CC1;	
  font-size: 1.25em;
}

.builder-add-item{
    padding: 10px;
}


.builder-highlight{
	color: #0076BF;	
}

.builder-warning{
	color: #60B200;	
}

.builder-important{
	color: #ce0000;	
}

.builder_table_header
{
  background-color:#555555;
  color:#ffffff;
  font-size: 1.25em;
  font-weight: bold;
  padding: 5px;
  padding-top: 10px;
  padding-left: 10px;
  vertical-align: middle;
}
.builder_table_subheader
{
  background-color:#eeeeee;
  border: 1px solid #cccccc;
  font-size: 1em;
  font-weight: bold;
  padding: 10px;
  vertical-align: middle;
}
  
.builder_table_content
{
    font-size: 1em;
    padding: 5px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.builder_table_subcontent
{
    font-size: 1em;
    padding: 5px;
    padding-left: 10px;
    border: 1px solid #dddddd;
    border-top :none;
   
}

.div-table{
	display: table-cell;
}

/*
  Hide radio button (the round disc)
  we will use just the label to create pushbutton effect
*/
input[type=radio] {
    display:none; 
}
 
input[type=radio] + label {
	min-width:60px;
    display:inline-block;
    margin:-2px;
    padding: 4px 6px;
    margin-bottom: 0;
    font-size: 1em;
    line-height: 20px;
    color: #333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
    background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
    background-image: -o-linear-gradient(top,#fff,#e6e6e6);
    background-image: linear-gradient(to bottom,#fff,#e6e6e6);
    background-repeat: repeat-x;
    border: 1px solid #ccc;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    border-bottom-color: #b3b3b3;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
       -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    	    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    -webkit-border-radius: 5px;
  	   -moz-border-radius: 5px;
    	    border-radius: 5px;

}
 
input[type=radio]:checked + label {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    background-color:#EAF7FE;
    border: 1px solid rgb(52,198,244);

}

.builder input[type=checkbox] {
    display:none; 
}
 
.builder input[type=checkbox] + label {
	min-width:15px;
    display:inline-block;
    margin:-2px;
    padding: 2px 2px;
    margin-bottom: 0;
    font-size: 1em;
    line-height: 20px;
    color: #333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #f2f2f2;
    color: #f2f2f2;
    background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
    background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
    background-image: -o-linear-gradient(top,#fff,#e6e6e6);
    background-image: linear-gradient(to bottom,#fff,#e6e6e6);
    background-repeat: repeat-x;
    border: 1px solid #bbbbbb;
    border-color: rgba(0,0,0,0.3) rgba(0,0,0,0.3) rgba(0,0,0,0.9);
    border-bottom-color: #b3b3b3;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);

}

.builder input[type=checkbox] + label:hover {
    display:inline-block;
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    background-color:#7BD100;
    color:#ffffff;
}
 
.builder input[type=checkbox]:checked + label {
    display:inline-block;
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    background-color:#63AA0F;
    color:#ffffff;
    
}

.builder input[rel=availability]
{
    display:none; 
}

.builder input[rel=availability] + label {
	min-width:15px;
    display:inline-block;
    margin:-2px;
    padding: 2px 2px;
    margin-bottom: 0;
    font-size: 1em;
    line-height: 20px;
    color: #333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    vertical-align: middle;
    cursor: pointer;
    background: red;
    color:#ffffff;
   
}

.builder input[rel=availability]:checked + label {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    background-color:#7BD100;
    color:#ffffff;
}

.builder input[rel=availability] + label div[id=unavailable] {
	float: left;
	visibility: visible;
}

.builder input[rel=availability]:checked + label div[id=unavailable] {
	float: left;
	visibility: hidden;
}

input[name=duration_hours], input[name=duration_minutes], input[name=cutoff_time], input[name=spaces_available],input[name=multiday], [name=duration_hours_dt], input[name=duration_minutes_dt], input[name=resource_quantity] {
    width: 35px;
} 
label[name=time_unit_type_label]{
    width: 225px;
} 

a[name=link_bar_example]
{
	color: #eeeeee}

a:hover[name=link_bar_example]
{
	color: #ffffff}

td[name=link_bar_bkgd_colour_td]
{
	background-color: #333333;
}

td:hover[name=link_bar_bkgd_colour_td]
{
	background-color: #1681b0}

a[name=bottom_bar_example]
{
	color: #202D19}

a:hover[name=bottom_bar_example]
{
	color: #8DC16A}


.builder-box{
	display: inline-block;
    height:contain;
    color: #000000;
    font-size: .98em;
    padding-top:10px;
    padding-bottom:10px;
    vertical-align:top;
    border:1px solid #cccccc;
    margin-top:10px;
    margin-bottom:10px;
    width:100%;
    text-align:center;
    
    max-width:500px;min-height:250px;}

.builder-box.whitebkgd
{
 	margin:10px;
	background:#ffffff;
}

.builder-box.no-outline{
	border:none;
}


.designer-box{
	display: inline-block;
        height:contain;
    color: #000000;
    font-size: .98em;
    padding:10px;
    vertical-align:top;
    border:1px solid #cccccc;
    margin:10px;
}

.builder-spacer
{
	padding-bottom:10px;
}

.builder-middle-align
{
	text-align:center;
}
.admin_table_header
{
  background-color:#EDF2E4;
  font-size: 1.25em;
  font-weight: bold;
  padding: 5px;
  padding-top: 10px;
  padding-left: 10px;
  vertical-align: middle;
}
.admin_table_subheader
{
  background-color:#EDEDF2;
  border-bottom: 1px solid #dddddd;
  font-size: 1em;
  font-weight: bold;
  padding: 5px;
  vertical-align: middle;
}
  
.admin_table_off
{
    font-size: .85em;
	padding:3px; 
    padding-left:15px; 
    background-color:#FFDCDC; 
    border:3px solid #ffffff;
}

.admin_table_blank
{
    font-size: 1em;
    padding: 5px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom:1px solid #dddddd;
}

.admin_table_past
{
    font-size: 1em;
    padding: 5px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom:1px solid #dddddd;
    background-color: #eeeeee;
}

.admin_table_heading
{
    font-size: .85em;
}

.admin_portal_title {
	font-family: 'Oswald', sans-serif;
    font-weight:bold;
    font-size: 2em;
	color: #1681b0;
}

#page_view
{
	overflow-x:auto;
}

.page_view
{
	overflow-x:auto;
}

.modal_overflow_view
{
	width:100%;
	overflow-x:auto;
}
.customer-table
{
    margin: 10px;
}


.quote-table
{
    margin: 10px;
    clear:both;
}

.customer-area
{
    margin: 10px;
    clear:both;
}

.project-area
{
    margin: 10px;
    clear:both;
}

.document-area
{
	margin: 10px;
    clear:both;
}

.button-area
{
    clear:both;
    text-align:right;
}


.quote-header
{
	border-bottom: 2px solid #aaa;
    padding:5px;
    padding-top:30px;
    padding-bottom:2px;    
    font-weight:bold;	
    font-size:1.25em;
}


.customer-header
{
    padding-top:30px;
    padding-bottom:2px;    
    font-weight:bold;	
    font-size:1.25em;
}

.input-title
{
    padding-top:8px;
	line-height:8px;
    font-size: .85em;
    padding-left:2px;
    color:#666666;

}

#input-title{
    padding-top:8px;
    font-size:.85em;
    color:#666666;
}

.customer-info
{
    padding:2px;
}

.quote-header-change
{
	border-bottom: 2px solid #ce0000;
	border: 1px solid #ce0000;
    background: #ce0000;
    color: #ffffff;
    padding:5px;
    padding-top:10px;
    padding-bottom:2px;    
    font-weight:bold;	
    font-size:1.25em;
}

.line-item-header-change
{
	border-bottom: 2px solid #aaa;
	border: 1px solid #ce0000;
    padding:5px;
    background: #660000;
    color:#ffffff;
    font-weight:bold;

}

.line-item-header
{
	border-bottom: 2px solid #aaa;
	border: 1px solid #aaa;
    padding:5px;
    background:#c9c9c9;
    font-weight:bold;

}

.line-item-header.blue
{
	border-bottom: 2px solid #2788e3;
	border: 1px solid #2788e3;
    background: #D3E4F4;
}

.line-item.blue
{
	border: 1px solid #2788e3;
    background-color: #f0f6fc;
}


.line-item-header.red
{
	border-bottom: 2px solid #690101;
	border: 1px solid #690101;
    background: #cc4343;
    color:#ffffff;
}

.line-item.redtext
{
	color: #cc4343;
}

.line-item.red
{
	border: 1px solid #690101;
    background-color: #ffdede;
}

.line-item-header.green
{
	border-bottom: 2px solid #4c781e;
	border: 1px solid #4c781e;
    background: #77ab41;
    color:#ffffff;
}

.line-item.green
{
	border: 1px solid #4c781e;
    background-color: #caeda6;
}

.line-item.greentext
{
	color: #77ab41;
}

.line-item-thin
{
	border: 1px solid #aaa;
    padding:3px;
    background: #ffffff;
    font-size: .85em;
}

.line-item-ultrathin
{
	border: 1px solid #aaa;
    padding:2px;
    background: #ffffff;
    font-size: .55em;
}

.line-item-change
{
	border: 1px solid #ce0000;
    padding:5px;
    background: #ffffff;
}

.line-item-change.left
{
	border: 1px solid #ce0000;
    padding:5px;
    background: #ffffff;
   	border-right:none;
}

.line-item-change.middle
{
	border: 1px solid #ce0000;
    padding:5px;
    background: #ffffff;
   	border-left:none;
   	border-right:none;
}

.line-item-change.right
{
	border: 1px solid #ce0000;
    padding:5px;
    background: #ffffff;
   	border-left:none;
}


.line-item
{
	border: 1px solid #aaa;
    padding:5px;
    background: #ffffff;
}

.line-item.noborder
{
	border: none;
    background: none;

}

.line-item.spacer
{
	margin-bottom:40px;
}

.line-item.spacer.noborder
{
	border: none;
    background: none;
}

.line-item.left
{
	border: 1px solid #aaa;
    padding:5px;
    background: #ffffff;
   	border-right:none;
}

.line-item.middle
{
	border: 1px solid #aaa;
    padding:5px;
    background: #ffffff;
   	border-left:none;
   	border-right:none;
}

.line-item.right
{
	border: 1px solid #aaa;
    padding:5px;
    background: #ffffff;
   	border-left:none;
}

.line-item-subheader
{
	border: 1px solid #aaa;
    padding:5px;
    padding-left:3px;
    padding-right:3px;
    background: #ddd;
    font-weight:bold;

}

.line-item-fatbtm
{
	border: none;
	border-bottom: 3px solid #333333;
    padding:2px;
    padding-left:3px;
    padding-right:3px;
    padding-top:15px;
    font-weight:bold;
    font-size: .75em;
    vertical-align:bottom;
    text-align:left;


}

.line-item-mobile
{
	border: 1px solid #aaa;
    padding:3px;
    background: #ffffff;
}



.line-item-subtotal
{
	border: 1px solid #aaa;
    padding:5px;
    background: #ddd;
    font-weight:bold;

}

.line-item-total
{
	border: 1px solid #aaa;
    padding:5px;
    background: #ccc;
    font-weight:bold;

}

.line-item-pt
{
	border: 1px solid #aaa;
    padding:5px;
    padding-bottom:10px;
    background: #FCDCDC;
    font-weight:bold;

}

.line-item-deleted
{
	border: 1px solid #aaa;
    padding:5px;
    background: #CE0000;
    color: #ffffff;
}

.quote-list
{
	padding:8px;
    background:#ffffff;
    color:#000000;
    min-width:150px;
    }




.quote-list-header
{
	padding:8px;
}

.quote-summary-header
{
	padding:15px;
    background:#0053A5;
    -webkit-border-radius: 8px 8px 0px 0px;
  	   -moz-border-radius: 8px 8px 0px 0px;
    	    border-radius: 8px 8px 0px 0px;
}

.quote-list-table
{
    border:1px solid #999;
    vertical-align:top;
    background:#777777;
    color:#ffffff;
}

.quote-list-table.paid			{border:3px solid #77ab41; background:#77ab41;}
.quote-list-table.reminder		{border:1px solid #555555; background:#555555;}
.quote-list-table.warning		{border:3px solid #ab8700; background:#ab8700;}
.quote-list-table.working		{border:3px solid #e35909; background:#e35909;}
.quote-list-table.aboutdue		{border:3px solid #CE0000; background:#CE0000;}
.quote-list-table.overdue		{border:3px solid #7C0000; background:#7C0000;}

.quote-list-view-reminder
{
	padding:6px;
    background:#555555;
    color:#000000;
    border: 1px solid #ffffff;
    border-top:none;
}

.quote-list-view-warning
{
	padding:6px;
    background:#ab8700;
    color:#000000;
    border: 1px solid #ffffff;
    border-top:none;
}

.quote-list-view-working
{
	padding:6px;
    background:#e35909;
    color:#000000;
    border: 1px solid #ffffff;
    border-top:none;
}

.quote-list-view-aboutdue
{
	padding:6px;
    background:#CC0000;
    color:#000000;
    border: 1px solid #ffffff;
    border-top:none;
}

.quote-list-view-overdue
{
	padding:6px;
    background:#7C0000;
    color:#000000;
    border: 1px solid #ffffff;
    border-top:none;
}

.quote-list-view-paid
{
	padding:6px;
    background:#77ab41;
    color:#000000;
    border: 1px solid #ffffff;
    border-top:none;
}

.quote-list-view-standard
{
	padding:6px;
    background:#777777;
    color:#000000;
    border: 1px solid #ffffff;
    border-top:none;
}

.quote-list-view
{
	padding:6px;
    background:#ffffff;
    color:#000000;
    border: 1px solid #999;
    border-top:none;
}

.quote-list-view-negative
{
	padding:6px;
    background:#ffffff;
    color:#FF0000;
    border: 1px solid #999;
    border-top:none;
}

.quote-list-view-empty
{
	padding:6px;
    background:#ffffff;
    color:#000000;
    border-top:none;
}

.quote-list-view-header-outline
{
	padding:8px;
    border: 8px solid #005CC1;
    border-bottom:none;
    font-weight:bold;
}

.quote-list-view-header
{
	padding:8px;
    border: 1px solid #005CC1;
    border-top:none;
    background:#005CC1;
    border-bottom:none;
    font-weight:bold;
}

.quote-list-view-header-green
{
	padding:8px;
    border: 1px solid #999;
    border-top:none;
    background:#77ab41;
    border-bottom:none;
    font-weight:bold;
}

.quote-list-view-subheader
{
	padding:8px;
    border: 1px solid #999;
    border-top:none;
    border-bottom:none;
    font-weight:bold;
}


.quote-list-view-totals
{
	padding:6px;
    border: 1px solid #999;
    border-top:none;
    border-bottom:none;
    background:#c0c0c0;
    color:#000000;
}

.quote-list-view-table
{
	margin-top:5px;
    border:1px solid #999;
    -webkit-border-radius: 8px 8px 0px 0px;
  	   -moz-border-radius: 8px 8px 0px 0px;
    	    border-radius: 8px 8px 0px 0px;
    background:#777777;
    color:#ffffff;
}


.quote-list-view-req
{
	padding:6px;
    background:#FFFFFF;
    color:#000000;
    border: 1px solid #001A87;
    border-top:none;
}

.quote-list-view-header-req
{
	padding:8px;
    border: 1px solid #001A87;
    border-top:none;
    border-bottom:none;
    font-weight:bold;
}

.quote-list-view-table-req
{
	margin-top:5px;
    border:1px solid #001A87;
    -webkit-border-radius: 8px 8px 0px 0px;
  	   -moz-border-radius: 8px 8px 0px 0px;
    	    border-radius: 8px 8px 0px 0px;
    background:#0077D8;
    color:#ffffff;
}


.quote-list-req
{
	padding:8px;
    padding-top:4px;
    padding-bottom:4px;
    background:#ffffff;
    color:#000000;
    min-width:150px;
}

.quote-list-header-req
{
	padding:8px;
}

.quote-list-table-req
{
	margin-top:20px;
    border:1px solid #001A87;
	display: inline-block; 
    vertical-align:top;
    -webkit-border-radius: 8px 8px 0px 0px;
  	   -moz-border-radius: 8px 8px 0px 0px;
    	    border-radius: 8px 8px 0px 0px;
    background:#FFD523;
    color:#000;
}

a[rel=quote_list_button]
{
	display:inline-block;
}

.nowrap {
    overflow-x: scroll;
    white-space: nowrap;
    padding: 0;
}

.terms-conditions
{
	font-size: .85em;
    border: 2px solid #666;
    background:#ffffff;
}

.terms-conditions-item
{
	font-size: .85em;
    border: 1px solid #666;
    padding:10px;
}

.qu-text-input
{
	width:450px;}
.sq-input {
    -webkit-border-radius: 5px;
  	   -moz-border-radius: 5px;
    	    border-radius: 5px;
    padding: 4px;
    padding-top: 8px;
    padding-bottom: 8px;
    border: 1px solid #bbbbbb;
    margin-bottom:10px;
    width:350px;
}
.sq-input--focus {
  /* how your inputs should appear when they have focus */
  outline: 5px auto rgb(59, 153, 252);
}
.sq-input--error {
  /* how your inputs should appear when invalid */
  outline: 5px auto rgb(255, 97, 97);
}

.sq-input[name="sq-cvv-iframe"],[name="sq-expiration-date-iframe"],[name="sq-postal-code-iframe"]
{
	width:65px;
}

.sq-input[name="sq-postal-code-iframe"]
{
	width:100px;
}


.pay-box
{
    -webkit-border-radius: 5px;
  	   -moz-border-radius: 5px;
    	    border-radius: 5px;
     
     padding:10px;
     border: 2px solid #bbbbbb;
}

.payment-item
{
	font-size:1.25em;
    padding:5px;
    color:#666666;
}/* vertical navigation menu */
.mi {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: left;
vertical-align: middle;
font-size:20px;
padding-left:6px;
}

.mi_fav {
position: relative;
display: table-cell;
width: 54px;
height: 32px;
text-align: left;
vertical-align: middle;
font-size:20px;
padding-left:12px;
}


.main-menu:hover,nav.main-menu.expanded {
    width:300px;
    overflow:visible;
    overflow-y: auto;
    overflow-x: hidden;

}

/* this is the main vertical dashboard menu */
.main-menu {
	position:fixed;    
    padding-top:40px;
    background: rgba(50,50,50,0.98); 
    top: 0;
    height:100%;
    left:0;
    width: 5px;
	overflow:hidden;    
    -webkit-transition:width .05s linear;
    transition:width .05s linear;
    -webkit-transform:translateZ(0) scale(1,1);
    z-index:16;    
}

.main-menu>ul {
margin:7px 0;
}

.main-menu li {
position:relative;
display:block;
width:300px;
}

.main-menu li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#eeeeee;
 font-family: arial;
font-size: 14px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
transition:all .1s linear;
  
}

.main-menu .nav-icon {
position:relative;
display:table-cell;
width:60px;
height:36px;
text-align:center;
vertical-align:middle;
font-size:18px;
}

.main-menu .nav-text {
    position:relative;
    display:table-cell;
    vertical-align:middle;
    width:220px;
	font-family: 'Titillium Web', sans-serif;
    font-weight:normal;
}


.main-menu .nav-title-link {
    position:relative;
    display:table-cell;
    vertical-align:middle;
    width:220px;
	font-family: 'Titillium Web', sans-serif;
    font-size:1.5em;
    color:#1681b0;
}

.main-menu .nav-title {
    position:relative;
    display:table-cell;
    vertical-align:middle;
    width:220px;
	font-family: 'Titillium Web', sans-serif;
    font-size:1em;
    color:#74b4d0;
    height:45px;
    padding-left:6px;
    visibility: hidden;

}

.main-menu .nav-title.main {
	position: fixed;
    top: 0;
    left: 65px;
    
}

.main-menu .nav-title.sub {
    left:-50px;
    height:60px;
    width:260px;
    font-size:1.25em;
}

.main-menu:hover .nav-title {
    visibility: visible;
}

a:hover,a:focus {
text-decoration:none;
}

nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}

nav ul,nav li {
outline:0;
margin:0;
padding:0;
}

.main-menu li:hover>a,nav.main-menu li.active>a, .main-menu li:hover .nav-title-link
{
    color:#ffffff;
    background-color:#1681b0;
}
.dashsys-header{
	position: fixed;
    left:0;
    width: 100%;
	background: #333333;
    color: #000000;
    align: center;
    font-size: .98em;
    height: 40px;
    z-index: 16;
}

.vert-menu-logo{
	background: url(//opsantium.com/common/style/logo_sm_w.png) no-repeat 0 8px;
    background-size: 200px;
    color: #000000;
    align: center;
    font-size: .98em;
    height: 80px;
    z-index: 17;
    margin-left:-10px;
}

.warning-header{
	position: fixed;
    left:0;
    top:40px;
    width: 100%;
	background: #ff0000;
    color: #ffffff;
    align: center;
    font-size: .98em;
    height: 65px;
    z-index: 10;
}

#home-link { 
    position: absolute; 
    top: 4px; 
    left: 58px; 
    width: 212px; 
    height: 40px; 
    background-color: transparent;
    z-index:20;
}

#home-link-vert { 
    position: absolute; 
    top: 7px; 
    left: 6px; 
    width: 180px; 
    height: 80px; 
    background-color: transparent;
    z-index:20;
}

#sticky-header{ 
    position: -webkit-sticky;
    position: sticky;

    top:52px;
	background: #f9f9f9;
	border-bottom: 1px solid #dedede;
        
    align: center;
    padding-top: 35px;
   	padding-bottom: 10px;
    
    z-index: 8;
    
}	


.dashsys-footer{
	background: #333333;
	 height: 200px;   
    color: #bbbbbb;
	text-align: center; 
    font-size: .98em;
    padding-left:50px;padding-right:50px;    margin-left: 0;
}

.header-push {
    height: 40px;
}

.ad-banner-push {
	height: 100px;
}

.footer-push {
 height: 30px;  
}

.dashsys-highlight{
	color: #005CC1;	
}

.dashsys-highlight-green{
	color: #63AA0F;	
}

.dashsys-important{
	color: #CC0000;	
}


.dashsys-heading {
    font-size: 1.5em;
	color: #202D19;
}

.dashsys-map-heading
{
    font-size: 1.25em;
	color: #202D19;
    font-weight:bold;
}
.dashsys-sub-heading {
    font-size: 1.25em;
	color: #005cc1;
}

.dashsys-subtext {
    font-size: .85em;
	color: #202D19;
}

a.dashsysLink {
	color: #dddddd;
	text-decoration: none;
	font-weight: bold;
    font-size: .98em;
}

a.dashsysLink:visited {
	color: #dddddd;
	text-decoration: none;
	font-weight: bold;
}

a.dashsysLink:hover {
	color: #8DC16A;
	text-decoration: none;
	font-weight: bold;
}

a.dashsysFooterLink {
	color: #FDFDF0;
	text-decoration: none;
    font-size: .98em;
}

a.dashsysFooterLink:visited {
	text-decoration: none;
	font-weight: bold;
}

a.dashsysFooterLink:hover {
	color: #1BB0E4;
	text-decoration: none;
	font-weight: bold;
}

a.listing_link {
	background: #ffffff;
    color:#000000;
	text-decoration: none;
    font-size: .98em;
    font-weight:normal;
    
}

a.listing_link:visited {
	text-decoration: none;
}

a.listing_link:hover div{
    box-shadow:0 1px 4px rgba(119, 171, 65, 1), 0 0 5px rgba(119, 171, 65, 1);
    background: #f3f3f3;
}

.map_container
{
     text-align:center;
}


.dashsys-ad-banner{
	position:fixed;
    width:100%;
    color: #ffffff;
    font-size: .98em;
    width:100%;
    top:35px;
	background-color:rgba(141, 206, 65, 1);    
    z-index: 16; /* 1px higher than the overlay layer */
    padding-top:15px;
    padding-bottom:15px;
    text-align:center;
}

.dashsys-ad
{
	display:inline-block;
    width:300px;
    height:75px;
    text-align:center;
    color: #2C3D20;
    font-size: .98em;
    padding: 15px;
    background:rgba(269,269,269,0.75);
    vertical-align:top;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.1) inset;
    -webkit-border-radius: 10px;
  	   -moz-border-radius: 10px;
    	    border-radius: 10px;
}

.dashsys-search-content{
    padding:10px;
}

.map-results
{
	display:inline-block;
    width: 45%;    text-align:left;
    vertical-align:top;
}

.egg-cell{
	display: table-cell;
	height:200px;
    width:300px;
    color: #000000;
    font-size: .98em;
	box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.2), 0 8px 18px 0 rgba(0, 0, 0, 0.19);
    padding: 15px;
    padding-bottom: 20px;
    border: 1px solid #bbbbbb;
}

.adm-cell{
	display: table-cell;
	height:250px;
    width:250px;
    color: #000000;
    font-size: .98em;
	box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.2), 0 8px 18px 0 rgba(0, 0, 0, 0.19);
    padding: 15px;
    border: 1px solid #bbbbbb;
}

 
		.adm-carousel{
			display: table-cell;
			width:75px;
			height:75px; 
			color: #000000;
			font-size: <?php echo .98em; ?>;
			box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.2), 0 8px 18px 0 rgba(0, 0, 0, 0.19);
			padding: 5px;
			border: 1px solid #bbbbbb;
		}
	    
.contact-cell{
	display: inline-block;
	height:auto;
   
    width:auto;    font-size: .98em;
    padding: 15px;
    padding-bottom: 20px;
    vertical-align:top;
}

.contact-table{

    background-color:#ffffff;
    padding:15px;
    -webkit-border-radius: 5px;
  	   -moz-border-radius: 5px;
    	    border-radius: 5px;
}

.shadow-cell{
	display: block;
    color: #000000;
    font-size: .98em;
	box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.2), 0 8px 18px 0 rgba(0, 0, 0, 0.19);
    height:auto;
    width:auto;
}


.join-cell{
	display: table-cell;
	height:400px;
    
    width:500px;    color: #0D8AC1;
    font-size: .98em;
    padding: 25px;
    padding-bottom: 20px;
    border: 4px solid #0D8AC1;
    border-radius:90px;
}

.join-cell-mobile{
	display: block;
	height:300px;
    width:300px;    
    color: #000000;
    font-size: .98em;
    background: -webkit-linear-gradient(bottom,rgba(255,255,255,0),rgba(0,0,0,0.1)); /*Safari 5.1-6*/
    background: -o-linear-gradient(top,rgba(255,255,255,0),rgba(0,0,0,0.1)); /*Opera 11.1-12*/
    background: -moz-linear-gradient(top,rgba(255,255,255,0),rgba(0,0,0,0.1)); /*Fx 3.6-15*/
    background: linear-gradient(to top, rgba(255,255,255,0), rgba(246,247,242,1)); /*Standard*/
    padding: 15px;
    padding-bottom: 20px;
    border: 1px solid #bbbbbb;
}

.modify-package-cell{
	display: block;
    color: #000000;
    width:300px;    
    font-size: .98em;
    background: -webkit-linear-gradient(bottom,rgba(255,255,255,0),rgba(0,0,0,0.1)); /*Safari 5.1-6*/
    background: -o-linear-gradient(top,rgba(255,255,255,0),rgba(0,0,0,0.1)); /*Opera 11.1-12*/
    background: -moz-linear-gradient(top,rgba(255,255,255,0),rgba(0,0,0,0.1)); /*Fx 3.6-15*/
    background: linear-gradient(to top, rgba(255,255,255,0), rgba(246,247,242,1)); /*Standard*/
    padding: 15px;
    padding-bottom: 20px;
    border: 1px solid #bbbbbb;
}

.products-box{
	display:inline-block;
    width:450px;    
    text-align:left;
    color: #2C3D20;
    font-size: .98em;
    padding: 15px;
    padding-bottom: 10px;
    background:#ffffff;
    vertical-align:top;
    border: 1px solid #bbbbbb;
 	box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.2), 0 8px 18px 0 rgba(0, 0, 0, 0.19);
   
    min-height:90px; margin:10px;}

.products-box select{
    width:90%;
}

.products-box input{
    width:90%;
    text-align:center;
}

.chit-box
{
	display: inline-block;
    height:contain;
    color: #000000;
    font-size: .98em;
    vertical-align:top;
    width:100%;
    max-width:450px;
    text-align:center;
}

.products-box-noborder{
	display: inline-block;
    height:contain;
    color: #000000;
    font-size: .98em;
    vertical-align:top;
    min-height:250px;
    text-align:center;
    width:100%;
}

.box-tables
{
	width:100%;
    text-align:center;
}


.product-highlight{
	color: #005CC1;	
    padding-left:20px;
    padding-bottom:10px;
}

.product-points{
    padding-left:20px;
    margin-left:20px;
    padding-bottom:10px;
    list-style-type: circle;
    text-align:left;
    font-size:1.25em;

}


.product-header{
	text-align:left;
	font-family: 'Oswald', sans-serif;
    font-size:2em;
    font-weight:bold;
    color: #005cc1;
    padding-bottom:4px;
    padding-left:20px;
}

.column{
	align:center;
	display:inline-block;
    width:450px;    
    text-align:left;
    padding: 15px;
    padding-bottom: 10px;
    vertical-align:top;
   
    min-height:90px; margin:10px;}

.footer-column{
	align:center;
	display:inline-block;
    width:200px;    
    text-align:left;
    padding: 15px;
    padding-bottom: 10px;
    vertical-align:top;
   
    min-height:90px; margin:10px;}

.spacer-cell{
	display:table-cell;
    padding:15px;
}

.spacer-cell-mobile{
	display:block;
    padding:15px;
}

.registration-div
{
	position: absolute;
    left: 50%;
    margin-left: -250px;
    display: block;     
    color: #000000;
    font-size: .98em;
    z-index: 11;

}
.registration-div-mobile
{
	position: relative;
    top: 25px;
    width:100%;
    display: block;     
    color: #000000;
    font-size: .98em;
    z-index: 11;

}

.registration-style
{
	width:600pxpx;
   	background: #ffffff url(//opsantium.com/common/style/logo_sm.png) no-repeat 50% 25px ;
    background-size: 200px;
    -webkit-border-radius: 10px;
  	   -moz-border-radius: 10px;
    	    border-radius: 10px;
}


.error-highlight input
{
	background-color:#FCDCDC;
}
.error-highlight select
{
	background-color:#FCDCDC;
}

.accent-highlight input
{
	background-color:#EEF4D8;
}

.accent-highlight select
{
	background-color:#EEF4D8;
}



.package-header{
	text-align:center;
	font-family: 'Oswald', sans-serif;
    font-size:2em;
    font-weight:bold;
    color: #333333;
    padding-bottom:15px;
}

.package-header2{
	text-align:center;
	font-family: 'PT Sans Narrow', sans-serif;
    font-size:2em;
    font-weight:bold;
    color: #333333;
    padding-bottom:15px;
}

.package-subtext
{
	text-align:center;
	font-family: 'PT Sans Narrow', sans-serif;
    font-size:.85em;
    font-weight:normal;
    color: #666666;
}

.package-details{
	text-align:left;
	font-family: 'PT Sans Narrow', sans-serif;
    font-size:1.25em;
    font-weight:normal;
    padding-bottom:10px;

}

.package-script{
	text-align:center;
	font-family: 'Oswald', sans-serif;
    font-size:2em;
    color: #ffffff;
}

.package-heading{
	text-align:center;
	font-family: 'Oswald', sans-serif;
    font-size: 1.5em;
    color: #000000;
}

.package-div
{
	position: relative;
    height:100%;
}

.package-div span {
   position: absolute;
   bottom: 35px;
   right: 0;
   width: 100%;
}

.inset-table {
    background: #efefef;
    box-shadow: inset 0px 2px 2px 1px rgba(0, 0, 0, .3);	
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
        border-radius: 10px;
   	padding:10px;
    
}

.myaccount-logo
{
   	background: #ffffff url(//opsantium.com/common/style/my_account.png) no-repeat 0 0;
    background-size: 600px;
    height: 75px;
}

.myaccount-header
{
	padding:10px;
    background:#0D8AC1; 
    color:#ffffff;
    font-size: 1.25em; 
}

.myaccount-header2
{
	padding:10px;
	background: #77ab41;
	color:#ffffff;
    font-size: 1.25em; 
}

.myaccount-showcase{
	width:350px;	background:#ffffff;
    margin-bottom:5px;
    box-shadow:0 5px 10px rgba(0, 0, 0, 0.3), 0 0 5px rgba(0, 0, 0, 0.1);
}

.myaccount-links-title
{
    padding: 5px;
    padding-top: 10px;
    font-size: 1.25em;
    box-shadow:0 2px 3px rgba(0, 0, 0, 0.5), 0 0 5px rgba(0, 0, 0, 0.1);
    vertical-align: top;
}

.myaccount-title-box-A
{
    background: #1BB0E4;
    color:#ffffff; 
} 

.myaccount-title-box-B
{
    background: #12477B;
    color:#ffffff; 
} 

.myaccount-title-font
{
    font-family: 'Satisfy', cursive;
    font-size: 1.5em;
    padding-top:5px;
    padding-bottom:5px;
    text-align: center;
}

.myaccount-links
{
    padding: 5px;
    padding-top: none;
    font-size: 1em;
    font-weight: bold;
    vertical-align: top;
}

.myaccount-links-content
{
    vertical-align: middle;
    font-size: 1.25em;
    font-weight:normal;
	color: #005CC1;
	background:#ffffff;
    line-height: 20px;
    text-align:left;
    padding:5px;
    padding-left:20px;
    list-style: none;
}

.myaccount-links-listing
{
    vertical-align: middle;
    font-size: 1.25em;
	color: #000000;
	background:#ffffff;
    line-height: 20px;
    text-align:center;
    padding:5px;
}

.myaccount-links-content:hover
{
	background:#666666;
    color: #ffffff;
}

.admin-page-title
{
	position:fixed;
    top: 52px;
    right:0;
    padding:5px;
    background-color:#333333;
    z-index: 17;
}

.builder-page-title
{
	position:fixed;
    top: 2px;
    left:60px;
    padding:4px;
    background-color:#333333;
    z-index: 17;
}

.dashsys-admin-link
{
	position:fixed;
    top:40px;
    right:0px;
    padding:5px;
    padding-left:10px;
    padding-right:10px;
    background-color:#333333;
    z-index: 17;
}

.main-box{
	display:inline-block;
    width:350px;
    text-align:left;
    color: #2C3D20;
    font-size: .98em;
    padding: 15px;
    padding-bottom: 10px;
    vertical-align:top;
    
}

.search-listing
{
	padding: 8px;
    padding-left:10px;
    text-align:left;
    margin-top:7px;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 5px rgba(0, 0, 0, 0.1);
    background:none;
}


.myaccount-box{
	display: inline-block;
    height:contain;
    color: #000000;
    font-size: .98em;
    padding:5px;
    vertical-align:top;
    max-width:770px;
    text-align:left;}

.package-list-item
{
	padding:10px; 
    border-bottom:1px solid #999;
    background:#ffffff;
}

/*PREVIOUSLY fadeBasket - search old islocal or bluenarwhal files for functionality*/
 @-moz-keyframes fadeView
 { 
 	0% {   
		opacity: 1; 
        visibility: visible; 
        font-size:1em;
        top: 25px;
        right: 41px;
        width:300px;
        height:30px;
        background: #ffffff;
        color:#1BB0E4;
        border:2px solid #1BB0E4;
        font-weight:bold;
       	box-shadow: 0 3px 7px 2px rgba(0,0,0,.3);
        text-align: center;
        padding-top:10px;
        z-index: 20;
       }  
 	40% {   
		opacity: 1; 
        visibility: visible; 
        font-size:1em;
        top: 25px;
        right: 41px;
        width:300px;
        height:30px;
        background: #ffffff;
        color:#1BB0E4;
        border:2px solid #1BB0E4;
        font-weight:bold;
       	box-shadow: 0 3px 7px 2px rgba(0,0,0,.3);
        text-align: center;
        padding-top:10px;
        z-index: 20;
       }  
	100% { 
    	opacity: 0; 
        visibility: hidden;     
        font-size:0;
        top: 25px;
        right: 41px;
        width:0;
        height:0;
        background:none;
        box-shadow: none;
    	}
} 

 @-webkit-keyframes fadeView 
 { 
 	0% {   
		opacity: 1; 
        visibility: visible; 
        font-size:1em;
        top: 25px;
        right: 41px;
        width:300px;
        height:30px;
        background: #ffffff;
        color:#1BB0E4;
        border:2px solid #1BB0E4;
        font-weight:bold;
       	box-shadow: 0 3px 7px 2px rgba(0,0,0,.3);
        text-align: center;
        padding-top:10px;
        z-index: 20;
       }  
 	40% {   
		opacity: 1; 
        visibility: visible; 
        font-size:1em;
        top: 25px;
        right: 41px;
        width:300px;
        height:30px;
        background: #ffffff;
        color:#1BB0E4;
        border:2px solid #1BB0E4;
        font-weight:bold;
       	box-shadow: 0 3px 7px 2px rgba(0,0,0,.3);
        text-align: center;
        padding-top:10px;
        z-index: 20;
       }  
	100% { 
    	opacity: 0; 
        visibility: hidden;     
        font-size:0;
        top: 25px;
        right: 41px;
        width:0;
        height:0;
        background:none;
        box-shadow: none;
    	}
} 

 @-ms-keyframes fadeView
 { 
 	0% {   
		opacity: 1; 
        visibility: visible; 
        font-size:1em;
        top: 25px;
        right: 41px;
        width:300px;
        height:30px;
        background: #ffffff;
        color:#1BB0E4;
        border:2px solid #1BB0E4;
        font-weight:bold;
       	box-shadow: 0 3px 7px 2px rgba(0,0,0,.3);
        text-align: center;
        padding-top:10px;
        z-index: 20;
       }  
 	40% {   
		opacity: 1; 
        visibility: visible; 
        font-size:1em;
        top: 25px;
        right: 41px;
        width:300px;
        height:30px;
        background: #ffffff;
        color:#1BB0E4;
        border:2px solid #1BB0E4;
        font-weight:bold;
       	box-shadow: 0 3px 7px 2px rgba(0,0,0,.3);
        text-align: center;
        padding-top:10px;
        z-index: 20;
       }  
	100% { 
    	opacity: 0; 
        visibility: hidden;     
        font-size:0;
        top: 25px;
        right: 41px;
        width:0;
        height:0;
        background:none;
        box-shadow: none;
    	}
} 

 @-keyframes fadeView
 { 
 	0% {   
		opacity: 1; 
        visibility: visible; 
        font-size:1em;
        top: 25px;
        right: 41px;
        width:300px;
        height:30px;
        background: #ffffff;
        color:#1BB0E4;
        border:2px solid #1BB0E4;
        font-weight:bold;
       	box-shadow: 0 3px 7px 2px rgba(0,0,0,.3);
        text-align: center;
        padding-top:10px;
        z-index: 20;
       }  
 	40% {   
		opacity: 1; 
        visibility: visible; 
        font-size:1em;
        top: 25px;
        right: 41px;
        width:300px;
        height:30px;
        background: #ffffff;
        color:#1BB0E4;
        border:2px solid #1BB0E4;
        font-weight:bold;
       	box-shadow: 0 3px 7px 2px rgba(0,0,0,.3);
        text-align: center;
        padding-top:10px;
        z-index: 20;
       }  
	100% { 
    	opacity: 0; 
        visibility: hidden;     
        font-size:0;
        top: 25px;
        right: 41px;
        width:0;
        height:0;
        background:none;
        box-shadow: none;
    	}
} 
/* Toggle functionality */
#islbtoggle {
	display:none;
}

/* hides the white bounding box behind the hamburger menu when the burger is over dark color #333333*/
#islbtoggle:checked ~ .islbtoggle-container .islbbutton-bkgd-box {
}

/* HAMBURGER MENU WHEN CLICKED MAKES AN X */
/* this is the top hamburger bar being rotated to 45 deg when the menu is clicked */
#islbtoggle:checked ~ .islbtoggle-container .islbbutton-toggle:before {
  transform: scale(.8) rotate(45deg);
  top: 10px;
  background-color: #ffffff;

}

/* this is the bottom hamburger bar being rotated to -45 deg when the menu is clicked */
#islbtoggle:checked ~ .islbtoggle-container .islbbutton-toggle:after {
  transform:  scale(.8) rotate(-45deg);
  top: 10px;
  background-color: #ffffff;
}

/*  this is the center hamburger bar being hidden */
#islbtoggle:checked ~ .islbtoggle-container .islbbutton-toggle-center {
  transform: scale(0);
}


/*  When the hamburger menu button is clicked, its a checkbox so it's "CHECKED" */
/*  On mobile, we need to set the main-menu width to full width and on desktop views */
/*  it will be set to see just the menu icons */

#islbtoggle:checked ~ .main-menu
{
	width:50px;    
}

/*  When the hamburger menu is clicked ON MOBILE ONLY  */
/*  display the menu section titles ex "My Office", "business_name", "client_name" */

#islbtoggle:checked ~ .main-menu .nav-title
{
	}

/*  This is a fancy piece of CSS that will overlay the remaining "non-menu" space with a div that has an ONCLICK */
/*  function that hides the nav menu when clicked off ON MOBILE ONLY */

#islbtoggle:checked ~ .toggle-click
{
}

/*  When the user hovers their mouse of the nav menu icons ON DESKTOP (since the width is already 300px on mobile) */
/*  set the main-menu width to full width */

#islbtoggle:checked ~ .main-menu:hover
{
	width:300px;
}

/* Toggle button */
.islbbutton-toggle {
  position: fixed;
  display: inline-block;
  top:10px;
  left:10px;
  width: 30px;
  height: 25px;
  background-color: transparent;
  cursor: pointer;
  z-index:18;
}

.islbbutton-bkgd-box {
  position: fixed;
  display: inline-block;
  top:0px;
  left:5px;
  width: 45px;
  height: 50px;
  background-color: #333333;
  cursor: pointer;
  z-index:17;
}



/* this is the hamburger menu center line (but its really at the top) */
 
.islbbutton-toggle-center {
  position: absolute;
  display: inline-block;
  width: 30px;
  height: 3px;
  background-color: #ffffff;
  cursor: pointer;
  transition: 0.6s;
  
}


/* this bit of css makes a shadow box around the hamburger menu button */
.islbbutton-toggle:hover {
}

/* this is the hamburger menu top (which is really in the middle) and bottom lines */
.islbbutton-toggle:before, .islbbutton-toggle:after {
  position: absolute;
  content: '';
  right: 0;
  width: 100%;
  height: 3px;
  background-color: #ffffff; /* color */
  transition: 0.6s;
}

/* positioning the top line at the center of the hamburger menu */
.islbbutton-toggle:before {
  top: 10px;	
}

/* positioning the bottom line of the hamburger menu */
.islbbutton-toggle:after {
  top: 20px;
}



@media all {
	.page-break	{ display: none; }
	.printOnly	{ display:none;}
    .printable-header{display:none;}
    .printable-header-push {display:none;height:0;margin:0;padding:0;}
	.doNotPrint { display:block; }
   .auto-scroll
    {
        width: 100%;
        height: calc(100vh - 380px);
        overflow: auto;
    }
    .auto-scroll[id="doc_list"]
    {
        margin-top:0px;
        width: 450px;
        height: calc(100vh - 460px);

    }
}

@media print {
	body{background-color:#ffffff;color:#333333;}
     .dashsys-footer{display:none;height:0;margin:0;padding:0;}
    #sticky-header{background: none;}
	.page-break	{ display: block; page-break-before: always; }
	.printOnly { 
        display: block;
        width: 100%;
        background: #ffffff;
    }
    .printable-header{
    	display:block;
        width:100%;
        min-width:100%;
    }
    
    .printable-header-push {
    	display:block;
    	height: 60px;
	}

	.doNotPrint { display:none;height:0;margin:0;padding:0;}
    .main_container {height:90%;min-height:90%;width:100%;background:#ffffff;}
    .auto-scroll {
        width: auto;
        height: auto;
        overflow: none;
        margin-top:-60px;
	 }
     .main-menu{ display:none;height:0;margin:0;padding:0;}
     .main_logo_container{padding:0; margin:0;position: relative;}
     .header-push{ display:none;height:0;margin:0;padding:0;}
     .telDiv{ display:none;height:0;margin:0;padding:0;}
     .dashsys-header{ display:none;height:0;margin:0;padding:0;}
     .main_content_container{
     	margin-top:0;
        padding:0px;
        background:#ffffff;
     }
     .column{
        display:block;
     	width:75%;
     }
}
-->