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

html {
	@apply bg-gray-100;
}

body {
	@apply text-gray-500 antialiased text-base leading-6 font-sans;
}

.wrapper {
	@apply max-w-7xl mx-auto;
}

img { @apply border-none; }

header {
	@apply m-0 p-0 pb-24 bg-primary-300 border-b border-primary-400 space-y-4;
}
header > .wrapper {
	@apply flex items-center space-x-8 pt-6 pb-12;
}
header .logo svg,
header .logo img {
	@apply h-8 w-auto;
}
header .signin-container {
	@apply flex items-center shrink relative space-x-6;
}
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 a {
	@apply border-none;
}

.nav-main {
	@apply flex-1;
}
.nav-main ul {
    @apply m-0 p-0 w-auto list-none flex items-center space-x-6;
}
.nav-main ul li a {
	@apply block no-underline px-1 py-2 text-base border-b-2 border-transparent text-primary-600 font-bold hover:text-primary-700 transition;
}
.nav-main ul li a.active {
    @apply text-primary-700 border-primary-500;
}

main {
	@apply relative rounded-md ring-1 ring-gray-900/5 bg-primary-100 -mt-24 overflow-hidden shadow-xl mb-12;
}
main .content {
	@apply rounded-br-md border-b border-r border-primary-300 bg-white px-6 py-6 mr-48;
}

.nav-sub {
	@apply float-right w-48 my-4 text-right;
}
.nav-sub ul {
	@apply m-0 p-0 list-none space-y-0.5;
}
.nav-sub ul > li {
	@apply p-0 m-0;
}
.nav-sub ul > li > a {
	@apply block px-4 py-1 no-underline text-primary-600 font-semibold text-sm border-y border-transparent hover:text-primary-700 hover:bg-primary-200 hover:border-y hover:border-primary-400 transition;
}
.nav-sub ul > li.spacer {
	@apply h-6 border-none;
}
.nav-sub ul > li.menu_category {
	@apply px-4 py-1 text-xs uppercase tracking-wide text-primary-700 font-semibold;
}

footer {
	@apply flex items-center justify-center space-x-8 clear-both py-3 text-center text-sm text-primary-600 rounded-b-md;
}

.signin-active, .signin-active:hover {
	background: #7e867a !important;
	color: #fff;
}

.signin-panel {
    @apply float-right flex items-center text-sm text-primary-700;
}
.signin-panel kbd {
	@apply text-xs font-semibold text-primary-600;
}

.signin-panel input[type=text],
.signin-panel input[type=password] {
    @apply border border-primary-400 rounded-md w-48 bg-primary-200 text-sm text-primary-700 font-medium focus:bg-primary-100 focus:border-primary-500;

	box-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.signin-panel a {
	border: 0;
	color: #7e867a !important;
}
.signin-panel a:hover {
	border-bottom: 1px solid;
}

a {
	@apply text-primary-600 hover:text-primary-700 no-underline border-b border-primary-500 hover:border-primary-600 focus:outline-none;
}
a.delete,
a.edit {
	@apply text-gray-500 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-200 w-full my-1.5 mx-auto h-0;
}

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

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

input[type=text],
input[type=password],
input[type=email],
textarea,
select {
	@apply rounded-md border border-gray-300 ring-1 ring-transparent shadow-sm focus:border-primary-400 focus:ring-primary-400 focus:text-gray-900 focus:outline-none;
}
input[type=text],
input[type=password],
input[type=email] {
	@apply w-72;
}
textarea {
	@apply w-[500px];
}
input[type=checkbox] {
	@apply rounded bg-white checked:bg-primary-600 border-gray-300 focus:ring-primary-400 focus:ring-offset-white checked:hover:bg-primary-600 focus:text-primary-600;
}
input[type=radio] {
	@apply rounded-full bg-white checked:bg-primary-600 border-gray-300 focus:ring-primary-400 focus:ring-offset-white 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-100 file:text-primary-600 hover:file:bg-primary-200 hover:file:text-primary-700;
}

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;
}
.flash_message p {
	@apply m-0 px-6 py-3;
}
.flash-success {
	@apply bg-success-100 border-success-200 text-success-600;
}
.flash-error {
	@apply bg-danger-100 border-danger-200 text-danger-600;
}
.flash-info {
	@apply bg-info-100 border-info-200 text-info-600;
}

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-50;
}

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-200;
}
.col1 {
	@apply text-lg text-right font-semibold;
}
.col2 {
	@apply font-semibold;
}

#acp-panel {
	@apply flex rounded-t-md border border-b-0 border-gray-200 bg-gray-100 overflow-hidden;
}

#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-warning-100 hover:text-warning-700 hover:border-y-warning-300;
}
#panelmenu li a span {
	@apply w-full;
}
#panelmenu li a.active {
	@apply bg-white text-primary-700 border-gray-200 hover:bg-white hover:text-primary-700 hover:border-gray-200;
}

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

#online {
    @apply px-3 py-1.5 mb-8 border border-t-0 border-gray-200 rounded-b-md bg-gray-100;
}

.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 backdrop-blur backdrop-filter transition-all;
}
#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-600 p-2;
}
.panel-close > svg {
	@apply w-6 h-6 text-gray-500 hover:text-gray-600;
}
#panel .panel-body {
	@apply relative mx-auto max-w-xl transform divide-y divide-gray-500 divide-opacity-10 rounded-lg bg-white shadow-2xl ring-1 ring-black ring-opacity-5;
}
.panel-body h4 {
	@apply mt-4 mb-2 px-3 text-xs font-semibold text-gray-900;
}
.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-700 border-none rounded-md px-3 py-2 hover:bg-gray-900/5 hover:text-gray-900;
}
.panel-body a.edit {
	@apply shrink w-24 justify-end hover:bg-transparent;
}
.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-md transition hover:bg-white 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-100 text-gray-500 font-semibold border-2 border-transparent rounded-md transition hover:bg-white hover:text-gray-500 hover:border-gray-200 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-md border border-gray-200 bg-gray-100 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-300 text-warning-900 shadow-lg text-sm;
}

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

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

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-500 bg-gray-100 border border-gray-200 transition my-1;
}
a.pill {
	@apply hover:bg-primary-100 hover:border-primary-200 hover:text-primary-600;
}