@import url("/OutSystemsUIWeb/Theme.BaseTheme.css?8965");

@font-face {
  font-family: "Kanit";
  src: url("/CTC/Kanit-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Kanit-ExtraLight";
  src: url("/CTC/Kanit-ExtraLight.ttf") format("truetype");
}
@font-face {
  font-family: "Kanit-Light";
  src: url("/CTC/Kanit-Light.ttf") format("truetype");
}

:root {
  --color-primary: #0057b8;
  --color-primary-hover: #0564b9;
  --color-secondary: var(--color-neutral-10);
  font-family: Kanit-Light;
}

.modal-wrapper {
  max-width: 90%;
  max-height: 90%;
}

.qq-upload-button {
    float: none;
    margin: 0;
    text-align: left;
}

.input-Search {
  border-radius: 25px !important;
  border: solid 1px #d4d4d4;
  background-color: #ffffff;
}

.tabs .tabs-header {
  z-index: 1;
}

div.calendar {
  z-index: 999;
}

.tablet .menu-icon,
.phone .menu-icon {
  margin-left: 10px;
}

.layout-top .content .ThemeGrid_Container {
  margin: 0 auto;
  padding: 0px;
}

.CRContainer {
  text-align: center;
}

@media only screen and (max-width: 1024px) {
  .CRContainer {
    max-width: 80px !important;
    text-align: left;
  }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .layout-top .content .ThemeGrid_Container {
    margin: 0 auto !important;
    padding: 0px !important;
  }
  .content-bottom {
    height: 100px !important;
  }
}

.phone .Menu_TopMenu,
.tablet .Menu_TopMenu {
  height: auto !important;
}

.Scroll_bar {
  max-width: 100%;
  overflow-x: scroll;
}

.header .Menu_TopMenu:hover span,
.header .Menu_TopMenu.Menu_TopMenuActive span {
  color: var(--color-primary);
}

.CTCTopMenu {
  text-align: center;
  color: #000000;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.52px;
  line-height: 1.22;
}

.CTCSubMenu {
  padding: var(--space-s) var(--space-base) var(--space-s) var(--space-base);
  background-color: #0057b8 !important;
  color: #fff !important;
  font-size: 16px !important;
}

.CTCSubMenu:hover {
  color: lightblue !important;
}

.CTCBalloonMenu {
  padding: var(--space-s) var(--space-base) var(--space-s) var(--space-base);
  background-color: #0057b8;
  color: #fff !important;
  font-size: 16px !important;
}

.CTCBalloonMenu a span {
  color: #fff !important;
}

.CTCBalloonMenu a span:hover {
  color: lightblue !important;
}

.Menu_DropDownArrow {
  display: none !important;
}

.Menu_DropDownPanel {
  background-color: transparent !important;
  border: 0 !important;
  height: 800px !important;
  box-shadow: none !important;
  margin-top: 2px !important;
}

.Menu_DropDownPanel .balloon-content {
    padding: 0px !important;
}

.Menu_DropDownPanel .tippy-tooltip {
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.gallery-item {
  margin-top: 0 !important;
}

.TopMenuLink1 {
  color: #ffffff;
  font-family: Kanit;
  font-size: 16px;
}

.TopMenuLink2 {
  color: #ffffff !important;
  font-family: Kanit;
  padding-left: 8px;
  font-size: 16px;
}

.TopMenuLink2::before {
  content: "- ";
}

.TopMenuLink3 {
  padding-left: 12px;
  color: #ffffff !important;
  font-family: Kanit-Light;
  font-size: 16px;
  padding-top: 4px !important;
  padding-bottom: 0px !important;
}

.Search-title {
  font-family: Kanit;
  font-size: 16px;
  color: #000000;
}

.ModalTitle {
  font-size: 20px;
  font-weight: bold;
}
.containerMain {
  background-image: linear-gradient(to bottom, #ffffff, #fbfbfb);
  box-shadow: 0 -8px 12px 0 rgba(0, 0, 0, 0.05);
  ---comment-5: /*margin-left: 137px;width: 1165px;margin-right: 138px;*/ ;
  /*display: inline !important;*/
  height: Fill;
  margin-right: 5%;
  width: auto;
  margin-left: 5%;
}

.FavDeselect {
  background-color: #fff;
  color: #0057b8;
  border: solid 1px #979797;
  border-radius: 4px;
}

.FavSelect {
  background-color: #0057b8;
  color: #fff;
  border: solid 1px #979797;
  border-radius: 4px;
}

.PrimaryTitle {
  font-family: Kanit;
  font-size: 24px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.67px;
  color: var(--color-primary);
}
.SecondaryTitle {
  font-family: Kanit;
  font-size: 24px;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.67px;
  color: var(--color-secondary);
}
.ModalTitle {
  font-family: Kanit;
  font-size: 20px;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.67px;
  color: #000000;
}
.SecondaryContainer {
  border-bottom: 1px dashed gray;
  margin-bottom: 10px;
  padding: 0px 0px 15px 0px;
}

.Button-Link {
    color: #fff;
    border: 0px;
    height: 40px;
    padding: 0px 52px;
    border-radius: 20px;
    cursor: pointer;
    background: linear-gradient(to left, #0057b8, #0090dd);
}

.Button-Link-disable {
    color: #fff;
    border: 0px;
    height: 40px;
    padding: 0px 52px;
    border-radius: 20px;
    cursor: pointer;
    background: #f3f6f8;
}

.Button-Search {
    color: #fff;
    border: 0px;
    height: 40px;
    width: 150px;
    border-radius: 20px;
    cursor: pointer;
    background: linear-gradient(to left, #0057b8, #0090dd);
}

.button-cancel {
    color: var(--color-neutral-7);
    border: var(--border-size-s) solid var(--color-neutral-7) !important;
    background: #fff;
    height: 40px;
    width: 150px;
    border-radius: 20px;
    cursor: pointer;
}

.input-style{
    border-radius: 20px;
}

.pdf-color {
    color: #CC4B4C;
}

.required:after {
    content: "*";
    color: #BF1601;
    font-size: 12px;
    font-weight: normal;
}

.Button-Download {
    font-size: 14px;
    color: #000000;   
}

.Button-Delete {
    font-size: 14px;
    color: #ff0000 !important; 
}

.BottomNav {
    padding-top: 16px;
    padding-bottom: 16px;
}

.NavLeft .ListNavigation_Wrapper {
    justify-content: flex-start !important;   
}

.TableHeaderContainer {
    height: 48px;
    width: 100%;
}

.TableContentContainer {
    height: 400px;
    overflow-y: auto;
}

.TableNavigationContainer {
    margin-top: 10px;
    background-color: #fff;
    height: 48px;
}

.video-size-xs{
max-height: 150px;
max-width: 266px;
}

.video-size-s{
max-height: 300px;
max-width: 530px;
}

.video-size-m{
max-height: 450px;
max-width: 800px;
}

/* Absolute Center CSS Spinner */
 .loading {
     position: absolute;
     z-index: 999;
     height: 2em;
     width: 2em;
     overflow: show;
     margin: auto;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
}
/* Transparent Overlay */
 .loading:before {
     content: '';
     display: block;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0,0,0,0.3);
}
/* :not(:required) hides these rules from IE9 and below */
 .loading:not(:required) {
    /* hide "loading..." text */
     font: 0/0 a;
     color: transparent;
     text-shadow: none;
     background-color: transparent;
     border: 0;
}
/* Animation */
 .loading {
     width: 80px;
     height: 80px;
     position: relative;
     margin: 400px auto;
}
.double-bounce1, .double-bounce2 {
     width: 100%;
     height: 100%;
     border-radius: 50%;
     background-color: #0057b8;
     opacity: 0.6;
     position: absolute;
     top: 0;
     left: 0;
     -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
     animation: sk-bounce 2.0s infinite ease-in-out;
}
 .double-bounce2 {
     -webkit-animation-delay: -1.0s;
     animation-delay: -1.0s;
}
.toggle-button .checkbox{
    left:0px;
}
.container-extra{
    background-color: #fff;
    position: relative;
}
@media only screen and (min-width: 700px) {
    .container-extra{
        margin-top: -70px !important;
    }
}
.border-card-none{
    border: none !important;
}
 @-webkit-keyframes sk-bounce {
     0%, 100% {
         -webkit-transform: scale(0.0) 
    }
     50% {
         -webkit-transform: scale(1.0) 
    }
}
 @keyframes sk-bounce {
     0%, 100% {
         transform: scale(0.0);
         -webkit-transform: scale(0.0);
    }
     50% {
         transform: scale(1.0);
         -webkit-transform: scale(1.0);
    }
}
.specialistTitle {
  /*width: 106px;*/
  height: 35px;
  font-family: Kanit;
  font-size: 24px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #000000;
  margin-left: 25px;
}
.btnCan {
  width: 93px;
  height: 40px;
  background-color: #fff;
  border-radius: 20px;
  border: solid 1px #666666;
  text-align: center;
  color: #666666;
  font-size: 14px;
  cursor: pointer;
}
.hide{
    display: none;
}
.showFloatingActions{
    display: flex;
}