@charset "UTF-8";/*!
 * HummingbirdUI v3.0 (https://hummingbird-ui.net/)
 * Copyright 2022 HummingbirdUI
 * Licensed under MIT (https://github.com/mCruz-de/hummingbirdUI/blob/main/LICENSE)
 */



/* ----- Settings ----- */

:root {
  /* sidebar default settings */
  --sidebar-width: 265px;
  --sidebar-padding: 20px 16px 70px 16px;
  --sidebar-bg-color: #ffffff;
  --sidebar-border-top: 0px solid black;
  --sidebar-border-right: 0px solid black;
  --sidebar-border-bottom: 0px solid black;
  --sidebar-border-left: 0px solid black;
  --sidebar-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  --sidebar-align-items: flex-start; /* or use center */
  --sidebar-elements-gap: 48px;
  --sidebar-transition: all .3s;

  /* topbar default settings */
  --topbar-height: 55px;
  --topbar-padding: 8px 32px 8px 32px;
  --topbar-bg-color: #ffffff;
  --topbar-border-top: 0px solid black;
  --topbar-border-right: 0px solid black;
  --topbar-border-bottom: 0px solid black;
  --topbar-border-left: 0px solid black;
  --topbar-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  --topbar-left-elements-gap: 16px;
  --topbar-center-elements-gap: 16px;
  --topbar-right-elements-gap: 16px;
  --topbar-transition: all .3s;

  /* main default settings */
  --main-padding: 32px 32px 32px 32px;
  --main-bg-color: #F2F2F5;
  --main-border-top: 0px solid black;
  --main-border-right: 0px solid black;
  --main-border-bottom: 0px solid black;
  --main-border-left: 0px solid black;
  --main-shadow: none;
  --main-transition: all .3s;

  /* page (topbar & main wrapper) default settings */
  --page-transition: all .3s;


  /* sidebar mobile settings */
  --sidebar-width-mobile: var(--sidebar-width);
  --sidebar-padding-mobile: var(--sidebar-padding);
  --sidebar-bg-color-mobile: var(--sidebar-bg-color);
  --sidebar-border-top-mobile: var(--sidebar-border-top);
  --sidebar-border-right-mobile: var(--sidebar-border-right);
  --sidebar-border-bottom-mobile: var(--sidebar-border-bottom);
  --sidebar-border-left-mobile: var(--sidebar-border-left);
  --sidebar-shadow-mobile: var(--sidebar-shadow);
  --sidebar-align-items-mobile: var(--sidebar-align-items);
  --sidebar-elements-gap-mobile: var(--sidebar-elements-gap);
  --sidebar-transition-mobile: all .3s;

  /* topbar mobile settings */
  --topbar-height-mobile: var(--topbar-height);
  --topbar-padding-mobile: 8px 12px 8px 12px;
  --topbar-bg-color-mobile: var(--topbar-bg-color);
  --topbar-border-top-mobile: var(--topbar-border-top);
  --topbar-border-right-mobile: var(--topbar-border-right);
  --topbar-border-bottom-mobile: var(--topbar-border-bottom);
  --topbar-border-left-mobile: var(--topbar-border-left);
  --topbar-shadow-mobile: var(--topbar-shadow);
  --topbar-left-elements-gap-mobile: var(--topbar-left-elements-gap);
  --topbar-center-elements-gap-mobile: var(--topbar-center-elements-gap);
  --topbar-right-elements-gap-mobile: var(--topbar-right-elements-gap);
  --topbar-transition-mobile: var(--topbar-transition);

  /* main mobile settings */
  --main-padding-mobile: 0px;
  --main-bg-color-mobile: #ffffff;
  --main-border-top-mobile: var(--main-border-top);
  --main-border-right-mobile: var(--main-border-right);
  --main-border-bottom-mobile: var(--main-border-bottom);
  --main-border-left-mobile: var(--main-border-left);
  --main-shadow-mobile: var(--main-shadow);
  --main-transition-mobile: var(--main-transition);

  /* page (topbar & main wrapper) mobile settings */
  --page-transition-mobile: var(--page-transition);
}




/* ----- HummingbirdUI ----- */

html{
  width: 100%;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

#sidebar{
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: var(--sidebar-align-items);
  gap: var(--sidebar-elements-gap);
  top: 0px;
  left: 0px;
  box-sizing: border-box;
  height: 100vh;
  width: var(--sidebar-width);
  padding: var(--sidebar-padding);
  background-color: var(--sidebar-bg-color);
  border-top: var(--sidebar-border-top);
  border-right: var(--sidebar-border-right);
  border-bottom: var(--sidebar-border-bottom);
  border-left: var(--sidebar-border-left);
  box-shadow: var(--sidebar-shadow);
  overflow-y: auto;
  z-index: 300;
  transition: var(--sidebar-transition);
}

#overlay{
  display:           block;
  position:          absolute;
  top:               0px;
  left:              0px;
  width:             100%;
  height:            100%;
  background-color:  rgba(0, 0, 0, 0.5);
  z-index:           290;
}

#page{
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 0px;
  padding-left: var(--sidebar-width);
  transition: var(--page-transition);
}

#topbar{
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  height: var(--topbar-height);
  max-width: 100%;
  padding: var(--topbar-padding);
  background-color: var(--topbar-bg-color);
  border-top: var(--topbar-border-top);
  border-right: var(--topbar-border-right);
  border-bottom: var(--topbar-border-bottom);
  border-left: var(--topbar-border-left);
  box-shadow: var(--topbar-shadow);
  transition: var(--topbar-transition);
}
#left-elements{
  height: 100%;
  display: flex;
  flex-direction: row;
  gap: var(--topbar-left-elements-gap);
  justify-content: flex-start;
  align-items: center;
}
#center-elements{
  height: 100%;
  display: flex;
  flex-direction: row;
  gap: var(--topbar-center-elements-gap);
  justify-content: center;
  align-items: center;
}
#right-elements{
  height: 100%;
  display: flex;
  flex-direction: row;
  gap: var(--topbar-right-elements-gap);
  justify-content: flex-end;
  align-items: center;
}

main{
  box-sizing: border-box;
  width: 100%;
  min-height: calc(100vh - var(--topbar-height));
  padding: var(--main-padding);
  background-color: var(--main-bg-color);
  border-top: var(--main-border-top);
  border-right: var(--main-border-right);
  border-bottom: var(--main-border-bottom);
  border-left: var(--main-border-left);
  box-shadow: var(--main-shadow);
  transition: var(--main-transition);
}

.desktop-only{
  display: inline !important;
}
.desktop-only-block{
  display: block !important;
}
.mobile-only{
  display: none !important;
}
.mobile-only-block{
  display: none !important;
}



@media only screen and (max-width: 1110px) {
  #sidebar{
    left: calc(-1 * var(--sidebar-width));
    gap: var(--sidebar-elements-gap-mobile);
    align-items: var(--sidebar-align-items-mobile);
    width: var(--sidebar-width-mobile);
    padding: var(--sidebar-padding-mobile);
    background-color: var(--sidebar-bg-color-mobile);
    border-top: var(--sidebar-border-top-mobile);
    border-right: var(--sidebar-border-right-mobile);
    border-bottom: var(--sidebar-border-bottom-mobile);
    border-left: var(--sidebar-border-left-mobile);
    box-shadow: var(--sidebar-shadow-mobile);
    transition: var(--sidebar-transition-mobile);
  }

  #page{
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 0px;
    padding-left: 0px;
    transition: var(--page-transition-mobile);
  }

  #topbar{
    height: var(--topbar-height-mobile);
    padding: var(--topbar-padding-mobile);
    background-color: var(--topbar-bg-color-mobile);
    border-top: var(--topbar-border-top-mobile);
    border-right: var(--topbar-border-right-mobile);
    border-bottom: var(--topbar-border-bottom-mobile);
    border-left: var(--topbar-border-left-mobile);
    box-shadow: var(--topbar-shadow-mobile);
    transition: var(--topbar-transition-mobile);
  }
  #left-elements{
    gap: var(--topbar-left-elements-gap-mobile);
  }
  #center-elements{
    gap: var(--topbar-center-elements-gap-mobile);
  }
  #right-elements{
    gap: var(--topbar-right-elements-gap-mobile);
  }

  main{
    min-height: calc(100vh - var(--topbar-height-mobile));
    padding: var(--main-padding-mobile);
    background-color: var(--main-bg-color-mobile);
    border-top: var(--main-border-top-mobile);
    border-right: var(--main-border-right-mobile);
    border-bottom: var(--main-border-bottom-mobile);
    border-left: var(--main-border-left-mobile);
    box-shadow: var(--main-shadow-mobile);
    transition: var(--main-transition-mobile);
  }

  .desktop-only{
    display: none !important;
  }
  .desktop-only-block{
    display: none !important;
  }
  .mobile-only{
    display: inline !important;
  }
  .mobile-only-block{
    display: block !important;
  }
}