@font-face {
    font-family: 'TitilliumWeb';
    src: url('../fonts/TitilliumWeb/TitilliumWeb-Regular.ttf');
}

@font-face {
    font-family: 'TitilliumWeb_bold';
    src: url('../fonts/TitilliumWeb/TitilliumWeb-Bold.ttf');
}

@font-face {
    font-family: 'TitilliumWeb_semibold';
    src: url('../fonts/TitilliumWeb/TitilliumWeb-SemiBold.ttf');
}

@font-face {
    font-family: 'Arial_bold';
    src: url('../fonts/Arial-Bold.ttf');
}

@font-face {
    font-family: 'OpenSans_Regular';
    src: url('../fonts/OpenSans-Regular.ttf');
}

@font-face {
    font-family: 'OpenSans_ExtraBold';
    src: url('../fonts/OpenSans-ExtraBold.ttf');
}

html {
    position: relative;
    min-height: 100%;
}
body {
    background: #F4F5F8;
    font-family: 'TitilliumWeb';
    font-weight: 400;
    color: #000F33;
    position: relative;
}
/* Scroll Bar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #99A9B433;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #99A9B480;
    border: 0px solid transparent;
    border-radius: 8px;
    background-clip: padding-box;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #99A9B480;
    border: 0px solid transparent;
    border-radius: 8px;
    background-clip: padding-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
    font-family: 'TitilliumWeb';
    color: #0848A4;
}
:focus-visible {
    outline: none;
}
a {
    color: #000F33;
    -webkit-transition: color 400ms, background-color 400ms;
    -moz-transition: color 400ms, background-color 400ms;
    -o-transition: color 400ms, background-color 400ms;
    transition: color 400ms, background-color 400ms;
    outline: none !important;
    text-decoration: none;
}
a:hover,
a:focus {
    text-decoration: none;
    /*color: #fff !important;*/
    outline: none !important;
}
.fw-bold, b, strong {
    font-family: 'TitilliumWeb_bold' !important;
}
.bootstrap-select .dropdown-toggle:focus {
    outline: none !important;
}
.center {
    text-align: center;
}
div {
    position: relative;
}
.g-10, .gy-10 {
    --bs-gutter-y: 10px;
}
.g-10, .gx-10 {
    --bs-gutter-x: 10px;
}
.g-20, .gy-20 {
    --bs-gutter-y: 20px;
}
.g-20, .gx-20 {
    --bs-gutter-x: 20px;
}
table {
    border-collapse: unset;
    text-indent: unset;
    border-spacing: 0;
    min-width: 800px;
}
.datepicker table {
    min-width: auto;
}
th, td {
    color: #000F33;
    font-family: 'TitilliumWeb';
    position: relative;
}
.table {
    margin-bottom: 0;
}
.table>:not(caption)>*>* {
    border: 0;
}
.table>thead>tr>th {
    font-size: 16px;
    font-family: 'TitilliumWeb_bold';
    line-height: 18px;
    padding: 11px 5px;
    border-bottom: 0;
    background: #E4EDF5;
}
.table>thead>tr>td {
    font-size: 16px;
    font-family: 'TitilliumWeb_bold';
    line-height: 18px;
    padding: 5px 5px;
    border-bottom: 0;
    background: #E4EDF5;
}
.table>tbody>tr>th {
    font-size: 16px;
    line-height: 18px;
    padding: 11px 5px;
    border-bottom: 1px solid #D5D5D5;
    background: #fff;
}
.table>tbody>tr>td {
    font-size: 16px;
    line-height: 18px;
    padding: 11px 5px;
    border-bottom: 1px solid #D5D5D5;
    background: #fff;
}
.table>thead>tr>td .btn {
    font-family: 'TitilliumWeb';
}
.table>thead>tr:first-child>th:first-child {
    border-top-left-radius: 10px;
}
.table>thead>tr:first-child>th:last-child {
    border-top-right-radius: 10px;
}
.table>thead>tr>th:first-child, .table>thead>tr>td:first-child, .table>tbody>tr>td:first-child {
    padding-left: 20px;
}
.table>thead>tr>th:last-child, .table>thead>tr>td:last-child, .table>tbody>tr>td:last-child {
    padding-right: 20px;
}
.table>tfoot>tr>td:first-child, .table>tfoot>tr>td:last-child {
    padding: 0px;
}
.table>tfoot>tr>td {
    font-size: 16px;
    line-height: 18px;
    padding: 0;
}
.table td > a {
    display: inline-block;
    vertical-align: top;
    height: 18px;
    line-height: 18px;
}
.table td > a:not(:first-child) {
    margin-left: 8px;
}
.table td > *:first-child {
    margin-right: 0;
}
.table td a.page-link, .table td a.btn {
    height: auto;
}
.list_table_wrapper table thead tr td:first-child:last-child {
    text-align: right;
    padding: 5px 20px;
}
tfoot tr td .showing_records {
    line-height: 18px;
    margin-top: 26px;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
}
.pagination {
    float: right;
    margin: 20px 0 0;
    position: sticky;
    right: 0;
}
td .pagination ~ .pull-right {
    display: inline-block;
    vertical-align: top;
    float: left;
    position: sticky;
    left: 0;
}
.page-link:focus, .page-link:hover {
    z-index: 0;
    color: #000F33;
    background-color: #016BFF33;
    outline: none;
    box-shadow: none;
    font-family: 'TitilliumWeb_bold';
}
.table-bordered>thead>tr>th, .table-bordered>thead>tr>td,
.table-bordered>tbody>tr>th, .table-bordered>tbody>tr>td,
.table-bordered>tfoot>tr>th, .table-bordered>tfoot>tr>td {
    border: 0 !important;
    padding: 16px 10px;
    line-height: 18px;
}
.table-bordered>thead>tr>td:first-child, .table-bordered>thead>tr>th:first-child,
.table-bordered>tbody>tr>td:first-child, .table-bordered>tbody>tr>th:first-child,
.table-bordered>tfoot>tr>td:first-child, .table-bordered>tfoot>tr>th:first-child,
.table-bordered>thead>tr>td:last-child, .table-bordered>thead>tr>th:last-child,
.table-bordered>tbody>tr>td:last-child, .table-bordered>tbody>tr>th:last-child,
.table-bordered>tfoot>tr>td:last-child, .table-bordered>tfoot>tr>th:last-child {
    padding: 16px 10px;
}
.pagination>li>a, .pagination>li>span {
    background: #FFFFFF;
    border: 1px solid #000F33 !important;
    color: #000F33;
    font-size: 14px;
    line-height: 18px;
    padding: 5px 0px;
    min-width: 30px;
    text-align: center;
    border-radius: 50% !important;
    margin-left: 1px !important;
}
.page-item:first-child .page-link {
    margin-left: 0px !important;
}
.page-item:first-child .page-link {
    font-size: 0;
}
.page-item:last-child .page-link{
    font-size: 0;
}
.page-item:first-child .page-link::before, .page-item:last-child .page-link::before{
    font-family: "Font Awesome 6 Free";
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    line-height: 18px;
    text-rendering: auto;
    font-size: 12px;
    vertical-align: top;
    color: #000F33;
    font-weight: 900;
}
.page-item:first-child .page-link::before{
    content: "\f060";
}
.page-item:last-child .page-link::before{
    content: "\f061";
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    background: #016BFF33;
    color: #000F33;
    font-family: 'TitilliumWeb_bold';
}
.alert {
    font-size: 16px;
    color: #000F33;
    background: #EBD6FF;
    border-color: #EBD6FF;
    padding: 16px 20px;
    line-height: 20px;
    border-radius: 10px;
}
label {
    font-size: 16px;
    font-weight: normal;
    font-family: 'TitilliumWeb';
    vertical-align: top;
    line-height: 18px;
}
.form-control-label {
    font-size: 16px;
    font-weight: normal;
    font-family: 'TitilliumWeb_bold';
}
.btn {
    padding: 9px 20px !important;
    line-height: 20px !important;
    margin-right: 8px;
    outline: none !important;
}
.btn:last-child {
    margin-right: 0;
}
.btn > .fa, .btn > .fas, .btn > .far, .btn > .faa {
    margin-right: 6px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
}
.btn > .fa-plus {
    font-size: 26px;
}
.btn {
    min-width: 120px;
    border-radius: 10px;
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline: none !important;
    box-shadow: none !important;
}
.modal-header {
    border-bottom: 1px solid #000f331a;
    padding: 16px 50px 16px 20px;
    position: relative;
    text-align: left;
}
.modal-title {
    font-size: 20px;
    font-family: 'TitilliumWeb_bold';
    color: #000F33;
    width: 100%;
    line-height: 26px;
}
.modal-body {
    padding: 20px 20px;
    font-size: 16px;
}
.modal-footer {
    text-align: left;
    padding: 16px 16px;
}
.modal-header button[data-bs-dismiss] {
    position: absolute;
    right: 18px;
    top: 18px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 20px;
    color: #000F33;
    opacity: 0.5;
}
.modal-header button[data-bs-dismiss]:hover {
    opacity: 1;
}
.modal-header button[data-bs-dismiss].close span {
    font-size: 20px;
    line-height: 20px;
    vertical-align: top;
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
}
.maintenance_container {
    margin: auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
    width: 70%;
    max-width: 1050px;
    min-height: 500px;
    background-color: rgba(0, 0, 0, 0.5);
    overflow-wrap: break-word;
}
.welcome_title {
    font-size: 30px;
    font-family: 'OpenSans_ExtraBold';
    margin-bottom: 18px;
    color: #fff;
}
.login_content {
    font-size: 16px;
    font-family: 'OpenSans_Regular';
    margin-bottom: 38px;
    color: #fff;
}
.checkbox_wrapper {
    width: 26px;
    height: 26px;
    line-height: 24px;
    margin-right: 10px !important;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    position: relative;
    border: 1px solid #C7D2E6;
    background: #fff;
    border-radius: 5px;
    text-align: center;
}
.checkbox_wrapper:last-child {
    margin-right: 0 !important;
}
input[type=checkbox] {
    position: absolute;
    top: 0;
    left: 0;
    width: 26px;
    height: 26px;
    opacity: 0;
    z-index: 1;
    cursor: pointer;
}
.checkbox_wrapper:has(input[type=checkbox]:checked)::after {
    border-color: #016BFF;
    color: #016BFF;
    content: "\f14a";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 28px;
    width: 26px;
    height: 26px;
    display: inline-block;
    vertical-align: top;
    margin-left: -1px;
    margin-top: -1px;
    line-height: 26px;
    border-radius: 5px;
}
.checkbox_content_wrapper label {
    margin-top: 3px;
    cursor: pointer;
    width: calc(100% - 38px);
}
.nav-tabs {
    border-bottom: 1px solid #016BFF;
    margin-bottom: 30px;
}
.nav-tabs > li {
    font-size: 16px;
}
.nav-tabs > li > a {
    border-radius: 10px 10px 0 0;
    border: 1px solid #808799;
    border-bottom: 0;
    color: #808799;
    line-height: 18px;
    padding: 10px 20px;
    display: inline-block;
    vertical-align: top;
    margin-bottom: -1px;
}
.nav-tabs > li > .active {
    border-color: #016BFF;
    color: #016BFF;
}
.fs0 {
    font-size: 0;
}
.help-block {
    font-size: 14px;
    margin: 0;
}
.has-error .help-block {
    margin: 6px 0;
    display: block;
    color: #BF0000;
    line-height: 14px;
}
.dropdown-toggle {
    padding-right: 18px;
}
.dropdown_arrow {
    font-size: 8px;
    vertical-align: top;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.dropdown.open .dropdown_arrow {
    transform: translateY(-50%) rotate(180deg);
    -o-transform: translateY(-50%) rotate(180deg);
    -moz-transform: translateY(-50%) rotate(180deg);
    -webkit-transform: translateY(-50%) rotate(180deg);
}
.dropdown-menu {
    min-width: auto;
    border: 0;
    padding: 0;
    border-radius: 10px;
    box-shadow: 0px 3px 6px #00113B1A;
}
.dropdown-menu.inner {
    max-height: 200px !important;
}
.dropdown-menu > li {
    border-bottom: 0;
}
.dropdown-menu > li:first-child {
    border-radius: 10px 10px 0 0;
}
.dropdown-menu > li:last-child {
    border-bottom: 0;
    border-radius: 0 0 10px 10px;
}
.dropdown-menu > li > a {
    padding: 8px 10px;
    line-height: 18px;
    color: #000F33;
    display: block;
}
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
    background: #E6F0FF;
    color: #000F33 !important;
    outline: none;
}
.dropdown-menu.hover_light_blue > li > a:focus, .dropdown-menu.hover_light_blue > li > a:hover {
    background: #E6F0FF;
    color: #000F33 !important;
    outline: none;
}
.dropdown-menu > li.selected > a {
    background: #E6F0FF !important;
    color: #000F33 !important;
}
.dropdown-menu > li.selected > a:hover {
    background: #E6F0FF !important;
    color: #000F33 !important;
}
hr {
    border-top: 1px solid #99a9b480;
    border-bottom: 0;
}
.gradiant {
    background-image: -moz-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
    background-image: -webkit-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
    background-image: -ms-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
}
.gradiant-horizontal {
    background-image: -moz-linear-gradient(4deg, #2caab3 0%, #2c8cb3 100%);
    background-image: -webkit-linear-gradient(4deg, #2caab3 0%, #2c8cb3 100%);
    background-image: -ms-linear-gradient(4deg, #2caab3 0%, #2c8cb3 100%);
}
.section-header {
    margin-bottom: 50px;
}
.section-header .section-title {
    font-size: 44px;
    color: #272727;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 20px;
    margin: 0 0 20px;
}
.section-header .section-title:before {
    content: "";
    position: absolute;
    width: 140px;
    bottom: 0;
    left: 50%;
    margin-left: -70px;
    height: 1px;
    background: #ebebeb;
}
.section-header .section-title:after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    bottom: -11px;
    left: 50%;
    margin-left: -12px;
    border: 5px solid #fff;
    border-radius: 20px;
    background: #45aed6;
}
.btn.btn-primary {
    background: #016BFF;
    color: #fff !important;
    border: 1px solid #016BFF;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus {
    background: #014BB3 !important;
    color: #fff !important;
    border: 1px solid #014BB3 !important;
}
.btn.btn-default {
    background: #fff;
    color: #016BFF;
    border: 1px solid #016BFF;
}
.btn.btn-default:hover,
.btn.btn-default:focus {
    background: #016BFF !important;
    color: #fff !important;
    border: 1px solid #016BFF;
}
.dropdown-toggle.btn-default:hover,
.dropdown-toggle.btn-default:focus {
    background: #fff !important;
    color: #000F33 !important;
}
.btn-info {
    background: #FFB71C;
    color: #000F33;
    border: 1px solid #FFB71C;
}
.btn.btn-info:hover,
.btn.btn-info:focus {
    background: #B38014 !important;
    color: #fff !important;
    border: 1px solid #B38014;
}
.btn-info-outline {
    background: #fff;
    color: #000F33;
    border: 1px solid #FFB71C;
}
.btn.btn-info-outline:hover,
.btn.btn-info-outline:focus {
    background: #B38014 !important;
    color: #fff !important;
    border: 1px solid #B38014;
}
.column-title {
    margin-top: 0;
    padding-bottom: 15px;
    /*border-bottom: 1px solid #eee;*/
    margin-bottom: 15px;
    position: relative;
}
.column-title:after {
    content: " ";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 40%;
    /*border-bottom: 1px solid #45aed6;*/
}
ul.nostyle {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}
ul.nostyle i {
    color: #0848A4;
}
.scaleIn {
    -webkit-animation-name: scaleIn;
    animation-name: scaleIn;
}
@-webkit-keyframes scaleIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes scaleIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}
/*************************
*******Header******
**************************/
.navbar.navbar-default {
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
}
.navbar.navbar-default .navbar-toggle {
    margin-top: 32px;
}
.navbar.navbar-default .navbar-brand {
    height: auto;
    padding: 22px 15px 21px;
}
@media only screen and (min-width: 768px) {
    #main-menu.navbar-default {
        background: rgba(255, 255, 255, 0.9);
        -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
    }
    #main-menu.navbar-default .navbar-nav > li > a {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    #main-menu.navbar-default .navbar-nav > li.active > a,
    #main-menu.navbar-default .navbar-nav > li.open > a,
    #main-menu.navbar-default .navbar-nav > li:hover > a {
        background: transparent;
        padding-top: 37px;
        border-top: 3px solid #45aed6;
    }
    #main-menu.navbar-default .dropdown-menu {
        padding: 0 20px;
        min-width: 220px;
        background-color: rgba(26, 28, 40, 0.9);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        -webkit-box-shadow: none;
        background-clip: inherit;
    }
    #main-menu.navbar-default .dropdown-menu > li {
        border-left: 3px solid transparent;
        margin-left: -20px;
        padding-left: 17px;
        -webit-transition: border-color 400ms;
        transition: border-color 400ms;
    }
    #main-menu.navbar-default .dropdown-menu > li > a {
        border-top: 1px solid #404455;
        padding: 15px 0;
        color: #eeeeee;
    }
    #main-menu.navbar-default .dropdown-menu > li:first-child > a {
        border-top: 0;
    }
    #main-menu.navbar-default .dropdown-menu > li.active,
    #main-menu.navbar-default .dropdown-menu > li.open,
    #main-menu.navbar-default .dropdown-menu > li:hover {
        border-left-color: #45aed6;
    }
    #main-menu.navbar-default .dropdown-menu > li.active > a,
    #main-menu.navbar-default .dropdown-menu > li.open > a,
    #main-menu.navbar-default .dropdown-menu > li:hover > a {
        color: #45aed6;
        background-color: transparent;
    }
}
#main-slider {
    overflow: hidden;
}
#main-slider .item {
    height: 558px;
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: cover;
}
#main-slider .slider-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
}
#main-slider .slider-inner h2 {
    margin-top: 180px;
    font-size: 36px;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
}
#main-slider .slider-inner h2 > span {
    color: #45aed6;
}
#main-slider .slider-inner .btn {
    margin-top: 10px;
}
#main-slider .owl-prev,
#main-slider .owl-next {
    position: absolute;
    top: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 30px;
    display: inline-block;
    margin-top: -35px;
    height: 70px;
    width: 70px;
    line-height: 70px;
    text-align: center;
    border-radius: 100px;
    z-index: 5;
    -webkit-transition: background-color 400ms;
    transition: background-color 400ms;
}
#main-slider .owl-prev:hover,
#main-slider .owl-next:hover {
    background-color: #45aed6;
}
#main-slider .owl-prev {
    left: -35px;
    text-indent: 14px;
}
#main-slider .owl-next {
    right: -35px;
    text-indent: -14px;
}
#bar {
    width: 0%;
    max-width: 100%;
    height: 4px;
    background: #45aed6;
}
#progressBar {
    margin-top: -4px;
    position: relative;
    z-index: 999;
    width: 100%;
    background: rgba(0, 0, 0, 0.1);
}
#cta {
    padding: 50px 0;
    background-color: #eeeeee;
}
#cta h2 {
    margin-top: 0;
}
#cta .btn {
    margin-top: 40px;
}
#cta2 {
    background: #242a33 url(../images/cta2/cta2-bg.jpg) no-repeat 50% 50%;
    background-size: cover;
    color: #fff;
    padding-top: 70px;
}
#cta2 .btn {
    margin-top: 10px;
}
#cta2 h2 {
    color: #fff;
    font-size: 44px;
    line-height: 1;
}
#cta2 h2 > span {
    color: #45aed6;
}
#features {
    padding: 100px 0;
}
#features .media.service-box:first-child {
    margin-top: 80px;
}
#services {
    padding: 100px 0 75px;
}
.media.service-box {
    margin: 25px 0;
}
.media.service-box .pull-left {
    margin-right: 20px;
}
.media.service-box .pull-left > i {
    font-size: 24px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    width: 64px;
    border-radius: 100%;
    color: #45aed6;
    box-shadow: inset 0 0 0 1px #d7d7d7;
    -webkit-box-shadow: inset 0 0 0 1px #d7d7d7;
    transition: background-color 400ms, background-color 400ms;
    position: relative;
}
.media.service-box .pull-left > i:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    margin-top: -10px;
    right: -10px;
    border: 4px solid #fff;
    border-radius: 20px;
    background: #45aed6;
}
.media.service-box:hover .pull-left > i {
    background-image: -moz-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
    background-image: -webkit-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
    background-image: -ms-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
    color: #fff;
    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.8);
    -webkit-box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.8);
}
#portfolio {
    padding: 100px 0;
    background: #f5f5f5;
}
#portfolio .portfolio-filter {
    list-style: none;
    padding: 0;
    margin: 0 0 50px;
    display: inline-block;
}
#portfolio .portfolio-filter > li {
    float: left;
    display: block;
}
#portfolio .portfolio-filter > li a {
    display: block;
    padding: 7px 15px;
    background: #e5e5e5;
    color: #64686d;
    position: relative;
}
#portfolio .portfolio-filter > li a:hover,
#portfolio .portfolio-filter > li a.active {
    background: #45aed6;
    color: #fff;
    box-shadow: 0 -3px 0 0 #318daf inset;
    -webkit-box-shadow: 0 -3px 0 0 #318daf inset;
}
#portfolio .portfolio-filter > li a.active:after {
    content: " ";
    position: absolute;
    bottom: -17px;
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: #318daf transparent transparent transparent;
}
#portfolio .portfolio-filter > li:first-child a {
    border-radius: 4px 0 0 4px;
}
#portfolio .portfolio-filter > li:last-child a {
    border-radius: 0 4px 4px 0;
}
#portfolio .portfolio-items {
    margin: -15px;
}
#portfolio .portfolio-item {
    width: 24.9%;
    float: left;
    padding: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
#portfolio .portfolio-item .portfolio-item-inner {
    position: relative;
}
#portfolio .portfolio-item .portfolio-item-inner .portfolio-info {
    opacity: 0;
    transition: opacity 400ms;
    -webkit-transition: opacity 400ms;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
}
#portfolio .portfolio-item .portfolio-item-inner .portfolio-info h3 {
    font-size: 16px;
    line-height: 1;
    margin: 0;
    color: #fff;
}
#portfolio .portfolio-item .portfolio-item-inner .portfolio-info .preview {
    position: absolute;
    top: -18px;
    right: 12px;
    border-radius: 50%;
    background-image: -moz-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
    background-image: -webkit-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
    background-image: -ms-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    color: #fff;
    box-shadow: 0 0 0 2px #fff;
    -webkit-box-shadow: 0 0 0 2px #fff;
}
#portfolio .portfolio-item:hover .portfolio-info {
    opacity: 1;
}
/* Start: Recommended Isotope styles */
/**** Isotope Filtering ****/
.isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -ms-transition-property: -ms-transform, opacity;
    -o-transition-property: -o-transform, opacity;
    transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -ms-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}
/* End: Recommended Isotope styles */
/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}
#testimonial {
    background: #333333 url(../images/testimonial/bg.jpg) no-repeat 0 0;
    background-size: cover;
    padding: 100px 0;
    color: #fff;
}
#testimonial h4 {
    color: #fff;
    margin-bottom: 0;
}
#testimonial small {
    display: block;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.7);
}
#testimonial .btns {
    margin-top: 10px;
}
#about {
    padding: 100px 0;
}
#work-process {
    padding: 100px 0 50px;
    background: #20222e url(../images/work-process/bg.jpg) no-repeat 0 0;
    background-size: cover;
    color: #fff;
}
#work-process h2 {
    color: #fff;
}
#work-process h3 {
    color: #fff;
    margin-bottom: 0;
}
#work-process .icon-circle {
    display: inline-block;
    width: 80px;
    height: 80px;
    line-height: 80px;
    border: 2px solid #45aed6;
    border-radius: 100px;
    position: relative;
}
#work-process .icon-circle > span {
    border-style: solid;
    border-width: 2px;
    border-color: #45aed6;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    width: 24px;
    height: 24px;
    line-height: 18px;
    top: -12px;
    color: #64686d;
}
#work-process h3 {
    margin-bottom: 50px;
}
#meet-team {
    padding: 100px 0;
}
#meet-team .team-member {
    padding: 13px;
    background: #eeeeee;
    border: 2px solid #eeeeee;
    transition: border-color 400ms;
    -webkit-transition: border-color 400ms;
}
#meet-team .team-member .team-img {
    margin: -15px -15px 0 -15px;
}
#meet-team .team-member .team-info {
    padding-bottom: 10px;
    border-bottom: 1px solid #dbdbdb;
    margin-bottom: 10px;
}
#meet-team .team-member:hover {
    border-color: #45aed6;
}
#meet-team .team-member:hover .social-icons > li > a {
    background: #45aed6;
}
#meet-team .social-icons {
    list-style: none;
    padding: 0;
    margin: 0;
}
#meet-team .social-icons > li {
    display: inline-block;
}
#meet-team .social-icons > li > a {
    display: block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: #fff;
    background: #222534;
    border-radius: 10px;
}
.divider {
    margin-top: 50px;
    margin-bottom: 50px;
    background-image: -moz-linear-gradient(180deg, #ffffff 0%, #e3e3e3 49%, #ffffff 100%);
    background-image: -webkit-linear-gradient(180deg, #ffffff 0%, #e3e3e3 49%, #ffffff 100%);
    background-image: -ms-linear-gradient(180deg, #ffffff 0%, #e3e3e3 49%, #ffffff 100%);
    width: 95%;
    height: 1px;
}
.progress {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #eeeeee;
}
.progress .progress-bar.progress-bar-primary {
    background-image: -moz-linear-gradient(4deg, #2caab3 0%, #2c8cb3 100%);
    background-image: -webkit-linear-gradient(4deg, #2caab3 0%, #2c8cb3 100%);
    background-image: -ms-linear-gradient(4deg, #2caab3 0%, #2c8cb3 100%);
    -webkit-box-shadow: none;
    box-shadow: none;
}
.nav.main-tab {
    background: #eee;
    border-bottom: 3px solid #222534;
    border-radius: 10px 10px 0 0;
}
.nav.main-tab > li > a {
    color: #272727;
}
.nav.main-tab > li.active > a {
    background: #222534;
    color: #45aed6;
}
.nav.main-tab > li:first-child > a {
    border-radius: 10px 0 0 0;
}
.nav.main-tab > li:last-child > a {
    border-radius: 0 10px 0 0;
}
.panel-default {
    border-color: #eee;
}
.panel-default > .panel-heading {
    background-color: #fff;
    border-color: #eee;
}
.panel-default > .panel-heading .panel-title {
    font-size: 14px;
    font-weight: normal;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #eee;
}
#animated-number {
    padding: 100px 0 70px;
    background: #132125 url(../images/animated-number/bg.jpg) no-repeat 0 0;
    background-size: cover;
    color: #fff;
}
#animated-number h1,
#animated-number h2,
#animated-number h3,
#animated-number h4 {
    color: #fff;
}
#animated-number strong {
    display: block;
    margin-bottom: 30px;
}
.animated-number {
    display: inline-block;
    width: 140px;
    height: 140px;
    font-size: 24px;
    line-height: 140px;
    border: 3px solid #fff;
    border-radius: 100px;
    margin-bottom: 20px;
}
#pricing {
    padding: 100px 0 70px;
}
#pricing ul.pricing {
    list-style: none;
    padding: 0;
    margin: 70px 0 30px;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
}
#pricing ul.pricing li {
    display: block;
    padding: 10px;
}
#pricing ul.pricing li.plan-header {
    background: #eee;
    border-radius: 10px 10px 0 0;
    margin: -15px -15px 10px;
    padding: 15px 15px 30px;
    border: 0;
}
#pricing ul.pricing li.plan-header .price-duration {
    position: relative;
    margin-top: -63px;
    top: -10px;
    display: inline-block;
    width: 116px;
    height: 116px;
    background-image: -moz-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
    background-image: -webkit-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
    background-image: -ms-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
    color: #fff;
    border-radius: 100px;
    border: 5px solid #f6f6f6;
}
#pricing ul.pricing li.plan-header .price-duration > span {
    display: block;
    line-height: 1;
}
#pricing ul.pricing li.plan-header .price-duration > span.price {
    font-size: 24px;
    font-weight: 700;
    margin-top: 35px;
}
#pricing ul.pricing li.plan-header .price-duration > span.duration {
    margin-top: 5px;
}
#pricing ul.pricing li.plan-header .plan-name {
    margin-top: 10px;
    font-size: 24px;
    color: #272727;
    font-weight: bold;
    line-height: 1;
    text-transform: uppercase;
}
#pricing ul.pricing.featured {
    background: #222534;
    color: #fff;
    border: 0;
}
#pricing ul.pricing.featured li.plan-header {
    background-image: -moz-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
    background-image: -webkit-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
    background-image: -ms-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
}
#pricing ul.pricing.featured li.plan-header .plan-name {
    color: #fff;
}
#get-in-touch {
    padding: 100px 0 50px;
    background-image: -moz-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
    background-image: -webkit-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
    background-image: -ms-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
    color: #fff;
}
#get-in-touch h1,
#get-in-touch h2 {
    color: #fff;
}
#blog {
    padding: 100px 0;
}
#blog .blog-post {
    border: 1px solid #eee;
    padding: 15px;
}
#blog .blog-post .post-format {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 34px;
    text-align: center;
    color: #fff;
    background: #222534;
    border: 3px solid #fff;
    border-radius: 100px;
}
#blog .blog-post.blog-large .entry-thumbnail {
    margin: -15px -15px 15px;
    position: relative;
}
#blog .blog-post.blog-large .post-format {
    width: 66px;
    height: 66px;
    line-height: 60px;
    position: absolute;
    right: 20px;
    bottom: -33px;
}
#blog .blog-post.blog-large .post-format > i {
    font-size: 20px;
}
#blog .blog-post.blog-large .entry-date {
    font-size: 12px;
    display: block;
    margin-bottom: 5px;
    text-transform: uppercase;
    color: #45aed6;
}
#blog .blog-post.blog-large .entry-title {
    margin-top: 0;
    font-size: 18px;
    line-height: 1;
    margin-bottom: 15px;
}
#blog .blog-post.blog-large .entry-title a {
    color: #64686d;
}
#blog .blog-post.blog-large .entry-title a:hover {
    color: #45aed6;
}
#blog .blog-post.blog-media {
    margin-bottom: 30px;
}
#blog .blog-post.blog-media .entry-thumbnail {
    margin: -15px 15px -15px -15px;
    position: relative;
}
#blog .blog-post.blog-media .post-format {
    position: absolute;
    top: 20px;
    right: -10px;
}
#blog .blog-post.blog-media .entry-date {
    font-size: 12px;
    display: block;
    margin-bottom: 5px;
    text-transform: uppercase;
    color: #45aed6;
}
#blog .blog-post.blog-media .entry-title {
    margin-top: 0;
    font-size: 18px;
    line-height: 1;
    margin-bottom: 15px;
}
#blog .blog-post.blog-media .entry-title a {
    color: #64686d;
}
#blog .blog-post.blog-media .entry-title a:hover {
    color: #45aed6;
}
#blog .blog-post .entry-meta {
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 15px;
}
#blog .blog-post .entry-meta > span {
    display: inline-block;
    margin-right: 10px;
    color: #999;
}
#blog .blog-post .entry-meta > span > a {
    color: #999;
}
#blog .blog-post .entry-meta > span > a:hover {
    color: #45aed6;
}
#contact {
    position: relative;
    overflow: hidden;
}
#contact .container-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(69, 174, 214, 0.3);
    z-index: 1;
}
#contact .contact-form {
    background: rgba(255, 255, 255, 0.8);
    padding: 20px;
    margin-top: 50px;
}
#contact .contact-form h3 {
    margin-top: 0;
}

#nav-memu {
    background-color: #fff;
}

#bs-example-navbar-collapse-1 {
    border-bottom: 3px solid #dedede;
    border-top: 1px solid #dedede;
}

#bs-example-navbar-collapse-1 a:hover{
    border-bottom: 3px solid #428bca;
    color: #428bca;
    font-weight: bold;
    margin-bottom: -3px;
}

.nav-active{
    border-bottom: 3px solid #428bca;
    margin-bottom: -3px;
}

.navbar-default li.nav-active > a{
    color: #428bca;
    font-weight: bold;
}

#bs-example-navbar-collapse-1 ul{
    font-weight: bold;
}

.sticky {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top: 0px;
    z-index: 100;
}

.tab-color {
    border-color: #428bca;
}

.panel.panel-default.tab-color {
        border-top: 0px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
}

.nav-tabs>li.active>a.tab-color {
        border-color: #428bca;
        border-bottom-color: transparent;
        background-color: #428bca;
        color: white;
}

.form-inline .form-control.datepicker_width{
    width: 180px;
}
.selectpicker-border {
    border: 1px solid #ccc;
}

button.btn.dropdown-toggle.bs-placeholder.btn-default.selectpicker-border {
        border: 1px solid #ccc;
}

button.btn.dropdown-toggle.disabled.bs-placeholder.btn-default.selectpicker-border {
    background-color: #eee;
    opacity:1;
}

.fix-width {
    width: 100%;
}

/***********************
********* Footer ******
************************/
#footer {
    padding-top: 10px;

    color: #fff;
    background: #2e2e2e;

    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
}
#footer a {
    color: #fff;
}
#footer a:hover {
    color: #45aed6;
}
#footer ul {
    list-style: none;
    padding: 0;
    margin: 0 -7.5px;
}
#footer ul > li {
    display: inline-block;
    margin: 0 7.5px;
}

.btn-show-hide-pwd {
    color: #222c6a;
    cursor: pointer;
    opacity: 0.5;
}

.btn-show-hide-pwd:hover {
    opacity: 1;
}

.btn-show-hide-pwd:active {
    transform: scale(0.9);
}

.brochure-container:hover .brochure-image {
    opacity: 0.3;
}

.brochure-container:hover .brochure-overlay {
    opacity: 1;
}

.brochure-overlay {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 5%;
    right: 5%;
}

@media only screen and (min-width: 768px) {
    #footer .social-icons {
        float: right;
    }
}

.modal-dialog-centered {
    transform: translate(0, 50%) !important;
    -ms-transform: translate(0, 50%) !important; /* IE 9 */
    -webkit-transform: translate(0, 50%) !important; /* Safari and Chrome */
}

.modal-dialog-centered-default {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}

.applicationInfoTable > tbody > tr > td {
    border: 0;
}

.form-group {
    margin-bottom: 20px;
}

legend {
    font-size: 24px;
    color: #000F33;
    line-height: 24px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    font-family: 'TitilliumWeb_bold';
    border-bottom: 1px solid #99A9B480;
}

.form-control {
    font-size: 16px;
    color: #000F33;
    line-height: 20px !important;
    padding: 9px 20px !important;
    height: auto;
    border: 1px solid #fff;
    border-radius: 10px;
    outline: none !important;
    transition: none;
    box-shadow: none !important;
    font-family: 'TitilliumWeb';
}

.form-control:focus {
    border-color: #fff !important;
}

.form-horizontal .control-label {
    line-height: 18px;
    padding-top: 10px;
    padding-right: 5px;
    vertical-align: top;
}

.btn-group.form-control {
    padding: 0 !important;
}

.required:after {
    content: "*";
    color: #FF5050;
}

.grey-tooltip + .tooltip > .tooltip-inner {
    background-color: #000F33cc;
    color: #fff;
    font-size: 16px;
    width: 250px;
    padding: 20px 20px;
    line-height: 18px;
    text-align: left;
}

.guest_header_wrapper_top {
    border-top: 4px solid #0C6FFF;
    background: #E2E7EF;
    padding: 10px 0;
    line-height: 16px;
}

.footer_download_now {
    font-size: 12px;
    font-family: 'TitilliumWeb';
    color: #99A9B4;
    margin-bottom: 10px;
}

.brochure_footer_app_wrapper {
    margin: 0 -5px;
}

.brochure_footer_app_wrapper > a {
    margin: 10px 5px 0px;
    width: 100%;
    max-width: 150px;
}

.footer_divider_light_blue {
    margin: 10px auto !important;
    border-top: 1px solid #024DBC1A;
    max-width: 440px;
}

.footer_copy_right_content {
    font-size: 14px;
    line-height: normal;
    margin-bottom: 5px;
}

.footer_wrapper {
    padding: 75px 0 20px;
}

.guest_header_body_left {
    display: inline-block;
    vertical-align: top;
    font-size: 0;
}

.header_title_language {
    font-size: 16px;
    line-height: 16px;
    color: #0848A4;
    display: inline-block;
    vertical-align: top;
    margin-right: 20px;
}

.header_language_img_wrapper {
    display: inline-block;
    vertical-align: top;
    margin-top: 2px;
    margin-right: 10px;
}

.header_language_img_wrapper:last-child {
    margin-right: 0;
}

.guest_header_body_right {
    display: inline-block;
    vertical-align: top;
    float: right;
}

.img_guest_header_body_right {
    display: inline-block;
    vertical-align: top;
    margin-right: 20px;
}

.img_guest_header_body_right:last-child {
    margin-right: 0;
}

.img_sara {
    position: fixed;
    bottom: -40px;
    right: 0;
    transition: all .5s;
    cursor: pointer;
    z-index: 1;
}

.img_sara:hover {
    bottom: 0;
}

.img_sara.active {
    bottom: 0;
}

.img_kpdn {
    display: inline-block;
    vertical-align: top;
    width: 60px;
    margin-right: 20px;
}

.system_name {
    font-size: 24px;
    font-family: 'TitilliumWeb_bold';
    background: #E0E8F0;
    border-radius: 10px;
    text-align: center;
    line-height: 26px;
    padding: 12px 16px;
    margin: 0 auto 20px;
    max-width: 400px;
    width: 100%;
}

.footer_dl_img_wrapper {
    font-size: 0;
}

.navigation_wrapper {
    padding: 20px 0;
    position: relative;
}

.guest_header_wrapper_bottom {
    position: relative;
}

.guest_header_wrapper_bottom_background {
    position: absolute;
    background: #0848A4;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: -1;
}

.navigation_center_wrapper {
    font-size: 0;
    text-align: center;
}

.navigation_center_body {
    font-size: 16px;
    color: #fff !important;
    margin: 0 30px;
    line-height: 18px;
    vertical-align: top;
    display: inline-block;
    position: relative;
}

.navigation_center_body:hover {
    color: #fff !important;
}

.navigation_right_body .dropdown-toggle {
    line-height: 18px;
}

.navigation_right_wrapper {
    position: absolute;
    top: 20px;
    right: 0;
    font-size: 0;
}

.navigation_right_body {
    display: inline-block;
    vertical-align: top;
    color: #fff !important;
    font-size: 16px;
    margin-right: 30px;
    cursor: pointer;
}

.navigation_right_body:last-child {
    margin-right: 0;
}

.navigation_center_body_yellow_bar {
    position: absolute;
    bottom: -8px;
    width: 0%;
    height: 3px;
    left: 50%;
    transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    background: #F3A208;
    border-radius: 10px;
}

.navigation_center_body:hover .navigation_center_body_yellow_bar {
    width: 75%;
}

.navigation_center_body.active .navigation_center_body_yellow_bar {
    width: 75%;
}

.navigation_wrapper_small {
    display: none;
}

.navigation_wrapper_small .navbar-toggle .icon-bar {
    background: #fff;
}

.navigation_wrapper_small_box {
    color: #fff;
    padding: 6px 0;
    vertical-align: top;
    display: inline-block;
}

.navigation_wrapper_small_body {
    padding: 12px 0;
}

.login_form_wrapper {
    display: block;
    margin: 0px auto 80px;
    max-width: 400px;
    padding: 20px 20px;
    background: #FFFFFF;
    box-shadow: 0px 6px 10px #3C526E1A;
    border-radius: 10px;
    width: 100%;
}

.login_form_welcom_title {
    line-height: 24px;
    margin-bottom: 20px;
    font-size: 20px;
    font-family: 'TitilliumWeb_bold';
    color: #000F33;
    text-align: center;
}

.announcement_wrapper {
    position: fixed;
    left: -440px;
    top: 0;
    width: 100%;
    max-width: 440px;
    transition: all .5s;
    background: #024DBC;
    box-shadow: 3px 0px 6px #000F331a;
    z-index: 1;
    height: 100vh;
    overflow: auto;
    padding: 30px 30px 20px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.announcement_wrapper.active {
    left: 0;
}

.login_form_title {
    font-size: 16px;
    color: #99A9B4;
    margin-bottom: 10px;
    line-height: 18px;
}

.login_form_input {
    background: #FFFFFF !important;
    border: 1px solid #99A9B480;
    border-radius: 50px;
    font-size: 16px;
    color: #000F33 !important;
    line-height: 18px;
    height: auto;
    padding: 10px 20px;
}

.btn_orange {
    background: #F3A208;
    color: #fff;
    border: 1px solid #F3A208;
    min-width: 80px;
}

.btn_orange:hover, .btn_orange:focus {
    color: #fff !important;
    background: #E69200 !important;
}

.btn_submit_login_form {
    border-radius: 10px;
    font-size: 16px;
    line-height: 18px;
    padding: 12px 20px !important;
    width: 100%;
    text-align: center;
}

.btn_submit_login_form:hover {
    color: #fff !important;
}

.empty_10 {
    margin-bottom: 10px;
}

.empty_20 {
    margin-bottom: 20px;
}

.empty_30 {
    margin-bottom: 30px;
}

.empty_40 {
    margin-bottom: 40px;
}

.empty_50 {
    margin-bottom: 50px;
}

.empty_60 {
    margin-bottom: 60px;
}

.password_eye {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 16px;
    z-index: 1;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-family: "Font Awesome 6 Free";
}

.login_form_remember_wrapper {
    font-size: 0;
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
}

.login_form_remember_title {
    font-size: 16px;
    line-height: 18px;
    color: #000F33;
    margin: 0;
    vertical-align: top;
    font-weight: normal;
}

.login_form_sub_info {
    font-size: 18px;
    color: #000F33;
    line-height: 26px;
    text-align: center;
    max-width: 270px;
    margin: 0 auto 30px;
}

.login_form_remember_title span {
    display: inline-block;
    vertical-align: top;
    line-height: 20px;
    cursor: pointer;
}

.login_form_remember_checkbox {
    margin: 2px 8px 0 0 !important;
    vertical-align: top;
}

.login_form_forgot_password_wrapper {
    text-align: center;
    margin-bottom: 20px;
    font-size: 16px;
    color: #99A9B4;
}

.login_form_forgot_password_click_here {
    font-family: 'TitilliumWeb_bold';
    font-size: 16px;
    vertical-align: top;
    line-height: 18px;
}

.login_form_forgot_password_signup_account {
    font-size: 16px;
    color: #F3A208;
    text-align: center;
    display: block;
}

.title_announcement {
    font-size: 20px;
    color: #fff;
    margin-bottom: 30px;
    text-align: center;
    line-height: 24px;
    font-family: 'TitilliumWeb_bold';
    text-transform: uppercase;
}

.title_no_announcement {
    text-align: center;
    color: #fff;
}

.title_annoucement .fa-bullhorn {
    margin-right: 20px;
    font-size: 20px;
}

.btn_toggle_annoucement {
    font-size: 16px;
    color: #fff;
    display: inline-block;
    vertical-align: top;
    line-height: 14px;
    transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    position: fixed;
    top: 50%;
    left: -100px;
    background: #024dbc;
    padding: 16px 60px;
    border-radius: 10px 10px 0px 0px;
    cursor: pointer;
    z-index: 1;
    transition: all .5s;
    display: none;
}

.btn_toggle_annoucement.active {
    left: 340px;
}

.annoucement_body {
    background: #FFFFFF;
    border-radius: 10px;
    font-size: 16px;
    color: #000F33;
    margin-bottom: 10px;
    padding: 16px 20px;
    line-height: 22px;
}

.annoucement_box {
    color: #99A9B4;
    line-height: 18px;
    padding: 0px 20px 18px;
}

.annoucement_box_toggle {
    background: transparent;
    outline: none;
    border: 0;
    padding: 18px 36px 18px 20px;
    line-height: 18px;
    position: relative;
    width: 100%;
    text-align: left;
}

.guest_header_wrapper {
    position: relative;
    z-index: 2;
}

.annoucement_box_arrow {
    color: #5D5D5DB2;
    font-size: 15px;
    line-height: normal;
    vertical-align: top;
    right: 20px;
    position: absolute;
    top: 21px;
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}

.annoucement_box_toggle.collapsed .annoucement_box_arrow {
    transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
}

.btn_toggle_annoucement_arrow {
    color: #fff;
    font-size: 12px;
    line-height: normal;
    vertical-align: top;
    margin: 2px 0px 0 10px;
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}

.btn_toggle_annoucement.active .btn_toggle_annoucement_arrow {
    transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
}

.btn_white {
    background: #fff;
    color: #F3A208;
    border: 1px solid #F3A208;
    min-width: 80px;
}

a.btn_white:hover,
a.btn_white:focus {
    background: #F3A208 !important;
    color: #fff !important;
}

.btn_white_icon {
    background: #fff;
    color: #F3A208;
    border: 1px solid #F3A208;
}

.btn_white_icon:hover {
    background: #F3A208 !important;
    color: #fff !important;
    border: 1px solid #F3A208 !important;
}

.btn_submit_forgot_password {
    border-radius: 10px;
    font-size: 16px;
    line-height: 18px;
    padding: 12px 20px !important;
    width: 100%;
    text-align: center;
}

.btn_cancel_forgot_password {
    border-radius: 10px;
    font-size: 16px;
    line-height: 18px;
    padding: 12px 20px !important;
    width: 100%;
    text-align: center;
}

.message_wrapper {
    border-radius: 10px;
    padding: 10px 16px;
    border: 1px solid #0848A4;
    background: #fff;
    color: #0848A4;
    display: block;
    margin: 20px auto 20px;
    width: 100%;
}

.message_wrapper.success {
    border: 1px solid #3c763d;
    background: #dff0d8;
    color: #3c763d;
}

.btn_search_brochure {
    vertical-align: top;
    display: inline-block;
    width: 46px;
    height: 46px;
    line-height: 46px;
    min-width: auto;
    padding: 0 !important;
    margin-left: 10px;
}

.brochure_filter_wrapper {
    font-size: 0;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}

.brochure_filter_body {
    margin: 10px 0 0 10px;
    display: inline-block;
    vertical-align: top;
    min-width: 120px;
}

.brochure_filter_name_wrapper {
    position: relative;
    width: 100%;
    flex-grow: 1;
}

.njm_welcome_banner_img {
    width: 100%;
    border-radius: 20px;
    object-fit: cover;
    max-height: 380px;
    aspect-ratio: 2000/490;
}

.brochure_search_wrapper {
    display: flex;
    margin: -53px 75px 40px;
    background: #fff;
    box-shadow: 0px 3px 10px #DFE6EF;
    padding: 20px 20px;
    border-radius: 20px;
    z-index: 1;
}

.brochure_filter_name_input {
    padding: 0 20px 0 50px !important;
    border: 0 !important;
    outline: none !important;
    background: transparent;
    height: auto;
    line-height: 36px !important;
    color: #0848A4;
    box-shadow: none !important;
}

.ic_brochure_filter_name {
    font-size: 16px;
    color: #BECBDB;
    position: absolute;
    top: 15px;
    right: 20px;
    cursor: pointer;
}

.brochure_filter_body .btn {
    border-radius: 10px;
}

.brochure_wrapper {
    font-size: 0;
    margin: 0 -10px;
}

.brochure_body {
    border-radius: 10px;
    background: #fff;
    display: inline-block !important;
    vertical-align: top;
    width: calc(100%/6 - 20px);
    margin: 10px 10px 10px 10px;
    cursor: pointer;
    transition: all .5s;
    float: none !important;
}

.brochure_body:hover {
    box-shadow: 0px 3px 10px #00204D26;
    color: #000F33;
}

.brochure_body.carousel-item:hover {
    margin-top: 10px;
}

.brochure_title {
    font-size: 16px;
    font-family: 'TitilliumWeb_bold';
    line-height: 18px;
    margin-bottom: 10px;
    white-space: normal;
    /*white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;*/
    height: 40px;
    overflow: hidden;
}

.brochure_date {
    font-size: 16px;
    line-height: 14px;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brochure_location {
    font-size: 16px;
    line-height: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brochure_details_wrapper {
    padding: 10px 10px 14px;
}

.img_brochure_carousel_wrapper {
    position: relative;
    width: 100%;
    display: block;
    border-radius: 10px 10px 0 0;
    aspect-ratio: 256/339;
}

.img_brochure {
    margin: auto;
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
    border-radius: 10px 10px 0 0;
}

.screen_overlay_wrapper{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    z-index: 99999;
    display: none;
}

.loading_gif {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 999;
    margin: -30px 0 0 -30px;
    border: 8px solid #f3f3f3;
    border-radius: 50%;
    border-top: 8px solid #666;
    width: 60px;
    height: 60px;
    transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    animation: spin .5s linear infinite;
    -o-animation: spin .5s linear infinite;
    -moz-animation: spin .5s linear infinite;
    -webkit-animation: spin .5s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@-o-keyframes spin {
    0% { -o-transform: rotate(0deg); }
    100% { -o-transform: rotate(360deg); }
}

@-moz-keyframes spin {
    0% { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(360deg); }
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

.brochure_modal_dialog {
    width: 1200px;
    max-width: none;
}

.brochure_modal_dialog .modal-header {
    padding: 0;
    border: 0;
}

.brochure_modal_dialog .modal-header button[data-bs-dismiss] {
    top: 10px;
    z-index: 1;
}

.brochure_info_wrapper {
    font-size: 0;
}

.brochure_info_wrapper_left {
    padding: 20px 0px;
    display: inline-block;
    vertical-align: top;
    width: 600px;
}

.brochure_info_wrapper_right {
    padding: 40px 20px 20px;
    display: inline-block;
    vertical-align: top;
    width: 580px;
    border-left: 1px solid #707070;
    float: right;
    overflow-y: auto;
    height: 90vh;
}

.brochure_info_wrapper_left_scroll_wrapper {
    height: calc(90vh - 40px);
    overflow-y: auto;
    padding: 0px 20px;
}

.brochure_info_title {
    font-size: 18px;
    font-family: 'TitilliumWeb_bold';
    margin-bottom: 16px;
    line-height: 20px;
}

.brochure_info_info_body_title {
    font-family: 'TitilliumWeb_semibold';
    font-size: 16px;
    margin-bottom: 4px;
    line-height: 20px;
}

.brochure_info_info_body_content {
    font-size: 16px;
    color: #000F33;
    line-height: 20px;
    margin-bottom: 14px;
}

a.brochure_info_info_body_content {
    margin-bottom: 38px;
    text-decoration: underline;
    display: inline-block;
}

.brochure_modal_dialog {
    z-index: 1500;
}

.brochure_modal_body {
    padding: 0;
}

.brochure_info_info_body_address_wrapper {
    font-size: 0;
}

.brochure_info_info_body_address_wrapper .brochure_info_info_body {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 60px);
}

.img_open_google_map_wrapper {
    display: inline-block;
    vertical-align: top;
    width: 40px;
    height: 40px;
    margin-left: 20px;
    position: relative;
    background: #0848A41A;
    border-radius: 50%;
    margin-top: 24px;
}

.img_open_google_map_wrapper:hover {
    background: #0848A4;
}

.img_open_google_map {
    display: block;
    width: 40px;
}

.img_open_google_map_blue {
    margin: 0;
    position: absolute;
    top: 5px;
    left: 6px;
    opacity: 0;
    width: 30px;
}

.img_open_google_map_wrapper:hover .img_open_google_map_blue {
    opacity: 1;
}

.img_open_google_map_wrapper:hover .img_open_google_map_grey {
    opacity: 0;
}

.img_brochure_modal {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
}

.img_brochure_modal_arr {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
}

.img_product_modal_arr {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
}

.brochure_modal_body_x {
    position: absolute;
    top: 0;
    right: 6px;
    line-height: 18px;
    font-size: 34px;
    padding: 10px 10px !important;
}

.breadcrumb_btn_wrapper {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

.breadcrumb_btn_group_wrapper {
    display: flex;
    margin: 7px 0 1px;
}

.breadcrumb_body {
    font-size: 14px;
    color: #9A9A9A;
    line-height: 18px;
    display: inline-block;
    vertical-align: top;
}

.breadcrumb_body.active, .breadcrumb_body:hover {
    color: #000F33;
}

.breadcrumb_page_title {
    font-size: 20px;
    color: #000F33;
}

.breadcrumb_wrapper {
    font-size: 0;
}

.breadcrumb_body_slash {
    margin: 0 4px;
}

.btn_form_collapse {
    line-height: 18px;
    background: #CDDCE9;
    border: 2px solid #CDDCE9;
    border-radius: 10px 10px 0 0;
    font-size: 16px;
    color: #000F33;
    padding: 13px 20px;
    cursor: pointer;
    font-family: 'TitilliumWeb_bold';
}

.btn_form_collapse.collapsed {
    border-radius: 10px;
    background: #fff;
    border-color: #CDDCE9;
}

.btn_form_collapse.helpdesk {
    background: #016BFF;
    border-color: #016BFF;
    color: #FFFFFF;
    pointer-events: none;
}

.btn_form_collapse.helpdesk.collapsed {
    background: #016BFF1A;
    border-color: #016BFF;
    color: #000F33;
}

.btn_form_collapse.helpdesk .fa-chevron-down {
    color: #FFFFFF;
}

.btn_form_collapse.helpdesk.collapsed .fa-chevron-down {
    color: #016BFF;
}

.form_collapse_body {
    background: #E4EDF5;
    border: 1px solid #E4EDF5;
    border-radius: 0px 0px 10px 10px;
    border-top: 0;
    font-size: 0;
}

.form_collapse_box {
    padding: 20px 20px 0;
    width: 50%;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 20px;
}

.form_collapse_wrapper {
    margin: 0 0px 10px;
    font-size: 0;
    background: #E4EDF5;
    border-radius: 10px;
}

.form_collapse_body_title {
    font-size: 16px;
    font-family: 'TitilliumWeb_semibold';
    color: #000F33;
    line-height: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #000f331a;
    margin-bottom: 20px;
}

.form_collapse_input_body_title {
    text-align: left;
    font-size: 16px;
    color: #000F33;
    line-height: 18px;
    height: 40px;
    vertical-align: middle;
    display: table-cell;
}

.form_collapse_input_body_title_col {
    padding-right: 5px;
}

.btn_form {
    padding: 10px 30px;
    line-height: 18px;
    outline: none !important;
}

.captcha_input_btn_wrapper .btn_find_registration_no {
    color: #016BFF !important;
    border-color: #016BFF !important;
    background: #fff !important;
    border-radius: 0 10px 10px 0;
    min-width: 100px;
    width: 100px;
}

.captcha_input_btn_wrapper input {
    border-radius: 10px 0 0 10px;
}

.form_collapse_input_body:not(:last-child) {
    margin-bottom: 10px;
}

.btn-group{
    padding: 0 !important;
}

.btn.dropdown-toggle {
    line-height: 20px !important;
    padding: 9px 36px 9px 20px !important;
    border: 1px solid #fff !important;
    vertical-align: top !important;
    font-size: 16px;
    outline: none !important;
    box-shadow: none !important;
    background: #fff !important;
    color: #000F33 !important;
    white-space: normal;
}

td .btn.dropdown-toggle {
    margin-right: 0;
    border-radius: 10px;
    text-align: left;
    font-size: 0px;
}

.bootstrap-select.btn-group .dropdown-toggle .filter-option {
    white-space: nowrap;
    width: calc(100% - 1px);
    text-overflow: ellipsis;
    vertical-align: top;
    font-size: 16px;
}

.brochure_filter_body .btn.dropdown-toggle {
    border-color: #BECBDB !important;
    background: #EFF3F8 !important;
    padding: 12px 30px 12px 20px !important;
}

.btn.dropdown-toggle.disabled {
    background: #d6dee5 !important;
    color: #000F33 !important;
    opacity: 1;
}

.form_btn_body {
    display: inline-block;
    vertical-align: top;
}

.form_btn_body_right {
    float: right;
}

.form_btn_wrapper {
    margin-top: 40px;
}

.btn_choose_applicant_document {
    font-size: 16px;
    display: inline-block !important;
    vertical-align: top;
    margin-top: 8px;
    width: calc(100% - 20px);
}

.btn_remove_applicant_document {
    font-size: 28px;
    line-height: 40px;
    display: inline-block;
    vertical-align: top;
    position: absolute;
    right: 15px;
    top: 0;
}

.btn_remove_applicant_document:hover {
    color: #a94442 !important;
}

.btn_add_new_applicant_document {
    outline: none !important;
    width: 100%;
    margin-top: 4px;
    color: #fff !important;
}

.choose_applicant_document_wrapper {
    position: relative;
}

.choose_applicant_document_container {
    margin-bottom: 10px;
}

.form_tooltips_wrapper {
    position: relative;
}

.form_tooltips_body {
    position: absolute;
    top: 10px;
    right: 25px;
    width: auto;
    border-radius: 50% !important;
    border: 0;
    padding: 0;
}

.form_tooltips_question_mark {
    color: #9933FF;
    font-size: 16px;
    line-height: 20px;
    width: 16px;
    text-align: center;
}

.form_tooltips_wrapper .form_collapse_input {
    padding-right: 30px !important;
}

.caret {
    border: solid #808799 !important;
    border-width: 0 2px 2px 0 !important;
    display: inline-block;
    padding: 3px;
    right: 18px !important;
    transform: rotate(45deg) translateY(-50%);
    -o-transform: rotate(45deg) translateY(-50%);
    -moz-transform: rotate(45deg) translateY(-50%);
    -webkit-transform: rotate(45deg) translateY(-50%);
}

.open .caret {
    transform: rotate(225deg) translateY(-50%) !important;
    -o-transform: rotate(225deg) translateY(-50%) !important;
    -moz-transform: rotate(225deg) translateY(-50%) !important;
    -webkit-transform: rotate(225deg) translateY(-50%) !important;
    margin-top: -4px !important;
    margin-right: -6px !important;
}

.form_collapse_input_body.has-error .dropdown-toggle {
    border-color: #a94442 !important;
}

.brochure_info_info_body_date {
    display: inline-block;
    vertical-align: top;
    margin-right: 60px;
}

.back_top_nav_background {
    background-color: #0C6FFF;
    width: 100%;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
}

.back_header_wrapper .navbar-header {
    z-index: 1;
    position: relative;
}

.back_header_wrapper .back_header_company_title {
    color: #fff;
    padding: 0 0 !important;
    line-height: 50px;
    margin-left: 15px;
}

.img_language_back {
    margin-right: 10px;
    display: inline-block;
    vertical-align: top;
    margin-top: 4px;
}

.back_header_top_right_link {
    padding: 0 !important;
    line-height: 50px;
    color: #fff;
    margin-right: 30px;
    font-size: 16px;
}

.back_header_top_right_link .fa-file-alt {
    margin-right: 10px;
}

.btn_back_header_top_right_toggle {
    padding: 0 !important;
    line-height: 50px;
    color: #fff;
    font-size: 16px;
}

.btn_back_header_top_right_toggle .fa-chevron-down {
    margin-left: 6px;
    font-size: 10px;
}

.back_header_wrapper .back_header_company_title:hover {
    color: #fff !important;
}

.back_header_top_right_link:hover,
.back_header_top_right_link:focus {
    color: #fff !important;
    background: #0c6fff !important;
}

.btn_back_header_top_right_toggle:hover, .btn_back_header_top_right_toggle:focus {
    background: transparent !important;
    color: #fff !important;
}

.widget-button {
    box-shadow: none;
    background: #fff;
    border-radius: 10px;
}

.widget-graph {
    box-shadow: none;
    background: #fff;
    border-radius: 10px;
}

.back_widget_graph_wrapper {
    font-size: 0;
    margin: 0 -10px;
}

.back_widget_graph_body {
    min-height: 400px;
    width: calc(50% - 20px);
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    margin: 0 10px;
}

.back_widget_graph_body_title {
    font-size: 20px;
    color: #000F33;
    line-height: 22px;
    font-family: 'TitilliumWeb_bold';
}

.back_widget_link_body:hover, .back_widget_link_body:focus {
    background: #fff;
    color: #99A9B4 !important;
}

.back_widget_link_wrapper {
    margin: 0 -10px 0;
    font-size: 0;
}

.back_widget_link_body {
    display: inline-block;
    vertical-align: top;
    width: calc(25% - 20px);
    background: #fff;
    border-radius: 10px;
    padding: 20px 20px;
    margin: 0 10px 20px;
    font-size: 16px;
    color: #99A9B4;
    line-height: 16px;
}

.widget-number {
    font-size: 30px;
    color: #0848A4;
    margin-bottom: 8px;
    line-height: 24px;
}

.sidebar {
    margin-top: 0;
    /*padding-top: 50px;*/
    background: #0B55C0;
    /*height: 100vh;*/
    height: calc(100vh - 50px);
    z-index: -1;
    overflow-y: auto;
}

.sidebar ul li {
    border: 0;
}

.sidebar ul li a {
    color: #fff;
    font-size: 16px;
    background: #0B55C0;
    padding: 10px 15px;
    line-height: 18px;
}

.sidebar ul li a.active {
    background-color: #0848A4;
}

.sidebar .fa.arrow:before {
    content: "\f107";
}

.sidebar .active>a>.fa.arrow:before {
    content: "\f106";
}

.sidebar ul li a:hover, .sidebar ul li a:focus {
    color: #fff!important;
    background: #0B55C0 !important;
}

.sidebar ul li a.active:hover, .sidebar ul li a.active:focus {
    background: #0848A4 !important;
}

.sidebar .arrow {
    line-height: 12px;
    margin-top: 4px;
    vertical-align: top;
    display: inline-block;
}

.sidebar .nav-second-level li a {
    padding-left: 55px;
}

.sidebar ul li a > .fa:not(.arrow), .sidebar ul li a > .fas {
    width: 20px;
    margin-right: 16px;
}

/*Application Product*/
.product_info_wrapper, .cover_image_info_wrapper {
    background-color: #D4E0EB;
    color: #000F33;
    border: 1px solid #D4E0EB;
    margin: 10px 0;
}

.product_info_wrapper > i, .cover_image_info_wrapper > i {
    margin-right: 6px;
    color: #99A9B4;
    display: none;
}

.product_info_wrapper > *, .cover_image_info_wrapper > * {
    margin: 0 !important;
}

.product_step_wrapper, .brochure_step_wrapper{
    margin-top: 20px;
}

.product_step_div, .brochure_step_div{
    margin-left: 80px;
}

.btn_create_new_application {
    margin-right: 8px;
}

#page-wrapper {
    border: 0;
    background: transparent;
    overflow: auto;
    height: calc(100vh - 50px);
    min-height: calc(100vh - 50px);
}

.list_table_wrapper {
    background: #fff;
    padding: 20px 20px;
    border-radius: 10px;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
}

.list_table_wrapper > form {
    overflow-y: hidden;
    overflow-x: auto;
    width: 100%;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    border-radius: 10px;
}

.list_table_wrapper > form > .table {
    min-width: 900px;
}

.list_table_wrapper1800 > form > .table {
    min-width: 1800px;
}

.list_table_wrapper1600 > form > .table {
    min-width: 1600px;
}

.list_table_wrapper1400 > form > .table {
    min-width: 1400px;
}

.list_table_wrapper1200 > form > .table {
    min-width: 1200px;
}

#page-wrapper div form .table .form-control {
    background: #FFFFFF;
    border: 1px solid #99A9B4;
    border-radius: 10px;
    padding: 7px 20px;
    line-height: 18px;
    height: auto;
    font-size: 14px;
    margin-top: 0;
    font-family: 'TitilliumWeb';
}

#page-wrapper div form .table button.btn.btn-primary.btn-sm[type='submit'] {
    margin-right: 6px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 10px;
}

#page-wrapper div form .table .btn.btn-default.btn-sm {
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 10px;
}

#page-wrapper div form .table .fa-trash-alt {
    margin-left: 8px;
}

#page-wrapper .list_table_wrapper form .table {
    min-height: 360px;
}

.choose_file_upload {
    font-size: 16px;
    line-height: 36px;
}

.btn_form_collapse .fa-chevron-down {
    width: auto;
    color: #808799;
    line-height: 18px;
    font-size: 13px;
    vertical-align: top;
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    float: right;
}

.btn_form_collapse.collapsed .fa-chevron-down {
    transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
}

.modal_upload_product_image_title {
    font-size: 16px;
    line-height: 18px;
    margin-bottom: 8px;
    margin-top: 10px;
}

.modal_upload_product_image_info {
    font-size: 16px;
    background: #D4E0EB;
    border-color: #D4E0EB;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 16px 20px;
}

.modal_upload_product_image_info .fa-info-circle {
    color: #99A9B4;
    vertical-align: top;
    margin-right: 6px;
    width: 16px;
    margin-top: 2px;
}

.modal_upload_product_image_info_box {
    width: calc(100% - 30px);
    display: inline-block;
    vertical-align: top;
    line-height: 18px;
}

.info_question_mark_badge {
    margin-left: 10px;
    width: 16px;
    height: 16px;
    padding: 0;
    line-height: 16px;
    vertical-align: top;
    border-radius: 50%;
}

.modal_upload_product_image_info.alert-danger {
    color: #000F33;
    background-color: #FFC4C4;
    border-color: #FFC4C4;
    margin-top: 6px;
}

#page-wrapper div form .modal .table {
    min-width: auto;
}

.brochure_step_div h4 {
    color: #000F33;
    font-size: 16px;
}

.upload_link_input_error_wrapper {
    width: 50%;
    max-width: 400px;
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
}

.btn_premise_list_item {
    padding: 8px 10px !important;
}

.btn_premise_list_item .fa-trash-alt {
    margin: 0 !important;
    font-size: 20px;
}

.premise_list_file_name_link_title {
    padding-top: 10px;
}

.productImageFilename_wrapper {
    font-size: 16px;
}

.productImageFilename {
    display: inline-block;
    vertical-align: top;
    line-height: 18px;
    word-break: break-all;
}

.btn_delete_productImageFilename .fa-trash-alt {
    margin: 0;
    font-size: 20px;
}

.btn-danger {
    background: #BF0000;
    border-color: #BF0000;
}

.btn-danger:hover {
    background: #860000;
    border-color: #860000;
    color: #fff !important;
}

.btn_add_product_image_wrapper {
    width: 100%;
    position: relative;
    margin: 10px 0;
}

.btn_add_product_image_hidden {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.btn_add_product_image_body {
    width: 100%;
    background: #EEF4F9;
    border: 1px dashed #808799;
    border-radius: 10px;
    color: #000F33;
    padding: 14px 20px;
    text-align: center;
}

.btn_add_product_image_show_content {
    font-weight: normal;
    vertical-align: top;
    display: inline-block;
    line-height: 36px;
    font-size: 16px;
}

.access_group_select_unselect_wrapper {
    margin-top: 10px;
}

.checkbox_title_wrapper .form_collapse_input_body_title {
    height: auto;
}

.btn_load_more_brochure {
    width: 140px;
    margin: 30px auto 0 !important;
    display: block;
    text-align: center;
}

.img_background_homepage {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

.btn_landing_login_register {
    margin-right: 30px;
    margin-top: -8px;
}

.m0 {
    margin: 0 !important;
}

.info_i_content {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    line-height: 20px;
}

button.close span {
    font-size: 30px;
    line-height: 18px;
    vertical-align: top;
    display: block;
}

.application_register_wrapper {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
}

.menu_bar {
    width: 100%;
    height: 3px;
    background: #fff;
    margin-bottom: 6px;
}

.toggle_sidebar.active {
    margin-left: -250px;
}

.captcha-img {
    display: flex;
    margin: 10px 0 10px;
}

.captcha-img > span {
    flex-grow: 1;
}

.captcha-img > span > img {
    padding: 0;
    background-color: #fff;
    border-radius: 10px;
    width: 100%;
    height: auto;
    display: block;
}

.btn_reload_captcha {
    border-radius: 10px;
    width: 40px;
    font-size: 24px;
    margin-left: 10px;
    color: #fff;
    background: #D9534F;
    border: #D9534F;
}

#page-wrapper.toggle_main_wrapper.active {
    margin-left: 0;
}

#page-wrapper div form table {
    .btn > .fa, .btn > .fas, .btn > .far, .btn > .faa {
        margin-left: 0px;
    }

    .fa-trash-alt {
        margin-right: 0;
    }
}

.back_wrapper {
    background: #EFF3F8;
    padding: 20px 0 20px 20px;
}

.header_logo_link_wrapper {
    font-size: 0;
}

.header_kpdn_logo {
    width: 50px;
    height: 38px;
    margin-right: 20px;
    display: inline-block;
    vertical-align: top;
}

.header_logo_title {
    display: inline-block;
    vertical-align: top;
    font-size: 22px;
    color: #fff !important;
    line-height: 24px;
    margin-top: 7px;
}

.back_header_wrapper {
    padding: 5px 20px;
    border-radius: 20px;
    background: #016bff;
    margin-bottom: 20px;
    margin-right: 20px;
}

.btn_menu_header_mobile {
    display: none;
    vertical-align: top;
    cursor: pointer;
    font-size: 20px;
    margin-top: 9px;
    margin-right: 8px;
}

.header_profile_dropdown {
    display: inline-block;
    vertical-align: top;
    float: right;
    text-align: right;
    width: calc(100% - 332px);
}

.header_profile_dropdown .dropdown-toggle {
    padding: 0 !important;
    margin: 10px 0 0;
    display: inline-block;
    white-space: normal;
    width: 100%;
    text-align: right;
    background: #016bff !important;
    border-color: #016bff !important;
    color: #fff !important;
}

.header_profile_dropdown .dropdown-toggle:after {
    display: none;
}

.header_profile_dropdown .dropdown-toggle .fa-chevron-down {
    margin: 7px 0 0 7px;
    font-size: 13px;
    line-height: 8px;
    display: inline-block;
    vertical-align: top;
    width: auto;
    height: auto;
}

.header_profile_dropdown .dropdown-toggle .fa-chevron-down:before {
    display: inline-block;
    vertical-align: top;
}

.header_profile_dropdown .dropdown-menu {
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0px 6px 6px #3C526E33;
    padding: 20px 20px;
    max-width: 450px;
    min-width: 280px;
}

.header_profile_dropdown .dropdown-menu > li {
    border: 0 !important;
}

.header_profile_dropdown .dropdown-item {
    padding: 10px 20px !important;
    color: #000F33;
}

.dropdown_menu_title {
    color: #000F33;
    padding: 10px 20px !important;
}

.dropdown_menu_title i {
    margin-right: 10px;
    width: 20px;
    height: 20px;
    line-height: 18px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    font-size: 18px;
}

.header_profile_dropdown .dropdown-item i {
    margin-right: 10px;
    width: 20px;
    height: 20px;
    line-height: 18px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    font-size: 18px;
}

.side_navigation_container {
    padding: 20px 10px 10px 0;
    width: 200px;
    display: inline-block;
    vertical-align: top;
    border-radius: 20px;
    background: transparent linear-gradient(180deg, #93C9FD 0%, #3C93FF 54%, #016BFF 100%) 0% 0% no-repeat padding-box;
    margin-right: 20px;
    position: relative;
    background-image: url('../images/njm-blue-pattern-bg-responsive.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.side_navigation_wrapper {
    height: calc(100vh - 148px - 36px);
    overflow-y: auto;
    font-size: 16px;
    padding-top: 20px;
    border-top-right-radius: 10px;
    margin-bottom: 10px;
}

.toggle_main_wrapper {
    width: calc(100% - 200px - 20px);
    display: inline-block;
    vertical-align: top;
}

.hide_sidebar .toggle_main_wrapper {
    width: calc(100% - 60px - 20px);
}

.back_page_wrapper {
    font-size: 0;
    position: relative;
}

.side_navigation_wrapper ul li {
    display: block !important;
    width: 100%;
}

.side_navigation_wrapper ul li a {
    padding: 10px 20px;
    line-height: 18px;
    display: block;
    font-size: 0;
    color: #fff;
    transition: none;
    position: relative;
}

.side_navigation_wrapper ul li a.active, .side_navigation_wrapper ul li a:hover {
    background: #fff;
    color: #016BFF;
    border-radius: 0px 10px 10px 10px;
}

.side_navigation_wrapper::-webkit-scrollbar {
    display: none;
}

.side_navigation_wrapper ul li a i, .side_navigation_wrapper ul li a img {
    width: 20px;
    height: 20px;
    line-height: 18px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    font-size: 18px;
}

.side_navigation_wrapper ul li a div {
    width: calc(100% - 30px);
    line-height: 18px;
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
}

.side_navigation_wrapper ul li a.has_arrow {
    position: relative;
}

.side_navigation_wrapper ul li a.has_arrow div:not(.side_navigation_border_radius) {
    width: calc(100% - 40px);
}

.side_navigation_wrapper ul li a.has_arrow .arrow {
    position: absolute;
    right: 5px;
    top: 13px;
    font-size: 16px;
}

.side_navigation_wrapper ul li li a div {
    padding-left: 30px;
    width: 100%;
}

.btn_toggle_sidebar {
    color: #fff;
    border-radius: 50%;
    background: #F5A301;
    border: 1px solid #fff;
    width: 30px;
    height: 30px;
    line-height: 16px;
    font-size: 16px;
    display: inline-block;
    vertical-align: top;
    position: absolute;
    top: 50%;
    right: 0px;
    transform: rotate(90deg) translateY(-50%);
    cursor: pointer;
    padding: 7px 7px;
    z-index: 1;
}

.hide_sidebar .btn_toggle_sidebar {
    transform: rotate(270deg);
    right: -15px;
}

.side_navigation_wrapper .fa-cogs {
    font-size: 16px;
}

.hide_sidebar .side_navigation_wrapper ul li a div, .hide_sidebar .side_navigation_wrapper ul li a .arrow {
    display: none;
}

.hide_sidebar .side_navigation_container {
    width: 60px;
}

.side_navigation_border_radius {
    display: none !important;
}

.active > .side_navigation_border_radius, a:hover > .side_navigation_border_radius {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 20px;
    height: 20px;
    position: absolute;
    top: -20px;
    left: 0;
    display: block !important;
}

.active > .side_navigation_border_radius:before, a:hover > .side_navigation_border_radius:before {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    top: -20.5px;
    right: -20px;
    border-radius: 100%;
    box-shadow: 0 0 0 10px #fff;
}

.dropdown-menu.show > .dropdown-menu.inner {
    display: block;
}

.dropdown-toggle::after {
    display: none;
}

.header_logo_title_mobile {
    display: none;
    vertical-align: top;
}

.header_username {
    max-width: calc(100% - 20px);
    display: inline-block;
    vertical-align: top;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.header_profile_dropdown ul.dropdown-menu.show {
    inset: 0 0 auto auto !important;
}

.page_yeild_content_wrapper {
    overflow-y: auto;
    height: calc(100vh - 108px);
    padding-right: 20px;
    display: flex;
    flex-direction: column;
}

.active > .page-link, .page-link.active {
    z-index: 0;
}

.dropdown_profile_detail_wrapper {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #000f331a;
    display: flex;
}

.dropdown_profile_img {
    width: 80px;
    margin-right: 20px;
}

.dropdown_profile_detail_body {
    width: calc(100% - 100px);
    font-size: 16px;
}

.dropdown_profile_detail_box {
    display: flex;
    color: #000F33;
}

.dropdown_profile_detail_title {
    width: 112px;
    font-size: 16px;
    font-family: 'TitilliumWeb_bold';
}

.dropdown_profile_detail_colon {
    font-size: 16px;
    margin: 0 4px;
}

.dropdown_profile_detail_data {
    width: calc(100% - 110px);
    font-size: 16px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.dropdown_profile_btn_wrapper {
    display: flex;
    justify-content: space-between;
}

.dropdown_profile_btn_body {
    text-align: center;
    max-width: 80px;
    margin-right: 30px;
}

.dropdown_profile_btn_body:last-child {
    margin-right: 0px;
}

.dropdown_profile_btn_title {
    font-size: 14px;
    line-height: 18px;
    margin-top: 8px;
}

.tab-content>.active {
    opacity: 1;
}

.side_navigation_footer_wrapper {
    font-size: 14px;
    color: #fff;
    line-height: 18px;
    text-align: center;
}

.hide_sidebar .side_navigation_footer_wrapper {
    opacity: 0;
    height: 36px;
    overflow: hidden;
}

[data-column=action_column] {
    position: sticky;
    right: 0;
    background: #fff !important;
    padding: 11px 20px !important;
    text-align: center;
    min-width: 110px;
    box-shadow: -6px 0px 6px #0000000F !important;
    z-index: 1;
}

th[data-column=action_column] {
    background: #E4EDF5 !important;
}

.form_collapse_box th[data-column=action_column] {
    background: #d6dee5 !important;
}

thead td[data-column=action_column] {
    background: #E4EDF5 !important;
    box-shadow: -4px 2px 6px #0000000F !important;
}

.table_header_sort_wrapper {
    position: relative;
    display: inline-block;
    vertical-align: top;
    height: 18px;
    width: 10px;
    margin-left: 8px;
}

.table_header_sort {
    position: absolute;
    width: 10px;
    height: 6px;
    line-height: 6px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    left: 0;
    font-size: 18px;
    cursor: pointer;
    color: #10101033;
}

.table_header_sort:hover {
    color: #000F33;
}

.table_header_sort_asc {
    top: 2px;
}

.table_header_sort_desc {
    bottom: 2px;
}

.table_header_sort > *::before {
    vertical-align: top;
    line-height: 6px;
    display: inline-block;
}

.table-hover>tbody>tr:hover>* {
    background: #E6F0FF !important;
    --bs-table-accent-bg: none;
}


.btn_header_filter {
    padding: 5px 5px !important;
    font-size: 18px;
    min-width: auto;
}

.btn_header_filter > * {
    display: inline-block;
    vertical-align: top;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
}

table thead:has([data-column=action_column]) ~ tr:not(:first-child) td:last-child {
    position: sticky;
    right: 0;
}

table thead:has([data-column=action_column]) tr th:nth-last-child(2),
table thead:has([data-column=action_column]) tr td:nth-last-child(3),
table tbody:has([data-column=action_column]) tr td:nth-last-child(2) {
    padding-right: 20px !important;
}

*.hide {
    display: none !important;
}

.table_filter_column_wrapper .btn_header_filter:not(:first-child) {
    margin-left: 4px;
}

::placeholder {
  color: #808799 !important;
  opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12 -18 */
  color: #808799 !important;
}

.btn.dropdown-toggle[title="Sila Pilih"], .btn.dropdown-toggle[title="- Select One -"], .btn.dropdown-toggle[title="Select One"] {
    color: #808799 !important;
}

.form-control .dropdown-menu .bs-searchbox {
    padding: 0;
}

.form-control .dropdown-menu .bs-searchbox input {
    border: 0;
    padding: 8px 10px !important;
    border-bottom: 1px solid #E9E9E9 !important;
    border-radius: 10px 10px 0 0;
}

input.datepicker {
    padding-left: 38px !important;
    margin: 0 !important;
    vertical-align: top;
    display: inline-block;
}

.calendar_icon {
    font-size: 14px;
    color: #808799;
    position: absolute;
    left: 20px;
    top: 22px;
    width: 14px;
    height: 14px;
    display: inline-block;
    vertical-align: top;
    line-height: 14px;
    text-align: center;
}

.form_collapse_input_body .calendar_icon {
    left: 28px;
    top: 14px;
}

.datepicker th:not(.dow):hover,
.datepicker th.active,
.datepicker td.active,
.datepicker td:not(.dow):hover,
.datepicker th > *:hover,
.datepicker th > *.active,
.datepicker td > *:hover,
.datepicker td > *.active {
    background: #E6F0FF !important;
    color: #000F33 !important;
}

.datepicker .datepicker-years td:hover {
    background: inherit !important;
}

.datepicker .datepicker-months td:hover {
    background: inherit !important;
}

.datepicker.datepicker-dropdown.dropdown-menu {
    padding: 8px 10px;
    border-radius: 10px;
}

.datepicker td, .datepicker th {
    line-height: 20px;
    width: 28px;
    height: 28px;
}

.glyphicon-arrow-right:before {
    font-family: "Font Awesome 6 Free";
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    line-height: 18px;
    text-rendering: auto;
    font-size: 12px;
    vertical-align: top;
    color: #000F33;
    font-weight: 900;
    content: "\f061";
}

.glyphicon-arrow-left:before {
    font-family: "Font Awesome 6 Free";
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    line-height: 18px;
    text-rendering: auto;
    font-size: 12px;
    vertical-align: top;
    color: #000F33;
    font-weight: 900;
    content: "\f060";
}

table:not(:has(.pagination)) td .pull-right {
    position: sticky;
    left: 0;
    float: left;
}

.btn-group.form-control > .btn.dropdown-toggle {
    font-size: 0;
    border-radius: 10px;
}

.disabled.form-control.form_collapse_input > * {
    border-color: #d6dee5 !important;
}

.btn_table_submit_filter {
    background: #FFB71C !important;
    color: #fff !important;
    border-color: #FFB71C !important;
}

.btn.btn_table_submit_filter:hover, .btn.btn_table_submit_filter:focus {
    background: #B38014 !important;
    color: #fff !important;
    border-color: #B38014 !important;
}

.btn_toggle_sidebar:hover {
    background: #B38014 !important;
}

div > .calendar_icon ~ input {
    padding-left: 40px !important;
}

.page_yeild_content_wrapper > form {
    padding: 20px;
    background: #fff;
    border-radius: 10px;
}

.form_collapse_accordion {
    padding: 0;
}

.form-control:disabled, .form-control[readonly] {
    background-color: #d6dee5;
    opacity: 1;
    border-color: #d6dee5 !important;
    cursor: not-allowed;
}

.w-50 {
    width: 50%;
}

.w-100 {
    width: 100%;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mt-10 {
    margin-top: 10px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-30 {
    margin-top: 30px;
}

.mr-10 {
    margin-right: 10px;
}

.mr-20 {
    margin-right: 20px;
}

.ml-10 {
    margin-left: 10px;
}

.ml-20 {
    margin-left: 20px;
}

.pb-1 {
    padding-bottom: 1px !important;
}

.pb-10 {
    padding-bottom: 10px !important;
}

.pb-20 {
    padding-bottom: 20px !important;
}

.flex-0 {
    flex: 0;
}

.flex-1 {
    flex: 1;
}

.btn .fa-arrow-rotate-left {
    font-size: 14px;
    margin-right: 8px;
}

.form_collapse_box .table>thead>tr>th {
    background: #d6dee5;
}

.form_consent_wrapper {
    border: 2px solid #CDDCE9;
    font-size: 16px;
    color: #000F33;
    padding: 13px 20px;
    border-radius: 10px;
}

.tooltip .tooltip-inner {
    text-align: left !important;
    background: #000F33;
    color: #fff;
    opacity: 1;
    padding: 8px 10px;
    line-height: 18px;
    font-size: 14px;
}

.alert-success {
    background: #DAEFE5;
    border-color: #DAEFE5;
}

.alert-warning {
    background: #FFEAD2;
    border-color: #FFEAD2;
}

.alert-danger {
    background: #FFC4C4;
    border-color: #FFC4C4;
}

.alert:has(.close) {
    padding-right: 46px;
}

.alert .close {
    width: 15px;
    color: #808799;
    font-size: 15px;
    display: block;
    height: 15px;
    position: absolute;
    right: 20px;
    text-align: center;
    line-height: 15px;
    top: 20px;
}

.form_consent_wrapper > * {
    cursor: pointer;
}

*.disabled, *:disabled {
    cursor: not-allowed;
}

.alert_icon_content_wrapper {
    display: flex;
}

.alert_icon_content_wrapper i {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    display: inline-block;
    vertical-align: top;
    margin-right: 16px;
}

.alert-success .alert_icon_content_wrapper i {
    color: #45B17F;
}

.alert-warning .alert_icon_content_wrapper i {
    color: #FF951C;
}

.alert-danger .alert_icon_content_wrapper i {
    color: #BF0000;
}

.rpd-table {
    margin-bottom: 0 !important;
}

.rpd-table .table {
    margin-bottom: 0 !important;
}

.table-responsive {
    overflow-y: hidden;
}

.checkbox_content_wrapper {
    margin-top: 10px;
}

.modal-footer .btn[data-bs-dismiss] {
    margin-left: 4px;
    margin-right: auto;
}

.modal_form_wrapper {
    background: #E4EDF5;
    border-radius: 10px;
    padding: 20px 20px;
}

.premise-list, .company-premise-list, #premise_grid {
    margin-top: 10px;
}

.modal_upload_product_image_checkbox_wrapper {
    display: flex;
}

.plain_icon_button {
    background: transparent;
    border: 0;
    min-width: auto;
    border-radius: 0;
    color: #000F33;
    padding: 0 !important;
    width: 20px;
    height: 20px;
    line-height: 20px !important;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    font-size: 16px;
}

.plain_icon_button:hover {
    background: transparent !important;
    border: 0 !important;
}

.plain_icon_button > * {
    margin: 0 !important;
    text-align: center !important;
    width: 20px;
    height: 20px;
    line-height: 20px !important;
    display: inline-block;
    vertical-align: top;
    padding: 0 !important;
}

.plain_icon_button .fa-pen {
    color: #000F33 !important;
}

.plain_icon_button .fa-trash-alt {
    color: #BF0000 !important;
}

.report_form_wrapper .form_collapse_wrapper {
    padding-top: 20px;
    padding-bottom: 20px;
}

.report_form_wrapper .form_collapse_body_title {
    padding: 0;
    border: 0;
    margin: 0 20px 0;
    font-family: 'TitilliumWeb_bold';
}

.report_form_wrapper .form_btn_wrapper {
    margin-top: 20px;
}

.report_form_wrapper .form_collapse_box {
    padding-top: 10px;
}

.login_form_remember_title .checkbox_wrapper {
    width: 22px;
    height: 22px;
    line-height: 20px;
    margin-right: 6px !important;
}

.login_form_remember_title input[type=checkbox] {
    width: 22px;
    height: 22px;
}

.login_form_remember_title .checkbox_wrapper:has(input[type=checkbox]:checked)::after {
    font-size: 24px;
    width: 22px;
    height: 22px;
    line-height: 22px;
}

.click_here_wrapper {
    text-align: center;
    margin-top: 20px;
}

.click_here_wrapper a {
    color: #016BFF;
}

.registration_form_btn_wrapper {
    text-align: center;
    margin: 50px auto 30px;
    padding: 0 20px;
}

.registration_form_btn_wrapper div:not(:first-child) {
    margin-top: 10px;
}

.registration_form_click_here {
    text-align: center;
    font-size: 16px;
    margin: 0 auto 0;
}

.registration_form .form_collapse_wrapper {
    margin: 0;
    padding-bottom: 30px;
}

.registration_form_click_here a {
    color: #016BFF;
    font-family: 'TitilliumWeb_bold';
}

.registration_form_btn_wrapper .btn-primary {
    min-width: 360px;
}

.company_tab_wrapper {
    /*background: #e4edf5;
    padding: 20px 20px 10px;*/
    border-radius: 10px 10px 0 0;
}

.company_tab_wrapper .nav {
    margin: 0;
}

.company_tab_container .form_collapse_wrapper {
    border-radius: 0 0 10px 10px;
}

.company_premise_tab_wrapper {
    padding: 20px 0 0;
    /*background: #e4edf5;
    border-radius: 0 0 10px 10px;*/
}

.parallax_bg {
    position: fixed;
    z-index: -1;
    width: 100%;
    height: 100%;
}

.landing_wrapper {
    padding: 30px 30px 4px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 1;
}


.brochure_page.landing_wrapper {
    padding-left: calc((100vw - 1366px) / 2 + 20px);
    padding-right: calc((100vw - 1366px) / 2 + 20px);
}

.landing_header_wrapper {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

.landing_header_kpdn_logo_wrapper {
    display: flex;
}

.landing_header_kpdn_logo_wrapper div {
    font-size: 12px;
    font-family: 'Arial_bold';
    line-height: 16px;
    max-width: 287px;
    display: inline-block;
    vertical-align: top;
    color: #1E0803;
    margin-top: 9px;
}

.landing_header_btn_wrapper {
    display: flex;
    margin: 3px 0;
}

.landing_header_btn {
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
}

.btn_landing_home {
    text-align: center;
    border: 1px solid #000F33;
    border-radius: 10px;
    font-size: 20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin-right: 10px;
}

.btn_landing_user_manual {
    color: #016BFF;
    text-align: center;
    border: 1px solid #016BFF;
    border-radius: 10px;
    font-size: 20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin-right: 10px;
}

.btn_landing_menu {
    font-size: 18px;
    color: #016BFF;
    border: 1px solid #016BFF;
    border-radius: 10px;
    padding: 8px 20px;
    line-height: 22px;
    height: 40px;
}

.btn_landing_menu span {
    line-height: 22px;
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
    font-family: 'TitilliumWeb_bold';
}

.btn_landing_menu i {
    font-size: 22px;
    display: inline-block;
    vertical-align: top;
    line-height: 22px;
    height: 22px;
    width: 22px;
    text-align: center;
}

.hide_left_logo .landing_header_kpdn_logo_wrapper {
    display: none;
}

.hide_left_logo {
    justify-content: flex-end;
}

.landing_body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.landing_header_kpdn_logo_center {
    display: block;
    text-align: center;
    margin: 0 auto 20px;
}

.landing_header_kpdn_logo_center img, .landing_header_kpdn_logo_center div {
    display: block;
    margin: 0 auto;
}

.landing_header_kpdn_logo_center img {
    margin-bottom: 10px;
}

.landing_header_btn:hover {
    background: #014BB3 !important;
    color: #fff !important;
    border: 1px solid #014BB3 !important;
}

.landing_wrapper.registration_page .landing_header_kpdn_logo_center {
    margin-top: -81px;
}

.landing_footer_ic_wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.landing_footer_ic {
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    display: inline-block;
    vertical-align: top;
    color: #000F33;
}

.landing_footer_ic:not(:first-child) {
    margin-left: 20px;
}

.landing_footer_ic .fa-twitter {
    width: 20px;
    height: 20px;
    line-height: 20px;
    display: inline-block;
    vertical-align: top;
    color: #000F33;
}

.landing_footer_wrapper {
    margin-top: 40px;
}

.registration_page .application_register_wrapper {
    padding: 0;
    box-shadow: 0px 6px 10px #3C526E1A;
}

.landing_menu_wrapper {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 2;
}

.show_menu .landing_menu_wrapper {
    display: flex;
}

.bootstrap-select>.dropdown-toggle {
    z-index: 0;
}

.landing_menu_body {
    display: flex;
    width: 100%;
    position: relative;
    padding: 100px 50px 100px;
    flex-grow: 1;
}

.btn_landing_close_menu {
    color: #fff;
    font-size: 24px;
    position: absolute;
    top: 30px;
    right: 30px;
    display: flex;
    vertical-align: top;
    cursor: pointer;
    z-index: 1;
}

.btn_landing_close_menu svg {
    font-size: 30px;
    display: inline-block;
    vertical-align: top;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    margin-right: 16px;
    color: #fff;
    fill: #fff;
}

.btn_landing_close_menu span {
    font-size: 18px;
    line-height: 24px;
    display: inline-block;
    vertical-align: top;
    font-family: 'TitilliumWeb_bold';
}

.landing_menu_box {
    width: 50%;
    padding: 30px 0 30px;
}

.landing_menu_box:not(:first-child) {
    padding-left: 30px;
}

.landing_menu_box:first-child {
    border-right: 1px solid #fff;
}

.landing_menu_link {
    font-size: 30px;
    color: #fff;
    font-family: 'TitilliumWeb_bold';
    border-bottom: 1px solid transparent;
    line-height: 30px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
}

.landing_menu_box > div:not(:last-child) .landing_menu_link {
    margin-bottom: 50px;
}

.landing_menu_link.active, .landing_menu_link:hover {
    border-color: #FFB71C !important;
    color: #FFB71C !important;
}

.landing_menu_group_link_title {
    font-size: 30px;
    color: #fff;
    line-height: 30px;
    font-family: 'TitilliumWeb_bold';
    margin-bottom: 30px;
}

.landing_menu_group_link {
    font-size: 26px;
    color: #fff;
    fill: #fff;
    line-height: 26px;
}

.landing_menu_group_link:not(:last-child) {
    margin-bottom: 30px;
}

.landing_menu_group_link a {
    line-height: 26px;
    color: #fff;
    fill: #fff;
    display: inline-block;
    vertical-align: top;
    font-family: 'TitilliumWeb_semibold';
    border-bottom: 1px solid transparent;
}

.landing_menu_group_link.active a, .landing_menu_group_link:hover a,
.landing_menu_group_link.active svg, .landing_menu_group_link:hover svg {
    border-color: #FFB71C !important;
    color: #FFB71C !important;
    fill: #FFB71C !important;
}

.landing_menu_group_link_wrapper:not(:last-child) {
    margin-bottom: 50px;
}

.landing_menu_group_link_sosial_media_wrapper .landing_menu_group_link {
    display: inline-block;
    vertical-align: top;
    margin-bottom: 10px;
    margin-right: 10px;
}

.landing_menu_group_link_sosial_media_wrapper svg.fa-twitter {
    width: 30px;
    height: 30px;
    line-height: 30px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
}

.landing_menu_group_link_sosial_media_wrapper a {
    font-size: 30px;
}

.landing_menu_group_link_sosial_media_wrapper .landing_menu_group_link_title {
    margin-bottom: 20px;
}

.landing_menu_group_link_wrapper .fa-play {
    font-size: 18px;
    width: 16px;
    height: 18px;
    line-height: 18px;
    display: inline-block;
    vertical-align: top;
    margin: 4px 30px 0 0;
    color: #fff;
}

.landing_form_input_wrapper .form-floating>.form-control,
.landing_form_input_wrapper .form-floating>.form-control-plaintext,
.landing_form_input_wrapper .form-floating>.form-select {
    height: calc(3.5rem + 2px) !important;
    line-height: 20px !important;
    padding: 1rem .75rem !important;
    border: 1px solid #808799 !important;
    padding: 12px 20px !important;
    height: 46px !important;
}

.landing_form_input_wrapper .form-floating>.form-control-plaintext:focus,
.landing_form_input_wrapper .form-floating>.form-control-plaintext:not(:placeholder-shown),
.landing_form_input_wrapper .form-floating>.form-control:focus,
.landing_form_input_wrapper .form-floating>.form-control:not(:placeholder-shown) {
    padding-top: 1.625rem !important;
    padding-bottom: .625rem !important;
}

.landing_form_input_wrapper .form-floating>label {
    color: #000F33;
    font-size: 16px;
}

.landing_form_input_wrapper .form-floating>.form-control:-webkit-autofill~label {
    opacity: 1;
}

.landing_form_input_wrapper .form-floating>.form-control-plaintext~label,
.landing_form_input_wrapper .form-floating>.form-control:focus~label,
.landing_form_input_wrapper .form-floating>.form-control:not(:placeholder-shown)~label,
.landing_form_input_wrapper .form-floating>.form-select~label {
    opacity: 1;
}

.landing_form_input_wrapper .form-floating>label {
    padding: 12px 20px !important;
}

.landing_form_input_wrapper {
    margin-bottom: 10px;
}

.landing_form_input_wrapper .form-control:focus {
    border-color: #808799 !important;
}

.landing_form_input_wrapper .password_eye {
    top: 13px;
}

.has_announcement.landing_wrapper {
    padding-left: 470px;
}

body:not(:has(.registration_page)) .has_announcement .landing_header_wrapper .landing_header_kpdn_logo_wrapper {
    display: none;
}

.has_announcement .landing_header_wrapper {
    justify-content: flex-end;
}

.contact_us_branch_wrapper {
    font-size: 16px;
    margin: 0 20px 20px;
    width: calc(33.33% - 40px);
    display: inline-block;
    vertical-align: top;
}

.contact_us_branch_title {
    font-family: 'TitilliumWeb_bold';
}

.contact_us_branch_detail {
    display: flex;
    column-gap: 5px;
}

.contact_us_wrapper .form_collapse_box {
    padding: 20px 0 0;
    margin-bottom: 0;
}

.landing_custom_page_wrapper {
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
}

.btn_close_landing_video_img {
    position: absolute;
    right: -10px;
    top: -10px;
    cursor: pointer;
    padding: 10px 10px;
    display: inline-block;
    vertical-align: top;
}

.btn_close_landing_video_img svg {
    width: 14px;
    height: 14px;
    font-size: 14px;
    line-height: 14px;
    text-align: center;
    fill: #808799;
    color: #808799;
    display: inline-block;
    vertical-align: top;
}

.landing_video_wrapper svg {
    width: 24px;
    height: 24px;
    font-size: 24px;
    line-height: 24px;
    text-align: center;
    position: absolute;
    right: 0;
    top: 0;
    fill: #fff;
    color: #fff;
    cursor: pointer;
}

.btn_landing_video {
    position: fixed;
    bottom: 0;
    right: 10px;
    z-index: 1;
}

.btn_landing_video img {
    cursor: pointer;
}

.hide_btn_landing_video .btn_landing_video {
    display: none;
}

.landing_video_wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #000000aa;
    display: none;
    z-index: 1;
}

.show_landing_video .landing_video_wrapper {
    display: block;
}

.btn_close_landing_video {
    position: absolute;
    right: 10px;
    top: 10px;
}

.landing_video_wrapper video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: 1000px;
    transform: translate(-50%, -50%);
    aspect-ratio: 16 / 9;
}

.announcement_wrapper .landing_header_kpdn_logo_wrapper {
    display: block;
    margin-bottom: 30px;
}

.announcement_wrapper .landing_header_kpdn_logo_wrapper div {
    color: #fff;
}

.annoucement_title {
    font-family: 'TitilliumWeb_bold';
    margin-bottom: 10px;
}

.annoucement_description p:last-child {
    margin-bottom: 0;
}

.announcement_wrapper::-webkit-scrollbar {
    display: none;
}

.btn_landing_announcement {
    text-align: center;
    border: 1px solid #016BFF;
    border-radius: 10px;
    font-size: 18px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin-right: 10px;
    color: #016BFF;
    display: none;
}

.btn_close_announcement {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    fill: #fff;
    color: #fff;
    vertical-align: top;
    width: 20px;
    height: 20px;
    line-height: 20px;
    cursor: pointer;
    text-align: center;
}

.btn_close_announcement svg {
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 20px;
    line-height: 20px;
}

.file_upload_hidden_input {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    cursor: pointer;
    display: block;
    font-size: 100px;
}

.file_upload_body {
    width: 100%;
    background: #EEF4F9;
    border: 1px dashed #808799;
    border-radius: 10px;
    color: #000F33;
    padding: 14px 20px;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
}

.file_upload_title {
    font-family: 'TitilliumWeb_semibold';
    margin-bottom: 10px;
}

.file_upload_body .fa-upload {
    font-size: 60px;
    color: rgb(0 15 51 / 5%);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.file_upload_title span {
    text-decoration: underline;
}

.application_table_wrapper > div {
    margin-top: 10px;
}

.modal-dialog table {
    min-width: 700px;
}

td > .btn:has(.fa-trash-alt) {
    padding: 0 !important;
    border: 0 !important;
    min-width: auto !important;
    background: inherit !important;
    color: #BF0000;
    width: 18px;
    height: 18px;
    line-height: 18px !important;
    text-align: center;
    display: inline-block;
    vertical-align: top;
}

td > .btn:has(.fa-trash-alt) .fa-trash-alt {
    font-size: 16px !important;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    width: 18px;
    height: 18px;
    line-height: 18px !important;
    color: #BF0000;
}

td > .btn:has(.fa-trash-alt):disabled, td > .btn.disabled:has(.fa-trash-alt) {
    cursor: not-allowed;
    color: #B3B7C2;
    pointer-events: all;
}

.uploaded_image_wrapper img {
    border: 1px solid #000f331a;
}

td:has(.btn) > *:not(:first-child) {
    margin-left: 8px;
}

.file_upload_hidden_input .ajax-upload-dragdrop {
    width: 100% !important;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    height: 100%;
    border: 0;
    margin: 0;
    z-index: 2;
}

.file_upload_hidden_input .ajax-file-upload {
    width: 100% !important;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    height: 100%;
    border: 0;
    margin: 0;
    z-index: 2;
}

.file_upload_wrapper .ajax-file-upload-container {
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.file_upload_hidden_input .ajax-upload-dragdrop span {
    display: none;
}

.file_upload_wrapper .ajax-file-upload-statusbar {
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%;
    z-index: 1;
    padding: 0;
    border: 0;
}

.file_upload_wrapper .ajax-file-upload-statusbar > * {
    display: none !important;
}

.file_upload_wrapper .ajax-file-upload-statusbar .ajax-file-upload-progress {
    display: block !important;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% - 30px) !important;
    height: auto;
    z-index: 1;
    padding: 0;
    max-width: 330px;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    background: #fff;
    border: 1px solid #CDDCE9;
}

.file_upload_wrapper .ajax-file-upload-statusbar .ajax-file-upload-bar {
    border-radius: 10px;
    background-color: #016BFF;
    height: 24px;
}

.file_upload_wrapper fieldset {
    display: none;
}

input:valid {
    background-image: none !important;
    border-color: transparent !important;
}

input:invalid {
    background-image: none !important;
}

.report_result_wrapper:has(table) {
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    margin-top: 20px;
}

.report_result_wrapper tbody tr:nth-child(even) th, .report_result_wrapper tbody tr:nth-child(even) td {
    background: #F4F7F9;
}

#AddPremise .modal-header > div {
    justify-content: space-between;
    align-items: center;
}

#AddPremiseLabel {
    width: auto;
}

.modal-backdrop {
    z-index: -1;
}

.modal {
    background: #00000080;
}

.modal.fade {
    z-index: -1 !important;
}

.modal.show {
    z-index: 3 !important;
}

[data-column=action_column]:has(.modal.show) {
    z-index: 2;
}

.uploaded_file_wrapper {
    font-size: 16px;
}

.uploaded_file_name {
    font-family: 'TitilliumWeb_semibold';
}

.uploaded_file_size {
    color: #808799;
}

.uploaded_file_action {
    color: #808799;
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    cursor: pointer;
}

.uploaded_file_action {
    margin-left: 16px;
}

.uploaded_file_icon {
    font-size: 30px;
    width: 22px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-right: 18px;
    flex-grow: 0;
}

.uploaded_file_icon.fa-file-pdf {
    color: #E63232;
}

.uploaded_file_body {
    display: flex;
    justify-content: space-between;
    background: #fff;
    border-radius: 10px;
    padding: 10px 20px;
    margin-top: 10px;
    align-items: center;
}

.uploaded_file_box {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uploaded_file_action_wrapper {
    line-height: 16px;
    display: inline-block;
    vertical-align: top;
}

.uploaded_file_box > * {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview_file_wrapper img {
    width: 100%;
    margin: 0 auto;
}

.modal-backdrop.fade {
    opacity: 0 !important;
}

.fa-file.uploaded_file_icon {
    color: #E63232;
}

.fa-file-image.uploaded_file_icon {
    color: #E63232;
}

.landing_body .alert {
    max-width: 1000px;
    margin: 0 auto 20px;
    width: 100%;
}

.has_announcement .landing_body .alert {
    max-width: 400px;
}

.ajax-file-upload > form > input {
    z-index: 0 !important;
}

.report_result {
    width: 100%;
    overflow-x: auto;
}

.vertical-middle td {
    vertical-align: middle;
}

.table_image_wrapper {
    position: relative;
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
}

.table_image_wrapper i {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 10px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    background: #000f334d;
    color: #000f3380;
    background: #000f3380;
    color: #fff;
}

.table_image_wrapper img {
    object-fit: contain;
    width: 50px;
    height: 50px;
}

.application_table_wrapper td {
    vertical-align: middle;
    word-break: break-word;
}

.application_table_wrapper td input {
    border: 1px solid #D5D5D5 !important;
}

.application_table_wrapper td input:focus, .application_table_wrapper td input:hover {
    border: 1px solid #D5D5D5 !important;
}

.application_table_wrapper .center:last-child {
    min-width: 90px;
    padding-right: 5px;
}

.print_preview_header {
    font-size: 16px;
    font-family: 'TitilliumWeb_bold';
    text-align: center;
    color: #001D61;
    line-height: 20px;
    margin-bottom: 30px;
}

.print_preview_header_kpdn {
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 10px;
    color: #000F33;
}

.print_preview_header_report_title {
    margin-bottom: 4px;
}

.form_btn_wrapper .btn > i {
    font-size: 16px;
    line-height: 20px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    margin-right: 10px;
}

.form_btn_wrapper .btn > .fa-angle-left {
    font-size: 18px;
    margin-right: 8px;
}

.report_filter_wrapper .form_collapse_box {
    margin-bottom: 0;
}

.btn_error_message {
    font-size: 13px;
    display: block;
    line-height: 16px;
    margin-top: 4px;
}

.dashboard_body_title {
    font-size: 16px;
    font-family: 'TitilliumWeb_bold';
    line-height: 20px;
}

.dashboard_body {
    border-radius: 20px;
    padding: 20px 20px;
    background: #fff;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 20px;
}

.dashboard_body:last-child {
    margin-bottom: 0;
}

.dashboard_number_wrapper {
    border: 1px solid #000F3333;
    border-radius: 20px;
    padding: 20px 20px;
    display: flex;
    height: 100%;
}

.dashboard_number_icon {
    width: 40px;
    margin-right: 20px;
    object-fit: contain;
}

.dashboard_number_title {
    font-size: 16px;
    font-family: 'TitilliumWeb_semibold';
    line-height: 20px;
    margin-bottom: 6px;
}

.dashboard_number {
    font-size: 16px;
    line-height: 20px;
    color: #808799;
}

.dashboard_number_body {
    flex-grow: 1;
}

.dashboard_body_title_wrapper {
    margin-bottom: 10px;
    display: flex;
}

.dashboard_body_title_wrapper:has(.dashboard_filter_wrapper_grey) {
    justify-content: space-between;
    margin-top: 10px;
}

.dashboard_filter_wrapper_grey {
    margin-top: -10px;
    flex-grow: 1;
    justify-content: flex-end;
}

.dashboard_body_grey {
    background-color: #DCE4EF;
}

.dashboard_filter_wrapper {
    display: flex;
}

.ongoing_sales_img {
    width: 100px;
    height: 100px;
    display: block;
    margin: 0 auto 12px;
}

.ongoing_sales_wrapper {
    text-align: center;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

.ongoing_sales_date_wrapper {
    display: flex;
    justify-content: center;
    margin: 0 -10px 10px;
}

.ongoing_sales_number {
    background: #C7D4E3;
    border-radius: 10px;
    font-size: 20px;
    padding: 0 20px;
    line-height: 36px;
    min-width: 100px;
    display: block;
    margin: 0 auto;
    text-align: center;
}

.ongoing_sales_date_dash {
    margin: 0 6px;
}

.dashboard_daterange_filter_wrapper {
    margin-right: 10px;
    cursor: pointer;
    background: #fff;
    border-radius: 10px;
}

.dashboard_daterange_filter_wrapper .date_range_picker {
    font-size: 0;
    padding: 9px 39px 9px 29px !important;
    opacity: 0;
    z-index: 1;
    position: relative;
    cursor: pointer;
}

.dashboard_daterange_filter_wrapper .calendar_icon {
    font-size: 16px;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    text-align: center;
    width: 16px;
    height: 16px;
    line-height: 16px;
    z-index: 0;
    color: #4D5770;
}

.daterangepicker table {
    min-width: auto;
}

.daterangepicker {
    border: 0;
    border-radius: 10px;
    box-shadow: 0px 3px 6px #00113B1A;
}

.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
    color: transparent;
    border: 0;
    transform: rotate(0deg);
}

.daterangepicker .calendar-table .next span:before, .daterangepicker .calendar-table .prev span:before {
    font-family: "Font Awesome 6 Free";
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    line-height: 18px;
    text-rendering: auto;
    font-size: 12px;
    vertical-align: top;
    color: #000F33;
    font-weight: 900;
}

.daterangepicker .calendar-table .next span:before {
    content: "\f061";
}

.daterangepicker .calendar-table .prev span:before {
    content: "\f060";
}

.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
    line-height: 20px;
    width: 28px;
    height: 28px;
    min-width: auto;
    font-size: 16px;
    border: 0;
}

.daterangepicker .drp-selected {
    font-size: 14px;
}

.daterangepicker .drp-buttons .btn {
    min-width: 100px;
}

.daterangepicker td.in-range {
    background-color: #E6F2FF;
    color: #000F33;
}

.daterangepicker td.end-date {
    background: #016BFF;
    color: #fff;
}

.daterangepicker td.available:hover, .daterangepicker th.available:hover {
    border-color: transparent;
    background: #E6F0FF;
    color: #000F33;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
    border-color: transparent;
    background: #016BFF;
    color: #fff;
    border-radius: 50%;
}

.with_auto {
    width: auto !important;
}

.grey_dot {
    width: 6px;
    height: 6px;
    background: #808799;
    border-radius: 50%;
    margin: 8px 10px 0;
    display: inline-block;
    vertical-align: top;
}

.grey_content {
    color: #808799;
}

.dashboard_filter_wrapper_grey .dashboard_daterange_filter_wrapper, .dashboard_filter_wrapper_grey .btn {
    background-color: #EFF3F8 !important;
    border-color: #EFF3F8 !important;
}

.dashboard_daterange_filter_wrapper .bs-caret {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.grey_content > div {
    display: inline-block;
    vertical-align: top;
}

.dashboard_filter_wrapper .btn {
    margin-right: 0;
}

.dashboard_number_wrapper.no_border {
    border: 0;
    padding: 0;
    height: auto;
}

.dashboard_number_wrapper.no_border i {
    width: 70px;
    height: 70px;
    line-height: 70px;
    font-size: 30px;
    text-align: center;
    border-radius: 50%;
    background-color: #E5BB74;
    margin-right: 10px;
    color: #fff;
}

.dashboard_number_wrapper.no_border .dashboard_number_body {
    margin-top: 12px;
}

.dashboard_state_number_body {
    padding: 20px 20px;
    border-radius: 10px;
    border: 1px solid #eef2f6;
    background: #eef2f6;
}

.dashboard_state_number_body_top {
    border-bottom: 1px dotted #000F3333;
    padding-bottom: 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}

.dashboard_state_number_box {
    display: flex;
    justify-content: space-between;
}

.dashboard_state_img {
    width: 48px;
    height: 24px;
    display: inline-block;
    vertical-align: top;
}

.brochure_filter_name_wrapper input {
    padding: 12px 46px 12px 20px !important;
    border-color: #BECBDB !important;
}

.brochure_footer_wrapper {
    border-radius: 20px;
    padding: 40px 30px;
    margin: 80px auto 30px;
    width: 100%;
    text-align: right;
    color: #fff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.brochure_footer_title {
    font-size: 34px;
    font-family: 'TitilliumWeb_semibold';
    margin-bottom: 22px;
    line-height: 40px;
}

.brochure_footer_content_wrapper {
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-end;
}

.brochure_footer_content{
    font-size: 22px;
    line-height: 30px;
    max-width: 670px;
}

.brochure_footer_app_wrapper {
    display: flex;
    justify-content: flex-end;
}

.footer_hand {
    position: absolute;
    top: -26px;
    left: 30px;
    max-width: 316px;
}

.dashboard_bar_chart_col .dashboard_body {
    height: 100%;
}

.dashboard_bar_chart_wrapper {
    width: 100%;
    height: calc(100% - 30px);
}

.dashboard_bar_chart_col .dashboard_body canvas {
    max-height: 406px !important;
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: auto;
}

.brochure_search_wrapper .form-control:focus {
    border-color: #BECBDB !important;
}

.footer_dl_img {
    width: 100%;
}

.njm_welcome_banner_img_mobile {
    display: none;
    width: 100%;
    aspect-ratio: 800/688;
}

.view_mode_wrapper {
    border: 0;
    margin: 10px 0 0 10px;
}

.view_mode_body {
    padding: 0 !important;
    border: 0 !important;
}

.view_mode_body > .btn_view_mode {
    padding: 0 !important;
    border: 0 !important;
    color: #016BFF;
    margin: 0 !important;
    width: 46px;
    height: 46px;
    line-height: 44px;
    border: 1px solid #016BFF !important;
    border-radius: 0;
    background: #fff;
    font-size: 20px;
}

.view_mode_body:first-child > .btn_view_mode {
    border-radius: 10px 0 0 10px;
}

.view_mode_body:last-child > .btn_view_mode {
    border-radius: 0 10px 10px 0;
}

.view_mode_body > .btn_view_mode.active {
    background: #016BFF;
    color: #fff;
}

.view_mode_body > .btn_view_mode:hover {
    background: #014BB3 !important;
    color: #fff !important;
    border-color: #014BB3 !important;
}

.carousel_inner {
    white-space: nowrap;
    margin: 0 0px 0 -30px;
    width: calc(100% + 60px);
    font-size: 0;
    overflow: hidden;
    padding-left: 20px;
}

.carousel-item-next, .carousel-item-prev, .carousel-item.active {
    display: inline-block;
}

.brochure_body.carousel-item {
    transition: none !important;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    margin: 10px 10px 10px 10px !important;
    width: calc(100% / 6.5 - 20px);
}

.carousel_control_wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.carousel-control-next, .carousel-control-prev {
    position: relative;
    width: 46px;
    height: 46px;
    left: auto;
    top: auto;
    bottom: auto;
    right: auto;
    display: inline-block;
    vertical-align: top;
    color: #000f33;
    opacity: 1;
    background-color: #FFB71C;
    font-size: 20px;
    margin-left: 10px;
    z-index: 0;
}

.carousel-control-next:hover, .carousel-control-prev:hover {
    background-color: #B38014;
}

.carousel-control-prev {
    border-radius: 10px 0 0 10px;
}

.carousel-control-next {
    border-radius: 0 10px 10px 0;
}

.btn_brochure_filter_mobile {
    display: none;
    vertical-align: top;
    width: 46px !important;
    height: 46px;
    min-width: auto;
    text-align: center;
    padding: 0 !important;
    line-height: 44px !important;
    margin-top: 10px !important;
}

.btn_load_more_brochure_carousel {
    display: inline-block;
    vertical-align: top;
    color: #000f33;
    background-color: #FFB71C;
    font-size: 16px;
    line-height: 20px !important;
    padding: 12px 10px 12px !important;
    margin: 10px 0 0 10px;
}

.view_all_brochure_content_mobile {
    display: none;
}

.bootstrap-select.form-control {
    padding: 0 !important;
}

.bootstrap-select.form-control button {
    font-size: 16px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.bootstrap-select .dropdown-toggle:after {
    display: none;
}

.bootstrap-select .dropdown-toggle:before {
    content: "\f107";
    font-family: "Font Awesome 6 Free";
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    line-height: 20px;
    text-rendering: auto;
    font-size: 18px;
    vertical-align: top;
    color: #808799;
    font-weight: 900;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
}

.overflow_table_wrapper {
    overflow-x: auto;
    width: 100%;
}

.btn_select_all_group {
    display: flex;
    flex-direction: row;
}

.modal_title_btn_wrapper {
    display: flex;
    width: 100%;
}

.dropdown_language_divider {
    margin: 0 4px;
}

.uploaded_file_action_wrapper:has(div:nth-child(2)) {
    min-width: 64px;
}

.owl-dots {
    z-index: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.banner_carousel {
    border-radius: 20px;
    overflow: hidden;

    .owl-dots {
        bottom: 60px;
        position: absolute;
    }
}

.banner_carousel_mobile {
    display: none !important;
}

.owl-dot {
    width: 6px;
    height: 6px;
    background-color: #ffffff !important;
    opacity: 0.8;
    border-radius: 5px;

    &.active {
        opacity: 1;
        width: 30px;
    }
}

.owl-carousel {
    overflow: hidden;

    .owl-stage {
        display: flex;
    }

    .owl-item {
        float: none;
    }

    .owl-nav {
        justify-content: flex-end;
        display: flex;
        margin-top: 20px;

        & button {
            position: relative;
            width: 46px;
            height: 46px;
            left: auto;
            top: auto;
            bottom: auto;
            right: auto;
            display: inline-block;
            vertical-align: top;
            color: #000f33 !important;
            opacity: 1;
            background-color: #FFB71C !important;
            font-size: 0px !important;
            margin-left: 10px;
            z-index: 0;

            &.owl-prev {
                border-radius: 10px 0 0 10px;
                z-index: 2;
            }

            &.owl-next {
                border-radius: 0 10px 10px 0;
                z-index: 2;
            }

            &.owl-prev:before {
                content: "\f053";
                font-family: "Font Awesome 6 Free";
                font-size: 20px;
                font-weight: 900;
            }

            &.owl-next:before {
                content: "\f054";
                font-family: "Font Awesome 6 Free";
                font-size: 20px;
                font-weight: 900;
            }
        }
    }
}

.brochure_carousel {
    .owl-dots {
        position: absolute;
        bottom: 20px;
        z-index: 1;
    }

    .owl-dot {
        background-color: #000 !important;
    }

    .owl-stage-outer {
        max-height: 450px;
    }

    .owl-item:first-child:not(.active) {
        margin-left: 0;
    }

    .owl-item:has(.btn_load_more_brochure_carousel) {
        margin-right: 0 !important;
        width: auto !important;
    }
}

.carousel_brochure_body {
    background-color: #fff;
    display: block;
    border-radius: 10px;
}

/*error & invalid & valid*/
div[class^="invalid-feedback-"] {
   display: none;
   width: 100%;
   margin-top: 0.25rem;
   font-size: 12px;
   color: #dc3545;
}

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

.bootstrap-select .form-control.is-invalid ~ .btn.dropdown-toggle,
.was-validated .bootstrap-select .form-control:invalid ~ .btn.dropdown-toggle {
    border: 1px solid #dc3545 !important;
}

.bootstrap-select.disabled .form-control.is-invalid ~ .btn.dropdown-toggle.disabled {
    border-color: #dc3545 !important;
}

.input_group {
    display: flex;
    flex: 1;
}

.btn_in_input_wrapper {
    display: flex;
}

.btn_generate {
    min-width: auto;
}

.btn_in_input_wrapper .btn {
    border-radius: 0 10px 10px 0;
}

.btn_in_input_wrapper input {
    border-radius: 10px 0 0 10px;
}

.form_tooltip_modal {
    display: flex;
    justify-content: right;
    font-size: 14px;
    line-height: 18px;
    vertical-align: top;
    margin-top: 10px;
}

.form_tooltip_modal_title {
    opacity: 0.6;
    cursor: pointer;
}

.form_tooltip_modal_title:hover {
    opacity: 1;
}

.form_tooltip_modal_body {
    display: none;
    width: 100%;
    font-size: 14px;
    color: #000F33;
    vertical-align: top;
}

.form_tooltip_modal_body ol {
    margin: 0;
    padding: 1rem 1rem 1rem 2rem;
    text-align: justify;
}

.form_tooltip_modal_body li:not(:last-child) {
    margin-bottom: 4px;
}

.btn_in_input_wrapper > .form-floating {
    flex: 1;
}

.justify-flex-end {
    justify-content: flex-end;
}

.flex-1 {
    flex: 1;
}

#img_qr_code {
    max-width: 175px;
    object-fit: contain;
    aspect-ratio: 1 / 1;
}

.brochure_info_info_body {
    word-break: break-all;
}

.brochure_info_info_body_container {
    display: flex;
}

.btn_landing_home_login {
    margin-right: 10px !important;
}

.side_floating_icon_wrapper {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 1;
    transition: all .5s;
}

body:has(.announcement_wrapper.active) .side_floating_icon_wrapper {
    left: 440px;
}

.side_floating_icon_body {
    margin-bottom: 2px;
    cursor: pointer;
    width: 40px;

    i {
        background-color: #000F33;
        border-radius: 0 10px 10px 0;
        width: 40px;
        text-align: center;
        line-height: 40px;
        font-size: 18px;
        display: inline-block;
        vertical-align: top;
        color: #fff;
    }

    .fa-bullhorn {
        font-size: 14px;
    }
}

.side_app_icon_wrapper {
    display: none;
    width: 140px;
    padding: 10px;
    border-radius: 10px;
    background: #000F33;
    position: absolute;
    left: 45px;
    top: calc((50% - 90px) / -1);

    a {
        display: block;
        border-radius: 5px;
        border: 1px solid #fff;
        width: 100%;
        margin-bottom: 4px;

        img {
            width: 100%;
            display: block;
        }
    }

    a:last-child {
        margin-bottom: 0;
    }
}

.side_floating_icon_body:has(.fa-mobile-screen-button):hover {
    width: 185px;
    height: 180px;
    margin-bottom: -138px;

    .side_app_icon_wrapper {
        display: block;
    }
}

.side_media_icon_wrapper {
    display: none;
    width: 40px;
    padding: 10px;
    border-radius: 10px;
    background: #000F33;
    position: absolute;
    left: 45px;
    top: calc((50% - 80px) / -1);

    a {
        display: block;
        width: 100%;
        margin-bottom: 20px;

        i, svg {
            width: 20px;
            height: 20px;
            display: block;
            line-height: 20px;
            text-align: center;
            color: #fff;
            fill: #fff;
        }
    }

    a:last-child {
        margin-bottom: 0;
    }
}

.side_floating_icon_body:has(.fa-facebook-f):hover {
    width: 85px;
    height: 160px;
    margin-bottom: -118px;

    .side_media_icon_wrapper {
        display: block;
    }
}

.has_announcement_dot {
    display: none;
    position: absolute;
    left: 8px;
    top: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #FF5050;
}

.has_announcement_dot.has_active_announcement {
    display: block;
}

.landing_wrapper.has_announcement.registration_page {
    padding-left: 30px;
}

.hidden {
    display: none;
}

.font_danger {
    color: #BF0000;
}

/*Labels*/
/*--------------------------------------------------*/

.label {
   display: inline;
   padding: 2px 6px;
   font-size: 80%;
   line-height: 1;
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
   border-radius: 6px;
}

/*Colors*/
/*Contextual variations (linked labels get darker on :hover)*/

.label-primary {
    background: #016BFF;
    border-color: #016BFF;
    color: #fff;
}

.label-success {
    background: #45B17F;
    border-color: #45B17F;
    color: #fff;
}

.label-info {
    background: #9933FF;
    border-color: #9933FF;
    color: #fff;
}

.label-warning {
    background: #FF951C;
    border-color: #FF951C;
    color: #fff;
}

.label-danger {
    background: #BF0000;
    border-color: #BF0000;
    color: #fff;
}

input[type='checkbox']:disabled {
    cursor: not-allowed;
}

.checkbox_wrapper:has(input[type='checkbox']:disabled) {
    background-color: #d6dee5;
}

.file_upload_wrapper.disabled .file_upload_body {
    background-color: #d6dee5;
}

.side_navigation_nav li.active > a {
    background: rgb(255, 255, 255, 0.2);
    border-radius: 0px 10px 10px 10px;

    & > .side_navigation_border_radius {
        margin: 0;
        padding: 0;
        overflow: hidden;
        width: 20px;
        height: 20px;
        position: absolute;
        top: -20px;
        left: 0;
        display: block !important;

        &:before {
            content: "";
            position: absolute;
            width: 40px;
            height: 40px;
            top: -20.5px;
            right: -20px;
            border-radius: 100%;
            box-shadow: 0 0 0 10px rgb(255, 255, 255, 0.2);
        }
    }

    &:hover > .side_navigation_border_radius {
        &:before {
            box-shadow: 0 0 0 10px #fff;
        }
    }
}

.table_paginator {
    position: sticky;
    right: 0;
    float: right;
    margin-top: 18px;

    nav {
        .hidden {
            display: block !important;
        }

        div:first-child {
            display: none;
        }

        > div:nth-child(2) {
            div:first-child {
                display: none;
            }

            > div:nth-child(2) {
                > span {
                    box-shadow: none !important;

                    a {
                        background: #FFFFFF;
                        border: 1px solid #000F33 !important;
                        color: #000F33;
                        font-size: 14px;
                        line-height: 18px;
                        padding: 5px 0px !important;
                        min-width: 30px;
                        text-align: center;
                        border-radius: 50% !important;
                        margin-left: 1px !important;
                        display: inline-block;
                        vertical-align: top;
                    }

                    a:has(svg), span:has(svg):not(:has(span)) {
                        padding: 4px 0 !important;
                    }

                    a:hover, a.active, a:focus {
                        background: #016BFF33 !important;
                        color: #000F33 !important;
                    }

                    & > span {
                        & > span {
                            background: #FFFFFF;
                            border: 1px solid #000F33 !important;
                            color: #000F33;
                            font-size: 14px;
                            line-height: 18px;
                            padding: 5px 0px !important;
                            min-width: 30px;
                            text-align: center;
                            border-radius: 50% !important;
                            margin-left: 1px !important;
                            display: inline-block;
                            vertical-align: top;
                        }

                        &[aria-current=page] > span {
                            background: #016BFF33 !important;
                            color: #000F33 !important;
                        }
                    }

                    [aria-disabled=true], [aria-current=page] {
                        cursor: not-allowed;
                    }
                }
            }

            svg {
                width: 20px;
            }
        }
    }
}

@media (max-width: 1600px) {
    .brochure_carousel {
        .owl-item:first-child:not(.active) {
            margin-left: 0;
        }
    }
}

@media (max-width: 1366px) {
    .back_widget_link_body {
        min-height: 104px;
    }

    .landing_menu_wrapper {
        overflow-y: auto;
    }

    .landing_menu_body {
        padding: 70px 20px 30px 50px;
    }

    .brochure_body {
        width: calc(100% / 5 - 20px);
    }

    .brochure_body.carousel-item {
        width: calc(100% / 5.5 - 20px);
    }

    .brochure_page.landing_wrapper {
        padding-left: 30px;
        padding-right: 30px;
    }

    .brochure_carousel {
        .owl-item:first-child:not(.active) {
            margin-left: calc(calc((100vw - 1366px) / 2 + calc(1366px / 6) - 60px) / -1);
        }
    }
}

@media (max-width: 1280px) {
    .brochure_body.carousel-item {
        width: calc(100% / 4.5 - 20px);
    }
}

@media (max-width: 1199px) {
    .navigation_wrapper {
        display: none;
    }

    .navigation_wrapper_small {
        display: block;
    }

    .navigation_wrapper_small .navbar-toggle {
        display: block;
        float: none;
        padding: 0;
        border: 0;
        vertical-align: top;
        margin: 23px 0 0;
    }

    .guest_header_wrapper_bottom {
        background: #0848A4;
    }

    .brochure_body {
        width: calc(100% / 4 - 20px);
    }

    .brochure_modal_dialog {
        width: calc(100% - 10px);
        max-width: 480px;
    }

    .brochure_info_wrapper {
        height: 80vh;
        overflow-y: auto;
    }

    .brochure_info_wrapper_right {
        height: auto;
        float: none;
        display: block;
        padding: 20px 20px;
        border: 0;
        border-bottom: 1px solid #707070;
        margin: auto;
        width: 100%;
    }

    .img_brochure_modal {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        max-width: 340px;
        margin: auto;
        display: block;
    }

    .brochure_info_wrapper_left {
        width: 100%;
    }

    .brochure_info_wrapper_left_scroll_wrapper {
        height: auto;
    }

    .back_widget_graph_body {
        width: calc(100% - 20px);
    }

    .back_widget_link_body {
        width: calc(50% - 20px);
        /*min-height: auto;*/
    }

    .contact_us_branch_wrapper {
        width: calc(50% - 40px);
    }

    .brochure_footer_wrapper {
        text-align: center;
        background-image: url(../images/njm-home-phone-footer-background-responsive.png) !important;
    }

    .brochure_footer_content_wrapper {
        justify-content: center;
        text-align: center;
    }

    .brochure_footer_app_wrapper {
        justify-content: center;
    }

    .footer_hand {
        position: relative;
        top: auto;
        left: auto;
        margin-bottom: -40px;
        margin-top: 30px;
    }

    .side_navigation_container {
        display: none;
    }

    .mobile_show_sidebar .side_navigation_container {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
    }

    .toggle_main_wrapper {
        width: 100%;
    }

    .btn_menu_header_mobile {
        display: inline-block;
    }

    .header_logo_title_mobile {
        display: inline-block;
    }

    .header_logo_title_portal {
        display: none;
    }

    .header_kpdn_logo {
        margin-right: 8px;
    }

    .btn_toggle_sidebar {
        display: none;
    }

    .brochure_body.carousel-item {
        width: calc(100% / 3.5 - 20px);
    }

    .view_all_brochure_content_pc {
        display: none;
    }

    .view_all_brochure_content_mobile {
        display: inline-block;
        vertical-align: top;
    }

    .brochure_filter_body:first-child {
        margin-left: 0;
        min-width: auto !important;
    }

    .brochure_filter_body .btn {
        min-width: auto;
    }

    .brochure_info_info_body_container {
        display: inline;
    }

    #img_qr_code {
        max-width: unset;
        max-height: 175px;
        margin-bottom: 14px;
    }
}

@media (max-width: 991px) {
    .brochure_body {
        width: calc(100% / 3 - 20px);
    }

    .form_collapse_box {
        width: 100%;
    }

    .btn_menu_header_mobile {
        display: inline-block;
    }

    .header_logo_title_mobile {
        display: inline-block;
    }

    .header_logo_title_portal {
        display: none;
    }

    .header_kpdn_logo {
        margin-right: 8px;
    }

    .back_wrapper {
        padding: 10px 0 10px 10px;
    }

    .back_header_wrapper {
        padding: 5px 10px;
        margin-right: 10px;
    }

    .header_logo_title {
        font-size: 20px;
    }

    .header_profile_dropdown {
        width: calc(100% - 130px);
    }

    .side_navigation_container {
        display: none;
    }

    .mobile_show_sidebar .side_navigation_container {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
    }

    .toggle_main_wrapper {
        width: 100%;
    }

    .page_yeild_content_wrapper {
        padding-right: 10px;
    }

    .form_collapse_box:not(:last-child) {
        margin-bottom: 0;
    }

    .form_collapse_input_body:not(:last-child) {
        margin-bottom: 20px;
    }

    .report_form_wrapper .form_collapse_box {
        padding-top: 20px;
    }

    .has_announcement.landing_wrapper {
        padding-left: 30px;
    }

    body:not(:has(.registration_page)) .has_announcement .landing_header_wrapper {
        justify-content: space-between;

        .landing_header_kpdn_logo_wrapper {
            display: flex;
        }
    }

    .btn_landing_video img {
        width: 90px;
    }

    .announcement_wrapper .landing_header_kpdn_logo_wrapper {
        display: none;
    }

    .btn_close_announcement {
        display: block;
    }

    .page_yeild_content_wrapper {
        height: calc(100vh - 88px);
    }

    .footer_hand {
        max-width: 240px;
    }

    .brochure_footer_wrapper {
        margin-bottom: 0;
    }

    .btn_select_all_group {
        display: block;
        margin-top: 10px;
    }

    .modal_title_btn_wrapper {
        display: block;
    }

    #premise .modal-header {
        padding-right: 20px;
    }

    .brochure_carousel .owl-dots {
        display: none;
    }

    .brochure_filter_wrapper {
        justify-content: space-between;
    }

    .btn_brochure_filter_mobile {
        display: inline-block;
    }

    .brochure_filter_container {
        display: none;
    }

    .show_brochure_filter .brochure_filter_container {
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }

    .show_brochure_filter .brochure_filter_wrapper {
        padding-bottom: 224px;
        position: relative;
    }

    .show_brochure_filter .brochure_filter_body {
        margin-left: 0;
        width: 100%;
    }

    .btn_load_more_brochure_carousel {
        width: auto !important;
        display: inline-block;
        min-width: auto;
        flex: 1;
        margin-left: 0px !important;
    }

    .brochure_carousel .owl-item:first-child:not(.active) {
        margin-left: 0;
    }
}

@media (max-width: 767px) {
    .btn_toggle_annoucement.active {
        left: 235px;
    }

    .btn_toggle_annoucement {
        padding: 12px 20px;
        left: -65px;
        width: 170px;
    }

    .brochure_body {
        width: calc(100% / 2 - 20px);
    }

    .form_collapse_input_body_title_wrapper {
        float: none;
    }

    .title_choose_applicant_document {
        height: auto;
    }

    .back_widget_link_body {
        width: calc(100% - 20px);
    }

    .sidebar {
        padding: 0;
        height: auto;
    }

    .navbar.navbar-default .navbar-toggle {
        margin-top: 8px;
        background: #fff;
    }

    .navbar-top-links {
        background: #0c6fff;
        padding: 0 15px;
    }

    #page-wrapper {
        height: auto;
        min-height: none !important;
    }

    .btn_toggle_sidebar {
        display: none;
    }

    .breadcrumb_btn_wrapper {
        display: block;
    }

    .breadcrumb_btn_group_wrapper {
        display: block;
    }

    .breadcrumb_btn_group_wrapper > * {
        margin: 0 0 8px;
        display: block;
    }

    .breadcrumb_btn_group_wrapper > *:last-child {
        margin-bottom: 0;
    }

    .pagination {
        margin-top: 52px;
        white-space: normal;
        display: inline-block;
        vertical-align: top;
        font-size: 0;
    }

    .pagination li {
        display: inline-block;
        vertical-align: top;
    }

    .btn {
        display: block;
        width: 100%;
        float: none;
        margin: 0;
    }

    .btn:not(:first-child) {
        margin-top: 10px;
    }

    .form_btn_body {
        display: block;
        float: none;
    }

    .form_btn_body:not(:first-child) {
        margin-top: 10px;
    }

    .plain_icon_button {
        width: auto;
        display: inline-block !important;
        vertical-align: top !important;
        margin-top: 0 !important;
    }

    .upload_link_input_error_wrapper {
        width: 100%;
        margin: 0;
        max-width: 100%;
    }

    .form_collapse_input_body_title {
        display: inline-block;
        vertical-align: top;
        width: 100%;
        height: auto !important;
        margin-bottom: 8px;
    }

    #staff_fields, #sale_date, #reset_password-form > .row {
        margin-bottom: 20px !important;
    }

    .modal-footer > .pull-right {
        float: none;
        display: block;
        width: 100%;
    }

    .modal-footer > .pull-right:not(:first-child) {
        margin-top: 10px;
    }

    .captcha_input_btn_wrapper .btn {
        margin-top: 0;
    }

    .registration_form_btn_wrapper .btn-primary {
        min-width: auto;
    }

    .landing_wrapper {
        padding: 12px 12px 4px;
    }

    .brochure_page.landing_wrapper {
        padding-left: 12px;
        padding-right: 12px;
    }

    .landing_header_kpdn_logo_center {
        text-align: left;
        margin: 0 0 20px;
    }

    .landing_header_kpdn_logo_center img {
        margin: 0 0 10px !important;
    }

    .landing_header_kpdn_logo_wrapper div {
        margin: 0;
        display: none;
    }

    .system_name {
        font-size: 20px;
    }

    .landing_menu_body {
        display: block;
    }

    .landing_menu_box:first-child {
        border-right: 0;
        width: 100%;
        display: block;
    }

    .landing_menu_box:not(:first-child) {
        width: 100%;
        display: block;
        padding: 30px 0 0 0;
        border-top: 1px solid #fff;
    }

    .landing_menu_body {
        padding: 64px 20px 20px;
    }

    .landing_menu_box > div:not(:last-child) .landing_menu_link {
        margin-bottom: 20px;
    }

    .landing_menu_group_link:not(:last-child) {
        margin-bottom: 20px;
    }

    .has_announcement.landing_wrapper {
        padding-left: 12px;
    }

    .contact_us_branch_wrapper {
        width: calc(100% - 40px);
    }

    .landing_header_wrapper.hide_left_logo {
        z-index: 1;
    }

    .daterangepicker .drp-buttons .btn {
        margin-left: 0;
    }

    .dashboard_body_title_wrapper {
        display: block;
    }

    .dashboard_body_title_wrapper .grey_dot {
        margin-left: 0;
        margin-right: 6px;
    }

    .dashboard_body_title_wrapper .grey_dot_content_body:not(:first-child) {
        margin-left: 6px;
    }

    .dashboard_body_title_wrapper .grey_content {
        display: inline-block;
        vertical-align: top;
    }

    .dashboard_filter_wrapper .with_auto {
        width: 100% !important;
        overflow-x: hidden;
    }

    .dashboard_filter_wrapper_grey {
        margin-top: 10px;
    }

    .brochure_footer_app_wrapper {
        display: block;
        max-width: 320px;
        font-size: 0;
        margin: auto;
        text-align: center;
    }

    .btn_search_brochure {
        margin: 0 0 0 10px !important;
        width: 46px;
    }

    .brochure_footer_wrapper {
        background-image: url(../images/njm-home-phone-footer-background-responsive.png) !important;
    }

    .brochure_footer_app_wrapper > a {
        display: inline-block;
        vertical-align: top;
    }

    .brochure_search_wrapper {
        margin: -53px 20px 10px;
    }

    .njm_welcome_banner_img {
        display: none;
    }

    .njm_welcome_banner_img_mobile {
        display: block;
        max-width: 780px;
        margin: auto;
        max-height: 530px;
        object-fit: cover;
    }

    .banner_carousel_pc {
        display: none !important;
    }

    .banner_carousel_mobile {
        display: block !important;
    }

    .dashboard_bar_chart_col .dashboard_body {
        padding-bottom: 30px;
    }

    .brochure_body.carousel-item {
        width: calc(100% / 2.5 - 20px);
    }

    .carousel_inner {
        margin: 0 0px 0 -12px;
        width: calc(100% + 24px);
        padding-left: 2px;
    }

    .brochure_carousel .img_brochure_carousel_wrapper, .brochure_carousel .img_brochure {
        border-radius: 10px;
    }

    .brochure_carousel .brochure_details_wrapper {
        display: none;
    }

    .landing_header_wrapper {
        margin-bottom: 14px;
    }

    .bootstrap-select.form-control button {
        margin-top: 0;
    }

    .brochure_carousel {
        .owl-item:first-child:not(.active) {
            margin-left: 0;
        }
    }

    .btn_load_more_brochure_carousel {
        margin-left: 10px !important;
    }

    .btn_in_input_wrapper {
        display: block;
    }

    .btn_in_input_wrapper .btn {
        border-radius: 10px;
    }

    .btn_in_input_wrapper input {
        border-radius: 10px;
    }

    .landing_wrapper.registration_page .landing_header_kpdn_logo_center {
        margin-top: -61px;
    }

    .side_floating_icon_wrapper {
        display: none;
    }

    .btn_landing_announcement {
        display: inline-block;
    }

    .brochure_page {
        .landing_header_btn {
            &.btn_landing_home_login {
                margin-top: 0 !important;
                font-size: 14px;
                min-width: 100px;
                padding: 9px 12px !important;
            }

            &.btn_landing_menu {
                padding: 8px 14px;

                span {
                    font-size: 14px;
                }
            }
        }
    }

    .table_paginator {
        margin-top: 52px;
    }
}

@media (max-width: 576px) {
    .product_step_div, .brochure_step_div{
        margin-left: 0px;
    }

    .brochure_body.carousel-item {
        width: calc(100% / 1.5 - 20px);
    }
}

@media (max-width: 540px) {
    .pagination {
        display: block;
        text-align: center;
        margin: 52px auto 0 !important;
    }
}

@media (max-width: 480px) {
    .announcement_wrapper {
        max-width: 320px;
        left: -320px;
    }

    .brochure_filter_body_big {
        margin-bottom: 10px;
    }

    .btn_create_new_application {
        margin-right: 0;
        margin-bottom: 8px;
        display: block;
    }

    .dropdown_profile_detail_box {
        display: block;
    }

    .dropdown_profile_detail_wrapper {
        display: block;
    }

    .dropdown_profile_detail_title {
        display: inline-block;
        vertical-align: top;
        width: auto;
    }

    .dropdown_profile_detail_colon {
        display: inline-block;
        vertical-align: top;
    }

    .dropdown_profile_btn_wrapper {
        display: block;
        font-size: 0;
    }

    .dropdown_profile_btn_body {
        margin: 0 0 10px;
        max-width: none;
        display: inline-block;
        vertical-align: top;
        width: 50%;
    }

    .header_profile_dropdown .dropdown-menu {
        padding: 10px 10px;
    }

    .dropdown_profile_img {
        display: block;
        margin: 0 auto 6px;
    }

    .dropdown_profile_detail_body {
        width: 100%;
    }

    .dropdown_profile_detail_data {
        width: 100%;
        max-width: 260px;
    }

    .landing_menu_group_link_wrapper .fa-play {
        margin-right: 20px;
    }

    .grey_dot_content_wrapper {
        display: block !important;
    }

    .dashboard_body_title_wrapper .grey_dot_content_body:not(:first-child) {
        margin-left: 0;
    }

    .brochure_footer_app_wrapper > a {
        max-width: 120px;
    }

    .brochure_footer_wrapper {
        padding: 40px 20px;
        margin-top: 30px;
    }

    .file_upload_body {
        padding: 10px 12px;
    }

    body:has(.announcement_wrapper.active) .side_floating_icon_wrapper {
        left: 320px;
    }
}

@media (max-width: 456px)
{
    .fix-width {
        overflow-x: scroll;
    }

    .brochure_carousel .owl-item:first-child:not(.active) {
        margin-left: 0;
    }
}

@media (max-width: 370px)
{
    .brochure_footer_app_wrapper {
        margin: 0 -10px;
    }

    .img_kpdn {
        margin-right: 0;
    }

    .btn_landing_menu, .btn_landing_home_login {
        padding: 8px 16px;
    }
}

@media print {
    body:has(.dashboard_wrapper) {
        width: 991px;
    }

    .back_header_wrapper, .form_btn_wrapper, .breadcrumb_btn_wrapper, .report_form_wrapper, .side_navigation_container {
        display: none !important;
    }

    .back_wrapper {
        padding: 0 !important;
        background: #fff !important;
    }

    .page_yeild_content_wrapper {
        height: auto !important;
        overflow-y: visible !important;
        padding: 0 !important;
    }

    .report_result_wrapper {
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .report_result {
        overflow-x: visible !important;
    }

    table {
        min-width: auto !important;
    }

    .print_preview_header {
        padding-top: 20px;
    }

    .dashboard_left_wrapper > .dashboard_body:first-child:not(:last-child) {
        display: none;
    }

    .dashboard_left_wrapper > .dashboard_body.dashboard_body_grey {
        margin-top: 24px;
    }

    .dashboard_filter_wrapper.dashboard_filter_wrapper_grey {
        opacity: 0;
    }

    body:has(.dashboard_left_right_wrapper) {
        background: #fff;
    }

    .dashboard_right_wrapper.dashboard_bar_chart_col > .dashboard_body {
        padding-bottom: 4px;
    }

    .dashboard_left_right_wrapper > .col-sm-12:not(.dashboard_left_wrapper):not(.dashboard_right_wrapper) {
        margin-top: 0;
    }

    .dashboard_left_right_wrapper > .col-sm-12:not(.dashboard_left_wrapper):not(.dashboard_right_wrapper) > .dashboard_body:first-child {
        padding-top: 0;
        padding-bottom: 0;
    }

    .dashboard_left_wrapper .dashboard_filter_wrapper {
        display: none;
    }
}