﻿/* Todo - Hardip: this css file needs to be reviewed based on the new classes in LeptonX, Bootstrap5, etc... */

/*css variables*/
:root {
    --lpx-logo: url('/images/logo/logo-light.png') !important;
    --lpx-logo-icon: url('/images/logo/logo-icon-dark.png') !important;
    --lpx-brand: #D52028 !important;
}

@font-face {
    font-family: 'Epilogue';
    src: url('./font/Epilogue-Bold.eot');
    src: url('./font/Epilogue-Bold.eot?#iefix') format('embedded-opentype'), url('./font/Epilogue-Bold.woff2') format('woff2'), url('./font/Epilogue-Bold.woff') format('woff'), url('./font/Epilogue-Bold.ttf') format('truetype'), url('font/Epilogue-Bold.svg#Epilogue-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Epilogue';
    src: url('./font/Epilogue-Regular.eot');
    src: url('./font/Epilogue-Regular.eot?#iefix') format('embedded-opentype'), url('./font/Epilogue-Regular.woff2') format('woff2'), url('./font/Epilogue-Regular.woff') format('woff'), url('./font/Epilogue-Regular.ttf') format('truetype'), url('./font/Epilogue-Regular.svg#Epilogue-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Epilogue';
    src: url('./font/Epilogue-Medium.eot');
    src: url('./font/Epilogue-Medium.eot') format('embedded-opentype'), url('./font/Epilogue-Medium.woff2') format('woff2'), url('./font/Epilogue-Medium.woff') format('woff'), url('./font/Epilogue-Medium.ttf') format('truetype'), url('./font/Epilogue-Medium.svg#Epilogue-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/*Layout Start*/
.lpx-topbar-container .lpx-topbar {
    border: 0 !important;
}

.lpx-content-wrapper {
    margin-top: -17px;
}

.k-grid a {
   color: var(--bs-link-color) !important;
}

.k-grid a:hover {
    color: var(--bs-link-hover-color) !important;
}

.notification-pl {
    padding-left: 1rem;
}

/*Layout end*/

.lpx-brand-name {
    display: none;
}

.lpx-menu-filter {
    display: none;
}

.navbar-brand {
    width: 180px;
    height: 35px;
    background: var(--logo) center left;
    background-size: contain !important;
    background-repeat: no-repeat;
    z-index: 106;
    top: 16px;
    left: 20px;
    position: absolute;
}

.lp-opened-sidebar .lp-sidebar, .lp-closed .lp-sidebar {
    background: none;
    background-color: white;
}
.lp-opened-sidebar .lp-sidebar .lp-sidebar-navi ul li a{
    color: #404041;
}
.lp-opened-sidebar .lp-sidebar .lp-sidebar-navi ul li.current > a > span.lp-icon{
    color:red;
}

.lp-opened-sidebar .lp-sidebar .lp-sidebar-navi ul li.current > ul .current > a:before, .lp-opened-sidebar .lp-sidebar .lp-sidebar-navi ul li.current > ul .active-page > a:before, .lp-opened-sidebar .lp-sidebar .lp-sidebar-navi ul li.active-page > ul .current > a:before, .lp-opened-sidebar .lp-sidebar .lp-sidebar-navi ul li.active-page > ul .active-page > a:before, .lp-closed .lp-sidebar .lp-sidebar-navi ul li.current > ul .current > a:before, .lp-closed .lp-sidebar .lp-sidebar-navi ul li.current > ul .active-page > a:before, .lp-closed .lp-sidebar .lp-sidebar-navi ul li.active-page > ul .current > a:before, .lp-closed .lp-sidebar .lp-sidebar-navi ul li.active-page > ul .active-page > a:before{
    background-color: red;
}
.lp-opened-sidebar .lp-sidebar .lp-sidebar-navi ul li a:hover > span.lp-icon, .lp-closed .lp-sidebar .lp-sidebar-navi ul li a:hover > span.lp-icon {
    color: red;
}
div.modal-body {
    padding: 0px 24px 0px 24px !important;
}



/* Telerik - begin */
.k-grid-header .k-header {
    font-weight: 700;
}

body {
    font-family: 'Epilogue';
    background: url("images/custom_image/background.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    background-color: #E6E7E8;
    color: #404041;
    padding-top: 56px;
}
/* Comman Style */
body h1 {
    font-family: 'Epilogue';
    font-size: 20pt;
    font-weight: bold;
    color: #404041;
}
body h2 {
    font-family: 'Epilogue';
    font-size: 13pt;
    font-weight: bold;
    color: #404041;
}
body h3 {
    font-family: 'Epilogue';
    font-size: 14pt;
    font-weight: bold;
    color: #404041;
}
body h4 {
    font-family: 'Epilogue';
    font-size: 12pt;
    font-weight: bold;
    color: #404041;
}
body h5 {
    font-family: 'Epilogue';
    font-size: 10pt;
    font-weight: bold;
    color: #404041;
}
p {
    font-family: 'Epilogue';
    font-size: 14px;
    font-weight: normal;
    color: #404041;
}

.lp-content {
    min-height: calc(100vh - 117px);
    overflow: auto;
}

header .navbar #navbarToolbar .navbar-nav .nav-item .dropdown-menu.show {
    width: 200px !important;
    max-width: 200px !important;
    min-width: max-content !important;
    top: 50px;
}
header {
    height: 56px;
}
.lp-footer {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
}
/* Column Search Bar Comman Style CSS Code */
.form-row .form-group .btn-primary{
    width: auto;
    min-width: auto;
}

/* Side Navigation Menu Style CSS Start */
.lpx-nav-menu .lpx-menu-item-link .lpx-menu-item-text {
    width: 200px !important;
}

.lp-sidebar a, header a, .btn, .navbar-brand {
    font-family: 'Epilogue';
    font-weight: 500;
}
.lp-sidebar .lp-sidebar-wrapper {
    padding: 0px 10px 10px 0px !important;
    border-top: 5px solid transparent;
}

/* First ul and li */
.lp-sidebar .lp-sidebar-wrapper .lp-sidebar-navi ul li {
    padding: 0px 0px 5px;
    margin: 0px;
}
.lp-sidebar .lp-sidebar-wrapper .lp-sidebar-navi > ul > li.current > a, .lp-sidebar .lp-sidebar-wrapper .lp-sidebar-navi > ul > li:hover > a {
    background: #F1F1F2;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25);
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25);
}
.lp-sidebar .lp-sidebar-wrapper .lp-sidebar-navi > ul > li.current {
    box-shadow: none;
}
.lp-sidebar .lp-sidebar-wrapper .lp-sidebar-navi > ul > li > a {
    line-height: 40px;
    height: 40px;
    padding: 0px 24px 0px 16px;
}
.lp-opened-sidebar .lp-sidebar .lp-sidebar-navi ul li a > span.lp-icon, .lp-opened-sidebar .lp-sidebar .lp-sidebar-navi ul > li > a > span.lp-arrow-icon,
.lp-opened-sidebar .lp-sidebar .lp-sidebar-navi ul li a:hover > span.lp-icon {
    opacity: 1;
    color: #929497;
}
.lp-opened-sidebar .lp-sidebar .lp-sidebar-navi ul li.current a span.lp-arrow-icon, .lp-opened-sidebar .lp-sidebar .lp-sidebar-navi ul li.current a:hover > span.lp-icon{
    color: #D52028;
}

/* First ul and li inside Second ul and li */
.lp-sidebar .lp-sidebar-wrapper .lp-sidebar-navi ul li.has-drop ul {
    padding-bottom: 0px;
    margin-top: 3px;
    margin-left: 45px;
}
.lp-sidebar .lp-sidebar-wrapper .lp-sidebar-navi ul li.has-drop ul > li {
    background: #ffffff;
    margin-bottom: 0px;
    border-radius: 0px;
    box-shadow: none;
}
.lp-sidebar .lp-sidebar-wrapper .lp-sidebar-navi ul li.has-drop ul > li > a {
    line-height: 24px;
    height: 24px;
    padding: 0px 24px 0px 15px;
    border-bottom: 1px solid #F1F1F2;
}
.lp-sidebar .lp-sidebar-wrapper .lp-sidebar-navi ul li.has-drop ul > li > a:before {
    display: none;
}
.lp-sidebar .lp-sidebar-wrapper .lp-sidebar-navi ul li.has-drop ul > li > a > .lp-text{
    font-family: 'Epilogue';
    font-size: 11px;
    font-weight: 500;
}
.lp-sidebar .lp-sidebar-wrapper .lp-sidebar-navi ul > li.has-drop > ul {
    margin-top: 10px;
}
.lp-opened-sidebar .lp-sidebar .lp-sidebar-navi ul li a .lp-text {
    font-family: 'Epilogue';
    font-size: 13px;
    font-weight: 500;
    opacity: 1;
}
.lp-sidebar .lp-sidebar-wrapper .lp-sidebar-navi ul li.has-drop ul > li:hover > a, .lp-sidebar .lp-sidebar-wrapper .lp-sidebar-navi ul li.has-drop ul > li.current > a {
    background: #F1F1F2;
    color: #D52028;
}

/* Side Navigation Menu Style CSS End */

/* Outage Reports Map Style CSS Start */

.leaflet-control-layers label {
    font-size: 13px !important;
}

.leaflet-container a {
    text-decoration: none !important;
}

/* checkbox */
.custom-checkbox .custom-control {
    min-height: 1rem;
    margin-bottom: 8px;
}
.custom-control-label {
    font-family: 'Epilogue';
    font-size: 11px;
    font-weight: normal;
    color: #404041;
}
.custom-control-label::before, .custom-control-label::after {
    top: 0px;
}
.custom-checkbox .custom-control-label::before {
    background: #ffffff;
    border: 1px solid #404041 !important;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before, .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #D52028;
    border: 1px solid #D52028 !important;
}
.custom-control-input:focus ~ .custom-control-label::before {
    -webkit-box-shadow: 0px 0px 0px 3.2px rgba(213,32,40,0.25);
    -moz-box-shadow: 0px 0px 0px 3.2px rgba(213,32,40,0.25);
    box-shadow: 0px 0px 0px 3.2px rgba(213,32,40,0.25);
}

/* Radio */
.custom-radio .custom-control-label::before {
    border: 1px solid #404041 !important;
}
.custom-radio .custom-control-input:checked ~ .custom-control-label::before, .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #D52028;
}
.custom-control-label::after {
    background: no-repeat 50% 50%;
}
.custom-control-input:disabled ~ .custom-control-label::before, .custom-control-input[disabled] ~ .custom-control-label::before {
    background: #ffffff;
    border: 1px solid #404041 !important;
}
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: rgba(213, 32, 40, 0.5);
    border: 1px solid transparent !important;
}

label {
    font-family: 'Epilogue';
    font-size: 0.875rem;
    font-weight: normal;
    color: #404041;
}
.form-group .custom-select {
    position: relative;
    font-family: 'Epilogue';
    font-size: 13px;
    font-weight: 500;
    color: #404041;
    background-color: #F1F1F2 !important;
    -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
}
.form-group .custom-select option {
    background-color: #ffffff;
}
.form-group .custom-select:hover {
    background-color: #F8ADA9 !important;
    border-color: #F8ADA9;
}
.form-group .custom-select:focus {
    border-color: transparent !important;
    color: #404041;
    -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
}

/* Input Style Comman CSS Start */
.form-control:focus, .form-control:active, .form-control:visited, .custom-select:focus, .custom-select:active, .custom-select:visited, .custom-file-label:focus, .custom-file-label:active, .custom-file-label:visited {
    border-color: rgba(213,32,40, 0.25) !important;
    -webkit-box-shadow: 0px 0px 3.2px 0px rgba(213,32,40,1) !important;
    -moz-box-shadow: 0px 0px 3.2px 0px rgba(213,32,40,1) !important;
    box-shadow: 0px 0px 3.2px 0px rgba(213,32,40,1) !important;
}

.form-check-input:checked {
    background-color: var(--lpx-brand) !important;
}

.form-group .form-control, .form-select, .input-group-text {
    padding: 0.5rem 0.5rem;
}

.check-bold-label + .form-check-label {
    font-weight: bold !important;
}

/* Required field */
.required-field::after {
    content: " *";
    font-weight: bold;
    color: #F64E60;
}

/* Input Style Comman CSS End */

/* Card Style Comman CSS Start */
.card.kendo-grid-filter-dropdown {
    position: initial;
}
body.lp-opened-sidebar .lp-content {
    padding: 0px 20px 14px 285px;
    height: calc(100vh - 109px) !important;
}
.card .card-header .row h1{
    margin-bottom: 0px;
}

/* Not Working CSS Folder wise Start */
.card-body-top-space .card.dark-black-card {
    background-color: #414042;
}
.card-body-top-space .card .card-body {
    padding-top: 0px;
}

/* Supply Network CSS Start */
.form-group {
    margin-bottom: 0.5rem !important;
}
.modal .modal-content .modal-header {
    border-bottom: none !important
}
hr {
    margin: 0.5rem 0 !important;
}
.supply-network-container .col-4 > label {
    margin-top: 12px;
}
.supply-network-container .col-8{
    padding-right: 0px;
}
.supply-network-container .crud-modal .modal-dialog {
    max-width: 1000px
}
.supply-network-container .logo-preview-settings {
    margin-top: 0.4rem;
    margin-bottom: 0px;
}
.supply-network-container .img-logo-preview-settings {
    max-height: 100px;
}
.supply-network-container hr.divider.divider-text {
    margin: 25px 0 20px 0;
}
.supply-network-container hr.divider.divider-text::before {
    color: #000;
    font-size: 16px;
}
.supply-network-container hr .divider.divider-text.first-divider {
    margin: 0px 0 20px 0;
}
/* Supply Network CSS End */
/* Not Working CSS Folder wise End */

.custom-select-filter {
    font-size: 13.5px;
}
.leaflet-control-layers-expanded{
    padding: 15px !important;
}

/* Card Style Comman CSS End */

/* Outage Reports Map Style CSS End */
/* Button Style CSS Start */
.btn-container{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.btn-container.btn-center {
    justify-content: center;
}
.btn-container.btn-end {
    justify-content: flex-end;
}
.btn.btn-primary, .modal .modal-content .modal-footer .btn.btn-danger, .modal .modal-content .modal-footer .btn.btn-secondary {
    min-width: 120px;
    height: auto;
    min-height: 32px;
    font-family: 'Epilogue';
    font-weight: 500;
    background-color: #D52028;
    border-color: #D52028;
    border-radius: 20px;
    padding: 0px 18px;
}
.btn.btn-primary.btn-primary-small{
    height: 32px;
    font-size: 11px;
}
.btn.btn-primary.btn-primary-large {
    height: 45px;
    font-size: 14px;
}
.btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active, .btn.btn-primary:not(:disabled):not(.disabled):active,
.modal .modal-content .modal-footer .btn.btn-danger:hover, .modal .modal-content .modal-footer .btn.btn-danger:focus, .modal .modal-content .modal-footer .btn.btn-danger:active, .modal .modal-content .modal-footer .btn.btn-danger:not(:disabled):not(.disabled):active,
.modal .modal-content .modal-footer .btn.btn-secondary:hover, .modal .modal-content .modal-footer .btn.btn-secondary:focus, .modal .modal-content .modal-footer .btn.btn-secondary:active, .modal .modal-content .modal-footer .btn.btn-secondary:not(:disabled):not(.disabled):active {
    background-color: #A0181E !important;
    border-color: #A0181E !important;
}

.btn.btn-secondary {
    height: 24px;
    background-color: #F15D4E;
    font-size: 11px;
    border-radius: 4px;
    color: #ffffff;
    border-color: #F15D4E;
    padding: 0px 18px;
}

.btn.btn-secondary:hover, .btn.btn-secondary:focus, .btn.btn-secondary:active, .btn.btn-secondary:not(:disabled):not(.disabled):active {
    background-color: #A0181E !important;
    border-color: #A0181E !important;
}

.k-button-icontext.tertiary-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
}
.k-button-icontext.tertiary-btn .k-icon{
    margin: 0px;
}

/* Button Style CSS End */

/* Tab Style CSS Start */
.nav-tabs .nav-item .nav-link {
    color: #404041;
}
.nav-tabs .nav-item .nav-link.active {
    color: #D52028;
}
.nav-pills.flex-column .nav-link {
    color: rgba(64,64,65, 0.6);
}
.nav-pills .nav-item:hover .nav-link {
    color: #404041;
}
.nav-pills.flex-column .nav-link.active {
    border: 2px solid #d52028;
    background: #d52028;
}
.nav-pills .nav-item:hover .nav-link.active {
    color: #ffffff;
}
/* Tab Style CSS End */

/* ABD Table Style CSS Start */
.table.b-datagrid thead tr th {
    font-family: 'Epilogue';
    font-size: 12px;
    font-weight: bold;
    color: #404041;
    border: 1px solid #D1D3D4;
}
.table.b-datagrid tbody tr td {
    font-family: 'Epilogue';
    font-size: 11px;
    font-weight: normal;
    border: 1px solid #D1D3D4;
}
.table.b-datagrid tbody tr td .btn-primary.dropdown-toggle {
    width: auto;
    height: 24px;
    min-height: auto;
    font-family: 'Epilogue';
    font-size: 11px;
    font-weight: 500;
    background-color: #F15D4E;
    border-color: #F15D4E;
    padding: 0.2rem !important;
    border-radius: 4px;
}
.table.b-datagrid tbody tr td .dropdown-toggle::after {
    margin-left: 8px;
    vertical-align: middle;
}
.table.b-datagrid tbody tr td .btn-primary.dropdown-toggle:hover, .table.b-datagrid tbody tr td .btn.btn-primary.dropdown-toggle:focus, .table.b-datagrid tbody tr td .btn.btn-primary.dropdown-toggle:active, .table.b-datagrid tbody tr td .btn.btn-primary.dropdown-toggle:not(:disabled):not(.disabled):active {
    background-color: #F8ADA9 !important;
    border-color: #F8ADA9 !important;
    color: #404041;
}
.table.b-datagrid tbody tr td .btn.btn-primary.dropdown-toggle:focus {
    box-shadow: none;
}
.table.b-datagrid tbody tr td .dropdown-toggle.btn-primary:not(:disabled):not(.disabled).active, .table.b-datagrid tbody tr td .dropdown-toggle.btn-primary:not(:disabled):not(.disabled):active, .show > .dropdown-toggle.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #F15D4E;
    border-color: #F15D4E;
}

.table.b-datagrid tbody tr td .dropdown-menu {
    padding: 0px;
    border-radius: 4px;
}
.table.b-datagrid tbody tr td .dropdown-menu .dropdown-item {
    font-size: 11px;
    color: #404041;
}
.table.b-datagrid tbody tr td .dropdown-menu .dropdown-item:hover {
    background: #F8ADA9;
    color: #404041;
}

.table.b-datagrid tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.04);
}

.grid-custom-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.04);
    padding: 16px;
    border-radius: 6px;
}
.grid-custom-footer .number-grid-section{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}
.grid-custom-footer .number-grid-section label {
    margin-bottom: 0px;
    margin-right: 15px;
}
.grid-custom-footer .number-grid-section .input-number{
    width: 100px;
    height: 24px;
    background-color: #ffffff !important;
    border-radius: 4px;
    border: 2px solid #fff;
}

/* ABD Table Style CSS End */

/* Pagination CSS Code */
.pagination {
    height: 24px;
    align-items: center;
    margin: 0px;
}
.pagination .page-item{
    height: 24px;
}
.pagination .page-item:first-child .page-link{
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
.pagination .page-item:last-child .page-link{
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
.pagination .page-item .page-link{
    padding: 0px 8px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pagination .page-item.active .page-link{
    background-color: #F8ADA9;
    color: #404041;
    opacity: 1;
}
.pagination .page-item .custom-select {
    height: calc(10px + .75rem + 2px);
    border: none;
    border-radius: 0px;
    padding: 0px 30px 0px 8px;
}

/* Kendo Grid Style CSS Start */
.table-container{
    position: relative;
}
.k-grid .k-grid-header {
    padding-right: 0px !important;
}
.k-grid .k-grid-header .k-grid-header-wrap table,
.k-grid .k-grid-container .k-grid-content .k-grid-table{
    border-collapse: collapse;
}
.k-grid .k-grid-header .k-grid-header-wrap {
    /* overflow: auto; */
    overflow-y: hidden;
}
.k-grid .k-grid-header .k-grid-header-wrap table thead tr th {
    width: 150px;
    font-size: 14px;
    font-family: 'Epilogue';
    font-weight: bold;
    color: #404041;
    padding-right: 40px;
}
.k-grid .k-grid-header .k-grid-header-wrap table thead tr th:first-child,
.k-grid .k-grid-container .k-grid-content .k-grid-table tbody tr td:first-child {
    border-left-width: 1px;
}
.k-grid .k-grid-container .k-grid-content {
    overflow: auto;
    overflow-y: hidden;
}
.k-grid .k-grid-container .k-grid-content .k-grid-table tbody tr td {
    font-size: 14px;
    font-family: 'Epilogue';
    font-weight: normal;
    color: #404041;
    border-width: 1px 1px 1px 1px;
}

.k-grid-md td, .k-grid-md .k-table-td {
    padding-block: 0px !important;
}

.k-grid .k-toolbar .k-button-icontext.k-button {
    min-width: 120px;
    height: auto;
    min-height: 32px;
    font-family: 'Open Sans';
    font-weight: 500;
    color: #ffffff;
    background-color: #D52028;
    border-color: #D52028;
    border-radius: 4px;
}
.k-grid .k-toolbar .k-button-icontext.k-button:hover, .k-toolbar .k-button-icontext.k-button:focus, .k-toolbar .k-button-icontext.k-button:active, .k-toolbar .k-button-icontext.k-button:not(:disabled):not(.disabled):active {
    background-color: #A0181E !important;
    border-color: #A0181E !important;
    font-weight: 500;
}

/* Kendo Grid Style CSS Start */

/* Modal Style CSS Start */
.modal .modal-content .modal-header {
    padding: 0px;
    margin: 12px 24px;
    border-bottom: 1px solid #dddddd;
}
.modal .modal-content .modal-header .modal-title {
    font-family: 'Epilogue';
    font-size: 16pt;
    font-weight: bold;
    color: #404041;
}
.modal .modal-content .modal-body h4 {
    padding: 5px 0px 0px;
}
.modal .modal-content .modal-body .tab-content {
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
.bottom-border {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-left: 0px !important;
    padding-right: 0px !important;
}

/* Modal Style CSS End */

/* Google auto-complete */
/* the z-index for Modal forms in blazorise is 1050, therefore the autocomplete div was not being show because the default z-index is 1000 */
.pac-container {
    z-index: 1099;
}
/* Google auto-complete End*/

/* Scroll Bar Style CSS Start */
body.lp-opened-sidebar .lp-content::-webkit-scrollbar,
.k-grid .k-grid-container .k-grid-content::-webkit-scrollbar,
.k-grid .k-grid-header .k-grid-header-wrap::-webkit-scrollbar,
.modal .modal-content .modal-body::-webkit-scrollbar {
    width: 6px;
    height: 3px;
}
body.lp-opened-sidebar .lp-content::-webkit-scrollbar-track,
.k-grid .k-grid-container .k-grid-content::-webkit-scrollbar-track,
.k-grid .k-grid-header .k-grid-header-wrap::-webkit-scrollbar-track,
.modal .modal-content .modal-body::-webkit-scrollbar-track {
    background: #f1f1f1;
}
body.lp-opened-sidebar .lp-content::-webkit-scrollbar-thumb,
.k-grid .k-grid-container .k-grid-content::-webkit-scrollbar-thumb,
.k-grid .k-grid-header .k-grid-header-wrap::-webkit-scrollbar-thumb,
.modal .modal-content .modal-body::-webkit-scrollbar-thumb {
    background: #dddddd;
    border-radius: 20px;
}
body.lp-opened-sidebar .lp-content::-webkit-scrollbar-thumb:hover,
.k-grid .k-grid-container .k-grid-content::-webkit-scrollbar-thumb:hover,
.k-grid .k-grid-header .k-grid-header-wrap::-webkit-scrollbar-thumb:hover,
.modal .modal-content .modal-body::-webkit-scrollbar-thumb:hover {
    background: #404041;
}
/* Scroll Bar Style CSS End */

/* ***************************** Responsive Style CSS Start ***************************** */
@media (max-width: 1199.98px) {
}

@media (max-width: 991.98px) {
    body.lp-opened-sidebar .lp-content {
        height: calc(100vh - 110px) !important;
        min-height: calc(100vh - 110px);
    }
    /* Side Navigation Menu Style CSS Start */
    .lp-sidebar .lp-sidebar-wrapper {
        border-top: 5px solid #D52028;
    }
    .lp-sidebar .lp-sidebar-wrapper .lp-sidebar-navi > ul > li > a {
        border-bottom: 1px solid #F1F1F2;
    }
    .lp-sidebar .lp-sidebar-wrapper .lp-sidebar-navi ul li.has-drop ul > li{
        padding: 0px;
        border: none;
    }
    header {
        background: #404041 !important;
        height: 60px;
    }
    /* Side Navigation Menu Style CSS End */
    body.lp-opened-sidebar .lp-content {
        padding: 15px !important;
    }
    .lp-footer {
        padding: 0px !important;
    }
    .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
        filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));
        border-width: 1px !important;
    }
    .leaflet-container::before {
        position: absolute;
        content: "";
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        background: rgba(0, 0, 0, 0.25);
        z-index: 401;
    }
    .navbar-brand {
        background: url("images/custom_image/logo-white.png") center left;
        top: 7px;
    }
}

@media (max-width: 767.98px) {
    /* Table Style CSS Start */
    .table.b-datagrid tbody tr:nth-of-type(odd) {
        background-color: rgba(0, 0, 0, 0.04);
    }
    .table-container {
        width: 100%;
        display: block;
        overflow-x: scroll;
    }
    .table-container table.b-datagrid thead tr th {
        white-space: nowrap;
    }
    .table-container table.b-datagrid thead tr th .fas {
        margin-left: 8px;
    }
}

@media (max-width: 575.98px) {
    .card.dark-black-card .card-header {
        background: #ffffff;
    }
    .card.dark-black-card .card-header h1 {
        color: #404041;
        margin: 0px;
    }
    .card.dark-black-card .card-body{
        padding: 0px;
    }
    .grid-custom-footer {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .grid-custom-footer .left-section {
        margin-bottom: 12px;
    }
    .grid-custom-footer .number-grid-section{
        width: 100%;
        justify-content: flex-start;
    }
    .grid-custom-footer .number-grid-section .input-number{
        width: 100%;
    }
    .grid-custom-footer .number-grid-section label {
        margin-bottom: 5px;
        margin-right: 0px;
    }
}

/* ***************************** Responsive Style CSS End ***************************** */

/* Telerik - end */