body {
	font-family: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
	color: #4b0082 !important;
	}

a:not([href]):not([tabindex]) {
  color: #000;
  text-decoration: none;
}

.app-theme-white .app-sidebar {
	margin-top:3px;
	margin-left: 2px;
	border-radius: 24px;
  background: #8E2DE2;
    /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #4A00E0, #8E2DE2);
    /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #4A00E0, #8E2DE2);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	color: #fff;
	height: 89vh;
  overflow-y: auto;
  scrollbar-width: none;
}

.app-theme-white .app-sidebar::-webkit-scrollbar {
  display: none;
}

.banner {
  height: 347px;
  /* Set the height to the actual height of the Etsy banner */
  width: 100%;
  /* Keep the width at 100% */
  background: url('../images/banner-free.png');
  background-size: cover;
  /* Change background-size to cover to force the full image to fit within the card div */
  background-attachment: scroll;
  /* Change background-attachment to scroll to remove the parallax effect */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* Change justify-content to center to horizontally and vertically center the image within the card */
  margin-top: 100px;
  margin-bottom: 35px;
  padding: 25px;
  border: 0;
}

.back-btn {
  color: #4b0082;
  padding: 5px;
  background-color: #fff;
  border-radius: 15px;
  border: 2px solid #4b0082;
}


.col-md-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

 @media screen and (max-width: 960px) {
      .col-md-4 {
          -ms-flex: unset !important;
          flex: unset !important;
          max-width: unset !important;
          max-height: fit-content;
          margin: auto;
      }

  }
 
.vertical-nav-menu li.mm-active > a {
  font-weight: bold;
  background: #fff;
  color: #ff2e97;
}

.vertical-nav-menu li a {
	  color: #fff;
	  font-size: 16px;
	  font-weight: 600;
}

.vertical-nav-menu li a:hover {
	  color: #fff;
	  background: #ff2e97;
}

.vertical-nav-menu li.active a {
  color: #fff;
  background: #ff2e97;
}


.app-sidebar__heading {
	  color: #fff;
	  padding: 10px;
}

.caret-left {
  color: white !important;
  font-weight: 600;
}

.metismenu-icon {
  opacity: 1 !important;
}

.vertical-nav-menu li {
  padding: 20px !important;
}

.vertical-nav-menu ul > li > a {
	color: white !important;
	font-weight: 400;
}

.vertical-nav-menu ul > li > a:hover {
	color: #fff !important;
	padding: 0 0.5rem 0;
}

.main-card {
   border-radius: 24px;
   box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.051),
  0 6.7px 5.3px rgba(0, 0, 0, 0.064),
  0 12.5px 10px rgba(0, 0, 0, 0.086),
  0 22.3px 17.9px rgba(0, 0, 0, 0.092),
  0 41.8px 33.4px rgba(0, 0, 0, 0.1),
  0 100px 80px rgba(0, 0, 0, 0.25);
}

.app-page-title {
   border-radius: 24px;
   box-shadow: 1px;
   margin-top: 15px;
   margin-bottom: 20px;
   margin-left: 0;
   margin-right: 0;
   justify-content: center !important;
   background-color: #fff !important;
   -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.12);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.12);
}

.app-page-title .page-title-heading {
  font-size: 1.25rem;
  font-weight: 700 !important;
}

.app-main .app-main__inner{
	padding: 0 20px 0;
}

.app-theme-white .app-header {
  background: #8E2DE2;
    /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #4A00E0, #8E2DE2);
    /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #4A00E0, #8E2DE2);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: white;
  border-radius: 0 0 24px 24px;
}

.bg-mid {
  border: 2px solid #4b0082 !important;
  background: white;
  color: #4b0082 !important;
  border-radius: 15px !important;
  -webkit-box-shadow: 0 8px 5px #777 !important;
  -moz-box-shadow: 0 8px 5px #777 !important;
  box-shadow: 0 8px 5px #777 !important;
}

.btn-inf {
    background:  linear-gradient(to right, #333399, #ff00cc) !important;
  border: 0;
  color: white !important;

}

@media (max-width: 1140px) {
  .col-md-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.btn-inf:hover {
  background: #833ab4 !important;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4) !important;  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4) !important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.closed-sidebar:not(.sidebar-mobile-open) .app-sidebar .scrollbar-sidebar .btn-in {
  display: none;
}

.btn-in { 
  border: 0;
  color: white !important;
  background: #C02425;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #F0CB35, #C02425);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #F0CB35, #C02425);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.btn-in:hover {
  background: #C02425;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #C02425, #F0CB35);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right,#C02425,
      #F0CB35);
    box-shadow: none;
}
.app-header .app-header__content {
  background: #8E2DE2;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #4A00E0, #8E2DE2);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #4A00E0, #8E2DE2);
  border-radius: 0 0 24px 24px;
}

.btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
  font-weight: 600;
  justify-content: center;
  color: white !important;
}

.dropdown-menu.dropdown-menu-right {
  color: white !important;
  justify-content: center !important;
  border-radius: 24px;
  background: #8E2DE2;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #4A00E0, #8E2DE2);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #4A00E0, #8E2DE2);
}

.dropdown-menu.dropdown-menu-right.show a.dropdown-item {
  color: white;
  border-radius: 24px;
  justify-content: center !important;
  font-weight: 600 !important;
  font-size: 15px;
}

.dropdown-menu.dropdown-menu-right.show a.dropdown-item:hover {
  background: #ff2e97 !important;
  border-radius: 10px;
}

.app-theme-white.fixed-header .app-header__logo {
  background: #8d2de200;
  margin-left: 10px; 
  border-radius: 15px;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
	background: #ff2e97 !important;
}

.btn-primary {
  background-image: linear-gradient( 138deg,  rgba(32,201,255,1) 36.7%, rgba(0,8,187,1) 84.4%, rgba(255,255,255,1) 119.7% );
  border-radius: 10px !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: bold !important;
}

.btn-primary:hover {
  background-image: linear-gradient( 296deg,  rgba(32,201,255,1) 36.7%, rgba(0,8,187,1) 84.4%, rgba(255,255,255,1) 119.7% );
}

.btn-warning {
  background-image: linear-gradient( 138deg,  rgba(255, 255, 0,1) 36.7%, rgba(255, 255, 0,0.6) 50%, rgba(255, 218, 0,1) 84.4%, rgba(255,255,255,1) 119.7% );
  border-radius: 10px !important;
  color: #000 !important;
  border: 0 !important;
  font-weight: bold !important;
}

.btn-warning:hover {
  background-image: linear-gradient( 296deg,  rgba(255, 255, 0,1) 36.7%, rgba(255, 255, 0,0.6) 50%, rgba(255, 218, 0,1) 84.4%, rgba(255,255,255,1) 119.7% );
}

.btn-danger {
  background-image: linear-gradient( 138deg,  rgba(255, 0, 0,1) 36.7%, rgba(218, 0, 0,0.6) 50%, rgba(255, 64, 64,1) 84.4%, rgba(255,255,255,1) 119.7% );
  border-radius: 10px !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: bold !important;
}

.btn-danger:hover {
  background-image: linear-gradient( 296deg,  rgba(255, 0, 0,1) 36.7%, rgba(218, 0, 0,0.6) 50%, rgba(255, 64, 64,1) 84.4%, rgba(255,255,255,1) 119.7% );
}

.btn-success {
  background-image: linear-gradient( 138deg,  rgba(0, 255, 0,1) 36.7%, rgba(0, 153, 0,0.6) 50%, rgba(64, 255, 64,1) 84.4%, rgba(255,255,255,1) 119.7% );
  border-radius: 10px !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: bold !important;
}

.btn-success:hover {
  background-image: linear-gradient( 296deg,  rgba(0, 255, 0,1) 36.7%, rgba(0, 153, 0,0.6) 50%, rgba(64, 255, 64,1) 84.4%, rgba(255,255,255,1) 119.7% );
}

.btn {
  font-weight: bold !important;
}

.swal2-popup {
    font-size: 16px !important;
    border-radius: 20px;
    background:  linear-gradient(to right, #333399, #ff00cc) !important;
    color: white;
}

.swal2-styled {
    padding: 10px 32px 10px 32px !important;
    margin: 20px 10px 0px 10px !important;
    width: 170px;
    height: 45px;
}

.swal2-title {
  color: white !important;
}


.form-control {
  border-radius: 15px !important;
}

.btn {
  border-radius: 5px !important;
}

.card {
  border-radius: 20px !important;
  width: 100%;
}

.input-group {
  border-radius: 15px !important;
}

.form-control:focus {
  color: #4b0082 !important;
  background-color: #fff;
  border-radius: 20px;
  outline: 0;
  box-shadow: 0 0 0 .1rem #00ff7b !important;
}

.modal-footer .btn-secondary {
  background: red !important;
  opacity: 0.6;
  border: 0;
}

.modal-footer .btn-secondary:hover {
  opacity: 1;
}

.modal-title {
  font-weight: bold;
}

.modal-body label {
  font-weight: 700;
}


.card-header {
  font-weight: bold;
}

.form-group label {
  font-weight: 700;
}

.guide-titl {
  color: #4b0082;
  font-size: 18px;
  font-weight: 700;
  padding-top: 10px;
  text-align: center;
}

.pdfctn {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  padding: 10px;
}

.pdf-viewer {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.pgno {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
}

.nav-btn1 {
  background: linear-gradient(to right, rgba(74, 0, 224, 0.75), rgba(142, 45, 226, 0.75));
  color: white;
  border-radius: 24px 0 0 24px !important;
  border: none;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  padding: 3px 20px;
  box-shadow: rgba(255, 46, 151, 0.17) 0px -23px 25px 0px inset, rgba(255, 46, 151, 0.15) 0px -36px 30px 0px inset, rgba(255, 46, 151, 0.1) 0px -79px 40px 0px inset, rgba(255, 46, 151, 0.06) 0px 2px 1px, rgba(255, 46, 151, 0.09) 0px 4px 2px, rgba(255, 46, 151, 0.09) 0px 8px 4px, rgba(255, 46, 151, 0.09) 0px 16px 8px, rgba(255, 46, 151, 0.09) 0px 32px 16px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  cursor: pointer;
  height: 70%;
}

.nav-btn2 {
  background: linear-gradient(to right, rgba(74, 0, 224, 0.75), rgba(142, 45, 226, 0.75));
  color: white;
  border-radius: 0 24px 24px 0 !important;
  border: none;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  padding: 3px 20px;
  box-shadow: rgba(255, 46, 151, 0.17) 0px -23px 25px 0px inset, rgba(255, 46, 151, 0.15) 0px -36px 30px 0px inset, rgba(255, 46, 151, 0.1) 0px -79px 40px 0px inset, rgba(255, 46, 151, 0.06) 0px 2px 1px, rgba(255, 46, 151, 0.09) 0px 4px 2px, rgba(255, 46, 151, 0.09) 0px 8px 4px, rgba(255, 46, 151, 0.09) 0px 16px 8px, rgba(255, 46, 151, 0.09) 0px 32px 16px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  cursor: pointer;
  height: 70%;
}

.nav-btn1:hover {
  background: #ff2e97;
  color: #fff;
  box-shadow: rgba(75, 0, 130, 0.17) 0px -23px 25px 0px inset, rgba(75, 0, 130, 0.15) 0px -36px 30px 0px inset, rgba(75, 0, 130, 0.1) 0px -79px 40px 0px inset, rgba(75, 0, 130, 0.06) 0px 2px 1px, rgba(75, 0, 130, 0.09) 0px 4px 2px, rgba(75, 0, 130, 0.09) 0px 8px 4px, rgba(75, 0, 130, 0.09) 0px 16px 8px, rgba(75, 0, 130, 0.09) 0px 32px 16px;
}

.nav-btn2:hover {
  background: #ff2e97;
  color: #fff;
  box-shadow: rgba(75, 0, 130, 0.17) 0px -23px 25px 0px inset, rgba(75, 0, 130, 0.15) 0px -36px 30px 0px inset, rgba(75, 0, 130, 0.1) 0px -79px 40px 0px inset, rgba(75, 0, 130, 0.06) 0px 2px 1px, rgba(75, 0, 130, 0.09) 0px 4px 2px, rgba(75, 0, 130, 0.09) 0px 8px 4px, rgba(75, 0, 130, 0.09) 0px 16px 8px, rgba(75, 0, 130, 0.09) 0px 32px 16px;
}

.page-no {
  border: 5px solid;
  border-image-source: linear-gradient(to right, rgba(74, 0, 224, 0.75), rgba(142, 45, 226, 0.75));
  margin: 5px;
  font-weight: 600;
  font-size: 12px;
  color: #4b0082;
  height: 70%;
}

.pagination {
  background: #ffffff;
  width: 100%;
  float: left;
}

.pagination .wrap {
  float: right;
  width: 300px;
}

#thecanvas {
  border: 1px solid #ced4da;
  direction: ltr;
  display: block;
  width: 100%;
  border-radius: 15px;
}

.pdf-toolbar {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
  justify-content: space-between;
  width: 50%;
}

.zoom {
  padding: 10px;
}

.goto {
  padding: 10px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
}

.goto input {
  color: #4b0082 !important;
  border-radius: 5px;
  border: 2px solid #4b0082 !important;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  margin-left: 4px;
  margin-right: 4px;
}

#goToPage {
  background: linear-gradient(to right, rgba(74, 0, 224, 0.75), rgba(142, 45, 226, 0.75));
  color: white;
  border-radius: 5px !important;
  border: none;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  padding: 2px 5px;
  text-decoration: none;
  box-shadow: rgba(255, 46, 151, 0.17) 0px -23px 25px 0px inset, rgba(255, 46, 151, 0.15) 0px -36px 30px 0px inset, rgba(255, 46, 151, 0.1) 0px -79px 40px 0px inset, rgba(255, 46, 151, 0.06) 0px 2px 1px, rgba(255, 46, 151, 0.09) 0px 4px 2px, rgba(255, 46, 151, 0.09) 0px 8px 4px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  cursor: pointer;
}

#goToPage:hover {
  background: #ff2e97;
  color: #fff;
  box-shadow: rgba(75, 0, 130, 0.17) 0px -23px 25px 0px inset, rgba(75, 0, 130, 0.15) 0px -36px 30px 0px inset, rgba(75, 0, 130, 0.1) 0px -79px 40px 0px inset, rgba(75, 0, 130, 0.06) 0px 2px 1px, rgba(75, 0, 130, 0.09) 0px 4px 2px, rgba(75, 0, 130, 0.09) 0px 8px 4px;
}

#sizeSelectt {
  border: 5px solid;
  border-image-source: linear-gradient(to right, rgba(74, 0, 224, 0.75), rgba(142, 45, 226, 0.75));
  margin-top: 10px;
  font-weight: 600;
  font-size: 12px;
  color: #4b0082;
  background: #fff;
  height: 70%;
}

#sizeSelectt:active {
  border: 5px solid !important;
  border-image-source: linear-gradient(to right, rgba(74, 0, 224, 0.75), rgba(142, 45, 226, 0.75)) !important;
}

@media print {
  body {
    display: none;
  }
}