@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@layer base {
    [type='text'],
    [type='email'],
    [type='url'],
    [type='password'],
    [type='number'],
    [type='date'],
    [type='datetime-local'],
    [type='month'],
    [type='search'],
    [type='tel'],
    [type='time'],
    [type='week'],
    [multiple],
    textarea,
    select {
      @apply rounded border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500;
    }

    [type='checkbox'],
    [type='radio'] {
      @apply border-gray-300 text-blue-600 focus:ring-blue-500;
    }
}

.btn {
  @apply font-bold py-2 px-4 rounded;
}
.btn-blue {
  @apply bg-blue-500 text-white;
}
.btn-blue:hover {
  @apply bg-blue-700;
}

@import '~cropper/dist/cropper.css';
//@import '~flag-icon-css/sass/flag-icon.scss';
@import "~select2/dist/css/select2.css";
@import "~bootstrap-daterangepicker/daterangepicker.css";
//@import '~jquery-ui/themes/base/all.css';

@layer components {
  .card {
    @apply bg-white rounded shadow-lg w-full;
  }

  // Buttons.

  .btn {
    //@apply inline-block text-black px-4 py-2 text-xs font-medium leading-6 text-center bg-gray-100 uppercase transition rounded shadow hover:shadow-lg focus:outline-none;
    //disabled:cursor-not-allowed
    //@apply block px-4 py-2 transition duration-100 ease-in-out focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 ;
    @apply font-bold h-10 inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  .btn-primary {
    @apply text-white bg-ch-primary hover:bg-ch-primary-dark focus:ring-ch-primary-dark;
  }

  .btn-warning {
    @apply text-white bg-yellow-400 hover:bg-yellow-800 focus:ring-yellow-500;
  }

  .btn-success {
    @apply text-white bg-green-400 hover:bg-green-800;
  }

  .btn-danger {
    @apply text-white bg-ch-error hover:bg-ch-error-dark;
  }

  // Buttons with icons.
  .btn > .mdi {
    @apply -ml-1 mr-1 h-4 w-5 fill-current ;
  }

  .btn > .svg {
    @apply -ml-1 mr-1 h-4 w-5 fill-current ;
  }

  // Forms.

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

  .has-error .ch-form-label {
    @apply h-8 text-red-500;
  }

  .has-error .help-block {
    @apply text-red-500 italic text-xs;
  }

  .has-error .ch-form-control {
    @apply border-red-500;
  }

  legend {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: 0.5rem;
    font-size: calc(1.275rem + 0.3vw);
    line-height: inherit;
  }

  fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
  }

  // Tables
  table {
      @apply min-w-full divide-y divide-gray-200;
  }

  table thead {
    @apply bg-gray-50;
  }

  table tbody {
    @apply bg-white divide-y divide-gray-200;
  }

  .table td img {
    display: inline-block;
  }

  // List

  .list-group {
    @apply flex flex-col mr-4;
  }

  .list-group-item {
    @apply flex flex-row justify-start gap-2 border rounded-sm px-3 py-3;
  }

  // Alerts

  .alert {
    @apply px-6 py-4 border-0 rounded relative mb-4;
  }

  .alert-info {
    @apply text-white bg-ch-info;
  }

  .alert-warning {
    @apply text-gray-900 bg-ch-warning;
  }

  .alert-success {
    @apply text-gray-900 bg-ch-success;
  }

  .alert-danger {
    @apply text-white bg-ch-error;
  }

  // Tabs

  .tab_wrapper nav {
    @apply card flex flex-row justify-between gap-4;
  }

  .tab_wrapper nav a {
    @apply p-4;
  }

  // Calendar

  #calendar .fc-toolbar-chunk {
    @apply flex flex-row;
  }

  // Page header

  .page-header {
    @apply text-gray-500 text-2xl flex flex-row gap-2;
  }

  #no-data-view {
    @apply flex flex-col items-center justify-center p-4 space-y-4 antialiased text-gray-900;
  }

  .pull-right {
    @apply flex flex-row;
  }

  .header-border-bottom {
    border-bottom: 1px solid #e4e9ed !important;
  }

  .ch-tool-icon {
    @apply font-extrabold text-transparent bg-clip-text bg-ch-primary
  }
  .ch-tool-icon-disabled {
    @apply font-extrabold text-transparent bg-clip-text bg-gray-400
  }
  .ch-tool-icon-gradient {
    @apply font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-ch-primary to-ch-primary-light
  }

  // Forms
  input {
    appearance: auto !important;
  }

  // Learning paths menu brought in to use primary/secondary colors
  .scorm_highlight .item {
    background: url("../../public/img/scorm/scorm_highlight.png") no-repeat 10px center !important;
    @apply bg-ch-secondary;
  }
  .scorm_highlight.scorm_completed .item {
    background: url("../../public/img/scorm/scorm_current.png") no-repeat 10px center !important;
    @apply bg-ch-secondary;
  }
  .scorm_highlight.scorm_failed .item {
    background: url("../../public/img/scorm/scorm_failed.png") no-repeat 10px center !important;
    @apply bg-ch-secondary;
  }
  .scorm_item_normal.scorm_highlight {
    @apply bg-ch-secondary;
  }
  .scorm_item_normal.scorm_highlight.scorm_not_attempted {
    background: url(../../public/img/icons/svg/check-not-attempted.svg) right center no-repeat;
    @apply bg-ch-secondary;
  }
  .scorm_item_normal.scorm_highlight.scorm_completed {
    background: url(../../public/img/icons/svg/check-highlight.svg) right center no-repeat;
    @apply bg-ch-secondary;
  }
  .scorm_item_normal.scorm_highlight a {
    color: #FFFFFF;
  }
  #learning_path_toc .root_item.lp_item_type_document.scorm_highlight{
    background-color: #f1f4f9;
  }
  #learning_path_toc .child_item.lp_item_type_document.scorm_highlight{
    background-color: #f1f4f9;
  }
  #learning_path_right_zone .lp-view-tabs .tab-content {
    bottom: 0;
    left: 0;
    position: absolute;
    top: 60px;
    right: 0;
    border: 1px solid #dddddd;
    border-top: none;
  }
  .scorm_item_normal a.items-list {
    color: #666666;
    display: inline-block;
    width: 100%;
  }
  .scorm_completed .item a{
    @apply text-gray-500;
  }
  .scorm_completed .item a.scorm_highlighted{
    @apply text-gray-50;
  }

  @import "scss/index.scss";
}

// tabs
.tab-content {
  > .tab-pane {
    display: none;
  }
  > .active {
    display: block;
  }
}

//@import 'primevue-md-light-indigo/theme.css';
//@import '~primevue/resources/primevue.min.css';
//@import '~primeflex/primeflex.css';
//@import "~primeicons/primeicons.css";

//@import "~jquery-ui-timepicker-addon/dist/jquery-ui-timepicker-addon.css";
@import "~@fancyapps/fancybox/dist/jquery.fancybox.css";
//@import "~jquery-contextmenu/dist/jquery.contextMenu.css";