:root {
    --TMDBackgroundColor: #007bff; /* background for TapeMyDay pages */
    --TMDButtonSelected: #6eb0f6;
    --TMDButtonDeselected: #F9FBFB;
    --generalBackgroundColor: #DCFBD7; /* background for most pages */
    --generalBackgroundColor2: #045E51; /* background for other pages */
    --windowBackgroundColor: #F9FBFB; /* background for windows */
    --mainBackgroundColor: #FFFFFF;
    --defaultButtonColor: #FF4380; /* default button */
    --nonDefaultButtonColor: #007bff; /* not the default button */
    --textColorDark: #3D4246; /* dark text */
    --textColorLight: #FFFFFF;
    --textColorNavbarDeselected: #D7FFD0;
    --textColorNavbarSelected: #045E51;
    --smallBorderColor: #00806C;
    --packageBorderColor: #E9E9E9;
    --errorMessageColor: #E72626;
    --keyColorPressed: #545454;
    --keyColorNotPressed: #FFF;
    --keyColorBackSpace: #3D4246;
    --topAndBottomBarColor: #045E51; /* top and bottom nav bar */
    --navbarButtonDeselected: #D7FFD0;
    --navbarButtonSelected: RGBA(0,0,0,0);
    --contentButtonSelected: #DCFBD7;
    --contentButtonDeSelected: RGBA(0,0,0,0);
    --contentButtonBorderDeselected: #D2D3D3;
    --emailBoxBorder: #9EA0A2;
    --keyboardBackground: #00806C;
    --specialKeyBackground: #AEB3BE;
    --greyedOutButton: #E9E9E9;
    --greyedOutText: #9EA0A2;
    --textBackgroundHighlight: #D4DFFF;
    --printingBackground: #92EC82;
    --imageBackground: #E9E9E9;
    --favoriteInstructionBackground: #F4F5F5;
    --previewBottomBarBackground: #D7FFD0;
}

@font-face {
    font-family: firstFont;
    src: url("../fonts/Bagoss Regular/BagossStandard-Regular.woff");
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

h1 {
    font-size: 60px;
    font-family: firstFont;
    font-size: 60px;
    font-style: normal;
    font-weight: 500;
    line-height: 85px;
    color: var(--textColorDark);
    user-select: none;
}

h2 {
    font-size: 50px;
    font-family: firstFont;
    font-style: normal;
    font-weight: 500;
    line-height: 80px; /* 160% */
    user-select: none;
    color: var(--textColorDark);
}

.h3 {
    font-size: 24px;
    font-family: firstFont;
    color: var(--textColorDark);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    user-select: none;
    text-align: center;
}

h4 {
    color: var(--textColorDark);
    font-size: 30px;
    font-family: firstFont;
    font-style: normal;
    font-weight: 400;
    line-height: 42px; /* 140% */
    user-select: none;
}

h5 {
    font-size: 24px;
    font-family: firstFont;
    color: var(--textColorDark);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    user-select: none;
}


h6 {
    font-size: 20px;
    font-family: firstFont;
    color: var(--textColorDark);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    user-select: none;
}


.h6-deselect {
    font-size: 20px;
    font-family: firstFont;
    color: var(--textColorNavbarDeselected);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    user-select: none;
    text-align: center;
    margin-top: 10px;
}

.h6-select {
    font-size: 20px;
    font-family: firstFont;
    color: var(--textColorNavbarSelected);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    user-select: none;
    text-align: center;
    margin-top: 10px;
}

.h7 {
    font-size: 18px;
    font-family: firstFont;
    color: var(--textColorDark);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    user-select: none;
}

.userBlock {
    height: 90px;
}

.errorMessage {
    color: var(--errorMessageColor);
    text-align: center;
    font-family: firstFont;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px; /* 133.333% */
    margin-top: 0px;
}

.userMessage {
    color: var(--textColorDark);
    text-align: center;
    font-family: firstFont;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px; /* 133.333% */
    margin-top: 0px;
}

.spacer-user-message {
    height: 80px;
    width: 50px;
    margin: 0 auto;
    user-select: none;
}


#centerContent {
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.doubleCenter {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1920px;
}


.button-transparent {
    background-color: rgb(255,255,255); /* white */
    border: 2px solid rgb(100,100,100);
    border-radius: 30px;
    color: rgb(0,0,0);
    padding: 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-family: firstFont;
    font-size: 16px;
    margin: 4px 2px;
    user-select: none;
    cursor: pointer;
}

.button-pink-fixedWidth {
    background-color: var(--defaultButtonColor);
    border: none;
    border-radius: 35px;
    color: white;
    width: 310px;
    height: 75px;
    margin-top: 20px;
    text-align: center;
    text-decoration: none;
    user-select: none;
    cursor: pointer;
    font-family: firstFont;
    color: var(--textColorLight);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    user-select: none;
}

.button-transparent-fixedWidth {
    border-radius: 35px;
    border: 2px solid var(--textColorDark);
    min-width: 310px;
    height: 75px;
    text-align: center;
    text-decoration: none;
    user-select: none;
    font-family: firstFont;
    color: var(--textColorDark);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    user-select: none;
}

.function-button {
    background-color: var(--TMDButtonSelected);
    color: var(--textColorDark);
    min-width: 257px;
    height: 54px;
    flex-shrink: 0;
    border-radius: 40px;
    margin-right: 15px;
    margin-bottom: 20px;
    font-family: tmdFont;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    user-select: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
}

/* Admin login*/
/* LOGIN PAGE*/
.centeredContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-direction: column;
}


.login-rectangle {
    height: 150px;
    width: 300px;
    background: blue;
    background-color: rgb(13, 34, 55);
    color: rgb(238, 241, 246);
    margin: 0 auto;
    text-align: center;
}


.loginUserMessage {
    color: rgb(0, 0, 0);
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
}


/* Video page */

#myVideo {
    position: fixed;
    overflow: hidden;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    z-index: -10;
}

/* Photographer */

.photographerLogo {
    width: 250px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.scanbraceletLogo {
    width: 250px;
    visibility: hidden;
    height: auto;
}

.photographerFlag {
    width: 40px;
    margin: 10px;
}

#center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.topbarText {
    font-size: 24px;
    font-family: firstFont;
    color: var(--textColorDark);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    user-select: none;
    text-align: center;
}

#homeModeButton {
    background-color: var(--defaultButtonColor);
    border: none;
    border-radius: 95px;
    color: white;
    width: 310px;
    height: 120px;
    margin-top: 40px;
    text-align: center;
    text-decoration: none;
    user-select: none;
    cursor: pointer;
    font-family: firstFont;
    color: var(--textColorLight);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    user-select: none;
}

#buttonIcon {
    width: 300px;
}
#labelPhotographer {
    background-color: var(--TMDBackgroundColor);
    border: none;
    border-radius: 35px;
    color: white;
    min-width: 310px;
    height: 75px;
    text-align: center;
    text-decoration: none;
    user-select: none;
    cursor: pointer;
    font-family: firstFont;
    color: var(--textColorLight);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    user-select: none;
    vertical-align: middle;
    display: inline-flex;
    justify-content: center; /* center the content horizontally */
    align-items: center;
}

#file-chosen {
    margin-left: 0.3rem;
    font-family: sans-serif;
}

#modeIcon {
    height: 60px;
    width: auto;
}
/* Reporting */
#startGroup {
    display: none;
}


#endGroup {
    display: none;
}

.timespanSelector {
    display: none;
}