#sulo-shipping-settings {
	max-width:  $dashboard-content-width;
	margin: 0 auto;
	// .dropdown-pane {
	// 	right: 0;
	// 	li {
	// 		padding: 0;
	// 	}
	// 	width: 5rem;
	// 	min-width: 5rem;
	// }
	.content-section {
		.section-title {
			flex-wrap: wrap;
			.subtitle {
				width: 100%;
				flex-wrap: wrap;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				.button {
					flex: 0 0 auto;
					justify-self: flex-end;
					margin-right: 0.5rem;
				}
			}
			p {
				margin-bottom: 0.5rem;
				margin-right: 0.5rem;
				max-width: 100%;
				@include breakpoint(medium) {
					// max-width: 70%;
				}
				@include breakpoint(medium) {
					max-width: 70%; 
				}
				// line-height: 1.1;
				// width: 100%;
				text-align: left;
				// max-width: 50%;
				// @include breakpoint(medium) {
				// 	text-align: right;
				// 	width: auto;
				// }
			}
		}
	}

	.section-container {
		p > span {
			color: $dark-gray;
		}
		.flex-row {
			justify-content: space-between;
			> :first-child {
				margin-right: 1rem;
			}
			.button {
				flex: 0 0 auto;
			}
		}
		&.section-container--shipping-rules {
			position: relative;
			// margin-bottom: 0;
			// border-bottom: $global-border;
			> .row {
				// margin-bottom: 2rem;
			}
			.shipping-rule-card {
				.shipping-rule-card-header {
					display: flex;
					justify-content: space-between;
					margin-top: -0.5rem;
					.edit-menu {
						padding: 0.5rem $global-padding;
						// position: absolute;
						flex: 0 0 auto;
						right: 0;
						top: 0;
						color: $dark-gray;
						&:hover {
							// color: $body-font-color;
						}
					}
					// padding: 0.75rem 1rem;
					label {
						// font-family: $header-font-family-sans-serif;
						// font-weight: $global-weight-bold;
						// color: $dark-gray;
						// text-transform: uppercase;
						// font-size:  90%;
					}
				}
				 .shipping-rule-card-footer {
				 	padding-top: 1rem;
				 	text-align: right;
				 	display: flex;
				 	flex-direction: row-reverse;
				 	justify-content: space-between;
				 	.button.alert {
				 		border: none;
				 	}
				 	
				 	.button {
						// margin: 0;
					}	
				 }

				.table {
					table-layout: fixed;
					margin-bottom: 0;
				}
				.thead {
					border-top: none;
				}
				.tr, .tbody, .thead {
					border-right: none;
					border-left: none;
				}
				.th {
					padding: 0.5rem 1rem;
					color: $dark-gray;
					font-size: 80%;
				}
				.td {
					padding: 0.75rem 1rem;
				}
			}
		}
	}
	.reveal {

	}

	.reveal.shipping-rules-modal {
		overflow: hidden;
		height: 100vh;
		min-height: 30rem;
		max-height: 40rem;
		padding-left: 0;
		padding-right: 0;
		top:5rem;
		// min-height: 60vh;
		display: flex;
		flex-direction: column;
		small {
			color: $dark-gray;
		}
		.section-title {
			padding: 0 1rem;
			margin: 0;
			a.close-button {
				position: inherit;
			}
			flex: 0 0 auto;
			align-items: flex-start;
		}
		.section-container {
			position: relative;
			height: 100%;
			width: 100%;
			display: flex;

			.section-content {
				overflow-y:  auto;
				&::-webkit-scrollbar {
					width: 1px;
						// background: $black;
				}
				&::-webkit-scrollbar-track {
					background: $white;
				}
				&::-webkit-scrollbar-thumb {
					background: $medium-gray;//map-get($foundation-palette,primary);
				}
				.action-buttons-container {
					display: flex;
					flex: 1 0 auto;
					align-items: flex-end;
					.button {
						margin-top: 1rem;
						margin-bottom: 0;
					}
				}
				&.section-content--rates {
					.action-buttons-container {
						justify-content: space-between;
					}
				}
			}
		}
		.section-content {
			position: absolute;
			flex: 1;
			padding: 0 1rem;
			height: 100%;
			width: 100%;
			left: 0;
			top: 0;
			flex: 1;
			display: flex;
			flex-direction: column;
			// justify-content: flex-start;
			opacity: 0;
			transition: left .37s ease-out, opacity .37s ease-out;
			.country-list {
				display: flex;
				> * {
					margin-right: 0.5rem;
				}
				margin-bottom: 1rem;
				border-bottom: $global-border-secondary;
				label {
					font-weight: $global-weight-normal;
					// color: $body-font-color;
					text-transform: uppercase;
					// font-size: 90%;
				}
			}
			&.is-active {
				opacity: 1;
			}
			.row {
				flex: 0 0 auto !important;
				margin: 0;
			}
			&:first-child {
				left: -100%;
				// margin-right: 1rem;
				&.is-active {
					left: 0;
					// margin-right: 0;
				}
			}
			&:last-child {
				left: 100%;
				// margin-left: 1rem;
				&.is-active {
					left: 0;
					// margin-left: 0;
				}
			}
			input {
				margin-bottom: 0;
				&[type="number"] {
					// max-width: 10rem;
				}
			}
			p {
				// margin-bottom: 0.25rem;
			}
			.row {
				margin-bottom: 1rem;
				flex: 1 0 auto;
				.column {
					// flex: 1 0 auto;
					&:first-child {
						padding-left: 0;
					}
					&:last-child {
						padding-right: 0;
					}
				}
			}
			// .switch-container {
			// 	margin-top: 2rem;
			// 	flex: 0 0 auto;
			// }
		}
		.menu.vertical {
			overflow-y: scroll;
			border: $global-border;
			max-height: 100%;
			border-bottom: none;
			// padding: 0;
			// flex: 1;
			li {
				padding: 0.5rem 0.75rem;
				border-bottom: $global-border-secondary;
				&:last-child {
					border-bottom: $global-border;
				}
				font-size: 90%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				a.icon {
					padding: 0;
					opacity: 0.3;
					// height: 12px;
					// width: 12px;
				}
				&:hover {
					background: rgba($light-gray, 0.2);
				}
			}
			&::-webkit-scrollbar {
				width: 1px;
					// background: $black;
			}
			&::-webkit-scrollbar-track {
				background: $white;
			}
			&::-webkit-scrollbar-thumb {
				background: $medium-gray;//map-get($foundation-palette,primary);
			}
		}
		// option {
			// border-bottom: $global-border;
		// }
		.continent {
			font-weight: $global-weight-bold;
			margin-top: 1rem;
			font-size: 90%;
			border-bottom: $global-border-secondary

			// color: $dark-gray;
			// padding-left: 1rem;
		}
		.country {
			margin-left: 1rem;
			font-size: 90%;
			// > * {
				border-bottom: $global-border-secondary;
			// }
		}
		.action-buttons {
			flex: 1 0 auto;
			align-items: flex-end;
			.button {
				flex: 0 0 auto;
			}
		}
		.action-buttons-container {
			flex: 1 0 auto;
			align-items: flex-end;
			> * {
				flex: 0 0 auto;
			}
			.button {
				flex: 0 0 auto;
				margin-right: 0;
				// margin-bottom: 0.5rem;
			}
		}
	}
}