/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.light-style .menu .app-brand.demo {
  height: 64px;
}

.dark-style .menu .app-brand.demo {
  height: 64px;
}

.app-brand-logo.demo {
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: -ms-flexbox;
  display: flex;
  width: 34px;
  height: 24px;
}

.app-brand-logo.demo svg {
  width: 35px;
  height: 24px;
}

.app-brand-logo img {
  width: 32px !important;
}

.app-brand-text.demo {
  font-size: 1.375rem;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
  padding-top: 78px !important;
}
/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
  display: block !important;
}

.demo-inline-spacing > * {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.rtl-only {
  display: none !important;
  text-align: left !important;
  direction: ltr !important;
}

[dir='rtl'] .rtl-only {
  display: block !important;
}

/* Dropdown buttons going out of small screens */
@media (max-width: 576px) {
  #dropdown-variation-demo .btn-group .text-truncate {
    width: 254px;
    position: relative;
  }
  #dropdown-variation-demo .btn-group .text-truncate::after {
    position: absolute;
    top: 45%;
    right: 0.65rem;
  }
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1rem;
}
.layout-demo-placeholder img {
  width: 900px;
}
.layout-demo-info {
  text-align: center;
  margin-top: 1rem;
}

/*
* additional
*/
.capitalize {
  text-transform: capitalize;
}
.bg-primary {
  background: var(--primaryColor) !important;
}

.bg-vironeer {
  background: var(--secondaryColor) !important;
}

.bg-amazon {
  background: #f56600 !important;
}

.bg-wasabi {
  background: #00ce3e !important;
}

.bg-digitalocean {
  background: #0069ff !important;
}

.bg-girl {
  background: rgb(2, 0, 36);
  background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(0, 84, 190, 1) 0%, rgba(144, 5, 181, 1) 100%);
}

.bg-fire {
  background: #c50303 !important;
}

.bg-grass {
  background: #8ac249 !important;
}

.bg-yellow {
  background-color: #ffd81d !important;
}

.bg-orange {
  background-color: #FF9800 !important;
}

.bg-pink {
  background-color: #E91E63 !important;
}

.bg-lg-1 {
  background: rgb(2, 0, 36);
  background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(0, 190, 175, 1) 0%, rgba(5, 144, 181, 1) 100%);
}

.bg-lg-2 {
  background: #7b4397 !important;
  background: -webkit-linear-gradient(to right, #dc2430, #7b4397) !important;
  background: linear-gradient(to right, #dc2430, #7b4397) !important;
}

.bg-lg-3 {
  background: #0F2027 !important;
  background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027) !important;
  background: linear-gradient(to right, #2C5364, #203A43, #0F2027) !important;
}

.bg-lg-4 {
  background: #8E2DE2 !important;
  background: -webkit-linear-gradient(to right, #4A00E0, #8E2DE2) !important;
  background: linear-gradient(to right, #4A00E0, #8E2DE2) !important;
}

.bg-lg-5 {
  background: #485563 !important;
  background: -webkit-linear-gradient(to right, #29323c, #485563) !important;
  background: linear-gradient(to right, #29323c, #485563) !important;
}

.bg-lg-6 {
  background: #000428 !important;
  background: -webkit-linear-gradient(to right, #004e92, #000428) !important;
  background: linear-gradient(to right, #004e92, #000428) !important;
}

.bg-lg-7 {
  background: #8E0E00 !important;
  background: -webkit-linear-gradient(to right, #8E0E00, #1F1C18) !important;
  background: linear-gradient(to right, #8E0E00, #1F1C18) !important;
}

.bg-lg-8 {
  background: #5caf2e !important;
  background: -webkit-linear-gradient(to right, #5caf2e, #5bb42b) !important;
  background: linear-gradient(to right, #5caf2e, #5bb42b) !important
}

.bg-lg-9 {
  background: #005C97 !important;
  background: -webkit-linear-gradient(to right, #363795, #005C97) !important;
  background: linear-gradient(to right, #363795, #005C97) !important;
}

.bg-lg-10 {
  background: #e53935 !important;
  background: -webkit-linear-gradient(to right, #e35d5b, #e53935) !important;
  background: linear-gradient(to right, #e35d5b, #e53935) !important;
}

.bg-lg-11 {
  background: #11998e !important;
  background: -webkit-linear-gradient(to left, #38ef7d, #11998e) !important;
  background: linear-gradient(to left, #38ef7d, #11998e) !important;
}

.bg-lg-12 {
  background: #06beb6 !important;
  background: -webkit-linear-gradient(to left, #48b1bf, #06beb6) !important;
  background: linear-gradient(to left, #48b1bf, #06beb6) !important;
}

.bg-lg-13 {
  background: #159957 !important;
  background: -webkit-linear-gradient(to left, #155799, #159957) !important;
  background: linear-gradient(to left, #155799, #159957) !important;
}

.bg-lg-14 {
  background: #41295a !important;
  background: -webkit-linear-gradient(to left, #2F0743, #41295a) !important;
  background: linear-gradient(to left, #2F0743, #41295a) !important;
}

.bg-lg-15 {
  background: #f85032 !important;
  background: -webkit-linear-gradient(to bottom, #e73827, #f85032) !important;
  background: linear-gradient(to bottom, #e73827, #f85032) !important;
}

.bg-lg-16 {
  background: #76b852 !important;
  background: -webkit-linear-gradient(to top, #8DC26F, #76b852) !important;
  background: linear-gradient(to top, #8DC26F, #76b852) !important;
}

.bg-c-1 {
  background: #3f0b74 !important;
}

.bg-c-2 {
  background: #0b4f74 !important;
}

.bg-c-3 {
  background: #0b7469 !important;
}

.bg-c-4 {
  background: #2ac76f !important;
}

.bg-c-5 {
  background: #cd8200 !important;
}

.bg-c-6 {
  background: #d65c0c !important;
}

.bg-c-7 {
  background: #eb5454 !important;
}

.bg-c-8 {
  background: #3624a4 !important;
}

.bg-c-9 {
  background: #a61559 !important;
}

.bg-c-10 {
  background: #0f2253 !important;
}

.bg-c-11 {
  background: #0045AD !important;
}

.bg-c-12 {
  background: #afa501 !important;
}

.btn-amazon {
  background-color: #f56600;
  border-color: #f56600;
  color: #fff;
}

.btn-amazon:hover {
  background-color: #f56600;
  border-color: #f56600;
  color: #fff;
  opacity: .8;
}

.btn-wasabi {
  background-color: #00ce3e;
  border-color: #00ce3e;
  color: #fff;
}

.btn-wasabi:hover {
  background-color: #00ce3e;
  border-color: #00ce3e;
  color: #fff;
  opacity: .8;
}

.btn-digitalocean {
  background-color: #0069ff;
  border-color: #0069ff;
  color: #fff;
}

.btn-digitalocean:hover {
  background-color: #0069ff;
  border-color: #0069ff;
  color: #fff;
  opacity: .8;
}

.btn-green {
  color: #fff !important;
  background-color: #06ad22 !important;
  border-color: #06ad22 !important;
}

.btn-green:hover {
  color: #fff !important;
  background-color: #049c1e !important;
  border-color: #049c1e !important;
}

.btn-red {
  color: #fff !important;
  background-color: #ce1628 !important;
  border-color: #ce1628 !important;
}

.btn-red:hover {
  color: #fff !important;
  background-color: #b91626 !important;
  border-color: #b91626 !important;
}

.btn.btn-blue {
  color: #fff;
  background-color: #313ed4;
  border-color: #323fd4;
}

.btn.btn-blue:hover {
  color: #fff;
  background-color: #2935c1;
  border-color: #2935c1;
}

.ck-editor__editable {
  height: 500px !important;
  overflow: scroll;
}

.ckeditor-lg .ck-editor__editable {
  height: 700px !important;
  overflow: scroll;
}

.ck-focused {
  border-color: #868686 !important;
  box-shadow: none !important;
}

.billiongroup-image-preview {
  padding: 3rem;
  text-align: center;
  border: 1px solid #cad1d9;
  border-radius: 2px;
}

.billiongroup-image-preview img {
  height: 35px;
}

.billiongroup-sort-menu .billiongroup-navigation-placeholder {
  background: rgba(52, 108, 176, .12);
  border: 1px dashed #346cb0;
  min-height: 50px;
  list-style-type: none;
}

.billiongroup-sort-menu .billiongroup-navigation-handle {
  margin-right: 1rem;
  cursor: move;
}