.login-container-outer 
{
    padding-top:100px;
    padding-bottom:100px;
}

.login-container-inner
{
    width: 360px;
    background-color: #FFF;
    padding: 45px;
    margin: 0 auto;
    text-align:center;
    box-shadow: 5px 5px 5px grey;
}

.login-container-inner input
{
    box-sizing:border-box;
    width: 100%;
    padding: 15px;
    margin-bottom: 10px;
    border: 1px solid #BDBDBD;
    font-size:110%;
} 

.login-txt
{
    background-color: #F2F2F2;
}

.login-txt:hover, .login-txt:focus
{
    background-color: #FFF;
    border: 1px solid #54d2f8;
    outline:0;
}

.lbl-confirm
{
    display:block;
    text-align:center;
    margin-bottom: 10px;
}

@media screen and (max-width:600px)
{
    .login-container-inner {box-sizing:border-box; width:100%;} /*So the login form fills the screen on a small device*/
}          

@media screen and (max-width:768px)
{ 
    .login-container-inner input { border-radius:5px; }
}
                                      
/*********************************************************************** General Styles **************************************************************************************************/

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.greybody
{
    background-color: #e6e6e6;
}

.left_padder
{
  display: inline-block;
  width:10%;
}

.content-container
{
    padding-left: 10%;
    padding-right: 20px;
    
    padding-top: 110px;
    padding-bottom: 10px;
}

.content-container.full
{
    padding-left:20px;
}

@media screen and (max-width: 992px)
{
    .content-container { padding-top: 10px; }               /*For tablets: Navbar no longer fixed, therefore content container doesn't need such a high padding-top now. */
}

.content-container.content-centered
{
    padding-left: 10%;
    padding-right: 10%;
}

.outer-control-container
{
    border: 2px solid #4d4d4d;
    padding: 20px 20px 0 20px;
}
            
.lbl {color: #404040;}

.lbl-block {display: block;}

.lbl-error {color: #F00;}

.btn
{
	background-color: #009DCD;
	color: #FFF;
	font-weight: bold;
	border: 1px solid #BDBDBD;
    cursor:pointer;
    transition: background-color 0.2s ease-out;
}

.btn:hover, .btn:focus
{
    background-color: #00C3FF;
    outline:0;
}

.btn-disabled, .btn.btn-disabled:hover, .btn.btn-disabled:focus
{
    background-color: #96d0e2;
    cursor: default;
}

.pagination-icon
{
    height: 20px;
    width: 20px;
}

.pagination-container
{
    display:inline-block;
    vertical-align:middle;
}

#topBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 0;
  z-index: 99;
  font-size: 17px;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 15px;
  border-radius: 2px;
}

@media screen and (max-width: 992px)            /*Remove paddings so that content can fill the screen on a small device*/
{
    .left_padder {width:0;}
    
    .content-container {padding-left:16px; padding-right:16px}
    
    #ctl00_lblDateNow {display:none;}                   /*Hide the date label - just for tidyness*/
}

@media screen and (max-width: 768px)
{
    .btn { border-radius:5px; }
    #topBtn {left:-1000px;}         /*hide the top-button since there we're on tablet/phone now.*/
}

@media screen and (max-width:500px)
{ 
    #extendedHeader {display:none;}
}

/************************************************************************ Held Cheques Page *************************************************************************************************/

.lbl-held
{
    width: 250px;
    text-align: left;
    display:block;
}

.held-filter-section
{
    margin-bottom:15px;
    font-size:17px;
    width: 575px;
    margin: 0 auto;
}

.held-filter-section * 
{
    box-sizing: border-box;
}

.held-filter-section label
{
    color: #404040;                         /* For the label attached to the checkbox */
}

.held-filter 
{
    margin-bottom:15px;
    padding-right: 20px;
    display: inline-block;    
}

.ddl-held
{
    width: 265px;
    padding: 5px;
    font-size: 17px;
    cursor:pointer;
}

.txt-held
{
    width: 265px;
    padding: 5px;
    font-size: 17px;
}

.btn-held
{
    width: 265px;
    padding: 5px;
    font-size:17px;
    display: block;
    margin: 0 auto 20px auto;
}

@media screen and (max-width:650px)
{
    .held-filter-section
    {
        width: 100%;
    }
    
    .held-filter
    {
        display:block;
        padding:0;
    }
    
    .ddl-held, .btn-held, .txt-held
    {
        display:block;
        width: 100%;
    }
}

@media screen and (max-width: 768px)
{
   .ddl-held { border-radius:5px; }
}
    

/************************************************************************ Reprints Page *************************************************************************************************/

.reprint-control-container
{
    width:400px;
    margin: 0 auto;
}

.reprint-filter-section * {box-sizing: border-box;}

.reprint-filter-section
{ 
    width: 400px;
    overflow:hidden;            /*To give the div height when it only contains floating divs. */
}

.reprint-filter-left {float: left;}

.reprint-filter-right {float: right;}

.reprint-filter-short {width:180px;}

.reprint-filter-long {width:100%;}

.reprint-filter-section input, .ddl-reprint
{
    padding: 5px;
    border: 1px solid #BDBDBD;
    font-size:17px;
}

.txt-reprint
{
    margin:0 0 20px 0;
}

.txt-reprint:hover, .txt-reprint:focus
{
    border: 1px solid #009DCD;
    outline:0;
}

.ddl-reprint {margin-bottom: 10px; cursor:pointer;}

.btn-reprint {width: 100%;}

.reprint-pad-bottom {margin-bottom: 30px;}

.lbl-reprint
{
    font-size:17px;
    display:block;
}

#switch-label
{
    font-size:14px;
    cursor:pointer;
    color: #404040;
}

#switch-label:hover
{
    color: #737373;
}

@media screen and (max-width:600px)
{
    .reprint-control-container {width:100%;}
    
    .reprint-filter-section {width: 100%;}
     
    .reprint-filter-section *                       /*ensures that all labels and textboxes take up one whole row of the screen */
    {
        width: 100%;
        display:block;
    }
}

@media screen and (max-width: 768px)
{
    .reprint-filter-section input, .ddl-reprint { border-radius:5px; }
}


/************************************************************************ Reports Page *************************************************************************************************/

/* .report-control-container
{
    max-width: 850px;
    margin: 0 auto;
}*/

#ctl00_ContentPlaceHolder1_pnlReportFilter
{
    padding-bottom: 20px;
    margin: 0 auto;
}

#ctl00_ContentPlaceHolder1_pnlReportFilter input
{
    margin-left: 0;
}

#ctl00_ContentPlaceHolder1_rblReportFilter
{
    margin: 0 auto;
    width:400px;
    border: 1px solid #009DCD;
    padding: 5px;
}

.reports-filter-section
{
    margin: 0 auto 20px auto;
}

.reports-filter-section.short
{
    width:400px;
}

.reports-filter-section.long
{
    max-width:850px;
}

.reports-filter-section *
{
    font-size: 17px;
    box-sizing: border-box;
}

.reports-date-container-outer
{
    display: inline-block;
    margin-bottom: 20px;
}

.reports-date-container
{
    padding: 10px;
    border: 1px solid #BDBDBD;
    width: 400px;
    overflow:hidden;
    margin-right:20px;
}

.reports-date
{
    float:left;
    width:33%;
    margin:0
}

.lbl-reports {display:block;}

.txt-reports-long
{
    width: 400px;
    display: block;
}

.reports-filter-section input,.ddl-reports-date
{
    border: 1px solid #BDBDBD;
}

.ddl-reports-date {cursor:pointer;}

.reports-filter-section input {padding:5px;}

.reports-cheque-type-section
{
    max-width:850px;
    margin: 0 auto 20px auto;
}

.reports-cheque-type-container-outer
{
    display:inline-block;
    vertical-align: top;
}

.reports-cheque-type-container
{
    width: 400px;
    overflow-x: auto;
    padding: 5px;
    border: 1px solid #BDBDBD;
    box-sizing: border-box;
    margin-right: 20px;
}

.reports-cheque-type-container table
{
    width: 100%;
    border-collapse: collapse;
    cursor:default;
}

.reports-cheque-type-container tr:hover
{
    background-color: #54d2f8;                          /*Two rules for background-color incase older browsers do not recognise opacity/alpha in the second one. */
    background-color: #54d2f887;
}

.reports-cheque-type-container td
{
    white-space: nowrap;
}

.checkbox-cell
{
    width:5px;
}

.reports-cheque-type-container label
{
    display:none;
}

.btn-reports {width:400px;}

@media screen and (max-width: 992px)
{
    .reports-filter-section.long, .reports-cheque-type-section
    {
        width:400px;
    }
}

@media screen and (max-width: 768px)
{
    .reports-date-container, .reports-filter-section input, .ddl-reports-date { border-radius:5px; }
}

@media screen and (max-width: 600px)
{
    #ctl00_ContentPlaceHolder1_rblReportFilter
    {
        width: 100%;
    }
    
    .reports-filter-section, .reports-filter-section.short, .reports-filter-section.long
    {
         width:100%;
    }
    .reports-filter-section *, .reports-cheque-type-container-outer
    { 
        width: 100%;
        display:block;
    }
    
    .reports-cheque-type-section, .reports-cheque-type-container
    {
        width:100%;
    }
    
}

/************************************************************************ Manual Cheques Page *************************************************************************************************/

.manual-container *
{
    font-size: 17px;
    box-sizing: border-box;
}

.manual-container .font-small {font-size:14px; padding:7px;}        /*This is a bit sketchy...*/

.manual-input-row
{ 
    width: 900px;
    margin: 0 auto;
}

.manual-input-column {display:inline-block;}

.manual-input-column .manual-input-container {display:block;}

.manual-input-container
{
    margin-right: 15px;
    display: inline-block;
    width: 420px;
    margin-bottom:15px;
}

.manual-input-container.narrow
{
    width: 210px;
    margin-right:0;    
}

.tall {height:100px;}

.lbl-manual {display:block;}

.manual-ddl {cursor:pointer;}

.manual-input, .ddl-manual-date
{
    border: 1px solid #BDBDBD;
}

.manual-input {padding: 5px;}

.manual-input-short {width: 50%;}

.manual-input-long {width: 100%;}

.manual-input-container.manual-date-container
{
    border: 1px solid #BDBDBD;
    padding: 5px;
    overflow:hidden;
}

.manual-date
{
    float:left;
    width:33%;
    margin:0
}

.manual-input-container.remit-container {font-size:0;}

.remit {width:33.33%;}

@media screen and (max-width: 1150px)
{
    .manual-input-row {width: 100%;}
    
    .manual-input-container:not(.narrow), .manual-input-column
    {
        display:block;
        margin: 0 auto 15px auto;
    }
        
    .tall {height:auto;}                                        /*This removes the hardcoded height:100px which is only necessary for when viewing the form in a 2-column format*/
}

@media screen and (max-width: 768px)
{
    .manual-input-container {width:100%;}
    
    .manual-input-container.narrow
    {
        display:block;
        width:100%;
    }
    
    .manual-date 
    {
        display:block;
        float: none;
        width:100%;
    }
    
    .ddl-manual-date {width:100%;}
    
    .manual-input-container.manual-date-container, .manual-input, .ddl-manual-date { border-radius:5px; }
}

/********************************************************** Reconciliation ************************************************************/

.custom-link
{
    color: #009DCD;
    text-decoration-line:none;
}

.custom-link:hover
{
    color: #00C3FF;
}

.live-checkbox
{
    margin-top:10px;
    margin-bottom:10px;
}

.live-checkbox input
{
    margin-left:0;
}

.live-date-container
{
    margin-bottom:15px;
    background-color:#DDD;
    display:inline-block;
    padding: 5px;
}

.inner-date
{
    display:inline-block;
    margin-right:5px;
}

@media screen and (max-width: 600px)
{
    #ctl00_ContentPlaceHolder1_pnlDate
    {
        width:100%;
    }
    
    .inner-date
    {
        display:block;
        margin-right:0;
        margin-top:5px;
    }
    
    .live-date-container select, .live-date-container input
    {
        width:100%;
        padding:5px;
    }
}

/********************************************************** Analysis ************************************************************/
.metric-selection *
{
    box-sizing:border-box;
}


.metric-selection
{
    margin-bottom: 20px;
}

.metric-selection input, .metric-selection select
{
    padding: 5px;
    cursor: pointer;     
}

.ddl-metric
{
    width: 275px;
    font-size: 17px;
    margin-bottom:10px;
}

.lbl-analysis
{
    display: block;
    margin-right: 5px;
    font-size:17px;
}

.radio-container-horiz
{
    display: inline-block;
    vertical-align: middle;
}

@media screen and (max-width: 600px)
{
    .radio-container-horiz
    {
        display: block;
    }
    
    .radio-container-horiz td
    {
        display:block;
    }
}

/**** Comparison stuff ****/

.compare-container
{
    margin-bottom: 30px;
}

.compare-container *
{
    box-sizing: border-box;
}

.compare-filter-section
{
    overflow: hidden;
}

.compare-filter
{
    float: left;
    margin: 0 75px 20px 0;
}

.compare-filter select
{
    padding: 5px;
    border: 1px solid #BDBDBD;
    font-size: 17px;
    width: 100px;
    cursor: pointer;
}    

.lbl-compare
{
    display:block;
    font-size: 17px;
}

.hide
{
    display:none;
}

.btn-compare
{
    width: 100px;
    padding: 5px;
    font-size:17px;
}

@media screen and (max-width: 768px)
{
    .compare-filter select, .metric-selection input, .metric-selection select { border-radius: 5px; }
}

/***************************************************************** Cheque Book *******************************************************/

#topButtonsContainer
{
    margin-bottom: 30px;
}

.btn-bk
{
    width: 200px;
    padding: 5px;
    font-size: 17px;
    margin-right: 10px;
}

.modal-form-group
{
    margin-bottom: 20px;
}

.txb-sort-code
{
    box-sizing: border-box;
    width: 40px;
    margin-left: 10px;
    margin-right: 10px;
}

#bookModalContent .txb-modal, #bookModalContent .ddl-modal
{
    width: 350px;
}

#chqsPerPage td
{
    padding: 5px 40px 0 40px;
}

/*** QR image ***/
.align-qr-code
{
    vertical-align: middle;
}

.qr-message-group
{
    display:inline-block;
}

.qr-message-group > span
{
    display:block;
}