body {
  font-size: 13px;
  /* font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; */
  min-height: 100vh;
}

a {
  color: #00b7ff;
}

.container-fluid {
  height: 100vh;
}

@media (max-width: 768px) {
  .more-options-menu {
    padding-top: 0px !important;
  }
  /*navbar-fixed-left.css*/
  body > :not(:has(.bcpr-PreviewHeader)) {
    padding-top: 67px;
  }
}
@media (min-width: 768px) {
  body {
    padding-top: 0;
  }
}
@media (min-width: 768px) {
  body {
    margin-left: 270px;
  }
}
body.guest-layout {
  margin: 0;
  padding: 0;
}

.guest-layout main {
  margin-bottom: 100px;
  height: calc(100vh - 100px);
  overflow: auto;
  display: grid;
}
.guest-layout footer {
  background-color: #ffffff;
}

#navbarMainMenu {
  margin-top: 36px;
}

.navbar .nav-item {
  margin: 0 !important;
}

.navbar .nav-item .nav-link {
  padding-left: 0 !important;
}

.container-fluid,
.page-container {
  height: 100vh;
}

.upload-file {
  width: 50%;
  margin: auto;
  margin-top: 50px;
  margin-bottom: 130px;
  display: none;
}

@media screen and (max-width: 600px) {
  #navbarMainMenu {
    margin-top: 0;
  }
  .container-fluid,
  .page-container {
    height: calc(100vh - 67px);
  }
}
footer div {
  background-color: rgba(0, 0, 0, 0.025);
}

.bce:not(.be-is-small) .btn.be-btn-sort {
  display: block !important;
}

/*
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
  .container-fluid,
  .page-container {
    height: calc(100vh - 67px);
  }
  #navbarMainMenu {
    margin-top: 0;
  }
  .navbar.fixed-left {
    height: auto !important;
  }
}
/*
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
  #navbarMainMenu {
    margin-top: 0;
  }
}
.navbar.fixed-left {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

@media (min-width: 768px) {
  .navbar.fixed-left {
    bottom: 0;
    width: 270px;
    flex-flow: column nowrap;
    align-items: flex-start;
  }
  .navbar.fixed-left .navbar-collapse {
    flex-grow: 0;
    flex-direction: column;
    width: 100%;
  }
  .navbar.fixed-left .navbar-collapse .navbar-nav {
    flex-direction: column;
    width: 100%;
  }
  .navbar.fixed-left .navbar-collapse .navbar-nav .nav-item {
    width: 100%;
  }
  .navbar.fixed-left .navbar-collapse .navbar-nav .nav-item .dropdown-menu {
    top: 0;
  }
}
/*
    breakpoints are viewport arbitrary values,
    they are defined with the aim of allowing the SCSS/CSS code of your app' behave accordingly to your user's device width,
    the breakpoints I used were inspired by Bootstrap =>
    https://getbootstrap.com/docs/5.0/layout/breakpoints/
*/
@media only screen and (max-width: 575.98px) {
  .navbar {
    max-height: 100vh;
  }
}
@media (min-width: 768px) {
  .navbar.fixed-left {
    right: auto;
  }
  .navbar.fixed-left .navbar-nav .nav-item .dropdown-toggle:after {
    border-top: 0.3em solid transparent;
    border-left: 0.3em solid;
    border-bottom: 0.3em solid transparent;
    border-right: none;
    vertical-align: baseline;
  }
  .navbar.fixed-left .navbar-nav .nav-item .dropdown-menu {
    left: 100%;
  }
}
.max-with-500 {
  max-width: 500px !important;
}

.text-decoration-underline {
  text-decoration: underline !important;
}

.text-break-all {
  word-break: break-all !important;
}

.navbar-brand__image {
  max-width: 100%;
}

.be-logo {
  display: none;
}

.navbar .nav-link {
  color: #d1daec !important;
}
.navbar .text-gray {
  color: #99a8ca !important;
}
.navbar .nav-item .text-gray {
  color: #c0cfee !important;
}
.navbar .nav-item {
  width: 100%;
  padding: 0 0.5rem;
  border-radius: 8px;
  margin-bottom: 4px !important;
}
.navbar .nav-item:not(.no-hover-effect):not(.active):hover {
  background-color: #09204d;
}
.navbar .nav-item.active {
  background-color: #09204d;
  font-weight: bold;
}
.navbar .nav-link {
  display: flex;
  align-items: center;
}
.navbar .nav-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}
.navbar .nav-icon--sub {
  width: 17px;
  height: 17px;
}

.shared-link-convert {
  border: 2px solid #d1daec;
  border-radius: 10px;
  padding: 5px;
}
.shared-link-convert__arrow-down {
  height: 20px;
}
.shared-link-convert__copy_action-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.shared-link-convert .bdl-Label span {
  color: #d1daec;
}

.shared-link-toggle .icon-down {
  display: block;
}
.shared-link-toggle .icon-up {
  display: none;
}
.shared-link-toggle.is-open .icon-down {
  display: none;
}
.shared-link-toggle.is-open .icon-up {
  display: block;
}

.preview-header-controls {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #fafcfd;
  padding: 0 15px;
  border-bottom: 1px solid #e8e8e8;
}
.preview-header-controls__button {
  width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fbfbfb;
  background: transparent;
  box-shadow: none;
  border: none;
}
.preview-header-controls__button--upload svg {
  width: 21px;
  height: 21px;
}
.preview-header-controls__button--lock svg {
  width: 21px;
  height: 21px;
}
.preview-header-controls__button svg {
  fill: #909090 !important;
}

.guest-layout footer {
  /*
      breakpoints are viewport arbitrary values,
      they are defined with the aim of allowing the SCSS/CSS code of your app' behave accordingly to your user's device width,
      the breakpoints I used were inspired by Bootstrap =>
      https://getbootstrap.com/docs/5.0/layout/breakpoints/
  */
}
@media only screen and (max-width: 575.98px) {
  .guest-layout footer {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
  }
}
.guest-layout footer .footer__version {
  position: absolute;
  right: 24px;
  /*
      breakpoints are viewport arbitrary values,
      they are defined with the aim of allowing the SCSS/CSS code of your app' behave accordingly to your user's device width,
      the breakpoints I used were inspired by Bootstrap =>
      https://getbootstrap.com/docs/5.0/layout/breakpoints/
  */
}
@media only screen and (max-width: 575.98px) {
  .guest-layout footer .footer__version {
    position: static;
  }
}

.admin-layout .page-content {
  border: 1px solid #dee2e6;
  border-top: none;
}
.admin-layout .nav-tabs .nav-item:first-child .nav-link {
  border-left: 1px solid #dee2e6;
}
.admin-layout .nav-tabs .nav-item .nav-link {
  border-radius: 0;
  border-right: 1px solid #dee2e6;
  border-top: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
}
.admin-layout .nav-tabs .nav-item .nav-link.active {
  font-weight: bold;
  background: #03112b;
  color: #ffffff !important;
  border-color: #03112b;
}

/**************************************
 * Margins
 **************************************/
.man {
  margin: 0 !important;
}

.mas {
  margin: 5px !important;
}

.mam {
  margin: 10px !important;
}

.mal {
  margin: 20px !important;
}

.mtn {
  margin-top: 0 !important;
}

.mts {
  margin-top: 5px !important;
}

.mtm {
  margin-top: 10px !important;
}

.mtl {
  margin-top: 20px !important;
}

.mrn {
  margin-right: 0 !important;
}

.mrs {
  margin-right: 5px !important;
}

.mrm {
  margin-right: 10px !important;
}

.mrl {
  margin-right: 20px !important;
}

.mbn {
  margin-bottom: 0 !important;
}

.mbs {
  margin-bottom: 5px !important;
}

.mbm {
  margin-bottom: 10px !important;
}

.mbl {
  margin-bottom: 20px !important;
}

.mln {
  margin-left: 0 !important;
}

.mls {
  margin-left: 5px !important;
}

.mlm {
  margin-left: 10px !important;
}

.mll {
  margin-left: 20px !important;
}

.mhn {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.mhs {
  margin-right: 5px !important;
  margin-left: 5px !important;
}

.mhm {
  margin-right: 10px !important;
  margin-left: 10px !important;
}

.mhl {
  margin-right: 20px !important;
  margin-left: 20px !important;
}

.mvn {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.mvs {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

.mvm {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.mvl {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

/**************************************
 * Paddings
 **************************************/
/* Spacing classes */
.pan {
  padding: 0 !important;
}

.pas {
  padding: 5px !important;
}

.pam {
  padding: 10px !important;
}

.pal {
  padding: 20px !important;
}

.ptn {
  padding-top: 0 !important;
}

.pts {
  padding-top: 5px !important;
}

.ptm {
  padding-top: 10px !important;
}

.ptl {
  padding-top: 20px !important;
}

.prn {
  padding-right: 0 !important;
}

.prs {
  padding-right: 5px !important;
}

.prm {
  padding-right: 10px !important;
}

.prl {
  padding-right: 20px !important;
}

.pbn {
  padding-bottom: 0 !important;
}

.pbs {
  padding-bottom: 5px !important;
}

.pbm {
  padding-bottom: 10px !important;
}

.pbl {
  padding-bottom: 20px !important;
}

.pln {
  padding-left: 0 !important;
}

.pls {
  padding-left: 5px !important;
}

.plm {
  padding-left: 10px !important;
}

.pll {
  padding-left: 20px !important;
}

.phn {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.phs {
  padding-right: 5px !important;
  padding-left: 5px !important;
}

.phm {
  padding-right: 10px !important;
  padding-left: 10px !important;
}

.phl {
  padding-right: 20px !important;
  padding-left: 20px !important;
}

.pvn {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.pvs {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

.pvm {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.pvl {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.be-modal .ReactModal__Content.ReactModal__Content--after-open.be-modal-dialog-content label input {
  width: 100%;
}

.be-progress-container {
  z-index: 0 !important;
}

.bcpr-PreviewHeader:has(.preview-header-controls) {
  flex-flow: column-reverse;
  flex: 0 0 80px;
}

.drop-container {
  position: relative;
  display: flex;
  gap: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 200px;
  padding: 20px;
  border-radius: 10px;
  border: 2px dashed #555;
  color: #444;
  cursor: pointer;
  transition: background 0.2s ease-in-out, border 0.2s ease-in-out;
}

.drop-container:hover {
  background: #eee;
  border-color: #111;
}

.drop-container:hover .drop-title {
  color: #222;
}

.drop-title {
  margin-bottom: 20px;
  color: #444;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  transition: color 0.2s ease-in-out;
}

.icon-arrow-down::before {
  background: url("/images/icon-down.png");
  width: 32px;
  height: 32px;
  display: inline-block;
}

.app-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(16, 16, 16, 0.4);
  z-index: 999999999;
}
@keyframes uil-ring-anim {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.uil-ring-css {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 200px;
  height: 200px;
}

.uil-ring-css > div {
  position: absolute;
  display: block;
  width: 160px;
  height: 160px;
  top: 20px;
  left: 20px;
  border-radius: 80px;
  box-shadow: 0 6px 0 0 #ffffff;
  animation: uil-ring-anim 1s linear infinite;
}

.login {
  width: 400px;
  background-color: #ffffff;
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  margin-bottom: 15px;
  border-radius: 5px;
  /*
      breakpoints are viewport arbitrary values,
      they are defined with the aim of allowing the SCSS/CSS code of your app' behave accordingly to your user's device width,
      the breakpoints I used were inspired by Bootstrap =>
      https://getbootstrap.com/docs/5.0/layout/breakpoints/
  */
}
@media only screen and (max-width: 575.98px) {
  .login {
    width: 100%;
  }
}
.login h1 {
  text-align: center;
  color: #5b6574;
  font-size: 24px;
  padding: 20px 0 20px 0;
  border-bottom: 1px solid #dee0e4;
}
.login form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 20px;
}
.login form label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background-color: #3274d6;
  color: #ffffff;
}
.login form input[type="password"] {
  width: 75%;
  height: 40px;
  border: 1px solid #dee0e4;
  margin-bottom: 20px;
  padding: 0 15px;
  border-radius: 5px;
}
.login form input[type="text"] {
  width: 75%;
  height: 40px;
  border: 1px solid #dee0e4;
  margin-bottom: 20px;
  padding: 0 15px;
  border-radius: 5px;
}
.login form button[type="submit"] {
  width: 75%;
  padding: 15px;
  margin-bottom: 40px;
  background-color: #3274d6;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  color: #ffffff;
  transition: background-color 0.2s;
}
.login form button[type="submit"]:hover {
  background-color: #2868c7;
  transition: background-color 0.2s;
}
.login form input:focus {
  outline: none;
}

.page-preview .bp-header-container > div {
  display: flex;
  justify-content: end;
  align-items: center;
  padding: 11px;
}
.page-preview .bp-default-logo {
  display: none;
}
.page-preview .bp-header-btns {
  padding: 4px;
  display: flex;
}