/*
  NOTE: This CSS file is maintained for legacy purposes.
  Wherever possible, use Tailwind CSS for styling instead of custom CSS.
  The goal is to transition fully to Tailwind and phase out these styles over time.
*/

.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  padding: 6px 12px;
  font-size: 16px;
  line-height: 1.428571429;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.btn:focus, .btn.focus, .btn:active:focus, .btn:active.focus, .btn.active:focus, .btn.active.focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

.btn:hover, .btn:focus, .btn.focus {
  color: #333;
  text-decoration: none;
}

.btn:active, .btn.active {
  background-image: none;
  outline: 0;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn.disabled, .btn[disabled] {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: 0.65;
  box-shadow: none;
}

a.btn.disabled {
  pointer-events: none;
}

.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

.btn-default:focus, .btn-default.focus {
  color: #333;
  background-color: rgb(229.5, 229.5, 229.5);
  border-color: rgb(140.25, 140.25, 140.25);
}

.btn-default:hover {
  color: #333;
  background-color: rgb(229.5, 229.5, 229.5);
  border-color: rgb(173.4, 173.4, 173.4);
}

.btn-default:active, .btn-default.active {
  color: #333;
  background-color: rgb(229.5, 229.5, 229.5);
  background-image: none;
  border-color: rgb(173.4, 173.4, 173.4);
}

.btn-default:active:hover, .btn-default:active:focus, .btn-default:active.focus, .btn-default.active:hover, .btn-default.active:focus, .btn-default.active.focus {
  color: #333;
  background-color: rgb(211.65, 211.65, 211.65);
  border-color: rgb(140.25, 140.25, 140.25);
}

.btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled.focus, .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled].focus {
  background-color: #fff;
  border-color: #ccc;
}

.btn-link {
  font-weight: 400;
  color: #33bbff;
  border-radius: 0;
}

.btn-link, .btn-link:active, .btn-link.active, .btn-link[disabled] {
  background-color: transparent;
  box-shadow: none;
}

.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active {
  border-color: transparent;
}

.btn-link:hover, .btn-link:focus {
  color: #33bbff;
  text-decoration: underline;
  background-color: transparent;
}

.btn-link[disabled]:hover, .btn-link[disabled]:focus {
  color: rgb(119.085, 119.085, 119.085);
  text-decoration: none;
}

.btn {
  color: white;
  font-weight: 500;
}

.btn,
.btn-visit {
  background: #999;
}

.btn-visit,
.btn-visit:hover,
.btn-visit:focus,
.btn-visit:active {
  color: white;
  background-color: #33bbff;
}

.btn-link {
  background: none;
}

.btn-amazon,
.btn-amazon:hover,
.btn-amazon:active,
.btn-amazon:focus {
  padding-left: 40px;
  color: white;
  background-color: #ffaa00;
  background-image: url("../png/icon-buy-bf71fb6f.png");
  background-repeat: no-repeat;
  background-position: 12px 50%;
  background-size: 16px;
}

.btn-watch,
.btn-watch:hover,
.btn-watch:active,
.btn-watch:focus {
  padding-left: 40px;
  color: white;
  background-color: #33bbff;
  background-image: url("../svg/icon-watch-video-a7c3fd9b.svg");
  background-repeat: no-repeat;
  background-position: 12px 50%;
  background-size: 16px;
}

.btn-watch.black {
  background-color: black;
  border-radius: 9px;
  border-color: #575757;
  color: #fff;
}

.btn-company {
  display: inline-block;
  padding-left: 46px;
  color: #33bbff;
  font-family: "Avenir Next", sans-serif;
  font-weight: 100;
  font-weight: 100;
  color: white;
  background-color: #0b2633;
  background-image: url("../png/icon-buy-bf71fb6f.png");
  background-repeat: no-repeat;
  background-position: 12px 50%;
}

.btn.mail {
  background-image: url("../svg/icon-mail-442ac868.svg");
}

.btn.support {
  background-image: url("../svg/icon-support-4c3f2880.svg");
}

.btn.download {
  background-image: url("../svg/icon-download-b1a35be4.svg");
}

.btn-company:hover,
.btn-company:active,
.btn-company:focus,
.btn-video:hover,
.btn-video:active,
.btn-video:focus {
  color: #33bbff;
}

.btn-amazon:hover,
.btn-amazon:active,
.btn-amazon:focus {
  background-color: #ffbb33;
}

.btn-video {
  padding: 7px 17px;
  padding-left: 40px;
  color: #33bbff;
  background-color: #0b2633;
  background-image: url("../svg/icon-video-f4d3f345.svg");
  background-repeat: no-repeat;
  background-position: 12px 50%;
}

.btn-download {
  padding: 7px 17px;
  padding-left: 40px;
  color: #33bbff;
  background-color: #0b2633;
  background-image: url("../svg/icon-download-b1a35be4.svg");
  background-repeat: no-repeat;
  background-position: 12px 50%;
}

.btn-download:hover,
.btn-download:active,
.btn-download:focus {
  color: #33bbff;
  background-image: url("../svg/icon-download-b1a35be4.svg");
}

.btn-support {
  background: #33bbff;
}

.btn-support:hover {
  background: #00aaff;
  color: white;
}

.btn-more {
  color: white;
  background: #33bbff;
  padding: 7px 17px;
}

.btn-more.light {
  color: #33bbff;
  background-color: #ebf9ff;
}

.btn-more.dark {
  background-color: #0b2633;
  color: #33bbff;
}

.btn-more:hover,
.btn-more:focus,
.btn-more:active {
  background-color: #555555;
  color: white;
  transition: background-color 0.7s ease;
}

.btn-trial,
.btn-trial:hover {
  color: white;
  background: #33bbff;
  font-size: 20px;
  padding: 13px 33px;
  margin-top: 0;
  margin-bottom: 0;
}
.btn-trial svg.download,
.btn-trial:hover svg.download {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}