@import 'src/Components/GlobalStyles/colors';
@import 'src/Components/GlobalStyles/mixins';

.paymentHistoryContainer {
	color: $font-grey-darker;

	.contextContainer {
		@include SubNav;
	}

	.mainContext {
		display: flex;
		justify-content: center;

		.container__main {
			@include AccountContext;

			h5 {
				// text-align: center;
				margin-bottom: 30px;
			}

			h6 {
				font-size: 16px;
				font-weight: 700;
			}

			.nextBilingCycle {
				margin-bottom: 30px;

				&__row {
					display: grid;
					grid-template-columns: 240px 100px auto;
				}

				@media screen and (max-width: 768px) {
					&__row {
						display: grid;
						grid-template-columns: 190px 100px auto;
					}
				}

				&__title {
					font-size: 14px;
				}

				&__content {
					font-size: 24px;
				}
			}

			ul li {
				margin: 0;
				border-bottom: 2px solid rgb(0 0 0 / 10%);

				p {
					margin-bottom: 0;
					padding-bottom: 0;

					&.red {
						color: #aa4a44;
					}
				}
			}

			&__list {
				padding-left: 0;
				font-size: 14px;

				&__element,
				&__element__title {
					display: grid;
					grid-template-columns: repeat(5, 1fr);
					grid-template-columns: repeat(5, 18%);
					grid-template-columns: 140px 80px 70px 80px 80px 110px;
					white-space: nowrap;
					gap: 15px;
					text-align: left;
					padding: 10px;
					// box-shadow: 0 3px 13px 0 $dropShadow;
				}

				&__element__title {
					border-top: 2px solid rgb(0 0 0 / 10%);
					border-bottom: 2px solid rgb(0 0 0 / 10%);
					margin-bottom: 1px;
				}
			}

			&__button {
				@include Button;

				color: white;
				padding: 10px 20px;
				background-color: var(--primary-color);
				box-shadow: 0 3px 13px 0 $dropShadow;
				margin: auto 0 0 auto;
			}

			.viewInvoice {
				color: var(--primary-color);
			}
		}
	}

	.buttonWrapper {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: end;
	}
}