@import "google-fonts.css";
@import "font-awesome.css";

body, body.site{
  font-family: 'Noto Sans Thai', 'IBM Plex Sans';
  font-size: 14px;
}

h1, h2, h3{
  font-family: 'Noto Sans Thai', 'IBM Plex Sans';
}

a.brand-logo:hover{ text-decoration: none; border: none; }
a.brand-logo img{ height:80px; }

div.xflow{ cursor: grab; overflow-x: auto; }
div.xflow table{ overflow-x: auto; }

header.container-header{
  background: none;
  border-top: 3px solid #832E79;
}
header .brand-logo, header a.brand-logo{
  color: #000000!important;
  text-decoration: none;
}
header a{
  color: #AAAAAA;
}
header a:hover, header a:visited:hover, header .container-nav .nav a:hover, header .container-nav .nav a:visited:hover {
  color: #832E79;
  border-bottom: 3px solid #832E79;
}

header .container-nav .nav a{
  color: #AAAAAA;
}


.iest.login .login-border{
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  -o-border-radius: 8px;
  box-shadow: 0px 5px 15px rgb(0,0,0,0.15);
  padding: 30px 40px;
  width: 492px;
  min-height: 400px;
  margin: auto;
}
.iest.login .login-column{
  border: 0px solid green;
  width: 492px;
  margin-left: auto;
  margin-right: auto;
}
.iest.login input{
  font-family: 'Poppins', IBM Plex Sans, Noto Sans Thai;
}
.iest.login .login-btn{
  border-radius: 30px;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  -o-border-radius: 30px;
  box-shadow: 0px 2px 3px rgb(0, 0, 0, 0.15);
  width: 100%;
  min-height: 55px;
  font-weight: bold;
}

.center, div.center, input.center{
  text-align: center;
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.view-login a.brand-logo{ display: none; }    

.auto-center {
  margin-left: auto;
  margin-right: auto;
}

div.login-h1{ font-size: 28px; font-weight: bold; }
div.login-h2{ font-size: 24px; font-weight: bold; }
div.login-h3{ font-size: 20px; font-weight: bold; }
div.login-sub-h{ font-size: 18px; }

.iest .btn{
  margin: 0px;
  font-family: 'Poppins', IBM Plex Sans, Noto Sans Thai;
}

.btn.btn-submit{
  background-color: #832E79;
  color: #FFFFFF;
}

.com-users-login__options a{
  font-family: 'Poppins', IBM Plex Sans, Noto Sans Thai;
  font-size: 14px;
  text-decoration: none;
  color: #832E79;
}

.site-grid{ grid-gap:0 0em;grid-template-columns:[full-start] minmax(0,1fr) [main-start] repeat(4,minmax(0,25%)) [main-end] minmax(0,1fr) [full-end] }

body.wrapper-fluid .grid-child{ max-width:none }
body.wrapper-fluid footer>.grid-child, body.wrapper-fluid header>.grid-child{ padding-left:2em;padding-right:2em }

body:not(.has-sidebar-left) .site-grid .container-component{ grid-column-start:main-start }
body:not(.has-sidebar-right) .site-grid .container-component{ grid-column-end:main-end }

.site-grid{ margin-bottom:auto }

.containers{
    /*border: 1px solid red;*/
}
.containers .tmpl-container{
    /*border: 1px solid green;*/
    max-width: 1320px;
    width: 1150px;
    transition: width .4s linear;
}

.sidebar.open ~ .tmpl-container{
    width: 1150px;
}
.sidebar ~ .tmpl-container{
    width: 1320px;
}

.scroll::-webkit-scrollbar {
    width: 12px;
    height: 8px;
}
.scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
    border-radius: 0px;
}
.scroll::-webkit-scrollbar-thumb {
    border-radius: 0px;
    -webkit-box-shadow: inset 0 0 10px rgba(145,145,145,0.1);
}
.scroll:hover::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
    border-radius: 0px;
}
.scroll:hover::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 10px rgba(145,145,145,.9);
    border-radius: 0px;
}


@supports (display: grid) {
  .site-grid {
    display: grid;
    grid-gap: 0 0em;
  }
  .site-grid > [class^=container-],
.site-grid > [class*=" container-"] {
    width: 100%;
    max-width: none;
    -webkit-column-gap: 1em;
       -moz-column-gap: 1em;
            column-gap: 1em;
  }
  .site-grid > .full-width {
    grid-column: full-start/full-end;
  }
  @media (min-width: 992px) {
    .site-grid {
      grid-template-areas: ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". side-l comp comp side-r ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b .";
    }
  }
}

.grid-child{ display:flex;margin-left:auto;margin-right:auto;max-width:none!important;width:100%; }