:root {
    --banner-button-bg-color: #027dba;

    --font-body-color: black;
    --font-body-color-invert: white;
    --font-body-color-outside: rgb(2, 125, 186, 1);
    --font-dark-color: rgb(51, 51, 51);

    --font-body-name: "Source Sans Pro", sans-serif;
    --font-header-name: "Plus Jakarta Sans", sans-serif;

    --timeline-height: 0;

    --standard-outside-color: rgb(2, 125, 186, 1);
    --standard-outside-hover-color: rgb(20, 148, 212);

    --standard-margin-zero: 0px;
    --standard-margin-small: 2px;
    --standard-margin-medium: 5px;
    --standard-margin-large: 10px;
    --standard-margin-extra-large: 20px;
}

html {
    height: 100%;
    width: 100%;
}

body {
    margin: 0;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(135deg, rgb(81, 107, 117) 0%, rgb(54, 66, 92) 50%, rgb(44, 42, 88) 100%);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow-y: hidden;
}

.bodyText {
    font-family: var(--font-body-name);
    margin: 0;
}

.noMargin {
    margin: 0 0 0 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

#outsideLogo {
    height: 60px;
    width: 149px;
}

#topBarContainer {
    background-color: #ffffff;
    position: sticky;
    width: calc(100% - 44px);
    display: flex;
    align-items: center;
    z-index: 2000;
    border: 2px rgb(191 191 191) solid;
    padding: 10px;
    margin: 10px 10px 0px 10px;
    min-width: 1346px;
}

#filtersContainer {
    position: sticky;
    width: calc(100% - 20px);
    max-height: 86px;
    left: 0%;
    top: 0%;
    z-index: 1900;
    min-width: 1369px;
    padding: 10px 0px 10px 0px;
    margin-left: 10px;
    margin-right: 10px;
}

.filterSelect {
    padding: 2px;
    margin: 4px 4px 0px 4px;
    font-family: var(--font-body-name);
    font-size: 16px;
    color: var(--font-dark-color);
    cursor: pointer;
}

.overallViewActionHidden {
    display: none;
}

.overallViewActionDisplay {
    display: block;
}

.dropBtn {
    background-color: #ffffff;
    box-shadow: inset 0 0 0 2px var(--banner-button-bg-color) !important;
    color: var(--font-body-color-outside);
    padding: 16px;
    font-size: 16px;
    font-family: var(--font-body-name);
    border: none;
    cursor: pointer;
    min-width: 170px;
    height: 22px;
    /*user-select: none;*/
}

.filterBtnSize {
    height: 54px;
}
  
.dropdownLegacy {
    display: inline-block;
    margin-left: 10px;
}
  
.dropContent {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    max-height: 50vh;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    font-family: var(--font-body-name);
    overflow-y: auto;
}
  
.dropItem {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
  
.dropItem:hover {
    background-color: #f1f1f1;
    cursor: pointer;
}
  
.dropdownLegacy:hover .dropContent {
    display: block;
}
  
.dropdownLegacy:hover .dropBtn {
    background-color: var(--banner-button-bg-color);
    color: var(--font-body-color-invert);
}

.calendarHeader {
    background-color: var(--banner-button-bg-color);
}

.arrow {
    font-weight: bold;
    font-family: var(--font-body-color);
    font-size: 1rem;
}

#calendarDropdown {
    margin-left: 0px;
}

#calendarRightArrow {
    content: '&#62';
}

#calendarLeftArrow {
    content: '&#60';
}

#timelineContainer {
    display: block;
    position: absolute;
    width: calc(100% - 20px);
    height: calc(100% - 178px);
    margin-left: 10px;
    background-color: rgba(245, 245, 245);
    box-sizing: border-box;
    overflow: scroll;
}

.timelineHourLabels {
    list-style: none;
}

.hourLabel {
    position: relative;
    height: 3rem;
    width: 6rem;
    margin: 2rem;
}

#timelineWrap {
    position: absolute;
    width: 3890px;
    left: 200px;
}

.timelineColumn {
    display: inline-block;
}

.timelineHeader {
    position: sticky;
    top: 0;
    width: 160px;
    height: 40px;
    text-align: center;
    padding-top: 15px;
    font-family: var(--font-body-name);
    font-size: 18px;
    background-color: rgba(255, 255, 255);
    color: var(--banner-button-bg-color);
    border-top: 2px solid var(--banner-button-bg-color);
    border-bottom: 2px solid var(--banner-button-bg-color);
    border-left: 2px solid var(--banner-button-bg-color);
    z-index: 10;
}

#timelineSidebarBlock {
    position: fixed;
    display: flex;
    width: 200px;
    height: calc(100% - 4rem - 174px);
    margin-bottom: 2rem;
    background-color: rgb(240, 240, 240);
    z-index: 15;
}

#timelineSidebarWrap {
    position: absolute;
    width: 200px;
    text-align: center;
    font-family: var(--font-body-name);
    font-size: 18px;
    z-index: 20;
    left: 0px;
}

.timelinePlaceholder {
    height: 55px;
    width: 198px;
    position: relative;
    border: 2px solid var(--banner-button-bg-color);
    z-index: 20;
    background-color: rgb(255, 255, 255);
}

.timelineSidebarItem {
    display: grid;
    align-items: center;
    height: 92px;
    width: 202px;
    position: relative;
    border-bottom: 2px solid var(--banner-button-bg-color);
    border-right: 2px solid var(--banner-button-bg-color);
    border-left: 2px solid var(--banner-button-bg-color);
    text-align: center;
    font-family: var(--font-body-name);
    font-size: 18px;
    color: var(--banner-button-bg-color);
    box-sizing: border-box;
    background-color: rgb(255, 255, 255);
}

.timelineHeaderEnd {
    border-right: 2px solid var(--banner-button-bg-color);
}

.timelineDivider {
    position: absolute;
    width: 160px;
    min-height: calc(100vh - 4rem - 236px);
    height: calc((var(--timeline-height) * 92px));
    border-left: 2px dashed rgb(50, 50, 50, 0.2);
}

.timelineDividerEnd {
    border-right: 2px dashed rgb(50, 50, 50, 0.2);
}

#timelineDataWrap {
    position: absolute;
    height: -webkit-fill-available;
    width: -webkit-fill-available;
    top: 62px;
    left: 200px;
}

.timelineShift {
    z-index: 5;
    position: absolute;
    height: 84px;
    background-color: white;
    border-radius: 5px;
    font-family: var(--font-body-name);
    font-size: 14px;
    color: black;
    padding: 0 0 0 4px;
    box-sizing: border-box;
    border: 2px solid;
    border-bottom: 8px solid;
    border-color: black;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timelineShift:hover {
    filter: brightness(1.02);
    cursor: pointer;
}

.timelineSpecial {
    z-index: 5;
    position: absolute;
    height: 84px;
    font-family: var(--font-body-name);
    font-size: 14px;
    color: black;
    padding: 0 0 0 4px;
    box-sizing: border-box;
    border: 2px dashed black;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timelineSpecial:hover {
    filter: brightness(1.02);
    cursor: pointer;
}

#bugPanel {
    display: none;
}

#captainsEmailPanel {
    display: none;
}

#bugPanelExplanation {
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}

#submitBugBtn {
    background-color:rgb(2, 125, 186, 1);
    color: rgb(240, 240, 240);
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    padding: 5px;
    border-radius: 5px;
    float: right;
    margin-top: 5px;
    cursor: pointer;
}

#submitBugBtn:hover {
    opacity: 0.9;
}

#bugMsg {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    float: left;
    display: none;
    padding-top: 5px;
    margin-top: 5px;
}

#detailsContainer {
    display: none;
    position: fixed;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255, 0.5);
    z-index: 3000;
    box-sizing: border-box;
    left: 0;
    top: 0;
    overflow: auto;
}

#detailsPanel {
    display: none;
}

.exitBtn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40px' height='40px' viewbox='0 0 20 20'%3E%3Cpath d='M 5,5 L 15,15 M 15,5 L 5,15' stroke='rgb(40, 40, 40)' stroke-width='3' stroke-linecap='square' /%3E%3C/svg%3E");
    color: black;
    height: 20px;
    width: 20px;
    position: relative;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 5px;
}

.exitBtn:hover {
    background-color: rgba(242, 242, 242);
    cursor: pointer;
}

#createShiftExitBtn {
    float: right;
    height: 30px;
    width: 30px;
    background-position: 5px 5px;
}

.notesContainer {
    position: relative;
    display: block;
    min-height: 300px;
    min-width: 200px;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    border: 1px solid rgb(200, 200, 200);
    padding: 10px;
    box-sizing: border-box;
    margin-top: 5px;
}

.notesEditIcon {
    background-image: url(edit-pen-svgrepo-com.svg);
    position: absolute;
    display: inline-block;
    height: 20px;
    width: 20px;
    right: 5px;
    top: 5px;
    border-radius: 2px;
}

.notesEditIcon:hover {
    background-color: rgb(220, 220, 220);
}

.notesFieldContainer {
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
}

.notesField {
    position: relative;
    display: block;
    height: 280px;
    width: 100%;
    resize: none;
    font-family: var(--font-body-name);
    font-size: 14px;
    box-sizing: border-box;
}

#detailsPanelHeader {
    border-bottom: 1px solid rgb(200, 200, 200);
    box-shadow: 0px 5px 5px -5px rgb(200, 200, 200);
}

#detailsPanelTitle {
    display: inline-block;
    position: relative;
    font-size: 28px;
    font-family: Arial, Helvetica, sans-serif;
    color:rgb(30, 30, 30);
    padding-left: 5px;
}

#detailsPanelType {
    position: relative;
    font-size: 22px;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(50, 50, 50);
    text-align: left;
}

#detailsPanelTypeSquare {
    display: inline-block;
    position: relative;
    background-color: black;
    border-radius: 5px;
    height: 22px;
    width: 22px;
    top: 1px;
}

#detailsPanelExit {
    float: right;
    height: 30px;
    width: 30px;
    background-position: 5px 5px;
}

#detailsPanelDate {
    position: relative;
    display: inline-block;
    font-size: 22px;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(50, 50, 50);
    text-align: left;
    margin-top: 2px;
    width: fit-content;
}

#detailsOperationsContainer {
    position: relative;
    display: block;
    min-width: 200px;
    width: 100%;
    height: fit-content;
    border-radius: 2px;
    border: 1px solid rgb(200, 200, 200);
    padding: 10px;
    box-sizing: border-box;
    margin-top: 5px;
    grid-template-columns: auto auto;
}

.shiftBannerWrap {
    display: inline-flex;
    position: absolute;
    height: 20px;
    width: calc(100% - 4px);
    top: 0;
    left: 0;
    margin-left: auto;
    margin: 2px;
    justify-content: flex-end;
}

.shiftBanner {
    display: inline-block;
    vertical-align: top;
    height: 20px;
    width: min-content;
    font-size: 14px;
    font-family: var(--font-body-name);
    color: white;
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 5px;
    margin-left: 2px;
}

#actionBtn {
    font-size: 24px;
    font-family: var(--font-body-name);
    background-color: #04AA6D;
    color: white;
    position: absolute;
    display: none;
    top: 0;
    right: 0;
    margin-right: 10px;
    margin-top: 10px;
    padding: 0 5px;
    border-radius: 5px;
    cursor: pointer;
}

#loginLogo {
    display: block;
    margin: 10px auto;
    top: 10px;
    max-width: 100%;
    height: auto;
}

#loginContentWrapper, #newPasswordContentWrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#loginContainer, #newPasswordContainer {
    height: 60vh;
    max-width: 600px;
    max-height: 800px;
    padding: 20px;
    border-radius: 10px;
    background-color: rgba(245, 245, 245);
    box-shadow: 0 -10px 75px 0 rgba(8, 9, 14, .15);
}

.loginInput {
    margin-left: 20px;
    margin-bottom: 10px;
    margin-top: 4px;
    height: 30px;
    width: calc(100% - 40px);
    border-radius: 5px;
    background-color: white;
    border: 2px solid rgb(200, 200, 200);
    font-size: 16px;
}

.loginInput:focus {
    outline: none !important;
    border-color: var(--banner-button-bg-color);
    box-shadow: 0 0 5px rgb(200, 200, 200);
}

.loginInputBtn {
    margin: 20px;
    height: 30px;
    width: calc(100% - 40px);
    font-family: var(--font-header-name);
    background-color: var(--banner-button-bg-color);
    color: white;
    border: none;
    border-radius: 5px;
}

.loginInputBtn:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 5px rgb(200, 200, 200);
    cursor: pointer;
}

.loginLabel {
    font-family: var(--font-body-name);
    font-size: 16px;
    color:rgb(30, 30, 30);
    margin-left: 20px;
    width: auto;
    height: auto;
}

#loginTitle {
    font-family: var(--font-header-name);
    font-size: 36px;
    font-weight: 500;
    width: calc(100% - 40px);
    height: auto;
    margin-left: 20px;
}

#loginSubtitle {
    font-family: var(--font-header-name);
    font-size: 18px;
    width: calc(100% - 40px);
    height: 28px;
    padding-left: 2px;
    margin-left: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--banner-button-bg-color);

}

#showPasswordInput {
    height: 16px;
    width: 16px;
    margin-left: 20px;
    margin-top: 2px;
    margin-bottom: 2px;
}

#showPasswordInput:hover {
    cursor: pointer;
}

.passwordLabel {
    display: inline-block;
    font-family: var(--font-body-name);
    font-size: 14px;
    color: rgb(30, 30, 30);
}

.createBtn {
    background-color: #04AA6D;
    color: white;
    font-family: var(--font-body-name);
    font-size: 22px;
    font-weight: 400;
    text-align: center;
    height: 54px;
    padding: 12px 10px;
    box-sizing: border-box;
    border-radius: 5px;
    float: right;
}

.createBtn:hover {
    cursor: pointer;
    background-color: #029660;
}

/* OUTSIDE STYLING */

.standardOutsideBtn {
    background-color: var(--standard-outside-color);
    color: white;
    font-family: var(--font-body-name);
    font-size: 22px;
    font-weight: 400;
    text-align: center;
    height: 54px;
    padding: 12px 10px;
    box-sizing: border-box;
    border-radius: 5px;
    float: right;
}

.standardOutsideBtn:hover {
    cursor: pointer;
    background-color: var(--standard-outside-hover-color);
}

.standardOutsideColor {
    background-color: var(--banner-button-bg-color);
}

/* STANDARD PANEL */

.standardPanel {
    margin: 20px auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    background-color: rgb(255, 255, 255);
    max-width: 1000px;
    padding: 20px;
    min-height: calc(100% - 80px);
}

.standardDropdownArrow {
    width: 10px;
    height: 10px;
    border-right: 3px solid #666;
    border-bottom: 3px solid #666;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    cursor: pointer;
}

.standardPanelSection.active .standardDropdownArrow {
    transform: rotate(-135deg);
}

.standardPanelSection:not(.active) .standardPanelScrollList {
    margin-top: 0;
}

.standardPanelAutoHeight {
    height: auto;
}

.standardPanelHeader {
    border-bottom: 1px solid rgb(200, 200, 200);
    box-shadow: 0px 5px 5px -5px rgb(200, 200, 200);
}

/* Islands are just sections without borders */

.standardPanelIsland {
    position: relative;
    display: block;
    width: 100%;
    height: fit-content;
    padding-top: var(--standard-margin-large);
    padding-bottom: var(--standard-margin-large);
    box-sizing: border-box;
    margin-top: var(--standard-margin-medium);
}

.standardPanelSection {
    position: relative;
    display: block;
    width: 100%;
    height: fit-content;
    border-radius: 2px;
    border: 1px solid rgb(200, 200, 200);
    padding: 10px;
    box-sizing: border-box;
    margin-top: 5px;
}

.standardPanelSection > * {
    margin-top: var(--standard-margin-large);
}

.standardPanelSection > *:first-child {
    margin-top: var(--standard-margin-zero);
}

.standardPanelSectionGrid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: fit-content;
    border-radius: 2px;
    border: 1px solid rgb(200, 200, 200);
    padding: 10px;
    box-sizing: border-box;
    margin-top: 5px;
}

.standardPanelSectionGrid > * {
    margin-left: var(--standard-margin-large);
}

.standardPanelSectionGrid > *:first-child {
    margin-left: var(--standard-margin-zero);
}

.standardPanelSubsection > * {
    margin-top: var(--standard-margin-large);
}

.standardPanelSubsection > *:first-child {
    margin-top: var(--standard-margin-zero);
}

.standardPanelItem {
    display: block;
}

.standardPanelFullWidth {
    width: 100%;
}

.standardPanelTitle {
    display: inline-block;
    position: relative;
    font-size: 28px;
    font-family: Arial, Helvetica, sans-serif;
    color:rgb(30, 30, 30);
}

.standardPanelSubtitle {
    display: inline-block;
    position: relative;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    color:rgb(60, 60, 60);
}

.standardPanelBodyText {
    display: inline-block;
    position: relative;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    color:rgb(90, 90, 90);
}

.standardPanelLargeText {
    display: inline-block;
    position: relative;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    color:rgb(90, 90, 90);
}

.standardPanelSubtext {
    display: inline-block;
    position: relative;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    color:rgb(150, 150, 150);
}

.standardPanelExitButton {
    float: right;
    height: 30px;
    width: 30px;
    background-position: 5px 5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40px' height='40px' viewbox='0 0 20 20'%3E%3Cpath d='M 5,5 L 15,15 M 15,5 L 5,15' stroke='rgb(40, 40, 40)' stroke-width='3' stroke-linecap='square' /%3E%3C/svg%3E");
    color: black;
    position: relative;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 5px;
}

.standardPanelExitButton:hover {
    background-color: rgba(242, 242, 242);
    cursor: pointer;
}

.standardPanelFullSizeButton {
    position: relative;
    margin-top: var(--standard-margin-large);
    box-sizing: border-box;
    border-radius: 5px;
    width: 100%;
    padding: var(--standard-margin-medium);
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    text-align: center;
}

.standardPanelButton {
    position: relative;
    margin-top: var(--standard-margin-large);
    box-sizing: border-box;
    border-radius: 5px;
    padding: var(--standard-margin-medium);
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    text-align: center;
}

.standardPanelButton:hover {
    filter: brightness(0.9);
    cursor: pointer;
}

.standardPanelFullSizeButton:hover {
    filter: brightness(0.9);
    cursor: pointer;
}

.standardFlex {
    display: flex;
}

.standardFlex1 {
    flex: 1;
}

.standardFlexRowBetween {
    flex-direction: row;
    justify-content: space-between;
}

.standardPanelDivider {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: var(--standard-margin-large) 0;
    padding: 0;
}

.standardPanelScrollList {
    overflow-y: auto;
    max-height: 500px;
    transition: all 0.3s ease;
}

.standardPanelScrollList > * {
    margin-top: var(--standard-margin-large);
}

.standardPanelScrollList > *:first-child {
    margin-top: var(--standard-margin-zero);
}

.standardPanelCard {
    border: 1px solid #ccc;
    border-radius: var(--standard-margin-medium);
    padding: var(--standard-margin-large);
}

.standardPanelSectionReduce {
    max-height: 400px;
}

.standardPanelWarningLabel {
    background: #fffbeb;
    border: 1px solid #fbbf24;
    padding: var(--standard-margin-medium);
    margin-bottom: var(--standard-margin-medium);
    border-radius: 5px;
    color: #78350f;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}

.standardPanelSearchBar {
    border-radius: 5px;
    border: 1px solid #c8c8c8;
    padding: 10px;
    min-width: 40vw;
    margin-right: 5px;
}

.standardPanelSearchBar:focus-visible {
    border: 2px solid var(--banner-button-bg-color);
    outline: none;
}

/* BANNER STYLING */

.cardBanner {
    display: inline-block;
    border-radius: var(--standard-margin-medium);
    padding: 0px var(--standard-margin-small);
}

.cardBannerIcon {
    display: inline-block;
    margin-right: var(--standard-margin-small);
    vertical-align: middle;
}

.cardBannerText {
    display: inline-block;
    position: relative;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
}


.standardSideBar {
    background-color: #24344c;
    height: 100vh;
    position: sticky;
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: start;
    width: fit-content;
    top: 0;
}

.standardSideBarLogoGroup {
    background-color: #fff;
    padding: 10px;
    text-align: center;
}

.standardSideBarGroupHeader {
    color: white;
    font-family: 'Source Sans Pro';
    background-color: #586a8b;
    padding: 10px;
    text-align: center;
    font-size: x-large;
    margin-bottom: 10px;
}

.standardSideBarButton {
    color: white;
    font-family: 'Plus Jakarta Sans';
    padding: 15px 20px 15px 15px;
    cursor: pointer;
    border-left: 6px solid transparent;
    transition: all 0.3s ease;
    vertical-align: middle;
    display: flex;
    flex-flow: nowrap;
}

.standardSideBarButton:hover {
    background-color: #2a3c57;
    padding: 15px 12px 15px 23px;
}

.standardSideBarButtonSelected {
    background-color: #3c4e6a;
    cursor: pointer;
    border-left: 6px solid white;
}

.standardSideBarButtonIcon {
    padding: 0px 5px 0px 0px;
    pointer-events: none;
}

.standardSideBarButtonText {
    pointer-events: none;
}

.standardSideBarBottomGroup {
    padding: 10px;
    border-top: 1px solid #566a8b;
}

.standardBackButton {
    background-color: #fff;
    color: #27344b;
    border-radius: 5px;
    font-family: 'Plus Jakarta Sans';
    font-size: large;
    text-align: center;
    padding: 10px;
}

/* CREATE SHIFT PANEL */

#createShiftPanel {
    display: none;
}

#createShiftTitle {
    display: inline-block;
    position: relative;
    font-size: 28px;
    font-family: Arial, Helvetica, sans-serif;
    color:rgb(30, 30, 30);
}

#createShiftPanelHeader {
    border-bottom: 1px solid rgb(200, 200, 200);
    box-shadow: 0px 5px 5px -5px rgb(200, 200, 200);
}

#createShiftSubtext {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #666;
    margin-top: 5px;
}

.createShiftDropBtn {
    background-color: white;
    color: rgb(180, 180, 180);
    font-size: 16px;
    font-family: Arial;
    height: 30px;
    border: 1px solid rgb(130, 130, 130);
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    width: 415px;
    box-sizing: border-box;
    padding-bottom: 20px;
    text-align: left;
}

.createShiftDropBtn:hover {
    border-color: rgb(80, 80, 80);
}

.createShiftDropBtn:focus {
    box-shadow: 0px 0px 0px 3px rgb(200, 200, 200);
}

.createShiftFieldLabel {
    font-family: var(--font-body-name);
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.dropdownContent {
    position: absolute;
    background-color: #f6f6f6;
    width: 398px;
    max-height: 50vh;
    z-index: 1500;
    overflow-y: auto;
}

.searchField {
    box-sizing: border-box;
    font-size: 16px;
    padding: 14px 20px 12px 14px;
    border: none;
    border-bottom: 1px solid #ddd;
    width: 398px;
    height: 30px;
}
/*
#shiftTypeDropdownContainer {
    display: none;
    width: 398px;
    height: calc(50vh + 30px);
    position: relative;
    border: 1px solid rgb(130, 130, 130);
    background-color: white;
    z-index: 1000;
}
*/
.dropdownItem {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    background-color: white;
}
  
.dropdownItem:hover {
    background-color: #f1f1f1cb;
    cursor: pointer;
}

.container {
    position: absolute;
    width: 315px;
    height: 440px;
    display: block;
}

#shiftUserContainer {
    top: 48px;
}

#shiftStartDropdown {
    margin-left: 0px;
    margin-right: 5px;
}

#shiftEndDropdown {
    margin-left: 5px;
}

.tripCapacityContainer {
    position: relative;
}

.tripCapacity {
    position: absolute;
    width: 60px;
    height: 16px;
    background-color: white;
    border-radius: 5px;
    bottom: 0;
    right: 0;
    margin-right: 2px;
    padding: 0.5px 0px 0px 2px;
    box-sizing: border-box;
    z-index: 10;
    border: 1px solid var(--font-dark-color);
}

.capacityDot {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    border: 1.5px solid var(--font-dark-color);
    box-sizing: border-box;
    display: inline-block;
    top: -2px;
    position: relative;
}

.capacityLabel {
    font-size: 10px;
    font-family: var(--font-body-name);
    color: var(--font-dark-color);
    display: inline-block;
    width: 14px;
    height: 10px;
    box-sizing: border-box;
    padding: 0px 0px 2px 0px;
    position: relative;
    top: -4px;
    font-weight: 600;
    margin-left: 2px;
    text-align: center;
    margin-left: 1px;
    margin-right: 3px;
}

.filterBox {
    min-width: 164px;
    height: 54px;
    border-radius: 5px;
    background-color: rgb(240, 240, 240);
    position: absolute;
    display: inline-flex;
    margin-left: 10px;
}

.filterDropdownBackground {
    padding: 0px 12px;
    font-size: 16px;
    font-family: var(--font-body-name);
    cursor: pointer;
    min-width: 120px;
    color: var(--font-dark-color);
    box-sizing: border-box;
}

.filterDropdownContent {
    display: none;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 10;
    border-radius: 5px;
    padding: 5px 0px;
    position: absolute;
    min-width: 120px;
}

.filterOptionNoPadding {
    padding: 0 !important;
}

.filterOption {
    width: 100%;
    height: 30px;
    font-size: 16px;
    padding: 4px 4px;
    box-sizing: border-box;
}

.filterOption:hover {
    background-color: rgb(230, 230, 230);
}

.filterSelectOption {
    cursor: pointer;
}

.filterBtn {
    min-width: 120px;
    height: 30px;
    margin: 0px 12px 0px 12px;
    border: 0;
    background: rgb(240, 240, 240);
    font-size: 16px;
    font-family: var(--font-body-name);
    color: var(--font-dark-color);
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    padding-left: 10px;
}

.filterBtn:hover {
    background-color: rgb(230, 230, 230);
}
.filterDropdown {
    display: inline-block;
    position: relative;
    padding-top: 12px;
}

.filterDropdown:hover .filterDropdownContent {
    display: block;
}

.filterDropdown:hover .filterBtn {
    background-color: rgb(230, 230, 230);
}

#filterCheckboxes {
    display: inline-block;
    position: relative;
    font-family: var(--font-body-name);
    color: var(--font-dark-color);
}

#filterButton {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
    background: white;
    user-select: none;
}

#filterPopup {
    display: none;
    position: absolute;
    min-width: 174px;
    padding: 5px 0px;
    background: white;
    border-radius: 5px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

#filterCheckboxes:hover #filterPopup {
    display: flex;
    flex-direction: column;
}

.filterOption {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.filterCheckbox {
    height: 20px;
    width: 20px;
    display: inline-block;
    margin: 17px 0px 17px 8px;
    cursor: pointer;
}

.filterLabel {
    height: 22px;
    font-size: 16px;
    font-family: var(--font-body-name);
    color: var(--font-dark-color);
    display: inline-block;
    position: relative;
    top: -4px;
}

#filterDivider {
    background-color: rgb(210, 210, 210);
    display: inline-block;
    position: relative;
    height: 30px;
    width: 1px;
    top: 12px;
}

#actionsDropdown {
    right: 0;
    position: absolute;
    margin-right: 15px;
}

#adminToolsBtn {
    display: none;
}

.adminBtn {
    display: inline-block;
    background-color: #ffffff;
    box-shadow: inset 0 0 0 2px var(--banner-button-bg-color) !important;
    color: var(--font-body-color-outside);
    padding: 16px;
    font-size: 16px;
    font-family: var(--font-body-name);
    border: none;
    cursor: pointer;
    height: 22px;
}

.adminBtn:hover {
    background-color: var(--banner-button-bg-color);
    color: #ffffff;
}

.adminBtnActive {
    background-color: var(--banner-button-bg-color);
    color: #ffffff;
}

#adminMainContainer {
    width: calc(100% - 40px);
    height: calc(100% - 54px);
    box-shadow: inset 0 0 0 2px var(--banner-button-bg-color) !important;
    padding: 10px;
    margin: 0px 10px;
}

#adminToolsContainer {
    display: none;
}

#adminTable {
    font-family: arial;
    font-size: 16px;
    line-height: 16px;
    border-spacing: 0px;
} 
#adminTable:first-child td {
    border-right: 1px solid;
    border-bottom: 1px solid;
    text-align: center;
    border-color: #e1e1e1;
}

td {
    font-size: 12px;
}

#idHeaderCell {
    padding: 5px 10px !important;
    text-align: center !important;
    border-left: 1px solid #c4c7c5;
    background: rgba(252, 252, 252);
}

#adminTable:first-child th {
    font-weight: 100;
    padding: 5px 20px 5px 3px;
    color: black;
    text-align: left;
    border-right: 1px solid #c4c7c5;
    border-top: 1px solid #c4c7c5;
    border-bottom: 3px solid #c4c7c5;
}

#adminHeaderEnd {
    border-left: 1px solid #c4c7c5;
}

.adminDataCell {
    border: 0;
    border-radius: 0px;
    font-size: 16px;
}

.cellSide {
    border-left: 1px solid;
    color: #484f48;
    background: rgba(252, 252, 252);
}

.adminDataCell:focus-visible {
    outline: 0;
}

.adminToolBtn {
    font-size: 13px;
    line-height: 13px;
    font-family: arial;
    color: white;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: var(--banner-button-bg-color);
    margin-left: 2px;
}

.adminToolBtn:hover {
    cursor: pointer;
    background-color: var(--standard-outside-hover-color);
}

.highlightSelect:hover {
    background-color: var(--banner-button-bg-color);
    color: var(--font-body-color-invert);
}

#myProfileBtn, #adminManageUserTypesBtn, #adminManageShiftsBtn, #adminManageTripsBtn {
    display: none;
}

.dateTimeLabel {
    display: inline-block;
    font-size: 18px;
    font-family: var(--font-body-name);
    line-height: 18px;
    padding: 5px;
    text-align: center;
}

#dateTimeLabel {
    margin-bottom: 4px;
}

#dateTimePicker {
    position: relative;
    width: 454px;
    box-shadow: inset 0 0 0 1px #888 !important;
    display: inline-block;
    vertical-align: top;
    margin-top: 10px;
    padding: 10px;
    border-radius: 2px;
}

#dateTimeWarning {
    margin-top: 18px;
    margin-bottom: 0px;
}

#shiftCoreContainer {
    position: relative;
    box-shadow: inset 0 0 0 1px #888 !important;
    padding: 10px;
    width: 502px;
    margin-top: 10px;
    display: inline-block;
    border-radius: 2px;
}

#createShiftNotesContainer {
    height: auto;
}

#createShiftFinaliseBtn {
    position: relative;
    display: block;
    margin-top: 10px;
    background-color: var(--banner-button-bg-color);
}

#createShiftMsg {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    margin-top: 5px;
}

#loginWarning {
    width: calc(100% - 40px);
    height: 30px;
    font-size: 16px;
    color: red;
    font-family: var(--font-body-name);
    text-align: left;
    display: none;
    margin: 0px 20px;
    border: 1px solid red;
    border-radius: 5px;
    padding: 3px 10px;
    box-sizing: border-box;
}

#createShiftPanelTimeDivider {
    margin: 0 5px;
    padding: 6px;
}

/* THEORETICALS */

#theoreticalBtn {
    margin-right: var(--standard-margin-medium);
}

#theoreticalPanelTimeDivider {
    margin: 0 5px;
    padding: 6px;
}

.standardPanelDatePicker {
    height: 28px;
    border-radius: var(--standard-margin-medium);
    width: calc(100% - 10px);
    border: 1px solid #333;
    padding: 0 5px;
    color: #333;
}

.staffCardCerts {
    margin-bottom: 5px;
}

/* Dropdown Styling */

.placeholder {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 14px;
}

.dropdown {
    position: relative;
    width: 100%;
}

.dropdownContainer {
    position: relative;
}

.dropdownLabel {
    display: block;
    margin-bottom: 4px;
    color: #333;
    font-weight: 500;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
}

.dropdownToggle {
    width: calc(100% - 18px);
    padding: 6px 8px;
    border: 1px solid #333;
    border-radius: 5px;
    font-size: 16px;
    background: white;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.dropdownToggle:hover {
    border-color: #b8c5d6;
}

.dropdownToggle.active {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.dropdownToggle .placeholder {
    color: #999;
}

.dropdownToggle .selected {
    color: #333;
}

.dropdownArrow {
    width: 4px;
    height: 4px;
    border-right: 2px solid #666;
    border-bottom: 2px solid #666;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    margin-left: 10px;
}

.dropdownToggle.active .dropdownArrow {
    transform: rotate(-135deg);
}

.dropdownMenu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid #e1e8ed;
    border-top: none;
    border-radius: 0 0 5px 5px;
    max-height: 600px;
    overflow: hidden;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.dropdownMenu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdownSearch {
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid #e1e8ed;
    width: 100%;
    font-size: 14px;
    outline: none;
    background: #f8f9fa;
}

.dropdownSearch:focus {
    background: white;
    border-bottom-color: var(--banner-button-bg-color);
}

.dropdownOptionsExtended {
    max-height: 400px !important;
}

.dropdownOptions {
    max-height: 200px;
    overflow-y: auto;
}

.dropdownOption {
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

.dropdownOption:hover {
    background-color: rgb(230, 230, 230);
}

.dropdownOption.highlighted {
    background-color: var(--banner-button-bg-color);
    color: white;
}

.dropdownOption:last-child {
    border-bottom: none;
}

.noResults {
    padding: 16px;
    text-align: center;
    color: #999;
    font-style: italic;
    font-family: Arial, Helvetica, sans-serif;
}

.userInfo {
    display: flex;
    flex-direction: column;
}

.userName {
    font-weight: 500;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

#shiftTypeDropdownContainer {
    margin-bottom: 8px;
}

/* Details Styling */

.detailsText {
    font-family: Arial, Helvetica, sans-serif;
}

.detailsSection {
    position: relative;
    display: inline-block;
    width: calc(50% - 2px);
    height: auto;
    vertical-align: top;
}

.detailsLabel {
    margin-bottom: 5px;
}

.detailsList {
    border: 1px solid rgb(200, 200, 200);
    border-radius: 5px;
}

.detailsList > div {
    position: relative;
    display: block;
    border-bottom: 1px solid rgb(200, 200, 200);
    padding: 5px;
    font-family: inherit;
}

.detailsList > :last-child {
    border-bottom: 0;
}

.detailsDropdown {
    margin-bottom: 4px;
}

#detailsDeleteShiftBtn {
    background-color: rgb(255, 73, 73);
    height: auto;
    padding: 5px;
    font-size: 16px;
    margin-top: 5px;
}

#detailsDeleteShiftBtn:hover {
    opacity: 0.9;
}

#deleteMsg {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    float: left;
    display: none;
    padding-top: 5px;
    margin-top: 5px;
    color: red;
}

.entryDelete {
    width: 16px;
    height: 16px;
    border: 1px solid #ff4757;
    border-radius: 4px;
    background-color: #ff4757;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    float: right;
}

.entryDelete:hover {
    background-color: #ff3838;
    transform: scale(1.1);
}

.entryDelete::before {
    content: '';
    width: 8px;
    height: 2px;
    background-color: white;
    border-radius: 1px;
}

/* TOOLTIP STYLING */

.tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.2s;
    white-space: nowrap;
    transform: translate(10px, -30px); /* Offset from cursor */
}

.tooltip.visible {
    opacity: 1;
}

.tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 20px;
    border: 5px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
}

#adminMainContentWrapper {
    padding: 20px;
    flex: 1;
}

.adminDropdownArrow {
    margin: 4px 2px;
    float: right;
}

.standardPanelEditIcon {
    cursor: pointer;
    padding-top: 4px;
}

.standardPanelEditIcon:hover {
    filter: invert(0.5);
}

#adminDetailsContainer {
    display: none;
    position: fixed;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 3000;
    box-sizing: border-box;
    left: 0;
    top: 0;
    overflow: auto;
}

#adminBackButton {
    display: flex;
    justify-content: center;
    cursor: pointer;
    transition: all 0.5s ease;
    color: white;
    border: 2px solid white;
    font-family: var(--font-header-name);
    font-size: large;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
}

#adminBackButton:hover {
    color: #24344c;
    background-color: white;
}

#adminBackButton svg path {
    stroke: white;
    transition: all 0.5s ease;
}

#adminBackButton:hover svg path {
    stroke: #24344c;
}

#adminBackButtonText {
    margin-left: 5px;
}

.adminIcon {
    display: inline-block;
    height: 24px;
    width: 24px;
    margin-right: 5px;
    padding: 2px;
    border-radius: 5px;
}

#createShiftTransferInfoSection {
    transition: all 0.3s ease;
    overflow: visible;
    height: 185.5px;
}

.block {
    display: block !important;
}

.standardPanelSectionDeactivated {
    height: 0px;
    border: 0;
    padding: 0;
    margin: 0;
}

/* ADMIN PANEL */

.adminCreateButton {
    position: relative;
    padding: 5px 10px 5px 10px;
    border-radius: 20px;
    border: 3px solid var(--banner-button-bg-color);
    color: var(--banner-button-bg-color);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.adminCreateButton:hover {
    background: var(--banner-button-bg-color);
    color: white;
}

.adminCardBody {
    margin-top: 5px;
}

.adminCardText {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(100% - 20px);
}

.adminContainerLabel {
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: bold;
}

.adminResultsLabel {
    color: rgb(120, 120, 120);
}

/* ADMIN USERS PANEL */

#adminUsersContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 5px;
    justify-content: center;
}

.adminUsersTripPermissionBtn {
    padding: 6px 12px;
    font-size: 12px;
    width: 80px;
    text-align: center;
    background-color: transparent;
    font-weight: normal;
    border: 1px solid;
    border-radius: 5px;
}

.adminUsersTripPermissionBtn:hover {
    opacity: 0.9;
    cursor: pointer;
}

#adminUsersDetailsConfirm {
    position: relative;
    float: right;
}

#adminUsersDetailsAllowedTrips {
    overflow: auto;
    height: 50vh;
}

#adminUsersDetailsTripsSearch {
    display: block;
    min-width: 50px !important;
    width: calc(100% - 22px);
}

#adminUsersDetailsTripsSearch:focus-visible {
    border: 1px solid var(--banner-button-bg-color);
    outline: none;
}

#adminEditUserMsg {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    float: left;
}

/* ADMIN CREATE USER PANEL */

.adminCreateUserInput {
    height: 30px;
    width: calc(100% - 8px);
    border-radius: 5px;
    background-color: white;
    border: 2px solid rgb(200, 200, 200);
    font-size: 16px;
    padding-left: 6px;
    margin-top: 4px;
}

.adminCreateUserInput:focus {
    outline: none !important;
    border-color: var(--banner-button-bg-color);
    box-shadow: 0 0 5px rgb(200, 200, 200);
}

.adminCreateUserWarning {
    margin-bottom: 0 !important;
    width: fit-content !important;
    font-size: 12px !important;
    float: right;
}

.adminCreateUserInputLabel {
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(40, 40, 40);
    font-weight: 600;
}

.adminCreateUserInputCheckbox {
    display: block;
    height: 20px;
    width: 20px;
    margin-left: 0;
}

#adminCreateUserSubmit {
    position: relative;
    float: right;
}

#adminUsersCreateButton:hover {
    filter: brightness(0.9);
    cursor: pointer;
}

/* ADMIN SHIFT TYPES PANELS */

#adminCreateShiftTypePanel, #adminCreateVesselPanel, #adminEditVesselPanel {
    display: none;
}

#adminEditShiftTypePanel {
    display: none;
}

#adminCreateShiftTypesSubmit {
    position: relative;
    float: right;
}

#adminEditShiftTypesSubmit {
    position: relative;
    float: right;
}

#adminCreateShiftTypesMsg {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    float: left;
}

#adminEditShiftTypesMsg {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    float: left;
}

/* ADMIN LOCATIONS PANEL */

#adminCreateLocationPanel {
    display: none;
}

#adminEditLocationPanel {
    display: none;
}

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

/* ADMIN CERTIFICATIONS PANEL */

#adminCreateCertPanel {
    display: none;
}

#adminEditCertPanel {
    display: none;
}

.adminInputTinyInfo {
    color: rgb(60, 60, 60);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

#adminCreateCertColor {
    width: calc(100% + 4px);
}

#adminEditCertColor {
    width: calc(100% + 4px);
}

.adminDeleteButton {
    color: red;
    border: 2px solid red;
    border-radius: 5px;
    padding: 2px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    cursor: pointer;
}

.adminDeleteButton:hover {
    color: white;
    background-color: red;
}

.adminReactivateButton {
    color: green;
    border: 2px solid green;
    border-radius: 5px;
    padding: 2px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    cursor: pointer;
}

.adminReactivateButton:hover {
    color: white;
    background-color: green;
}

.adminConfirmButton {
    color: white;
    background: var(--banner-button-bg-color);
    border: 2px solid var(--banner-button-bg-color);
    border-radius: 5px;
    padding: 2px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    cursor: pointer;
}

.adminConfirmButton:hover {
    opacity: 0.9;
}

#adminEditCertMsg {
    font-family: Arial, Helvetica, sans-serif;
}

.standardButtonDisabled {
    color: rgb(150, 150, 150) !important;
    border-color: rgb(150, 150, 150) !important;
}

/* CAPTAINS EMAIL */

#captainsEmailBox {
    white-space: pre;
    font-family: monospace;
    font-size: 16px;
    border: 1px solid black;
    border-radius: 5px;
    padding: 5px;
    margin-top: 5px;
    overflow-y: scroll;
}

/* ICON PICKER */

.iconPickerContainer {
    max-height: 300px;
    width: 100%;
    overflow-y: auto;
    border: 2px solid rgb(200, 200, 200);
    border-radius: 5px;
}

.iconEntry {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: rgb(160, 160, 160);
    margin: 2px;
    padding: 2px;
    border-radius: 5px;
    cursor: pointer;
}

.iconEntrySmall {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 2px;
    padding: 2px;
    border-radius: 5px;
    cursor: pointer;
}

.iconEntrySelected {
    background: var(--banner-button-bg-color);
}

/* CERTIFICATION PICKER */

.certPickerContainer {
    height: 300px;
    width: 100%;
    border: 1px solid rgb(200, 200, 200);
    border-radius: 2px;
}

.certEntryContainer {
    max-height: 225px;
    overflow-y: auto;
} 

.certEntry {
    display: flex;
    border: 1px solid rgb(200, 200, 200);
    border-radius: 5px;
    padding: 2px;
    margin: 5px;
    cursor: pointer;
}

.certEntryIcon {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: 2px;
    padding: 2px;
    border-radius: 5px;
}

.certEntryTitle {
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    margin-top: 6px;
    margin-left: 4px;
}

.selectedCertEntry {
    border: 1px solid var(--banner-button-bg-color);
    background: rgba(20, 148, 212, 0.3);
}

.certPickerLabel {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color:rgb(50, 50, 50);
    margin-left: 5px;
    margin-bottom: 5px;
}

.certPickerSearch {
    margin: 5px;
    width: calc(100% - 32px);
}

/* UNDER CONSTRUCTION */

.under-construction {
    display: flex;
    align-items: center;
    gap: 16px;

    padding: 20px 24px;
    border-radius: 10px;

    background-color: #f8fafc;
    border: 1px solid #e2e8f0;

    color: #334155;
    max-width: 600px;
    margin-top: 10px;
    font-family: 'Plus Jakarta Sans';
}

.under-construction .icon {
    font-size: 28px;
    opacity: 0.8;
}

.under-construction h3 {
    margin: 0 0 4px 0;
    font-size: 1rem;
    font-weight: 600;
}

.under-construction p {
    margin: 0;
    font-size: 0.9rem;
    color: #64748b;
}

#newPasswordSubtitle {
    padding: 20px;
    font-family: 'Source Sans Pro';
    font-size: 30px;
}

#detailsChangeLogContainer {
    position: relative;
    display: block;
    min-height: 70px;
    max-height: 300px;
    min-width: 200px;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    border-radius: 2px;
    border: 1px solid rgb(200, 200, 200);
    padding: 10px;
    box-sizing: border-box;
    margin-top: 5px;
}

.detailsChangelogEntry {
    border: 1px solid rgb(200, 200, 200);
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 10px;
    font-family: Arial, Helvetica, sans-serif;
}

.detailsChangelogEntryTitle {
    color: black;
    margin-bottom: 2px;
    font-size: medium;
}

.detailsChangelogEntryBody {
    color: rgb(40, 40, 40);
    font-size: small;
}