/* This image has been sourced from https://www.toptal.com/designers/subtlepatterns/concrete-seamless/ for background. */
/* This image has been sourced from https://static.pexels.com/photos/164552/pexels-photo-164552.jpeg for background.  It is available for free and is labeled as "Labeled for reuse with modification". 
*/
html { background-attachment: fixed; width: 100%; margin: 0; padding: 0; min-height: 100% !important; }

body { background: url("/cassette.axd/file/Styling/custom/main/images/concrete_seamless-d03c7bbf72f3088da0af7bbc9f506dbe1f3e2dec.png"); color: #525252 !important; font-family: Tahoma, Geneva, sans-serif; margin: 0; padding: 0; font-size: medium; width: 100%; -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); min-height: 100% !important; }

.navMain { border: none; background: #3077B1; color: white; border-radius: 0px; padding: 10px; }

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main { transition: margin-left .5s; padding: 10px; overflow: auto; }

.viewContainer { min-height: 100% !important; height: 100%; margin: 1%; padding: 0; }

.btn-warning { background-color: #ff9537; border-color: #ff9537; }

/*
input, select, textarea {    color: #525252 !important;
}*/
.notesInfo { color: #e60000; font-size: 12px; padding: 5px; margin-bottom: 0px; text-align: left; }

#billPayFooter { text-align: center; position: absolute; bottom: 0; padding: 5px; width: 100%; }

/*
.modal .modal-dialog .modal-content{ color:#525252 !important;
}
*/
.reqdFields { font-size: 11px; font-style: italic; color: red; padding-left: 0; }

@media (min-width: 768px) { .form-horizontal .control-label { text-align: left; } }
.modal-footer { border-top: none; }

.modal-body { overflow-y: auto; }

.height400 .modal-body { min-height: 400px; }

.height500 .modal-body { min-height: 500px; }

.height550 .modal-body { min-height: 550px; }

.height600 .modal-body { min-height: 600px; }

.eighty-modal-window .modal-dialog { width: 80% !important; }

.seventy-modal-window .modal-dialog { width: 70% !important; }

.sixty5-modal-window .modal-dialog { width: 65% !important; }

.sixty-modal-window .modal-dialog { width: 60% !important; }

.forty-modal-window .modal-dialog { width: 40% !important; }

.fifty-modal-window .modal-dialog { width: 50% !important; }

.modal.in .modal-dialog { box-shadow: 0px 0px 10px 1px black; }

.billSubmit { float: right; width: 400px; padding: 10px; }

@media (max-width: 1280px) { .modal-dialog { margin: 30px auto; min-width: 90% !important; }
  .btnWrap { min-height: 40px; }
  .billSubmit { float: right; width: auto !important; padding: 5px !important; }
  /* GLOBAL HELPER ALERT POP-UP */
  #alertWrapper { width: 90% !important; left: 5% !important; margin-left: 0px !important; border-radius: 5px !important; } }
.confirmCardModal .modal-header { border-bottom: none !important; }

.cardConfirmBtn { margin-right: 10%; background: #004d00; width: 100px; margin-left: -8%; border-radius: 5px; box-shadow: 0px 2px 5px 0px black; }

.cardConfirmBtn:hover { background: #006100; box-shadow: 0px 2px 5px 0px black; }

.cardCancelBtn { margin-right: 10%; background: #d23c1e; box-shadow: 0px 2px 5px 0px black; border-radius: 5px; }

.cardCancelBtn:hover { background: #e56146; box-shadow: 0px 2px 5px 0px black; }

.labelCustom { padding-right: 0px; }

/* Have to set height explicity on ui-view 
to prevent collapsing during animation*/
.well[ui-view] { height: 700px; }

.ui-view-container { position: relative; }

[ui-view].ng-enter, [ui-view].ng-leave { position: absolute; left: 0; right: 0; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }

[ui-view].ng-enter { opacity: 0; -webkit-transform: scale3d(0.5, 0.5, 0.5); -moz-transform: scale3d(0.5, 0.5, 0.5); transform: scale3d(0.5, 0.5, 0.5); }

[ui-view].ng-enter-active { opacity: 1; -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }

[ui-view].ng-leave { opacity: 1; /*padding-left: 0px;*/ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

[ui-view].ng-leave-active { opacity: 0; /*padding-left: 100px;*/ -webkit-transform: translate3d(100px, 0, 0); -moz-transform: translate3d(100px, 0, 0); transform: translate3d(100px, 0, 0); }

/*
.signInPage{ background: $signInImage;
}*/
.loginForm { background-color: #3077B1; padding: 15px; color: white; float: left; border-radius: 5px; box-shadow: 0px 1px 5px 2px grey; margin-top: 10px; }

.loginSubmit { width: 35%; background: #ff9537; margin-bottom: 10px; }

.forgotPass { margin-bottom: 10px; }

.enrollSubmit { margin-bottom: 10px; background: #ff9537; width: 100%; }

.enrollForm { border: 1px solid grey; padding: 15px; float: right; border-radius: 5px; box-shadow: 0px 1px 5px 2px grey; margin-top: 10px; }

.formRow { padding-bottom: 10px; }

.blueHeading { background: #3077B1; color: #fff; text-align: center; font-size: 25px; padding: 10px; font-weight: bold; overflow-x: auto; }

.funky-show-hide { transform-origin: left; transition: all 0.5s ease; }

.check-element { opacity: 1; padding: 10px; }

.totalAmountHead { float: right; font-size: 25px; padding-top: 5px; padding-bottom: 5px; margin-top: 10px; }

.payBtnPop { float: right; font-size: 18px; font-weight: bold; box-shadow: 0px 1px 5px 0px darkslategrey; }

.tableDetails { width: 100%; border: 1px solid whitesmoke; border-radius: 5px; box-shadow: 0px 1px 3px 2px #525252; padding: 5px; min-height: 70px; }

/* 
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-device-width: 768px) and (max-device-width: 1024px) { /* Force table to not be like tables anymore */
  table, thead, tbody, th, td, tr { display: block; }
  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr { 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; padding-left: 50%; }
  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; }
  /* Label the data */
  td:nth-of-type(1):after { content: " ---Invoice"; }
  td:nth-of-type(2):after { content: " ---Invoice Date"; }
  td:nth-of-type(3):after { content: " ---Parent Account"; }
  td:nth-of-type(4):after { content: " ---Billing Account"; }
  td:nth-of-type(5):after { content: " ---Current Charges"; }
  td:nth-of-type(6):after { content: " ---Invoice Balance"; }
  td:nth-of-type(7):after { content: " ---Payment Amount"; } }
/* The side navigation menu */
.sidenav { height: 100%; /* 100% Full-height */ width: 0; /* 0 width - change this with JavaScript */ position: fixed; /* Stay in place */ z-index: 10000; /* Stay on top */ top: 0; right: 0; background-color: #3077B1; overflow-x: hidden; /* Disable horizontal scroll */ padding-top: 60px; /* Place content 60px from the top */ transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */ opacity: 0.95; }

/* The navigation menu links */
.sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #d3d3d3; display: block; transition: 0.3s; }

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus { color: #f1f1f1; }

/* Position and style the close button (top right corner) */
.sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; }

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) { .sidenav { padding-top: 15px; }
  .sidenav a { font-size: 18px; } }
.rightNavSpan { font-size: 30px; cursor: pointer; padding-right: 10px; }

/* Add a black background color to the top navigation */
.topnav { background-color: #1398F4; overflow: hidden; padding: 5px; box-shadow: 0px 3px 5px darkslategrey; }

/* Style the links inside the navigation bar */
.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 10px 10px 10px 16px; text-decoration: none; font-size: 17px;}

/* Change the color of links on hover */
/*.topnav a:hover { background-color: #ddd; color: black;
}
*/
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon { display: none; }

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) { .topnav a:not(:first-child) { display: none; }
  .topnav a.icon { float: right; display: block; } }
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) { .topnav.responsive { position: relative; }
  .topnav.responsive a.icon { position: absolute; right: 0; top: 0; }
  .topnav.responsive a { float: none; display: block; text-align: left; } }

/*# sourceMappingURL=main.css.map */