/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.ui-bevel-t {
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
  corner-shape: bevel;
}

.ui-winhead h1,
.ui-winhead h2,
.ui-winhead h3 {
	font-size: 24px;
	text-transform: uppercase;
	font-weight: 800;
  position: relative;
  top: -16px;
  right: 1px;
}

.ui-winhead-text-4xl h1 {
	font-size: 36px;
	text-transform: uppercase;
	font-weight: 800;
  position: relative;
  top: -32px;
  right: 2px;
}

.ui-bevel {
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 16px;
  corner-shape: bevel;
}

.ui-bevel-t {
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
  corner-shape: bevel;
}

.ui-bevel-tl {
	border-top-left-radius: 16px;
  corner-shape: bevel;
}

.ui-bevel-tr {
	border-top-right-radius: 16px;
  corner-shape: bevel;
}

.ui-bevel-b {
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 16px;
  corner-shape: bevel;
}

.ui-bevel-bl {
	border-bottom-left-radius: 16px;
  corner-shape: bevel;
}

.ui-bevel-br {
	border-bottom-right-radius: 16px;
  corner-shape: bevel;
}

.ui-btn {
	cursor: pointer;
	color: #FFFFFF;
	border-width: 2px;
	border-color: #FFFFFF;
	border-top-right-radius: 16px;
	border-bottom-left-radius: 16px;
  corner-shape: bevel;
  padding: 8px 16px;
  margin: 0 0 0 16px;
  transition-duration: 150ms;
  position: relative;
}

.ui-btn:hover {
	color: #5F5F5F;
	border-color: #5F5F5F;
}

.ui-btn:active {
  transform: translate(2px, 2px);
}