@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai+Looped:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans+Thai:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
   --main-theme-color: #FF6700; /* Default color */
   --secondary-theme-color: #FF670033;
}

body {
   /* min-width: 820px; */
   overflow-x: auto;
   overflow-y: auto;
}

*{
   font-family: "Noto Sans Thai Looped", sans-serif;
   font-weight: 300;
   font-style: normal;
}

#main-container {
   margin-top: 58px !important;
   min-height: calc(100vh - 250px);
   background-color: #FAFAFA;
}
.search-container {
   height: 750px;
   width: 100%;
   background-image: url("../assets/bg-image.svg");
   background-size: cover;
   background-repeat: no-repeat;
}

.category-box div{
   /* max-width: 90px;           
   display: -webkit-box;      
   -webkit-line-clamp: 2;     
   -webkit-box-orient: vertical; 
   overflow: hidden;          
   text-overflow: ellipsis; 
   text-align: center;
   color: #00000080;
   margin-top: 5px; */
   font-weight: 600;
}

.category-box {
   text-align: center;
   margin-top: auto;
   margin-bottom: auto;
   padding: 5px 7px 5px 7px;
   /* padding: 20px; */
   margin-right: 16px;
   cursor: pointer;
}

.category-box.active {
   background-color: #EFEFEF;
   border-radius: 20px;
}

.category-wrapper {
   transform: translateY(-50px);
   max-width: 98%;
   overflow-x: auto;
   border: 1px solid #A3A3A329;
   background-color: rgba(255, 255, 255, 0.386);
   border-radius: 12px;
}

.filter-box {
   width: 280px;
}

.doc-description-text {
   color: #FF6700;
   font-size: 14px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden; 
}

.doc-title-display {
   display: -webkit-box;      /* Enables multi-line ellipsis */
   -webkit-line-clamp: 2;     /* Number of lines to show */
   -webkit-box-orient: vertical; /* Box orientation for ellipsis */
   overflow: hidden;          /* Hide overflowing content */
   text-overflow: ellipsis; 
}

.font-size-12 {
   font-size: 12px;
}

.bottom-divider {
   border-bottom: 1px solid #A3A3A329;
}

.no-decoration {
   text-decoration: none;
   text-transform: none;
   color: black;
}

.footer {
   background-color: #033249;
   height: fit-content;
   position: relative;
   bottom: 0 !important;
   padding-left: 10%;
   padding-right: 1%;
   padding-top: 6px;
   padding-bottom: 50px;
}

.footer .row {
   max-width: 100vw;
}

.footer div {
   color: white;
   margin-top: 14px;
}

.search-content {
   width: 500px;
   margin: auto;
   text-align: center;
   transform: translateY(80%);
}

.search-content .header {
   font-size: 46px;
   font-weight: 700;
   background: conic-gradient(from 199.01deg at 82.21% 70.83%, #FF6700 -71.7deg, #033249 43.56deg, #FF6700 288.3deg, #033249 403.56deg);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.search-content .description {
   color: #00000080;
   overflow-wrap: break-word;
   word-wrap: break-word;
   white-space: normal;
   width: 100%;
}

#button-search {
   background-color: #043249;
   color: white;
   font-weight: 500;
   padding: 10px;
   padding-left: 20px;
   padding-right: 20px;
   font-size: 14px;
}

.input-group-text.white {
   background-color: white !important;
   border-right: none !important;
   padding-left: 10px;
   padding-right: 0px;
}

.search-ui .form-control {
   border-left: none !important;
}

.category-menu {
   height: 60px;
   /* transform: translateY(-50px);
   max-width: 98%;
   overflow-x: auto;
   border: 1px solid #A3A3A329;
   background-color: white;
   border-radius: 12px; */
}

.category-menu > div {
   display: flex;
}

.sort-btn {
   background-color: white;
   border-color: #A3A3A329;
   padding-left: 10px;
   padding-right: 10px;
}

.input-group.search-data .input-group-text, .input-group.search-data .form-control{
   border: none !important;
   background: transparent !important;
}

.input-group.search-data {
   border-radius: 30px;
   border: 1px solid #bcbcbc29;
   padding: 6px;
   background-color: white;
}

.input-group.search-data.nav {
   padding: 2px !important;
   height: 40px !important;
   background-color: white !important;
}

.input-group.search-data .form-control::placeholder {
   color: #60606029;
   font-weight: 200 !important;
}

.divider {
   border-bottom: 1px solid #A3A3A329;
}

.site-header-nav {
   background-color: #FAFAFA;
}

#button-login, #button-copy {
   background-color: var(--main-theme-color);
   color: white;
   width: 84px !important;
   min-width: 84px !important;
   border-color: var(--main-theme-color) !important;
   height: 40px !important;
   font-size: 14px !important;
}

#button-copy {
   width: 100px !important;
}

.detail-container {
   background-color: white;
}

.open-detail:hover {
   /* box-shadow: 10px 5px 5px rgba(166, 166, 166, 0.56); */
   background-color: #EFEFEF;
   border-radius: 12px;
}

.file-name {
   text-decoration: none;
}

.text-primary {
   color: var(--main-theme-color) !important;
}

.file-size {
   color: #00000073;
   font-size: 14px;
}

.cursor-pointer {
   cursor: pointer;
}

#detail-abstract, #detail-abstract-alt, #detail-title, #detail-title-alt {
   width: 70% !important;
}

.detail-header.head {
   font-weight: 600;
   font-size: 24px;
   max-width: 97%;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden; 
}

#button-copy {
   height: 32px !important;
   padding-top: 4px !important;
}

#go-to-home {
   color: #00000073;
}

table.detail-table {
   border-collapse: separate;
   border-spacing: 0;
 }

.detail-table  td {
   border: 1px solid #A3A3A329;
   border-style: none solid solid none;
   padding: 10px;
 }
 .detail-table:not(.file-table) td:first-child { border-right: none !important; }
 .detail-table tr:first-child td:first-child { border-top-left-radius: 10px; }
 .detail-table tr:first-child td:last-child { border-top-right-radius: 10px; }
 
 .detail-table tr:last-child td:first-child { border-bottom-left-radius: 10px; }
 .detail-table tr:last-child td:last-child { border-bottom-right-radius: 10px; }
 
 .detail-table tr:first-child td { border-top-style: solid; }
 .detail-table tr td:first-child { border-left-style: solid; }

.bg-badge {
   background-color: #F2F2F2 !important;
   color: black;
}

.pagination .page-link{
   color: black;
   border: none !important;
   background: transparent !important;
}

.pagination .page-item.active{
   color: var(--main-theme-color);
   background-color: var(--secondary-theme-color);
   border-radius: 6px;
}

.pagination .page-item.active>.page-link{
   color: var(--main-theme-color);
}

@media (max-width: 800px) {
   .search-content .header {
       font-size: 36px;
   }
   .search-content {
       width: 400px;
       margin-left: 25% !important;
   }
}

@media (max-width: 768px) {
   .filter-box{
       width: 100%;
   }
   .dropdown-filter-menu {
       display: inline-block !important;
   }
   .detail-container {
       display: block !important;
   }
   .detail-container .image-data{
       text-align: center;
   }

   .detail-container .detail-table{
       margin-left: 0px !important;
   }
   .footer .row {
       max-width: 90vw;
   }
}

@media (max-width: 600px) {
   .search-content .header {
       font-size: 36px;
   }
   .search-content {
       width: 300px;
       margin-left: 25% !important;
   }
   .full-menu {
       font-size: 14px !important;
   }

   .full-menu button{
       font-size: 14px !important;
   }
}

@media (max-width: 500px) {
   .search-content .header {
       font-size: 22px;
   }
   .search-content {
       width: 250px;
       margin-left: 20% !important;
   }
   .full-menu {
       display: none !important;
   }
   #responsive-menu {
       display: block !important;
   }
   .site-header-nav {
       padding-left: 10px !important;
       padding-right: 10px !important;
   }
   .footer {
       padding-left: 10px !important;
   }
}

input::placeholder{
   color: #00000033 !important;
}

.btn.btn-link{
   text-decoration: none !important;
   color: black;
   font-weight: 300 !important;
   margin-top: 1px;
}

.form-control:focus {
   box-shadow: none !important;
}

.sort-menu.active {
   background-color: #EFEFEF;
   color: black;
}

.select-widget-type-label{
   align-self: center !important;
}

.select-widget-type-label.active{
   background-color: #033249;
   color: white !important;
}

.select-widget-type-label.disable{
   pointer-events: none !important;
   background-color: #818181 !important;
}

.select-widget-type-label:first-of-type{
   border-top-left-radius: 12px !important;
   border-bottom-left-radius: 12px !important;
   border: 1px solid #033249 !important;
   border-top-right-radius: 0px !important;
   border-bottom-right-radius: 0px !important;
}

.select-widget-type-label:last-of-type{
   border-top-right-radius: 12px !important;
   border-bottom-right-radius: 12px !important;
   border: 1px solid #033249 !important;
   border-top-left-radius: 0px !important;
   border-bottom-left-radius: 0px !important;
}

.preview-web-container {
   height: 94.5dvh;
   width: 100%;
   background-color: #FFFAEC;
}

.preview-web-container .header {
   font-size: 72px;
   font-weight: 700;
   color: #3d3d3d;
   text-align: center;
   /* transform: translateY(140%); */
   padding-top: 30dvh;
}

#main-nav.preview-nav{
   text-align: center;
   color: #3d3d3d;
   display: block !important;
   font-size: 20px;
   font-weight: 600;
   border-bottom: 2px solid #A3A3A329;
}

#in-widget-position {
   position: fixed !important;
   bottom: 36px;
   right: 40px;
   flex-direction: column;
   z-index: 9999;
}