:root {
  --portal-accent-color: #e41157;
  --portal-accent-border-color: #e41157;
  --portal-accent-text-color: #eaebef;

  --portal-accent-hover-color: #d40f50;
  --portal-accent-hover-border-color: #d40f50;
  --portal-accent-hover-text-color: #eaebef;

  --portal-accent-link-hover-text-color: #d40f50;

  --portal-accent-color-shadow: rgba( 228, 17, 87, .5 );
  --portal-accent-box-shadow: 0 0 0 0.275rem var(--portal-accent-color-shadow);

  --portal-white: #eaebef;
  --portal-font-size: .875rem;
  --portal-headings-color: var(--portal-accent-color);
  --portal-font-h1: 2rem;
  --portal-font-h2: 1.75rem;
  --portal-font-h3: 1.3rem;
  --portal-font-h4: 1.15rem;
  --portal-font-h5: 1rem;
  --portal-border-radius: .72rem;
  --portal-secondary-border-radius: .5rem;
  --portal-transition: all .2s ease-in-out;
  --portal-transition-time: .2s;
}

html {
  /* heihgth 100% to enable stiky footer */
  height: 100%;

  /* set default font size */
  /*font-size: 93.75%; =15px */
  font-size: 87.5%; /* =14px */
}

body {
  /* min-heihgth 100% to enable stiky footer and trigger window onscroll that don't works with height: 100%*/
  min-height: 100%;

  display: flex;
  overflow: hidden auto;
  background-color: var(--bg-color-1);
  color: var(--main-text-color);
  flex-direction: column;
}


/**
Fots and text style
*/

h1, h2, h3, h4, h5, h6 {
  color: var(--portal-headings-color, var(--main-text-color)) !important;
}

.h1, h1 {
  font-size: 2.0rem;
}
.h2, h2 {
  font-size: 1.8rem;
}
.h3, h3 {
  font-size: 1.6rem;
}
.h4, h4 {
  font-size: 1.4rem;
}
.h5, h5 {
  font-size: 1.2rem;
}
.h6, h6 {
  font-size: 1.0rem;
}

/* heading with horizontal line on either side */
.h-decorated{
     overflow: hidden;
     text-align: center;
 }
.h-decorated > span{
    position: relative;
    display: inline-block;
}
.h-decorated > span:before, .h-decorated > span:after{
    content: '';
    position: absolute;
    top: 50%;
    border-bottom: 2px solid;
    width: 9999px;
    margin: 0 20px;
}
.h-decorated > span:before{
    right: 100%;
}
.h-decorated > span:after{
    left: 100%;
}

.text-accent {
  --bs-text-opacity: 1;
  color: var(--portal-accent-color)
}

.text-accent-hover {
  --bs-text-opacity: 1;
  color: var(--portal-accent-link-hover-text-color)
}

label,
.label {
  opacity: 0.70;
  font-size: 0.9rem;  /* =14px */
}

/**
* Links
*/
a{
  cursor: pointer;/*cursor pointer for link also with href null*/
}
a, a:link, a:visited, a:focus{
  text-decoration: none;
  color: inherit;
}

a:hover, a.active {
  color: var(--portal-accent-link-hover-text-color);
}

/**
 * Back to top button
 */
#btn-back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
}

/**
 * Navbar
 */
.navbar {
  z-index: 2;
  height: 4rem;
  background-color: var(--bg-color-2);
  color: var(--main-text-color);
  border-bottom: 1px solid var(--bg-color-4);
}

.brand-logo {
  height: 2.5rem;
}

.brand-logo-secondary {
  height: 3rem;
}

.navbar-nav .nav-link:link,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:visited {
  text-decoration: none;
  color: inherit;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--portal-accent-link-hover-text-color);
}

.light-theme .brand-logo-dark {
  display: none;
}
.dark-theme .brand-logo-light {
  display: none;
}


/* Navbar toggle button */
.navbar-toggler {
  border: 1px solid var(--bg-color-4);
  padding: .75rem;
}

.navbar-toggler:focus,
.navbar-toggler:active {
  box-shadow: none;
}

/* handle collapsed nav */
.navbar .navbar-collapse{
  background-color: var(--bg-color-2);
}

@media screen and (max-width: 992px) {
  .nav-item{
    margin-left: 1rem!important;
    margin-right: 1rem!important;
  }

  .nav-item span{
    display: inline-block!important;
  }
}


/* Dropdown toggle */
.dropdown-toggle::after {
  transition: var( --portal-transition );
}

.dropdown-toggle[aria-expanded=true]::after {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  transition: all .2s ease-in-out;
}

@media screen and (min-width: 992px) {
  .dropdown-hover>.dropdown-toggle:active {
    /*Without this, clicking will make it sticky*/
    pointer-events: none;
  }
}


/**
 * Page content
 */

/* Only if sidebar exists before main*/
#sidebar~#main {
  margin-left: 250px
}
/* overwrite default footer margin */
#sidebar.sidebar-300~#main {
  margin-left: 300px
}
#sidebar.sidebar-350~#main {
  margin-left: 350px
}
#sidebar.sidebar-400~#main {
  margin-left: 400px
}

#main .container-fluid {
  padding: 5rem 2rem;
}

::selection {
  background-color: var(--portal-accent-color);
  color: var(--main-text-color);
}


/**
 * Sticky footer
 */
.footer {
  flex-shrink: 0;
  padding: 1.5rem;
  background-color: var(--bg-color-2);
  color: var(--main-text-color);
  border-top: 1px solid var(--bg-color-4);
}
/* Only if sidebar exists before footer*/
#sidebar~.footer {
  margin-left: 250px
}
/* overwrite default footer margin */
#sidebar.sidebar-300~.footer {
  margin-left: 300px
}
#sidebar.sidebar-350~.footer {
  margin-left: 350px
}
#sidebar.sidebar-400~.footer {
  margin-left: 400px
}


/**
 * Buttons
 */

/* remove focus shadow when click end */
.btn:not(:focus-visible){
   outline: 0;
   box-shadow: none;
}

.btn-accent,
.btn-accent:disabled,
.btn-accent:focus{
  background-color: var(--portal-accent-color) !important;
  border-color: var(--portal-accent-border-color) !important;
  color: var(--portal-accent-text-color) !important;
}

.btn-accent:hover {
  background-color: var(--portal-accent-hover-color) !important;
  border-color: var(--portal-accent-hover-border-color) !important;
  color: var(--portal-accent-hover-text-color) !important;
}

.btn-accent.active, .btn-accent:active {
  background-color: var(--portal-accent-hover-color) !important;
  border-color: var(--portal-accent-hover-border-color) !important;
  color: var(--portal-accent-hover-text-color) !important;
  box-shadow: var(--portal-accent-box-shadow) !important;
}


/* Default Button (dark or light basing on theme)
  boostrap buttons btn-light, btn-secondary and btn-dark are supressed because text color and background color depend on theme
 */

.btn-light:not(:focus-visible),
.btn-dark:not(:focus-visible),
.btn-secondary:not(:focus-visible),
.btn-default:not(:focus-visible){
  outline: 0;
  box-shadow: none;
  background-color: var(--bg-color-4);
  border-color: var(--bg-color-4);
  color: var(--main-text-color);
}

.btn-light,
.btn-dark,
.btn-secondary,
.btn-default {
  background-color: var(--bg-color-4);
  border-color: var(--bg-color-4);
  color: var(--main-text-color);
}

.btn-light:hover,
.btn-dark:hover,
.btn-secondary:hover,
.btn-default:hover {
  background-color: var(--portal-accent-color) !important;
  border-color: var(--portal-accent-border-color) !important;
  color: var(--portal-accent-text-color) !important;
}

/* on click add the shadow */
.btn-light.active, .btn-light:active,
.btn-dark.active, .btn-dark:active,
.btn-secondary.active, .btn-secondary:active,
.btn-default.active, .btn-default:active{
  background-color: var(--portal-accent-hover-color);
  border-color: var(--portal-accent-hover-border-color);
  color: var(--portal-accent-hover-text-color);
  box-shadow: var(--portal-accent-box-shadow) !important;
}


/**
 * Dropdowns
 */
.dropdown-menu {
  background-color: var(--bg-color-2) !important;
  color: var(--main-text-color);
}

.dropdown-item {
  color: var(--main-text-color);
}

.dropdown-item:hover {
  background-color: var(--portal-accent-color);
  color: white !important;
}


/*
 * Alert
 */
.alert-accent{
  background-color: var(--portal-accent-color) !important;
  border-color: var(--portal-accent-border-color) !important;
  color: var(--portal-accent-text-color) !important;
}


/**
 * Inputs
 */
input,
select,
textarea,
.form-control,
textarea.form-control,
input.form-control:focus,
.form-control:focus,
input.form-control,
select.form-select,
select.form-control,
.form-select,
.form-control:disabled,
.input-group-text,
.form-control[readonly] {
   background-color: var(--bg-color-2);
   border-color: var(--bg-color-4);
   color: var(--main-text-color);
}

select.form-select > option{
  background-color: var(--bg-color-2);
  color: var(--main-text-color);
}

select.form-select:focus,
select.form-control:focus,
input.form-control:focus,
.form-control:focus{
  outline: 2px solid var(--portal-accent-color);
  border-color: var(--bg-color-4);
  box-shadow: var(--portal-accent-box-shadow);
}

.form-check input:checked {
  background-color: var(--portal-accent-color);
  border-color: var(--portal-accent-border-color);
}

.form-check:hover,
.form-check label:hover{
  color: var(--portal-accent-link-hover-text-color);
  cursor: pointer;
}


.form-control:disabled, .form-control[readonly] {
  outline: transparent;
  opacity: .8;
  box-shadow: none;
}



/**
  * Tables
  */
table,
tbody,
td,
tfoot,
th,
thead,
tr,
.table-striped > tbody > tr:nth-of-type(2n+1) > *,
.table-striped > tbody > tr > * {
  color: var(--secondary-text-color);
}

table,
tbody,
td,
tfoot,
th,
thead,
tr {
  border-color: transparent;
  vertical-align: middle;
}

/**
* Cards
*/
.card {
  background-color: transparent !important;
  border-color: var(--bg-color-4);
}

/**
* Progress bar
*/
.progress .progress-bar{
  color: var(--portal-accent-text-color) !important;
  background-color: var(--portal-accent-hover-color) !important;
}


/* SubNavbar */
.subdomains-navbar {
  position: fixed;
  top: 4rem;
  background-color: var(--bg-color-1);
  z-index: 10;
}

.subdomains-navbar+#main {
  margin-top: 7rem;
}

.subdomain-link {
  transition: all .2s ease-in-out;
}