/* 
    Document   : global
    Created on : 24-Oct-2012, 11:37:59
    Author     : stuart.robinson
    Description:
        Holds all common css.  Mostly standard colours and layout stuff is probably here.
*/


/* Generic Styles */

/* xs < 600 */
@media all and (max-width: 599px) {
    body, html {
        font-size: 0.7rem !important;
    }
    body, #header {
        min-width: 400px;
    }
}
/* xs & sm < 992 */
@media all and (min-width: 600px) and (max-width: 991px) {
    body, html {
        font-size: 0.8rem !important;
    }
    body, #header {
        min-width: 600px;
    }
}

/* md > */
@media all and (min-width: 992px) {
    body, html {
        font-size: 0.9rem !important;
    }
    body, #header {
        min-width: 800px;
    }
}

html {
    font-family: Arial;
    padding: 0;
    margin: 0;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

body {
    padding: 0;
    margin: 0;
    height: 100%;
}

body.showHeaderMessage header {
    margin-top: 40px;
}

body a:link,
body a:visited,
body a:hover,
body a:active {
    text-decoration: none;
}

h1 {
    font-size: 2em;
    margin: 0.5em 0;
}

h2 {
    font-size: 1em;
    font-weight: bold;
    margin: 0.5em 0;
}

p {
    line-height: 1.3em;
    margin-bottom: 10px;
}

fieldset {
    padding: 5px;
    margin: 10px 0;
}

fieldset legend {
    margin-bottom: 0.5em;
    padding-top: 10px;
}

fieldset div {
    padding-bottom: 5px;
}

div.requiredField label:before {
    content: '*';
    color: #ff0000;
    padding-right: 10px;
}

label {
    display: inline-block;
    width: 36%;
    min-width: 75px;
    text-align: left;
    margin-right: 1%;
}

label.longLabel {
    width: 220px !important;
}

input, select {
    display: inline-block;
    width: 145px;
    border: 1px solid #8485a0;
    text-transform: none;
    padding: 2px;
}

select {
    width: 150px;
}

input[type="checkbox"] {
    width: auto;
}

input[type="button"], button, input[type="submit"] {
    height: 28px;
    min-width: 116px;
    border-radius: 0;
    outline: 0;
    color: #ffffff !important;
    background-color: #008ec9;
    font-family: 'Arial';
    clear: both;
    cursor: pointer;
    border: 1px solid #c8c8c8;
    font-weight: bold !important;
}

input[type="button"]:active, button:active, input[type="submit"]:active {
    border: 1px solid #c8c8c8;
}
button.close {
    width: auto;
    color: #000000 !important;
}

.fa-trash {
    color: #ff1133;
}
.fa-trash-restore {
    color: #4c7d4c;
}

.bg-grey {
    background-color: #d3d3d3;
}

.bg-red {
    background-color: #ff1133;
}

.bg-amber {
    background-color: #ffbf00;
}

.bg-green {
    background-color: #4c7d4c;
}

.med-font {
    color: #002654;
}

.med-font a {
    color: #002654;
}

.big-font {
    color: #002654;
}

.big-font a {
    color: #002654;
}

.text-white {
    color: #ffffff;
}

.text-white a {
    color: #ffffff;
}

.centre {
    text-align: center;
}

.paddingTop10 {
    padding-top: 10px;
}

.paddingBottom10 {
    padding-bottom: 10px;
}

span.address {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
    float: right;
    text-align: right;
    height: 14px;
    color: #ffffff;
    line-height: 7px;
}

div.checkbox {
    float: left;
}
div.checkbox, div.checkbox label, div.checkbox input[type="checkbox"] {
    width: auto;
}

div.checkbox input[type="checkbox"] {
    margin-right: 40px;
}

.clearB {
    clear:both;
}

.error {
    color: #d5002e !important;
    line-height: 20px;
    background: transparent;
}

.success {
    color: #33cc00 !important;
    line-height: 20px;
    background: transparent;
}

.loginError {
    width: 241px;
    padding-left: 10px;
}

.loginError p {
    width: 241px;
}

.amber {
    background-color: rgba(255, 174, 0, 0.3);
    color: #000000;
}

.amberText {
    color: #ffbf00;
    background-color: #ffffff;
}

.green {
    background-color: rgba(0, 255, 0, 0.30);
    color: #000000;
}

.greenText {
    color: #4c7d4c;    
    background-color: #ffffff;
}

.red {
    background-color: rgb(255, 0, 0, 0.30);
    color: #000000;
}

.redText {
    color: #ff1133;
    background-color: #ffffff;
}

.yellow {
    background-color: rgba(255, 251, 0, 0.30);
    color: #000000;
}

.yellowText {
    color: #fffb11;
    background-color: #ffffff;
}

.pinkText {
    color: #ed1b92;
   /* background-color: #ffffff; */
}

.blackText {
    color: #000000;
   /* background-color: #ffffff; */
}

.amber td {
    background-color: #ffbf00;
    color: #000000;
}

.green td {
    background-color: #4c7d4c;
    color: #ffffff;
}

.red td a {
    color: #ffffff;
}

.amber td a {
    color: #000000;
}

.green td a {
    color: #ffffff;
}

.red td {
    background-color: #ff1133;
    color: #ffffff;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.pointer-no-decoration {
    cursor: pointer;
    text-decoration: none;
}

table {
    table-layout: fixed;
    width: 100%;
    background-color: #ffffff;
}

table thead #colGroupsHeaders th {
    text-align: center !important;
}

table thead th, table tfoot td, table tbody td {
    padding: 10px;
    text-align: left;
}
table tbody td {
    word-wrap: break-word;
}

table thead tr {
    font-weight: bold;
    border-bottom: 1px solid #e8e8e8;
    box-shadow: 0 1px 0 #ffffff;
}

table tbody tr td, table thead tr th, table tfoot tr td {
    margin: 5px;
    color: #4d4f53;
}

table tr.oddRow td {
    background-color: #e3e3e3 !important;
}

/* Style inputs with type="text", select elements and textareas */
input[type=text], input[type=number], select, textarea {
    padding: 5px; /* Some padding */  
    border: 1px solid #e8e8e8; /* Gray border */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 3px; /* Add a top margin */
    margin-bottom: 4px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}


input.bg, select.bg option, select.bg, span.bg, textarea.bg {
    background-color: #ffffff;
}

input.changed, select.changed option, select.changed, span.changed, textarea.changed {
    background-color: #f1f0ff;
}

input.conflict, select.conflict option, select.conflict {
    background-color: #ff0000;
    color: #ffffff;
}

input[readonly="readonly"], select[readonly="readonly"], input[disabled="disabled"], select[disabled="disabled"] {
    background-color:#f1f1f1 !important;
}

.dropdown-menu {
    line-height: 17px;
    color: #404040;
    border: 1px solid #e8e8e8;
    border-radius: 0;
}

/* Header, Footer and Body Layout Styles */

div#headerMessage {
    background-color: #DF0101;
    width: 100%;
    font-weight: bold;
    position: fixed;
    height: 40px;
    z-index:100;
}
div#headerMessage p {
    margin: 0 auto;
    padding: 10px 10px;
    color: #ffffff;
}
#headerMessage.welcomeMessage {
    background-color: #008ec9 !important;
}
body.nightlyUpdate #headerMessage {
    background-color: #002654 !important;
}
#headerMessage p a,
#headerMessage p a:hover {
    color: #ffffff;
    text-decoration: underline;
}

div.main-wrapper {
    /*padding-top: 6vh;*/
    padding-top: 80px;
    height: 93.3vh;  
    z-index: 1;
    position: relative;
}

body.showHeaderMessage #header {
    margin-top: 40px;
    z-index: 90;
}

body.showHeaderMessage div.main-wrapper { 
    padding-top: 90px;
}

div#main {
    height: 93.8vh;
    background: linear-gradient(to bottom, #ffffff 0%, #e3e3e3 100%);
}
body.showHeaderMessage #main,
body.showHeaderMessage #pageContainer,
body.showHeaderMessage div.main-wrapper,
body.showHeaderMessage #leftmenu {
    height: 91.3vh;
}

div#pageContainer, div#showHeader, div#leftmenu div#footer {
    display: block;
    background-color: #e3e3e3;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

div#pageContainer {
    height: 95vh;
    background-color: #f3f7fc;
    overflow: auto;
    padding-left: 240px;
    padding-right: 0;
}

div#header, div#leftmenu div#footer {
    font-family: Arial;
    background-color: #00337f;
    color: #ffffff;
    height: 7%;
    color: #000000;
    background-color: #ffffff;
    border-bottom: 1px solid #4d4f53;
}

body.modal-open {
    padding-right: 0 !important;
}

body.modal-open #header {
    z-index: 3;
}

.shadow-lg {
	box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
}

div#header {
    height: 80px;
    position: fixed;
    width: 100%;
    z-index: 92;
    background-color: #03446f;
}

#topBar {
    background-color: #032d5a;
    display: grid;
    grid-template-columns: 240px auto 235px;
    height: 80px;
}

.spacer {
	height: 100%;
	background: rgba(255,255,255,.2);
	width: 1px;
	margin: 0 15px;
}

div#headerLeftContainer {
    /*background: linear-gradient(90deg, rgba(3,74,122,1) 0%, rgba(3,61,107,1) 100%);*/
    padding-top: 25px;
    padding-left: 15px;
}

#topBar.iconMenu {
    grid-template-columns: 100px auto 235px;
}

#selectedCustomerWrapper {
    /*background: linear-gradient(90deg, rgba(3,74,122,1) 0%, rgba(3,45,90,1) 100%);*/
    padding-top: 25px;
    font-weight: bold;
    text-align: center;
    font-size: 1.3em;
    color: #ffffff;
}

#headerRightMenuContainer{
    height: 80px;
    font-size: 1.2em;
    color: #8485a0;
    /*background-color: #032d5a;*/
}

#headerRightMenuContainer .dimCustSelectIcon:hover {    
    color: #C0C0C0 !important;
}

#headerRightNav {
    height: 80px;
    width: auto;
    display: flex;
    flex-direction: row;
    margin: 0 !important;
    float: right;
}
#headerRightNav > li  {
    width: 50px;
    float: left;
    display: block;
    height: 50px;
    padding-top: 25px;
    line-height: 1;
    text-align:center;
}

div#customerID h3 {
    font-weight: bold;
    margin-top: 0.8%;
}

div#customerID {
    padding-top: 15px;
}

div#footer {
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 5px 5px 0px 5px;
    width: 100%;
    background-color: #002654;
}
div#footer a {
    color: #ffffff;
}

#titleDiv {
    float: left;
}

#auddisReportWrapper, #chartDataDisplayModal, #profileUploadWrapper {
    font-size: 1.3em;
}
#auddisReportModal {
    z-index: 5;
}

div#hideHeader {
    position: absolute;
    top: 5px;
    right: 80px;
}
#closeLeftNav {
    display: inline-block;
    float: left;
    font-size: 1.5em;
}

div#logo {
    display: inline-block;
    text-align: left;
}

#moorepayLogo {
    margin-left: 20px;
}

#moorepayLogo.initialWidth {
    width: 145px;
    height: 30px;
}

div#clientID {
    padding: 10px;
}

div#customer {
    float: left;
    margin-top: 0.4%;
    padding: 10px;
}

#footer, #customer {
    display: none;
}

div#navigation {
    float: right;
}

#leftContainerMenu {
    width: 100%;
    margin-top: 20px;
}

#leftNavigation ul li {
    color: #000000;
    text-align: left;
    font-family: 'Avenir Medium';
    padding: 0;
    background: transparent;
    border-radius: 0;
    display:block;
    width: 100%;
    min-height: 38px;
    line-height: 50px;
    cursor: pointer;
}

#leftmenu.iconMenu {
    width: 100px;
}

#pageContainer.iconMenu {
    padding-left: 100px;
}

#leftmenu.hideMenu {
    width: 0px !important;
}

#pageContainer.hideMenu {
    padding-left: 0px !important;
}

.smallMenuText {
    font-size: .8rem;
	text-align: center;
    align-items: center;
    display: flex;
	flex-direction: column;
    line-height: 25px;
}
.smallMenuImage {
    margin-left: 0px !important;
}
#leftmenu #leftNavigation li li.selectedMenu{
    background-color: #e8f3fa !important;
}

#leftmenu #leftNavigation li li:hover .menuLabel {
    color: #002664;
}

#leftmenu #leftNavigation li .leftMenuIcon {
    filter: invert(78%) sepia(25%) saturate(165%) hue-rotate(173deg) brightness(93%) contrast(83%);
}

#leftmenu #leftNavigation li li:hover .leftMenuIcon {
    filter: invert(8%) sepia(78%) saturate(3818%) hue-rotate(213deg) brightness(96%) contrast(101%);
}

#leftmenu .noRadius {
    border-radius: 0;
}

#leftNavigation ul li.childMenu {
    padding-left: 0px;
}

div#leftmenu {
    margin: 0;
    padding: 0;
    font-size: 1.4em;
    color: #002654;
    background-color: #ffffff;
    height: 95vh;
    width: 240px;
    position: fixed;
    float: left;
    z-index: 200;
}


#leftmenu #leftNavigation li:hover > ul,
#leftmenu #leftNavigation li.selectedMenu > ul {
    background-color: #ffffff;
}

#leftmenu #leftNavigation li.selectedMenu,
#leftmenu #leftNavigation li:hover {
    background-color: #ffffff;
}

#leftmenu #leftNavigation ul li {
    margin-top: 10px;
}

#leftmenu #leftNavigation ul li.childMenu,
#leftmenu #leftNavigation ul li a {
    padding-left: 0;
}

#leftmenu span.menuLabel {
    color: #5a7390;
    padding-left: 5px;
}

#leftmenu #leftNavigation ul li {
    overflow: hidden;
}

#profileUploadIFrame {
    width: 100%;
}

#leftmenu li.parentMenu {
    margin-top: 0 !important;
}

#leftmenu li.parentMenu > a > span.menuIcon {
    display: none;
}

#leftmenu li.parentMenu > ul {
    display: block;
}

div#leftmenu .user-profile-data {
    width: 100%;
    border-bottom: 5px solid #008ec9;
    font-weight: 500;
    overflow: hidden;
}

div#leftmenu .user-image {
    background-color: #fff;
    margin-bottom: 10px;
    color: #e8e8e8;
    overflow: hidden;
    cursor: pointer;
    font-size: 0.9em;
}

#payeeMenuItem a i {
    margin-left: 50px;
}

#flashSaveMsg, #dd_FlashSaveMsg, #cl_FlashSaveMsg, #templateFlashSaveMsg {
    display: none;
    float: left;
    min-width: 130px;
    height: 30px;
    padding: 5px;
    text-align: center;
    font-weight: bold;
    margin-right: 50px;
}

#content {
    margin-left: auto;
    margin-right: auto;
    width: 96%;
}
.fullDimensionElement {
    width: 100%;
}
#ui-datepicker-div select {
    /*a fix for some stuff bootstrap over rules*/
    color: #000000;
    font-weight: normal;
    padding: 5px 0;
}

#userIcon {
    position: absolute;
    top: -5px;
    left: -8px;
    color: #8485a0;
    background-color: transparent;
}

#customerButton,
#walkThruButton,
#helpButton {
    font-size: 1.9em;
}
#walkThruDropdownMenu {
    top: 20px !important;
}

#walkThruImage {
    position: absolute;
    top: 5%;
    Left: 20%
}

.whatsNewHighlight {
    color: #33cc00;
    animation: bulbBlink 1s linear infinite;
}
.highlightHelpZero {
    color: #33cc00;
}

.highlightFaqZero {
    color: #33cc00;
}

@keyframes bulbBlink {
  50% {
    opacity: 0;
  }
}


/* continuously change icon colour from white to blue to white */
.iconColourChange {
    animation: 2s infinite colorchange;
 } 
 @keyframes colorchange {
     0% {
         filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(187deg) brightness(104%) contrast(107%)   
     }
     50% {
         filter: invert(41%) sepia(71%) saturate(507%) hue-rotate(166deg) brightness(91%) contrast(89%);        
     }
     100% {
         filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(187deg) brightness(104%) contrast(107%)
     }
 }


div#showHeader {
    top: 5px;
    right: 10px;
    height: 20px;
    width: 100%;
}

#showHeaderButton {
    position: absolute;
    top: 0px;
    right: 65px;
}

/* Modal */

#aboutUsModal .modal-content {
    width: 25%; /* Could be more or less, depending on screen size */
}

.video-js .vjs-big-play-button {
    left: 50% !important;
    top: 50% !important;
    margin-left: -1.5em;
    margin-top: -0.75em;  
}

/* Customer Modal */

#customerModal .modal-content {
    width: 80%;
    font-size: 1em;
}

#modalButtonContainer, #modalHistoryButtonContainer , #modalHistoryChartButtonContainer{
    text-align: right;
}

#customerModalOptions {
    position: absolute;
    top:0;
    right: 2.5rem;
}

#customerModalOptions .dropdown-toggle::after {
    display: inline-block !important;
}
/* End Modal */


#customerSelectTable {
    padding: 0;
    margin: 0;
    width: 90%;
    border: 1px solid #e8e8e8;
    font-size: 1.2em;
}

#customerModalContent table thead tr {
    font-size: 1.2em;
}

#customerSelectTable_filter {
    margin-top: 0;
}


#customerSelectTable_filter label,
#customerSelectTable_filter input {
    height: 40px;
}

#customerSelectTable_filter label {
    width: 100%;
}

#customerSelectTable tr {
    color: #000000;
}

#customerSelectTable tr.suspendedCustomer,
#customerSelectTable tr.cancelledCustomer {
    color: rgb(204, 95, 95);
}

#customerSelectTable tbody tr:hover,
#customerSelectTable tbody tr:hover td {
    color: #008ec9;
    font-weight: bold;
    cursor: pointer;
}

#customerSelectTable_wrapper div.dataTables_scrollBody {
    overflow-y:auto !important;
    overflow-x:hidden !important;
}

.dimCustToggleIcon,
.dimCustSelectIcon {    
    color: #C0C0C0 !important;
}
/* End Modal */

#auddisReportWrapper div.modal-dialog {
    width: 50%;
}
#auddisReportFullTable  {
    width: 100% !important;
}
#auddisReportTable tbody tr:hover td,
#auddisReportFullTable tbody tr:hover td {
    color: #008ec9;
    cursor: pointer;
}
#auddisReportFullTable tbody tr td:nth-of-type(1) i,
#auddisReportTable tbody tr td:nth-of-type(1) i,
#auddisReportFullTable tbody tr td:nth-of-type(2) i {
    margin-left: 10px;
}
td.notImportant img,
td.notArchived img {
    filter: invert(0%) sepia(7%) saturate(29%) hue-rotate(335deg) brightness(93%) contrast(107%);
}

td.important img {
    filter: invert(17%) sepia(65%) saturate(6939%) hue-rotate(356deg) brightness(89%) contrast(118%);
}

td.archived img {
    filter: invert(41%) sepia(71%) saturate(507%) hue-rotate(166deg) brightness(91%) contrast(89%);
}

#auddisReportFullTable_filter {
    margin-top: 0px !important;
}
#auddisReportFullTable_filter label {
    width: 100% !important;
}
#auddisReportTable tbody tr.unreadReport td,
#auddisReportFullTable tbody tr.unreadReport td {
    font-weight: bold;
}
#auddisReportTable tr.odd td,
#auddisReportFullTable tr.odd td {
    background-color: #f7f7f7
}
#showHideArchived {
    cursor: pointer;
}
#showHideArchived:hover {
    color: #008ec9;
}
#showHideArchived i {
    margin-right: 10px;
}
#auddisReportErrorWrapper p.error {
    width: 100%;
    margin-top: 20px;
}
#auddisReportLogo {
    float: right;
    width: 150px;
    height: auto !important;
    margin-bottom: 25px;
}
#auddisReportHeaderTable, #ADDACSHEADER {
    margin: 25px 0;
    width: 70%;
}
#auddisReportData {
    margin-top: 25px;
}

#topRightDropdownMenu li {
    cursor: pointer;
}
#contactForm input,
#contactForm select,
#contactForm textarea {
    width: 100%;
}
#contactForm input[type="file"] {
    display: inline-block;
}

label.required:after {
    color: #DF0101;
    content: ' *';
}

#preferencesModal .modal-content,
#profileUploadWrapper .modal-content,
#contactUsWrapper .modal-content,
#genericMessageWrapper .modal-content {
    width: 50%;
}

#modalLoader .modal-content {
    top: 100px;
    width: 100px;
}

#preferencesModalHeader, #userHistoryModalHeader {
    padding: 2px;
    background-color: #fff;
    color: #002654;
}

#preferencesModalFooter {
    margin-top: 10px;
}

#preferencesModal fieldset div.adminOverride:after {
    content: 'Setting enforced by administrator.';
    color:rgb(204, 95, 95);
}

#preferencesModal label {
    width: 150px !important;
}

#preferencesModal #defaultCustomer {
    width: 300px;
}

#preferencesModal #defaultReportView, #preferencesModal #defaultNoResults {
    width: 75px;
}

#helpWrapper .modal-dialog {
    width: 70%;
}

#faqWrapper .modal-dialog {
    width: 70%;
}
#auditlogWrapper .modal-dialog {
    width: 70%;
}

#auditlogBody {
	width: 100%;
}
#logRecordsTable_filter {
    margin-top: 0px !important;
}

#logRecordsTable_filter label,
#logRecordsTable_filter input {
    text-transform: uppercase;
    height: 2.5em;
}

#helpContent {
    max-height: 400px;
    overflow: auto;
    background-color: #f9f4f4;
}

#helpContent h3 {
    margin-top: 0;
}

#helpContent ul {
    list-style-type: disc;
    padding-left: 20px;
}

#helpContent ol {
    list-style-type: decimal;
    padding-left: 20px;
}

#helpContent i {
    color: #337ab7;
}

#helpContent i.fa-trash {
    color: #ff1133;
}

#helpContent i.fa-trash-restore,
#helpContent i.fa-user-plus {
    color: #4c7d4c;
}

#helpContent i.fa-database,
#helpContent i.fa-bell,
#helpContent i.fa-ellipsis-v {
    color: #8485a0;
}

#faqContent {
    max-height: 400px;
    overflow: auto;
    background-color: #f9f4f4;
}

#faqContent h3 {
    margin-top: 0;
}

#faqContent ul {
    list-style-type: disc;
    padding-left: 20px;
}

#faqContent ol {
    list-style-type: decimal;
    padding-left: 20px;
}

#faqContent i {
    color: #337ab7;
}

#faqContent i.fa-trash {
    color: #ff1133;
}

#faqContent i.fa-trash-restore,
#faqContent i.fa-user-plus {
    color: #4c7d4c;
}

#faqContent i.fa-database,
#faqContent i.fa-bell,
#faqContent i.fa-ellipsis-v {
    color: #8485a0;
}

#helpContents li {
    display: block;
    width: 100%;
    min-height: 30px;
    line-height: 30px;
    padding-left: 10px;
    font-weight: bold;
    cursor: pointer;
    border-bottom: 1px solid #e8e8e8;
}
#faqContents li {
    display: block;
    width: 100%;
    min-height: 30px;
    line-height: 30px;
    padding-left: 10px;
    font-weight: bold;
    cursor: pointer;
    border-bottom: 1px solid #e8e8e8;
}

#helpContents li:hover, 
#helpContents li.helpMenu {
    background-color: #008ec9;
    color: #ffffff;
}
#faqContents li:hover, 
#faqContents li.faqMenu {
    background-color: #008ec9;
    color: #ffffff;
}

div[id^="helpContentBody"] {
    display: none;
}

div[id^="faqContentBody"] {
    display: none;
}

.helpWhatsNew {
  background-color: #d9d7d7;
  padding: 5px 10px;
}

.faqWhatsNew {
    background-color: #d9d7d7;
    padding: 5px 10px;
}

#changePasswordWrapper .modal-dialog {
    width: 400px;
}

#changePasswordMessage {
    display: none;
}

#changePasswordWrapperBody input {
    width: 145px;
}
tbody tr.newPayerHighlight td {
    background-color: #4c7d4c3b;
}
tbody tr.cancelledPayerHighlight td {
    background-color: #DF01013b;
}
tbody tr.auddisRestrictedPayerHighlight td {
    background-color: rgba(255, 197, 131, 0.842);
}

/* start of search select dropdown styling */
.searchSelect {
  float: left;
  position: relative;
  margin-bottom: 15px;
  width: 170px;
}
.searchSelect select {
  display: inline-block;
  width: 100%;
  cursor: pointer;
  padding: 10px 15px;
  background: #e6e6e6;
  color: #7b7b7b;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.searchSelect select::-ms-expand {
  display: none;
}
.searchSelect select:hover,
.searchSelect select:focus {
  color: #000;
  background: #d9d7d7;
  
  background-image:
    linear-gradient(45deg, transparent 50%, grey 50%),
    linear-gradient(135deg, grey 50%, transparent 50%),
    linear-gradient(to right, #d9d7d7, #d9d7d7);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em;
  background-repeat: no-repeat;
}
.searchSelect select {
  background-image:
    linear-gradient(45deg, transparent 50%, grey 50%),
    linear-gradient(135deg, grey 50%, transparent 50%),
    linear-gradient(to right, #e6e6e6, #e6e6e6);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em;
  background-repeat: no-repeat;
}
/* End of search select dropdown styling */

#showChanges {
    cursor: pointer;
}

#changesCalcMsg {
    float: left;
}

/* Payers Modal */
#payersModal .modal-content,
#payersHistoryModal .modal-content,
#changesHistoryModal .modal-content{
    background-color: #fefefe;
    margin: 2% auto; /* 15% from the top and centered */
    border-radius: 0;
}

#payersModal {
    z-index: 10;
}
/*Display payersHistoryModal above payersModal*/
#payersHistoryModal {
    z-index: 11;
}

#payersModal input, #payersModal select {
    height: auto !important;
}

#payersModal .modal-content label {
    width: 36% !important;
}
#payersModal label[for="payerNotes"] {
    padding-top: 6px;
    vertical-align: top;
}

#payerDetails input.declinedMandate {
    color: #ffffff;
    background-color: #ff1133;
}

div#fixedControl, div#variableDiv {
    display: none;
    float: left;
    width: 100%;
    padding: 10px 16px 10px 0px;
    background-color: #ffffff;
    margin-top: 0px;
}

#varPayAmtDiv {
    margin-left: 5px;
}

div#fixedControl h3, div#variableDiv h3 {
    margin-bottom: 5px;
}

#fixedControl label {
    display: block;
    text-align: left;
    width: auto;
}

#fixed {
    padding-left: 1rem;
    padding-right: 1rem;
}

#fixed input, #fixed select {
    width: 90% !important;
    overflow: hidden;
}

#fixedFooter div {
    margin-top: 10px;
}

#fixedFooter input {
    display: inline-block;
}

#fixedFooter label {
    display: inline-block;
    padding-left: 10px;
}
#variable thead tr th:first-of-type {
	width: 200px;
}

#variable input {
    width: 30% !important;
    overflow: hidden;
}

#cancelPayerButton {
	position: absolute;
	right: 0px;
	width: 220px;
	text-transform: none !important;
}
#reinstateAuddisButton {
	position: absolute;
	right: 0px;
	width: 220px;
	text-transform: none !important;
}

#repeatFixed {
    padding-top: 8px;
}

#repeat {
	width: auto !important;
}

#fixed1, #fixed2, #fixed3, #fixed4 {
    width: 100%;
}
#actions1, #actions2, #actions3, #actions4 {
    height: 100%;
    position:relative;
}
#addFixedPaymentLine1, #addFixedPaymentLine2, #addFixedPaymentLine3, #addFixedPaymentLine4,
#deleteFixedPaymentLine1, #deleteFixedPaymentLine2, #deleteFixedPaymentLine3, #deleteFixedPaymentLine4,
#repeatFixedPaymentLine1, #repeatFixedPaymentLine2, #repeatFixedPaymentLine3, #repeatFixedPaymentLine4, 
#clearVariablePayment {
    position: absolute;
    bottom: 15px;
    cursor: pointer;
}
#fixedPaymentsTakenInfo1, #fixedPaymentsTakenInfo2, #fixedPaymentsTakenInfo3, #fixedPaymentsTakenInfo4 {
    position:absolute;
    bottom: 11px;
    right: 38px;
    cursor: pointer;
}
#addFixedPaymentLine1, #addFixedPaymentLine2, #addFixedPaymentLine3, #addFixedPaymentLine4,
#fixedPaymentsTakenInfo1, #fixedPaymentsTakenInfo2, #fixedPaymentsTakenInfo3, #fixedPaymentsTakenInfo4 {
    color: #4c7d4c;
}
#repeatFixedPaymentLine1, #repeatFixedPaymentLine2, #repeatFixedPaymentLine3, #repeatFixedPaymentLine4 {    
    left: 107px;
}
#deleteFixedPaymentLine1, #deleteFixedPaymentLine2, #deleteFixedPaymentLine3, #deleteFixedPaymentLine4 {
    color: #ff1133;
    left: 60px;
}
#clearVariablePayment {
    color: #ff1133;
    margin-left: 10px;
}
#payerDetails input, #payerDetails select, #payerDetails textarea {
    width: 60%;
    margin-bottom: 5px;
    min-width: 130px;
}
#personalDetails div {
    position: relative;
}
#sendPayerEmail {
    position: absolute;
    right: 20px;
    top: 13px;
    color: #000000;
}
#representPayment {
    margin-top: 4px;
}
#representPayment label {
    width: auto;
}
#representPayment input[type="checkbox"] {
    width: auto;
}
#clearFixedPaymentPlan {
    width: auto;
}
#addPayerWrapper, #undoAllChangesWrapper, #payerStateDiv {
    float: right;
    margin-right: 0.5rem;
    font-size: 1.5rem;
    margin-top: 10px;
    margin-left: 1rem;
}
#payerStateDiv {
    font-size:1rem;
    margin-right:3rem;
}

#addPayerWrapper:hover, #undoAllChangesWrapper:hover, #sendPayerEmail:hover {
    color:#008ec9;
    cursor: pointer;
}
#addPayerWrapper i {
    color: #4c7d4c;
}
#addPayerWrapper span {
    padding-left: 5%;
}
#payerDiv{
    display: none;
}

#cancelFixedPaymentChanges{
    padding-left: 50px;
}

#setHolidayStatus.green-btn {
    background-color: #ff1133;    
}

#repeatFixed {
    width: 200px; 
}

#payersModal .modal-content label#repeatFixedlbl {
    width: 180px !important; 
}

button#setHolidayStatus {
    margin-left: 50px;
    margin-top: 5px;
}

#holBalDiv {
    min-width: 380px;
}

#payersModal .modal-content label#paymentHolidayBalance {
    width: 220px !important;    
    padding-left: 50px;
}

#holidayBalance {
    width: 130px !important;
}

#paymentTypeNav {
    margin: 0;
    width: 100%;
    padding-left: 0px !important;
}

#payersModal input[type='checkbox'] {
    /* just overriding a general rule on inputs to allow check boxes to line up to the left*/
    width: 10px !important;
    min-width: 10px !important;
}

#oneOffPayment {
    width: auto !important;
}
i.fa-undo {
    color: #ff1133;
}

#branchDetails, #accountInfo {
    padding: 5px 0;
    margin-top: 3px;
    margin-bottom: 5px;
    margin-left: 38%;
}

#branchDetails p, #accountInfo p {
    margin-bottom: 0;
}

#auddisInfoMessage {
    display: none;
    margin-top: 1rem;
}
#auddisInfoMessage .title {
    font-size: 1rem;
    font-weight: bold;
}
#auddisInfoMessage .message {
    margin-top: 1rem;
}

/* Payer Modal Navigation Styles */

#payerOptions {
    position: absolute;
    top:0;
    right: 2.5rem;
}

#payerOptions a {
    margin-left: 0.5rem;
    font-size: 1.5rem;
}

#payerOptions a:hover {
    cursor: pointer;
}
#unsavedChanges {
    display: none;
    font-size: 1rem;
}


.paperlessHelp {
    vertical-align: text-top;
}

#paperlessRequest, #paperlessRequest.none,
a[id^="paperlessRequest-"], a[id^="paperlessRequest-"].none {
    display: none;
}
#paperlessRequest.history,
a[id^="paperlessRequest-"].history i {
    display: inline-block;
    color: #7b7b7b !important;
}
#paperlessRequest.awaiting,
a[id^="paperlessRequest-"].awaiting i {
    display: inline-block;
    color: #ffbf00 !important;
}
#paperlessRequest.auth,
a[id^="paperlessRequest-"].auth i {
    display: inline-block;
    color: #337ab7 !important;
}
#paperlessRequest.authorised,
a[id^="paperlessRequest-"].authorised i {
    display: inline-block;
    color:  #4c7d4c !important;
}
#paperlessRequest.declined,
a[id^="paperlessRequest-"].declined i {
    display: inline-block;
    color: #ff1133 !important;
}

a[id^="paperlessRequest-"].history,
a[id^="paperlessRequest-"].awaiting,
a[id^="paperlessRequest-"].auth,
a[id^="paperlessRequest-"].authorised,
a[id^="paperlessRequest-"].declined {
    display: inline-block;
}

.highlightSaveIcon {
    /*color: #33cc00;*/
    color: #009900 !important;
}

#tfaQRCodeWrapper, #tfaOTPWrapper {
    vertical-align: top;
}
#tfaQRCode {
    display: block;
    margin: 0 auto;
}
#tfaOTPCodeCheck {
    float: right;
    margin-top: 1rem;
}
div.twoFactorAuthPrompt .modal-content {
    width: 30% !important;
}

/* Start of password modal */
#confirmationPasswordModal .modal-content{
    width: 40%;
}
/* End of password modal */

#apiTokenWrapper .modal-dialog {
    width: 600px;
}

.apiLabel {
    width: 20%;
}

.apiField {
    width: 75%;
    text-transform: none;
}