@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'jquery.ui.tabs.css';
@import 'tailwindcss/utilities';

html {
	@apply h-full bg-gray-900;
}

body {
	@apply text-gray-200 antialiased text-base leading-6 font-sans h-full;
}

.wrapper {
	@apply min-h-full relative;
}

img { @apply border-none; }

header {
	@apply relative pb-32 overflow-hidden;
}
header .logo svg,
header .logo img {
	@apply h-8 w-auto;
}
header .background {
	@apply absolute left-0 -top-32 -z-10 transform rotate-180 opacity-75;
}
header .gradient {
	@apply absolute bottom-0 h-full w-full bg-gradient-to-b from-transparent to-gray-900 z-0;
}
header .inner {
	@apply mx-auto max-w-7xl px-8 z-10;
}
header .inner .top {
	@apply relative flex flex-wrap items-center justify-between py-5;
}

header .signin-container {
	@apply ml-4 flex items-center pr-0.5 space-x-4 text-primary-600;
}
header .signin-container .signin {
	@apply relative rounded-md bg-primary-500 text-white font-bold text-xs py-1 px-2 hover:bg-primary-600;
}
header .signin-container .logged-in-controls {
	@apply flex items-center space-x-4;
}
header .signin-container .logged-in-controls span {
	@apply flex items-center space-x-1.5;
}
header .signin-container .logged-in-controls img.icon {
	@apply h-6 w-6;
}
header .signin-container .logged-in-controls a {
	@apply border-none;
}

header .bottom {
	@apply relative w-full py-5 border-t border-white/20;
}
header .bottom .container {
	@apply grid grid-cols-4 items-center gap-8;
}
header .bottom .left {
	@apply col-span-3 block;
}

.nav-main ul {
    @apply m-0 p-0 flex space-x-4;
}
.nav-main ul li a {
	@apply border-none text-primary-100 text-sm font-medium rounded-full bg-white bg-opacity-0 px-3 py-2 hover:bg-opacity-10 transition;
}
.nav-main ul li a.active {
    @apply text-white text-sm font-medium rounded-full bg-white bg-opacity-10 px-3 py-2 hover:bg-opacity-10 transition;
}

main {
	@apply -mt-24 pb-8;
}
main .wrapper {
	@apply mx-auto max-w-7xl px-8;
}
main .body {
	@apply grid items-start grid-cols-6 gap-8;
}
main .body .content {
	@apply col-span-5;
}
main .body .content-card {
	@apply p-6 rounded-xl bg-gray-800 highlight-white/10;
}

.nav-sub ul li a {
	@apply flex items-center px-3 py-2 text-sm font-medium rounded-full border-none text-gray-300 hover:bg-gray-700 hover:text-gray-100 transition;
}
.nav-sub .spacer {
	@apply h-6 border-none;
}
.nav-sub .menu_category {
	@apply px-3 py-1 text-xs uppercase tracking-wide text-primary-800 font-semibold;
}

footer {
	@apply py-8 px-3 text-sm text-gray-500 text-left space-x-6;
}

a {
	@apply text-primary-600 hover:text-primary-500 no-underline border-b border-primary-600 hover:border-primary-500 focus:outline-none;
}
a.delete,
a.edit {
	@apply text-gray-400 border-none;
}
a.delete:hover {
	@apply text-danger-500;
}
a.edit:hover {
	@apply text-info-500;
}
a.image {
	@apply inline border-none hover:border-none no-underline hover:no-underline;
}
img.image {
	@apply inline;
}

h1, h2, h3, h4, p {
	@apply mb-4;
}
h1 {
	@apply text-4xl font-extrabold tracking-tight;
}
h2 {
	@apply text-3xl font-bold tracking-tight;
}
h3 {
	@apply text-2xl font-semibold;
}
h4 {
	@apply text-xl font-medium;
}
p {
	@apply text-base leading-6;
}

.line_height_13 { @apply leading-snug; }
.line_height_18 { @apply leading-loose; }

.fontLarge	{ @apply text-xl; }
.fontMedium	{ @apply text-lg; }
.fontNormal { @apply text-base; }
.fontSmall	{ @apply text-sm; }
.fontTiny	{ @apply text-xs; }

.nobold	{ @apply font-normal; }
.bold { @apply font-semibold; }
strong { @apply font-semibold; }
em { @apply italic; }

.align_right { @apply text-right; }

.loader {
	@apply text-center h-14;
}

hr {
	@apply border-t border-gray-700 w-full my-1.5 mx-auto h-0;
}

.page-head { @apply text-primary-500; }
.page-subhead { @apply text-primary-700; }

.gray { @apply text-gray-400; }
.red { @apply text-danger-500; }
.orange	{ @apply text-warning-500; }
.green { @apply text-success-500; }
.blue { @apply text-info-500; }
.alt { @apply bg-gray-900; }

input[type=text],
input[type=password],
input[type=email],
textarea,
select {
	@apply rounded-lg border border-gray-600 bg-gray-700 ring-1 ring-transparent shadow-sm focus:border-primary-600 focus:ring-primary-600 focus:text-white focus:outline-none focus:bg-gray-700/50;
}
input[type=text],
input[type=password],
input[type=email] {
	@apply w-72;
}
textarea {
	@apply w-[500px];
}
input[type=checkbox] {
	@apply rounded bg-gray-700 checked:bg-primary-600 border-gray-600 focus:ring-primary-900 focus:ring-offset-gray-800 checked:hover:bg-primary-600 focus:text-primary-600;
}
input[type=radio] {
	@apply rounded-full bg-gray-700 checked:bg-primary-600 border-gray-600 focus:ring-primary-900 focus:ring-offset-gray-800 checked:hover:bg-primary-600 focus:text-primary-600;
}
input[type=file] {
	@apply file:cursor-pointer file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary-900 file:text-primary-400 hover:file:bg-primary-800 hover:file:text-primary-300;
}

input.small,
select.small {
    @apply w-12;
}
input.medium,
select.medium {
    @apply w-24;
}
input.medium-large,
select.medium-large {
    @apply w-36;
}
input.large,
select.large {
    @apply w-56;
}

kbd {
	@apply flex items-center text-sm font-bold font-sans space-x-2 mb-1.5;
}

.cell-label {
	@apply w-32 font-bold text-base text-right;
}
.cell-spacer {
    @apply w-5;
}

.flash_message {
	@apply -mx-6 -mt-6 mb-6 font-semibold border-b rounded-t-xl highlight-white/10;
}
.flash_message p {
	@apply m-0 px-6 py-3;
}
.flash-success {
	@apply bg-success-900 border-success-800 text-success-400;
}
.flash-error {
	@apply bg-danger-900 border-danger-800 text-danger-400;
}
.flash-info {
	@apply bg-info-900 border-info-800 text-info-300;
}

table {
	@apply text-base;
}

.table100 { @apply w-full; }
.table75 { @apply w-3/4; }
.table560px	{ @apply w-[500px]; }

tr.alt td, tr.light_gray {
	@apply bg-gray-900;
}

th {
	@apply text-center text-sm uppercase font-semibold;
}

td {
	@apply p-1 align-middle;
}
td.align_top { @apply align-top; }
td.align_bottom { @apply align-bottom; }
td.align_middle { @apply align-middle; }
td.align_left { @apply text-left; }
td.align_right { @apply text-right; }
td.align_center { @apply text-center; }

.col_15 { @apply w-4; }
.col_30 { @apply w-8; }
.col_40 { @apply w-10; }
.col_50 { @apply w-14; }
.col_75 { @apply w-[75px]; }
.col_100 { @apply w-24; }
.col_150 { @apply w-40; }
.col_200 { @apply w-52; }
.col_245 { @apply w-60; }
.col_260 { @apply w-64; }
.col_300 { @apply w-80; }

.col_20pct { @apply w-1/5; }
.col_25pct { @apply w-1/4; }
.col_30pct { @apply w-1/3; }
.col_40pct { @apply w-2/5; }
.col_50pct { @apply w-1/2; }
.col_60pct { @apply w-3/5; }

table.acp {
	@apply border border-gray-700;
}
.col1 {
	@apply text-lg text-right font-semibold;
}
.col2 {
	@apply font-semibold;
}

#acp-panel {
	@apply flex rounded-t-lg border border-b-0 border-gray-700 bg-gray-800 overflow-hidden shadow-xl;
}

#acp-panel .panelnav {
	@apply w-48;
}
#panelmenu {
	@apply list-none space-y-1 my-2;
}
#panelmenu li a {
	@apply flex items-center px-3 py-1.5 no-underline font-bold text-gray-500 border-y border-transparent hover:bg-primary-900 hover:text-primary-300 hover:border-y-primary-800;
}
#panelmenu li a span {
	@apply w-full;
}
#panelmenu li a.active {
	@apply bg-gray-700 text-primary-500 border-gray-700 hover:bg-gray-700 hover:text-primary-500 hover:border-gray-700;
}

#acp-panel .panel {
	@apply border-l border-b border-gray-700 rounded-bl-lg flex-1 bg-gray-700 p-4;
}

#online {
    @apply px-3 py-1.5 mb-8 border border-t-0 border-gray-700 rounded-b-lg bg-gray-800;
}

.count {
	@apply float-right font-semibold text-xs rounded-full p-1;
}

.panel-wrapper {
	@apply relative z-20;
}
.panel-overlay {
	@apply fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity backdrop-blur;
}
#panel {
	@apply fixed inset-0 z-10 overflow-y-auto p-20;
}
.panel-close {
	@apply absolute -right-10 -top-2 text-gray-500 hover:text-gray-200 p-2;
}
.panel-close > svg {
	@apply w-6 h-6 text-gray-500 hover:text-gray-200;
}
#panel .panel-body {
	@apply relative mx-auto max-w-xl transform rounded-xl bg-gray-900 shadow-2xl;
}
.panel-body h4 {
	@apply mt-4 mb-2 px-3 text-xs font-semibold text-gray-200;
}
.panel-body > ul {
	@apply scroll-py-2 divide-y divide-gray-500 divide-opacity-20;
}
.panel-body > ul > li {
	@apply p-2;
}
.panel-body > ul > li > ul {
	@apply p-0 text-sm;
}
.panel-body > ul > li > ul > li {
	@apply flex w-full cursor-default select-none items-center justify-between;
}
.panel-body > ul > li > ul > li > a {
	@apply flex w-full text-gray-400 hover:text-white border-none hover:bg-gray-800 rounded-lg px-3 py-2;
}
.panel-body a.edit {
	@apply shrink w-24 justify-end hover:bg-gray-900;
}
.panel-handle a,
.panel-handle a:hover {
	@apply focus:outline-none m-0 p-0 block;
}
.panel-handle a span {
	@apply block px-4;
}
.panel-handle .ui-icon {
	@apply p-0 mt-1 ml-1;
}

.panel-handle {
	@apply h-6 leading-6;
}

.panel-trigger {
	@apply block float-right w-32;
}

#panel-handle-left { @apply w-auto; }
#panel-handle-left li {
	@apply float-left mr-0.5;
}

.panel-notify-icon {
	@apply float-left mt-1.5 mr-1.5;
}

.panel-clear { @apply clear-both; }

.panel_1, .panel_2, .panel_3 { @apply w-[300px]; }
.panel_spacer { @apply w-8; }

.button-main {
    @apply py-1.5 px-6 bg-primary-600 text-white font-semibold border-2 border-transparent rounded-full transition hover:bg-gray-800 hover:text-primary-600 hover:border-primary-600 disabled:opacity-50 disabled:cursor-not-allowed;
}
.button-sec,
.button-small {
    @apply py-1.5 px-6 bg-gray-700 text-gray-300 font-semibold border-2 border-transparent rounded-full transition hover:bg-gray-800 hover:text-gray-200 hover:border-gray-600 disabled:opacity-50 disabled:cursor-not-allowed;
}

.button-small {
	@apply py-0.5 px-2 font-medium;
}

.clear_both { @apply clear-both; }
.clear_right { @apply clear-right; }
.clear_left { @apply clear-left; }

.float_left { @apply float-left; }
.float_right { @apply float-right; }

.top_p5em { @apply pt-2; }
.top_1em { @apply pt-4; }

.right_p5em { @apply pr-2; }
.right_1em { @apply pr-4; }

.left_p5em { @apply pl-2; }
.left_1em { @apply pl-4; }

.padding_all_p5em { @apply p-2; }

#comments p,
#news_blocks p,
.post_info,
.info-full,
#notes {
	@apply rounded-lg border border-gray-700 bg-gray-900 px-4 py-3;
}

#notes {
	@apply mb-8;
}

#notes p,
#notes h3,
.info-full p {
	@apply mb-0 leading-none;
}

.system_warning {
	@apply z-50 py-2 w-full text-center font-semibold bg-warning-600/50 text-warning-200 text-sm;
}

.upload-close {
	@apply !text-danger-500 rounded-l-lg hover:!bg-danger-500 hover:!text-white;
}

.activity-border { @apply border-r border-gray-700; }

ul.square { list-style: square; }
ol.roman { list-style: upper-roman; }
ul.none,
ol.none {
	@apply list-none;
}

ul.margin0,
ol.margin0 {
	@apply m-0;
}
ul.margin1 { @apply m-4; }
ul.padding0 { @apply p-0; }
ul.padding1 { @apply py-2 px-4; }

#list-grid {
	@apply list-none;
}

#list-grid li {
	@apply font-semibold text-sm;
}

#list li {
	@apply font-semibold text-base leading-normal py-2 px-3;
}

.inline_img_left {
	@apply float-left mt-0.5 mr-1.5;
}

.bio_main_image {
	@apply float-right max-w-[200px] max-h-[250px];
}

.award-small { @apply w-16; }

.indent-left { @apply pl-6; }

.counter {
	@apply -mt-4;
}

.ui-datepicker-trigger {
	@apply block float-left py-3 px-2;
}

.pill-container {
	@apply flex flex-wrap mt-3 text-transparent;
}
.pill-inline-container {
	@apply text-transparent;
}
.pill {
	@apply rounded-full py-0.5 px-2.5 font-medium text-gray-300 bg-gray-900 border border-gray-700 transition my-1;
}
a.pill {
	@apply hover:bg-primary-900 hover:border-primary-700 hover:text-primary-300;
}