@tailwind base;
@tailwind components;
@tailwind utilities;

.play-wrapper svg.poster-icon {
	margin: 0 auto;
}
.video-js .vjs-control-bar {
	height: unset !important;
	align-items: center;
	justify-content: space-between;
}

label {
	@apply cursor-pointer;
}

.pfont {
	font-family: "open sans condensed", Helvetica;
}

.btn-primary {
	appearance: auto;
	@apply text-sm px-5 py-2.5;
	@apply cursor-pointer py-0 px-4 py-2 border border-transparent text-center rounded-lg shadow-sm text-base font-medium text-white bg-exerovet-600 hover:bg-exerovet-700;
}

.btn-red {
	appearance: auto;
	@apply text-sm px-5 py-2.5;
	@apply cursor-pointer py-0 px-4 py-2 border border-transparent text-center rounded-lg shadow-sm text-base font-medium text-white bg-red-600 hover:bg-red-700;
}

.btn-gray {
	appearance: auto;
	@apply text-sm px-5 py-2.5;
	@apply cursor-pointer py-0 px-4 py-2 border border-transparent text-center rounded-lg shadow-sm text-base font-medium text-white bg-gray-600 hover:bg-gray-700;
}
.btn-light-gray {
	appearance: auto;
	@apply text-sm px-5 py-2.5;
	@apply cursor-pointer py-0 px-4 py-2 border border-transparent text-center rounded-lg shadow-sm text-base font-medium text-black bg-gray-200 hover:bg-gray-300;
}

.btn-blue {
	appearance: auto;
	@apply text-sm px-5 py-2.5;
	@apply cursor-pointer px-4 py-2 border border-transparent text-center rounded-lg shadow-sm text-base font-medium text-white bg-blue-600 hover:bg-blue-700;
}

.btn-red:disabled,
.btn-gray:disabled,
.btn-light-gray:disabled,
.btn-blue:disabled,
.btn-primary:disabled {
	@apply opacity-40 cursor-not-allowed;
}

.btn-xs {
	@apply px-3 py-2 text-xs;
}
.btn-sm {
	@apply px-3 py-2 text-sm;
}
.btn-lg {
	@apply px-5 py-3 text-base;
}
.btn-xl {
	@apply text-base px-6 py-3.5;
}

.active-nav-link {
	color: white;
	@apply bg-exerovet-600;
}

.input-field {
	@apply appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-exerovet-500 focus:border-exerovet-500 focus:z-10 sm:text-sm;
}

.file-field {
	@apply p-0 cursor-pointer file:cursor-pointer file:mr-4 file:py-2 file:px-4 file:rounded-r-md file:border-0 file:text-sm file:font-semibold file:bg-gray-200 file:text-slate-700 hover:file:bg-slate-300;
}

input[type="radio"] {
	@apply text-exerovet-600 focus:ring-exerovet-500;
}

.input-field:disabled {
	@apply bg-gray-200 text-gray-400 cursor-not-allowed;
}

.field_with_errors label {
	@apply text-red-500;
}
.field_with_errors .input-field {
	@apply border-red-500;
}

.input-checkbox {
	@apply h-4 w-4 text-exerovet-600 focus:ring-exerovet-500 border-gray-300 rounded;
}

.input-toggle {
	@apply sr-only;
}
.input-toggle-switch {
	@apply w-11 h-6 bg-gray-200 rounded-full after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all;
}
.input-toggle:checked ~ .input-toggle-switch:after {
	@apply translate-x-full border-white;
}
.input-toggle:checked ~ .input-toggle-switch {
	@apply bg-exerovet-600;
}
.toggle-switch-label {
	@apply relative inline-flex items-center mb-4 cursor-pointer;
}
.toggle-switch-label span {
	@apply ml-3 text-sm font-medium text-gray-900;
}

.radio-card {
	@apply transition-colors bg-white hover:bg-exerovet-400 hover:text-white p-6 text-left rounded-md shadow-md mb-4;
}

input[type="radio"]:checked + label.radio-card {
	@apply bg-exerovet-600 text-white;
}

input[type="radio"].subscription-plan:checked + label > div {
	@apply shadow-xl shadow-exerovet-600/25 text-white scale-105;
}

.index-card {
	@apply transition-colors bg-white hover:bg-exerovet-400 hover:text-white p-6 text-left rounded-md shadow-md mb-4;
}

.index-header {
	@apply text-xl text-center font-bold my-8 text-exerovet-600;
}

.gold-pill {
	@apply bg-amber-400 text-sm text-white rounded-lg py-1 px-2;
}
.silver-pill {
	@apply bg-slate-200 text-sm text-slate-700 rounded-lg py-1 px-2;
}
.bronze-pill {
	@apply bg-yellow-700 text-sm text-white rounded-lg py-1 px-2;
}

.red-pill {
	@apply bg-red-500 text-sm text-white rounded-lg py-1 px-2;
}

.blue-pill {
	@apply bg-blue-500 text-sm text-white rounded-lg py-1 px-2;
}

.green-pill {
	@apply bg-green-500 text-sm text-white rounded-lg py-1 px-2;
}

.gray-pill {
	@apply bg-gray-500 text-sm text-white rounded-lg py-1 px-2;
}
.gray-pill.xs {
	@apply bg-gray-500 text-xs text-white rounded-lg py-1 px-2;
}

.slide-in-right {
	transform: translateX(100%);
	-webkit-transform: translateX(100%);
	animation: slide-in 0.3s forwards;
	-webkit-animation: slide-in 0.3s forwards;
}

@keyframes slide-in-right {
	100% {
		transform: translateX(0%);
	}
}

@-webkit-keyframes slide-in-right {
	100% {
		-webkit-transform: translateX(0%);
	}
}

.slide-in {
	transform: translateX(-100%);
	-webkit-transform: translateX(-100%);
	animation: slide-in 0.3s forwards;
	-webkit-animation: slide-in 0.3s forwards;
}
@keyframes slide-in {
	100% {
		transform: translateX(0%);
	}
}

@-webkit-keyframes slide-in {
	100% {
		-webkit-transform: translateX(0%);
	}
}

.slide-out {
	animation: slide-out 0.2s forwards;
	-webkit-animation: slide-out 0.2s forwards;
}

@keyframes slide-out {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(-100%);
	}
}

@-webkit-keyframes slide-out {
	0% {
		-webkit-transform: translateX(0%);
	}
	100% {
		-webkit-transform: translateX(-100%);
	}
}

.slide-out-right {
	animation: slide-out-right 0.5s forwards;
	-webkit-animation: slide-out-right 0.5s forwards;
}

@keyframes slide-out-right {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(150%);
	}
}

@-webkit-keyframes slide-out-right {
	0% {
		-webkit-transform: translateX(0%);
	}
	100% {
		-webkit-transform: translateX(150%);
	}
}

@layer components {
}

.media-control[data-media-control]
	.media-control-layer[data-controls]
	.bar-container[data-seekbar]
	.bar-background[data-seekbar]
	.bar-fill-2[data-seekbar] {
	background-color: rgb(132, 50, 155) !important;
}
.media-control[data-media-control]
	.media-control-layer[data-controls]
	.bar-container[data-seekbar]
	.bar-scrubber[data-seekbar] {
	top: 5px !important;
}
.media-control[data-media-control]
	.media-control-layer[data-controls]
	.bar-container[data-seekbar]
	.bar-background[data-seekbar] {
	height: 6px !important;
}
.media-control[data-media-control]
	.media-control-layer[data-controls]
	.bar-container[data-seekbar]
	.bar-scrubber[data-seekbar]
	.bar-scrubber-icon[data-seekbar] {
	top: 4px !important;
	width: 12px !important;
	height: 12px !important;
}
@font-face {
  font-family: 'open sans condensed';
  src: url('https://app.exerovet.com/assets/opensanscondensed-4c8e81b2e07cd5e84c6e1507617ad49594724409668586909b1d5b619c25475b.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'open sans condensed';
  src: url('https://app.exerovet.com/assets/opensanscondensedbold-501c5cb6d4c23319c8929f4e7b05ce50194bf3a422d07cab5bbcc7c7d8956727.woff2') format('woff2');
  font-weight: bold;
  font-style: bold;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */