/** 
We've ported old SCSS code to PostCSS + TailwindCSS. This approach is not recommended.
*/
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

body {
  @apply bg-gray-50 text-base pt-14 lg:pl-60;
}

#app {
  @apply w-screen transition-all lg:w-auto;
}

.video {
  position: relative;
  padding-top: 56.25%;
}

.console {
  height: 600px;
}

.link {
  @apply text-blue-600;
}

.main-section {
  @apply p-6;
}

.dropdown {
  @apply cursor-pointer;
}

.clipped,
.clipped body {
  @apply overflow-hidden;
}

.m-clipped,
.m-clipped body {
  @apply overflow-hidden lg:overflow-visible;
}

.form-screen body {
  @apply p-0;
}

.form-screen .main-section {
  @apply flex h-screen items-center justify-center;
}

/* @import "./css/aside.css"; */
.aside {
  @apply w-60 -left-60 fixed top-0 z-40 h-screen bg-gray-800 transition-all lg:left-0;
}

.aside-tools {
  @apply flex flex-row w-full bg-gray-900 text-white flex-1 px-3 h-14 items-center;
}

.aside-mobile-expanded .aside {
  @apply left-0;
}

.aside-mobile-expanded .navbar {
  @apply ml-60;
}

.aside-mobile-expanded #app {
  @apply ml-60;
}

.aside-mobile-expanded,
.aside-mobile-expanded body {
  @apply overflow-hidden lg:overflow-visible;
}

.menu-label {
  @apply p-3 text-xs uppercase text-gray-400;
}

.menu-clock {
  @apply p-3 text-xs uppercase text-white;
}

.menu-list li a {
  @apply py-2 flex text-gray-300;
}

.menu-list li > a {
  @apply hover:bg-gray-700;
}

.menu-list li a .menu-item-label {
  @apply flex-grow;
}

.menu-list li a .icon {
  @apply w-12 flex-none;
}

.menu-list li > a.active {
  @apply bg-gray-700;
}

.menu-list li.active > a {
  @apply bg-gray-700;
}

.menu-list li ul a {
  @apply p-3 text-sm;
}

.menu-list li.active ul {
  @apply block bg-gray-600;
}

/* @import "./css/navbar.css"; */
@layer components {
  .navbar,
  .navbar-menu,
  .navbar-start,
  .navbar-end {
    @apply lg:flex lg:items-stretch;
  }

  .navbar {
    @apply top-0 left-0 right-0 fixed flex bg-white h-14 border-b border-gray-100 z-30 w-screen transition-all
      lg:pl-60 lg:w-auto;
  }

  .navbar-brand {
    @apply flex-1 items-stretch flex h-14;
  }

  .navbar-brand.is-right {
    @apply flex-none lg:hidden;
  }

  .navbar-brand .navbar-item {
    @apply items-center flex;
  }

  .navbar-item,
  .navbar-link {
    @apply block py-2 px-3;
  }

  .navbar-item {
    @apply flex-grow-0 flex-shrink-0 relative lg:flex lg:items-center;
  }

  .navbar-item.mobile-aside-button {
    @apply lg:hidden;
  }

  .navbar-item.has-divider {
    @apply lg:border-r lg:border-gray-100;
  }

  .navbar-item > .navbar-link {
    @apply flex items-center bg-gray-100 lg:bg-transparent;
  }

  .navbar-item .icon + span {
    @apply ml-2;
  }

  .navbar-item.has-user-avatar > .navbar-link {
    @apply flex items-center;
  }

  .navbar-item.has-user-avatar .user-avatar {
    @apply w-6 h-6 mr-3 inline-flex;
  }

  .navbar-item.dropdown {
    @apply p-0 lg:py-2 lg:px-3;
  }

  .navbar-item.dropdown > .navbar-link .icon:last-child {
    @apply hidden lg:inline-flex;
  }

  .navbar-item.desktop-icon-only {
    @apply lg:w-16 lg:justify-center;
  }

  .navbar-item.desktop-icon-only span:last-child {
    @apply lg:hidden;
  }

  .navbar-item .input {
    @apply border-0;
  }

  .navbar-menu {
    max-height: calc(100vh - 3.5rem);
    @apply hidden absolute w-screen top-14 left-0 bg-white border-b border-gray-100 overflow-auto shadow
      lg:flex lg:flex-grow lg:static lg:border-b-0 lg:overflow-visible lg:shadow-none;
  }

  .navbar-menu.active {
    @apply block;
  }

  .navbar-end {
    @apply lg:justify-end lg:ml-auto;
  }

  .navbar-item .navbar-dropdown {
    @apply text-sm lg:border-gray-200 lg:border-t-2
      lg:bg-white lg:absolute lg:top-full lg:left-0 lg:min-w-full lg:z-20 lg:shadow-md lg:rounded-b;
  }

  .navbar-item:not(.active) .navbar-dropdown {
    @apply lg:hidden;
  }

  .navbar-item.active:not(.dropdown),
  .navbar-item.active.dropdown > .navbar-link {
    @apply text-blue-500;
  }
}
/* @import "./css/button.css";   */
.button {
  @apply inline-flex bg-white text-black border-gray-50 border cursor-pointer justify-center px-4 py-2 text-center
      whitespace-nowrap rounded
      hover:border-gray-500
      focus:outline-none;
}

.button.addon-right {
  @apply rounded-r-none;
}

.button.addon-left {
  @apply rounded-l-none;
}

.button.small {
  @apply text-xs p-1;
}

.button.small.textual {
  @apply px-3;
}

.button.active {
  @apply border-gray-300 hover:border-gray-500;
}

.button.green {
  @apply bg-green-500 border-green-500 text-white hover:bg-green-600;
}

.button.indigo {
  @apply bg-indigo-500 border-indigo-500 text-white hover:bg-indigo-600;
}

.button.red {
  @apply bg-red-500 border-red-500 text-white hover:bg-red-600;
}

.button.pink {
  @apply bg-pink-500 border-pink-500 text-white hover:bg-pink-600;
}

.button.yellow {
  @apply bg-yellow-500 border-yellow-500 text-black hover:bg-yellow-600;
}

.button.blue {
  @apply bg-blue-500 border-blue-500 text-white hover:bg-blue-600;
}

.button.light {
  @apply bg-gray-100 border-gray-100 hover:bg-gray-200;
}

.buttons {
  @apply flex items-center flex-wrap justify-start;
}

.buttons.nowrap {
  @apply flex-nowrap;
}

.buttons.right {
  @apply justify-end;
}

.buttons .button {
  @apply mx-1;
}
/* @import "./css/card.css";   */
.card {
  @apply bg-white border border-gray-100 rounded;
}

.card.has-table .card-content {
  @apply p-0;
}

.card-content {
  @apply p-6;
}

.card-content hr {
  @apply my-6 -mx-6;
}

.card.empty .card-content {
  @apply text-center py-12 text-gray-500;
}

.card-header {
  @apply flex items-stretch border-b border-gray-100;
}

.card-header-title,
.card-header-icon {
  @apply flex items-center py-3 px-4;
}

.card-header-title {
  @apply flex-grow font-bold;
}

.card-header-icon {
  @apply justify-center;
}

.widget-label h3 {
  @apply text-lg leading-tight text-gray-500;
}

.widget-label h1 {
  @apply text-3xl leading-tight font-semibold;
}

.form-screen .card {
  @apply w-11/12 lg:w-5/12 shadow-2xl rounded-lg;
}
/* @import "./css/path.css"; */
.is-title-bar {
  @apply p-6 border-b border-gray-100;
}

.is-title-bar li {
  @apply inline-block pr-3 text-2xl text-gray-500;
}

.is-title-bar li:not(:last-child):after {
  content: "/";
  @apply inline-block pl-3;
}

.is-title-bar li:last-child {
  @apply pr-0 font-black text-black;
}

/* @import "./css/notification.css"; */
.notification {
  @apply px-3 py-6 rounded;
}

.notification:not(:last-child) {
  @apply mb-6;
}

.notification.blue {
  @apply bg-blue-500 text-white;
}

.notification.green {
  @apply bg-green-500 text-white;
}

.notification.red {
  @apply bg-red-500 text-white;
}

/* @import "./css/progress.css"; */
progress {
  @apply h-3 rounded-full overflow-hidden;
}

progress::-webkit-progress-bar {
  @apply bg-gray-200;
}

progress::-webkit-progress-value {
  @apply bg-green-500;
}

progress::-moz-progress-bar {
  @apply bg-green-500;
}

progress::-ms-fill {
  @apply bg-green-500 border-0;
}
/* @import "./css/icon.css"; */
.material-icons {
  @apply !inline-flex justify-center items-center w-6 h-6;
}

.material-icons.widget-icon {
  @apply w-20 h-20;
}

.material-icons.large {
  @apply w-12 h-12;
}

.material-icons span {
  @apply inline-flex;
}

/* @import "./css/table.css"; */
table {
  @apply w-full;
}

thead {
  @apply hidden lg:table-header-group;
}

tr {
  @apply max-w-full block relative border-b-4 border-gray-100
    lg:table-row lg:border-b-0;
}

tr:last-child {
  @apply border-b-0;
}

th {
  @apply lg:text-left lg:py-2 lg:px-3;
}

td {
  @apply flex justify-between text-right py-3 px-4 align-top border-b border-gray-100
    lg:table-cell lg:text-left lg:py-2 lg:px-3 lg:align-middle lg:border-b-0;
}

tr:nth-child(odd) td {
  @apply lg:bg-gray-50;
}

td:last-child {
  @apply border-b-0;
}

tbody tr:hover td {
  @apply lg:bg-gray-100;
}

td:before {
  content: attr(data-label);
  @apply font-semibold pr-3 text-left lg:hidden;
}

td.checkbox-cell,
th.checkbox-cell {
  @apply lg:w-5;
}

td.progress-cell progress {
  @apply flex w-2/5 self-center
    lg:w-full;
}

td.image-cell {
  @apply border-b-0 lg:w-6;
}

td.image-cell:before,
td.actions-cell:before {
  @apply hidden;
}

td.image-cell .image {
  @apply w-24 h-24 mx-auto lg:w-6 lg:h-6;
}

.table-pagination {
  @apply px-6 py-3 border-t border-gray-100;
}

/* @import "./css/forms.css"; */
@layer components {
  .field:not(:last-child) {
    @apply mb-3;
  }

  .field.spaced:not(:last-child) {
    @apply mb-6;
  }

  .field-body .field .field {
    @apply mb-0;
  }

  .field.addons {
    @apply flex justify-start;
  }

  .field.addons .control.expanded {
    @apply flex-grow flex-shrink;
  }

  .field.addons .control:first-child:not(:only-child) .input,
  .field.addons .control:first-child:not(:only-child) .select select {
    @apply rounded-r-none border-r-0;
  }

  .field.addons .control:last-child:not(:only-child) .input,
  .field.addons .control:last-child:not(:only-child) .select select {
    @apply rounded-l-none border-l-0;
  }

  .field.grouped {
    @apply flex justify-start;
  }

  .field.grouped > .control:not(:last-child) {
    @apply mr-3;
  }

  .field.grouped.multiline {
    @apply flex-wrap;
  }

  .label {
    @apply block font-bold mb-2;
  }

  .control {
    @apply relative;
  }

  .control.icons-left,
  .control.icons-right {
    @apply relative;
  }

  .input,
  .textarea,
  .select select,
  .file-cta,
  .file-name {
    @apply px-3 py-2 border border-gray-400 rounded;
  }

  .input,
  .select select,
  .file-cta,
  .file-name {
    @apply h-10;
  }

  .input,
  .textarea,
  .select select {
    @apply w-full max-w-full focus:border-gray-100 focus:ring focus:outline-none bg-white;
  }

  .input[readonly] {
    @apply pointer-events-none bg-gray-100;
  }

  .textarea {
    @apply h-24;
  }

  .control.icons-left .icon,
  .control.icons-right .icon {
    @apply absolute top-0 z-10 w-10 h-10;
  }

  .control.icons-left .input,
  .control.icons-left .select select {
    @apply pl-10;
  }

  .control.icons-left .icon.left {
    @apply left-0;
  }

  .control.icons-right .input,
  .control.icons-right .select select {
    @apply pr-10;
  }

  .control.icons-right .icon.right {
    @apply right-0;
  }

  .help {
    @apply block text-xs text-gray-500 mt-1;
  }

  .file {
    @apply flex items-stretch justify-start relative;
  }

  .upload {
    @apply inline-flex;
  }

  .upload input[type="file"] {
    @apply absolute top-0 left-0 w-full h-full opacity-0 outline-none cursor-pointer;
  }
}

.checkbox,
.radio,
.switch {
  @apply inline-flex items-center cursor-pointer relative;
}

.checkbox input[type="checkbox"],
.radio input[type="radio"],
.switch input[type="checkbox"] {
  @apply absolute left-0 opacity-0;
}

.checkbox input[type="checkbox"] + .check,
.radio input[type="radio"] + .check,
.switch input[type="checkbox"] + .check {
  @apply border-gray-300 border hover:border-gray-400;
}

.checkbox input[type="checkbox"] + .check,
.radio input[type="radio"] + .check {
  @apply block w-5 h-5;
}

.checkbox input[type="checkbox"] + .check {
  @apply rounded;
}

.switch input[type="checkbox"] + .check {
  @apply flex items-center flex-shrink-0 w-12 h-6 p-0.5 bg-gray-200;
}

.radio input[type="radio"] + .check,
.switch input[type="checkbox"] + .check,
.switch input[type="checkbox"] + .check:before {
  @apply rounded-full;
}

.checkbox input[type="checkbox"]:checked + .check,
.radio input[type="radio"]:checked + .check {
  @apply bg-no-repeat bg-center bg-blue-500 border-blue-500 border-4;
}

.checkbox input[type="checkbox"]:checked + .check {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E");
}

.radio input[type="radio"]:checked + .check {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /%3E%3C/svg%3E");
}

.switch input[type="checkbox"]:checked + .check {
  @apply bg-blue-500 border-blue-500;
}

.switch input[type="checkbox"] + .check:before {
  content: "";
  @apply block w-5 h-5 bg-white border border-gray-300;
}

.switch input[type="checkbox"]:checked + .check:before {
  transform: translate3d(110%, 0, 0);
  @apply border-blue-500;
}

.checkbox .control-label,
.radio .control-label,
.switch .control-label {
  @apply pl-2;
}

/* @import "./css/modal.css"; */
.modal {
  @apply hidden items-center flex-col justify-center overflow-hidden fixed inset-0 z-40;
}

.modal.active {
  @apply flex;
}

.modal-background {
  @apply absolute inset-0 bg-gray-900/80;
}

.modal-card {
  max-height: calc(100vh - 160px);
  @apply w-full flex flex-col overflow-hidden relative
    lg:mx-auto lg:w-2/5;
}

.modal-card-body {
  @apply bg-white flex-grow flex-shrink overflow-auto p-6 space-y-2;
}

.modal-card-head,
.modal-card-foot {
  @apply flex items-center flex-shrink-0 justify-start px-6 py-4 relative bg-gray-100 border-gray-200;
}

.modal-card-head {
  @apply border-b rounded-t;
}

.modal-card-foot {
  @apply border-t rounded-b;
}

.modal-card-foot .button:not(:last-child) {
  @apply mr-2;
}
