@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html, body {
    @apply bg-grayishBlue-100 text-base text-grayishBlue-700;
  }
  h1 { @apply text-xl font-bold; }
  h2 { @apply text-lg font-bold; }
  h3 { @apply text-md font-semibold; }
  h4 { @apply text-base font-semibold; }
  h5 { @apply text-sm font-semibold; }

  [type=checkbox] {
    @apply bg-white rounded-sm accent-veryDarkBlue focus:accent-moderateBlue cursor-pointer focus:outline-0 focus:ring-transparent;
  }
  [type=checkbox] ~ label {
    @apply cursor-pointer;
  }
  [type=email], [type=password] {
    @apply p-2 focus:outline-0;
  }

  audio, canvas, embed, iframe, img, object, svg, video {
    @apply inline align-baseline;
  }
  input { @apply bg-white invalid:bg-white valid:bg-white; }
}

@layer components {
  .video-bg {
    @apply object-cover object-center w-full h-full;
  }
  .btn {
    @apply h-12 py-2.5 px-6 inline-block rounded-xl font-bold leading-5 text-white text-center w-full cursor-pointer;
  }
  .btn-primary-gradient {
    @apply bg-gradient-to-r from-veryDarkBlue to-moderateBlue;
  }
  .btn-primary {
    @apply bg-moderateBlue;
  }
  .btn-secondary {
    @apply bg-brightOrange;
  }
  .sd-modal {
    @apply bg-transparent fixed w-full h-full top-0 left-0 z-[900] text-center;
  }
  .sd-modal .modal-content {
    @apply flex flex-col w-[90%] lg:w-fit relative top-1/2 top-1/2 translate-y-[-50%] p-0 max-w-none mx-auto z-[200];
  }
  .sd-modal .modal-content * {
    @apply z-[200];
  }
  .sd-modal .modal-content .modal-header {
    @apply w-full bg-grayishBlue-100 rounded-t-3xl border-0 flex flex-col p-0 h-auto;
  }
  .sd-modal .modal-content .modal-header .title {
    @apply text-grayishBlue-700 font-semibold p-6 pb-4 text-lg;
  }
  .sd-modal .modal-content .modal-body {
    @apply w-full relative inline-grid bg-white min-w-fit lg:min-w-[460px] min-h-[225px] lg:min-h-[300px] p-0;
  }
  .sd-modal .modal-content .modal-footer {
    @apply w-full bg-grayishBlue-100 rounded-b-3xl border-0 m-0 p-8 h-auto flex flex-row justify-around items-center;
  }
  .sd-modal .backdrop {
    @apply opacity-20 bg-black fixed w-full h-full top-0 left-0 z-[100];
  }
  .field-flex {
    @apply grid grid-cols-8 gap-x-2 items-center;
  }
  .heading {
    @apply text-moderateBlue w-fit max-h-[50px] whitespace-nowrap p-5 text-xl rounded-xl font-bold leading-4 capitalize text-center;
  }
  .report-thumb {
    @apply flex flex-col items-center justify-evenly justify-items-center bg-white rounded-2xl w-full h-96 p-16 lg:w-66 lg:h-66 lg:p-6;
  }
  .report-title {
    @apply whitespace-pre-line text-center text-md font-bold text-grayishBlue-700 px-20 lg:px-6;
  }
  .report-container {
    @apply border-0;
  }
  .wider-content .content {
    @apply !w-full;
  }
  .title-lg {
    @apply whitespace-pre-line text-center text-lg text-grayishBlue-700 px-20 lg:px-6;
  }

  .svg-gray-filter {
    filter: brightness(0) saturate(100%) invert(92%) sepia(0%) saturate(48%) hue-rotate(228deg) brightness(86%) contrast(101%);
  }
  .svg-dark-gray-filter {
    filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(1564%) hue-rotate(143deg) brightness(92%) contrast(78%);
  }
  .svg-moderate-blue-filter {
    filter: brightness(0) saturate(100%) invert(22%) sepia(76%) saturate(3480%) hue-rotate(249deg) brightness(79%) contrast(97%);
  }


  /* Table */
  .table-account {
    @apply border-separate border-spacing-0 border-2 border-grayishBlue-100 rounded-lg;
    }
  .table-account td, th {
    @apply border-b-2 border-grayishBlue-100 lg:px-8 py-4 text-center;
    }
  .table-account tr:last-child > td {
    @apply border-b-0;
  }

  /* Pagination */
  .pagination.menu {
    @apply flex mx-[1rem] border shadow rounded
  }
  .pagination.menu .item {
    @apply py-[13px] px-[16px] min-w-[3em] first:rounded-l last:rounded-r text-center hover:bg-[#00000008];
  }
  .pagination.menu .item img {
    @apply w-[1.75em];
  }
  .pagination.menu .item.active {
    @apply bg-[#0000000d]
  }
  /* Pagination */

  svg.orange path {
    @apply !fill-brightOrange;
  }
  svg.dark path {
    @apply !fill-gray-900;
  }
  svg.moderateBlue path {
    @apply !fill-moderateBlue;
  }
  .toggle-class.opacity-0 *, .toggle-class .opacity-0 *, .toggle-class.hidden *, .toggle-class .hidden * {
    display: none!important;
  }
  .flash-notif {
    @apply pointer-events-none fixed top-0 right-0 w-11/12 z-[999] flex items-end transition ease-in-out duration-200 transform px-4 py-6 sm:p-6;
  }
  .flash-notif .notif-box {
    @apply flex flex-col w-full items-center space-y-4 sm:items-end;
  }
  .flash-notif .notif-box .notif-msg {
    @apply pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5;
  }
  .flash-notif .notif-box.notice .notif-msg, .flash-notif .notif-box.success .notif-msg {
    @apply bg-limeGreen text-grayishBlue-50 drop-shadow-md;
  }
  .flash-notif .notif-box.alert .notif-msg, .flash-notif .notif-box.error .notif-msg, .flash-notif .notif-box.errors .notif-msg, .flash-notif .notif-box.timedout .notif-msg {
    @apply bg-lightRed text-grayishBlue-50 drop-shadow-md;
  }
}
/*
  Place all the styles related to the Siamese controller here.
  They will automatically be included in application.css.
  You can use Sass (SCSS) here: https://sass-lang.com/
*/


/* line 343, app/assets/stylesheets/common/theme.scss */
.sppag {
  border-top: 1px solid #F2F4F7;
  padding: 1rem;
  margin-top: -3em;
  color: #5A6474;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  min-width: 100%;
  background-color: #f2f4f7;
}

/* line 366, app/assets/stylesheets/common/theme.scss */
.sppag > * {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 3;
  -ms-flex-positive: 3;
  flex-grow: 3;
  -ms-flex-negative: 3;
  flex-shrink: 3;
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
}

/* line 385, app/assets/stylesheets/common/theme.scss */
.sppag > .sppag-size {
  justify-content: left;
  flex-grow: 2;
}

/* line 389, app/assets/stylesheets/common/theme.scss */
.sppag > .sppag-size .sppag-size-panel {
  background: #FFFFFF;
  border: 1px solid #E0E3EA;
  box-sizing: border-box;
  border-radius: 2px;
  margin-left: 1em;
  display: flex;
  justify-content: center;
}

/* line 398, app/assets/stylesheets/common/theme.scss */
.sppag > .sppag-size .sppag-size-panel select {
  background: #FFFFFF;
  border: none;
  box-sizing: border-box;
  border-radius: 2px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 1em;
  padding-right: 2em;
  background-image: url(/assets/violet_arrow-e131e791577221b4c266b51e0bdad65f5579bca3ea109cdcf928aba390a21964.svg);
  background-repeat: no-repeat, repeat;
  background-position: right .7em top 51%, 0 0;
  background-size: .85em auto, 100%;
}

/* line 413, app/assets/stylesheets/common/theme.scss */
.sppag > .sppag-size .sppag-size-panel select:focus {
  outline: none;
}

/* line 422, app/assets/stylesheets/common/theme.scss */
.sppag > .sppag-numbers {
  justify-content: flex-start;
  flex-grow: 6;
}

/* line 426, app/assets/stylesheets/common/theme.scss */
.sppag > .sppag-numbers .ui.pagination.menu {
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
}

/* line 432, app/assets/stylesheets/common/theme.scss */
.sppag > .sppag-numbers .ui.pagination.menu a {
  margin-left: 5px;
  border: 1px solid #E0E3EA;
  color: #2F3440;
  border-radius: 10px;
}

/* line 438, app/assets/stylesheets/common/theme.scss */
.sppag > .sppag-numbers .ui.pagination.menu .disabled {
  margin-left: 5px;
  border: 1px solid #E0E3EA;
  color: #2F3440;
  border-radius: 10px;
  background-color: #fff !important;
}

/* line 446, app/assets/stylesheets/common/theme.scss */
.sppag > .sppag-numbers .ui.pagination.menu a.active {
  color: #5733C7;
  background: #D4D9FF !important;
  border-radius: 10px;
}

/* line 1814, app/assets/stylesheets/common/theme.scss */
.pagination.menu {
  background: none;
}

/* line 1816, app/assets/stylesheets/common/theme.scss */
.pagination.menu .item {
  background: #ffffff;
  padding: 11px 16px;
  min-width: 3em;
  text-align: center;
}

/* line 1819, app/assets/stylesheets/common/theme.scss */
.pagination.menu .item:before {
  background: none;
}


/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */