@font-face {
    font-family: "poppin";
    src: url("../../gpp-assets/fonts/poppins/Poppins-Regular.otf");
}

@font-face {
    font-family: "avant";
    src: url("../../gpp-assets/fonts/avant/avant_garde_book.ttf");
}

html {
  font-family: 'avant'!important;
}


:root {
  --primary: #1D968A;
  --darkprimary: #006064;
  --danger: #FF033E;
  --blur: #b0bec5;
  --menuactive: #1D968A;
  --menuactivetext: #fff;
  --shadow: red;
  --success: #17B169;
  --warning: #FFD700;
  --dark: #13274F;
}

. {
  background-color: blue!important;
}

.animate__animated.animate__slideInLeft {
  --animate-duration: 0.3s!important;
}

.animate__animated.animate__slideInDown {
  --animate-duration: 0.5s!important;
}

.auth-bg {
  border-top-left-radius: 40%!important;
/*  border-bottom-left-radius: 30%!important;*/
  background-color: #1D968A!important;
}

.author {
  background-color: #1D968A;
  height: 38px;
  width: 38px;
  border-radius: 50%;
  text-align: center;
  font-size: 11px!important;
  padding: 7px!important;
  color: #fff;
}

.dropdown-inner {
  z-index: 99999999999999999!important;
}

.author:hover {
  box-shadow: 0 1px 1px 1px #a6b794;
  cursor: pointer;
}

body {
  background: #e8f5e9!important;
  font-family: 'avant'!important;
}

body.login {
  background: #fff!important;
}

a .ps-menubar-icon {
  font-size: 20px!important;
}

.badge-muted-gopayy {
  padding: 5px 10px!important;
  border: 0.05em solid #b0bec5;
  border-radius: 15px!important;
  background-color: #eceff1;
  color: #546e7a;
  margin-right: 2px;
}

.badge-muted-gopayy-active {
  padding: 5px 10px!important;
  border: 0.05em solid var(--primary)!important;
  border-radius: 15px!important;
  background-color: var(--primary);
  color: #fff;
  margin-right: 2px;
}

a > .badge-muted-gopayy-active:hover {
  color: #fff!important;
}

.badge-success-gopayy {
  padding: 5px 10px!important;
  border-radius: 15px!important;
  background-color: #00AB66;
  color: #fff;
}

.badge-warning-gopayy {
  padding: 5px 10px!important;
  border-radius: 15px!important;
  background-color: var(--warning);
  color: #fff;
}

.badge-danger-gopayy {
  padding: 5px 10px!important;
  border-radius: 15px!important;
  background-color: var(--danger);
  color: #fff;
}

.bg-rose {
  background-color: #EE204D!important;
}

.btn {
  border-radius: 1.5rem!important;
}

.btn-primary {
  border-color: var(--primary) !important;
  background-color: var(--primary) !important;
  color: #fff !important; 
  opacity: 0.9!important;
}

.btn-primary:focus, .btn-primary:active, .btn-primary.active {
  color: #fff;
  background-color: var(--primary) !important; 
  opacity: 1.0!important;
}

.btn-primary:hover:not(.disabled):not(:disabled) {
  box-shadow: 0 8px 25px -8px var(--primary); 
  opacity: 1.0!important;
}

.btn-primary:not(:disabled):not(.disabled):active:focus {
  box-shadow: none; 
}

.button-39 {
  background-color: #fbc02d;
  border: 1px solid rgb(209,213,219);
  border-radius: 1.5rem;
  box-sizing: border-box;
  color: #111827;
/*  font-family: "Inter var",ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";*/
  font-family: 'avant'!important;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25rem;
  padding: .75rem 1rem;
  text-align: center;
  text-decoration: none #D1D5DB solid;
  text-decoration-thickness: auto;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-39:hover {
  background-color: #f9a825;
  text-decoration: none!important;
  color: #111827;
}

.button-39:focus {
  outline: 2px solid transparent;
  text-decoration: none!important;
  color: #111827;
  outline-offset: 2px;
}

.button-39:focus-visible {
  box-shadow: none;
  text-decoration: none!important;
  color: #111827;
}

.button-39-active {
  background: var(--primary)!important;
  color: #fff;
}
.button-39-active:hover {
  background: #EEE!important;
  color: #fff;
}

.dropdown-item:hover, .dropdown-item:focus {
  color: var(--menuactivetext)!important;
  background-color: var(--menuactive)!important;
}

.display-7 {
    font-size: 2.0rem;
  }

.display-8 {
    font-size: 1.5rem;
  }

.env-btn {
  background-color: #FF004F!important;
  color: #fff!important;
}

.env-btn:hover {
  background-color: #EE204D!important;
}

.filter-row {
  border-radius: 10px!important;
}

.main-menu.menu-light .navigation > li.active > a {
  background: var(--menuactive)!important;
  box-shadow: var(--shadow)!important;
  color: var(--menuactivetext)!important;
  border-radius: 25px!important;
}

.main-menu.menu-light .navigation > li ul .active {
  background: var(--menuactive)!important;
  box-shadow: var(--shadow)!important;
  border-radius: 25px;
  z-index: 1;
}

.menu-title {
  font-family: 'avant'!important;
}

.main-menu .navbar-header .navbar-brand .brand-logo img {
  max-width: 130px!important;
}

.page-item.active .page-link {
  background-color: var(--primary)!important;
}

.page-item .page-link:hover {
  color: var(--primary)!important;
}

.pill-danger {
    padding: 10px 10px 5px 10px;
    border-radius: 10px;
    background-color: var(--danger);
    color: white!important;
}

.pill-danger h5 {
  color: #fff;
}

.pill-success {
    padding: 10px 10px 5px 10px;
    border-radius: 10px;
    background-color: var(--success);
    color: white!important;
}

.pill-success h5 {
  color: #fff;
}

.pill-dark {
    padding: 10px 10px 5px 10px;
    border-radius: 10px;
    background-color: var(--dark);
    color: white!important;
}

.pill-dark h5 {
  color: #fff;
}

.pill-warning {
    padding: 10px 10px 5px 10px;
    border-radius: 10px;
    background-color: var(--warning);
    color: white!important;
}

.pill-warning h5 {
  color: black;
}

.ps-content {
  overflow: scroll;
}

.ps-menubar-icon-container {
  border-radius: 5px;
  padding: 5px;
  width: 45px;
  height: 45px;
  background: #eceff1!important;
}

.ps-content {
  border-radius: 5px;
  border: 0.05em solid #cfd8dc;
}

.ps-menubar-icon {
  height: 35px!important;
  width: 35px!important;
}

.ps-menubar-pill {
  width: 100%;
  padding: 10px 15px;
}

.ps-menubar-pill-content {
  padding-top: 8px;
  padding-bottom: 10px;
  padding-left: 8px;
  border-radius: 8px;
}

.ps-menubar-pill-content:hover {
  background: #eceff1!important;
}

.ps-menubar-pill a {
  color: #607d8b!important;
}

.ps-menubar-pill a.active .ps-menubar-pill-content {
  background:var(--primary)!important;
  color: #fff!important;
}

.ps-menubar-pill a.active .ps-menubar-pill-content h5 {
  color: #fff!important;
}

.ps-menubar-pill a.active .ps-menubar-pill-content .ps-menubar-icon-container {
  color: #fff!important;
  background: var(--primary)!important;
}

.ps-menubar-text {
  font-size: 10px!important;
}

/*radio button*/
.radio-container {
  padding: 15px;
  background-color: #f5f5f5;
  margin-bottom: 5px;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--primary) !important;
  color: #fff !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--primary) !important;
  outline: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--darkprimary) !important;
  border-color: var(--darkprimary) !important;
  color: #fff;
  padding: 5px 5px;
}

.select2-container--default .select2-results__option--highlighted {
  background-color: #eceff1 !important;
  color: #37474f !important;
}


/*radio button*/

.success_banner {
  background-color: #69f0ae;
  border-radius: 10px;
  border: 0.1em solid #17B169;
  padding: 10px 10px 1px 10px;
  color: #018749;
  margin-bottom: 20px;
}

.failed_banner {
  background-color: #ff8a80;
  border-radius: 10px;
  border: 0.1em solid #ff5252;
  padding: 10px 10px 1px 10px;
  color: #c62828;
  margin-bottom: 20px;
}

.table-responsive {
  min-height: 200px!important;
}

.tail-select {
  width: 100%!important;
}

.tail-select .select-label {
  padding: 7px 30px 7px 10px!important;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px!important;
}

.tail-select .select-dropdown ul li.optgroup-title {
  color: #800080!important;
}

.text-primary {
    font-family: 'avant'!important;
    color: var(--primary)!important;
}

@property --p{
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.pie {
  --p:10;
  --b:5px;
  --c:darkred;
  --w:40px;
  
  width:var(--w);
  aspect-ratio:1;
  position:relative;
  display:inline-grid;
  margin-top:15px;
  place-content:center;
  font-size:25px;
  font-weight:bold;
  font-family:sans-serif;
}
.pie:before,
.pie:after {
  content:"";
  position:absolute;
  border-radius:50%;
}
.pie:before {
  inset:0;
  background:
    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}
.pie:after {
  inset:calc(50% - var(--b)/2);
  background:var(--c);
  transform:rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}
.animate {
  animation:p 1s .5s both;
}
.no-round:before {
  background-size:0 0,auto;
}
.no-round:after {
  content:none;
}
@keyframes p {
  from{--p:0}
}