:root {
  --primary: #394452;
  --primary-hover: #2C3A4B;
  --secondary: #F4F6F9;
  --secondary-hover: #EBEEF2;
  --default: #394452;
  --default-hover: #394452;


  --success: #50CD89;
  --success-light: #e8fff3;
  --danger: #f1416c;
  --danger-light: #fff5f8;
  --warning: #ffc700;
  --warning-light: #fff8dd;
  --dark-light: #F4F4F4;
  --info: #7239ea;
  --info-light: #f8f5ff;

  --light: #F9F9F9;

  --disabled: #F4F4F4;
  --disabled-label-color: #B5B5C3;

  --background-default: #F4F6F9;
  --background-light: #FFFFFF;

  --form-label-color: #000000;
  --form-label-size: ;
  --form-border-color: #EBEEF2;
  --form-background-color: #FFFFFF;

  --bar-max-width: 300px;
  --bar-min-width: 70px;

  --border-10: #DADEE3;

  --windows-height: calc(var(--vh) * 100);

  --font-family: 'IBM Plex Sans Thai', sans-serif;

  /* --nav-link-color: #A5ABB3;
  --nav-link-active-color: #394452;
  --nav-divider: #DADEE3; */

  --nav-link-color: #EBEEF2;
  --nav-link-active-color: #FFFFFF;
  --nav-divider: #FFFFFF;

  --sidebar-link-color: #EBEEF2;
  --sidebar-link-active-bg: #545D69;
  --sidebar-link-active-color: #DADEE3;

  --active-bg: #F4F6F9;
  --hover-bg: #f4f6f9;
  --active-label: #394452;
  --list-border-color: #EBEEF2;
  --inputgroup-ico-color:#DADEE3;

  --footer-bg: #FFFFFF;

  --card-bg: #FFFFFF;

  --inputgroup-ico-color: #545D69;

  --background-white: #FFFFFF;

  --copyright-color: #A5ABB3;
  --copyright-bg: #FFFFFF;

  --download-bg: #FFFFFF;

  --download-badge-bg: #DADEE3;
  --download-badge-color: #A5ABB3;
  --download-thumbnail-bg: #DADEE3;
  --download-thumbnail-color: #A5ABB3;

  --globalsearch-bg: #FFFFFF;

  --search-bg: #F4F6F9;

  --profile-thumbnail-border-color: #DADEE3;
  --profile-thumbnail-bg: #F4F6F9;
  --profile-thumbnail-color: #394452;

  --dropdown-bg: #FFFFFF;
  --dropdown-hover: #F4F6F9;

  --contentlist-badge-bg: #DADEE3;
  --contentlist-badge-label-color: #A5ABB3;
}

.theme-dark {
  --default: #DADEE3;
  --background-default: #394452;
  --background-light: #394452;

  --secondary-hover: #2C3A4B;

  --footer-bg: #545D69;

  --border-10: #858C94;

  --card-bg: #545D69;
  --form-background-color: #394452;
  --form-border-color: #858C94;

  --active-bg: #545D69;
  --hover-bg: #545D69;

  --list-border-color: #858C94;
  --inputgroup-ico-color:#DADEE3;

  --background-white: #545D69;
  --copyright-color: #DADEE3;
  --copyright-bg: #545D69;
  --download-bg: #545D69;

  --download-badge-bg: #394452;
  --download-badge-color: #A5ABB3;
  --download-thumbnail-bg: #394452;
  --download-thumbnail-color: #A5ABB3;
  
  --globalsearch-bg: #545d69;
  --search-bg: #394452;


  --nav-link-color: #A5ABB3;
  --nav-link-active-color: #DADEE3;
  --nav-divider: #858C94;


  --profile-thumbnail-border-color: #DADEE3;
  --profile-thumbnail-bg: #A5ABB3;

  --dropdown-bg: #394452;
  --dropdown-hover: #545d69;

  --contentlist-badge-bg: #2c3a4b;
  --contentlist-badge-label-color: #A5ABB3;



  .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
  .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    color: #DADEE3;
  }
  .nsmc-sidebar {
    border-right: 1px solid var(--border-10);
  }
  .nsmc-contentlist-header {
    background-color: var(--footer-bg);
  }
  .btn-outline-primary {
    --primary: #DADEE3;
  }
  .btn-secondary {
    --secondary: #394452;
  }
  .nsmc-navbar::before,
  .nsmc-sec-search::before {
    /* background-image: url(../img/); */
    /* content: '';
    display: block;
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); */
  }

  .nsmc-navbar .btn-outline-primary:hover {
    color: #394452 !important;
  }

  .datepicker table tr td.active:active, 
  .datepicker table tr td.active.highlighted:active, 
  .datepicker table tr td.active.active, 
  .datepicker table tr td.active.highlighted.active,
  .datepicker table tr td span.active:active:hover, 
  .datepicker table tr td span.active:hover:active:hover, 
  .datepicker table tr td span.active.disabled:active:hover, 
  .datepicker table tr td span.active.disabled:hover:active:hover, 
  .datepicker table tr td span.active.active:hover, 
  .datepicker table tr td span.active:hover.active:hover, 
  .datepicker table tr td span.active.disabled.active:hover, 
  .datepicker table tr td span.active.disabled:hover.active:hover, 
  .datepicker table tr td span.active:active:focus, 
  .datepicker table tr td span.active:hover:active:focus, 
  .datepicker table tr td span.active.disabled:active:focus, 
  .datepicker table tr td span.active.disabled:hover:active:focus, 
  .datepicker table tr td span.active.active:focus, 
  .datepicker table tr td span.active:hover.active:focus, 
  .datepicker table tr td span.active.disabled.active:focus, 
  .datepicker table tr td span.active.disabled:hover.active:focus, 
  .datepicker table tr td span.active:active.focus, 
  .datepicker table tr td span.active:hover:active.focus, 
  .datepicker table tr td span.active.disabled:active.focus, 
  .datepicker table tr td span.active.disabled:hover:active.focus, 
  .datepicker table tr td span.active.active.focus, 
  .datepicker table tr td span.active:hover.active.focus, 
  .datepicker table tr td span.active.disabled.active.focus, 
  .datepicker table tr td span.active.disabled:hover.active.focus {
    --active-label: #394452;
  }
  .datepicker table tr td.active:active:hover, 
  .datepicker table tr td.active.highlighted:active:hover, 
  .datepicker table tr td.active.active:hover, 
  .datepicker table tr td.active.highlighted.active:hover, 
  .datepicker table tr td.active:active:focus, 
  .datepicker table tr td.active.highlighted:active:focus, 
  .datepicker table tr td.active.active:focus, 
  .datepicker table tr td.active.highlighted.active:focus, 
  .datepicker table tr td.active:active.focus, 
  .datepicker table tr td.active.highlighted:active.focus, 
  .datepicker table tr td.active.active.focus, 
  .datepicker table tr td.active.highlighted.active.focus {
    --active-label: #394452;
  }
  .datepicker table tr td span.active:active, 
  .datepicker table tr td span.active:hover:active, 
  .datepicker table tr td span.active.disabled:active, 
  .datepicker table tr td span.active.disabled:hover:active, 
  .datepicker table tr td span.active.active, 
  .datepicker table tr td span.active:hover.active, 
  .datepicker table tr td span.active.disabled.active, 
  .datepicker table tr td span.active.disabled:hover.active {
    --active-label: #394452;
  }
  .nsmc-navbar .btn-icon.btn-outline-primary {
    border-color: transparent;
  }
  .nsmc-navbar .navbar-toggler {
    border: 1px solid var(--border-10);
  }

}