:root { --hue-color: 0; --colorTheme: hsl(var(--hue-color), 0%, 94%); --colorFont: hsl(var(--hue-color), 100%, 0%); --colorFontActive: #422e13; --fontsize: 53px; --colorButton: #7a7979; --colorFontButton: #fff; } body { /*font-family: 'Prompt';*/ } .table-finance-statement { box-shadow: 1px 1px 20px 3px rgb(22 94 161 / 15%); border-radius: 0.3rem; } .subtext_table td, .subtext_table th{ text-align: right; background-color: #F4FAFF; color: #0079C2; font-size: 26px; padding: 5px; } .numtext-table td{ background-color: white; text-align: right; font-size: 26px; border-top: 1px solid #f2f3f4; } .numtext-table th{ background-color: #F4FAFF; font-size: 26px; border-top: 1px solid #edf1f3; } .h_table th{ text-align: center; background-color: white; color: #0079C2; font-weight: bold; font-size: 28px; /* box-shadow: 0 15px 0 0 #0079c2; */ padding: 20px; vertical-align: bottom; border-bottom: 2px solid #08324b1f; border-top: 0; } .table-active th{ background-color: #CEECFF; color: #0079C2; font-weight: bold; font-size: 28px; } .table-active td{ background-color: #CEECFF; color: #0079C2; } .subtext2 th { padding-left: 20px; } .subtext3 th{ padding-left: 30px; } .tableFloatingHeaderOriginal td { background-color: #F4FAFF; border: 0px; } .tableFloatingHeaderOriginal th { background-color: white; border-bottom: none; border: 0px; } /*----------------------------------------------------------------------------------------------*/ /* finance-statement-download */ /*----------------------------------------------------------------------------------------------*/ .container-finance-statement-download { padding-right: 0px; padding-left: 0px; font-family: 'Kanit'; } .cover-finance-statement-download { margin-bottom: 100px; } .finance-statement-download { display: flex; vertical-align: middle; padding: 25px 0; border-radius: 5px; margin-bottom: 15px; } .finance-statement-download.color-1 { background-color: var(--colorTheme); border: 1px solid var(--colorTheme); } .finance-statement-download.color-2 { background-color: #f3f7ff; border: 1px solid #eef2f9; } .finance-statement-download .card-new { position: absolute; float: left; margin: auto; display: block; margin-left: 30px; margin-top: -35px; width:max-content !important; } .finance-statement-download .card-new p { position: absolute; top: 0; margin: 15px 0px 0px 7px; font-size: 14px; font-weight: 700; color: #fff; width: 100%; text-align: center; width: max-content !important; } .finance-statement-download .icon { float: left; margin: auto; display: block; margin-left: 11%; position: relative; top: 5px; width: max-content !important; } .finance-statement-download .name { float: left; margin: auto; display: block; margin-left: 25px; margin-right: 35px; width: max-content !important; } .finance-statement-download .name p { font-size: large; font-weight: 500; color: var(--colorFontActive); width: 160px; margin-bottom: auto; } .finance-statement-download .date { float: left; margin: auto; display: block; width: max-content !important; } .finance-statement-download .tyle { float: left; margin: auto; display: block; width: max-content !important; } .finance-statement-download .size { width: max-content !important; float: left; margin: auto; display: block; width: max-content !important; } .finance-statement-download .note { float: left; margin: auto; display: block; width: max-content !important; } .finance-statement-download .note p { width: 106px; } .finance-statement-download .bt-finance-statement-download { float: left; margin: auto; display: block; margin-right: 8%; width: max-content !important; } .finance-statement-download .bt-finance-statement-download a { background-color: var(--colorButton); border: 1px solid var(--colorButton); border-radius: 5px; font-size: large; font-weight: 400; color: var(--colorFontButton); box-shadow: 0 0 3px 1px rgb(8 2 42 / 4%); padding: 6px 30px; } .finance-statement-download .bt-finance-statement-download a:hover { opacity: 0.7; } .finance-statement-download p.t1 { font-size: medium; font-weight: 300; color: var(--colorFont); margin-bottom: 2px; margin-top: 5px; } .finance-statement-download p.t2 { font-size: large; font-weight: 400; color: var(--colorFontActive); margin-bottom: auto; white-space: nowrap; } @media (max-width: 991px) { .finance-statement-download { display: block; } .finance-statement-download .icon { margin-left: 120px; margin-top: 8px; } .finance-statement-download .name { float: none; float: unset; padding-left: 180px; margin-bottom: 15px; } .finance-statement-download .name p { font-size: large; width: 180px; } .finance-statement-download .date { margin-left: 205px; margin-bottom: 5px; } .finance-statement-download .tyle { float: none; float: unset; padding-left: 380px; margin-bottom: 5px; } .finance-statement-download .size { margin-left: 205px; } .finance-statement-download .note { float: none; float: unset; padding-left: 380px; } .finance-statement-download p.t1 { margin-top: 0px; } .finance-statement-download .bt-finance-statement-download { float: none; float: unset; margin-right: 30px; position: relative; } .finance-statement-download .bt-finance-statement-download a { position: absolute; right: 0; top: -175px; padding: 10px 30px; } } @media (max-width: 767px) { .finance-statement-download .card-new { margin-left: 15px; } .finance-statement-download .card-new img { width: 35px; } .finance-statement-download .card-new p { margin: 10px 0 0 0; font-size: 11px; } .finance-statement-download .icon { margin-left: 60px; margin-top: 6px; } .finance-statement-download .name { padding-left: 100px; } .finance-statement-download .name p { font-size: large; } .finance-statement-download .date { margin-left: 125px; } .finance-statement-download .tyle { padding-left: 270px; } .finance-statement-download .size { margin-left: 125px; } .finance-statement-download .note { padding-left: 270px; } .finance-statement-download .bt-finance-statement-download a { padding: 7px 25px; } } @media (max-width: 575px) { .container-finance-statement-download { padding-right: 15px; padding-left: 15px; } } @media (max-width: 480px) { .finance-statement-download .icon { margin-left: 50px; } .finance-statement-download .name { padding-left: 85px; } .finance-statement-download .date { margin-left: 60px; } .finance-statement-download .tyle { padding-left: 70%; } .finance-statement-download .size { margin-left: 60px; } .finance-statement-download .note { padding-left: 70%; } .finance-statement-download p.t2 { font-size: large; } .finance-statement-download .bt-finance-statement-download { position: static; margin-top: 30px; margin-right: 30px; margin-left: 110px; margin-bottom: 10px; } .finance-statement-download .bt-finance-statement-download a { position: static; padding: 5px 30px; font-size: large; } } @media (max-width: 425px) { .finance-statement-download .tyle { padding-left: 65%; } .finance-statement-download .note { padding-left: 65%; } .finance-statement-download .note p { width: 100px; } } /*----------------------------------------------------------------------------------------------*/ /* Dropdown */ /*----------------------------------------------------------------------------------------------*/ .texthead-finance-statement-download { font-size: 20px; font-weight: 400; color: var(--colorFont); float: left; margin-top: 10px; font-family: 'Kanit'; } .dropdown { --max-scroll: 8; --text: #3F4656; --border: #2F3545; --borderActive: #23C4F8; --background: #151924; --arrow: #165EA1; --arrowActive: #165EA1; --listText: #99A3BA; --listBackground: #F5F9FF; --listActive: #E4ECFA; --listTextActive: #6C7486; --listBorder: none; --textFilled: #99A3BA; } .dropdown select { display: none; } .dropdown > span { font-size: 28px; font-weight: bold; cursor: pointer; padding: 9px 16px; border-radius: 5px; display: block; position: relative; color: #165ea1; border: 0.5px solid #e1e1e1; transition: all 0.3s ease; width: 150px; margin-left: auto; margin: 0px 0 20px auto; } .dropdown > span:before, .dropdown > span:after { content: ""; display: block; position: absolute; width: 8px; height: 2px; border-radius: 1px; top: 50%; right: 15px; background: var(--arrow); transition: all 0.3s ease; } .dropdown > span:before { margin-right: 4px; transform: scale(0.96, 0.8) rotate(50deg); } .dropdown > span:after { transform: scale(0.96, 0.8) rotate(-50deg); } .dropdown ul { margin: 0; padding: 0; list-style: none; opacity: 0; visibility: hidden; position: absolute; max-height: calc(var(--max-scroll) * 42px); top: 45px; z-index: 1; right: 0; background: var(--listBackground); border-radius: 6px; overflow-x: hidden; overflow-y: auto; transform-origin: 0 0; transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.3s cubic-bezier(0.4, 0.6, 0.5, 1.32); transform: scale(0.8) translate(0, 4px); border: 1px solid var(--listBorder); width: 150px; border: 1px solid #dbe5f9; } .dropdown ul li { opacity: 0; transform: translate(6px, 0); transition: all 0.3s ease; } .dropdown ul li a { font-size: 28px; font-weight: bold; cursor: pointer; display: block; padding: 10px 16px; color: #165ea1; text-decoration: none; outline: none; position: relative; transition: all 0.3s ease; } .dropdown ul li a:hover { color: var(--listTextActive); } .dropdown ul li.active a { color: #165ea1; background: #caddff; } .dropdown ul li.active a:before, .dropdown ul li.active a:after { --scale: .6; content: ""; display: block; width: 10px; height: 2px; position: absolute; right: 17px; top: 50%; opacity: 0; background: var(--listText); transition: all 0.2s ease; } .dropdown ul li.active a:before { transform: rotate(45deg) scale(var(--scale)); } .dropdown ul li.active a:after { transform: rotate(-45deg) scale(var(--scale)); } .dropdown ul li.active a:hover:before, .dropdown ul li.active a:hover:after { --scale: .9; opacity: 1; } .dropdown ul li:first-child a { border-radius: 6px 6px 0 0; } .dropdown ul li:last-child a { border-radius: 0 0 6px 6px; } .dropdown.filled > span { color: #165ea1; } .dropdown.open > span { border-color: #165ea1; } .dropdown.open > span:before, .dropdown.open > span:after { background: var(--arrowActive); } .dropdown.open > span:before { transform: scale(0.96, 0.8) rotate(-50deg); } .dropdown.open > span:after { transform: scale(0.96, 0.8) rotate(50deg); } .dropdown.open ul { opacity: 1; visibility: visible; transform: scale(1) translate(0, 12px); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.4, 0.6, 0.5, 1.32); } .dropdown.open ul li { opacity: 1; transform: translate(0, 0); border-bottom: 1px solid #e2ecfa; } .dropdown.open ul li:nth-child(1) { transition-delay: 80ms; } .dropdown.open ul li:nth-child(2) { transition-delay: 160ms; } .dropdown.open ul li:nth-child(3) { transition-delay: 240ms; } .dropdown.open ul li:nth-child(4) { transition-delay: 320ms; } .dropdown.open ul li:nth-child(5) { transition-delay: 400ms; } .dropdown.open ul li:nth-child(6) { transition-delay: 480ms; } .dropdown.open ul li:nth-child(7) { transition-delay: 560ms; } .dropdown.open ul li:nth-child(8) { transition-delay: 640ms; } .dropdown.open ul li:nth-child(9) { transition-delay: 720ms; } .dropdown.open ul li:nth-child(10) { transition-delay: 800ms; } select { --text: #3F4656; --border: #2F3545; --background: #151924; } select.dropdown { padding: 9px 16px; border-radius: 6px; color: var(--text); border: 1px solid var(--border); background: var(--background); line-height: 22px; font-size: 16px; font-family: inherit; -webkit-appearance: none; } @media (max-width: 545px) { .texthead-finance-statement-download { margin-bottom: 20px; float: none; float: unset; } } @media (max-width: 425px) { .dropdown > span { width: auto; } .dropdown ul { width: 100%; } } .dataTables_processing { background: transparent !important; } table.dataTable tbody td { padding: 0px 0px !important; } table.dataTable tbody tr { background-color: transparent !important; } /*buttom select*/ select { /* font-size: large !important; width: 200px;*/ font-size: 16px; font-weight: 300; /*font-family: 'Prompt';*/ padding: 3px; } .btn-outline-primary { color: var(--colorButton); border-color: var(--colorButton); } .btn-outline-primary:hover { color: var(--colorButton); background-color: transparent; border-color: var(--colorButton); } .btn-outline-primary.focus, .btn-outline-primary:focus { box-shadow: 0 0 0 .2rem var(--colorButton); } .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show > .btn-outline-primary.dropdown-toggle { color: var(--colorButton); background-color: transparent; border-color: transparent } .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-primary.dropdown-toggle:focus { box-shadow: 0 0 0 .2rem var(--colorButton); } .btn-outline-primary.focus, .btn-outline-primary:focus { box-shadow: 0 0 0 .2rem var(--colorButton); } #tabledownload_paginate { display: none; }