.aws-main {
  .error {
	pre {
	  background: #eaeaea;
	  background: rgba(0, 0, 0, 0.07);
	  display: block;
	  padding: 10px 15px;

	  code {
		padding: 0;
		background: none;
	  }
	}
  }

  .as3cf-notice, .error {
	max-width: 935px;
  }

  .updated {
	display: none;
	&.as3cf-notice, &.show {
	  display: block;
	}
  }
}

.as3cf-settings {
  position: relative;
  width: 650px;
  min-height: 800px;

  .as3cf-main-settings {
	display: none;
	p {
	  font-size: 13px;
	  a {
		color: #444;
	  }
	}
  }
  &.as3cf-has-bucket {
	.as3cf-bucket-select {
	  display: none;
	}
	.as3cf-main-settings {
	  display: block;
	}
  }

  .object-prefix-desc {
  	em {
  		white-space: nowrap;
  	}
  }

  .as3cf-url-preview-wrap {
	background: #ffffff;
	text-align: center;
	padding: 20px 20px 10px;
	max-width: 610px;
  	width: 100%;
	.as3cf-url-preview {
	  margin-top: 5px;
	  overflow-x: scroll;
	  padding-bottom: 15px;
	}
	span {
	  color: #aaa;
	  text-transform: uppercase;
	  font-weight: bold;
	}
  }

  .as3cf-ssl {
	p.info {
	  margin-top: 10px;
	  padding: 0;
	}
  }

  .as3cf-radio-group {
	label {
	  display: block;
	  margin-bottom: 10px;
	  &.disabled, &.disabled p {
		color: #bbbbbb;
		cursor: default;
	  }
	}

	p {
	  padding-left: 25px;
	  color: #6b6b6b;
	  margin: 0;
	  font-size: 12px;
	  &.as3cf-setting {
		margin-top: 5px;
	  }
	}
  }

  .as3cf-switch {
	position: relative;

	&.disabled {
	  span {
		cursor: default;
		margin: 1px 0 0 0;
	  }
	  span.checked {
		background: #F1F1F1;
		border: 1px solid #dddddd;
		color: #a3a3a3;
	  }
	}
	span {
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	  cursor: pointer;
	  float: left;
	  display: inline-block;
	  height: 100%;
	  font-size: 12px;
	  line-height: 20px;
	  border-radius: 2px;
	  -webkit-border-radius: 2px;
	  font-weight: bold;
	  padding: 4px 8px;
	  background: #F1F1F1;
	  border: 1px solid #dddddd;
	  color: #CCCCCC;
	  margin: 1px -1px 0;
	  z-index: 1;

	  &.checked {
		background: #ffffff;
		border-color: #E4E4E4;
		color: #373737;
		padding: 5px 10px;
		margin: 0;
		z-index: 2;
	  }
	}
	input[type="checkbox"] {
	  position: absolute !important;
	  top: 0;
	  left: 0;
	  opacity: 0;
	  filter: alpha(opacity=0);
	  z-index: -1;
	}
  }

  .as3cf-setting {
	&.hide{
	  display: none;
	}
  }

  .as3cf-bucket-actions {
	position: absolute;
	right: 0;
	top: 2px;

	.as3cf-cancel-bucket-select-wrap {
	  display: none;
	  &:after {
		content: " | "
	  }
	}
  }

  .as3cf-bucket-select {
	&.manual {
	  .as3cf-manual-bucket-toggle,
	  .as3cf-refresh-buckets,
	  .as3cf-bucket-list-wrapper {
		display: none;
	  }
	  .as3cf-bucket-list-toggle,
	  .as3cf-manual-save-bucket-wrapper {
		display: block;
	  }

	  .as3cf-cancel-bucket-select-wrap {
		&:after {
		  content: ""
		}
	  }
	}

	.as3cf-manual-bucket-toggle,
	.as3cf-bucket-list-wrapper {
	  display: block;
	}

	.as3cf-refresh-buckets {
	  display: inline;
	}

	.as3cf-bucket-list-toggle,
	.as3cf-manual-save-bucket-wrapper {
	  display: none;
	}
  }

  .as3cf-bucket-list-wrapper {
	background: #fff;
	padding: 15px 20px;
	margin-bottom: 2em;

	.as3cf-bucket-list {
	  max-height: 300px;
	  overflow: auto;
	  margin: 0;

	  li {
		font-size: 14px;
		padding: 10px 0;
	  }
	  a {
		color: #444;
		text-decoration: none;
		&:hover, &.selected {
		  color: #0074A2;
		}
		&.selected {
		  font-weight: bold;
		}
		.bucket {
		  float: left;
		  clear: both;
		  .dashicons {
			margin-right: 5px;
		  }
		}
		.spinner {
		  float: left;
		  background-size: 15px 15px
		}
	  }
	  &.saving {
		opacity: 0.5;
	  }
	}
  }

  input[type="text"].as3cf-bucket-name {
	width: 80%;
  }

  select.bucket {
	margin-bottom: 5px;
	width: 380px;
  }

  .form-table {
	td {
	  padding-left: 0;
	  padding-right: 0;
	  &:first-child {
		vertical-align: top;
		min-width: 120px;
	  }
	}
	h3 {
	  font-weight: normal;
	  text-transform: uppercase;
	  margin: 0;
	}
	h4 {
	  margin: 0;
	}
	.as3cf-border-bottom td {
	  border-bottom: 1px solid #ddd;
	}
  }

  .as3cf-active-bucket {
	font-weight: bold;
	margin-right: 10px;
  }

  .tooltip {
	position: relative;
	z-index: 2;
	cursor: pointer;
  }

  /* Hide the tooltip content by default */
  .tooltip:before,
  .tooltip:after {
	visibility: hidden;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	opacity: 0;
	pointer-events: none;
  }

  /* Position tooltip above the element */
  .tooltip:before {
	position: absolute;
	bottom: 150%;
	left: 50%;
	margin-bottom: 5px;
	margin-left: -250px;
	padding: 10px;
	width: 500px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color: #000;
	background-color: hsla(0, 0%, 20%, 0.9);
	color: #fff;
	content: attr(data-tooltip);
	text-align: center;
	font-size: 14px;
	line-height: 1.3;
  }

  /* Triangle hack to make tooltip look like a speech bubble */
  .tooltip:after {
	position: absolute;
	bottom: 150%;
	left: 50%;
	margin-left: -5px;
	width: 0;
	border-top: 5px solid #000;
	border-top: 5px solid hsla(0, 0%, 20%, 0.9);
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
	content: " ";
	font-size: 0;
	line-height: 0;
  }

  /* Show tooltip content on hover */
  .tooltip:hover:before,
  .tooltip:hover:after {
	visibility: visible;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity: 1;
  }
}

.as3cf-banner {
  img {
	display: block;
  }
}

.as3cf-sidebar {
  position: absolute;
  top: 17px;
  right: -312px;
  width: 292px;

  .block {
	padding: 20px;
	border: 1px solid #ccc;
  }

  .subscribe {
	border-top: none;

	h2 {
	  padding: 0;
	  margin: 0;
	  margin-bottom: 0.5em;
	  color: #666;
	  font-size: 20px;
	  line-height: 1.2em;
	  float: none;
	}

	h3 {
	  font-size: 16px;
	  margin: 0;
	}

	p {
	  margin: 0;
	}

	.intro {
	  margin-bottom: 1em;
	  line-height: 1.4;
	}

	ul {
	  margin-left: 20px;
	  list-style-type: disc;
	}

	li {
	  line-height: 1.4;
	}

	.links {
	  margin-bottom: 2em;

	  a {
		text-decoration: none;
	  }
	}

	.promise {
	  color: #999;
	  font-size: 12px;
	  line-height: 1.4em;
	}

	.field {
	  margin-bottom: 0.5em;

	  p {
		margin-bottom: 0.3em;
	  }

	  &.submit-button {
		margin-bottom: 1em;
	  }
	}
  }

  .credits {
	border-top: 0;

	h4 {
	  font-size: 16px;
	  margin-top: 0;
	  margin-bottom: 10px;
	}

	ul {
	  margin: 0;
	}

	li {
	  overflow: hidden;
	}

	li:last-child {
	  margin-bottom: 0;
	}

	img {
	  float: left;
	  margin-right: 10px;
	}

	span {
	  float: left;
	  display: block;
	  line-height: 32px;
	}

	a {
	  display: block;
	  text-decoration: none;
	  color: #444;
	  font-size: 16px;
	  text-align: center;

	  &:hover {
		color: #888;
	  }
	}
  }

  @media (min--moz-device-pixel-ratio: 1.3),
  (-o-min-device-pixel-ratio: 2.6/2),
  (-webkit-min-device-pixel-ratio: 1.3),
  (min-device-pixel-ratio: 1.3),
  (min-resolution: 1.3dppx) {

	.as3cf-banner {
	  background-image: url(../img/snail@2x.jpg);
	  background-size: 292px 165px;
	  width: 292px;
	  height: 165px;
	  display: block;

	  img {
		display: none;
	  }
	}
  }

  @media screen and (max-width: 1052px) {
	position: relative;
	top: auto;
	right: auto;
	margin-top: 50px;
  }
}