/* Set padding to keep content from hitting the edges */
.body-content {
	padding-left: 15px;
	padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
	white-space: normal;
}

/* Navbar styles
-------------------------------------------------- */

.navbar-default {
	background: linear-gradient(
		to bottom,
		#ffffff,
		#ffffff,
		#ffffff,
		#ffffff,
		#f7f7f7
	);
}

.right-border {
	border-right: 1px solid;
	border-color: grey;
	align-content: center;
}

.center-me {
	text-align: center;
}

.navbar {
	padding: 8px;
}

.min-height-navbar {
	min-height: 112px;
}

.landing-icon {
	width: 33%;
}

.section.loading {
	position: absolute;
	width: 100%;
	text-align: center;
	color: #6e6e6e;
}

section.loading {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-image: url(/images/spinner_white_clear.gif);
	background-repeat: no-repeat;
	background-position: center center;
	background-color: rgba(255, 255, 255, 0.8);
	text-indent: -99999px;
	z-index: 10000;
}

div.loaderWrapper {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-image: url(/images/spinner_white_clear.gif);
	background-repeat: no-repeat;
	background-position: center center;
	background-color: rgba(255, 255, 255, 0.8);
	text-indent: -99999px;
	z-index: 10000;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
	color: #4c4845;
}

.navbar-right {
	display: flex;
}

.navbar-margin-bottom {
	margin-bottom: 10px;
}

.padding-remove
{
	padding: 0px
}

.navbar-element {
	display: flex;
	margin: 7.5px;
	justify-content: flex-end;
}

.navbar-title {
	white-space: nowrap;
	padding: 7.5px;
	font-weight: 800;
}

.navbar-input {
	width: 150px;
	border-width: 2px;
	text-transform: uppercase;
}

.logo-image-pre-login {
	width: 200px;
}

.logo-image-post-login {
	width: 150px;
}

.gray-out-image {
	opacity: 0.5;
	filter: grayscale(1);
}

/*default error styles*/
.navbar-element-error {
	position: relative;
	top: 42px;
	/* Set the fixed height of the footer here */
	height: 15px;
	font-size: 12px;
	white-space: nowrap;
}

/* collapse style*/
@media (max-width: 767px) {
	.navbar-right {
		flex-direction: column;
	}

	.navbar-element-error {
		position: relative;
		float: right;
		/*magic number to remove vertical scroll bar*/
		top: -2px;
		left: 0px;
	}
}

/* small, but not collapsed */
@media (max-width: 991px) and (min-width: 768px) {
	.navbar-element-error {
		left: 210px;
	}
	.containerNavbar {
		width: 750px;
	}
}

/* awkward inbetween */
@media (max-width: 1199px) and (min-width: 992px) {
	.navbar-element-error {
		left: 430px;
	}
	.containerNavbar {
		width: 992px;
	}
}

/* biggest screen */
@media (min-width: 1200px) {
	.navbar-element-error {
		left: 430px;
	}
	.containerNavbar {
		width: 1250px !important;
	}
}

/* Sticky footer styles
-------------------------------------------------- */
html {
	position: relative;
	min-height: 100%;
}
body {
	/* Margin bottom by footer height */
	margin-bottom: 60px;
	color: #6a6a6a;
	font-family: "Swiss 721 W01 Roman", "Helvetica Neue", Helvetica, Arial,
		sans-serif;
}
.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	/* Set the fixed height of the footer here */
	height: 60px;
	background-color: #5e5e5e;
}
.footer .text-muted {
	color: #adadad;
}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container {
	margin-top: 120px;
}

body > .pre-login-container {
	margin-top: 80px;
}

@media (max-width: 991px) {
	body > .container {
		margin-top: 120px;
	}

	body > .pre-login-container {
		margin-top: 80px;
	}
}

.container .text-muted {
	margin: 20px 0;
}

.footer > .container {
	padding-right: 15px;
	padding-left: 15px;
}

body > .container.main {
}

.nopaddingleft {
	padding-left: 0;
}

.nopaddingright {
	padding-right: 0;
}

.validation-error {
	color: #d42a1d;
}

.main-button:hover,
.main-button:focus,
.main-button:active,
.main-button:active:focus,
.main-button {
	padding: 5px 15px;
	background-color: #861B54;
	color: #fff;
	border: 0;
	border-radius: 0;
	font-weight: bold;
	font-size: 15px;
	outline: none;
}

.main-button:hover {
	/* background-color: #f90582; */

	background-color: #861B3C;
}

.table-button {
	float: right;
}

.landing-page-body {
	margin-top: 70px;
}

.landing-page-header {
	font-weight: 800;
	text-align: center;
	font-size: 30px;
}

.landing-page-content {
	text-align: center;
}

.landing-page-header > h1 {
	font-weight: bold;
}

.landing-page-divider {
	height: 2px;
	width: 80%;
	background-color: #999;
	border: 0 none;
	margin: 40px auto;
}

.lookup-title {
	font-weight: 800;
	font-size: 24px;
	display: flex;
	justify-content: space-between;
	flex-direction: row;
}

@media (max-width: 991px) {
	.lookup-title {
		flex-direction: column;
	}
}

.msisdn-title {
	padding: 24px 24px 0 24px;
	font-size: 24px;
}

.msisdn-title .lookup-title,
.landing-page-header {
	color: #4c4845;
}

.main-url:active,
.main-url:hover,
.main-url:focus,
.main-url {
	outline: none;
	color: #861B54;
	font-weight: 800;
}

.main-url:active,
.main-url:hover {
	text-decoration: underline;
}

.lookup-breadcrumb {
	padding-top: 24px;
	color: grey;
	font-size: 12px;
}

.lookup-container {
	padding: 24px;
}

.heading-split-line,
.split-line-2px,
.split-line {
	left: 0;
	right: 0;
	border-top: 3px solid #dad8d6;
}

.split-line-2px,
.split-line {
	margin: 12px 0;
}

.heading-split-line {
	margin: 24px 0;
}

.split-line-2px {
	border-width: 2px;
}

.row {
	margin: 0;
}

.nav-tabs,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
	border-width: 3px;
	color: #4c4845;
	font-weight: 800;
}

ul.nav.nav-tabs {
	padding-left: 20px;
}

.nav-tabs > li > a {
	padding: 12px 62px;
	margin-bottom: -3px;
	background: #ecebea;
}

a.nav-link.ng-binding {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	color: #4c4845;
	font-weight: 600;
}

.zebra:nth-of-type(odd) {
	background-color: #ecebea;
}

.table > tbody > tr > td,
.table > thead > tr > th {
	border: none;
	vertical-align: middle;
}

.offer-column {
	width: 50%;
	word-wrap: break-word;
}

.lookup-container .table th {
	cursor: pointer;
}

.details-header,
.details-subheader {
	font-weight: 800;
	font-size: 16px;
}

.details-header {
	padding-left: 36px;
}

.details-container {
	padding: 0 92px;
}

.details-content {
	padding: 8px 8px 8px 22px;
	font-weight: 600;
	font-size: 16px;
	font-weight: normal;
}

.error {
	color: red;
}

.details-block {
	padding-bottom: 64px;
}

.payment-table {
	white-space: nowrap;
}

.payment-table > thead {
	font-size: 12px;
}

.payment-table tbody > tr > td {
	padding: 12px;
	font-weight: 600;
}

.notes-leftbar {
	background: #dedede;
	width: 60px;
	left: 0;
}

.notes-container,
.notes-leftbar {
	position: fixed;
	top: 112px;
	padding-bottom: 67px;
	height: 100%;
	z-index: 2;
}
.notes-icon {
	width: 30px;
}

.notes-button {
	width: 60px;
	height: 60px;
	background: transparent;
	border: none;
	outline: none;
}

.notes-button-active,
.notes-container {
	background: #f4f3f2;
}
.notes-container {
	left: 60px;
	width: 360px;
	overflow: auto;
}

.notes-title {
	font-size: 12px;
}

.button-close {
	width: 36px;
	height: 36px;
	padding: 0;
	margin: 6px;
}

.icon-close {
	font: 600 46px serif;
	vertical-align: middle;
	color: #707170;
	line-height: 32px;
}

.note {
	margin-bottom: 20px;
}

.note .row {
	white-space: nowrap;
}

.note-date {
	text-align: left;
	font-size: 14px;
	font-weight: 600;
	margin-top: 5px;
	margin-bottom: 5px;
}

.new-note,
.note-header {
	font: 600 16px sans-serif;
	color: #861B54;
}

.notes-split {
	left: 0;
	right: 0;
	border-top: 1px solid black;
}

.notes {
	padding: 16px;
}

.note-text {
	padding: 16px 0;
	font-size: 16px;
	word-wrap: break-word;
}

.note-text-alt {
	font-size: 16px;
	word-wrap: break-word;
}

.new-note {
	text-decoration: underline;
	padding: 8px;
	margin: 8px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.new-note-label {
	font-size: 12px;
	font-weight: 600;
}

.new-note-buttons {
	padding: 8px;
}

.new-note-reason,
.new-note-input {
	margin: 2px;
	width: 300px;
	max-width: 300px;
	border: 2px solid #ccc;
}

.new-note-input {
	min-height: 100px;
}

.new-note-container {
	padding: 16px;
}

.note-button-container {
	text-align: right;
}

.sms-section-title {
	font-size: 20px;
	font-weight: 700;
	padding-bottom: 10px;
	text-align: center;
}

.sms-item {
	border-bottom: 1px solid black;
	margin: 40px 0px;
	padding-bottom: 40px;
}

.sms-confirm-text {
	font-weight: 700;
	padding-bottom: 16px;
	text-align: center;
}

.sms-error-msg {
	color: #861B54;
	font-weight: 700;
}

.close-button:active:focus,
.close-button:focus,
.close-button {
	background-color: #4c4845;
}

.save-button,
.close-button {
	padding: 5px 10px !important;
}

.close-button:hover {
	background-color: #655f5b;
}

.close-button .icon-close {
	padding: 0 2px 0 0;
	font-size: 30px;
	vertical-align: middle;
	color: white;
	line-height: 20px;
}

.product-information {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.btn .caret {
	margin-left: 10px;
	margin-top: -4px;
	border-top: 12px dashed;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
}

.dropdown-button {
	background: transparent !important;
	color: #861B54 !important;
	font-size: 24px;
	font-weight: 800;
	line-height: 20px;
	border-color: #ccc !important;
}

.dropdown-menu > li > a {
	font-size: 24px;
	padding: 3px 40px;
	color: #861B54;
}

.msisdn-dropdown {
	display: flex;
}

.msisdn-dropdown > .dropdown {
	margin-left: 12px;
}

.force-payment-tabs > ul > li > a {
	padding: 10px 24px;
}

.modal-lg {
	margin: 30px auto;
	width: 90%;
	max-width: 1100px;
}

.pay-button-container {
	margin-top: 26px;
}

.payment-bottom-label,
.bottom-label {
	padding-top: 3px;
	font-size: 11px;
}

.bottom-label {
	text-align: end;
}

.call-info-container {
	float: right;
}

@media (max-width: 767px) {
	.call-info-container {
		float: none;
	}
}

.form-group > label {
	white-space: nowrap;
}

.plus-button {
	color: white;
	background-color: #ccc;
	width: 24px;
	height: 24px;
	text-align: center;
	font: 600 24px serif;
	border-radius: 3px;
}

.payment-tab {
	padding-top: 24px;
}

.plus-button-container {
	float: right;
	margin: -30px 6px 0 0;
}

.number-list {
	border: 2px #ccc solid;
	border-radius: 6px;
	padding: 4px;
}

.number-list-item {
	border-radius: 3px;
	padding: 0 4px;
}

.number-list-item-focus {
	color: white;
	background-color: #861B54 !important;
	outline: none;
}

.remove-button {
	float: right;
	cursor: pointer;
	user-select: none;
}

.popup-button {
	padding: 8px 48px !important;
}

.offer-info {
	display: flex;
	justify-content: space-between;
	margin: 12px 0;
}

.offer-info-url {
	outline: none;
	color: #861B54 !important;
	text-decoration: underline;
}

.offer-status {
	display: flex;
}

.offer-status-hold {
	color: yellow;
	font-size: 24px;
}

.offer-status-active {
	color: green;
	font-size: 24px;
}

.offer-status-closed {
	color: red;
	font-size: 24px;
}

.status-indicator {
	border-radius: 50%;
	height: 16px;
	width: 16px;
	margin: 2px 8px;
	background: #f5a0a0;
	border: #f5a0a0 solid;
}

.product-info-cell {
	width: 14%;
	min-width: 135px;
	word-wrap: break-word;
	padding: 8px;
	text-align: center;
}

.wireless-number {
	font-size: 16px;
	font-weight: 600;
}

.heading-cell {
	text-align: left;
	font-weight: 600;
}

.popup-image {
	overflow: hidden;
	max-height: 600px;
	padding-right: 15px;
	padding-left: 15px;
	padding-bottom: 0px;
}

.img-container {
	height: 600px;
	width: 100%;
}

.img-container-overflow {
	height: 587px;
	overflow-x: scroll;
	overflow-y: scroll;
}

/* Used to offset for scrollbar*/
.right {
	margin-right: 17px;
}

.imageuploads .thumbnail:hover {
	background: #555;
	border-color: #555;
	overflow: hidden;
	text-overflow: ellipsis;
}

.imageuploads .thumbnail:hover img {
	opacity: 0.3;
}

.imageuploads .thumbnail span {
	display: none;
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -10px;
	margin-left: -20px;
}

.imageuploads .thumbnail:hover span {
	display: inline-block;
}

.imageuploads .col-md-4,
.imageuploads .col-sm-4,
.imageuploads .col-xs-4 {
	padding-left: 4px;
	padding-right: 4px;
}

.tab-modal .modal-header {
	border-bottom: 0;
	padding: 25px 15px 9px;
	padding-left: 25px;
}

.tab-modal .modal-body {
	padding-left: 25px;
	padding-top: 0;
}

.tab-modal .close {
	font: 100 39px serif;
	margin-right: 15px;
}

.no-submissions {
	font-size: 36px;
	font-weight: bold;
	text-align: center;
	margin-top: 64px;
}

option:checked,
option:hover {
	color: white !important;
	background: #861B54 repeat
		url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAWCAIAAACpCuAVAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAeSURBVDhPY3jEUEIqGtUzqgeERvWM6gEh0vUwlAAASQ/ztC3jYZIAAAAASUVORK5CYII=");
}

.custom-error {
	color: red;
}

.navbar-element input[type="text"].ng-invalid {
	border-color: red;
}

.input-invalid {
	border-color: red;
}

.check-box {
	width: 30px !important;
	height: 30px !important;
}

.products-container {
	border: 2px solid #ccc;
	border-radius: 3px;
}

.products-container .table tbody tr {
	cursor: pointer;
}

.main-button.btn-default.disabled,
.main-button.btn-default[disabled],
.main-button.btn-default.disabled:hover,
.main-button.btn-default[disabled]:hover,
.main-button.btn-default.disabled:focus,
.main-button.btn-default[disabled]:focus,
.main-button.btn-default.disabled.focus,
.main-button.btn-default[disabled].focus {
	background-color: #4c4845;
}

.lookup-container-shift-right {
	margin-left: 360px;
}

.force-payment-selected-background {
	background: #dedede;
}

.debit-card-comments-title,
.debit-card-transactions-title {
	background-color: #861B54;
	color: white;
}

.load-more {
	background-color: #f5f5f5;
	color: #861B54;
	cursor: pointer;
	font-weight: 700;
	text-align: center;
}

.no-records-found {
	background-color: #f5f5f5;
	font-weight: 600;
	text-align: center;
}

.debit-card-details {
	padding-bottom: 2rem;
}

.section-padding {
	padding: 1.2rem 0;
}

.header-padding {
	padding: 0 1rem 0 0;
}

.addressSearchNotes {
	top: 100px !important;
}

.addressSearchMain {
	margin-top: 110px !important;
}

.dcAdminModal .modal-dialog {
	width: 1500px;
	max-width: 1900px;
	min-height: 500px;
}

.actionModal .modal-dialog {
	width: 500px;
}

.table-hover > div:hover {
	background-color: #f5f5f5;
}

.page-selection {
	text-align: center;
}

.page-selection > .pagination > li > a {
	color: #861B54;
}

.page-selection > .pagination > .active > a {
	background-color: #861B54;
	border-color: #861B54;
	color: white;
}

.page-selection > .pagination > .active > a:hover {
	background-color: #861B54;
	border-color: #861B54;
}

.page-selection > .pagination > .disabled > a {
	color: #777;
}

/* keying styles
-------------------------------------------------- */

.sumbission-table {
	margin-top: 5rem;
}

.row-table {
	transition: 0.2s;
}

.row-table:hover {
	background-color: #d8d8d8;
	transition: 0.2s;
}

.warning-button {
	padding: 5px 15px;
	color: #fff;
	border: 0;
	border-radius: 0;
	font-weight: bold;
	font-size: 15px;
	outline: none;
	background-color: #ffb300;
}

.warning-button:hover {
	color: #fff;
	background-color: #ffd54f;
}

.keying-container {
	position: absolute;
	left: 0;
	width: 100%;
}

.keying-title {
	font-weight: 800;
	font-size: 24px;
	padding-bottom: 2rem;
}

.keying-form-container {
	height: 88vh;
	overflow-y: scroll;
}

.keying-form-footer {
	padding-top: 2rem;
}

.keying-added-line {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.added-line {
	border: 1px solid;
	padding-top: 15px;
	padding-bottom: 15px;
	background-color: #f7f7f7;
}

.added-lines-error {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.magenta-text {
	color: #861B54;
	line-height: 1rem;
}

.selected-thumb {
	border-color: #861B54;
}

.submission-thumb {
	display: inline-block;
	height: 100px;
	margin: 0 4px;
	cursor: pointer;
	width: 100px;
}

.submission-thumb:first-child {
	margin-left: 0;
}

.submission-thumb-images {
	overflow-x: auto;
	padding-bottom: 1rem;
	white-space: nowrap;
}

.image-controls {
	float: right;
	padding-bottom: 1rem;
}

.image-control {
	background-color: #861B54;
	border-color: #861B54;
}

.full-size-image {
	height: 70vh;
	width: 60vw;
	overflow: auto;
}

.full-size-image img {
	height: 100%;
	width: 100%;
}

.full-size-image img.vertical {
	width: auto;
}

.full-size-image object {
	height: 98%;
	width: 100%;
}

.form-checkbox {
	width: 34px;
}

.input-inline {
	border: 1px solid #ccc;
	border-radius: 4px;
}

.input-error {
	border-color: #a94442;
}

.cf-cs-image-view .image-container {
	border: 1px solid #eee;
	height: 350px;
	width: 100%;
	overflow: scroll;
	resize: both;
	text-align: center;
	vertical-align: middle;
}

.cf-cs-image-view .image-container img {
	width: 100%;
	height: auto;
}