@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@700&family=Montserrat:wght@200;300;500;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;


.logo {
  font-weight: 800;
}

/* DEFAULTS */
@layer base {
  h1 {
    @apply
      text-[2.6rem] md:text-5xl font-extrabold leading-tight mb-10 text-purple;
  }
  h2 {
    @apply text-[1.85rem] md:text-4xl font-extrabold leading-tight mb-4 text-purple;
  }
  h3 {
    @apply text-[1.5rem] font-extrabold leading-tight mb-6 text-purple;
  }
  h4 {
    @apply text-[1.3rem] font-extrabold leading-tight mb-6 text-purple;
  }
  h5 {
    @apply text-xl font-extrabold leading-tight mb-3 text-purple;
  }
  a {
    @apply text-blue font-medium;
  }
  p {
    @apply font-light text-base mb-10
  }
}
.hand {
  @apply text-[24px] md:text-3xl;
  font-family: 'Kalam';
}
/*Buytton */

.button {
  @apply
  md:text-lg
  font-bold
  py-4
  px-10
  rounded-full
  text-center
  cursor-pointer;
}
.button-xl {
  @apply text-xl py-5 px-12;
}
.button-secondary {
  @apply bg-purple text-white;
}
.button-primary {
  @apply bg-yellow text-purple;
}
.button-hollow-secondary {
  @apply text-purple  bg-gray-300;
}
.button-hollow-secondary i {
  display: none;
}
.button-secondary-selected {
  @apply bg-blue text-white;
}
.button-secondary-selected i.floating-success {
  display: block;
  position: absolute;
  left: 10%;
  top: 50%;
  margin-top: -16px;
  font-size: 32px;
}
.button-secondary-selected i {
  display: inline-block;
  margin-right: 4px;
}
.button-small-text {
  @apply text-sm;
  font-weight: 400;
}
.button.loading {
  @apply bg-gray-300;
}
.button.loading span {
  display: none;
}
.button .fa-loader{
  display: none;
}
.button.loading .fa-loader{
  display: block;
  font-size: 27px;
}

.button-chatSelect {
  font-size: 1.1rem;
  cursor: pointer;
  @apply flex-1 font-medium text-center border-4 border-yellow-lightest text-yellow-lightest mx-1 py-4 inline-block rounded-md;
}
.button-chatSelect:hover {
  @apply text-blue bg-yellow border-yellow;
}


label {
  @apply ml-4;
  font-weight: 500;
}

[multiple], [type=date], [type=datetime-local], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], select, textarea {
  @apply block w-full relative border-transparent py-4 px-4 mb-6 bg-gray-200 rounded-full focus:ring-purple;
}

hr {
  @apply my-12 block relative border-2;
}
.col-spacing {
  @apply px-6 md:px-8;
}
.col-spacing-large {
  @apply px-6 md:px-14;
}
.db-col-spacing {
  @apply px-2 md:p-4;
}

.bg-gradient-light {
  background: linear-gradient(to right, rgba(242,218,172,1) 10%, #c2cee8 100%);
}
.bg-gradient-nav {
  @apply bg-gradient-light;
}

@media (max-width: 640px) {
  .bg-gradient-light {
    background: linear-gradient(to bottom, rgba(242,218,172,1) 10%, #c2cee8 100%);
  }
  .bg-gradient-nav {
    background: rgba(242,218,172,1);
  }
}

/* NAV */
.nav-item {
  @apply block font-bold lg:inline-block lg:mt-0 py-3 px-4 mx-2 text-base
}

.default-nav .logo {
  @apply text-blue;
}
.default-nav .nav-item {
  @apply text-blue;
}
.default-nav.bg-blue .logo {
  @apply text-white;
}
.default-nav.bg-blue .nav-item {
  @apply text-white;
}
/* END NAV */


#fold_blob {
    border-radius: 50%;
    width: 100%;
    position: relative;
    padding-bottom: 100%;
    vertical-align: middle;
    text-align: center;
    background: #f09;
    background-image: linear-gradient(45deg, #283268 0%, #443989 100%);
    box-shadow: 25px 25px 0px #D9C9BA;
    line-height: 12rem;
}
#fold_blob--content {
    position: absolute;
    width: 100%;
    text-align: center;
}
#fold_blob--price {
    letter-spacing: -8px;
    font-weight: 800;
    line-height: 100%;
}
#fold_blob--text {
    @apply text-white;
    font-weight: 200;
    font-size: 20px;
    line-height: 20px;
    width: 84%;
    margin-left: 8%;
    opacity: .5;
}
.relative {
  position: relative;
}
table td {
  @apply px-0 py-3;
  vertical-align: top;
}
table.border td {
  border-bottom: 1px #eee solid;
}
#pricing-table i {
  font-size: 1.2rem;
}
.force-rounded-none {
  border-radius: 0!important;
}
.force-rounded-none-left {
  border-top-left-radius: 0!important;
  border-bottom-left-radius: 0!important;
}
.force-rounded-none-right {
  border-top-right-radius: 0!important;
  border-bottom-right-radius: 0!important;
}
#finalize-wrapper {
  position: fixed;
  width: 100%;
  bottom: 0;
}
.finalize-wrapper--reset-mobile {
  position: relative;
}
#errorrs-wrapper {
  top: 0;
  left: 0;
}
#vat-number-field {
  text-transform: uppercase;
}
.step-circle {
  @apply bg-purple text-yellow text-2xl font-extrabold;
  position: absolute;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border-radius: 50%;
  font-size: 3rem;
}
.card-element-wrapper {
  @apply bg-gray-200 rounded-full py-5 px-4 mb-6 ;
}
.data-label {
  @apply text-xs py-1 px-2 rounded-full;
}
.data-label.pending {
  @apply bg-gray-300;
}
.data-label.paid {
  @apply bg-lime-300;
}
.callout {
  @apply md:px-4 px-2 pt-7 pb-1 border-4 border-blue rounded-lg mb-12 bg-white;
}
.callout h3 {
  @apply ml-4;
}
.box {
  @apply p-6 bg-white rounded-md;
}
.animate__delay-a {
   --animate-delay: 1s;
   animation-delay: 1s;
}
.animate__delay-b {
   --animate-delay: 1.27s;
   animation-delay: 1.27s;
}
.animate__delay-c {
   --animate-delay: 1.39s;
   animation-delay: 1.39s;
}
.animate__delay-d {
   --animate-delay: 1.46s;
   animation-delay: 1.46s;
}
.animate__delay-e {
   --animate-delay: 1.52s;
   animation-delay: 1.52s;
}
.counter-wrapper {
  @apply w-1/4 bg-blue md:mx-4 mx-1 py-6 text-center rounded-md;
}
.counter-digit {
  @apply text-white leading-10 font-black md:text-3xl text-2xl;
}
.counter-label {
  @apply text-blue-lightest font-light leading-4 mt-1;
}
.box-shadow {
  box-shadow: 20px 20px 40px rgba(0,0,0,.25);
}
.bg-gradient {
  background: rgb(40,50,104);
  background: linear-gradient(0deg, rgba(40,50,104,1) 15%, rgba(242,200,75,1) 85%);
}

/* STATES */
.state {
  @apply px-2 py-1;
}
.state.draft {
  @apply bg-zinc-400
}
.state.pending,
.state.booking {
  @apply bg-yellow text-blue;
}
.state.offered,
.state.standard,
.state.subscription {
  @apply bg-blue text-white;
}
.state.demo,
.state.rental {
  @apply bg-green
}

/* CHAT */

#chat {
  height: calc( 100dvh - 96px );
  display: flex;
  flex-direction: column;
}

.chat-box {
  display: flex;
  flex-flow: column;
  flex-wrap: nowrap;
  flex-direction: column-reverse;
}

.chat-messages {
  flex-grow: 1;
  padding: 12px 6px;
  overflow: scroll;
}
@media (max-width: 640px) {
  .chat-messages {
    padding: 12px 16px;
    flex-grow: 1;
    overflow: scroll;
  }
}


.chat-messages .message {
  padding: 10px 0;
  align-items: center;
}

.chat-messages .message .message--bubble {
  display: inline-block;
  padding: 16px;
  border-radius: 16px;
  font-size: 1.15rem;
  white-space: break-spaces;
  overflow: hidden;
}

.chat-messages .message .message-timestamp {
  font-size: 10px;
  align-self: flex-end;
}

.chat-messages .message .message-wrapper {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

.chat-messages .message.true {
  display: flex;
  justify-content: flex-end;
}

.chat-messages .message.true .message-wrapper {
  display: flex;
  flex-direction: column;
}

.chat-messages .message.true .message--bubble {
  @apply bg-yellow-lightest;
  text-align: left;
  border-bottom-right-radius: 0px;
}

.chat-messages .message.false {
  display: flex;
  justify-content: flex-end;
  flex-direction: row-reverse;
  align-self: flex-start;
}

.chat-messages .message.false .message-wrapper {
  display: flex;
  flex-direction: column;
}

.chat-messages .message.false .message--bubble {
  color: #fff;
  border-top-left-radius: 0px;
  @apply border-2 border-white;
}

.chat-editor {
  display: table;
  width: 100%;
  min-height: 80px;
}
.chat-editor.type {
  @apply bg-blue-lightest; 
}
.chat-editor.select {
  background: transparent;
}

.chat-editor.type.true {
  filter: grayscale(1);
  opacity: .3;
  cursor: not-allowed !important;
}

.chat-editor textarea {
  font-size: 1.1rem;
  margin-bottom: 0;
  outline: none!important;
      border: none;
    overflow: auto;
    outline: none;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    resize: none; /*remove the resize handle on the bottom right*/
  background: transparent;
}

.chat-editor button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  @apply bg-yellow text-blue m-2;
}

#chat-editor--content {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}

#message_body {
  border: 1px solid #d3d3d3; /* assuming $light-gray is a light gray color */
  padding: 12px;
  border-radius: 30px;
  max-height: 140px;
  overflow-y: auto;
}


@media (min-width: 768px) {
  .bg-chat-desktop {
    background: linear-gradient(to left, #1f2656 42.3%, #283268 42.3%);
  }
}

.page-content ul {
  margin-bottom: 2.5rem;
  margin-left: 1.1rem;
  list-style-type: disc;
  font-weight: 300;
}
.page-content ul li {
  font-size: 1rem;
}
/*
 * 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.
 *


 */