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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
/*
 * 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.
 *


 */

 /* custom additions */

/* for header */
.h-shadow {
  box-shadow:
  2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
  6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
  12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
  22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
  41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
  100px 100px 80px rgba(0, 0, 0, 0.07);
}

.hl-shadow {
  box-shadow:
  -2.8px 2.8px 2.2px -2.8px rgba(0, 0, 0, 0.02),
  -6.7px 6.7px 5.3px -6.7px rgba(0, 0, 0, 0.028),
  -12.5px 12.5px 10px -12.5px rgba(0, 0, 0, 0.035),
  -22.3px 22.3px 17.9px -22.3px rgba(0, 0, 0, 0.042),
  -41.8px 41.8px 33.4px -41.8px rgba(0, 0, 0, 0.05),
  -100px 100px 80px -100px rgba(0, 0, 0, 0.07);
}

/* for images */
.i-shadow {
  box-shadow:
  2.5px 1.1px 10.3px -15px rgba(0, 0, 0, 0.019),
  7.5px 3.3px 26.1px -15px rgba(0, 0, 0, 0.026),
  16.9px 7.5px 53.3px -15px rgba(0, 0, 0, 0.032),
  36.2px 16px 109.9px -15px rgba(0, 0, 0, 0.045),
  102px 45px 301px -15px rgba(0, 0, 0, 0.11);
}

:root {
  --shadow-color: 0deg 0% 80%;
  --shadow-elevation-low:
    0.5px 1px 1.4px hsl(var(--shadow-color) / 0.1),
    0.8px 1.5px 2.2px -0.7px hsl(var(--shadow-color) / 0.14),
    1.6px 3px 4.3px -1.5px hsl(var(--shadow-color) / 0.19);
  --shadow-elevation-medium:
    0.5px 1px 1.4px hsl(var(--shadow-color) / 0.11),
    1.7px 3.2px 4.6px -0.5px hsl(var(--shadow-color) / 0.14),
    3.6px 6.8px 9.8px -1px hsl(var(--shadow-color) / 0.18),
    8px 15px 21.7px -1.5px hsl(var(--shadow-color) / 0.21);
  --shadow-elevation-high:
    0.5px 1px 1.4px hsl(var(--shadow-color) / 0.1),
    2.3px 4.3px 6.2px -0.2px hsl(var(--shadow-color) / 0.11),
    3.9px 7.4px 10.7px -0.4px hsl(var(--shadow-color) / 0.13),
    6px 11.2px 16.2px -0.6px hsl(var(--shadow-color) / 0.15),
    8.8px 16.4px 23.7px -0.9px hsl(var(--shadow-color) / 0.16),
    12.9px 24.1px 34.9px -1.1px hsl(var(--shadow-color) / 0.18),
    18.7px 35px 50.6px -1.3px hsl(var(--shadow-color) / 0.2),
    26.7px 50px 72.3px -1.5px hsl(var(--shadow-color) / 0.21);
}

.i2-shadow {
  box-shadow: var(--shadow-elevation-high);
}

/* https://www.joshwcomeau.com/gradient-generator?colors=ffffff|f0f0f0|828282&angle=355&colorMode=hcl&precision=8&easingCurve=0.3922413793103448|0.6810344827586207|0.9956896551724138|0.44396551724137934 */
.gray-gradient {
  background-image: linear-gradient(
    355deg,
    hsl(0deg 0% 100%) 0%,
    hsl(344deg 0% 99%) 13%,
    hsl(344deg 0% 98%) 28%,
    hsl(344deg 0% 97%) 43%,
    hsl(344deg 0% 95%) 57%,
    hsl(0deg 0% 94%) 70%,
    hsl(344deg 0% 85%) 81%,
    hsl(344deg 0% 76%) 90%,
    hsl(344deg 0% 68%) 95%,
    hsl(344deg 0% 59%) 99%,
    hsl(0deg 0% 51%) 100%
  );
}

.m-grad {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,7db9e8+100&1+0,0+100 */
  background: -moz-linear-gradient(45deg,  rgba(255,255,255,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg,  rgba(255,255,255,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg,  rgba(255,255,255,1) 0%,rgba(125,185,232,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.m-grad-2 {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.8+0,0+100 */
  background: -moz-linear-gradient(45deg,  rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg,  rgba(255,255,255,0.8) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg,  rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.link-drop:before {
  content: "\f107";
  font-family: "Font Awesome 5 Solid";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
}

.nav-drop-1:before {

  content: "";
  width: 12px;
  height: 12px;
  position: absolute;
  top: -12px;
  left: -2px;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.9) 50%, rgba(255,255,255,0) 50%);
}
.nav-drop:before {
  content: "";
  width: 12px;
  height: 12px;
  /* border-top: 1px solid rgba(0, 0, 0, .2);
  border-right: 1px solid rgba(0, 0, 0, .2); */
  position: absolute;
  top: -6px;
  left: 25%;
  background: linear-gradient(-135deg, rgba(255, 255, 255, 0.9) 50%, rgba(255,255,255,0) 50%);
  -webkit-transform: rotate(
-45deg
);
  -ms-transform: rotate(-45deg);
  transform: rotate(
-45deg
);
}

/* tooltip */
/* .poppercontent {
  display: none;
} */

.popperbutton {
  cursor: pointer;
}

.poppershowing {
  display: block;
}

.popperhiding {
  display: none;
}

.arrow,
.arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}

.arrow {
  visibility: hidden;
}

.arrow::before {
  visibility: visible;
  content: '';
  transform: rotate(45deg);
}

.poppercontent[data-popper-placement^='top'] > .arrow {
  bottom: -4px;
}

.poppercontent[data-popper-placement^='bottom'] > .arrow {
  top: -4px;
}

.poppercontent[data-popper-placement^='left'] > .arrow {
  right: -4px;
}

.poppercontent[data-popper-placement^='right'] > .arrow {
  left: -4px;
}

.user-content a {
  text-decoration: underline;
}

/* [data-showing=true] > .poppercontent {
  display: block;
}

[data-showing=false] > .pooppercontent {
  display: none;
} */

#tooltip {
  /*background: #333;
  color: white;*/
  /* cursor: pointer; */
  font-weight: bold;
  padding: 4px 8px;
  font-size: 13px;
  border-radius: 4px;
  display: none;
}

#tooltip[data-show] {
  display: block;
}

#arrow,
#arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}

#arrow {
  visibility: hidden;
}

#arrow::before {
  visibility: visible;
  content: '';
  transform: rotate(45deg);
}

#tooltip[data-popper-placement^='top'] > #arrow {
  bottom: -4px;
}

#tooltip[data-popper-placement^='bottom'] > #arrow {
  top: -4px;
}

#tooltip[data-popper-placement^='left'] > #arrow {
  right: -4px;
}

#tooltip[data-popper-placement^='right'] > #arrow {
  left: -4px;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

@media (min-width: 768px) {
  .md\:overflow-y-visible {
    overflow-y: visible;
  }
}