/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.2.4
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
/* [2023-11-26] Add Base Colors From Figma */
:root {
  /* Primary Colors */
  --primary-blue-900: #1a2e6b;
  --primary-blue-700: #213b8b;
  --primary-blue-500: #2762d4;
  --primary-blue-300: #5587c3;
  --primary-blue-100: #cfd9ee;
  --primary-blue-50: #ecf0f8;

  --primary-yellow-900: #7e5602;
  --primary-yellow-700: #e39a03;
  --primary-yellow-500: #fcb31a;
  --primary-yellow-300: #fee6b3;
  --primary-yellow-100: #fee9be;
  --primary-yellow-50: #fff7e6;

  /* System Colors */
  --system-green-900: #00612c;
  --system-green-700: #00b250;
  --system-green-500: #00c558;
  --system-green-300: #a8ffb2;
  --system-green-100: #e5ffe8;

  --system-danger-900: #b20000;
  --system-danger-700: #cc0000;
  --system-danger-500: #e50000;
  --system-danger-300: #ff6666;
  --system-danger-100: #ffe5e5;

  --system-neutral-900: #808a9d;
  --system-neutral-700: #d7dae0;
  --system-neutral-500: #e5e7eb;
  --system-neutral-300: #ebecef;
  --system-neutral-100: #f1f2f4;

  /* Black & White */
  --black: #000000;
  --white: #ffffff;

  /* Greyscales */
  --greyscale-900: #262626;
  --greyscale-800: #404040;
  --greyscale-700: #595959;
  --greyscale-650: #717171;
  --greyscale-600: #a6a6a6;
  --greyscale-500: #bfbfbf;
  --greyscale-400: #cfcfcf;
  --greyscale-300: #d9d9d9;
  --greyscale-200: #eaeaea;
  --greyscale-100: #f2f2f2;

  /* Text Colors */
  --dark-text: #262626;
  --dark-alt-text: #595959;
  --light-text: #eaeaea;
  --light-alt-text: #a6a6a6;

  /* Gradients */
  --gradient-orange: linear-gradient(270deg, #ee6622 0%, #faa919 100%);
  --gradient-blue: linear-gradient(270deg, #4f60a7 0%, #b3bbdb 100%);

  /* File Colors */
  --file-xlsx: #207347;
  --file-docx: #185abd;
  --file-pdf: #e84040;
  --file-pptx: #d04325;

  /* Other Brand Colors */
  --line: #06c755;
  --facebook: #4267b2;
  --twitter: #1da1f2;
}

/* [2023-11-27] Add Base Typography From Figma */
/* [2023-12-22] Adjust Header Style From Figma  */
h1,
.heading-1 {
  font-family: Prompt;
  font-size: 34px;
  font-weight: 500 !important;
  line-height: 43px;
  letter-spacing: 0em;
}

h2,
.heading-2 {
  font-family: Prompt;
  font-size: 24px;
  font-weight: 500 !important;
  line-height: 36px;
  letter-spacing: 0em;
}

h3,
.heading-3 {
  font-family: Prompt;
  font-size: 20px;
  font-weight: 500 !important;
  line-height: 30px;
  letter-spacing: 0em;
}

h4,
.heading-4 {
  font-family: Prompt;
  font-size: 18px;
  font-weight: 500 !important;
  line-height: 27px;
  letter-spacing: 0.015em;
}

h5,
.heading-5 {
  font-family: Prompt;
  font-size: 16px;
  font-weight: 500 !important;
  line-height: 24px;
  letter-spacing: 0.005em;
}

h6,
.heading-6 {
  font-family: Prompt;
  font-size: 14px;
  font-weight: 600 !important;
  line-height: 21px;
  letter-spacing: 0.002em;
}

.subtitle-medium {
  font-family: Prompt;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  letter-spacing: 0.015em;
}

.subtitle {
  font-family: Prompt;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  letter-spacing: 0.015em;
}

.body1-medium {
  font-family: Prompt;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.005em;
}

.body1 {
  font-family: Prompt;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.001em;
}

.body1-readable-bold {
  font-family: Sarabun;
  font-size: 16px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0.0015em;
}

.body1-readable {
  font-family: Sarabun;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.0015em;
}

.body2-medium {
  font-family: Prompt;
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  letter-spacing: 0.002em;
}

.body2 {
  font-family: Prompt;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0.002em;
}

.caption-medium {
  font-family: Prompt;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0.015em;
}

.caption {
  font-family: Prompt;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.015em;
}

.smallest-medium {
  font-family: Prompt;
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 0.015em;
}

.smallest {
  font-family: Prompt;
  font-size: 10px;
  font-weight: 400;
  line-height: 15px;
  letter-spacing: 0.015em;
}

.page-content a,
.comments-area a {
  text-decoration: none;
}

.flex-container {
  width: 100%;
}

.wp-block-file {
  margin-bottom: 0;
  background: url(http://staging.ocsc.go.th/wp-content/uploads/2024/01/file.png);
  background-repeat: no-repeat;
  background-size: 32px 32px;
  background-position: left center;
  border-top: 1px solid #ddd;
}

.wp-block-file:last-child {
  border-bottom: 1px solid #ddd;
}

.flex-card {
  padding: 12px 20px 12px 44px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.extension-div {
  text-align: center;
  border-radius: 4px;
  padding: 4px 12px;
  text-decoration: none;
  font-size: 14px;
}

.file-size {
  color: var(--greyscale-900);
}

.xls,
.xlsx {
  border: 1px solid var(--file-xlsx);
  color: var(--file-xlsx);
}

.doc,
.docx {
  border: 1px solid var(--file-docx);
  color: var(--file-docx);
}

.pdf {
  border: 1px solid var(--file-pdf);
  color: var(--file-pdf);
}

.ppt,
.pptx {
  border: 1px solid var(--file-pptx);
  color: var(--file-pptx);
}

.file {
  border: 1px solid var(--primary-blue-500);
  color: var(--primary-blue-500);
}

.skt-custom-border {
  border-color: var(--primary-blue-500) !important;
  margin-right: 10px !important;
}
.skt-custom-email {
  color: var(--primary-blue-500) !important;
}
.elementor-share-btn_line {
  color: var(--line) !important;
  margin-right: 0px !important; /*for some reason, Line button has extra 2px on margin-right*/
}
.elementor-share-btn_copy {
  color: var(--primary-blue-500) !important;
}

/* Add accessibility focus outline */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:not([tabindex='-1']):focus {
  outline: 4px solid var(--primary-yellow-500) !important;
}

.btn {
  display: inline-flex;
  height: 44px;
  padding: 6px 16px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  border-radius: 8px;
}

.btn-secondary.medium {
  border: 1.8px solid var(--primary-blue-500, #2762d4);
}

/* [2023-12-22] Add Breadcrumbs Style */
#breadcrumbs a {
  font-size: 14px;
  font-weight: 400;
}

#breadcrumbs .fa-caret-right {
  padding: 0 16px;
  color: var(--greyscale-500);
}

input[type='date'] {
  border: 1px solid var(--greyscale-300) !important;
  border-radius: 8px !important;
  font-family: Sarabun, sans-serif !important;
}

/* style for custom fields and badges */
.status-badge {
  height: 24px;
  border-radius: 4px;
  padding: 0px 8px 0px 8px;
  gap: 4px;
  font-weight: 400;
}

.green-circle {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--system-green-500) !important;
  border-radius: 50%;
  vertical-align: middle;
}

.grey-circle {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--greyscale-500) !important;
  border-radius: 50%;
  vertical-align: middle;
}

.law-usage-badge-text {
  display: flex;
  align-items: center;
  gap: 8px;
}

.select2-search.select2-search--dropdown {
  display: none !important;
}

/*Overriding tab styling for laws with tab pages*/
.e-n-tabs {
  display: var(--n-tabs-display);
  flex-direction: var(--n-tabs-direction);
  text-align: start;
  min-width: 0;
  gap: 0px !important; /*var(--n-tabs-gap) elementor value is this */
}

.e-n-tabs-heading {
  border-bottom: 1px solid var(--greyscale-200);
  padding-bottom: 24px !important;
  margin-bottom: 0px;
}

button.cc-link {
  background-color: transparent;
  border-radius: 0;
}