body {
    font-family: lato;
    background-color: #ededed;
    margin-bottom: 65px;
}
.website-banner{background-color:white;padding:20px; padding-left:0px;}
.user-welcome-box{margin-top:20px; margin-right:20px;float:right;width:250px;position:absolute;top:0;right:0;color:black; text-align:right;}
.payers
{

    height:100%;
    display:block;
    margin:auto;
    padding:0px;
    
}
.empty-template {
    background-color: #58595b;
    color: white !important;
}
.search-body
{
    margin-left:20px;
}
.empty-template td
{
  
    color:white !important;
}
.content-area
{
    min-width:430px;
		min-height:700px;
}

.form
{
    margin-left:20px;
}
.form .item
{
    clear:both;

}
.form .item .label
{
    width:250px !important;
}
.pager {
    background-color: #ededed;
    text-align: right;
}

    .pager td {
        background-color: #ededed;
        border: none !important;
        margin: 0px !important;
        padding: 1px !important;
    }

    .pager a {
        background-color: #ededed;
        border: solid 1px #a1c2e1;
        width: 15px;
        display: block;
        padding: 5px;
        border-radius: 15px;
        color: #d699ff;
        -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5);
        -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    }

    .pager span {
        background-color: #ededed;
        border: solid 1px #a1c2e1;
        width: 15px;
        display: block;
        padding: 5px;
        border-radius: 15px;
        color: #d699ff;
        -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5);
        -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    }

.pager a:hover
{
    text-decoration:none !important;
}

.search
{
    padding:20px;
}
.LockOff
{
    display:none;
}

h2 {
    color: #336699;
}
h3
{
   margin-bottom: 10px; 
   color: #333; 
   font-weight: bold; 
   font-size: 13pt; 
   margin: 10px 0px;
}

.topmenu {
    background-color: #336699;
    display: block;
    text-align: right;
    width: 100%;
    position: relative;
    padding: 0px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 0px;
    padding-right: 0px;
}

.topmenu .item
{
    display:inline;
     -webkit-appearance:none;
    box-shadow:none;
    border:0;
    color:white;
    padding:2px;
    text-align:right;
}

.topmenu .item a
{
   color:white;
   text-decoration:none;    
}

.topmenu .item a:hover
{
   color:white;
   text-decoration:underline;    
}

.topmenu input[type=submit]
{
    -webkit-appearance:none;
    box-shadow:none;
    border:0;
    background-color:transparent;
    color:white;
    margin:0px;
    
    
  
}

.FCCbutton
{
    -webkit-appearance:none;
    box-shadow:none;
    border:0;
    background-color:transparent;
    color:white;
    text-decoration:none;
    margin-right:25px;
    border-left:1px solid white !important;
    font-size:small;
}

.FCCbutton:hover
{
    -webkit-appearance:none;
    box-shadow:none;
    border:0;
    background-color:transparent;
    color:white;
    text-decoration:underline;
    border-left:1px solid white !important;
    font-size:small;
}

.plainlink 
{
   color:white;
   text-decoration:none;   
   font-size: 0.8em;
   padding-left: 5px;
   border-left:1px solid white !important;
   padding-top:1px;
   padding-bottom:1px;
}

.plainlink a 
{
   color:white;
   text-decoration:none;   
   font-size: 0.8em;
}

.plainlink a:hover
{
   color:white;
   text-decoration:underline;   
   font-size: 0.8em;
}

.list
{
    padding:5px;
    padding-right:12px;
}

.left-search-body
{
    float:left;
   width:400px;
    display:block;
   height:150px;
}
.right-search-body
{
    display:block;
   
}

.searchbutton {
    background-color: #336699;
    color: white;
    padding: 5px;
    -webkit-appearance: none;
    box-shadow: none;
    border: 0;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
    text-decoration: none;
    font-size: small;
}

.view-body .item{
    clear:both;
    margin-left:20px !important;
}
.clientsupport
{
	color:#b6b6b6;
	position:absolute;
	left:30px;
	float:left;
	top:33px;
	text-transform:uppercase;
	font-weight:bold;
}
.highlightno {
    color: #336699;
}
.view-body .value
{
    padding-top:10px;
}

.item
{
    margin-top:3px;
}
.notifications
{
	position:fixed;
	bottom:0;
	width:260px;
}

.client-message-box {
    background-color: #336699;
    padding: 20px;
    border-bottom: solid 1px white;
    border-top: solid 1px white;
    font-size: 0.8em;
    line-height: 1.2em;
}
.client-message-box img
{
  float:left;
	width:25px;
	margin-right:10px;
	margin-left:10px;
	height:35px;
	margin-top:3px;
}
.password-warning-box p
{
	margin-left:25px;
		padding-left:40px;
}
.password-warning-box {
    background-color: #336699;
    padding: 20px;
    border-bottom: solid 1px white;
    border-top: solid 1px white;
    font-size: 0.8em;
    line-height: 1.2em;
}
.password-warning-box img
{
		margin-top:3px;
  float:left;
	width:25px;
	margin-right:10px;
	margin-left:5px;
	height:35px;
}

.banner-right
{
    width:320px;
    display:block;
    text-align:center;
    margin:auto;
}

    .banner-right img {
        width: 135px;
        height: 40px;
    }

.website-footer {
    font-size: 0.8em;
    background-color: #58595b;
    bottom: 0;
    color: white;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.website-footer a
{
    color:white;
}
.menu-button {
    padding-left: 5px;
    font-size: 1.5em;
    float: left;
}

.impersonation-toolbar {
    position: absolute;
    top: 76px;
    left: -7px;
    background-color: #cc6600;
    padding: 10px;
    padding-left: 35px;
    font-size: 0.8em;
}
.impersonation-toolbar a
{
	color:white;
}
h2
{
    font-size:2em;
    padding:20px;
}
input[type="text"]{
    padding:5px;
}
.label{
    float:left;
    width:200px;
    margin-top:10px;
}
.textbox
{
    margin-top:10px;
}
.search-body
{
    margin-top:40px;
}

.search-body .item
{
    clear:both;
}
.grid th {
    background-color: #003366;
    color: white;
    text-align: center;
}
.header-row {
    background-color: #003366;
    color: white;
    text-align: center;
}
.header-row a
{
    color:white;
    text-decoration:none;
     text-align:center;
}
.header-row th
{
    text-align:center;
    padding:10px;
    margin-top:10px;
}

.header-row th a
{
    color:white;
}
td {
    vertical-align: top;
}

.grid
{
    background-color:white;
    margin-top:20px;
    width:100%;
    clear:both;
}
.grid td
{
    color:#868686;
    border-right:solid 1px grey;
    text-align:center;
      padding:10px;
}
/*.calendar
{
    background-color:white;
}*/
.grid a
{
    color:#868686;
    text-decoration:none;
}

.searchbutton:hover {
    background-color: #003366;
}
.grid a:hover
{
    text-decoration:underline;
}

.sidegap
{
    margin-left:20px;
    margin-right:20px;
}


.left-td
{
    text-align:left !important;
}
.buttons
{
    padding-right:20px;
    padding-top:10px;
    text-align: right;
}
.float-right
{
    margin-right:30px;
		display:block;
		float:right;
}
#Main_FreeQuestionLabels_lblPlan
{
	padding-left:20px;
}
#Main_FreeQuestionLabels_lstPaymentPlans
{
	margin-left:20px !important;
}
.user-welcome-box a
{
 color:#868686;
 text-decoration:none;
}

.user-welcome-box a:hover
{
 color:#868686;
 text-decoration:underline;
}
.impersonation-toolbar {
    position: absolute;
    top: 76px;
    left: -7px;
    background-color: #cc6600;
    padding: 10px;
    padding-left: 35px;
    font-size: 0.8em;
}
.impersonation-toolbar a
{
	color:white;
}
/* Modal */
.modal-cover { position: absolute; width: 100%; height: 100%; background: #000; z-index: 80000; left: 0px; top: 0; opacity: .6; filter: alpha(opacity=60); -moz-opacity: .6; display: none; }
.defaultModal { z-index: 100000; position: absolute; width: 100%; height: 100%; }
.defaultModal iframe { width: 663px; height: 500px; border: solid 5px #333; border-radius: 10px; vertical-align: middle; position: absolute; }

.selected .item {
    background-color: #336699;
}

select
{
    border-radius:30px !important;
        padding: 5px;
      
}

.payment-report-view { color: #000; margin: 10px auto; width: 760px; }
.payment-report-view .view-body .item { clear: both; }
.payment-report-view .view-body .summary-view-box-left { width: 330px; }
.payment-report-view .view-body .summary-view-box-right { width: 380px; }
.payment-report-view .view-body .item .label { width: 250px; float: left; }
.payment-report-view .view-body .float-left .item .label { color: #000; }
.payment-report-view .view-body .float-right .item .label { color: #000; }
.payment-report-view .view-body .item .label + .value { float: right; margin-left: 20px; font-weight: bold; }

/*ajax__calendar_body*/
.ajax__calendar_body { height: 130px; }
.ajax__calendar_container { background: #fff; border: 2px outset gray; z-index: 1000; }
.ajax__calendar_header { height: 25px; }
.ajax__calendar_today, .ajax__calendar_dayname { color: #08b; }
.ajax__calendar_container div div div:hover { background: #def; }
div.ajax__calendar_day { color: #555; text-align: center; }
td.ajax__calendar_active div { color: #b33; font-weight: bold; }
td.ajax__calendar_other div { color: #aaa; }

.payer-summary-report .view-body .view-search .item { clear: none; width: 505px; }
.payer-summary-report .view-body .view-search .item .label { color: #868686; }
.payer-summary-report .view-body .view-search .item input[type=text] { width: 200px; }
.payer-summary-report .view-body .view-search .item select { width: 200px; }

.payer-summary { display: block; min-height: 540px; margin: 20px auto; width: 620px; }
.payer-summary .item { margin: 0; }
.payer-summary .item .label + .value { margin-left: 0; }

.summary-line, .summary-total, .summary-header { clear: both; margin: 0 auto; width: 600px; color: #000; padding: 0 10px; }
.summary-total, .summary-header { margin-top: 30px; padding-top: 12px; }

.summary-line .label, .summary-total .label, .summary-header .label { float: left; margin-bottom: 20px; }
.summary-line .value, .summary-total .value, .summary-header .value { float: right; margin-bottom: 20px; padding-right: 10px; }

    .payer-summary .item .label, .summary-total .value .total-heading, .summary-total .value .total-heading-last {
        color: #003366;
    }

.summary-header { margin-top: 0; }
.summary-header .label { float: left; margin-bottom: 10px; }
.summary-header .value { float: right; margin-bottom: 10px; }

.summary-total .value .total-heading { margin-right: 95px; }
.summary-line .value .total-heading { margin-right: 100px; }
.summary-total .value .total-heading-first, .summary-line .value .total-heading-first { margin-right: 80px; }
.summary-total .value .total-heading-last, .summary-line .value .total-heading-last { margin-right: 0; }

.input .ticket {
    border: 1px solid grey;
    width: 99%;
    margin: 10px;
    font-family: inherit;
}

.registration-link { display: none; margin-left: 10px; margin-top: 2px; }

.custom-error {
    width: 100%;
    text-align: center;
}

.input .fileUpload {
    margin-top: 10px;
}

.AutoComplete .panel {
    background: #fff;
    border: 1px solid #5e89af;
    max-height: 150px;
    overflow-y: auto;
}

    .AutoComplete .panel div {
        cursor: pointer;
        padding: 0 3px;
        margin-top: 5px;
        min-height: 10px;
        display: block;
        width: auto;
    }

        .AutoComplete .panel div:hover {
            background: #444;
            color: #fff;
        }

.AutoComplete .highlighted {
    background: #ccdeed;
}

.AutoComplete .highlight {
    font-weight: bold;
}

.AutoComplete .textbox.loading {
    background: white url(/images/icons/loading.gif) right center no-repeat;
}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-width: 768px) and (max-width: 1024px)  {

    .searchbutton
    {
        width:200px;
        margin-left:0px;
    }

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
     outline:none !important;
        border:none !important;
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	th { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
        text-align:left !important;
        padding-left:50% !important;
	}

        td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
            text-align: left;
            font-weight: bold;
            color: #868686;
        }
    .pager
    {
        display:none;
    }
	
    .paymentplans
    {
        border: solid 1px gray !important;
      
    }

    .knowledgebase td {
        padding-left:0px !important;
    }
   .defaultModal iframe { width: 100%; height: 700px; border: solid 5px #333; border-radius: 10px; vertical-align: middle; position: absolute; }

    .content-area h2 {
        background-color: #868686;
        font-size: 1.3em;
        color: white;
        text-align: center;
    }

    .empty-template {
        background-color: #58595b;
        background-color: white;
    }

        .empty-template td {
            background-color: #58595b;
            color: white !important;
        }

	/*
	Label the data
	*/

    .cancelled td:nth-of-type(1):before { content: "Reference"; }
    .cancelled td:nth-of-type(2):before { content: "First name"; }
    .cancelled td:nth-of-type(3):before { content: "Surname"; }
    .cancelled td:nth-of-type(4):before { content: "Creation Date"; }
    .cancelled td:nth-of-type(5):before { content: "No. of payments"; }
    .cancelled td:nth-of-type(6):before { content: "No. of paids"; }
    .cancelled td:nth-of-type(7):before { content: "£ paid"; }
    .cancelled td:nth-of-type(8):before { content: "No. of unpaid"; }
    .cancelled td:nth-of-type(9):before { content: "£ unpaid"; }
    .cancelled td:nth-of-type(10):before { content: "Cancellation date"; }
    .cancelled td:nth-of-type(11):before { content: "Message type"; }
    .cancelled td:nth-of-type(12):before { content: "Reason"; }

	.payerstable td:nth-of-type(1):before { content: "First name"; }
	.payerstable td:nth-of-type(2):before { content: "Surname"; }
    .payerstable td:nth-of-type(3):before { content: "Patient Reference"; }
	.payerstable td:nth-of-type(4):before { content: "Is Archived?"; }
	.payerstable td:nth-of-type(5):before { content: "Plan"; }
	.payerstable td:nth-of-type(6):before { content: "Plan Status"; }

    .paymentplans td:nth-of-type(1):before { content: "Reference"; }
    .paymentplans td:nth-of-type(2):before { content: "Product"; }
    .paymentplans td:nth-of-type(3):before { content: "Frequency"; }
    .paymentplans td:nth-of-type(4):before { content: "Reference"; }
    .paymentplans td:nth-of-type(5):before { content: "Payment Amount"; }
    .paymentplans td:nth-of-type(6):before { content: "# of collections"; }
    .paymentplans td:nth-of-type(7):before { content: "Start Date"; }
    .paymentplans td:nth-of-type(8):before { content: "End Date"; }
    .paymentplans td:nth-of-type(9):before { content: "Status"; }
    .paymentplans td:nth-of-type(10):before { content: "Action"; }
    .paymentplans td:nth-of-type(11):before { content: "Registration URL"; }

    .newpayers td:nth-of-type(1):before { content: "Reference"; }
    .newpayers td:nth-of-type(2):before { content: "First name"; }
    .newpayers td:nth-of-type(3):before { content: "Surname"; }
    .newpayers td:nth-of-type(4):before { content: "Creation Date"; }
    .newpayers td:nth-of-type(5):before { content: "AUDDIS Due Date"; }
    .newpayers td:nth-of-type(6):before { content: "Frequency"; }
    .newpayers td:nth-of-type(7):before { content: "Description"; }
    .newpayers td:nth-of-type(8):before { content: "Status"; }
    .newpayers td:nth-of-type(9):before { content: "Question1"; }

    .paymenthistory td:nth-of-type(1):before { content: "Payer Reference"; }
	.paymenthistory td:nth-of-type(2):before { content: "Due Date"; }
	.paymenthistory td:nth-of-type(3):before { content: "Type"; }
	.paymenthistory td:nth-of-type(4):before { content: "Amount"; }
	.paymenthistory td:nth-of-type(5):before { content: "Comment"; }
    .paymenthistory td:nth-of-type(6):before { content: "Your Ref"; }
    .paymenthistory td:nth-of-type(7):before { content: "Status"; }
    .paymenthistory td:nth-of-type(8):before { content: "Action"; }
    .paymenthistory td:nth-of-type(9):before { content: "Edit"; }
    .paymenthistory td:nth-of-type(10):before { content: "Withdraw"; }

    .payernotes td:nth-of-type(1):before { content: "Date"; }
    .payernotes td:nth-of-type(2):before { content: "Payer Payment Plan"; }
    .payernotes td:nth-of-type(3):before { content: "Note"; }
    .payernotes td:nth-of-type(4):before { content: "Operator Name"; }
    .payernotes td:nth-of-type(5):before { content: "Edit"; }
    .payernotes td:nth-of-type(6):before { content: "Delete"; }

    .payersreport td:nth-of-type(1):before { content: "Client"; }
    .payersreport td:nth-of-type(2):before { content: "Patient reference"; }
    .payersreport td:nth-of-type(3):before { content: "Title"; }
    .payersreport td:nth-of-type(4):before { content: "First name"; }
    .payersreport td:nth-of-type(5):before { content: "Surname"; }
    .payersreport td:nth-of-type(6):before { content: "Post code"; }
    .payersreport td:nth-of-type(7):before { content: "DOB"; }
    .payersreport td:nth-of-type(8):before { content: "Status"; }
    .payersreport td:nth-of-type(9):before { content: "Question1"; }

    .clientpaymenthistory td:nth-of-type(1):before { content: "Reference"; }
    .clientpaymenthistory td:nth-of-type(2):before { content: "First Name"; }
    .clientpaymenthistory td:nth-of-type(3):before { content: "Surname"; }
    .clientpaymenthistory td:nth-of-type(4):before { content: "Amount"; }
    .clientpaymenthistory td:nth-of-type(5):before { content: "Status"; }
    .clientpaymenthistory td:nth-of-type(6):before { content: "Cllct. date"; }
    .clientpaymenthistory td:nth-of-type(7):before { content: "Due date"; }
    .clientpaymenthistory td:nth-of-type(8):before { content: "Rep. cllct. date"; }
    .clientpaymenthistory td:nth-of-type(9):before { content: "Rep. due date"; }
    .clientpaymenthistory td:nth-of-type(10):before { content: "Type"; }
    .clientpaymenthistory td:nth-of-type(11):before { content: "Comments"; }
    .clientpaymenthistory td:nth-of-type(12):before { content: "Your ref."; }
    .clientpaymenthistory td:nth-of-type(13):before { content: "Question1"; }
    
    .regfee td:nth-of-type(1):before { content: "Reference"; }
    .regfee td:nth-of-type(2):before { content: "First name"; }
    .regfee td:nth-of-type(3):before { content: "Surname"; }
    .regfee td:nth-of-type(4):before { content: "Plan"; }
    .regfee td:nth-of-type(5):before { content: "Due Date"; }
    .regfee td:nth-of-type(6):before { content: "Amount"; }

    .questions td:nth-of-type(1):before { content: "Question"; }
    .questions td:nth-of-type(2):before { content: "Options"; }
    .questions td:nth-of-type(3):before { content: "Is Visible"; }
    .questions td:nth-of-type(4):before { content: "Sort Order"; }

    .comments td:nth-of-type(1):before { content: "Date"; }
    .comments td:nth-of-type(2):before { content: "By"; }
    .comments td:nth-of-type(3):before { content: "Comments"; }

    .clientproducts td:nth-of-type(1):before { content: "ProductName"; }
    .clientproducts td:nth-of-type(2):before { content: "PaymentPlans"; }

    .clienttickets td:nth-of-type(1):before { content: "Reference"; }
    .clienttickets td:nth-of-type(2):before { content: "Updated"; }
    .clienttickets td:nth-of-type(3):before { content: "By"; }
    .clienttickets td:nth-of-type(4):before { content: "Latest Comments"; }

    .ibacs td:nth-of-type(1):before { content: "Payer Reference"; }
    .ibacs td:nth-of-type(2):before { content: "Amount"; }
    .ibacs td:nth-of-type(3):before { content: "Status"; }
    .ibacs td:nth-of-type(4):before { content: "Collection Date"; }
    .ibacs td:nth-of-type(5):before { content: "Date Due"; }
    .ibacs td:nth-of-type(6):before { content: "Rep. cllct. date"; }
    .ibacs td:nth-of-type(7):before { content: "Rep. due date"; }
    .ibacs td:nth-of-type(8):before { content: "Type"; }
    .ibacs td:nth-of-type(9):before { content: "Alternate Key"; }
    .ibacs td:nth-of-type(10):before { content: "Comments"; }
}

@media 
only screen and (max-width: 530px)  {
    .user-welcome-box
    {
        display:none;
    }
		.clientsupport
    {
        display:none;
    }
		.float-right
{
   float:none;
	 text-align:center;
	 			 margin:0px;
			 padding:0px;
}
			 .website-footer
		 {
			 text-align:center;
			 margin:0px;
			 padding:10px;
		 }
            .left-search-body{
                position:absolute;
                float:none;
                width:100%;
            }
            .right-search-body{
                position:absolute;
                float:none;
                width:100%;
            }
    }