/* Common ==> Column ===================================================*/ .com-sel { margin-bottom:50px} .search-padding .com-sel { margin-bottom:0} /* for "search.html" only */ #body.en .com-sel h1 { float:left; margin-right:10px; line-height:1.2} #body.cn .com-sel h1 { float:left; margin-right:10px; line-height:1.2} .com-sel .sel-items { float:left; margin-right:10px; /* z-index: 100; */ } .search-and-go a.btns { margin-left:5px; margin-bottom:0;} .com-sel .cs-float-l { float:left} /* width ---------------------------------------------*/ .width-issued { width:200px} .width-year { width:200px} .width-categories { width:400px} .width-events { width:220px} .width-search-cat { width:400px} .width-search-drug { width:350px} .width-google-result { width:450px} /* Common ==> Select Style (issued by/year) ===================================================*/ .select { top:0px; margin-bottom:0; height:40px; padding:5px 40px 5px 15px; line-height:1.8; font-family: 'Lexend Deca Regular', "Helvetica Neue","Helvetica","Arial",sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .select::after { content:""; width:12px; height:12px; position:absolute; display:block; right:15px; top:14px; background-repeat:no-repeat; background-size:contain; background-position:right center; transition:transform 300ms ease; } .select-down { background-color:#ececec; margin-top:1px; line-height:1.4;} .select-down a { text-decoration:none; padding:10px 15px; border-bottom:1px solid #fff; display: flex; align-items: flex-start;} .select-down a img { width:25px; height:25px; margin-right:10px; margin-top:-2px; opacity:0.55; display:inline-block;} .select-down a:hover img { opacity:1} .select-down a img+div { width:calc(100% - 25px);} .select-down a div { width:100%;} .select-down a img.for-general { display:block;} .select-down a img.for-hover { display:none;} .select-down a:hover img.for-general { display:none;} .select-down a:hover img.for-hover { display:block;} #body.en .select {line-height:1.9} #body.cn .select {line-height:1.8; font-weight:bold} .dropdownwrp-btn { cursor: pointer; z-index: 31; } .dropdownwrp{ display: none; position: absolute; left: 0; top: 100%; width: 100%; z-index:1000; } .dropdownwrp .a-option.clicked .clicked-img, .dropdownwrp .a-option .click-img{ display: block; } .dropdownwrp .a-option.clicked .click-img, .dropdownwrp .a-option .clicked-img{ display: none; } /* Common ==> Input Style (Search) ===================================================*/ input { width:300px; height:40px; padding:10px 15px; font-family: 'Lexend Deca Regular', "Helvetica Neue","Helvetica","Arial",sans-serif; font-size:inherit; color:#333} input[type="text"] { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} input[type="search"] { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px #49a5b2 inset; color:#fff} #body.cn ::placeholder { font-weight:bold } /* Theme Style ===================================================*/ #body.theme1 .theme-style input[type="text"] { color:#567798; background-color:#bde5fd;} #body.theme2 .theme-style input[type="text"] { color:#fff; background-color:#49a5be;} #body.theme1 .theme-style input[type="search"] { color:#567798; background-color:#bde5fd;} #body.theme2 .theme-style input[type="search"] { color:#fff; background-color:#49a5be;} #body.theme1 .theme-style input::placeholder { color:#567798; opacity: 1} #body.theme1 .theme-style input:-ms-input-placeholder { color:#567798;} #body.theme1 .theme-style input::-ms-input-placeholder { color:#567798;} #body.theme2 .theme-style input::placeholder { color:#fff; opacity: 1} #body.theme2 .theme-style input:-ms-input-placeholder { color:#fff;} #body.theme2 .theme-style input::-ms-input-placeholder { color:#fff;} #body.theme1 .theme-style input:-webkit-autofill, #body.theme1 .theme-style input:-webkit-autofill:hover, #body.theme1 .theme-style input:-webkit-autofill:focus, #body.theme1 .theme-style input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px #bde5fd inset; color:#567798; -webkit-text-fill-color: #567798 } #body.theme2 .theme-style input:-webkit-autofill, #body.theme2 .theme-style input:-webkit-autofill:hover, #body.theme2 .theme-style input:-webkit-autofill:focus, #body.theme2 .theme-style input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px #49a5b2 inset; color:#fff; -webkit-text-fill-color: #fff} #body.theme1 .theme-style .select-down a, #body.theme2 .theme-style .select-down a, #body.theme1 .white-style .select-down a, #body.theme2 .white-style .select-down a { color:#666;} #body.theme1 .theme-style .select { background-color:#bde5fd; color:#567798;} #body.theme1 .theme-style .select::after { background-image:url(images/arrow-left-blue.svg); } #body.theme1 .theme-style .select-down a:hover { background-color:#567798; color:#fff; text-decoration:none; transition: all 0.3s ease-out;} #body.theme2 .theme-style .select { background-color:#49a5be; color:#fff;} #body.theme2 .theme-style .select::after { background-image:url(images/arrow-left-white.svg); } #body.theme2 .theme-style .select.open::after { transform: rotate(90deg); } #body.theme2 .theme-style .select-down a:hover { background-color:#0c6e88; color:#fff; text-decoration:none; transition: all 0.3s ease-out;} /* Gray Style ===================================================*/ #body.theme1 .gray-style .select-down a, #body.theme2 .gray-style .select-down a { color:#666;} #body.theme1 .gray-style .select, #body.theme2 .gray-style .select, #body.theme1 .gray-style input[type="text"], #body.theme2 .gray-style input[type="text"], #body.theme1 .gray-style input[type="search"], #body.theme2 .gray-style input[type="search"] { background-color:#ddd; color:#333;} #body.theme1 .gray-style .select::after, #body.theme2 .gray-style .select::after { background-image:url(images/arrow-left-black.svg); } #body.theme1 .gray-style .select-down a:hover, #body.theme2 .gray-style .select-down a:hover { background-color:#666; color:#fff; text-decoration:none; transition: all 0.3s ease-out;} #body.theme1 .gray-style input::placeholder, #body.theme2 .gray-style input::placeholder { color:#333; opacity: 1} #body.theme1 .gray-style input:-ms-input-placeholder, #body.theme2 .gray-style input:-ms-input-placeholder { color:#333;} #body.theme1 .gray-style input::-ms-input-placeholder, #body.theme2 .gray-style input::-ms-input-placeholder { color:#333;} /* White Style ===================================================*/ #body.theme1 .white-style .select-down a, #body.theme2 .white-style .select-down a { color:#666; border-bottom: 1px solid #fff;} #body.theme1 .white-style .select, #body.theme2 .white-style .select, #body.theme1 .white-style input[type="text"], #body.theme2 .white-style input[type="text"], #body.theme1 .white-style input[type="search"], #body.theme2 .white-style input[type="search"] { background-color:#fff; color:#333;} #body.theme1 .white-style .select::after, #body.theme2 .white-style .select::after { background-image:url(images/arrow-left-black.svg); } #body.theme1 .white-style .select-down a:hover, #body.theme2 .white-style .select-down a:hover { background-color:#ececec; color:#333; text-decoration:none; transition: all 0.3s ease-out;} #body.theme1 .white-style input::placeholder, #body.theme2 .white-style input::placeholder { color:#333; opacity: 1} #body.theme1 .white-style input:-ms-input-placeholder, #body.theme2 .white-style input:-ms-input-placeholder { color:#333;} #body.theme1 .white-style input::-ms-input-placeholder, #body.theme2 .white-style input::-ms-input-placeholder { color:#333;} #body.theme1 .white-style .select-down { background-color:#fff; margin-top:1px; line-height:1.4; -webkit-box-shadow: 5px 5px 1px 0px rgba(50, 50, 50, 0.13); -moz-box-shadow: 5px 5px 1px 0px rgba(50, 50, 50, 0.13); box-shadow: 5px 5px 1px 0px rgba(50, 50, 50, 0.13);} #body.theme1 .white-style .select-down a { text-decoration:none; padding:10px 15px; border-bottom: 1px solid #ececec; } /* Selected item ---------------------------------------------*/ .selected-items { margin:10px 0 0 0; font-size:90%} .sel-item { float:left; margin-right:30px; margin-bottom:10px;} .sel-item img { width:18px; height:18px; float:left;} .clicked-item { float:left; margin-left:10px} .sel-item:hover { color:#666; cursor:pointer;} .label-result { background-color:#add4eb; color:#13426b; padding:2px 10px; font-weight:600; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } table.result { width:100%; border-collapse:collapse; border:none; margin-top:20px;} table.result tr td { vertical-align:top; text-align:left;} table.result tr td:first-child { min-width:100px} /* ========================================================================== Media ============================================================================= */ @media only screen and (max-width:1300px) { .width-search-cat { width:320px} .width-search-drug { width:280px} } @media only screen and (max-width:1200px) { .com-sel .search-categories.sel-items, .com-sel .search-drug.sel-items, .search-keyword .sk-col1 { width:calc(50% - 10px)} .width-search-cat, .width-search-drug { width:100%} .com-sel .search-keyword.sel-items { width:100%; margin-top:10px;} .search-keyword .sk-col1 input { width:100%} .search-and-go a.btns { margin-left:10px;} .width-search-cat, .width-search-drug { width:100%} } @media only screen and (max-width:1024px) { .width-issued { width:150px} .width-year { width:150px} .width-categories { width:400px;} input { width:280px} } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { .select { top:0px; height:40px; line-height:2.4} .select::after { top:14px;} } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) { } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) { } @media only screen and (max-width:767px) { .com-sel { margin-bottom:30px} .com-sel .search-keyword.sel-items { margin-top:0;} .com-sel h1, .com-sel .sel-items { width:100%; margin-right:0; margin-bottom:10px} .com-sel .sel-items.search-and-go { margin-bottom:0;} .com-sel .sel-items.search-and-go a.btns { margin-top:0;} .com-sel .sel-items.search-and-go input { margin-bottom:10px} .search-and-go a.btns { margin-left:0; margin-top:5px; width:100%;} .com-sel .search-categories.sel-items, .com-sel .search-drug.sel-items, .search-keyword .sk-col1 { width:100%} .com-sel .cs-float-l, input { width:100%} .com-sel .cs-float-l .btns { text-align:center} .width-issued, .width-year, .width-categories, .width-events, .width-search-cat, .width-search-drug, .width-google-result { width:100%} table.result, table.result tbody, table.result tbody tr, table.result tbody tr td, table.result tr td:first-child { width:100%; display:block;} .sel-item { margin-bottom:0; margin-top:8px; display:inline-flex} .label-result { padding:2px 8px} }