@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,700,700italic);
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
    font-family: "Roboto";
    src: url(../fonts/roboto/Roboto-Light.ttf)
}

@font-face {
    font-family: "Roboto bold";
    src: url(../fonts/roboto/Roboto-Bold.ttf)
}

@font-face {
    font-family: "fontawesome";
    src: url(../fonts/fontawesome-free-5.15.2-web/webfonts/fa-regular-400.ttf)
}

:root {
    --primary-color: #588033;
    --text-color: #363636
}

html,
body {
    font-family: "Roboto";
    font-weight: normal;
    font-size: 14px;
    height: 100%;
    background-color: #edeff3;
    color: #000
}

header {
    z-index: 100;
    position: relative
}

.sticky-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    text-align: center;
    z-index: 100
}

a {
    color: #5e9331
}

h2 {
    font-size: 1.6rem
}

h3 {
    font-size: 1.4rem
}

h5 {
    font-size: 22px
}

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}

#layoutAuthentication {
    display: flex;
    flex-direction: column;
    min-height: 100vh
}

#layoutAuthentication #layoutAuthentication_content {
    min-width: 0;
    flex-grow: 1
}

#layoutAuthentication #layoutAuthentication_footer {
    min-width: 0
}


#containerMain {
    display: flex
}



.container-inner {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px
}

#containerMain #containerMain_nav {
    flex-basis: 200px;
    flex-shrink: 0;
    transition: transform .15s ease-in-out;
    z-index: 1038;
    transform: translateX(-200px)
}

#containerMain #containerMain_content {
    position: relative;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    flex-grow: 1;
    min-height: calc(100vh - 56px);
    margin-left: -200px
}

#containerMain #containerMain_content.full-width {
    margin-left: 0
}

.min-height-100 {
    min-height: calc(100vh - 10em)
}

.box-shadow {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .16), 0 1px 2px 0 rgba(0, 0, 0, .12)
}

.d-grid {
    display: grid
}

.bg-light {
    background-color: #fff !important
}

.bg-success {
    background-color: #4d8943 !important
}

.bg-primary {
    background-color: #434f89 !important
}

.bg-blue {
    background: #377bb5;
    color: #fff
}

.bg-light-grey {
    background-color: #f7f7f7 !important
}

.bg-table-grey {
    background-color: #f4f5f8 !important
}

.bg-blue-lagoon {
    background: #046b5b
}

.bg-none {
    background: none !important
}

.sidebar-toggled #containerMain #containerMain_nav {
    transform: translateX(0)
}

.sidebar-toggled #containerMain #containerMain_content:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .5;
    transition: opacity .3s ease-in-out
}

.fixed-top,
.sidebar-fixed #containerMain #containerMain_nav,
.sidebar-fixed .sb-topnav {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030
}

.sidebar-fixed #containerMain #containerMain_nav {
    width: 200px;
    height: 100vh;
    z-index: 1038
}

.sidebar-fixed #containerMain #containerMain_nav .sidebar .sidebar-menu {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%
}

.sidebar-fixed #containerMain #containerMain_content {
    padding-left: 200px
}

.sidebar-fixed #containerMain #containerMain_content.full-width {
    padding-left: 0
}

.sidebar-fixed #containerMain #containerMain_content {
    padding-left: 200px
}

.nav .nav-link .sidebar-link-icon,
.sidebar-menu .nav-link .sidebar-link-icon {
    margin-right: 1rem
}

.sidebar-topnav {
    padding-left: 0;
    height: 56px;
    display: flex;
    justify-content: space-between
}

.full-width .navbar-expand .navbar-nav .nav-link {
    padding-right: .7rem;
    padding-left: .7rem;
    color: #222f48
}

.footer-nav {
    padding: 10px;
    color: #fff
}

.footer-nav.navbar-expand .navbar-nav .nav-item {
    position: relative
}

.footer-nav.navbar-expand .navbar-nav .nav-item::after {
    content: "|";
    position: absolute;
    color: #fff;
    display: block;
    top: 7px;
    right: 0;
    width: 2px;
    height: 10px
}

.footer-nav.navbar-expand .navbar-nav .nav-link {
    color: #fff
}

.footer-nav.navbar-expand .navbar-nav .nav-link {
    color: #fff
}

.footer-nav.navbar-expand .navbar-nav .nav-link {
    padding-right: .7rem;
    padding-left: .7rem
}

.footer-nav.navbar-expand .navbar-nav .nav-item:first-child .nav-link {
    padding-right: .7rem;
    padding-left: 0
}

.footer-nav.navbar-expand .navbar-nav .nav-item:last-child .nav-link {
    padding-right: 0;
    padding-left: 1rem
}

.footer-nav.navbar-expand .navbar-nav .nav-item:last-child::after {
    content: ""
}

.navbar-brand {
    display: flex;
    align-items: center;
    position: relative;
    margin-right: 0;
    padding: .75rem 1rem
}

.sidebar-topnav .navbar-brand {
    width: 200px;
    padding-left: 1rem;
    padding-right: 1rem;
    margin: 0
}

.sidebar-topnav.mobile-topnav {
    display: none
}

.sidebar-topnav.navbar-dark .sidebarToggle {
    color: rgba(255, 255, 255, .5)
}

.sidebar-topnav.navbar-light .sidebarToggle {
    color: #212529
}

.sidebar-toggled .hideMain-logo {
    display: none
}

.toogledLogo {
    display: none
}

.sidebar-toggled .toogledLogo {
    display: block
}

.sidebar-topnav .breadcrumb {
    background: none;
    margin-bottom: 0;
    font-size: 22px
}

.sidebar-topnav .breadcrumb a {
    color: inherit
}

.sidebar-topnav .breadcrumb a:hover {
    text-decoration: none
}

.sidebar-topnav .breadcrumb-item.active {
    color: inherit
}

.sidebar-topnav .mobile-logo {
    width: auto
}

.mobile-logo img {
    max-height: 40px
}

.breadcrumb-item+.breadcrumb-item::before {
    display: inline-block;
    padding-right: .5rem;
    padding-left: .5rem;
    color: #6c757d;
    font-family: "fontawesome";
    content: ""
}

.sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex-wrap: nowrap
}

.sidebar .sidebar-menu {
    flex-grow: 1
}

.sidebar .sidebar-menu .navbar-brand img {
    width: 177px;
    width: -webkit-fill-available
}

.sidebar .sidebar-menu .navbar-brand img.toogledLogo {
    width: 22px
}

.sidebar .sidebar-menu hr {
    margin-top: .5rem;
    margin-bottom: .5rem;
    border-color: #fff;
    opacity: .3
}

.sidebar .sidebar-menu .nav {
    flex-direction: column;
    flex-wrap: nowrap;
    cursor: pointer
}

.sidebar .sidebar-menu .nav .sidebar-menu-heading {
    padding: 1.75rem 1rem .75rem;
    font-size: .75rem;
    font-weight: bold;
    text-transform: uppercase
}

.sidebar .sidebar-menu .nav .nav-link {
    display: block;
    align-items: center;
    padding-top: .75rem;
    padding-bottom: .75rem;
    position: inherit;
    margin-right: 0
}

.sidebar .sidebar-menu .nav .nav-link .sidebar-link-icon {
    font-size: .9rem;
    display: inline-block
}

.sidebar-fixed #containerMain #containerMain_nav .nav-link .show-sidebar-icon,
.sidebar-fixed #containerMain #containerMain_nav .nav-link .hide-sidebar-icon {
    position: relative;
    top: 5px
}

.sidebar .sidebar-menu .nav .nav-link .sidebar-collapse-arrow {
    display: inline-block;
    margin-left: auto;
    transition: transform .15s ease
}

.sidebar .sidebar-menu .nav .nav-link.collapsed .sidebar-collapse-arrow {
    transform: rotate(-90deg)
}

.sidebar .sidebar-menu .nav .sidebar-menu-nested {
    margin-left: 1.5rem;
    flex-direction: column
}

.sidebar .sidebar-footer {
    padding: .75rem;
    flex-shrink: 0
}

.sidebar-dark {
    background-color: #222f48;
    color: rgba(255, 255, 255, .5)
}

.sidebar-dark .sidebar-menu .sidebar-menu-heading {
    color: rgba(255, 255, 255, .25)
}

.sidebar-dark .sidebar-menu .nav-link {
    color: #fff
}

.sidebar-dark .sidebar-menu .nav-link span {
    position: inherit;
    top: 2px
}

.sidebar-dark .sidebar-menu .nav-link .sidebar-link-icon {
    color: rgba(255, 255, 255, .25)
}

.sidebar-dark .sidebar-menu .nav-link .sidebar-collapse-arrow {
    color: rgba(255, 255, 255, .25)
}

.sidebar-dark .sidebar-menu .nav-link:hover {
    background: #343f54;
    opacity: .7;
    box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, .16), 0 0 3px 1px rgba(0, 0, 0, .12);
    transition: all .5s ease-in-out
}

.sidebar-dark .sidebar-menu .dropright ul li a:hover {
    transition: all .1s ease-in-out
}

.sidebar-dark .sidebar-menu .nav-link.active {
    background-color: rgba(77, 137, 67, 1) !important;
    box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, .16), 0 0 3px 1px rgba(0, 0, 0, .12)
}

.sidebar-dark .sidebar-menu .nav-link.active .sidebar-link-icon {
    color: #fff
}

.sidebar-dark .sidebar-footer {
    background-color: #343a40
}

.w-20 {
    width: 20px !important
}

.widthImg-25 {
    width: 25px !important
}

.h-20 {
    height: 20px !important
}

input.form-control {
    margin-bottom: .8rem;
    padding-bottom: .7rem;
    padding-top: .7rem;
    color: #495057;
    font-family: Inter, sans-serif;
}

.form-group,
.form-control {
    margin-bottom: .8rem
}

.form-group input,
.form-group input,
.form-control select,
select.form-control,
select.form-group,
.form-group select {
    margin-bottom: .8rem;
    padding-bottom: .7rem;
    padding-top: .7rem;
    color: #a6a6a6
}

.btn-outline-secondary:hover,
.btn-outline-secondary:not(:disabled):not(.disabled):active {
    border-color: #ced4db;
    color: #e0e0e0;
    background: #fff
}

select.form-control:not([size]):not([multiple]) {
    height: calc(2.78rem + 2px)
}

select.form-control {
    font-size: 14px
}

.border-bottomm,
.border-top,
.border-left,
.border-right {
    border-color: #eee
}

.btn {
    font-size: 13px;
    border-radius: 0;
    text-transform: uppercase;
    min-width: 50px
}

.btn-action {
    padding: 10px 18px;
    box-shadow: 0 .225rem .8rem rgba(0, 0, 0, .12) !important
}

.btn-light {
    color: #5e9331;
    background-color: #fff;
    border-color: #fff
}

.btn-success-border {
    background-color: #fff;
    border-color: #5e9331
}

.btn-light-outline {
    color: #5e9331;
    background-color: #fff;
    border-color: #5e9331
}

.btn-light-outline.active {
    color: #fff;
    background-color: #5e9331;
    border-color: #5e9331
}

.btn-success {
    color: #fff;
    background-color: #5e9331;
    border-color: #5e9331
}

.btn-primary {
    color: #fff;
    background-color: #556b98;
    border-color: #556b98
}

.btn-warning {
    color: #fff;
    background-color: #ba0d0d;
    border-color: #ba0d0d
}

.btn-select {
    color: #fff;
    background-color: #a6a6a6;
    border-color: #a6a6a6;
    text-transform: capitalize
}

.btn-blue {
    background: #377bb5;
    color: #fff
}

.btn-white {
    background: #fff;
    border: 1px solid #ced4da;
    color: #495047;
    text-transform: capitalize
}

.btn-success .svgIcon {
    fill: #fff
}

.bg-header {
    background: #eceef3
}

.bg-beetroot {
    background: #5c254e
}

.bg-mariner {
    background: #3d5b94
}

.bg-sky {
    background: #099feb
}

.bg-bahama-blue {
    background: #235a7f
}

.bg-bright-red {
    background: #9b1920
}

.badge-primary {
    color: #fff;
    background-color: #556b98
}

.badge-success {
    color: #fff;
    background-color: #5e9331
}

.badge-warning {
    color: #fff;
    background-color: #ba0d0d
}

option:disabled {
    color: #6c7581
}

.text-black {
    color: #000 !important
}

.text-light {
    color: #fff !important
}

.light-text {
    color: #9096a3
}

.text-success {
    color: #5e9331 !important
}

.text-primary {
    color: #556b98 !important
}

.text-warning {
    color: #ba0d0d !important
}

.text-cloud {
    color: #222f48
}

.text-grey {
    color: #a6a6a6
}

.text-dark-grey {
    color: #999
}

.text-12 {
    font-size: 12px
}

.text-13 {
    font-size: 13px
}

.text-14 {
    font-size: 14px
}

.text-15 {
    font-size: 15px
}

.text-16 {
    font-size: 16px
}

.text-20 {
    font-size: 20px
}

td svg {
    fill: #a6a6a6
}

.form-check {
    margin-bottom: 1rem !important
}

.w-auto {
    width: auto !important
}

.min-w-auto {
    min-width: auto !important
}

.progress {
    height: .7rem;
    width: 70%
}

.span-progress {
    float: left;
    width: 40px
}

.sortByLetter-container {
    letter-spacing: 5px;
    width: fit-content;
    background-color: #f7f7f7;
    font-weight: 700;
    text-transform: uppercase;
    padding: .5rem
}

.sortByLetter-container a {
    color: #000
}

.sortByLetter-container a.active {
    position: relative;
    z-index: 1000;
    background: #5e9331;
    color: #fff;
    padding: 1px 0 0 4px
}

.full-height {
    min-height: calc(100vh - 109px)
}

.dropZone {
    width: 100%;
    min-height: 120px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-style: dashed;
    display: flex;
    justify-content: center;
    align-items: center
}

.dropdown-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    height: 42.5px;
    width: 100%
}


.checkbox-circle {
	display: inline-block;
	position: relative;
	cursor: pointer;
	width: 25px;
	height: 25px;
	margin: 0;
	font-size: 22px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	min-width: 25px;
}

.checkbox-circle input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}

.checkmark {
    position: absolute;
    top: 1px;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #a6a6a6;
    border-radius: 50%
}

.checkbox-circle:hover input~.checkmark {
    background-color: #a6a6a6
}

.checkbox-circle input:checked~.checkmark {
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #5e9331
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none
}

.checkbox-circle input:checked~.checkmark:after {
    display: block
}

.checkbox-circle .checkmark:after {
    left: 9px;
    top: 5px;
    width: 7px;
    height: 12px;
    border: solid #5e9331;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

thead {
    background: #f4f5f8
}

.bootstrap-table .table thead th .th-inner {
    font-size: 14px
}

.table th {
    text-transform: uppercase
}

.table th,
.table td {
    padding: .95rem;
    font-size: 14px
}

.table.borderlessTable td,
.table.borderlessTable th {
    border-right: 0;
    border-left: 0
}

.table.th-head-uppercase th {
    text-transform: uppercase
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #fff
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: #f4f5f8
}

.table-striped th,
.table-striped td {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem
}

.table-striped.content-tb-spacing th,
.table-striped.content-tb-spacing td {
    padding-top: .7rem !important;
    padding-bottom: .7rem !important
}

::-webkit-scrollbar {
    width: 8px;
    border-radius: 2px 5px 5px 2px
}

::-webkit-scrollbar-button {
    background: #212529;
    display: none
}

::-webkit-scrollbar-thumb {
    background: #70a642
}

::-webkit-scrollbar-thumb:hover {
    background: #aece59
}

::-webkit-scrollbar-track {
    background: #fff
}

.modal-content {
    background-color: #edeff3;
    border: none
}

.modal-header {
    background: #343f54;
    text-align: center;
    color: #fff;
    align-items: center
}

.modal-header .close {
    opacity: 1
}

.modal-header h2 {
    text-align: left;
    width: 100%
}

.modal-header button span {
    color: #fff
}

.modal-content,
.modal-header {
    border-radius: 0
}

@media only screen and (min-width:750px) and (max-width:768px) {
    .modal-dialog {
        max-width: 700px;
        margin: 1.75rem auto
    }
}

.icon-calendar {
    left: calc(100% - 30px);
    position: absolute;
    top: 10px;
    font-size: 20px;
    color: #222f48
}

#fa-1 {
    left: calc(100% - 30px)
}

#fa-2 {
    left: calc(100% - 40px)
}

.form-control-placeholder {
    position: absolute;
    top: -10px !important;
    padding: 12px 2px 0 2px;
    opacity: .5
}

#end-p {
    left: calc(50% + 4px)
}

.form-control:focus+.form-control-placeholder,
.form-control:valid+.form-control-placeholder {
    font-size: 95%;
    top: 10px;
    transform: translate3d(0, -100%, 0);
    opacity: 1
}

::placeholder {
    color: #bdbdbd;
    opacity: 1
}

:-ms-input-placeholder {
    color: #bdbdbd
}

::-ms-input-placeholder {
    color: #bdbdbd
}

button:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    outline-width: 0
}

.datepicker {
    background-color: #fff;
    border-radius: 0 !important;
    align-content: center !important;
    padding: 0 !important
}

.datepicker-dropdown.datepicker-orient-left:before {
    left: calc(50% - 6px) !important
}

.datepicker-dropdown.datepicker-orient-left:after {
    left: calc(50% - 5px) !important;
    border-bottom-color: #222f48
}

.datepicker-dropdown.datepicker-orient-right:after {
    border-bottom-color: #222f48
}

.datepicker table tr td.today,
.datepicker span.focused {
    border-radius: 50% !important;
    background-image: linear-gradient(#fff3e0, #ffe0b2)
}

.datepicker thead tr:nth-child(2) {
    background-color: #222f48 !important
}

.datepicker thead tr:nth-child(3) th {
    font-weight: bold !important;
    padding: 20px 10px !important;
    color: #bdbdbd !important
}

.datepicker tbody tr td {
    padding: 10px !important
}

.datepicker tfoot tr:nth-child(2) th {
    padding: 10px !important;
    border-top: 1px solid #cfd8dc !important
}

.datepicker .cw {
    font-size: 14px !important;
    background-color: #e8eaf6 !important;
    border-radius: 0 !important;
    padding: 0 20px !important;
    margin-right: 10px solid #fff !important
}

.datepicker .old,
.datepicker .day,
.datepicker .new {
    width: 40px !important;
    height: 40px !important;
    border-radius: 0 !important
}

.datepicker .day.old,
.datepicker .day.new {
    color: #e0e0e0 !important
}

.datepicker .day.old:hover,
.datepicker .day.new:hover {
    border-radius: 50% !important
}

.datepicker .old-day:hover,
.datepicker .day:hover,
.datepicker .new-day:hover,
.datepicker .month:hover,
.datepicker .year:hover,
.datepicker .decade:hover,
.datepicker .century:hover {
    border-radius: 50% !important;
    background-color: #eee
}

.datepicker .active {
    border-radius: 50% !important;
    background-image: linear-gradient(#222f48, #222f48) !important;
    color: #fff !important
}

.datepicker .range-start,
.datepicker .range-end {
    border-radius: 50% !important;
    background-image: linear-gradient(#222f48, #222f48) !important
}

.datepicke .range {
    background-color: #e3f2fd !important
}

.datepicker .prev,
.datepicker .next,
.datepicker-switch {
    border-radius: 0 !important;
    padding: 10px 10px 10px 10px !important;
    font-size: 18px;
    opacity: .7;
    color: #fff
}

.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker-switch:hover {
    background-color: inherit !important;
    opacity: 1
}

.datepicker .input-daterange input:first-child {
    -webkit-border-radius: inherit;
    -moz-border-radius: 3px 0 0 3px;
    border-radius: .25rem
}

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 10px
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0
}

.slider-switch {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #c5cbda;
    -webkit-transition: .4s;
    transition: .4s
}

.slider-switch:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 4px;
    top: -2px;
    border: 1px solid #c5cbda;
    bottom: 0;
    background-color: #fff;
    -webkit-transition: .4s;
    transition: .4s
}

input:checked+.slider-switch {
    background-color: #5e9331
}

input:focus+.slider-switch {
    box-shadow: 0 0 1px #5e9331
}

input:checked+.slider-switch:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px)
}

.slider-switch.round {
    border-radius: 34px
}

.slider-switch.round:before {
    border-radius: 50%
}

input:checked+.slider-switch:before {
    border: 1px solid #5e9331
}

@media screen and (max-width:726px) {
    .datepicker-dropdown.datepicker-orient-right:before {
        right: calc(50% - 6px)
    }

    .datepicker-dropdown.datepicker-orient-right:after {
        right: calc(50% - 5px)
    }
}

.datepicker .form-inline {
    align-items: baseline
}

.datepicker .color-border {
    border-color: #ced4da;
    color: #e0e0e0;
    background: #fff
}

.datepicker .list-group-item {
    border: 0;
    background: none
}

.datepicker .font-color {
    color: #a6a6a6
}

.input-daterange input {
    color: #495057;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px
}

.c-pointer {
    cursor: pointer
}

.w-fit-content {
    width: fit-content
}

.w-max-content {
    width: max-content
}

.maxW-fit-content {
    max-width: fit-content
}

.custom-select-arrow {
    position: relative
}

.custom-select-arrow select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    position: relative
}

.custom-select-arrow .fa-chevron-down {
    position: absolute;
    pointer-events: none;
    top: 14px;
    right: 19px;
    color: #a6a6a6;
    font-size: 15px
}

.searchclear {
    position: absolute;
    right: 16px;
    top: 0;
    bottom: 0;
    height: 23px;
    margin: auto;
    font-size: 16px;
    cursor: pointer;
    color: #ccc
}

.search-loupe {
    color: #d8d8d8;
    right: 16px;
    top: 11px;
    cursor: pointer;
    position: absolute
}

.searchinput {
    padding-right: 39px !important
}

.custom-select-dropdown {
    position: relative;
    font-family: Arial;
    width: fit-content
}

.custom-select-dropdown select {
    display: none
}

.select-selected {
    color: #fff;
    background-color: #a6a6a6;
    border-color: #a6a6a6;
    text-transform: capitalize
}

.plainBg .select-selected {
    color: #495047;
    background-color: #fff;
    border-color: #ced4da;
    text-transform: capitalize
}

.select-selected:after {
    position: absolute;
    content: "";
    top: 13px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #fff transparent transparent transparent
}

.plainBg .select-selected:after {
    position: absolute;
    content: "";
    top: 13px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #495047 transparent transparent transparent
}

.select-selected.select-arrow-active:after {
    border-color: transparent transparent #fff transparent;
    top: 7px
}

.plainBg .select-selected.select-arrow-active:after {
    border-color: transparent transparent #495047 transparent;
    top: 7px
}

.select-items div,
.select-selected {
    padding: 4px 29px 4px 8px;
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    font-family: Inter, sans-serif;
}

.select-items {
    position: absolute;
    background-color: #fff;
    max-height: 300px;
    overflow-y: auto;
    left: 0;
    right: 0;
    z-index: 99;
    width: 100%;
    color: #212529;
    font-weight: 400;
    white-space: nowrap;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: .25rem;
    font-family: Inter, sans-serif;
}

.select-items-max-content .select-items {
    width: max-content !important
}

.select-hide {
    display: none
}

.select-items div:hover,
.same-as-selected {
    background-color: rgba(0, 0, 0, .1)
}

.sidebar-dark .sidebar-menu .nav-link .op-hover:hover {
    opacity: 1 !important
}

.op-hover {
    left: 160px !important;
    text-transform: capitalize
}

.ml-180 {
    width: 180px !important;
    top: -109px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

.link-h:hover {
    color: #5e9331 !important;
    text-decoration: none
}

.link-h {
    margin-top: 5px;
    color: #5e9331
}

.bg-border {
    background-color: #a6a6a6 !important;
    border: 1px solid #a6a6a6 !important
}

.w-180 {
    width: 180px !important
}

.drop-180 {
    padding-left: 20px;
    width: 180px !important;
    top: 124px !important;
    left: 138px
}

.mb-0 {
    margin-bottom: 0 !important
}

@media screen and (max-width:726px) {
    .ml-180 {
        top: -110px !important;
        left: 38px !important
    }

    .drop-180 {
        top: 125px !important;
        left: 58px !important
    }
}

@media only screen and (min-width:900px) and (max-width:1025px) {
    .op-hover {
        top: -45px !important
    }
}

@media screen and (min-device-width:768px) and (max-device-width:1025px) {
    .w-180 {
        top: -33px !important
    }

    .h-48 {
        height: 40px !important
    }

    .font-16 {
        font-size: 12px !important
    }
}

.form-label-dropdown .select-selected {
    padding: .7rem !important
}

.form-label-dropdown .select-selected:after {
    top: 18px !important
}

.form-label-dropdown .select-selected.select-arrow-active:after {
    top: 12px !important
}

.form-label-dropdown .select-items div {
    padding: .5rem 1rem !important
}

.text-wrap {
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap
}

.width-4 {
    width: 4%;
    min-width: 50px
}

.width-5 {
    width: 5%;
    min-width: 45px
}

.width-7 {
    width: 7%;
    min-width: 80px
}

.width-10 {
    width: 10%;
    min-width: 100px
}

.width-12 {
    width: 12%;
    min-width: 100px
}

.width-15 {
    width: 15%;
    min-width: 115px
}

.width-20 {
    width: 20% !important;
    min-width: 225px
}

.width-25 {
    width: 25% !important;
    min-width: 270px
}

.width-30 {
    width: 30% !important;
    min-width: 225px
}

.width-41 {
    width: 41%;
    min-width: 250px
}

.width-50 {
    width: 50%;
    min-width: 300px
}

.width-70 {
    width: 70%;
    min-width: 80px
}

.width-86 {
    width: 86%;
    min-width: 500px
}

.width-95 {
    width: 95%;
    min-width: 500px
}

.arrowless.dropdown-toggle::after {
    border-right: none !important;
    border-left: none !important
}

.h-15 {
    height: 15px !important
}

.justify-content-spaceAround {
    justify-content: space-around
}

.width-42 {
    width: 42%;
    min-width: 300px
}

.color-g {
    color: #5e9331
}

.font-18 {
    font-size: 18px
}

.pagination-custom {
    align-items: center;
    display: flex;
    justify-content: space-between;
    width: 162px
}

@media only screen and (max-width:768px) {
    .pagination-custom {
        width: 125px
    }
}

@media only screen and (min-width:1024px) and (max-width:1366px) {
    .width-69 {
        min-width: 200px;
        width: 69% !important
    }
}

.bg-primary-light {
    background-color: #f3f6f9 !important
}

.error-message {
    font-size: 11px;
    color: #ff5353
}

.form-label-dropdown-round .select-selected:after {
    position: absolute;
    content: "";
    top: 18px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #495047 transparent transparent transparent
}

.form-label-dropdown-round .select-selected.select-arrow-active:after {
    border-color: transparent transparent #495047 transparent;
    top: 12px
}

.form-label-dropdown-round .select-selected {
	color: #495047;
	background-color: #fff;
	border-color: #ced4da;
	text-transform: capitalize;
	border-radius: 7px !important;
	padding: .7rem 1rem !important;
	font-family: Inter, sans-serif;
}
.succes_msg {
    font-size: 14px;
    color: #090
}

.failur_msg {
    font-size: 14px;
    color: #f00
}

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

.PackageSaveMessage {
    color: #090
}

#back-top {
    position: fixed;
    top: 100%;
    margin-top: -36px;
    left: 50%;
    z-index: 9999;
    display: none
}

#back-top a {
    width: 114px;
    padding: .75rem;
    display: block;
    text-align: center;
    font: 11px/100% Arial, "Open Sans", sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
    background-color: #000;
    opacity: .7;
    border-radius: 7px
}

#back-top a:hover {
    opacity: 1
}

#back-top span {
    display: none
}

.text-red {
    color: #e11010
}

.text-green {
    color: #72b33a
}

.d-none {
    display: none !important
}

.top-scrollbars {
    transform: rotateX(180deg)
}

.top-scrollbars * {
    transform: rotateX(180deg)
}

.pb-100 {
    padding-bottom: 100px !important
}

.pb-80 {
    padding-bottom: 80px !important
}

.pb-60 {
    padding-bottom: 60px !important
}

.w-600 {
    width: 600px
}

.mw-600 {
    max-width: 600px
}

.variable-icon {
    font-size: 1.2rem;
    font-weight: bold
}

.autocomplete-suggestion {
    cursor: pointer
}

.nav-message {
    position: relative
}

#unreadcounter {
    position: absolute;
    right: 21px;
    top: 13px;
    background-color: #5e9331;
    color: #fff;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    line-height: 22px;
    text-align: center;
    display: none
}

.unreadcounter2 {
    position: absolute;
    right: 10px;
    bottom: 6px;
    background-color: #5e9331;
    color: #fff;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    line-height: 22px;
    text-align: center
}

.ui-widget-header {
    border: 1px solid #5e9331 !important;
    background: none !important;
    background-color: #5e9331 !important;
    color: #fff;
    font-weight: bold
}

.analytic-dark {
    background-color: #222f48;
    color: #fff
}

.analytic-light {
    background-color: #444e60;
    color: #fff
}

.highlightme {
    position: relative;
    z-index: 999999 !important
}

.drop-zone-overlay {
    display: none;
    background: #000;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .8;
    z-index: 9999
}

.vertical-align-middle {
    vertical-align: middle !important
}

.RowClicked {
    background-color: rgba(0, 0, 0, .075);
    font-weight: 800;
    font-family: "Roboto bold"
}

.RowClicked .bg-light {
    background-color: transparent !important
}

.search-clear {
    cursor: pointer
}

.sidebar-menu .dropdown-submenu>.dropdown-menu {
    top: 160px !important;
    left: 100%;
    margin-top: -6px;
    padding-left: 0
}

.dropdown-menu.op-hover {
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

.dropdown-menu.op-hover li.mt-2 span,
.dropdown-menu.op-hover li.dropdown-submenu.my-2 span {
    display: block;
    padding: 6px 0 6px 18px
}

.dropdown-menu.op-hover li.icondrop span {
    display: inline-block;
    padding: 6px 0 6px 3px
}

.dropdown-menu.op-hover li.icondrop img {
    display: inline-block;
    margin-left: 5px
}

.dropdown-menu.op-hover li.mt-2 {
    margin-top: 0 !important
}

.dropdown-menu.op-hover li.dropdown-submenu.my-2 {
    margin-bottom: 0 !important
}

.dropdown-menu li:hover {
    background-color: rgba(0, 0, 0, .1)
}

.dropdown-submenu .dropdown-menu li.my-2 {
    margin-bottom: 0 !important
}

.sidebar-menu .nav.hideIn-mobile a.sidebarToggle {
    margin-bottom: 10px
}

.navbar_myaccount img {
    width: 28px;
    cursor: pointer
}

.dropdown-menu.navbar_menu {
    left: -125px
}

.sidebar-fixed.sidebar-toggled #containerMain #containerMain_nav .sidebar .sidebar-menu {
    margin-left: 6px
}

.navbar_myaccount-mobile {
    margin: 0 5px 0 15px
}

.navbar_myaccount-mobile img {
    width: 28px;
    cursor: pointer
}

.sidebar-topnav-right {
    display: flex;
    align-items: center
}

.maxW-21 {
    max-width: 21px !important
}

.mr-075 {
    margin-right: .75rem !important
}

#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 2000;
    cursor: pointer
}

.modal {
    z-index: 9999 !important
}

.menutxtpkg {
    margin-left: 11px !important;
    max-height: 17px
}

.tooltip {
    z-index: 99999 !important
}

.tooltip.show {
    display: none
}

.sidebar-fixed .tooltip.fade.bs-tooltip-top.show {
    display: block
}

.sidebar-toggled .tooltip.fade.bs-tooltip-top.show {
    left: 0 !important;
    display: block
}

.sidebar-toggled .tooltip.fade.bs-tooltip-left.show {
    left: 35px !important;
    display: block
}

.sidebar-toggled .tooltip.fade.bs-tooltip-right.show {
    left: 0 !important;
    display: block
}

.sidebar-toggled .bs-tooltip-bottom .arrow,
.sidebar-toggled .bs-tooltip-auto[x-placement^="bottom"] .arrow {
    left: 5px !important
}

.sidebar-toggled .bs-tooltip-left .arrow,
.sidebar-toggled .bs-tooltip-auto[x-placement^="left"] .arrow {
    left: 0 !important;
    transform: rotate(180deg)
}

.sidebar-toggled .sidebar .sidebar-menu .nav .nav-link {
    text-align: center
}

.sidebar-toggled .nav .nav-link .sidebar-link-icon,
.sidebar-toggled .sidebar-menu .nav-link .sidebar-link-icon {
    margin-right: 0
}

.white-bg {
    background-color: #fff
}

.dark-blue-bg {
    background-color: #222f48
}

.text-davy-grey {
    color: #5e5e5e
}

.text-gunmetal {
    color: #282d37
}

.text-auroMetal {
    color: #656e7f !important
}

.text-24 {
    font-size: 24px
}

.text-18 {
    font-size: 18px
}

.text-60 {
    font-size: 60px
}

.maxW-276 {
    max-width: 276px
}

.px-80 {
    padding: 80px 0
}

.radius-7 {
    border-radius: 7px
}

.pt-80 {
    padding-top: 80px
}

.pb-80 {
    padding-bottom: 80px
}

.bgcolor-green {
    background-color: #5e9331;
    color: #fff
}

.bg-gunmetal {
    background-color: #222f48
}

.social-containar {
    display: flex;
    align-items: center
}

.social-containar a svg.svg-inline--fa {
    width: 34px !important;
    height: 34px;
    padding: 8px
}

.social-containar a:hover {
    text-decoration: none
}

.social-containar a:hover svg {
    background-color: #5e9331;
    width: 34px !important;
    height: 34px;
    border-radius: 50%;
    text-align: center;
    color: #fff
}

a:hover {
    text-decoration: none !important
}

.font-22 {
    font-size: 22px
}


@media screen and (max-width:1080px) {
    .sidebar-fixed #containerMain #containerMain_nav .sidebar .sidebar-menu {
        justify-content: start !important
    }

    .sidebar-toggled .sidebar .sidebar-menu .nav .nav-link {
        text-align: left
    }
    main.thankyou-page #section-container {
        min-height: auto !important;
    }
    main.thankyou-page.px-120 {
        padding-top: 7rem !important;
    }
    main.thankyou-page.px-120 .thank-you p {
        margin: 0;
    }

}

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

.width-75 {
    max-width: 75px
}

.gradient-white-bg {
    background-image: linear-gradient(#fff, #f3f6f9)
}

.text-overflow-nowrap {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden
}

.minH-40 {
    min-height: 40px
}

.h5 {
    font-weight: 500;
    font-size: 19px
}

.font-16 {
    font-size: 16px
}

.h-48 {
    height: 48px
}

.item-buy-now:hover {
    color: #282d37;
    border-radius: .25rem !important
}

.font-weight-500 {
    font-weight: 500
}

.maxH-48 {
    max-height: 48px
}

.thank-you {
    text-align: center
}

.thank-you h2 {
    font-size: 24px;
    line-height: 32px;
    font-weight: normal;
    padding-bottom: 0;
    color: #73aa43;
    text-align: center
}

.alice-blue-bg {
    background-color: #f3f6f9
}

.copy-right-shadow {
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25)
}

.social-containar a {
    width: 34px !important;
    height: 34px;
    border-radius: 50%;
    text-align: center;
    padding: 4px 8px
}

.social-containar a img {
    max-height: 17px
}

.social-containar a:hover img {
    max-height: 17px
}

.social-containar a#facebookIcon img {
    max-height: 21px
}

.social-containar a#facebookIcon:hover img {
    max-height: 21px
}

.social-containar a:hover {
    background-color: #5e9331;
    width: 34px !important;
    height: 34px;
    border-radius: 50%;
    text-align: center
}

.sidebar-topnav-right button a {
    display: flex !important;
    align-items: Center
}

.navbar_help .dropdown-menu.navbar_menu {
    left: -106px
}

.blink_me {
    animation: blinker 1s linear infinite
}

@keyframes blinker {
    50% {
        opacity: 0
    }
}

.openai.dropdown img {
    max-height: 24px;
    padding-top: 3px;
    cursor: pointer
}

.openai.dropdown span {
    cursor: pointer;
    padding-right: 3px
}

.email-packages.openai.dropdown .dropdown-menu {
    left: -30px !important
}

.openai-undo {
    cursor: pointer
}

.paging1 {
    font-family: "Open Sans";
    font-size: 16px;
    color: #393939
}

.paging1 a:link {
    text-decoration: none;
    color: #393939
}

.paging1 a:active {
    text-decoration: none;
    color: #393939
}

.paging1 a:visited {
    text-decoration: none;
    color: #393939
}

.paging1 a:hover {
    text-decoration: underline;
    color: #393939
}

.paging1 a.active1 {
    text-decoration: none;
    color: #393939;
    font-weight: bold
}

.usermanagement_links {
    font-family: Arial, "Open Sans", sans-serif;
    font-size: 17px;
    color: #242424;
    font-weight: bold;
    padding-left: 10px
}

.usermanagement_links a:link {
    text-decoration: none;
    color: #242424
}

.usermanagement_links a:active {
    text-decoration: none;
    color: #242424
}

.usermanagement_links a:visited {
    text-decoration: none;
    color: #242424
}

.usermanagement_links1 {
    font-family: Arial, "Open Sans", sans-serif;
    font-size: 17.92px;
    color: #242424
}

.usermanagement_links1 a:link {
    text-decoration: none;
    color: #242424
}

.usermanagement_links1 a:active {
    text-decoration: none;
    color: #242424
}

.usermanagement_links1 a:visited {
    text-decoration: none;
    color: #242424
}