@font-face {
  font-family: 'Fira Sans';
  font-weight: 400;
  src:         url('/static/fonts/Fira_Sans/FiraSans-Regular.ttf');
}

@font-face {
  font-family: 'Fira Sans';
  font-weight: 500;
  src:         url('/static/fonts/Fira_Sans/FiraSans-Medium.ttf');
}

@font-face {
  font-family: 'Fira Sans';
  font-weight: 600;
  src:         url('/static/fonts/Fira_Sans/FiraSans-SemiBold.ttf');
}

@keyframes section-glow {
  from { background: var(--section-glow-start-color); }
  to   { background: var(--section-glow-end-color); }
}

:root {
/* --- colors -------------------------------- */
  --accent-green-color:              #68B934;
  --accent-red-color:                #D86962;
  --accent-red-grayed-color:         #D8696299;
  --accent-yellow-color:             #EFB110;
  --body-bg-color:                   #F5F6F8;
  --body-fg-color:                   #83899F;
  --body-fg-grayed-color:            #83899F99;
  --btn-link-active-bg-color:        #B5D2E7;
  --btn-link-bg-color:               #E0EDF6;
  --btn-link-fg-color:               #1B364A;
  --btn-primary-active-bg-color:     #2977B5;
  --btn-primary-bg-color:            #5492C4;
  --btn-primary-fg-color:            #FFFFFF;
  --btn-primary-var-active-bg-color: #AD4E53;
  --btn-primary-var-bg-color:        #D86962;
  --btn-primary-var-fg-color:        var(--btn-primary-fg-color);
  --h1-fg-color:                     #1B364A;
  --h2-fg-color:                     #676E85;
  --input-disabled-bg-color:         #EFEFEF4D;
  --input-fg-color:                  var(--h1-fg-color);
  --section-bg-color:                #FFFFFF;
  --section-glow-end-color:          #00000015;
  --section-glow-start-color:        var(--section-bg-color);
  --sidebar-expanded-bg-color:       #EDEDED;
  --sidebar-expanded-fg-color:       #253463;
  --sidebar-overlay-bg-color:        #0B1326;
  --table-bg-color:                  #E8EBEF;
  --table-fg-color:                  var(--body-fg-color);
/* --- miscellaneous ------------------------- */
  --bs-border-radius:                10px;
  --default-font-size:               14px;
  --default-line-height:             19px;
  --default-margin:                  10px;
  --default-padding:                 var(--default-margin);
  --input-border-radius:             8px;
  --section-glow-animation:          section-glow .5s infinite alternate;
/* ------------------------------------------- */
}

*:focus, *:focus-visible {
  box-shadow: none !important;
  outline:    none !important;
}

html, body {
  display:        flex;
  flex-direction: column;
  flex-grow:      1;
  min-height:     100%;
}

body {
  background:  var(--body-bg-color);
  color:       var(--body-fg-color);
  font-family: 'Fira Sans', 'Arial', 'Helvetica', sans-serif;
  font-size:   var(--default-font-size);
  line-height: var(--default-line-height);
}

h1 {
  color:       var(--h1-fg-color);
  font-size:   calc(var(--default-font-size) + 12px);
  line-height: calc(var(--default-line-height) + 10px);
  margin: 10px 10px 10px 0;
}

button.disabled,
input[type='password'].disabled, input[type='text'].disabled, input:disabled {
  cursor:         default;
  opacity:        .65;
  pointer-events: none;
}

input[type='password'], input[type='text'] {
  border:        1px solid var(--section-bg-color);
  border-radius: var(--input-border-radius);
  color:         var(--input-fg-color);
  font-size:     calc(var(--default-font-size) + 2px);
  line-height:   calc(var(--default-line-height) + 3px);
  padding:       calc(var(--default-padding) + 1px);
  transition:    border-color .15s ease-in-out;
}

input[type='password'].disabled, input[type='text'].disabled, input:disabled {
  border-color: var(--section-bg-color);
}

input[type='password']:focus, input[type='password']:focus-visible,
input[type='text']:focus, input[type='text']:focus-visible {
  border-color: var(--btn-primary-bg-color);
}

input:-internal-autofill-selected, input:-webkit-autofill, input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--section-bg-color) inset;
  background-color:   var(--section-bg-color) !important;
  transition:         background-color 0s 600000s, color 0s 600000s !important;
}

.btn{
  border:      none;
  font-size:   var(--default-font-size);
  line-height: var(--default-line-height);
  padding:     var(--default-padding);
}

.btn.btn-link {
  background: var(--btn-link-bg-color);
  color:      var(--btn-link-fg-color);
}

.btn.btn-link:active, .btn.btn-link:hover, .btn.btn-link:focus, .btn.btn-link:focus-visible {
  background: var(--btn-link-active-bg-color);
}

.btn.btn-primary {
  background: var(--btn-primary-bg-color);
  color:      var(--btn-primary-fg-color);
}

.btn.btn-primary:active, .btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:focus-visible {
  background: var(--btn-primary-active-bg-color);
}

.btn.btn-primary.var {
  background: var(--btn-primary-var-bg-color);
  color:      var(--btn-primary-var-fg-color);
}

.btn.btn-primary.var:active, .btn.btn-primary.var:hover, .btn.btn-primary.var:focus, .btn.btn-primary.var:focus-visible {
  background: var(--btn-primary-var-active-bg-color);
}

.content {
  margin: calc(var(--default-margin) * 1.7) calc(var(--default-margin) * 2.1);
}

.exception {
  color:       var(--accent-red-color);
  font-weight: 600;
  margin:      0 var(--default-margin);
}