@import url('fonts.css');
@import url('../dist/bootstrap/css/bootstrap.min.css');
@import url('../dist/owlcarousel/css/owl.theme.default.min.css');
@import url('../dist/owlcarousel/css/owl.carousel.min.css');
:root { --primary-font: 'Kanit', sans-serif, Arial, Helvetica; --gray: #696E82; --light-gray: #8b8b8b; --light-gray-1: #F4F4F4; --dark-violet: #2B308B; --blue: #368727; --light-blue: #EFF3FE; --deep-blue: #368727; --deep-pink: #FF2780; --green: #09B56F; --red: #E05858; }
body { color: var(--bs-black); font-family: var(--primary-font); font-weight: 400; overflow-x: hidden; position: relative; }
a { color: var(--bs-primary); }
a, a:hover { text-decoration: none; }
a:focus { outline: none; }
*:focus { outline: none; }
button:active, button:focus, .btn:active, .btn:focus { box-shadow: none !important; outline: none !important; }
.img-responsive, .navbar-brand > img { display: inline-block; }
img { display: inline-block; height: auto; max-width: 100%; }
h1, h2, h3, h4, h5, h6 { color: var(--dark-violet); font-family: var(--primary-font); font-weight: 700; text-transform: capitalize; }
h1 { font-size: 42px; }
h2 { font-size: 25px; text-transform: uppercase; }
p, li { color: var(--gray); font: 400 16px/1.5 var(--primary-font); overflow-wrap: break-word; word-wrap: break-word; }
.clearfix { clear: both; margin: 0px; padding: 0px; }

.navbar { background-color: var(--bs-white); border-bottom: 3px solid var(--blue); }
.navbar .btn { height: 38px; margin-left: 15px; padding: 0.375rem 2rem; }
.navbar img { height: 38px; }
.navbar .navbar-nav .nav-link { color: var(--bs-black); font-size: 16px; font-weight: 500; margin-right: 3rem; text-transform: uppercase; }
.navbar .navbar-nav .nav-link.active { color: var(--blue); }
.navbar .btn-link { background-color: var(--light-blue); border-color: var(--light-blue); padding: 5px 5px 5px 15px; text-decoration: none; }
.navbar .btn-link:focus { background-color: var(--light-blue) !important; border-color: var(--light-blue) !important; }
.navbar .dropdown img { height: 28px; }
.navbar .dropdown-toggle { color: var(--bs-black); }
.navbar .dropdown-toggle::after { background: url("../images/arw_dwn.svg") no-repeat center; border: inherit; height: 8px; margin-bottom: -3px; width: 14px; }
.dropdown-menu { min-width: 105px; }

.offcanvas { background-clip: inherit; }
#offcanvasNavbar .btn-close { background: url("../images/arw_cls.svg") no-repeat center; filter: brightness(0) invert(1); opacity: 1; }
.offcanvas.offcanvas-end, .offcanvas.offcanvas-start { display: none; }
.offcanvas.offcanvas-start .offcanvas-header { position: fixed; }
.offcanvas-body { height: 100vh; }
.offcanvas-body a { width: 100%; }
.offcanvas-body .dropdown-menu { min-width: 100%; }
.offcanvas-body .dropdown-toggle { color: var(--bs-white); }
.offcanvas-body .dropdown-toggle img { border: 2px solid var(--bs-white); border-radius: 100%; }
.offcanvas-body .dropdown-toggle::after { filter: brightness(0) invert(1); }
.offcanvas-body .btn.show { background-color: transparent; }

.offcanvas.offcanvas-start .avatar { color: var(--bs-white); font-size: 22px; font-weight: 500; text-align: center; text-transform: uppercase; width: 100%; }
.offcanvas.offcanvas-start .avatar span { background-color: var(--bs-white); border-radius: 50rem; color: var(--blue); font-size: 14px; padding: 0px 5px; }
.offcanvas.offcanvas-start .avatar figure img { border-radius: 100%; height: 102px; width: 102px; }

.btn-register { background-color: var(--deep-pink); border-color: var(--deep-pink); color: var(--bs-white); }
.btn-register:hover, .btn-register:focus { background-color: var(--deep-pink) !important; border-color: var(--deep-pink) !important; color: var(--bs-white) !important; }

.btn-primary { background-color: var(--blue); border-color: var(--blue); }
.btn-outline-light { border-color: var(--bs-white); color: var(--bs-white); text-transform: uppercase; }
.btn-save { background-color: var(--blue); border-color: var(--blue); color: var(--bs-white); font-size: 15px; text-transform: uppercase; }

.banner { background: url("../images/bnr.png") no-repeat top center / cover; clear: both; padding: 15% 0px; width: 100%; }
.banner h1 { color: var(--bs-white); text-transform: uppercase; }
.banner p { color: var(--bs-white); font-size: 20px; font-weight: 500; max-width: 45%; }
.banner .btn { font-weight: 500; letter-spacing: 1pt; text-transform: uppercase; width: 154px; }

.features { margin-top: -12%; }
.features .box { background-color: var(--bs-white); border-radius: 15px; box-shadow: 0px 2px 12px rgba(0, 0, 0, 9%); height: 275px; margin: 20px 10px; padding: 15px 50px; width: 97%; }
.features .box h3 { font-size: 22px; }

.owl-carousel .owl-item img { width: auto; }

.contract { clear: both; padding: 5% 0px; position: relative; width: 100%; }
.contract p { font-size: 18px; }
.contract .box { background-color: var(--bs-white); border-radius: 15px; box-shadow: 0px 2px 12px rgba(0, 0, 0, 9%); padding: 25px 25px; text-align: center; width: 100%; }
.contract .box img { max-width: 80px; }
.contract .box h4 { color: var(--blue); font-size: 22px; }
.contract .box p { font-size: 16px; font-weight: 500; margin: 0px; }
.contract .business { margin-right: -125px; }

.trade { background: url("../images/wvs.png") no-repeat bottom center / 100%; clear: both; padding: 5% 0px; position: relative; width: 100%; }
.trade .art { margin-left: -200px; }

.accordion-button { border-radius: 10px; font-size: 22px; font-weight: 500; }
.accordion-button:not(.collapsed) { background-color: transparent; border-radius: 10px 10px 0px 0px; box-shadow: none; color: var(--bs-white); font-weight: 700; }
.accordion-item { background: rgb(27,88,233); background: linear-gradient(0deg, rgba(27,88,233,1) 0%, rgba(88,178,255,1) 100%); border: inherit; border-radius: 10px; box-shadow: 0px 2px 13px rgba(0, 0, 0, 9%); margin-bottom: 1rem; }
.accordion-body { color: var(--bs-white); font-size: 17px; padding-top: 0px; }
.accordion-item:first-of-type .accordion-button, .accordion-item:last-of-type .accordion-button.collapsed { border-radius: 10px; }
.accordion-item:first-of-type, .accordion-item:last-of-type { border-radius: 10px; }
.accordion-button::after { background-image: url("../images/plus.png"); background-position: center; background-size: 16px; }
.accordion-button:not(.collapsed)::after { background-image: url("../images/minus.png"); }

 #back-to-top { border-radius: 100%; position: fixed; bottom: 20px; left: 20px; display: none; width: 62px; z-index: 1; }

.modal-dialog { max-width: 610px; }
.modal-content { border: 0; border-radius: 15px; }
.modal .nav-tabs .nav-link .btn-close { background-image: url("../images/icn_cls.svg"); opacity: 0; position: absolute; z-index: 1; }
.modal .btn-close:focus { box-shadow: inherit; }
.modal .nav-tabs { background-color: var(--light-gray-1); border-radius: 15px 15px 0px 0px; }
.modal .nav-fill .nav-item .nav-link, .modal .nav-justified .nav-item .nav-link { background-color: var(--light-gray-1); border-radius: 15px 15px 0px 0px; color: #B2B2B2; font: 500 16px var(--primary-font); text-transform: uppercase; }
.modal .nav-tabs .nav-link.active { background-color: var(--bs-white); color: var(--blue); }
.modal .nav-tabs .nav-link.active  .btn-close { opacity: 1; }
.modal-body.unbg { background: url("../images/un_bg.png") no-repeat left bottom / cover; border-radius: 0px 15px 0px 15px }
.modal-body h3 { color: var(--blue); font-size: 22px; font-weight: 500; text-transform: uppercase; }
.modal-body .tab-content > .active > .row { height: 420px; }
.modal-body .position-absolute img { width: 14px; }
.modal-body .form-control { background-color: var(--light-gray-1); border: inherit; border-radius: 50rem; color: #666666; font: 400 14px var(--primary-font); text-indent: 45px; text-transform: capitalize; }
.modal-body .form-control::placeholder { color: #B2B2B2; }
.modal-body .btn-primary { border-radius: 50rem; font: 500 14px var(--primary-font); text-transform: uppercase; }

.ban { background: url("../images/bnr.png") no-repeat top center / cover; clear: both; padding: 15% 0px 10px; width: 100%; }
.ban h1 { color: var(--bs-white); margin-bottom: 20%; text-transform: uppercase; }

.carousel-indicators [data-bs-target] { border: inherit; border-radius: 10px 10px; height: 8px; margin: 0px 6px; opacity: 1; width: 47px; }
.carousel-indicators .active { background-color: var(--deep-pink); }

.notify { background: rgb(21,61,170); background: linear-gradient(90deg, rgba(21,61,170,1) 0%, rgba(90,129,250,1) 100%); clear: both; color: var(--bs-white); font-size: 15px; padding: 0px 12px; position: relative; width: 100%; }
.notify .icon { background-color: rgb(21,61,170); padding: 10px 15px; }

.trading { background-color: var(--light-blue); clear: both; margin-bottom: 2rem; padding: 5% 0px; width: 100%; }
.trading .box { background-color: var(--deep-blue); border-radius: 10px; padding: 15px 15px; width: 100%; }
.trading .box figure { margin-bottom: 0.275rem; }
.trading .box figure img { opacity: 0.5; }
.trading .box h3 { color: var(--bs-white); font-size: 28px; }
.trading .box h4 { color: #95B8FF; font-size: 20px; margin-top: 5px; }
.trading .box h4 small { font-size: 14px; }
.trading .box p { color: #95B8FF; font-size: 16px; margin: 0px; text-align: right; }

#carouselLookup .carousel-caption { left: 10%; margin-bottom: 15%; right: 10%; text-align: left;  }
#carouselLookup h1 { color: var(--bs-white); font-size: 36px; text-transform: uppercase; }
#carouselLookup p { color: var(--bs-white); font-size: 18px; font-weight: 500; }
#carouselLookup, #carouselLookup img { border-radius: 20px; }

.reading { background-color: var(--light-blue); border-radius: 20px; box-shadow: 0px 2px 12px rgba(0, 0, 0, 9%); clear: both; margin-bottom: 50px; text-align: center; width: 100%; }
.reading .tab { color: var(--gray); font-size: 18px; font-weight: 500; text-transform: uppercase; }
.reading .tab .active { color: var(--deep-blue); font-weight: 700; }
.reading .head { background-color: var(--deep-blue); color: var(--bs-white); font-size: 17px; font-weight: 400; padding: 5px 0px; text-transform: capitalize; }
.reading .content { background-color: var(--bs-white); border-radius: 20px; height: 460px; overflow-y: auto; padding: 12px 12px; width: 100%; }
.reading .content .col-4 { font-size: 18px; line-height: 1.2; text-align: center; }
.reading .content .col-4:first-of-type { text-align: left; }
.reading .content .col-4:first-of-type img { float: left; margin-right: 15px; }
.reading .content .col-4:first-of-type small { font-size: 14px; }
.reading .content .col-4 span { font-size: 13px; }
.reading .content .btn { cursor: default; width: 86px; }
.reading .content a { color: var(--bs-black); }

.btn-green { background-color: var(--green); border: none; border-radius: 7px; color: var(--bs-white); }
.btn-green:hover, .btn-green:focus { background-color: var(--green) !important; color: var(--bs-white) !important; }
.btn-red { background-color: var(--red); border: none; border-radius: 7px; color: var(--bs-white); }
.btn-red:hover, .btn-red:focus { background-color: var(--red) !important; color: var(--bs-white) !important; }

.main { background: url("../images/mn_bg.jpg") no-repeat center bottom / 100%; clear: both; height: 100%; min-height: 100vh; width: 100%; }

.panel { background-color: var(--bs-white); border-radius: 20px; box-shadow: 0px 2px 12px rgba(0, 0, 0, 9%); clear: both; margin: 5% 0px; min-height: 500px; padding: 1.5rem 1.5rem; position: relative; width: 100%; }
.panel h4 { color: var(--bs-black); font-size: 18px; font-weight: 500; text-transform: uppercase; }
.panel p { font-size: 14px; }
.panel .subhead { color: var(--bs-black); font-size: 15px; font-weight: 500; text-transform: capitalize; }
.panel .frame, .modal .frame { background-color: var(--bs-white); border-radius: 10px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 16%); font-size: 16px; font-weight: 500; padding: 10px 20px; width: 100%; }
.panel .frame a, .modal .frame a { color: var(--bs-black); font-size: 16px; font-weight: 500; }
.panel .form-label { color: var(--bs-black); font-size: 15px; font-weight: 500; }
.panel .form-control, .panel .form-select { border: inherit; border-radius: 10px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 16%); color: var(--gray); font-size: 17px; line-height: 45px; padding: 5px 10px; width: 100%; }
.panel .lite { background-color: var(--light-blue); border-radius: 5px; color: var(--bs-black); line-height: 35px; }
.panel .btn-primary { background-color: var(--light-blue); border-color: var(--light-blue); border-radius: 10px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 16%); color: var(--bs-black); font-size: 18px; line-height: 38px; font-weight: 500; text-transform: uppercase; }
.panel .btn-primary:focus { background-color: var(--light-blue) !important; border-color: var(--light-blue) !important; box-shadow: 0px 3px 6px rgba(0, 0, 0, 16%) !important; color: var(--bs-black); }
.panel .btn-submit { background-color: var(--blue); border-color: var(--blue); border-radius: 10px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 16%); color: var(--bs-white); font-size: 18px; line-height: 38px; font-weight: 500; text-transform: uppercase; }
.panel .btn-submit:focus { background-color: var(--blue) !important; border-color: var(--blue) !important; box-shadow: 0px 3px 6px rgba(0, 0, 0, 16%) !important; color: var(--bs-white); }

.address { color: var(--gray); font-size: 14px; text-align: center; }
.upload { background-color: var(--light-blue); border-radius: 10px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 16%); color: var(--gray); font-size: 14px; display: block; padding: 30px 10px 10px; text-align: center; width: 100%;}
.upload a, .upload:hover { color: var(--gray); }
.upload img { margin-bottom: 5px; width: 20px; }
.success, .green { color: var(--green); text-align: center; }
.red { color: var(--red); text-align: center; }

.aset { clear: both; margin: 40px 0px; width: 100%; }
.aset .box { background-color: var(--light-blue); border-radius: 10px; padding: 12px 12px; text-align: center; width: 100%; }
.aset .box figure { margin: 0px 0px 0.5rem; }
.aset .box img { max-width: 75px; }
.aset .box h3 { color: var(--bs-black); font-size: 17px; font-weight: 500; text-transform: uppercase; }

.asset_table { background-color: var(--light-blue); border-radius: 20px; box-shadow: 0px 2px 12px rgba(0, 0, 0, 9%); clear: both; margin-bottom: 50px; text-align: center; width: 100%; }
.asset_table .head { background-color: var(--deep-blue); border-radius: 20px 20px 0px 0px; color: #ADB8E8; font-size: 17px; font-weight: 400; padding: 5px 0px; text-transform: uppercase; }
.asset_table .head .active { color: var(--bs-white); font-weight: 700; }
.asset_table .head .border-end { border-right-color: #ADB8E8 !important; }
.asset_table .content { background-color: var(--bs-white); border-radius: 20px; height: auto; padding: 12px 12px; width: 100%; }
.asset_table .content .col { font-size: 16px; }
.asset_table .content .col:first-child { color: var(--bs-black); font-size: 17px; font-weight: 500; }
.asset_table .content .col span { color: var(--gray); }

.profile { background-color: var(--bs-white); border-radius: 20px; box-shadow: 0px 2px 12px rgba(0, 0, 0, 9%); clear: both; margin: 7% 0px; min-height: 500px; padding: 1.5rem 1.5rem; position: relative; width: 100%; }
.profile .header { clear: both; color: var(--bs-black); font-size: 20px; font-weight: 500; margin: -4.5rem 0px 30px; text-transform: uppercase; width: 100%; }
.profile .header img { margin-right: 10px; vertical-align: text-bottom; width: 125px; }
.profile .header span { background-color: var(--blue); border-radius: 50rem; color: var(--bs-white); font-size: 12px; margin-left: 5px; padding: 0px 5px; }
.profile .header br { display: none; }

.prorow { background-color: var(--light-blue); border-radius: 7px; font-size: 16px; font-weight: 500; margin-bottom: 10px; padding: 8px 10px; width: 100%; }
.prorow .col img { margin-right: 5px; }
.prorow .not { color: var(--gray); text-align: right; }

.detail { color: var(--gray); }
.space { padding: 1rem 1.5rem 0rem; }

.contract-position { background-color: var(--light-blue); border-radius: 0px 0px 20px 20px; min-height: 540px; width: 100%; }
.contract-position .head { background-color: #2E3F8F; padding: 10px 0px; width: 100%; }
.contract-position table thead tr th { color: var(--bs-white); border: inherit; border-right: 1px solid #ADB8E8; font: 400 20px var(--primary-font); padding: 0px .5rem; text-align: center; }
.contract-position table thead tr th:last-child { border: inherit; }

.qrbox { margin: 0 auto; width: 246px; }

.quest { clear: both; margin-bottom: 0.5rem; width:100% }
.quest p { color: var(--bs-black); font-size: 17px; font-weight: 500; }
.awr p { font-size: 15px; }

.service { background-color: var(--bs-white); border-radius: 20px; box-shadow: 0px 2px 12px rgba(0, 0, 0, 9%); clear: both; margin: 5% 0px; min-height: 500px; position: relative; width: 100%; }
.service .head { background-color: var(--blue); border-radius: 20px 20px 0px 0px; padding: 0.5rem 1rem; text-align: center; width: 100%; }
.service .head h4 { color: var(--bs-white); font-size: 18px; font-weight: 500; text-transform: uppercase; }
.service .head .back { filter: brightness(0) invert(1); }

.chat-message { position: relative; display: flex; flex-direction: column; flex-grow: 1; flex-shrink: 1; overflow: hidden; align-items: end; align-self: stretch; justify-content: end; margin: 0px auto; padding-bottom: 15px; min-height: 365px; max-width: 80%; }
.message-row { position: relative; display: flex; flex-direction: column; flex-shrink: 1; overflow: hidden; align-items: stretch; padding-bottom: 8px; }
.bubble { background-color: var(--blue); border-radius: 50rem; color: var(--bs-white); font-size: 18px; margin-right: 30px; padding: 8px 30px; }
.bubble:after { background: url("../images/arw.svg") no-repeat 0% 0% / 30px 27px; content: ""; height: 27px; width: 30px; display: inline-block; position: absolute; right: 25px; bottom: 10px; }
.chatbox { background-color: var(--bs-white); border-radius: 10px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 16%); clear: both; position: relative; margin: 0px auto; padding: 8px 150px 8px 60px; width: 80%; }
.chatbox .form-control { border-color: var(--bs-white); font-size: 18px; }
.chatbox .form-control:focus { box-shadow: none; }
.chatbox .btn-primary { font-weight: 500; text-transform: uppercase; }

.transaction { background-color: var(--bs-white); border-radius: 20px; box-shadow: 0px 2px 12px rgba(0, 0, 0, 9%); clear: both; margin: 5% 0px; min-height: 500px; position: relative; width: 100%; }
.transaction h4 { color: var(--bs-black); font-size: 18px; font-weight: 500; margin: 0; padding: 1rem 1rem; text-transform: uppercase; }
.transaction .head { background-color: var(--deep-blue); color: #ADB8E8; font-size: 17px; font-weight: 400; padding: 10px 0px; text-align: center; text-transform: uppercase; }
.transaction .head .border-end { border-right-color: #ADB8E8 !important; }
.transaction .head .active { color: var(--bs-white); font-weight: 700; }
.transaction .detail { background-color: var(--light-blue); border-radius: 0px 0px 20px 20px; clear: both; min-height: 402px; padding: 1rem 1rem; width: 100%; }
.transaction .frame { background-color: var(--bs-white); border-radius: 10px; color: var(--bs-black); font-size: 16px; font-weight: 400; padding: 10px 20px; width: 100%; }

.badge { border-radius: 50rem; font-size: 14px; color: var(--bs-white); font-weight: 400; padding: 5px 15px; }
.badge.green { background-color: var(--green); }
.badge.red { background-color: var(--red); }

.main-panel {background-color: var(--bs-white); border-radius: 20px; box-shadow: 0px 2px 12px rgba(0, 0, 0, 9%); clear: both; margin: 5% 0px; min-height: 500px; padding: 1.5rem 4rem; position: relative; width: 100%; }
.main-panel h3 { color: var(--bs-black); font-size: 24px; font-weight: 500; }
.main-panel h3 small { color: var(--gray); font-size: 18px; }

.main-panel .btn-primary { background-color: var(--light-blue); border: inherit; color: var(--gray); }

.nav-pills .nav-link { background-color: var(--light-blue); border-radius: 50rem; color: var(--gray); font-weight: 500; margin: 0rem 0.5rem; text-transform: uppercase; width: 150px; }
.nav-pills .nav-link.active { background-color: var(--blue); border: inherit !important; color: var(--bs-white); }

.fstrade { background-color: var(--deep-blue); border-radius: 10px; padding: 15px 15px; width: 100%; }
.fstrade figure { margin-bottom: 0.275rem; }
.fstrade figure img { opacity: 0.5; }
.fstrade h3 { color: var(--bs-white); font-size: 28px; }
.fstrade h5 { color: #95B8FF; font-size: 20px; margin-top: 5px; }
.fstrade h4 small { font-size: 14px; }
.fstrade p { color: #95B8FF; font-size: 16px; margin: 0px; text-align: right; }

.position { border: 1px solid var(--deep-blue); border-radius: 50rem; color: var(--bs-black); font-size: 18px; padding: 2px 15px; text-transform: uppercase; }
.level { background-color: var(--light-blue); border-radius: 7px; color: var(--bs-black); font-size: 16px; padding: 8px 12px; width: 100%; }
.level span { color: var(--deep-blue); font-size: 20px; }

.btn-green, .btn-red { font-size: 19px; font-weight: 500; }
.btn-green { background-color: var(--green); }
.btn-red { background-color: var(--red); }
.btn-light { background-color: var(--light-blue); border: inherit; color: var(--bs-black); width: 58px; }
.btn-light:hover, .btn-light:focus { background-color: var(--light-blue); color: var(--bs-black); }
.btn-light.active { background-color: var(--deep-blue); color: var(--bs-white); }

.wide { width: 125px; }

.nav-direction .nav-link { border-radius: 7px; }
.nav-direction .nav-item:first-child .nav-link.active { background-color: var(--red); color: var(--bs-white); }
.nav-direction .nav-item:last-child .nav-link.active { background-color: var(--green); color: var(--bs-white); }

.tab-nav .nav-link { color: var(--bs-black); font-size: 18px; margin-right: 1.5rem; padding: 0.5rem 0px; text-transform: capitalize; }
.tab-nav .nav-link.active { border-bottom: 2px solid #5780F5; font-weight: 700; }

.input-group { background-color: var(--light-blue); color: var(--bs-black); font-size: 18px; }
.input-group .btn-number:focus { border-color: transparent; }
.input-group .input-number, .input-number { background-color: var(--light-blue); border: inherit; border-left: 1px solid var(--gray); border-right: 1px solid var(--gray); text-align: center; }
.form-number, .form-number:focus { background-color: var(--light-blue); border-radius: 0; border: inherit; text-align: center; }
.mx-center { position: absolute; margin-left: 20%; }

.nav-currency .nav-link { border-radius: 7px; }
.nav-currency .nav-item:first-child .nav-link.active { background-color: var(--green); color: var(--bs-white); }
.nav-currency .nav-item:last-child .nav-link.active { background-color: var(--red); color: var(--bs-white); }

.tab-currency .form-control, .tab-currency .form-select { background-color: var(--light-blue); border-color: var(--light-blue); color: var(--gray); font: 400 18px var(--primary-font); }

.order { color: var(--gray); }

.modal-confirmation .modal-header { background-color: var(--deep-blue); border-radius: 13px 13px 0px 0px; padding: 0.5rem 1rem; }
.modal-confirmation .modal-title { color: var(--bs-white); font-weight: 500; text-align: center; width: 100%; }
.modal-confirmation .btn-close { filter: brightness(0) invert(1); opacity: 1; }
.modal-confirmation .modal-body { padding: 1rem 4rem; }
.modal-confirmation .owl-stage-outer { padding: 5px 0px; }
.modal-confirmation .form-control { background-color: var(--bs-white); border-radius: 10px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 9%); line-height: 46px; text-indent: 15px; }
.modal-confirmation .btn-primary { line-height: 36px; font-size: 20px; text-transform: uppercase; }
.modal-confirmation .center br { display:none; }

.yields { border-radius: 10px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 9%); text-align: center; width: 100%; }
.yields div:first-child { background-color: #CCD0DE; border-radius: 10px 10px 0px 0px; color: var(--gray); padding: 15px 5px; }
.yields div:last-child { background-color: #E2E7F7; border-radius: 0px 0px 10px 10px; color: var(--gray); padding: 15px 5px; }
.yields.active div:first-child { background-color: var(--blue); color: var(--bs-white); }
.yields.active div:last-child { background-color: #7CA0FF; color: var(--bs-white); }

.modal-fast .btn-close {position: absolute; right: 12px; top: 12px; }
.modal-fast .modal-dialog { max-width: 680px; }
.modal-fast .modal-body h3 { color: var(--bs-black); font-size: 20px; font-weight: 500; }
.modal-fast .modal-body h3 small { color: var(--gray); font-size: 16px; }
.modal-fast .modal-body .fstrade h3 { color: var(--bs-white); font-size: 28px; }
.modal-fast .modal-body .position { border-color: var(--bs-black); font-size: 16px; }
.modal-fast .modal-body .level { background-color: transparent; }
.modal-fast .modal-body .level span { color: var(--gray); }
.modal-fast .nav-direction .nav-link { background-color: var(--light-blue); color: var(--gray); font-size: 16px; width: 130px; }
.modal-fast .form-control { background-color: var(--light-blue) !important; border-radius: 5px; text-indent: inherit; }
.modal-fast .nav-currency .nav-item .nav-link { background-color: var(--light-blue); border-radius: 7px !important; color: var(--gray); font-size: 16px; }

.modal-deposit .modal-dialog { max-width: 570px; }
.modal-deposit .modal-header .btn-close, .modal-deposit .modal-header a { filter: brightness(0) invert(1); opacity: 1; }
.modal-deposit .modal-header { background-color: var(--deep-blue); border-radius: 13px 13px 0px 0px; }
.modal-deposit .modal-title { color: var(--bs-white); font-weight: 500; text-align: center; text-transform: uppercase; width: 100%; }
.modal-deposit .modal-body { padding: 1rem 3rem; min-height: 600px; }
.modal-deposit .modal-body p { font-size: 18px; }
.modal-deposit .btn-primary { background-color: var(--light-blue); border-color: var(--light-blue); border-radius: 50rem; box-shadow: 0px 3px 6px rgba(0, 0, 0, 16%); color: var(--bs-black); font-size: 18px; line-height: 38px; font-weight: 500; text-transform: uppercase; }
.modal-deposit .btn-primary:focus { background-color: var(--light-blue) !important; border-color: var(--light-blue) !important; box-shadow: 0px 3px 6px rgba(0, 0, 0, 16%) !important; color: var(--bs-black); }
.modal-deposit .form-control { background-color: var(--light-blue); border: inherit; border-radius: 10px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 16%); color: var(--gray); font-size: 17px; line-height: 45px; padding: 5px 10px; text-indent: 15px; width: 100%; }
.modal-deposit .frm-blue { background-color: var(--light-blue); }
.modal-deposit .form-white { background-color: var(--bs-white); }
.modal-deposit .btn-submit { background-color: var(--blue); border-color: var(--blue); border-radius: 50rem; box-shadow: 0px 3px 6px rgba(0, 0, 0, 16%); color: var(--bs-white); font-size: 18px; line-height: 38px; font-weight: 500; text-transform: uppercase; }
.modal-deposit .btn-submit:focus { background-color: var(--blue) !important; border-color: var(--blue) !important; box-shadow: 0px 3px 6px rgba(0, 0, 0, 16%) !important; color: var(--bs-white); }
.modal-deposit .time { color: var(--gray); }
.modal-deposit .frame { border-radius: 7px; font-size: 12px; }
.modal-deposit .address { font-size: 18px; font-weight: 400; color: var(--bs-black); }
.modal-deposit span { color: var(--gray); }

/*-------------------
    Media Query
---------------------------*/

@media only screen and (max-width: 767px) {
    h2 { font-size: 22px; }
    p { font-size: 12px; }
    .navbar-toggler { border: inherit; }
    .navbar .d-flex { display: none !important; }
    .navbar-toggler-icon { background-image: url("../images/hamberger.svg"); }
    #offcanvasNavbar { background: rgb(41,109,238); background: linear-gradient(0deg, rgba(41,109,238,1) 0%, rgba(118,184,252,1) 50%, rgba(132,198,255,1) 100%); }
    #offcanvasNavbar .btn { font: 500 19px var(--primary-font); height: inherit; }
    .offcanvas-title { color: var(--bs-black); font-size: 22px; font-weight: 500; text-align: center; text-transform: uppercase; width: 100%; }
    .offcanvas-header .btn-close { background: url("../images/arw_cls.svg") no-repeat center; }
    .offcanvas.offcanvas-end, .offcanvas.offcanvas-start { display: block; width: 100%; }
    .offcanvas.offcanvas-start hr { border-color: var(--bs-white); opacity: 1; margin: 30px 0px; }
    .offcanvas.offcanvas-start .btn { text-transform: uppercase; }
    .offcanvas-body { padding: 1rem 4rem 1rem; }
    .offcanvas-body .form-label { color: var(--bs-black); font: 500 22px var(--primary-font); text-transform: capitalize; }
    .offcanvas-body .form-control { background-color: var(--light-blue); border: none; color: var(--gray); font: 400 19px var(--primary-font); }
    .offcanvas-body .btn { font: 400 19px var(--primary-font); margin: 0px; }
    .banner { background-size: 100% 100%; padding: 8% 0px; text-align: center; }
    .banner h1 { font-size: 20px; }
    .banner p { font-size: 11px; margin: 0px auto 1rem; max-width: 60%; }
    .features .box { height: 195px; padding: 12px 30px; max-width: 275px; }
    .features .box h3 { font-size: 17px; }
    .features .box p { font-size: 12px; }
    .owl-carousel .owl-item img { width: 47px; }
    .features { margin: 0px;  }
    .contract { overflow: hidden; }
    .contract h2 { text-align: center; }
    .contract p { font-size: 18px; text-align: center; }  
    .contract .business { margin-right: -85px; top: 125px !important; }
    .contract .box { padding: 15px 15px; }
    .contract .box img { max-width: 50px; }
    .contract .box h4 { font-size: 17px; }
    .contract .box p { font-size: 10px; }
    .trade { background-size: auto 290px; background-position: 40% bottom; }
    .trade h2, .trade p { text-align: center; }
    .accordion-button { font-size: 16px; }
    .accordion-body { font-size: 12px; }
    #back-to-top { bottom: 12px; height: 48px; right: 12px; width: 48px; }
    .ban { background-size: 100% 100%; padding: 12% 0px 0px; text-align: center; }
    .ban h1 { font-size: 20px; width: 75%; }
    .carousel-indicators [data-bs-target] { height: 5px; margin: 0px 3px; width: 32px; }
    .owl-carousel .owl-item figure img { width: auto; }
    #carouselLookup h1 { font-size: 18px; }
    #carouselLookup p { font-size: 10px; }
    #carouselLookup .carousel-caption { margin-bottom: 5%; }
    #carouselLookup, #carouselLookup img { border-radius: 9px; }
    .reading { border-radius: 10px; }
    .reading .tab { font-size: 14px; }
    .reading .head, .reading .content .col-4 { font-size: 12px; }
    .reading .p-4 { padding: 1rem !important; }
    .reading .content { border-radius: 7px; height: 390px; }
    .reading .content .col-4 { line-height: 1.1; padding: 0px .375rem; }
    .reading .content .col-4 span { font-size: 10px; }
    .reading .content .btn { font-size: 12px; line-height: 13px; width: 70px; }
    .reading .content .col-4:first-of-type img { margin-right: 4px; width: 24px; }
    .reading .content .col-4:first-of-type small { font-size: 8px; }
    .main { background: inherit; }
    .panel { border-radius: 0px; box-shadow: inherit; margin: 0px; padding: 3.5rem 0rem 1rem }
    .panel h4 { background-color: var(--deep-blue); color: var(--bs-white); left: 0; padding: 12px 12px; position: fixed; top: 0; width: 100%; }
    .panel .back { filter: brightness(0) invert(1); position: fixed; top: 10px; z-index: 1; }
    .panel .frame, .panel .frame a { font-size: 14px; }
    .panel .btn-primary, .panel .btn-submit { line-height: 32px; border-radius: 50rem; }
    .pb-sm-0 { padding-bottom: 0px !important; }
    .pt-sm-0 { color: var(--gray); padding-top: 0px !important; }
    .aset { margin-bottom: 1rem; }
    .aset .col { flex-basis: auto; }
    .aset .box { background-color: var(--bs-white); border-radius: 50rem; box-shadow: 0px 3px 6px rgba(0, 0, 0, 9%); margin-bottom: 1rem; text-align: left; }
    .aset .box h3 { font-size: 13px; }
    .aset .box figure img { float: left; margin-right: 15px; max-width: 40px; vertical-align: text-middle; }
    .asset_table .head { font-size: 14px; }
    .asset_table .content .col, .asset_table .content .col:first-child { font-size: 10px; padding: 0px 0.275rem; }
    .asset_table .p-4 { padding: 0.5rem !important; }
    .profile { padding: 10px; margin-top: 70px; }
    .profile .header { font-size: 15px; text-align: center; }
    .profile .header br { display: block;}
    .profile .header img { display: block; margin: 0 auto; max-width: 95px; }
    .profile .header span { font-size: 11px; }
    .prorow { font-size: 12px; }
    .prorow .not { display: none; }
    .prorow .col-1 { padding-left: 0.3px; }
    .panel select.lite { background-color: var(--bs-white); }
    .m-top  { margin-top: -50px; }
    .detail .success, .detail .red { margin-top: -20px; }
    .detail .col-8:first-child { color: var(--bs-black); }
    .space { padding: 0rem; }
    .panel .btn-blue { background-color: #368727; color: var(--bs-white); }
    .panel .btn-blue:focus { background-color: #368727 !important; color: var(--bs-white); }
    .panel .dropdown-toggle::after { background: url("../images/arw_dwn.svg") no-repeat center right; border: 0px; filter: brightness(0) invert(1); height: 8px; float: right; margin: 12px 15px 0px 0px; width: 14px; }
    .panel .dropdown-menu { border-radius: 0px 0px 22px 22px; border: 0px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 6%); min-width: 100%; }
    .panel .dropdown-item { color: var(--gray); font-size: 16px; font-weight: 500; text-align: center; }
    .icn-sm { width: 34px; }
    .add-card .lite { background-color: var(--bs-white); }
    .quest p { font-size: 14px; }
    .awr { background-color: var(--light-blue); border-radius: 7px; padding: 12px 12px; }
    .awr p { font-size: 13px; }
    .service { border-radius: 0px; box-shadow: inherit; min-height: 95vh; }
    .service h4 { background-color: var(--deep-blue); color: var(--bs-white); left: 0; padding: 12px 12px; position: fixed; top: 0; width: 100%; }
    .service .back { filter: brightness(0) invert(1); position: fixed; left: 12px; top: 10px; z-index: 1; }
    .chatbox { padding: 8px 150px 8px 0px; width: 100%; position: absolute; bottom: 10px; }
    .chatbox .btn { border-radius: 50rem; }
    .chatbox .btn span { display: none; }
    .chat-message { min-height: 80vh; }
    .transaction { border-radius: 0px; box-shadow: inherit; margin-top: 60px; }
    .transaction h4 { background-color: var(--deep-blue); color: var(--bs-white); left: 0; padding: 12px 12px; position: fixed; top: 0; width: 100%; }
    .transaction .back { filter: brightness(0) invert(1); position: fixed; padding: 0 !important; left: 12px; top: 10px; z-index: 1; }
    .transaction .head { background-color: transparent; font-size: 13px; }
    .transaction .head .border-end { border: inherit !important; }
    .transaction .head span { background-color: var(--light-blue); border-radius: 50rem; color: var(--gray); display: block; padding: 5px 15px; }
    .transaction .head .active span { background-color: var(--blue); color: var(--bs-white); }
    .transaction .frame { box-shadow: 0px 3px 6px rgba(0, 0, 0, 16%); font-size: 11px; }
    .transaction .detail { background-color: transparent; border-radius: 0px; padding: 0.5rem 0.5rem; }
    .transaction .frame .col-3, .transaction .frame .col-4, .transaction .frame .col-5 { padding: 0px 0.375rem }
    .transaction .frame .price { color: var(--gray); }
    .badge { font-size: 11px; padding: 3px 10px; }
    .main-panel { box-shadow: inherit; padding: 1rem 0.5rem; }
    .nav-pills .nav-link { font-size: 13px; margin: 0rem 0.275rem; width: 99px; }
    .position { background-color: var(--light-blue); border-color: var(--light-blue); font-size: 16px; }
    .level { background-color: transparent; font-size: 15px }
    .level span { color: var(--gray); font-size: 18px; }
    .tab-nav .nav-link { font-size: 14px; }
    .mx-center { position: relative; margin: 0px !important; }
    .modal-confirmation, .modal.show .modal-dialog { margin: 0px; }
    .modal-confirmation .modal-content { border-radius: 0; background-clip: none; height: 100%; min-height: 100vh; width: 100%; }
    .modal-confirmation .modal-header { border-radius: 0px; }
    .modal-confirmation .modal-body { padding: 1rem 1rem; }
    .modal-confirmation .center { text-align: center !important; }
    .modal-confirmation .center br, .modal-deposit .modal-body p br { display: block; }
    .modal-confirmation .note { color: var(--gray); }
    .yields { width: 55px; }
    .modal-fast, .modal.show .modal-dialog { margin: 0px; }
    .modal-fast .modal-content { border-radius: 0; background-clip: none; height: 100%; min-height: 100vh; width: 100%; }
    .modal-fast .btn-close { background: url("../images/arw_cls.svg") no-repeat center; position: absolute; left: 5px; right: inherit; top: 5px; }
    .modal-deposit .modal.show .modal-dialog { margin: 0px; }
    .modal-deposit .modal-content { border-radius: 0; background-clip: none; height: 100%; min-height: 100vh; width: 100%; }
    .modal-deposit .modal-header { border-radius: 0px; }
    .modal-deposit .modal-body { padding: 1rem 1rem; }
    .modal-deposit .modal-body p { font-size: 16px; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .navbar-toggler { border: inherit; }
    .navbar .d-flex { display: none !important; }
    .navbar-toggler-icon { background-image: url("../images/hamberger.svg"); }
    .offcanvas.offcanvas-end, .offcanvas.offcanvas-start { background: rgb(41,109,238); background: linear-gradient(0deg, rgba(41,109,238,1) 0%, rgba(118,184,252,1) 50%, rgba(132,198,255,1) 100%); display: block; }
    .offcanvas-body { padding: 1rem 4rem; }
    .offcanvas-body .btn { margin: 0px; }
    .panel .frame, .panel .frame a { font-size: 11px; }
    .asset_table .content .col, .asset_table .content .col:first-child { font-size: 15px; }
    .profile { padding: 15px; margin-top: 10%; }
    .profile .header { margin: -3rem 0px 30px; }
    .profile .header img { max-width: 80px; }
    .prorow { font-size: 12px; }
    .pb-sm-0 { padding-bottom: 0.5rem !important; }
    .pt-sm-0 { padding-top: 0.5rem !important; }
    .contract-position table thead tr th { font-size: 14px; }
    .icn-sm { width: 34px; }
    .transaction .frame { font-size: 11px; }
    .main-panel { padding: 1rem 1rem; }
    .nav-pills .nav-link { font-size: 14px; margin: 0rem 0.275rem; width: 102px; }
    .position { background-color: var(--light-blue); border-color: var(--light-blue); font-size: 16px; }
    .level { font-size: 15px }
    .level span { font-size: 18px; }
    .btn-light { width: 50px; }
}

@media only screen and (min-width: 992px) and (max-width: 1180px) {
	.panel .frame, .panel .frame a { font-size: 15px; }
    .contract-position table thead tr th { font-size: 16px; }
    .transaction .frame { font-size: 15px; }
    .nav-pills .nav-link { width: 139px; }
    .main-panel { padding: 1rem 1rem; }
    .btn-light { width: 52px; }
}