:root {
  
  /* color */
  
  --color-primary: var(--color-white);
  --color-secondary: var(--color-black);
  --color-tertiary: var(--color-dark-gray);
  --color-quaternary: var(--color-meridian-red);
  --color-shade-1: var(--color-lightest-gray);
  --color-shade-2: var(--color-off-white);
  --color-shade-3: var(--color-warm-gray);
  --color-shade-4: var(--color-dark-blue);
  --color-shade-5: var(--color-addition-gray);
  /*new ยังไม่ได้เพิ่มใน javascript master*/
  --color-shade-6: var(--color-addition-gray-2);
  /*new ยังไม่ได้เพิ่มใน javascript master*/
  
  
  --color-text-primary: var(--color-black);
  --color-text-secondary: var(--color-white);
  --color-text-tertiary: var(--color-meridian-red);
  --color-text-shade-1: var(--color-lightest-gray);
  --color-text-shade-2: var(--color-light-gray);
  --color-text-shade-3: var(--color-gray);
  --color-text-shade-4: var(--color-dark-gray);
  --color-text-shade-5: var(--color-yellow-2);
  --color-text-shade-6: var(--color-dark-blue);
  --color-text-shade-7: var(--color-blue);
  /*new ยังไม่ได้เพิ่มใน javascript master*/
  
  --color-white: #ffffff;
  --color-black: #000000;
  --color-lightest-gray: #fdfdfd;
  --color-lighter-gray: #dddd;
  --color-light-gray: #aca9a9;
  --color-gray: #626262;
  --color-dark-gray: #2f2f2f;
  --color-addition-gray: #f8f9fa;
  --color-addition-gray-2: #8d8d8d;
  --color-blue: #0d4177;
  --color-dark-blue: #07245a;
  --color-yellow: yellow;
  --color-yellow-2: #ffd367;
  --color-off-white: #f4f7fc;
  --color-warm-gray: #f6e5e6;
  --color-meridian-red: #b51b24;
  
  /* font size */
  --text-size-12: 12px;
  --text-size-14: 14px;
  --text-size-16: 16px;
  --text-size-18: 18px;
  --text-size-20: 20px;
  --text-size-22: 22px;
  --text-size-24: 24px;
  --text-size-26: 26px;
  --text-size-28: 28px;
  --text-size-30: 30px;
  --text-size-32: 32px;
  --text-size-34: 34px;
  --text-size-36: 36px;
  --text-size-38: 38px;
  --text-size-40: 40px;
  --text-size-40: 42px;
  --text-size-40: 44px;
  --text-size-40: 46px;
  
  /* border */
  --border-1: 1px solid var(--color-white);
  --border-2: 1px solid var(--color-light-gray);
  --border-3: 1px solid var(--color-lighter-gray);
  
  /* size */
  --size-1: 4px;
  --size-2: 8px;
  --size-3: 16px;
  --size-4: 24px;
  --size-5: 32px;
  
  /* border radius */
  --border-radius-1: 4px;
  --border-radius-2: 8px;
  --border-radius-3: 16px;
  --border-radius-4: 24px;
  --border-radius-circle: 50%;
  
  /* shadow */
  --box-shadow-1: 0px 4px 26px -5px rgba(0, 0, 0, 0.5);
  --box-shadow-2: 0 2px 20px 0 rgba(0, 0, 0, 0.08);
  --box-shadow-3: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  --box-shadow-4: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
}


.hide {
  display: none !important;
}

.black-drop {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: var(--color-off-white);
  top: 0;
  left: 0;
  z-index: 9999;
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  top: calc(50% - 40px);
  left: calc(50% - 40px);
}

.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid var(--color-meridian-red);
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: var(--color-meridian-red) transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 9999;
}

.searchbar {
  & div {
    padding: 0;
    padding-right: var(--size-2);
  }
}

.office-grievances {
  & a {
    color: var(--color-text-secondary);
    text-decoration: none;
  }
  
}

.office-card {
  & a {
    color: var(--color-shade-4);
    text-decoration: none;
  }
  & .item {
    width: 100%;
    height:112px;
    border-radius: var(--border-radius-1);
    border: var(--border-3);
    background-color: var(--color-shade-5);
    color: var(--color-shade-4);
    & .sub-item {
      width: 56px;
      height: 56px;
      border-radius: var(--border-radius-circle);
      background-color: var(--color-primary);
      font-weight: bold;
    }
    
    &:hover {
      background-color: var(--color-shade-3);
      & .sub-item {
        color: var(--color-text-secondary);
        background-color: var(--color-quaternary);
        
      }
    }
  }
  
}

.fn-custom-bg-1 {
  background-color: var(--color-shade-1);
  box-shadow: var(--box-shadow-3);
  border-radius: var(--border-radius-2);
  
  &.card {
    --bs-card-border-width: 0
  }
}

.fn-custom-bg-2 {
  border: var(--border-3);
  border-radius: var(--border-radius-1);
  
  /*&:nth-child(odd) {
  background-color: var(--color-shade-1);
}*/
}

.fn-custom-bg-3 {
  background-color: var(--color-primary);
  box-shadow: var(--box-shadow-4);
  border-radius: var(--border-radius-2);
  
  &.card {
    --bs-card-border-width: 0
  }
}

.fn-border-1 {
  border-color: var(--color-secondary) !important;
}

.fn-input-1 {
  border-radius: var(--border-radius-2);
  border: var(--border-2);
  background-color: var(--color-off-white);
}

.fn-form-select-1 {
  background: linear-gradient(to left, var(--color-quaternary), var(--color-quaternary)) right, var(--color-white);
  background-size: 40px 100%, auto;
  background-repeat: no-repeat;
}

.fn-form-select-2 {
  background: linear-gradient(to left, var(--color-gray), var(--color-gray)) right, var(--color-white);
  background-size: 32px 100%, auto;
  background-repeat: no-repeat;
}

.fn-button-1 {
  background-color: var(--color-quaternary);
  color: var(--color-text-secondary);
  border-radius: var(--border-radius-2);
  box-shadow: var(--box-shadow-2);
  
  --bs-btn-border-color: var(--color-quaternary);
  --bs-btn-hover-bg: var(--color-quaternary);
  --bs-btn-hover-color: var(--color-text-secondary);
  --bs-btn-hover-border-color: none;
  --bs-btn-active-bg: var(--color-quaternary);
  --bs-btn-active-color: var(--color-text-secondary);
  --bs-btn-active-border-color: none;
}

.fn-button-office {
  width: 128px;
  --bs-btn-color: var(--color-text-secondary);
  --bs-btn-border-radius: none;
  box-shadow: var(--box-shadow-2);
  
  &.btn-primary {
    background-image: linear-gradient(to bottom, #b41f12, #640f17);
    --bs-btn-border-color: var(--color-quaternary);
    --bs-btn-hover-bg: var(--color-quaternary);
    --bs-btn-hover-color: var(--color-text-secondary);
    --bs-btn-hover-border-color: none;
    --bs-btn-active-bg: var(--color-quaternary);
    --bs-btn-active-color: var(--color-text-secondary);
    --bs-btn-active-border-color: none;
  }
  
  &.btn-secondary {
    --bs-btn-bg: var(--color-light-gray);
    --bs-btn-border-color: var(---color-light-gray);
    --bs-btn-hover-bg: var(--color-light-gray);
    --bs-btn-hover-color: var(--color-text-secondary);
    --bs-btn-hover-border-color: none;
    --bs-btn-active-bg: var(--color-light-gray);
    --bs-btn-active-color: var(--color-text-secondary);
    --bs-btn-active-border-color: none;
  }
  
}

.fn-message-from-ceo {
  background-color: var(--color-primary);
  border-radius: 10px;
  border: solid 1px #707070;
  
  & .line {
    border-color: var(--color-lighter-gray) !important;
  }
  
  & .description {
    color: var(--color-text-shade-7);
  }
  
  & .title {
    color: var(--color-quaternary);
  }
  
  & .position {
    color: var(--color-text-shade-3);
  }
  
  &:hover {
    background-color: var(--color-text-shade-7);
    
    & .line {
      border-color: var(--color-lighter-gray) !important;
    }
    
    & .description {
      color: var(--color-text-secondary);
    }
    
    & .title {
      color: var(--color-text-shade-5);
    }
    
    & .position {
      color: var(--color-text-secondary);
    }
  }
}


.fn-table-1 {
  &.table {
    --bs-table-bg: none;
    --bs-table-color: none;
    border-spacing: 0;
    border-radius: var(--border-radius-2);
    overflow: hidden;
  }
  
  & tr {
    border-radius: var(--border-radius-2);
    overflow: hidden;
  }
  
  & thead {
    background-color: var(--color-quaternary);
    color: var(--color-text-secondary);
    
    & tr th {
      padding-top: 24px;
      padding-bottom: 24px;
    }
  }
  
  & tbody {
    & tr:nth-child(even) {
      background-color: var(--color-shade-1);
      /* สีเทาอ่อนที่คุณต้องการ */
    }
  }
}

.fn-pagination-1 {
  & a {
    color: var(--color-text-primary);
    text-decoration: none;
  }
  
  & span {
    border-radius: var(--border-radius-circle);
    text-align: center;
    height: 24px;
    width: 24px;
  }
  
  & span:first-child,
    span:last-child {
    
    background-color: var(--color-lightest-gray);
    
    & a {
      color: var(--color-gray);
    }
  }
}


/* font */

.fn-font-primary {
  color: var(--color-text-primary);
}

.fn-font-secondary {
  color: var(--color-text-secondary);
}

.fn-font-tertiary {
  color: var(--color-text-tertiary);
}

/* additon font */

.fn-font-addition-1 {
  color: var(--color-text-shade-1);
}

.fn-font-addition-2 {
  color: var(--color-text-shade-2);
}

.fn-font-addition-3 {
  color: var(--color-text-shade-3);
}

.fn-font-addition-4 {
  color: var(--color-text-shade-4);
}

.fn-font-addition-5 {
  color: var(--color-text-shade-5);
}

.fn-font-addition-6 {
  color: var(--color-text-shade-6);
}

.fn-font-addition-7 {
  color: var(--color-text-shade-7);
}


/* background */

.fn-bg-primary {
  background-color: var(--color-primary);
}

.fn-bg-secondary {
  background-color: var(--color-secondary);
}

.fn-bg-tertiary {
  background-color: var(--color-tertiary);
}

.fn-bg-quaternary {
  background-color: var(--color-quaternary);
}

/* additon background */

.fn-bg-addition-1 {
  background-color: var(--color-shade-1);
}

.fn-bg-addition-2 {
  background-color: var(--color-shade-2);
}

.fn-bg-addition-3 {
  background-color: var(--color-shade-3);
}

.fn-bg-addition-4 {
  background-color: var(--color-shade-4);
}

.fn-bg-addition-5 {
  background-color: var(--color-shade-5);
}

.fn-bg-addition-6 {
  background-color: var(--color-shade-6);
}

/* text size*/


/* small mode*/

.fn-text-small-mode .fn-text-1 {
  font-size: var(--text-size-18);
}

.fn-text-small-mode .fn-text-2 {
  font-size: var(--text-size-20);
}

.fn-text-small-mode .fn-text-3 {
  font-size: var(--text-size-22);
}

.fn-text-small-mode .fn-text-4 {
  font-size: var(--text-size-24);
}

.fn-text-small-mode .fn-text-5 {
  font-size: var(--text-size-28);
}

.fn-text-small-mode .fn-text-6 {
  font-size: var(--text-size-36);
}


/* normal mode*/

.fn-text-normal-mode .fn-text-1 {
  font-size: var(--text-size-20);
}

.fn-text-normal-mode .fn-text-2 {
  font-size: var(--text-size-22);
}

.fn-text-normal-mode .fn-text-3 {
  font-size: var(--text-size-24);
}

.fn-text-normal-mode .fn-text-4 {
  font-size: var(--text-size-26);
}

.fn-text-normal-mode .fn-text-5 {
  font-size: var(--text-size-30);
}

.fn-text-normal-mode .fn-text-6 {
  font-size: var(--text-size-38);
}

.fn-text-normal-mode .fn-text-7 {
  font-size: var(--text-size-40);
}

.fn-text-normal-mode .fn-text-8 {
  font-size: var(--text-size-42);
}

.fn-text-normal-mode .fn-text-9 {
  font-size: var(--text-size-44);
}

/* large mode*/

.fn-text-large-mode .fn-text-1 {
  font-size: var(--text-size-22);
}

.fn-text-large-mode .fn-text-2 {
  font-size: var(--text-size-24);
}

.fn-text-large-mode .fn-text-3 {
  font-size: var(--text-size-26);
}

.fn-text-large-mode .fn-text-4 {
  font-size: var(--text-size-28);
}

.fn-text-large-mode .fn-text-5 {
  font-size: var(--text-size-32);
}

.fn-text-large-mode .fn-text-6 {
  font-size: var(--text-size-40);
}

/*
@font-face {
  font-family: 'ThaiSansNeue';
  src: url('/tcp/NBTC_TCP/media/Source/font/ThaiSansNeue-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  line-height: 1.2;
}

@font-face {
  font-family: 'ThaiSansNeue';
  src: url('/tcp/NBTC_TCP/media/Source/font/ThaiSansNeue-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;
}


@font-face {
  font-family: 'ThaiSansNeue';
  src: url('/tcp/NBTC_TCP/media/Source/font/ThaiSansNeue-SemiBold.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  line-height: 1.2;
}

@font-face {
  font-family: 'ThaiSansNeue';
  src: url('/tcp/NBTC_TCP/media/Source/font/ThaiSansNeue-Bold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  line-height: 1.2;
}/*


/*ใหม่*/


@font-face {
  font-family: 'ThaiSansNeue';
  src: url('/tcp/NBTC_TCP/media/Source/fontnew/ThaiSansNeue-Light.otf');
  font-weight: 300;
  line-height: 1.2;
}

@font-face {
  font-family: 'ThaiSansNeue';
  src: url('/tcp/NBTC_TCP/media/Source/fontnew/ThaiSansNeue-Regular.otf');
  font-weight: 400;
  line-height: 1.2;
}


@font-face {
  font-family: 'ThaiSansNeue';
  src: url('/tcp/NBTC_TCP/media/Source/fontnew/ThaiSansNeue-SemiBold.otf');
  font-weight: 500;
  line-height: 1.2;
}

@font-face {
  font-family: 'ThaiSansNeue';
  src: url('/tcp/NBTC_TCP/media/Source/fontnew/ThaiSansNeue-Bold.otf');
  font-weight: 600;
  line-height: 1.2;
}

/*ทดสอบอันใหม่สุด*/

@font-face {
  font-family: 'PSL';
  src: url('/tcp/NBTC_TCP/media/Source/fontnew2/PSL_Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  line-height: 1.2;
  }

@font-face {
  font-family: 'PSL';
  src: url('/tcp/NBTC_TCP/media/Source/fontnew2/PSL_Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
  line-height: 1.2;
  }

@font-face {
  font-family: 'PSL-Kit';
  src: url('/tcp/NBTC_TCP/media/Source/fontnew2/PSL_Kit-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  line-height: 1.2;
  }

@font-face {
  font-family: 'PSL-Kit';
  src: url('/tcp/NBTC_TCP/media/Source/fontnew2/PSL_Kit-Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
  line-height: 1.2;
  }


body {
  /*font-family: 'ThaiSansNeue';*/
  font-family: 'PSL';
  line-height: 1.2;
}

body h1,h2,h3,h4,h5,h6{
  font-family: 'PSL-Kit';
  font-weight: bold;
  line-height: 1.2;
  }

.fn-style-1{
  font-family: 'PSL-Kit';
  line-height: 1.2;
  }

.fn-style-2{
  font-family: 'PSL';
  line-height: 1.2;
  }

.CMSBreadCrumbsLink {
  color: var(--color-text-primary);
  text-decoration: none;
}

.CMSBreadCrumbsCurrentItem {
  color: var(--color-text-shade-2);
  text-decoration: none;
}

/* mobile normal mode*/
/*@media (max-width: 991.8px) {*/
@media (max-width: 1024px) {
  
  .fn-text-normal-mode .fn-text-1 {
    font-size: var(--text-size-18);
  }
  
  .fn-text-normal-mode .fn-text-2 {
    font-size: var(--text-size-20);
  }
  
  .fn-text-normal-mode .fn-text-3 {
    font-size: var(--text-size-22);
  }
  
  .fn-text-normal-mode .fn-text-4 {
    font-size: var(--text-size-24);
  }
  
  .fn-text-normal-mode .fn-text-5 {
    font-size: var(--text-size-28);
  }
  
  .fn-text-normal-mode .fn-text-6 {
    font-size: var(--text-size-30);
  }
  
  .fn-text-normal-mode .fn-text-7 {
    font-size: var(--text-size-32);
  }
  
}

@media (max-width: 768px){
  .fn-compliant-table tbody tr, .fn-compliant-table tbody td{
    display: block;
    }
  
}