@font-face {
  font-family: NotoSansThai-Regular;
  src: url(../font/NotoSansThai-Regular.ttf);

  font-family: 'Material Icons Outlined';
  font-style: normal;
  font-weight: 400;
  /* src: url(../iconfont/MaterialIconsOutlined-Regular.otf); For IE6-8 */
  src: local('Material Icons Outlined'),
    local('MaterialIconsOutlined-Regular'),
    /* url(../iconfont/MaterialIconsOutlined-Regular.otf) format('opentype'), */
    url(../iconfont/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2) format('woff2'),
    url(../iconfont/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf) format('truetype');
}


.material-symbols-outlined {
  font-family: 'Material Icons Outlined';
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';

}

body {
    font-family: NotoSansThai-Regular;
}

.btn-float {
    height: 120;
    margin: 24px;
    border-radius: 8px;
    line-height: 120px; 
    text-align: center;
}

.main {
    background-color: rgb(244, 244, 244);
    min-height: 100%;
    width: 100%;
}


#content {
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    width: 100vw;
}

.color-primary {
    color: #444444;
    background-color: #FDA2A2;
}

.color-outline-primary {
    color: #c07474;
    border: 1px solid #FDA2A2;
}

.color-secondary {
    background-color: #D7BDBD;
}

#loading {
    /* display: block; */
    position: fixed;
    top: 0;
    /* left: 0; */
    z-index: 100;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    background-repeat: no-repeat;
    background-position: center;
}

.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


@media only screen and (max-width: 600px) {
    #head {
        margin-left: 0px;
    }
    body {
        padding-bottom: 96px;
    }
}


@media only screen and (min-width: 600px) {
    #order_col {
        height: 95vh;
    }
    #order_overflow {
        height: 85vh;
    }
    #summary_col {
        height: 60vh;
    }
    .overflow-auto {
        min-height: 50vh;
    }
}