:root {
  --theme-em-gradient: linear-gradient(90deg, #7209d4, #2832d4 33%, #00a5b2);
}

.test1 {
  /* clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); */
  background-image: url('/img/84-848840_how-to-set-use-flower-corner-svg-vector.png');
  /* clip-path: polygon(100% 31%, 100% 100%, 0 100%); */
}
.text-ygreen  {
  color: #d3ff07 !important;
}

.bg-texture-a {
  --bg-image: url('/img/textures/7bcc2fce4836eb9b842149271804f1db.jpg');
  isolation: isolate;
  position: relative;
}

.bg-texture-a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: white;
  opacity: .4;
  background-image: var(--bg-image);
  background-repeat: no-repeat; 
  background-position: center;
  background-size: cover;
  border-radius: 8px;
  /* border: 1px solid rgb(182, 170, 209); */
}

.bg-texture-b {
  /* --bg-image: url('/img/textures/7bcc2fce4836eb9b842149271804f1db.jpg'); */
  --bg-image: url('/img/svg/blob.svg');
  isolation: isolate;
  position: relative;
}

.bg-texture-b::after {
  content: '';
  position: absolute;
  inset: 0;
  /* top: 0; */
  z-index: -1;
  background: rgb(255, 255, 255);
  opacity: .4;
  background-image: var(--bg-image);
  background-repeat: no-repeat; 
  background-position: right;
  background-size: fill;
  border-radius: 8px;
  /* border: 1px solid rgb(182, 170, 209); */
}

.gred-6 {
  background: rgb(71,125,232);
  background: linear-gradient(312deg, rgba(71,125,232,1) 0%, rgba(19,45,146,1) 100%);
}


.br-top{
  border-radius: .25rem .25rem 0 0;
}

.br-bottom{
  border-radius: 0 0 .25rem .25rem;
}

/* height */
.h-90 { height: 90% !important; }
.h-80 { height: 80% !important; }
.h-70 { height: 70% !important; }
.h-60 { height: 60% !important; }
.h-50 { height: 50% !important; }

/* width */
.w-90 { width: 90% !important; }
.w-80 { width: 80% !important; }
.w-70 { width: 70% !important; }
.w-60 { width: 60% !important; }
.w-50 { width: 50% !important; }

/* vh */
.vh-50 { height: 50vh !important; }
.vh-60 { height: 60vh !important; }
.vh-70 { height: 70vh !important; }
.vh-75 { height: 75vh !important; }
.vh-80 { height: 80vh !important; }
.vh-90 { height: 90vh !important; }

/* right nav */
.right-nav {
  min-width: 240px;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2000;
  transition: all 0.3s linear 0s;
  transform: translateX(100%);
  background-color: #fff;
  box-sizing: border-box;
  overflow: auto;
}

.side-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.18);
  z-index: 1500;
  transition: all 0.3s linear 0s;
}

.shadow-custom {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .25), 0 3px 10px 5px rgba(0, 0, 0, 0.05) !important;
}

.fs-custom {
  font-family: "Tahoma", "Geneva", sans-serif;
  font-size: 50px;
  color: #3b3b3b;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-align: left;
  letter-spacing: 3.9px;
  line-height: 37px;
}

.bg-patern {
  /* background-image: url('/img/symphony.webp'); */
  min-width: 360px;
}

.app-bg {
  background-image: url('https://images.unsplash.com/photo-1530569673472-307dc017a82d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1976&q=80');
  background-position: center;
  background-size: cover;
  min-width: 360px;
}

.css-serial {
  /* Set the serial number counter to 0 */
  counter-reset: serial-number;
}

.css-serial td:first-child:before {
  counter-increment: serial-number;
  /* Increment the serial number counter */
  content: counter(serial-number);
  /* Display the counter */
}

.list-group-item-action:hover {
  /* background-color: #0464ff; */
  color: rgb(140, 0, 255);
  /* font-weight: bold; */
  /* border-left: 2px solid blue; */
  transition: none;

}

.list-group-item-action {
  transition: none;
}

.egg {
  display: block;
  width: 126px;
  /* width has to be 70% of height */
  /* could use width:70%; in a square container */
  height: 180px;
  background-color: blue;

  /* beware that Safari needs actual
px for border radius (bug) */
  -webkit-border-radius: 63px 63px 63px 63px/ 108px 108px 72px 72px;
  /* fails in Safari, but overwrites in Chrome */
  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
}

.gred-1 {
  background: rgb(42, 92, 191);
  background: linear-gradient(90deg, rgba(42, 92, 191, 1) 0%, rgba(0, 25, 83, 1) 100%);
}

.gred-2 {
  background: rgb(185, 208, 255);
  background: linear-gradient(90deg, rgba(185, 208, 255, 1) 0%, rgba(1, 0, 103, 1) 100%);
}

.gred-3 {
  background: rgb(0, 151, 255);
  background: linear-gradient(90deg, rgba(0, 151, 255, 1) 0%, rgba(205, 234, 255, 1) 52%, rgba(0, 151, 255, 1) 100%);
}

.gred-4 {
  background: rgb(236, 247, 255);
  background: linear-gradient(90deg, rgba(236, 247, 255, 1) 0%, rgba(0, 151, 255, 1) 100%);
}

.gred-5 {
  background: rgb(245, 251, 255);
  background: linear-gradient(90deg, rgba(245, 251, 255, 1) 0%, rgba(0, 151, 255, 1) 100%);
}


.enable-all-section {
  min-height: 691px;
  background-image: linear-gradient(98.28deg, #EEEAE5 42.54%, rgba(238, 234, 229, 0) 92.37%), url(https://static.nortoncdn.com/safesearchwebapp/prod/2.11.1-43/images/onboarding-header-bg.jpg);
  background-position: center;
  background-size: cover;
  position: relative;
}

.tbl-custom {
  margin-bottom: 0;
}

.tbl-custom.table-sm>:not(caption)>*>* {
  padding: 0.1rem 0.5rem;
  font-size: .9rem;
}

.gradient-custom-1 {
  background: #1f75ff;
  background-repeat: no-repeat;
  background: linear-gradient(135deg, rgb(48, 86, 239) 0%, rgb(17, 55, 208) 100%);
}

.gradient-a {
  background: rgb(42, 92, 191);
  background: linear-gradient(270deg, rgba(42, 92, 191, 1) 0%, rgba(176, 205, 250, 1) 100%);
}

.gradient-b {
  background: rgb(42, 92, 191);
  background: radial-gradient(circle, rgba(42, 92, 191, 1) 100%, rgba(173, 213, 255, 1) 0%);
}

.grad-a {
  background: rgb(47, 136, 221);
  background: radial-gradient(circle, rgba(47, 136, 221, 1) 0%, rgba(35, 53, 129, 1) 100%);
}

.grad-b {
  background: rgb(47, 136, 221);
  background: linear-gradient(90deg, rgba(47, 136, 221, 1) 0%, rgba(35, 53, 129, 1) 100%);
}

.grad-c {
  background: linear-gradient(90deg, #021048, #1e38a3);
}

.grad-d {
  background: linear-gradient(130deg, #2870EA 20%, #1B4AEF 77.5%);
}

.grad-e {
  background: rgb(239, 242, 247);
  background: linear-gradient(142deg, rgba(239, 242, 247, 1) 0%, rgba(210, 225, 247, 1) 100%);
}

.grad-f {
  background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
}

.grad-g {
  background: rgb(180,160,255);
  background: linear-gradient(121deg, rgba(180,160,255,1) 0%, rgba(255,255,255,1) 6%, rgba(255,255,255,1) 91%, rgba(55,152,255,1) 100%);
}

.bg-trans {
  background-color: rgba(255, 255, 255, 0.678);
}

.role-btn {
  cursor: pointer !important;
}

.button {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: all .2s ease-in-out;
  background: #ececec;
  color: #676767;
  border: 1px solid #ececec;
  padding: 0 1.6rem;
  font-size: .9rem;
  height: 3rem;
  line-height: 3rem;
  border-radius: 3px;
}

.button-blue {
  color: #fff;
  background: #0069ff;
  border-color: #0069ff;
}

.button-fullwidth {
  width: 100%;
  padding: 0;
}

.start-btn {
  background: rgb(78, 166, 255);
  background: radial-gradient(circle, rgba(78, 166, 255, 1) 0%, rgba(4, 128, 255, 1) 100%);
}

.btn-primary {
  --mdb-btn-bg: #0059ff;
  --mdb-btn-color: #fff;
  --mdb-btn-box-shadow: 0 4px 9px -4px #0069ff;
  --mdb-btn-hover-bg: #0060e7;
  --mdb-btn-hover-color: #fff;
  --mdb-btn-focus-bg: #0060e7;
  --mdb-btn-focus-color: #fff;
  --mdb-btn-active-bg: #3566b6;
  --mdb-btn-active-color: #fff;
  --mdb-btn-box-shadow-state: 0 8px 9px -4px rgba(59, 113, 202, 0.3), 0 4px 18px 0 rgba(59, 113, 202, 0.2);
}

.aic {
  align-items: center !important;
}

.aie {
  align-items: right !important;
}

.ais {
  align-items: left !important;
}

.aib {
  align-items: baseline !important;
}

.jcb {
  justify-content: space-between !important;
}

.jcc {
  justify-content: center !important;
}

.jce {
  justify-content: flex-end !important;
}

.jcs {
  justify-content: flex-start !important;
}