/*
 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets
 */

/* Core CSS required for Ionic components to work properly */
@import "~@ionic/angular/css/core.css";

/* Basic CSS for apps built with Ionic */
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import "~@ionic/angular/css/display.css";

/* Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";

@font-face {
  font-family: "Kanit";
  font-style: normal;
  font-weight: 300;
  src: url("./assets/fonts/Kanit-Light.ttf");
}

@font-face {
  font-family: "Kanit";
  font-style: normal;
  font-weight: 400;
  src: url("./assets/fonts/Kanit-Regular.ttf");
}

@font-face {
  font-family: "Kanit";
  font-style: normal;
  font-weight: 500;
  src: url("./assets/fonts/Kanit-Medium.ttf");
}

@font-face {
  font-family: "Kanit";
  font-style: normal;
  font-weight: 500;
  src: url("./assets/fonts/Kanit-Medium.ttf");
}

@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 300;
  src: url("./assets/fonts/IBMPlexSansThai-Light.ttf");
}

@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 400;
  src: url("./assets/fonts/IBMPlexSansThai-Regular.ttf");
}

@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 600;
  src: url("./assets/fonts/IBMPlexSansThai-SemiBold.ttf");
}

* {
  font-family: "IBM Plex Sans Thai", sans-serif !important;
}

.new-background-color {
  --background: rgb(103, 143, 221);
  --background: -moz-linear-gradient(
    45deg,
    rgba(76, 185, 196, 1) 0%,
    rgba(61, 211, 174, 1) 100%
  );
  --background: -webkit-gradient(
    left bottom,
    right top,
    color-stop(0%, rgba(76, 185, 196, 1)),
    color-stop(100%, rgba(61, 211, 174, 1))
  );
  --background: -webkit-linear-gradient(
    45deg,
    rgba(76, 185, 196, 1) 0%,
    rgba(61, 211, 174, 1) 100%
  );
  --background: -o-linear-gradient(
    45deg,
    rgba(76, 185, 196, 1) 0%,
    rgba(61, 211, 174, 1) 100%
  );
  --background: -ms-linear-gradient(
    45deg,
    rgba(76, 185, 196, 1) 0%,
    rgba(61, 211, 174, 1) 100%
  );
  --background: linear-gradient(
    135deg,
    rgb(53, 111, 177) 0%,
    rgb(58, 128, 209) 54%,
    rgba(0, 212, 255, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4cb9c4', endColorstr='#3dd3ae', GradientType=1 );
  --color: #ffffff;
}

// ion-content {
//   --background: linear-gradient(
//     to bottom,
//     #a7e9ff,
//     #8fd8fd,
//     #7ec7fb,
//     #78b4f6,
//     #7c9fee
//   );
// }

ion-title {
  font-family: "Kanit", sans-serif !important;
  font-weight: 500;
}

.txt-content {
  font-family: "IBM Plex Sans Thai", sans-serif !important;
  font-weight: 400;
}

.txt-lead {
  font-family: "IBM Plex Sans Thai", sans-serif !important;
  font-weight: 600;
}

.txt-place-title {
  font-family: "IBM Plex Sans Thai", sans-serif !important;
  font-weight: 600;
  line-height: 1.2;
  font-size: 22px;
  margin-top: 5px;
  margin-bottom: 5px;
}

h1 {
  font-family: "IBM Plex Sans Thai", sans-serif !important;
  font-weight: 600;
}

ion-label {
  font-family: "IBM Plex Sans Thai", sans-serif !important;
}

ion-button {
  font-family: "IBM Plex Sans Thai", sans-serif !important;
  font-weight: 600;
}

.break-line {
  border-bottom: 1px rgb(31, 31, 31) solid;
}

a {
  text-decoration: none;
}

.image-page-cover {
  height: 200px;
}
.ios ion-fab-button {
  position: absolute;
  bottom: 25px;
}