@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap);
@import url(https://fonts.googleapis.com/css?family=Montserrat:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:regular,500,600,700,800,900,italic,500italic,600italic,700italic,800italic,900italic);

:root {
 --themeBlue: #367fa9;
 --themeGreen: #00a531;
 --themeRed: #ff1919;
 --themeYellow: #fca820;
 --shadow: #a8a8a8;
 --tableBorder: #b8b8b8;
 --tableBorder2: rgb(217, 217, 217);
 --white: #ffffff;
 --bg: #9db3ba21;
 --new-blue: #0000ff;
 --new-brown: #f7f7de;
 --body-bg-color: #fdffe87d;
 --gradient-dt: 45deg, #0098ca 15%, #006a8d 65%
}

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: "Source Sans 3", sans-serif
}

body {
 min-height: 100vh;
 font-family: "Source Sans 3", sans-serif
}

.bbg-img {
 font-weight: 400;
 background-color: var(--body-bg-color)
}

.logo {
 font-family: Montserrat, sans-serif !important;
}

input:focus-visible,
input:focus {
 border: 1px solid var(--themeBlue) !important;

}

.desktop-navbar nav {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 height: 55px;
 background: var(--themeBlue);
 box-shadow: 0 1px 9px var(--shadow);
 z-index: 99
}

table,
td,
th {
 text-align: center !important
}

nav .navbar {
 height: 53px;
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin: auto;
 background: var(--themeBlue);
 padding: 0 10px 0 0
}

.navbar .logo a {
 font-size: 30px;
 color: var(--white);
 text-decoration: none;
 font-weight: 800;
 letter-spacing: 1px
}

.nav-links .links li:hover {
 background-color: #004e75
}

nav .navbar .nav-links {
 line-height: 55px;
 height: 100%
}

nav .navbar .links {
 display: flex;
 height: 54px;
 margin-bottom: 0 !important
}

.log-out-button,
.log-out-button:hover,
.offcanvas-icon {
 color: var(--white);
 padding: 5px 12px;
 border-radius: 5px;
 font-size: 16px;
 text-decoration: none
}

.offcanvas-icon {
 background-color: var(--themeBlue)
}

.log-out-button {
 background-color: var(--themeRed)
}

.log-out-button:hover {
 background-color: var(--themeRed);
 background-color: color-mix(in srgb, var(--themeRed) 80%, var(--white) 10%)
}

nav .navbar .links li {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: space-between;
 list-style: none;
 padding: 0 14px
}

nav .navbar .links li a {
 height: 100%;
 text-decoration: none;
 white-space: nowrap;
 color: var(--white);
 font-size: 15px;
 font-weight: 500;
 display: flex;
 align-items: center
}

.links li:hover .htmlcss-arrow,
.links li:hover .js-arrow {
 transform: rotate(180deg)
}

nav .navbar .links li .arrow {
 width: 22px;
 line-height: 53px;
 text-align: center;
 display: inline-block;
 color: var(--white);
 transition: all .3s ease
}

nav .navbar .links li .sub-menu {
 position: absolute;
 top: 53px;
 left: 0;
 line-height: 40px;
 background: var(--themeBlue);
 box-shadow: 0 1px 7px #000;
 border-radius: 0 0 4px 4px;
 display: none;
 z-index: 2
}

nav .navbar .links li:hover .htmlCss-sub-menu,
nav .navbar .links li:hover .js-sub-menu {
 display: block
}

.navbar .links li .sub-menu li {
 padding: 0 22px;
 border-bottom: 1px solid var(--tableBorder)
}

.sub-menu i {
 padding-right: 10px;
 padding-left: 0
}

.navbar .links li .sub-menu a {
 color: var(--white);
 font-size: 15px;
 font-weight: 500
}

.navbar .links li .sub-menu .more-arrow {
 line-height: 40px
}

.navbar .links li .sub-menu .more-sub-menu {
 position: absolute;
 top: 0;
 left: 100%;
 border-radius: 0 4px 4px 4px;
 z-index: 1;
 display: none
}

.links li .sub-menu .more:hover .more-sub-menu {
 display: block
}

.navbar .search-box {
 position: relative;
 height: 40px;
 width: 40px
}

@media (min-width:975px) {
 .mobile-navbar {
  display: none
 }

 .desktop-navbar {
  display: block
 }
}

@media (max-width:975px) {
 .desktop-navbar {
  display: none
 }

 .mobile-navbar {
  display: block
 }
}

.mobile-navbar {
 background-color: var(--themeBlue)
}

.logo-mob {
 color: var(--white) !important;
 text-decoration: none !important;
 font-size: 35px
}

@media (max-width:400px) {
 .logo-mob {
  color: var(--white) !important;
  text-decoration: none !important;
  font-size: 25px;
  padding: 10px
 }
}

@media (max-width:300px) {
 .logo-mob {
  color: var(--white) !important;
  text-decoration: none !important;
  font-size: 20px;
  padding: 10px
 }
}

.offcanvas-header {
 background-color: var(--themeBlue);
 color: var(--white) !important
}

.btn-close {
 background-color: var(--themeRed) !important
}

.offcanvas-title {
 font-size: 30px
}

.navbar .search-box i {
 position: absolute;
 height: 100%;
 width: 100%;
 line-height: 40px;
 text-align: center;
 font-size: 22px;
 color: var(--white);
 font-weight: 600;
 cursor: pointer;
 transition: all .3s ease
}

.navbar .search-box .input-box {
 position: absolute;
 right: calc(100% - 40px);
 top: 80px;
 height: 60px;
 width: 300px;
 background: var(--themeBlue);
 border-radius: 6px;
 opacity: 0;
 pointer-events: none;
 transition: all .4s ease
}

.navbar.showInput .search-box .input-box {
 top: 65px;
 opacity: 1;
 pointer-events: auto;
 background: var(--themeBlue)
}

.search-box .input-box::before {
 content: "";
 position: absolute;
 height: 20px;
 width: 20px;
 background: var(--themeBlue);
 right: 10px;
 top: -6px;
 transform: rotate(45deg)
}

.search-box .input-box input {
 position: absolute;
 top: 50%;
 left: 50%;
 border-radius: 4px;
 transform: translate(-50%, -50%);
 height: 35px;
 width: 280px;
 outline: 0;
 padding: 0 15px;
 font-size: 16px;
 border: none
}

.navbar .nav-links .sidebar-logo {
 display: none
}

.navbar .bx-menu {
 display: none
}

.navbar .offcanvas-icon {
 display: none
}

ol,
ul {
 padding-left: 0 !important
}

@media (max-width:920px) {
 nav .navbar {
  max-width: 100%;
  padding: 0 25px
 }

 nav .navbar .logo a {
  font-size: 27px
 }

 nav .navbar .links li {
  padding: 0 10px;
  white-space: nowrap
 }

 nav .navbar .links li a {
  font-size: 15px
 }
}

@media (max-width:800px) {
 .navbar .bx-menu {
  display: block
 }

 .navbar .offcanvas-icon {
  display: block
 }

 nav .navbar .nav-links {
  position: fixed;
  top: 0;
  left: -100%;
  display: block;
  max-width: 270px;
  width: 100%;
  background: var(--themeBlue);
  line-height: 40px;
  padding: 20px;
  box-shadow: 0 5px 10px var(--shadow);
  transition: all .5s ease;
  z-index: 1000
 }

 .navbar .nav-links .sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: space-between
 }

 .sidebar-logo .logo-name {
  font-size: 25px;
  color: var(--white)
 }

 .navbar .bx-menu,
 .sidebar-logo i {
  font-size: 25px;
  color: var(--white)
 }

 nav .navbar .links {
  display: block;
  margin-top: 20px
 }

 nav .navbar .links li .arrow {
  line-height: 40px
 }

 nav .navbar .links li {
  display: block
 }

 nav .navbar .links li .sub-menu {
  position: relative;
  top: 0;
  box-shadow: none;
  display: none
 }

 nav .navbar .links li .sub-menu li {
  border-bottom: none
 }

 .navbar .links li .sub-menu .more-sub-menu {
  display: none;
  position: relative;
  left: 0
 }

 .navbar .links li .sub-menu .more-sub-menu li {
  display: flex;
  align-items: center;
  justify-content: space-between
 }

 .links li:hover .htmlcss-arrow,
 .links li:hover .js-arrow {
  transform: rotate(0)
 }

 .navbar .links li .sub-menu .more-sub-menu {
  display: none
 }

 .navbar .links li .sub-menu .more span {
  display: flex;
  align-items: center
 }

 .links li .sub-menu .more:hover .more-sub-menu {
  display: none
 }

 nav .navbar .links li:hover .htmlCss-sub-menu,
 nav .navbar .links li:hover .js-sub-menu {
  display: none
 }

 .navbar .nav-links.show1 .links .htmlCss-sub-menu,
 .navbar .nav-links.show2 .links .more .more-sub-menu,
 .navbar .nav-links.show3 .links .js-sub-menu {
  display: block
 }

 .navbar .nav-links.show1 .links .htmlcss-arrow,
 .navbar .nav-links.show3 .links .js-arrow {
  transform: rotate(180deg)
 }

 .navbar .nav-links.show2 .links .more-arrow {
  transform: rotate(90deg)
 }
}

@media (max-width:370px) {
 nav .navbar .nav-links {
  max-width: 100%
 }
}

button.back-btn {
 padding: 5px 20px !important;
 margin-left: 10px !important;
 background-color: var(--themeYellow) !important;
 border: none !important;
 outline: 1px solid #fff !important;
 outline-offset: -5px !important;
 color: #fff !important
}

button.back-btn:before {
 content: "\f100";
 font-family: FontAwesome;
 padding-right: 6px
}

button.back-btn:hover {
 opacity: .88
}

.card {
 margin-bottom: 1rem;
 border: none !important;
 margin-left: 0;
 position: relative;
 display: flex;
 flex-direction: column;
 min-width: 0;
 word-wrap: break-word;
 background-color: var(--white);
 border-radius: border-box
}

.card .card-content {
 position: relative
}

.card-body {
 padding: 3px !important
}

.page-heading {
 color: var(--themeBlue);
 font-size: 20px;
 font-weight: 700;
 padding-bottom: 1px;
 padding-top: 10px
}

.form-control {
 width: 100% !important
}

table,
td,
th {
 border: 1px solid #000;
 text-align: center;
 line-height: 1.42857143;
 padding-left: 2px;
 padding-right: 2px;
 vertical-align: middle
}

#example1,
td,
th {
 text-align: center !important
}

#example1 td {
 border: 1px solid var(--tableBorder);
 border-collapse: collapse;
 padding: 3px;
 padding-top: 1px
}

#example_2 thead tr th,
#fgfyt thead tr th,
table thead tr th {
 background-color: var(--themeBlue) !important;
 border: 1px solid #fff !important;
 color: #fff !important
}

#example1 tfoot tr th {
 background-color: rgba(214, 245, 255, .742);
 border: 1px solid #fff;
 color: #000
}

.buttons-collection,
.buttons-html5 {
 background-color: var(--themeBlue) !important;
 color: var(--white) !important;
 border: none !important;
 border-radius: 4px !important
}

input[type=submit] {
 outline-offset: 0 !important;
 outline-color: var(--themeBlue) !important
}

.text-area {
 width: 290px;
 height: 70px
}

.s-button {
 padding: 10px 50px 10px 50px;
 border-radius: 5px;
 background-color: #00c56c;
 color: #fff;
 border: none
}

.s-button:hover {
 background-color: #00a65a
}

.c-button {
 padding: 10px 50px 10px 50px;
 border-radius: 5px;
 background-color: var(--themeYellow);
 color: #fff;
 border: none
}

.c-button:hover {
 background-color: orange
}

.last-heading {
 color: var(--themeBlue);
 font-size: 20px;
 font-weight: 700;
 padding-bottom: 15px
}

input[type=checkbox] {
 height: 15px;
 width: 25px
}

.text-area1 {
 width: 388px;
 height: 75px
}

.table-btn {
 border: none;
 background-color: #fff
}

.edit-btn,
.view-btn-1 {
 padding: 2px 5px 2px 7px;
 background-color: var(--themeYellow);
 color: #fff;
 border: none;
 border-radius: 4px;
 margin-left: 10px;
 transform: translateY(1px) !important
}

.view-btn-1 {
 background-color: var(--themeGreen)
}

.del-btn {
 padding: 2px 7px 2px 7px;
 background-color: var(--themeRed);
 color: #fff;
 border: none;
 border-radius: 4px;
 margin-left: 10px;
 transform: translateY(1px) !important
}

.ok-btn {
 padding: 2px 7px 2px 7px;
 background-color: var(--themeGreen);
 color: #fff;
 border: none;
 border-radius: 4px;
 margin-left: 10px;
 transform: translateY(1px) !important
}

.ok-btn:hover {
 background-color: #00a65a
}

.section_padding {
 padding-top: 80px;
 padding-bottom: 40px
}

.page-heading1 {
 color: #25396f;
 font-size: 20px;
 font-weight: 700
}

.label-cls {
 color: var(--black);
 padding: 2px 12px;
 border-radius: 5px 5px 0 0;
 margin-top: 0;
 font-size: 14px !important;
 font-weight: 600
}

.add-btn {
 margin: 5px;
 background-color: var(--themeGreen);
 color: #fff;
 border: none
}

.sub-btn {
 width: 28px;
 height: 28px;
 margin: 5px;
 background-color: #ff4646;
 color: #fff;
 border: none;
 border-radius: 3px
}

.sub-btn:hover {
 background-color: var(--themeRed)
}

.modal {
 display: none;
 position: fixed;
 z-index: 1;
 padding-top: 100px;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 overflow: auto;
 background-color: #000;
 background-color: rgba(0, 0, 0, .4)
}

.modal-content {
 background-color: var(--white) !important;
 margin: auto;
 padding: 5px;
 border: 1px solid #888;
 width: 80%
}

.close {
 color: var(--white) !important;
 float: right;
 font-size: 20px;
 font-weight: 700
}

.close:focus,
.close:hover {
 color: #000;
 text-decoration: none;
 cursor: pointer
}

.top-container {
 background: var(--themeBlue);
 height: 50px;
 outline: 1px solid #a3a3a3;
 outline-offset: -5px
}

.print-cls {
 font-size: 18px;
 font-weight: 600
}

.checkbox1 {
 height: 15px !important;
 width: 25px
}

.subm-btn {
 margin-left: 200px;
 margin-right: 10px;
 padding-left: 10px;
 padding-right: 10px;
 background-color: var(--themeGreen);
 border-color: var(--themeGreen);
 border-radius: 3px;
 color: var(--white);
 border: none;
 padding-top: 5px;
 padding-bottom: 5px
}

.note-btn {
 padding: 5px 20px;
 margin-inline: 10px;
 background-color: var(--themeYellow);
 border: none;
 outline: 1px solid #fff;
 outline-offset: -4px;
 color: #fff;
 border-radius: 0
}

body.purchase-create .note-btn {
 padding: 2px 15px;
 margin-inline: 10px;
 margin-top: 21px;
 outline: 0 solid #fff;
 outline-offset: -4px;
 color: var(--white);
 border-radius: 3px
}

.touch-div {
 float: right;
 padding-bottom: 1rem
}

.touch-label {
 font-size: 18px;
 font-weight: 600
}

.i-icon {
 border: solid 1px;
 margin-left: 65px;
 margin-top: -27px;
 border-radius: 12px;
 border: none
}

.btn-secondary {
 width: 20px;
 color: var(--white);
 background-color: #9fd4e7 !important;
 border-color: #9fd4e7 !important;
 border-radius: 12px !important;
 height: 22px
}

.btn {
 padding: 0 !important
}

.note-cls {
 text-align: center;
 color: #fff;
 margin-top: 10px;
 font-size: 18px
}

#myTable .purchase-tr {
 background-color: rgb(107 105 107);
 color: #fff
}

.purchase-tr {
 background-color: var(--themeBlue);
 color: #fff
}

.table-bordered {
 border: 1px solid var(--tableBorder)
}

.form-control {
 display: block;
 width: 100%;
 height: 34px;
 padding: 6px !important;
 font-size: 14px;
 line-height: 1.42857143;
 color: #555;
 background-color: var(--white);
 background-image: none;
 border: 1px solid #ccc;
 border-radius: 2px !important;
 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
}

.text-center {
 text-align: center
}

.no-padding {
 padding: 0 !important
}

.form-control {
 border-radius: 3px;
 box-shadow: none !important;
 border-color: #d2d6de
}

.cal-div {
 background-color: #fff;
 margin-left: 10px
}

.add-cus {
 padding: 5px 10px 5px 10px;
 border-radius: 5px;
 background-color: var(--themeBlue);
 border-color: var(--themeBlue);
 color: #fff;
 font-size: 15px;
 border: none;
 margin-left: 0 !important
}

.active-btn {
 padding: .2em .6em .3em;
 font-size: 75%;
 font-weight: 700;
 line-height: 1;
 border-radius: .25em;
 background-color: var(--themeGreen);
 color: #fff;
 border: none;
 text-align: center
}

.span-cls {
 font-size: 19px;
 font-weight: 800
}

.plus-icon {
 border: solid 1px grey;
 padding: 4px 6px 5px 6px;
 border-radius: 2px;
 border-left: none;
 background-color: #d3d3d3
}

.plus-btn {
 border: none;
 background: 0 0
}

.textarea {
 width: 100%;
 border: solid 1px #d3c5c5;
 outline-style: none
}

.cross-img {
 height: 100px
}

.cancel-btn {
 padding: 7px 25px 7px 25px;
 border-radius: 3px;
 background-color: #9f9f9f;
 color: #fff;
 border: none;
 margin-right: 10px
}

.cancel-btn:hover {
 background-color: #b5b5b5
}

.delete-btn {
 padding: 7px 25px 7px 25px;
 border-radius: 3px;
 background-color: #e34646;
 color: #fff;
 border: none;
 margin-left: 10px
}

.delete-btn:hover {
 background-color: var(--themeRed)
}

.cancel-btn:active,
.delete-btn:active {
 box-shadow: 0 0 var(--shadow);
 transform: translateY(1px)
}

.del-close {
 color: #c1c1c1;
 float: right;
 font-size: 35px;
 font-weight: 700
}

.modal-con {
 text-align: center
}

.btn-close {
 float: right
}

.btn-close:hover {
 box-shadow: none
}

.pay-label {
 font-size: 12px;
 font-weight: 600
}

.update-btn {
 margin-right: 10px;
 padding-left: 10px;
 padding-right: 10px;
 background-color: var(--themeBlue);
 border-color: var(--themeBlue);
 border-radius: 3px;
 color: var(--white);
 border: none;
 padding-top: 5px;
 padding-bottom: 5px
}

.selectbox-cls {
 padding: 6px 2px 6px 2px;
 border: solid 1px var(--tableBorder);
 border-radius: .25rem;
 width: 90%;
 outline-style: none
}

.add-row {
 padding: 5px 10px 5px 10px;
 border-radius: 5px;
 background-color: var(--themeGreen);
 border-color: var(--themeGreen);
 color: #fff;
 font-size: 15px;
 border: none;
 float: right;
 margin-top: -45px
}

.check-btn {
 background-color: var(--themeGreen);
 width: 25px;
 margin: 5px;
 color: #fff;
 border: none;
 border-radius: 3px
}

body.purchase-create .check-btn {
 background-color: var(--themeBlue);
 width: 25px;
 margin: 5px;
 color: var(--white);
 border: 1px solid gray;
 border-radius: 3px
}

.tbody1 {
 text-align: left;
 text-align: center
}

.trow:hover {
 box-shadow: rgba(14, 30, 37, .12) 0 2px 4px 0, rgba(14, 30, 37, .32) 0 2px 16px 0
}

.select2-container--default .select2-selection--single {
 background-color: var(--white);
 border: 1px solid var(--tableBorder) !important;
 border-radius: 4px;
 height: 34px !important
}

.select2-container--default .select2-search--dropdown .select2-search__field {
 border: 1px solid var(--tableBorder) !important;
 outline-style: none
}

.Alabel-cls {
 font-size: 14px;
 font-weight: 700
}

.purchase-table {
 padding: 2px 5px 0 5px
}

.editable-btn {
 background-color: var(--themeBlue) !important;
 padding: 3px;
 border: none;
 border-radius: 3px;
 color: #fff;
 height: 23px;
 width: 23px;
 margin-top: 5px !important
}

.input_style_ {
 width: 100%;
 outline: 1px solid #c2c2c2 !important;
 border-radius: 3px !important;
 height: 33px;
 padding: 0
}

.input_style_:focus {
 outline: 1.4px solid var(--themeBlue) !important
}

.save-btn-touch-hmaping {
 padding: 5px 80px;
 border: 1px solid var(--themeYellow) !important;
 border-radius: 4px;
 background-color: var(--themeYellow) !important
}

.save-btn-touch-hmaping:hover {
 background-color: var(--themeYellow) !important;
 border: 1px solid var(--themeYellow) !important
}

.view-btn-savepage {
 border: none;
 background-color: var(--themeBlue) !important;
 padding: 4px 5px;
 border-radius: 3px;
 color: #fff
}

.delete-btn-savepage {
 border: none;
 background-color: var(--themeRed) !important;
 padding: 4px 5px;
 border-radius: 3px;
 color: #fff
}

.view-btn-savepage:hover {
 background-color: var(--themeBlue) !important
}

.delete-btn-savepage:hover {
 background-color: #db2323 !important
}

.delete-btn-savepage:active,
.view-btn-savepage:active {
 box-shadow: 0 0 #666;
 transform: translateY(1px)
}

.input_search_SD {
 width: 80% !important;
 border: 2px solid var(--themeBlue) !important;
 border-top-left-radius: 30px;
 border-bottom-left-radius: 30px
}

.search-btn_SD {
 padding: 4px 20px;
 border: 1px solid var(--themeBlue) !important;
 border-top-right-radius: 30px;
 border-bottom-right-radius: 30px;
 border-left: none;
 color: #fff;
 background-color: var(--themeBlue) !important
}

.input_search_SD:focus {
 outline: 2px #00c0ef
}

.input_search_SD[type=text]:focus {
 outline: 3px solid #00405c34 !important
}

::placeholder {
 color: var(--themeBlue)
}

.barcode-btn_SD {
 padding: 4px 20px;
 border: 1px solid var(--themeBlue) !important;
 border-radius: 5px;
 border-left: none;
 color: #fff;
 background-color: var(--themeBlue) !important;
 float: right
}

input[type=text] {
 padding-left: 30px
}

.dataTables_filter {
 margin-right: 60px
}

#example td,
#example th {
 text-align: center
}

.close-modal-SavData {
 padding: 4px 20px;
 border: 1px solid #9a9a9a !important;
 border-radius: 5px !important;
 border-left: none !important;
 color: var(--white) !important;
 background-color: #9a9a9a !important
}

.save-modal-SavData {
 padding: 4px 20px;
 border: 1px solid var(--themeBlue) !important;
 border-radius: 5px;
 border-left: none;
 color: #fff;
 background-color: var(--themeBlue) !important
}

.close-modal-SavData,
.save-modal-SavData {
 transform: translateY(1px) !important
}

.modal_bodySD {
 background-color: #f9f2ea;
 background-repeat: repeat;
 background-attachment: fixed;
 object-fit: cover
}

.bbg-img- {
 background-color: #f9f8f6
}

.sub-menu>li {
 border-left: 3px solid var(--themeBlue)
}

.sub-menu>li:hover:not(.bg-danger) {
 border-left: 3px solid #2bcaff;
 background-color: #004e75 !important
}

/* .sub-menu>li.bg-danger:hover {} */

.page_heading_Breadcrumb,
.page_heading_new {
 margin: 0;
 padding: 0
}

.page_heading_Breadcrumb {
 display: flex;
 flex-direction: column-reverse;
 justify-content: end
}

.Breadcrumb-text {
 margin: 0;
 padding: 0
}

.Breadcrumb-head {
 margin: 0;
 padding: 0
}

.Breadcrumb-para {
 margin: 0;
 padding: 0;
 font-size: 15px
}

.Breadcrumb-a-link1,
.Breadcrumb-a-link2,
.Breadcrumb-a-link3 {
 padding-left: 10px;
 font-size: 14px
}

.Breadcrumb-a-link1,
.Breadcrumb-a-link2 {
 text-decoration: none;
 color: #000
}

.Breadcrumb-a-link3 {
 color: var(--themeBlue)
}

.fa-icon-dA {
 opacity: .7;
 font-size: 13px
}

#example>thead>tr>th {
 background-color: var(--themeBlue);
 color: #fff;
 border: 1px solid #fff
}

.btn-add-new_ {
 border: 1px solid #dee2e6;
 padding: 4px 10px;
 height: 33px;
 background-color: var(--themeBlue);
 border-radius: 4px;
 color: #fff
}

.btn-close-ad-item,
.btn-save-ad-item {
 border: none;
 padding: 5px 10px !important;
 border-radius: 5px;
 color: #fff
}

.btn-close-ad-item {
 background-color: gray
}

.btn-save-ad-item {
 background-color: var(--themeBlue)
}

select>option {
 padding: 10px 20px !important
}

.sub-menu-mob li a {
 text-decoration: none !important;
 color: #000
}

.sub-menu-mob {
 list-style-type: none !important;
 background-color: #e6f0ff
}

.sub-menu-mob li {
 padding: 14px 10px;
 border: 1px solid gray
}

.sub-menu-mob li:last-child {
 padding: 14px 10px;
 border: 1px solid gray
}

.sub-menu-mob {
 border: 1px solid gray;
 border-radius: 10px;
 border-top-left-radius: 0 !important;
 border-top-right-radius: 0 !important
}

.sub-menu-mob li:first-child {
 border: 1px solid var(--tableBorder);
 border-top-right-radius: 0;
 border-top-left-radius: 0
}

.sub-menu-mob li:last-child {
 border: 1px solid var(--tableBorder);
 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 10px
}

.accordion-body {
 padding-top: 3px !important;
 padding-right: 0 !important
}

.accordion-button {
 border-radius: 10px !important;
 border-bottom-right-radius: 0 !important;
 border-top: 2px solid var(--tableBorder) !important;
 border-left: 2px solid var(--tableBorder) !important;
 border-right: 2px solid var(--tableBorder) !important
}

.accordion-button:not(.collapsed) {
 background-color: var(--themeBlue) !important;
 color: var(--white) !important
}

.accordion-button:last-child {
 border-bottom: 2px solid var(--tableBorder) !important;
 border-bottom-right-radius: 10px !important
}

.accordion-button {
 border-bottom-right-radius: 0 !important
}

input {
 border: 1px solid var(--tableBorder2) !important
}

.purchase-tr {
 font-size: 14px
}

hr.hr1 {
 border: 2px solid var(--themeBlue);
 opacity: 1;
 margin-block: 7px
}

hr.hr2 {
 border: 1px solid var(--themeBlue);
 opacity: .8;
 margin-block: 7px
}

td {
 font-size: 14px
}

input[type=file]::file-selector-button {
 border: none;
 padding: .2em .4em;
 background-color: var(--themeBlue);
 background-color: color-mix(in srgb, var(--themeBlue) 80%, var(--white) 20%);
 border-radius: 4px;
 margin-inline: 1px 10px
}

input.form-control[type=file]::file-selector-button:hover,
input[type=file]::file-selector-button:hover {
 background-color: var(--themeBlue) !important;
 color: #000
}

input[type=file] {
 width: 100%;
 border-radius: 5px
}

.card {
 background-color: inherit !important
}

.form-control {
 font-size: 14px !important
}

.head-title-login::after {
 content: "" !important;
 display: block !important;
 background: linear-gradient(0deg, #bf8e18 13%, #ffed31 57%, #bf8e18 99%) !important;
 width: 50% !important;
 height: 2px !important;
 margin-inline: auto
}

.mx-1px {
 margin-inline: 2px !important
}

.no-border-design {
 border: 1px solid #ededed;
 border-radius: 4px;
 overflow: hidden;
 padding: 2px;
 box-shadow: 0 0 1px #e6e6e6
}

.no-border-design th {
 background-color: #fff;
 color: #000;
 text-align: start !important;
 padding-left: 7px !important
}

.no-border-design table,
.no-border-design td,
.no-border-design th,
.no-border-design tr {
 border: none
}

.fs-10px {
 font-size: 13px
}

.bg-light_pink {
 background-color: #ffe0c0 !important
}

.bg-light_yellow {
 background-color: #ffffc0 !important
}

tfoot.new-footer-purchase tr th {
 background-color: var(--themeBlue);
 border-top: 2px solid #ededed
}

.no-border-new-1 tr {
 border: none
}

.border-none {
 border-width: 0 !important
}

.no-border-new-1.border-none td,
.no-border-new-1.border-none th,
.no-border-new-1.border-none tr {
 border-width: 0 !important
}

.no-border-new-1.border-none {
 border: 1px solid gray
}

.new-border-n0ne td {
 border: 0 solid gray !important
}

.border-1-round {
 border: 1px solid #f1f1f1 !important;
 border-radius: 6px !important
}

.no-calendar::-webkit-calendar-picker-indicator {
 display: none;
 visibility: hidden;
 opacity: 0
}

.text-aln-center-input input {
 padding-left: 6px !important
}

body.purchase-create .add-supplier .label-cls {
 text-align: right
}

body.purchase-create select.select_name1 option {
 background: #fff
}

body.purchase-create select.select_name1 {
 height: 25px;
 border-radius: 3px;
 width: 100%;
 border: 1px solid gray;
 background-color: #ededed
}

select:focus,
textarea:focus {
 outline: 0
}

.Breadcrumb-head {
 text-transform: capitalize
}

.box {
 border-radius: 3px;
 background: #fff;
 border-top: 3px solid #d2d6de;
 margin-bottom: 20px;
 width: 100%;
 box-shadow: 0 1px 4px rgba(0, 0, 0, .1)
}

table button {
 box-shadow: 1px 1px 4px rgba(179, 179, 179, .61)
}

/* .btn.btn-secondary.buttons-copy.buttons-html5, */
/* .dt-buttons.btn-group.flex-wrap .buttons-copy, */
.dt-buttons.btn-group.flex-wrap .buttons-excel,
.dt-buttons.btn-group.flex-wrap .buttons-csv,
.dt-buttons.btn-group.flex-wrap .buttons-pdf {
 color: var(--themeBlue) !important;
 background: none !important;
 /* background: color-mix(in srgb, var(--themeBlue) 70%, var(--white) 30%) !important; */
 width: auto !important;
 border-radius: 3px !important;
 height: 26px !important;
 margin-right: 8px !important;
 border: 1px solid var(--themeBlue) !important;
}

.buttons-html5 .fa-file-excel {
 color: var(--themeGreen)
}

.buttons-html5 .fa-file-pdf {
 color: var(--themeRed)
}

.dt-buttons.btn-group.flex-wrap .buttons-excel span,
.dt-buttons.btn-group.flex-wrap .buttons-csv span,
.dt-buttons.btn-group.flex-wrap .buttons-pdf span {
 padding-inline: 5px;
 font-size: 14px;
 line-height: 1;
 margin-block: auto;
 display: flex;
 align-items: center;
}

/* .btn.btn-secondary.buttons-copy.buttons-html5:hover, */
/* .dt-buttons.btn-group.flex-wrap .buttons-copy:hover, */
.dt-buttons.btn-group.flex-wrap .buttons-csv:hover,
.dt-buttons.btn-group.flex-wrap .buttons-excel:hover,
.dt-buttons.btn-group.flex-wrap .buttons-pdf:hover {
 background: var(--themeBlue) !important;
 color: #fff !important;
}

.dt-buttons.btn-group.flex-wrap .buttons-excel:hover i,
.dt-buttons.btn-group.flex-wrap .buttons-pdf:hover i {
 color: #fff !important;
}

.dt-buttons.btn-group.flex-wrap .buttons-excel i,
.dt-buttons.btn-group.flex-wrap .buttons-pdf i {
 padding: 4px;
}

table.dataTable>thead>tr>td,
table.dataTable>thead>tr>th {
 padding: 4px !important
}

.dt-search {
 display: flex;
 align-items: center
}

.dt-search input.form-control {
 color: var(--themeBlue) !important;
 width: 200px !important
}

.page-item.active .page-link {
 z-index: 3;
 color: #fff;
 background-color: var(--themeBlue);
 border-color: none !important;
 background: #09c;
 background: var(--themeBlue_new);
 background: -moz-linear-gradient(45deg, #0098ca 15%, #006a8d 65%);
 background: -webkit-linear-gradient(45deg, #0098ca 15%, #006a8d 65%);
 background: linear-gradient(45deg, #0098ca 15%, #006a8d 65%);
 background: linear-gradient(var(--gradient-dt));
 background: -moz-linear-gradient(var(--gradient-dt));
 background: -webkit-linear-gradient(var(--gradient-dt));
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0098ca", endColorstr="#019cd0", GradientType=1)
}

.dt-paging {
 z-index: 1
}

#ui-datepicker-div {
 z-index: 10 !important
}

.dt-paging-button.page-item:hover .page-link {
 background: var(--themeBlue) !important;
 border-color: transparent;
 color: var(--white)
}

.dt-paging-button.page-item:hover+* .page-link,
:has(+.dt-paging-button.page-item:hover) .page-link {
 background: color-mix(in srgb, var(--themeBlue) 50%, var(--white) 50%);
 border-color: transparent
}

.dt-paging-button.page-item:hover+*+* .page-link,
:has(+*+.dt-paging-button.page-item:hover) .page-link {
 background: color-mix(in srgb, var(--themeBlue) 20%, var(--white) 80%);
 border-color: transparent;
 color: var(--themeBlue)
}

.dt-paging *,
.dt-paging nav {
 transition-duration: .1s !important
}

textarea {
 border-radius: 4px;
}

input[type='checkbox'],
input[type='radio'] {
 accent-color: var(--themeBlue);
}