.header-container {
    margin: 5px 0 15px 0;
}
.header-logo-mode-menu {
    display: flex;
    justify-content: space-between;
    width: 100%;
    vertical-align: middle;
    align-items: center;
}
.header-logo {
    flex-grow: 1;
    white-space: nowrap;
    display: flex;
    align-items: center;
    margin-right: 15px;
}
.header-logo-img {
    width: 27px;
    height: 27px;
    vertical-align: middle;
    margin-right: 5px;
}
.header-logo-text, .header-logo-text-short {
    font-size: 30px;
    color: #FFE9B6;
    vertical-align: middle;
    text-shadow: 3px 3px rgb(0, 0, 0, 0.25);
}
.header-logo-text-beta {
    padding-left: 3px;
    vertical-align: super;
    font-size: 15px;
    font-style: italic;
}
.header-mode-menu {
    white-space: nowrap;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-mode {
    margin-right: 20px;
}
.header-menu {
    display: inline-block;
    vertical-align: middle;
}
.br {
    clear: both;
}
input.header-input-middle {
    border: none;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    background-color: #656565 !important;
    height: 30px;
    color: #F8F6F1;
    font-size: 14px;
    text-align: center;
}
input.date-selector:hover, input.time-selector:hover, select.header-select:hover {
    background-color: #767676;
}
button.header-button-left {
    border: none;
    border-radius: 20px 5px 5px 20px;
    -webkit-border-radius: 20px 5px 5px 20px;
    -moz-border-radius: 20px 5px 5px 20px;
    -khtml-border-radius: 20px 5px 5px 20px;
    background-color: #252525 !important;
    height: 30px;
    color: #F8F6F1;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    padding-right: 5px;
    padding-left: 5px;
}
button.header-button-right {
    border: none;
    border-radius: 5px 20px 20px 5px;
    -webkit-border-radius: 5px 20px 20px 5px;
    -moz-border-radius: 5px 20px 20px 5px;
    -khtml-border-radius: 5px 20px 20px 5px;
    background-color: #252525 !important;
    height: 30px;
    color: #F8F6F1;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    padding-right: 5px;
    padding-left: 5px;
}
button.header-button-middle {
    border: none;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    background-color: #252525 !important;
    height: 30px;
    color: #F8F6F1;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    padding-right: 5px;
    padding-left: 5px;
}
button.header-button-middle:hover, button.header-button-left:hover,  button.header-button-right:hover {
    background-color: #303030 !important;
}
button.header-button-middle:active, button.header-button-left:active,  button.header-button-right:active {
    background-color: #1d1d1d !important;
}
select.header-select {
    border: none;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -khtml-border-radius: 20px;
    background-color: #656565;
    height: 30px;
    color: #F8F6F1;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 5px 0 5px;
    max-width: 300px;
}
select.header-select:hover {
    background-color: #767676;
}
button.header-button-common {
    border: none;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -khtml-border-radius: 20px;
    background-color: #656565 !important;
    height: 30px;
    color: #F8F6F1;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline;
    padding: 0 10px 0 5px;
}
.header-button-common-left {
    border: none;
    border-radius: 20px 5px 5px 20px;
    -webkit-border-radius: 20px 5px 5px 20px;
    -moz-border-radius: 20px 5px 5px 20px;
    -khtml-border-radius: 20px 5px 5px 20px;
    background-color: #656565 !important;
    height: 30px;
    color: #F8F6F1;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline;
    padding: 0 10px 0 5px;
}
.header-button-common-right {
    border: none;
    border-radius: 5px 20px 20px 5px;
    -webkit-border-radius: 5px 20px 20px 5px;
    -moz-border-radius: 5px 20px 20px 5px;
    -khtml-border-radius: 5px 20px 20px 5px;
    background-color: #656565 !important;
    height: 30px;
    color: #F8F6F1;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline;
    padding: 0 10px 0 5px;
}
button.header-button-common:hover, button.header-button-common-left:hover, button.header-button-common-right:hover {
    background-color: #767676 !important;
}
.button-common-icon {
    width: 15px;
    height: 15px;
    display: inline-block;
    vertical-align: middle;
}
/* .button-common-text {
    width: 15px;
    height: 15px;
    vertical-align: middle;
} */
.header-button-icon {
    width: 10px;
    height: 10px;
    vertical-align: middle;
}
.header-button-text {
    font-size: 14px;
    color: #F8F6F1;
    vertical-align: middle;
}
.date-selector {
    width: 100px;
}
.time-selector {
    width: 70px;
}
.header-time {
    margin-right: 15px;
}
.header-switch-text {
    font-size: 14px;
    color: #F8F6F1;
    vertical-align: middle;
    padding-left: 30px;
    cursor: pointer;
}
.button-menu-icon {
    margin-left: 5px;
    margin-right: 5px;
}
.header-date-time, .header-geo, .header-endeavor {
    margin-top: 10px;
}
.header-date {
    padding-right: 15px;
}
.header-geo {
    display: inline-block;
    white-space: nowrap;
}
.header-geo .header-button-common-left {
    max-width: 200px;
}
.header-geo .header-button-common-right {
    margin-right: 15px;
}
.header-endeavor {
    display: inline-block;
}
.header-geo-date-time-endeavor {
    display: flex;
    justify-content: space-between;
    width: 100%;
    vertical-align: middle;
    align-items: center;
}
.header-date-time {
    flex-grow: 1;
    white-space: nowrap;
    display: flex;
    align-items: center;
}
.header-endeavor {
    white-space: nowrap;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-logo-text-short {
    display: none;
}


.arrow-left {
    content: url("../img/arrow-left.svg");
}
.arrow-right {
    content: url("../img/arrow-right.svg");
}
.map-pin {
    content: url("../img/map-pin.svg");
}
.map-pin {
    content: url("../img/map-pin.svg");
}
.map-lock {
    content: url("../img/map-lock.svg");
}
.menu-icon {
    content: url("../img/menu-icon.svg");
}
.logo-icon {
    content: url("../img/panchanga-logo.svg");
}
.top-error {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background-color: #D94848;
    color: #F8F6F1;
    font-size: 10px;
    z-index: 1000;
    text-align: center;
    padding-top: 5px;
}
.select-endeavor-active {
    background-color: #77874C !important;
    color: #FFF6DE !important;
}
.select-endeavor-active:hover {
    background-color: #99ac66 !important;
}
.button-utc {
    width: 100px;
}
.loader-utc {
    display: inline; 
    margin: 0; 
    height: 10px; 
    width: 10px;
}
.input-error {
    border: 1px solid #D94848 !important;
}