/*
sidebar
background:  #f8f8f8;
colour: #b3b3b3;
linka: #808080;
hover:
background: linear-gradient(90deg, rgba(0,122,225,1) 0%, rgba(159,134,255,1) 50%);

logobox
background: #262930;
body
background: #2f323a;
search input
border: #007ae1;
signout btn
background: #007ae1;
colour: #b3b3b3;
hover: white, text>black
*/

:root {
    --main-bright-green: #09b826;
    --main-bright-orange: #e2ac08;/*formerly #f0bb1f but CR with white was below 2:1*/
    --main-shadow-orange: #c69a20;
    --main-light-orange: #fff1da;
    --text-black: #212832;
    --text-white: #ffffff;
    --text-red: #df6951;
    --text-grey-green: #5e6282;
    --bg-off-orange: #fff8e8;
    --bg-shadow: #e2e2e2;
    --border-grey: #e6e6e6;
}

/*fonts and general stuff*/

@font-face {
    font-family: 'bioSans_regular';
    src: url('../fonts/bioSans/bioSans_Regular.woff2') format('woff2'), local('Verdana');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

h1, h2, h3, ol, ul, li, .ticketCalendarContainer, .eventBoardContainer, .circleStateContainer, #titlebar, .info_table_title, .info_table, .typeA, .typeB, .typeC, input, .ui-accordion, .ui-widget, .ticket_title, .messages, .error, label, .gpcOnOffSwitch, .roleSelectUIv3, #user-settings, .overflowContainer, .itemCount, legend, #floatElem, .wizardContainer {
    font-family: 'bioSans_regular';
    font-weight: normal;
    color: #272930;
}

html, #bodyBack, #body, #titlebar {
    background: #2f323a;
}

#body {
    margin-left: 25px;
    margin-right: 25px;
}

#bodyBack {
    height: calc(100vh - 91px)!important;
    padding-top: 0px;
    margin-top: 91px;
    margin-left: 250px;
    width: calc(100vw - 250px);
}

.workflow_actions {
    width: 95%;
}

#titlebar {
    height: 91px;
    box-shadow: none;
}

#titlebar.hasAlert {
    background: #f8f8f8;
}

/*proper menu sizing*/

#leftmenu, .main-menu-left, .gpc-menu, #leftmenu #collapseBtn {
    width: 250px;
}

#overflowContainer {
    margin-right: 0px;
}

#leftmenu div.menul2 {
    padding: 0px 0px 0px 30px;
}

.main-menu-left {
    background: #262930;
    border-radius: 0px;
}

#overflowContainer {
    border-right: 1px solid #262930;
}

.mainMenuArrow {
    color: #262930;
}

#infobox, .profile-menu, .profile-menu.userAlertDisabled {
    background: #262930;
}

#user-menu, .pageFilterDropdown {
    background: #f8f8f8;
}

#leftmenuDropdown {
    display: block!important;
    min-height: 100vh;
    background: #f8f8f8;
}

.menul1 {
    background: #f8f8f8;
}

.mainBoardContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.mainBoardContainer > div {
    margin-top: 1em;
    margin-right: 2em;
}

.mainBoardContainer .boardComponentContainer, .overviewComponent {
    width: 100%;
}

.mainBoardContainer .ticketListContainer, .mainBoardContainer .confitemListContainer  {
    flex-grow: 1;
}

.mainBoardButtons {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.mainBoardButton {
    width: 195px;
    height: 65px;
    border: 5px solid #E2E2E2;
    background: #ECECEC;
    box-shadow: inset 0px 4.01274px 4.01274px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    color: #ffffff;
    text-decoration: none;
    margin: 0.1em;
    padding: 15px 0 0 25px;
    background-repeat: no-repeat;
    background-image: linear-gradient(0deg, #262930, #262930);
    text-align: center;
    font-family: 'bioSans_regular';
    transition: border 0.2s ease-in-out;
}

.mainBoardButton:hover {
    color: #ffffff;
    text-decoration: none;
    border: 5px solid #cccccc;
    transition: border 0.2s ease-in-out;
}

.votingComponentContainer {
    width: 100%;
}

.boardComponentContainer {
    margin-right: 3em;
}

.eventBoardBody {
    border: double 3px transparent;
    border-radius: 15px;
    background-image: linear-gradient(#2b3849, #2b3849), /*fill*/
                      linear-gradient(to right, rgba(0,122,225,1), rgba(159,134,255,1));/*border*/
    background-origin: border-box;
    background-clip: content-box, border-box;
    box-shadow: inset 0px 0px 8px 4px #2b3849;
    min-height: 40em;
    max-height: 40em;
}

div.eventBoardBody {
    overflow: auto;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    max-width: 6px;
    width: 6px;
    max-height: 6px;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    max-width: 6px;
    background: rgba(0,0,0,0.2);
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(0,0,0,0.4);
}

::-webkit-scrollbar-button {
    height: 4px;
    width: 4px;
}

@-moz-document url-prefix() {
    * {
        scrollbar-width: thin;
        scrollbar-color: #262930 #c6c6c6;
    }
}

.searchAutoComplete::scrollbar-track {
    margin: 0px;
}

input[type=submit], input[type=button], input[type=reset], .cfgitem_title input[type="button"] {
    background: var(--main-bright-green);
    border: thin solid var(--main-bright-green);
    color: #f9f9f9;
    border-radius: 1em;
    padding: 0.5em 1em;
}
input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover, .cfgitem_title input[type="button"]:hover{
    background-color: var(--main-bright-green);
    background-image: radial-gradient(var(--main-bright-green), rgba(0,0,0,0.1));
    box-shadow: none;
    border-radius: 1em;
    padding: 0.5em 1em;
}

input[type="text"]:focus, select:focus, #globalSearchForm input.gpcInputB:focus {
    border-color: #007ae1;
}

.eventBoardItem, .ticketCalendarItem:last-child, .eventBoardItem:last-child {
    border-bottom: double 1px transparent;
    background-image: linear-gradient(#2b3849, #2b3849), /*fill*/
    linear-gradient(to right, rgba(0,122,225,0.4), rgba(159,134,255,0.4));/*border*/
    background-origin: border-box;
    background-clip: content-box, border-box;
}
.ticketCalendarDate, h1 {
    color: #b3b3b3;
}

.ticketCalendarTime {
    font-size: 75%;
    color: #666666;
    display: flex;
    width: 175px;
    position: relative;
}

.ticketCalendarName a{
    color: #cfd6de;
    font-size: 13.5pt;
}

.eventBoardHead h2 {
    color: #b3b3b3;
}

a.eventBoardHeadButton{
    color: rgba(0,122,225,1);
    border: none;
    font-size: 75%;
}

a.eventBoardHeadButton:hover {
    color: rgba(0,122,225,1);
}

.eventBoardHead {
    display: flex;
    justify-content: space-between;
    margin: 10px;
}

.eventBoardButton {
    padding-left: 0;
}

.eventBoardItemName {
    color: #cfd6de;
    text-align: right;
    padding-left: 1em;
    line-height: normal;
}

.eventBoardItemDate {
    text-align: right;
}

.eventBoardItemBody span {
    font-size: 90%;
    color: #b3b3b3;
}

.menul1 {
    background-position: 0 -30px;
}

.menul1:hover, .menul1.focused {
    background-color: #5a5a5a;
    background-position: 0 0;
}

#leftmenu div.menul2:hover {
    background: #2f323a;
    color: #ffffff;
}

.menul1.menuopenl1 {
    background-color: #5a5a5a;
    background-position: 0 0;
    color: #ffffff;
}

#globalSearchForm input.gpcInputB {
    border-radius: 15px;
    border: 1px solid #cccccc;
    color: #262930;
    text-align: center;
    height: 1.6em;
    margin-top: 0.5em;
    margin-left: 20px;
}

.eventBoardItemBody {
    height: 4em;
    max-width: 22em;
    width: 22em;
    padding: 2px 6px;
    overflow-y: hidden;
    line-height: 17px;
    cursor: pointer;
    background: #f8f8f8;
    border-radius: 10px;
    z-index: 1;
}

.eventBoardItemBody:hover span {
    color: #0095ff;
    transition: all 0.3s ease-in-out;
}

@media (hover: none) and (pointer: coarse) {
    .eventBoardItemBody span {
        color: #0095ff!important;
    }
}

div.eventBoardButton {
    background: url(../css/elements_flightrefund/svg/openAll.svg) no-repeat; /*placeholder icon*/
    min-width: 15px; /* Width of new image */
    height: 15px; /* Height of new image */
    padding-left: 10px; /* Equal to width of new image */
    font-size: 0px;
    position: relative;
    top: 50px;
    right: 10px;
    box-shadow: -5px -4px 5px 5px #2b3849;
    margin-left: auto;
}

.ticketCalendarDivider, .eventBoardDivider {
    height: 10px;
    width: 10px;
    border-radius: 10px;
    position: relative;
}

.eventBoardDivider {
    bottom: 6em;
    left: 13.25em;
}

.eventBoardItem {
    margin: -1.5em 0em 1em 0em;
    padding: 0em 0em 0em 0em;
    height: 5em;
}

.eventBoardItem:nth-child(1) {
    margin: 1em 0em 1em 0em;
    padding: 0em 0em 0em 0em;
    height: 5em;
}

.eventBoardItemHead {
    padding-right: 1em;
}

.eventBoardItemName {
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.eventBoardItemName a, .ticketCalendarName a {
    color: #cfd6de;
    font-size: 13.5pt;
    text-decoration: none;
}

.eventBoardItemName a:hover, .ticketCalendarName a:hover {
    color: rgba(0,122,225,1);
}

.eventBoardItemDate {
    padding-left: 0.7em;
    padding-right: 0.7em;
}

.ticketCalendarName {
    max-height: 4em;
    word-break: break-word;
    text-align: right;
    max-width: 15em;
}

.ticketCalendarDiv {
    float: left;
    width: 51%;
    padding: 10px;
}

.ticketCalendarDivTitle {
    width: 44%;
    text-align: right;
}

.ticketCalendarDivDivider {
    width: 5%;
    padding-top: 12px;
}

.ticketCalendarDivItem {
    border-bottom: double 1px #007AE1;
}

.ticketCalendarDivItem:after {
    content: "";
    display: table;
    clear: both;
}
/*============================================================================*/
/* SIDEBARACTION  */
/*============================================================================*/

.sidebar .menuitem.menulevel1 > .menulinkdiv.ui-state-active{
    margin: 0px;
}

.sidebar .menulinkdiv.menulevel1 {
    height: 100%;
    text-align: center;
    vertical-align: middle;
    padding: 0.4em;
    border: 3px solid #d4ac26;
    border-radius: 15px;
}

.confitemListActionMenu .sidebar .menulinkdiv.menulevel1 {
    padding: 2px;
}

.sidebar {
    background: rgb(218, 33, 40);
}

.sidebar .menuitem.menulevel1 .menuicon{
    overflow: auto;
    background-repeat: no-repeat;
    margin-top: 2px;
}
.sidebar .menulevel2.ui-state-active a, .sidebar .ui-state-active{
    color: #ffffff;
}

.sidebar .menulinkdiv{
    display: block;
}

.sidebar a, .gpc-menu .sidebarAction a, .gpc-menu .sidebarAction a:hover{
        color: black;
}


/*infobox---------------------------------------------------------------------------*/

#infobox input[type="submit"].infobox_button {
    width: 180px;
    border-radius: 6px;
}

.user-alert a {
    display: none;
}

.profile-menu, .profile-menu.userAlertDisabled {
    padding-left: 35px;
}

#infobox .infoboxItem {
    top: 5px;
    position: relative;
}

#infobox .infoboxItem span.infoboxValue a {
    color: #ffffff;
    pointer-events: none;
}

#infobox .infoboxItem span.infoboxValue a:hover, select.roleSelectUIv3:hover {
    color: #ffffff;
    border-color: var(--main-bright-orange);
    text-decoration: none;
}

select.roleSelectUIv3 {
    border: thin solid #b3b3b3;
    background-position-y: center;
    color: #cccccc;
    font-size: 100%;
    background: #262930 url(elements_flightrefund/svg/collapseDown.svg) no-repeat scroll 95% 50%;
    background-size: 20px 30px;
}

select.roleSelectUIv3.disabled {
    border: 1px solid #262930;
    color: #0095ff;
    font-size: 100%;
    background: #262930;
    background-size: 20px 30px;
    min-width: 140px;
    cursor: default;
}

select.roleSelectUIv3 option {
    color: #fff;
}

#infobox input[type="submit"].infobox_button {
    background: #262930;
    border: thin solid #cccccc;
    color: #fff;
    height: 1.75em;
}

#infobox input[type="submit"].infobox_button:hover {
    background: #262930;
    border: thin solid var(--main-bright-orange);
    color: #fff;
}
.menul1 a {
    position: initial;
}

.menu-divider {
    border-right: none;
}

.menul1 a, .menul2 a {
    color: #a6b3b3;
}

.menul1:last-child {
    border-bottom: thin solid #b8c2ce;
}

.menul1 a:hover, .menuopenl1 > a {
    color: #fff;
}

.menul2:hover {
    border-top: double 1px transparent;
}
.pwdRecovery > a{
    color:white;
    font-family: 'bioSans_regular';
}

/*-----------------searchbar results list---------------------*/
/*whole list/container*/
.searchAutoComplete.ui-widget.ui-widget-content.ui-autocomplete {
    border-radius: 15px;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75);
    border: solid 2px #cccccc;
    background: #ececec;
}

@-moz-document url-prefix() {
    .searchAutoComplete.ui-widget.ui-widget-content.ui-autocomplete {
        border-radius: 0px;
    }
}

/*list scrollbar*/
.ui-widget.ui-widget-content.ui-autocomplete::-webkit-scrollbar {
    width: 4px;
}

.ui-widget.ui-widget-content.ui-autocomplete::-webkit-scrollbar-button {
    height: 10px;
}

.ui-widget.ui-widget-content.ui-autocomplete::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.2);
    margin: 1px 0px;
    border-radius: 5px;
}
.ui-widget.ui-widget-content.ui-autocomplete::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.4);
    border-radius: 5px;
}
.ui-widget.ui-widget-content.ui-autocomplete::-webkit-scrollbar-thumb:hover {
    background: #35373b;
}

/*links in items*/
li.autocompleteList > a.listItem {
    color: #000000;
}

li.autocompleteList > a.listItem.ui-state-active, li.autocompleteList > a.listItem:hover {
    background: #b3b3b3;
    color: #000000;
    text-decoration: none;
}

li.autocompleteList > a.listItem {
    font-family: "bioSans_regular";
}

li.autocompleteList > a.listItem::before {
    font-family: "GPC";
}

.eventBoardItemHead {
    min-width: 14em;
    max-width: 14em;
}

.eventBoardItem {
    max-width: 40em;
}

img.menu-logo {
    background: url(../css/elements_flightrefund/flightrefund_logo.svg) no-repeat;
    margin: -84px 0px 0px -337px;
    height: 63px;
    max-width: 45px;
    padding: 130px 461px;
    transform: scale(0.2);
}

.mainMenuArrow {
    display: none;
}

/*------- gpc filter -------*/

#pageFilter {
    top: 22px;
    right: 300px;
    z-index: 4010;
}

.gpc-filter {
    top: 65px;
    border-radius: 15px;
    z-index: 4000;
}

.pageFilterDate {
    color: #7d7d7d;
}

.pageFilterDate:hover {
    color: #0095FF;
}

select.gpcCalendar {
    background: #f5f5f5 url("elements_flightrefund/svg/calendarSelect.svg") no-repeat scroll right center;
}

.main-menu-left {
    height: 92px;
}

.profile-menu, .profile-menu.userAlertDisabled {
    height: 95px;
}

#user-menu, .profile-menu, .profile-menu.userAlertDisabled {
    border-radius: 0 0 0 15px;
}

#toolbarMenu {
    right: 450px;
}

#toolbarMenu .menuicon {
    display: inline-block;
    width: 38px;
    height: 38px;
    background-repeat: no-repeat;
    background-size: contain;
    margin-top: -5px;
    padding-top: 5px;
}

ul#toolbarMenu {
    height: 0px;
}
ul#toolbarMenu li {
    display: none;
}

ul#toolbarMenu.toolBarSwapClass {
    height: 55px;
}

ul#toolbarMenu.toolBarSwapClass li {
    display: grid;
}

ul.pageFilterEnabled {
    z-index: 4010;
}

#search-execute {
    right: 300px;
    left: unset;
    top: 16px;
    z-index: 1100;
}

.typeA th .inputIcon, .typeA thead td .inputIcon {
    background-color: #bfbfbf;
    border: 2px solid ffffff;
    color: #262930;
    cursor: pointer;
}

.typeA th .inputIcon span.icon-advanced-filter, .typeA thead td .inputIcon span.icon-advanced-filter {
    display: block;
}

/*new index containers----------------------------------------------------------------------------------*/

.ticketCalendarContainer, .eventBoardContainer {
    min-width: 38em;
}

.eventBoardItem {
    max-width: 38em;
    min-width: 38em;
}

.ticketCalendarItem {
    align-content: center;
    margin: 1em 0em 1em 0em;
    padding: 0em 0em 0em 0em;
    height: 5em;
    border-bottom: double 1px transparent;
    background-image: linear-gradient(#2b3849, #2b3849), /*fill*/
                      linear-gradient(to right, rgba(0,122,225,0.4), rgba(159,134,255,0.4));/*border*/
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.ticketCalendarDate {
    display: inline-block;
    font-size: 13.5pt;
    text-align: left;
    width: 13em;
    min-width: 13em;
    margin-left: 0.3em;
    padding-top: 0.01em;
}


/*popup window resizable----------------------------------------------------------*/
div.ui-dialog {
    border: double 3px transparent;
    border-radius: 15px;
}

div.ui-dialog-titlebar {
    border-radius: 10px 10px 0px 0px!important;
}

.ui-dialog .ui-dialog-title {
    margin: 0.3em 1em;
    width: calc(100% - 100px);
}

.eventBoardBody {
    overflow: hidden;
}

.menul1 > .menuitem {
    display: inline-block;
    height: 100%;
    width: 100%;
    padding-left: 3em;
}

#leftmenu .menuicon {
    position: absolute;
    top: 5px;
    left: 7px;
    width: 25px;
    height: 25px;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.menuopenl1 span.menuItemArrow {
    transform: rotate(180deg);
}

button {
    background: #0095ff;
    border: thin solid #0095ff;
}

button:hover {
    background: #0095ff;
    box-shadow: none;
}

/*ICONS MENU*/

.icon-confirmActions {
     background-image: url(elements_flightrefund/svg/btnConfirm.svg);
     background-size: 100%;
}
.icon-administrator {
    background-image: url(elements_flightrefund/menu_icon/administration_icon.svg);
}
.icon-configuration {
    background-image: url(elements_flightrefund/menu_icon/configuration_icon.svg);
}
.icon-dashboard {
    background-image: url(elements_flightrefund/menu_icon/dashboard_icon.svg);
}
.icon-claims {
    background-image: url(elements_flightrefund/menu_icon/claims_icon.svg);
}
.icon-appManagement {
    background-image: url(elements_flightrefund/menu_icon/appManagement_icon.svg);
}
.icon-communication {
    background-image: url(elements_flightrefund/menu_icon/communication_icon.svg);
}
.icon-activity {
    background-image: url(elements_flightrefund/menu_icon/activity_icon.svg);
}
.icon-administrace {
    background-image: url(elements_flightrefund/menu_icon/administrace_icon.svg);
}
.icon-newClaim {
    background-image: url(elements_flightrefund/menu_icon/newClaim_icon.svg);
}
.icon-password {
    background-image: url(elements_flightrefund/menu_icon/password_icon.svg);
}
.icon-archive {
    background-image: url(elements_flightrefund/menu_icon/archive_icon.svg);
}
/*ICONS TOOLBAR */
.icon-message {
    background-image: url(elements_flightrefund/svg/message_icon.svg);
}
.icon-actions {
    background-image: url(elements_flightrefund/svg/actions_icon.svg);
}
.icon-refresh {
    background-image: url(elements_flightrefund/svg/refresh_icon.svg);
}
.icon-back {
    background-image: url(elements_flightrefund/svg/back_icon.svg);
}


/*TICKET CONFITEM WIZARDS---------------------------------------------------------------------------------------------------*/

.filterGridContainer {
    height: unset!important;
    display: flex;
    max-width: 70em;
    flex-wrap: wrap;
    justify-content: left;
}
/*1,2,3*/
.filterContainer.filterCreate, .filterContainer.filterLoadFromFile, .filterContainer.filterLoadFromConfig {
    width: 20em;
    margin: 10px 2%;
    height: auto;
}
/*2*/
.filterContainer.filterLoadFromFile {
    position: unset;
    top: unset;
    right: unset;
}
/*3*/
.filterContainer.filterLoadFromConfig {
    position: unset;
    top: unset;
    right: unset;
}

.filterContainer.filterCreate input[type=submit], .filterContainer.filterLoadFromFile input[type=submit], .filterContainer.filterLoadFromConfig input[type=submit], .filterContainer.filterCreate input[type=button], .filterContainer.filterLoadFromFile input[type=button], .filterContainer.filterLoadFromConfig input[type=button], .saveFilterContainer input[type=submit] {
    margin: 0.5em auto;
    display: block;
}

.filterContainer table select {
    width: -webkit-fill-available;
}

div.currentFilterContainer, div.displayParamsContainer select, div.displayParamsContainer input {
    width: fit-content;
    margin: 5px 2%;
}

#searchingForm input[name="search"], #searchingForm input[name="export"] {
    width: fit-content;
    margin: 5px 2%;
}

div.currentFilterContainer table.andCond, div.currentFilterContainer table.orCond {
    background: #f1f1f1;
    margin: 2em auto;
    border: 1px solid #2f323a;
    box-shadow: 0px 0px 5px 0px #2f323a;
}

table.andCond th input[type=submit], table.orCond th input[type=submit] {
    padding: 0.2em 0.8em;
}

table.andCond tr:nth-child(6) td, table.orCond tr:nth-child(6) td {
    display: flex;
}

div.displayParamsContainer, div.saveFilterContainer {
    width: fit-content;
    margin: 25px auto;
}

div.displayParamsSaveFilterContainer {
    height: unset!important;
    display: flex;
    max-width: 100em;
    flex-wrap: wrap;
    justify-content: left;
}

div.displayParamsSaveFilterContainer table {
    margin-left: 2em;
    margin-right: 2em;
    height: 160px;
    width: 320px;
}

div.displayParamsSaveFilterContainer table tr:nth-child(1), div.viewBoxSaveFilterContainer table tr:nth-child(1) {
    height: 2em;
}

div.displayParamsSaveFilterContainer table tr:last-child, div.viewBoxSaveFilterContainer table tr:last-child {
    height: min-content;
}

div.displayParamsSaveFilterContainer table input[type=submit], div.viewBoxSaveFilterContainer table input[type=submit] {
    margin: 0.5em auto;
}

div.displayParamsSaveFilterContainer table #filterNameInput, div.viewBoxSaveFilterContainer table #filterNameInput {
    width: -webkit-fill-available;
}

div.filterCreate table, div.filterLoadFromFile table, div.filterLoadFromConfig table {
    margin: 1em 1em;
    width: -webkit-fill-available;
    height: 210px;
}

div.filterCreate table tbody tr:nth-child(3), div.filterLoadFromFile table tbody tr:nth-child(1), div.filterLoadFromConfig table tbody tr:nth-child(1) {
    height: 2em;
}

div.filterCreate table tr:last-child, div.filterLoadFromFile table tr:last-child, div.filterLoadFromConfig table tr:last-child {
    height: min-content;
}

div.displayParamsContainer select {
    width: 35em;
}

table.currentFilter {
    margin-left: 0%!important;
    margin-right: 0%!important;
    width: -webkit-fill-available!important;
}

.viewBoxSaveFilterContainer {
    display: flex;
    max-width: 80em;
    flex-wrap: wrap;
    justify-content: center;
}

div.viewBoxSaveFilterContainer table {
    margin-left: 2em;
    margin-right: 2em;
    height: 160px;
    width: 310px;
}

.filterParamView {
    width: 26em;
    margin: 0 3em;
}
.breadcrumb{
    height: 0px;
}

.filterLinkView {
    width: 22em;
    margin: 0 3em;
}

.filterParamView input[name="clearDisplayParamIds"], .filterLinkView input[name="clearDisplayLinkIds"] {
    margin: 5px auto;
}

#selectDisplayParams, #selectDisplayLinks, #selectTicketCategory {
    margin: 5px auto;
    min-width: 100%;
}

.filterGridContainer .filterLoadFromFile input[name="uploadedFile"] {
    color: #2196f3;
}

div.foldbody {
    width: 100%;
}

div.foldbody.detail {
    width: 95%;
}

.foldtitle a.fold {
    color: #007ae1;
}

.foldtitle a.fold:hover {
    color: #262930;
}

div.ui-dialog.desktopWindow div.ui-dialog-content iframe {
    border-radius: 0px 0px 10px 10px;
}

div.ui-dialog.desktopWindow div.ui-dialog-content table select {
    margin: 0em 0.2em;
}

div.ui-dialog body.windowed {
    background-color: #2f323a;
}

/*new circular buttons in titlebar---------------------------------------------------*/

#nav > a {
    background-color: #fefefe;
}

.circleStateContainer {
    background: transparent;
    width: 100px;
    height: 80px;
    position: absolute;
    padding: 0;
    margin: 0;
    z-index: 1001;
    display: flex;
    justify-content: center;
    top: 5px;
    line-height: normal;
}

#nav > ul > li {
    background: transparent;
    display: flex;
    justify-content: center;
    top: 10px;
}

.circleState {
    width: 45px;
    height: 45px;
    border-radius: 25px;
    border: double 2px transparent;
    background-image: linear-gradient(#2f323a, #2f323a), /*fill*/
                      linear-gradient(to right, rgba(0,122,225,1), rgba(159,134,255,1));/*border*/
    background-origin: border-box;
    background-clip: content-box, border-box;
    display: table;
}

#nav > ul > li > a, #nav > ul > li > a:active {
    width: 55px!important;
    height: 55px;
    border-radius: 30px;
    padding: 1px;
    border: 3px solid #cfd6de;
    background: #ffffff;
    /*background-clip: content-box, border-box;*/
}

#nav > ul > li > a > span {
    color: transparent;
    position: relative;
    top: 10px;
    background-position: center;
    transition: color 0.2s ease-in-out, filter 0.2s ease-in-out;
}

#nav > a > span.burgerMenu {
    transition: filter 0.2s ease-in-out;
}

#nav > ul > li > a:active > span, #nav > ul > li > a:hover > span {
    color: transparent;
}

#nav > ul > li.menuitem_toolbarBack > a:active > span, #nav > ul > li.menuitem_toolbarBack > a:hover > span, #nav > a:active > span.burgerMenu, #nav > a:hover > span.burgerMenu {
     color: #b3b3b3;
}

.circleStateTitle {
    width: 90px;
}

/*alert functionality*/
@keyframes alertAnimation {
    0% {
        box-shadow: 0px 0px 0px 0px #262930;
    }
    50% {
        box-shadow: 0px 0px 10px 4px #ff0000;
    }
    100% {
        box-shadow: 0px 0px 0px 0px #262930;
    }
}

.circleState.hasAlert {
    background-image: linear-gradient(#f8f8f8, #f8f8f8), /*fill*/ linear-gradient(to right, #cc0000, #ff6666);
    animation-duration: 1000ms;
    animation-name: alertAnimation;
    animation-iteration-count: 1;
}

#nav li {
    position: relative;
    width: 100px;
    height: 70px;
}

#nav li a {
    display: table-cell;
    color: #b3b3b3;
}

.circleStateLink {
    height: 30px;
    width: 45px;
    border-radius: 25px;
    color: #b3b3b3;
    font-size: 150%;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

.circleStateLink:hover {
    color: rgba(159,134,255,1);
    background: #2b3849;
}

.circleStateContainer span {
    position: absolute;
    top: 50px;
    color: #b3b3b3;
    font-size: 0.9em;
    text-align: center;
}

#nav > ul {
    top: 6px;
    left: 230px;
}

a {
   color: #007ae1;
}
div.workflow_action_title {
  background-color: #007ae1;
}
table.typeA {
    border: none;
}
.typeA th, .typeA thead td {
    background: #d4ac26;
    font-weight: lighter;
}
table.typeC.workflow_action th {
    background: #f8f8f8;
    color: #4d4d4d;
}
table.typeC.workflow_action tr:nth-child(even) td {
    background: #2f323a;
}
table.typeC.workflow_action td {
    background: #2f323a;
}
table.typeC {
    border: double 4px transparent;
    border-radius: 15px;
    background-image: linear-gradient(#0095ff, #0095ff), /*fill*/
                      linear-gradient(to right, rgba(0,122,225,1), rgba(0,122,225,1));/*border*/
    background-origin: border-box;
    background-clip: content-box, border-box;
}
input[type=text]{
    border: thin solid #ccc;
}
textarea {
    color: #007ae1;
}
table td {
    color: #2f323a;
}
.cfgitem_title {
    background: #2f323a;
}
table.typeC.workflow_action tbody tr:hover td {
    background: #2f323a;
}
.required {
     background-color: #ffffff!important;
     border: 2px solid #0095ff;
}
select, .inputIcon, .lovButton label {
    color: #2f323a;
}
.lovButton label[for="notNeedVerify_VERIFY"]{
    font-size: 10pt;
    font-weight: bold;
}
input {
    color: black;
}
select > option {
    color: #2f323a;
}
select.decorated > option:hover {
    background: red!important;
}
.workflow_rq_item_required .file-preview {
    background-color: var(--text-white)!important;
}
div.multiSelectionFilter {
    color: white;
}
.ticket_title {
    background: linear-gradient(216deg, rgba(159,134,255,1) 0%, rgba(0,122,225,1) 50%);
}
input[type=text]:disabled, input[type=password]:disabled, input[type=tel]:disabled, input[type=email]:disabled, input[type=url]:disabled, input[type=week]:disabled, input[type=search]:disabled, input[type=number]:disabled, input[type=month]:disabled, input[type=datetime-local]:disabled, input[type=date]:disabled, textarea:disabled, select:disabled, select:disabled option {
    border: none;
    background: rgba(200,200,200,0.5);
    padding-left: 0px;
    color: #ffffff;
    width: auto;
    min-width: 200px;
}

h2, h3, div.info_table_title {
    color: #b3b3b3;
}

div.menul1 div.menul2 span {
    display: none!important;
}

/* NEW MENU OVERLOADS */
#gpc-menu {
    background: #262930;
}

#gpc-menu > div.main-menu-left > a {
    display: block;
    height: 91px;
}

#overflowContainer {
    display: block;
    height: calc(100vh - 140px);
    margin-top: 0px;
}

#leftmenuDropdown {
    min-height: unset;
    margin-top: 0px;
    box-shadow: none;
    border-bottom: thin solid #33373F;
    border-radius: 0px;
}

#overflowContainer::-webkit-scrollbar {
    max-width: 3px;
    max-height: 8px;
}

#overflowContainer::-webkit-scrollbar-track {
    border-radius: 10px;
    max-width: 3px;
    background: rgba(255,255,255,0.15);
}

#overflowContainer::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(255,255,255,0.2);
}

#overflowContainer::-webkit-scrollbar-button {
    height: 10px;
}

/*TABLES STYLE SHEET*/

/*global position*/
table.typeA, .cfgitem, .workflow_actions.ui-accordion {
    width: 100%;
}

div.itemCount, div.pagerCtl {
    right: 5%;
}

body {
    line-height: 1.8em;
}

body.windowed #mainblock #body {
    line-height: 1.4em;
}

a {
   color: #007ae1;
}

div.workflow_action_title, .ui-accordion .ui-accordion-header {
    background: #262930;
    border: 1px solid #e2e2e2;
    border-bottom: none;
    box-shadow: 0px 0px 2px 0px #cccccc;
    color: #f2f2f2!important;
    font-size: 1.2em;
    font-family: 'bioSans_regular';
}

.ui-accordion .ui-accordion-header.workflow_action_title {
    margin-top: 0.5em;
}

table.typeA {
    border: none;
}


table.typeC.workflow_action th {
    background: #ececec;
}

table.typeC.workflow_action tr:nth-child(even) td {
    background: #ececec;
}

table.typeA td {
    border-left: thin solid #cccccc;
}

table.typeA tr:nth-child(even) > td {
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
}

table.typeC.workflow_action td {
    background: #ececec;
}

table.typeC {
    border-radius: 15px;
    background: #ececec;
    border: 1px solid #e2e2e2;
    box-shadow: 0px 2px 2px 0px #cccccc;
    border-top: none;
}

form.ui-widget-content.workflow_ac_addDecision {
    border-radius: 15px!important;
    border: 1px solid #cccccc;
}

form.ui-widget-content.workflow_ac_addDecision table tr:nth-child(1) td {
    font-size: 1.1em;
    font-weight: bold;
    color: #4d4d4d;
    padding: 1.5em;
}

select {
    background: #ffffff url(elements_flightrefund/svg/collapseDown.svg) no-repeat scroll right center;
    background-size: 20px 30px;
}

.autocomplete-select-toggle {
    background: #0095ff url(elements_flightrefund/svg/collapseDown_white.svg) no-repeat scroll center center;
    background-size: 20px 30px;
    padding: 0px 29px 1px 0px;
    background-position-x: 6px;
    position: relative;
    top: 1px;
    box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.4);
    border-radius: 6px;
}

label {
    color: black;
}

table td, table.typeA tr:nth-child(even) > td {
    background: #ececec;
    color: #4d4d4d;
    transition: all 0.2s ease-in-out;
}

form tbody tr:hover {
    transition: all 0.2s ease-in-out;
}

form tbody tr:hover th, form tbody tr:hover td, table:not(.settingsPersonalInfo).typeA tbody tr:not(.detailOpenRow):hover td, table.typeC tbody tr:hover td {
    background: #f2f2f2!important;
    transition: all 0.2s ease-in-out;
}

form table.typeC tbody tr:hover th {
    background: #d9d9d9!important;
}

.login-body tbody tr:hover th, .login-body tbody tr:hover td {
    background: inherit!important;
    transform: none;
}

table.typeC.workflow_action tbody tr:hover td {
    background: #2f323a;
}

select, .inputIcon, .lovButton label {
    color: #2f323a;
}

input {
    color: black;
}

select > option {
    color: #2f323a;
}

legend {
   color: #cdcdcd;
}

textarea {
    border: 1px solid #b3b3b3;
    color: #4d4d4d;
    height: 3em;
    min-height: 3em;
    background: #f8f8f8;
}

/*fixed tablesorter display*/
th.tablesorter-header .tablefilterExpand {
    width: 150px;
}

.tableHeaderInputContainer .tableHeaderFilterDelete {
    top: 6px;
}

/*custom filepreview container*/
.file-preview {
    border: 1px solid #b3b3b3!important;
}
.file-preview .file-drop-zone {
    margin: 0px;
}
tr.workflow_rq_item .file-preview .file-drop-zone.clickable:hover {
    border: 1px dashed var(--main-bright-orange)!important;
}
.file-preview .file-drop-zone .file-drop-zone-title {
    font-size: 1em;
}
.file-preview .file-drop-zone .krajee-default.file-preview-frame .kv-file-content {
    width: 150px;
    height: 50px;
    margin: auto;
}
/*fileinput preview container sizing and scrollbar*/
.kv-file-content .kv-preview-data {
    width: 100%!important;
    height: 100%!important;
    /*add scrollbar*/
}
.kv-file-content .kv-preview-data::webkit-scrollbar {
    max-width: 1px;
}
.kv-file-content .kv-preview-data::-webkit-scrollbar-button {
    height: 4px;
}
.kv-file-content .kv-preview-data::-webkit-scrollbar-thumb {
    border-radius: 10px;
    min-height: 4px;
    background: rgba(0,0,0,0.4);
}
.kv-file-content .kv-preview-data::-webkit-scrollbar-track {
    border-radius: 10px;
    max-width: 1px;
    background: rgba(0,0,0,0.2);
    margin-bottom: 0px;
    margin-left: 0px;
}
.file-preview .krajee-default .file-drag-handle, .file-preview .krajee-default .file-upload-indicator {
    margin-top: 0px;
}
.file-preview .krajee-default .file-caption-info, .file-preview .krajee-default .file-size-info {
    width: 150px;
    height: 20px;
}
.file-preview .krajee-default .file-footer-caption {
    padding-top: 5px;
    margin-bottom: 5px;
}
.file-preview .krajee-default.file-preview-frame .file-thumbnail-footer {
    height: 40px;
}
.file-preview .krajee-default.file-preview-frame {
    height: 110px;
}

div.multiSelectionFilter {
    color: #4d4d4d;
}

.ticket_title {
    background: linear-gradient(216deg, rgba(159,134,255,1) 0%, rgba(0,122,225,1) 50%);
}

.cfgitem .links table, .cfgitem form table.sortTable.info_table.typeA {
    width: 100%;
}

.cfgitem div.itemCount {
    right: 0%;
}

.menu-divider {
    display: none;
}

#infobox input[type="submit"].infobox_button {
    top: 5px;
    position: relative;
    height: 26px;
}

/*gitlab-like left menu-----------------------------------------------------------*/

#overflowContainer.menuToggleMin {/*add custom scrollbar*/
    width: 60px;
}

#overflowContainer.menuToggleMin .menul1:not(#floatElem) a {
    visibility: hidden;
}

#leftmenu .menul1:first-child {
    max-height: 36px;
    min-height: 36px;
    padding-top: 0px;
}

#leftmenu .menul1:first-child > a {
    top: 0px;
    padding-top: 0px;
}

#floatElem {
    z-index: 10000;
    min-width: 200px;
    width: auto;
    position: absolute!important;
    left: 70px;
    background: #f8f8f8;
    color: #262930;
}

#floatElem.menul1 > a.menuitem, #floatElem .menul2 > a.menuitem {
    color: #b3b3b3;
    padding-left: 0.8em;
    padding-right: 0.8em;
    display: flex;
    align-items: center;
    text-align: left;
    line-height: 1.5em;
}

#floatElem .menul2 > a.menuitem {
    height: 100%;
    align-items: center;
}

#floatElem.menul1 > a.menuitem {
    padding-left: 3.5em;
}

#floatElem.menul1 > a.menuitem {
    height: 48px;
}

#leftmenu #floatElem div.menul2 {
    padding: 0.2em 0.4em 0.2em 1em;
    overflow: hidden;
}

#floatElem.menul1:hover > a.menuitem, #floatElem .menul2:hover > a.menuitem, #floatElem.menul1 > a.menuitem {
    color: #f8f8f8;
    text-decoration: none;
}

#floatElem.menul1:hover, #floatElem.menul1 {
    background-color: #262930;
    box-shadow: rgba(0,0,0,0.5) 0px 5px 15px;
}

#floatElem .menuItemArrow {
    top: 0.3em;
}

.menul1 a, .menul2 a {
    color: #262930;
}

.menul1.menuopenl1 > a {
    color: #ffffff;
}

/*#collapseBtn {
    width: 50px;
    height: 50px;
    z-index: 1000;
    bottom: 130px;
    cursor: pointer;
}*/

#collapseBtn {
    position: fixed!important;
    height: 48px;
    min-height: 48px;
    z-index: 1000;
    bottom: 0px;
    cursor: pointer;
}

#collapseIcon {
    position: absolute;
    top: 18px;
    left: 10px;
    filter: grayscale(1) brightness(1.5);
    transform: rotate(90deg);
    transition: transform ease-in-out 0.3s;
}

#collapseBtn #collapseLink span.icon-collapse {
    content: url(../css/elements_flightrefund/svg/collapseDown.svg);
}

#collapseLink {
    height: 100%;
}

#collapseLink > a {
    display: inline-block;
    height: 100%;
    padding: 1em;
}

#collapseLink:hover a {
    color: #ffffff;
}

#collapseLink:hover #collapseIcon {
    filter: grayscale(1) brightness(2.5);
}

/*popups*/
body.windowed #body > .ticket_title, body.windowed #body > .cfgitem_info_wrapper, body.windowed table.typeA, body.windowed .cfgitem, body.windowed .workflow_actions.ui-accordion {
    width: 100%;
}

.cfgitem_info_wrapper > table.typeC {
    margin: 0.4em;
}

.cfgitem_info_wrapper {
    padding: 0;
}

.ui-dialog .ui-dialog-content {
    padding: 0.5em;
}

table.typeA td.detailOpen table.typeC {
    border-left: double 3px transparent;
}

/*CONFITEM WIZ*/

.filterContainer.filterLoadFromFile {
    right: 130px;
}

.filterContainer.filterLoadFromConfig {
    right: 105px;
}

#body > .ticket_title, #body > .cfgitem_info_wrapper {
    width: 100%;
    background: #ececec;
    color: #4d4d4d;
    font-weight: bold;
    border: 1px solid #e2e2e2;
    box-shadow: 0px 0px 2px 0px #cccccc;
}

#body > .ticket_title {
    font-size: 1.2em;
    border-bottom: none;
    box-shadow: 0px 0px 2px 0px #cccccc;
}

#body > .cfgitem_info_wrapper {
    border-top: none;
}

/*--------alert reports----------*/

/*firefox polyfill*/
@-moz-document url-prefix() {
    .alertIcon {
        left: 1.5em;
    }

    .alertIcon.indexIcon {
        left: 0em;
    }
}

.alertParamIcon {
    display: inline-block;
    margin: 0em 0.5em -0.2em;
}

.tileParam .alertParamIcon {
    margin: 0em 0.5em;
}

.alertParamValue {
    display: inline-block;
}

.alertParamValue.textOnly {
    padding: 0em 1em;
}

.alertBody {
    display: block;
}

.alertParams {
    float: left;
    margin: 0.5em 0em 0em 1em;
}
.alertDescription {
    line-height: 1.6;
    overflow: hidden;
    padding: 0.5em 1em 1em 1em;
    min-width: 250px;
    max-width: calc(100% - 215px);
    font-size: 1.05em;
    color: #4d4d4d;
    margin: 20px 20px 0px;
    max-height: 200px;
    overflow: auto;
}
/*adminModel---------------------------------------------------*/

.adminModelContainer {
    height: unset!important;
    display: flex;
    max-width: 100%;
    margin: auto;
    flex-wrap: wrap;
}

.adminModelContainer table.info_table.typeA {
    margin: 1em 1em;
    width: min-content;
    height: 350px;
}

.adminModelContainer form {
    width: min-content;
}

.adminModelContainer table.info_table.typeA tbody tr:nth-child(1) {
    height: 2em;
}

.adminModelContainer form table.info_table.typeA tbody tr:last-child, .adminModelContainer form:last-child table.info_table.typeA tbody tr:nth-child(4) {
    height: min-content;
}

.adminModelContainer table.info_table.typeA input[type=submit] {
    margin: 5px auto;
}

#thHeaders label {
    color: #ffffff;
}

#thHeaders th:first-child {
    border-left: none;
}

#thHeaders th {
    border-left: thin solid #cfd6de;
    border-bottom: thin solid #cfd6de;
}

/*RESPONSIVE*/
.infoboxArrow, .infArrowHide {
    display: none;
}

@media (hover: none) and (pointer: coarse) {
    .infoboxArrow {
        display: block;
        height: 20px;
        width: 20px;
        position: relative;
        bottom: 40px;
        right: 40px;
        transform: scale(1.5) rotate(90deg);
    }
    .infoboxArrow:hover {
        color: #ffffff;
    }
    #user-menu {
        scroll-snap-type: x;
        overflow-x: auto;
        overflow-y: hidden;
    }
    /*ideally hide infobox scrollbar*/
    #user-menu::-webkit-scrollbar {
        width: 5px;
    }
    #user-menu::-webkit-scrollbar-track {
        background: transparent;
    }
    #user-menu::-webkit-scrollbar-thumb {}
    #user-menu::-webkit-scrollbar-thumb:hover {}
    #user-menu .profile-menu, #user-menu .profile-menu.userAlertDisabled {
        scroll-snap-align: end;
    }
}

@media (min-width: 1400px) {
    #bodyBack {
        height: calc(100vh - 91px);
        min-height: calc(100vh - 91px);
        max-height: calc(100vh - 91px);
        padding-top: 0px;
        margin-top: 91px;
    }
}

@media (max-width: 1400px) {
    #body table.typeA.csvImport {
        margin-left: 0px;
    }
    div.filterGridContainer {
        margin-left: 0px;
    }
    div.filterGridContainer {
        height: 13em;
    }
    div.currentFilterContainer {
        margin: 5px 3%;
    }
    #searchingForm input[name="search"], #searchingForm input[name="export"] {
        margin: 5px 4%;
    }
    #categoryTableContainer legend {
        margin-left: 40px;
    }
    div.cfgitem_title {
        width: 100%;
    }
    div.cfgitem .links, .cfgitem form table.sortTable.info_table.typeA {
        width: 95%;
    }
    div.cfgitem table.confitemEdit {
        width: 100%;
    }
    #editPassowordForm fieldset table.labelValueForm {
        width: calc(90% - 40px)
    }
    .ticketCalendarContainer {
        margin-left: 3em;
    }
}

/*eventboard and ticketcalendar btns*/

.createNewItemBtn, .pagerCtl > a {
    background: url(elements_flightrefund/svg/createNew_icon.svg) no-repeat;
    width: 25px;
    height: 25px;
    font-size: 0px;
    margin-right: auto;
    margin-left: 10px;
}
.createNewItemBtn.headingBtn {
    padding: 15px;
    padding-top: 22px;
    transition: all 0.2s ease-in-out;
}
.createNewItemBtn.headingBtn:hover {
    padding: 17px;
    padding-top: 24px;
    transition: all 0.2s ease-in-out;
}
.pagerCtl > a {
    padding: 8px 12px;
    padding-top: 16px;
    border-radius: 20px;
    transition: all 0.2s ease-in-out;
}
.pagerCtl > a:hover {
    box-shadow: inset 0 0 1px 2px rgba(255,255,255,0.4);
    transition: all 0.2s ease-in-out;
}
ul.headingDropdown{
    list-style: none;
    height: 0px;
    display: inline-flex;
    position: relative;
    top: 3px;
}
ul.headingDropdown li a {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: top 0.6s cubic-bezier(.87,-.41,.19,1.44), right 0.6s cubic-bezier(.87,-.41,.19,1.44), opacity 0.6s cubic-bezier(.87,-.41,.19,1.44), position 0.6s cubic-bezier(.87,-.41,.19,1.44), visibility 1s ease-in, z-index 0.6s cubic-bezier(.87,-.41,.19,1.44);
    top: 2px;
    opacity: 0;
    position: relative;
    visibility: hidden;
    z-index: 1;
    border-radius: 20px;
    background: #0095ff;
    right: 40px;
}
ul.headingDropdown li:nth-child(1) a {transition-delay: 0.2s;}
ul.headingDropdown li:nth-child(2) a {transition-delay: 0.1s;}
ul.headingDropdown li:nth-child(3) a {transition-delay: 0.05s;}
ul.headingDropdown.show li:nth-child(1) a {transition-delay: 0.05s;}
ul.headingDropdown.show li:nth-child(2) a {transition-delay: 0.1s;}
ul.headingDropdown.show li:nth-child(3) a {transition-delay: 0.2s;}
ul.headingDropdown.show li a {
    position: relative;
    display: flex;
    top: 2px;
    opacity: 1;
    right: 40px;
    visibility: visible;
    z-index: 1;
}
ul.headingDropdown li a img {
    margin: 0em 0em 0em 0.5em;
    bottom: 0px;
}

/*========================= language picker =========================*/
.languageContainer {
    position: absolute;
    top: 26px;
    right: 235px;
    left: unset;
    z-index: 1;
}

.languageContainer select.languagePicker {
    min-width: 4em;
    width: 4em;
    height: 2em;
    font-size: 14px;
    background: #ffffff url(elements_flightrefund/svg/collapseDown.svg) no-repeat scroll right 0.3em center;
    background-size: 1em;
    padding: 0 1em;
    border-radius: 20px;
}

/*========================= resolution selectors =========================*/

@media (max-width: 539px) {
    div.filterGridContainer {
        height: 15em;
    }
    #infobox .infoboxLogout, #infobox .infoboxRole {
        position: relative;
        right: 10px;
    }
    input[type=text]:disabled, input[type=password]:disabled, input[type=tel]:disabled, input[type=email]:disabled, input[type=url]:disabled, input[type=week]:disabled, input[type=search]:disabled, input[type=number]:disabled, input[type=month]:disabled, input[type=datetime-local]:disabled, input[type=date]:disabled, textarea:disabled, select:disabled, select:disabled option {
        width: 100%;
    }
    #infobox .infoboxItem span.infoboxValue {
        padding: 0px;
    }
    #infobox .infoboxItem.infoboxUser {
        left: -10px;
    }
}

@media (max-width: 805px) {
        .eventBoardContainer, .ticketCalendarContainer, .eventBoardItem {
        max-width: 30em;
        min-width: 30em;
    }

    .eventBoardContainer .eventBoardItem {
        min-width: 29em;
    }

    .eventBoardItemBody {
        max-width: 13em;
    }

    .ticketCalendarDate {
        font-size: 11pt;
    }
}

@media (max-width: 850px) {
    #search-execute {
        right: unset;
        left: 330px;
    }
    #pageFilter {
        right: unset;
        left: 350px;
    }

}

@media only screen and (max-width: 1130px) {
    #body {
        width: 70vw;
        margin-right: 2%;
    }
    .breadcrumb {
        height: 0px;
        border-radius: 0px;
    }
    #nav > a {
        height: 55px;
        position: relative;
        float: left;
        margin-left: 275px;
        margin-top: 20px;
    }
    #nav > ul.toolBarSwapClass {
        width: 200px;
        height: 90px;
        top: 5px;
    }
    /*BURGER MENU===============================================================*/
    .circleStateContainer {
        top: 0px;
    }

    #nav > ul {
        display: grid;
        left: 205px;
        top: 12px;
        right: unset;
        margin-left: 0px;
    }

    #nav > a {
        width: 55px;
        height: 55px;
        border-radius: 30px;
        border: 3px solid #cfd6de;
        display: table;
        z-index: 4000;
    }

    /*state1*/
    #nav > ul > li:last-child {
        bottom: 0px;
    }

    #nav > ul li {
        left: 7px;
    }

    #nav > ul .circleStateContainer span {
        display: none;
    }

    #nav > ul.toolBarSwapClass > li:last-child {
        bottom: 45px;
    }

    .circleStateContainer span {
        background: rgba(0,0,0,0.5);
        border-radius: 5px;
        box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    }
    #nav > ul.toolBarSwapClass .circleStateContainer span {
        display: block;
    }

    #nav > a > span.burgerMenu {
        background: url(elements_flightrefund/svg/burgerIcon.svg) no-repeat center;
        margin: 0 8px -4px 0;
        width: 2em;
        height: 2em;
        padding: 10px;
        transform-origin: 100% 100%;
        position: relative;
        top: 14px;
        left: 14.5px;
    }

    #nav > a:before, #nav > a:after {
        display: none!important;
    }
    #nav > a:before, #nav > a:after, #nav > a > span {
        border: none!important;
    }
    #nav > a:hover > span.burgerMenu {
        /*filter: invert(29%) sepia(71%) saturate(1925%) hue-rotate(189deg) brightness(103%) contrast(102%);/*color is #007ae1, this is achieved by calculating from https://codepen.io/sosuke/pen/Pjoqqp*/
    }

    #nav ul li {
        display: flex;
        justify-content: center;
        align-items: center;
        transition: top 0.6s cubic-bezier(.87,-.41,.19,1.44), opacity 0.6s cubic-bezier(.87,-.41,.19,1.44), position 0.6s cubic-bezier(.87,-.41,.19,1.44), visibility 1s ease-in;
        top: 0px;
        opacity: 0;
        visibility: hidden;
        z-index: -5;
    }
    #nav ul li:nth-child(1) {
        transition-delay: 0s;
    }
    #nav ul li:nth-child(2) {
        transition-delay: 0.1s;
    }
    #nav ul li:nth-child(3) {
        transition-delay: 0.2s;
    }
    #nav ul li:nth-child(4) {
        transition-delay: 0.3s;
    }

    #nav ul.toolBarSwapClass li {
        position: relative;
        display: flex;
        top: 75px;
        opacity: 1;
        visibility: visible;
        z-index: 1;
    }
}

@media (max-width: 890px) {
    #body {
        width: 65vw;
        margin-right: 1.5vw;
    }
    #nav > ul {
        left: 228px;
    }
    #nav > ul.toolBarSwapClass {
        left: 268px;
    }
    #nav > ul.menuToggleMin {
        left: 21px;
    }
    #nav > ul.toolBarSwapClass.menuToggleMin {
        left: 261px;
    }
    .voteHeader .voteTitle {
        max-width: calc(55vw - 170px);
    }
    .languageContainer {
        top: 0px;
        right: calc(50vw - 4em);
    }
    .languageContainer select.languagePicker {
        height: 1.5em;
    }
}

@media (hover: none) and (pointer: coarse) and (max-width: 890px) {
    #nav > ul.menuToggleMin {
        left: 0px;
        margin-left: calc(10vw - 190px);
    }
    #nav > ul.toolBarSwapClass.menuToggleMin {
        left: 0px;
        margin-left: calc(10vw - 150px);
    }
    .languageContainer {
        top: 26px;
        right: 60px;
    }
    .languageContainer select.languagePicker {
        height: 2em;
    }
}

@media (max-width: 760px) {
    #body {
        width: 62vw;
    }
    input.gpcInputB.searchInput {
        width: calc(20vw - 1em);
    }
    .alertParams {
        width: calc(100% - 2em);
    }
    .alertParam {
        width: auto;
    }
    .alertDescription {
        width: calc(100% - 2em);
        max-width: calc(100% - 2.5em);
    }
    #pageFilter {
        right: unset;
        left: 330px;
    }
    .gpcFilter {
        right: unset;
        left: 130px;
    }
    .languageContainer {
        top: 2px;
        right: unset;
        left: calc(10vw + 310px);
    }
}
@media (hover: none) and (pointer: coarse) and (max-width: 760px) {
    .languageContainer {
        top: 26px;
        right: 60px;
    }
    .languageContainer select.languagePicker {
        height: 2em;
    }
}

@media (max-width: 699px) {
    div.itemCount, div.pagerCtl {
        right: 2%;
    }
    #gpc-menu .main-menu-left {
        margin-bottom: 10px;
    }

    #gpc-menu .menu-logo {
        display: initial;
    }

    img.menu-logo {
        background: url(../css/elements_flightrefund/flightrefund_logo_small.svg) no-repeat!important;
        margin: -18px 0px 0px -37px;
        height: 65px;
        max-width: 135px;
        padding: 65px 80px;
        transform: scale(0.45);
    }

    #body {
        left: 40px;
    }

    input.gpcInputB.searchInput {
        width: 150px;
    }

    #search-execute {
        left: 70px;
    }

    #nav > a {
        margin-left: 75px!important;
    }

    #nav > ul.toolBarSwapClass {
        left: 70px;
    }

    #nav > ul {
        left: 28px;
    }

    #search-execute {
        left: 120px!important;
    }

    .gpcFilter {
        right: unset;
        left: 70px;
    }
    #pageFilter {
        right: unset;
        left: 160px;
    }

    #nav > ul.menuToggleMin {
        left: -27px;
        margin-left: 0px!important;
    }
    #nav > ul.toolBarSwapClass.menuToggleMin {
        left: -210px;
        margin-left: 80px!important;
    }
    .cfgitem {
        width: 100%;
    }
    .cfgitem .links table {
        width: 97%;
    }

    div.workflow_action_title {
        width: 100%;
    }
    table.workflow_action {
        margin: 0px;
        display: flex;
        overflow-x: auto;
        width: 100%;
    }
    table.workflow_action tbody {
        width: -webkit-fill-available;
    }
    .voteHeader .voteTitle {
        max-width: 260px;
    }
}

@media (hover: none) and (pointer: coarse) and (max-width: 699px) {
    #nav > ul.menuToggleMin {
        left: -250px;
        margin-left: 80px!important;
    }
    #nav > ul.toolBarSwapClass.menuToggleMin {
        left: -210px;
        margin-left: 80px!important;
    }
}

@media (max-width: 570px) {
    input.gpcInputB.searchInput {
        width: calc(25vw - 1em);
    }
    .gpcFilter {
        right: unset;
        left: 50px;
    }
    #pageFilter {
        right: unset;
        left: 140px;
    }
}

@media (max-width: 480px) {
    #pageFilter {
        width: 90px;
        top: 10px;
        left: 140px;
        font-size: 0.8em;
        line-height: 1.7em;
    }
    .gpcFilter {
        left: 130px;
        top: 50px;
        padding-top: 20px;
    }
}

@media (max-width: 400px) {
    #nav {
        top: 0px;
    }
    #nav a {
        left: 32px;
    }
    #nav ul.menuToggleMin {
        left: -23px;
    }
    #nav ul.toolBarSwapClass.menuToggleMin {
        left: -218px;
    }
    #pageFilter {
        width: 90px;
        top: 0px;
        left: 135px;
    }
    .gpcFilter {
        left: 30px;
        top: 40px;
        padding-top: 20px;
    }
}

@media (hover: none) and (pointer: coarse) and (max-width: 400px) {
    #nav > ul.menuToggleMin {
        left: -258px;
        margin-left: 80px!important;
    }
    #nav > ul.toolBarSwapClass.menuToggleMin {
        left: -218px;
        margin-left: 80px!important;
    }
}

/*TOUCHSCREEN INTERACTIONS - infobox swipe*/
@media (hover: none) and (pointer: coarse) {
    #infobox {
        right: -20px;
        width: 300px;
        height: 90px;
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        transition: none;
        background: transparent;
    }
    #infobox:hover {
        right: -20px;
        transition: none;
    }
    .profile-menu, .profile-menu.userAlertDisabled {
        height: 90px;
    }
    .icon-user-only {
        right: 0px;
        transition: none;
    }
    #infobox:hover .icon-user-only {
        right: unset;
        transition: none;
    }
    #user-menu {
        width: 300px;
        flex-shrink: 0;
        height: 125%;
        overflow-y: hidden;
        background: transparent;
    }
    #user-menu .user-alert {
        left: 200px;
    }
    #user-menu .profile-menu, #user-menu .profile-menu.userAlertDisabled {
        left: 250px;
        right: 15px;
        padding-left: 2.5em;
    }
    #helpBar {
        position: fixed;
    }
    #infobox .infoboxItem {
        left: 0px;
        top: 0px;
    }
    #search-execute {
        left: calc(20vw + 350px);
    }
    .gpc-filter {
        left: calc(20vw + 350px);
    }
    #pageFilter {
        left: calc(20vw + 370px);
    }
}

@media (hover: none) and (pointer: coarse) and (max-width: 1400px) {
    #search-execute {
        left: 680px;
    }
    .gpc-filter {
        left: 680px;
    }
    #pageFilter {
        left: 700px;
    }
}

@media (hover: none) and (pointer: coarse) and (max-width: 1130px) {
    #search-execute {
        left: 360px;
    }
}

@media (hover: none) and (pointer: coarse) and (max-width: 570px) {
    input.gpcInputB.searchInput, #globalSearchForm, #search-execute {
        width: 150px;
    }
}

@media (max-width: 539px) {
    .profile-menu, .profile-menu.userAlertDisabled {
        width: 190px;
    }
    #titlebar {
        min-width: 320px;
    }
    #infobox {
        width: -webkit-min-content;
    }
    #infobox .infoboxUser .infoboxKey {
        display: none;
    }
    #infobox .infoboxRole .infoboxKey {
        display: none;
    }
    #infobox input[type="submit"].infobox_button {
        width: 12.5em;
        right: 0px;
    }
    .roleSelectUIv3 {
        width: 100%;
        min-width: 10em;
    }
}

@media (hover: none) and (pointer: coarse) and (max-width: 539px) {
    .roleSelectUIv3 {
        min-width: 7.5em;
    }
    #infobox .infoboxItem.infoboxUser {
        left: 0px;
    }
    #infobox input[type="submit"].infobox_button {
        width: 80%;
    }
}
/*++++++++++++++++++PASSWORD RECOVERY WORKFLOW ACTION+++++++++++++++++++*/
div.workflow_action_title.workflow_ac_pwdRecovery {/*title*/
    background: #ececec;
    color: #4d4d4d!important;
    height: 60px;
    text-align: center;
    padding: 20px 0px;
    font-size: 1.6em;
    border: 1px solid #e2e2e2;
    border-bottom: none;
}
form.workflow_action.workflow_ac_pwdRecovery table {/*main*/
    background: #ececec;
    padding: 0px 40px;
    border: 1px solid #e2e2e2;
    box-shadow: 0 1px 2px 0 #e2e2e2;
    border-top: none;
}
form.workflow_action.workflow_ac_pwdRecovery table td, form.workflow_action.workflow_ac_pwdRecovery table tr:hover td, form.workflow_action.workflow_ac_pwdRecovery table th {
    background: #ececec!important;
    color: #4d4d4d;
}

form.workflow_action.workflow_ac_pwdRecovery table tr:first-child td {/*text*/
    border-top: 1px solid #4d4d4d;
    text-align: center;
    padding: 15px 0px 5px;
}
form.workflow_action.workflow_ac_pwdRecovery table tr.workflow_rq_regData th {/*mail title*/
    border: none;
    display: none;
}
form.workflow_action.workflow_ac_pwdRecovery table tr.workflow_rq_regData td input {/*mail input*/
    display: block;
    width: 45%;
    margin: 10px auto;
    height: 25px;
    border: 1px solid #e2e2e2;
    border-radius: 30px;
    background: #f8f8f8!important;
    font-size: 1.2em;
    color: #4d4d4d;
    box-shadow: 0 0 2px 0 #e2e2e2;
}
form.workflow_action.workflow_ac_pwdRecovery table tr:last-child td {/*submit cell*/
    border: none;
}
form.workflow_action.workflow_ac_pwdRecovery table tr:last-child td input[type="submit"] {/*mail submit*/
    margin: 10px auto 20px;
    border: none;
    box-shadow: 0 0 1px 0 rgba(25,25,25,0.04), 0 3px 4px 0 rgba(0,0,0,0.1);
    font-size: 1.2em;
    height: 35px;
    transition: all 200ms;
    font-weight: normal;
    background: #c2fbd7;
    color: #008000;
    border-radius: 20px;
    padding: 0 25px;
    cursor: pointer;
    transition: all 200ms;
}
form.workflow_action.workflow_ac_pwdRecovery table tr:last-child td input[type="submit"]:hover {
    background: #afe6c3;;
    transform: scale(1.05);
}
@media (max-width: 399px) {
    form.workflow_action.workflow_ac_pwdRecovery table {
        padding: 0px 5vw;
    }
}
/*hacky pwdRecovery centering + hide title (no way of checking for missing menu -> using specific stylesheet with global changes inapplicable to the rest of UI)*/
div.workflow_action_title.workflow_ac_pwdRecovery {
    position: fixed;
    width: 800px;
    top: 100px;
    box-shadow: 0 0 2px 0 #e2e2e2, 0 0 0 1000px #f8f8f8;
    left: calc(50% - 400px);
}
form.workflow_action.workflow_ac_pwdRecovery {
    position: fixed;
    width: 800px;
    top: 160px;
    left: calc(50% - 400px);
}
@media (max-width: 899px) {
    div.workflow_action_title.workflow_ac_pwdRecovery, form.workflow_action.workflow_ac_pwdRecovery {
        width: 600px;
        left: calc(50% - 300px);
    }
}
@media (max-width: 699px) {
    div.workflow_action_title.workflow_ac_pwdRecovery, form.workflow_action.workflow_ac_pwdRecovery {
        width: 400px;
        left: calc(50% - 200px);
    }
}
@media (max-width: 499px) {
    div.workflow_action_title.workflow_ac_pwdRecovery, form.workflow_action.workflow_ac_pwdRecovery {
        width: 340px;
        left: calc(50% - 180px);
        transform: scale(0.9);
    }
    form.workflow_action.workflow_ac_pwdRecovery {
        top: 145px;
    }
}
/*==============INDEX/*============*/

.indexTileHeader {
    display: flex;
    margin-left: 1em;
}

.indexTileHeader > h2 {
    line-height: 1.5em;
}

.indexTileHeaderButton {
    display: inline-block;
    background: #0095ff;
    border-radius: 15px;
    color: #ffffff;
    padding-right: 1em;
    margin-bottom: 0.5em;
    margin-left: 1em;
    transition: all 0.2s ease-in-out;
}

.tilesContainer {
    margin-top: 0em;
    margin-bottom: 2em;
    display: inline-block;
    position: relative;
    width: 100%
}

.tileEmpty > span {
    padding: 3.5em 1em 0px 1em;
    display: block;
    font-weight: 400;
    font-size: 20px;
    line-height: 120%;
    text-align: center;
    color: rgba(0,0,0,0.2);
}

.tileEmpty > a {
    margin: 1em auto 0;
}

.roundAddButton {
    display: block;
    background-color: var(--main-bright-orange);
    color: #fcfcfc;
    text-decoration: none;
    height: 30px;
    width: 30px;
    min-width: 30px;
    border-radius: 50%;
    text-align: center;
    font-size: 18px;;
    padding-top: 2px;
    transition: all ease-in-out 0.2s;
}

.roundAddButton:hover {
    box-shadow: inset 0 0 1px 2px rgba(255,255,255,0.4);
    color: #ffffff;
    text-decoration: none;
}

.indexTileHeader .roundAddButton {
    font-size: 1.1em;
    padding-top: 3px;
    padding-right: 1px;
    margin: 0 0.5em;
}

.tileItem {
    position: relative;
    border-radius: 15px;
    float: left;
    width: 24em;
    height: 15em;
    margin: 1em;
    background-color: var(--bg-off-orange);
    font-family: 'bioSans_regular';
    overflow: hidden;
    border: 1px solid #e2e2e2;
    box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.1);
    transition: all 0.2s ease-in-out;
}

.tileItem:hover {
    box-shadow: 0px 0px 4px 0px var(--main-bright-orange);
    transform: scale(1.05);
    background-color: var(--main-light-orange);
    cursor: default;
    transition: all 0.2s ease-in-out;
}

.tileItem.collapsed {
    height: 2.3em;
    width: 10em;
    margin: 0.25em;
}

.tileItem.collapsed .tileTitle a {
    text-align: center;
    padding: 0.2em 0;
}

.tileItem.tileEmpty.collapsed > span {
    padding: 0;
}

.tileItem.tileEmpty.collapsed a.roundAddButton {
    position: absolute;
    top: 0px;
    margin: 0;
}

.tileTitle {
    display: grid;
    font-weight: bold;
    font-size: 1.2em;
    line-height: 1.5em;
    text-align: center;
    color: #4d4d4d;
    cursor: pointer;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}

.tileTitle a {
    z-index: 2;
    padding: 0.3em 0.8em;
    text-align: left;
    transition: all 0.2s ease-in-out;
    color: var(--text-black);
}

.tileTitle a.member {
    color: #4d4d4d;
}

.tileTitle a:hover {
    color: var(--main-bright-orange);
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.tileDescription {
    display: block;
    text-align: left;
    font-size: 1em;
    line-height: 1.3em;
    padding: 2.6em 1em 1em;
    width: 100%;
    max-height: 14em;
    overflow: hidden;
    color: #4d4d4d;

}

.indexIcon {
    display: block;
    position: absolute;
    float: left;
    margin: 0px;
    width: 30px;
    height: 30px;
    top: 0px;
    left: 0em;
    border-radius: 10px;
    padding: 3px;
}

.dotsIcon {
    background-image: url(elements_flightrefund/svg/three_dots.svg);
    background-repeat: no-repeat;
    background-size: 4em;
    margin: 80% 40% 0;
    cursor: pointer;
    transition: background-image 0.2s ease-in-out, transform 0.2s ease-in-out;
    display: inline-block;
    width: 20%;
    height: 10%;
    position: absolute;
    top: 0px;
    background-position: center;
    z-index: 2;
    transform: scale(1);
}

.tileItem.calendar .dotsIcon {
    margin: 60% 40% 0;
}

.dotsIcon:hover {
    background-image: url(elements_flightrefund/svg/three_dots_blue.svg);
    transform: scale(1.2);
    transition: background-image 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.tileParam {
    /*background: rgba(255,0,0,0.2);*/
    display: flex;
    flex-direction: row;
    margin: 0 0 0.5em;
}

.tileParam img.dashboard-param-icon {
    height: 1.8em;
}

.tileParam span.paramValue {
    margin: auto 0.5em;
}

.tileState {
    display: block;
    position: absolute;
    right: 1em;
    font-size: 0.9em;
    border-radius: 20px;
    height: 2em;
    padding: 0 1em;
    text-align: end;
    color: #ffffff;
    bottom: 1em;
}



/*======================== new popup window messages ===========================*/
/*todo in js:
-set iframe>html background to #e6f2ff
-move ticket.state next to .ui-dialog-titlebar > .ui-dialog-titlebar-buttonpane (state color:#ff931e)
-check ticket.importance, create icon colored via correct map, add to dialog-titlebar
-create div.alertParam for date/time
-create new alerParam styled blocks for 'displayOnIndex' and 'availible for'
-remove ticket_title, change container
-style accordions similarly to div.alertParam
!!! add changes for popups to page-specific stylesheet to prevent issues in ohter usecases !!!
*/

body.windowed #mainblock {
    height: 100%;
    background: #f8f8f8;
}

body.windowed #body, body.windowed #body table.dialogTable td {
    width: 100%;
    background: #f8f8f8;
}

body.windowed div.workflow_action_title.ui-accordion-header {
    color: #000000!important;
    background: #cbcbcb;
    border-radius: 20px!important;
    z-index: 1;
}

body.windowed div.workflow_actions form.workflow_action.ui-accordion-content {
    margin-top: -15px!important;
}

body.windowed div.workflow_actions form.workflow_action.ui-accordion-content table.typeC tr:first-child td, body.windowed div.workflow_actions form.workflow_action.ui-accordion-content table.typeC tr:first-child th {
    padding-top: 19px!important;
}

/*popup titlebar mod*/
div.ui-dialog.desktopWindow {
    background: #f8f8f8;
}

div.ui-dialog.desktopWindow div.ui-dialog-titlebar {
    background: #262930;
    border: none;
    box-shadow: 0px -1px 0px 1px #33373f;
}

div.ui-dialog.desktopWindow div.ui-dialog-titlebar div.ui-dialog-titlebar-buttonpane {
    margin-top: 0px!important;
    height: 18px!important;
    top: 10px!important;
    right: 20px!important;
    transform: scale(1.2);
    z-index: 25;
}

/*========================= EXT data =========================*/
.extdata {
    position: relative;
    font-size: 80%;
    font-style: italic;
    vertical-align: super;
    margin-right: 1ex;
    color: red;
}

.extdata::after {
    content: "Tento atribut je načítán z externího systému";
    padding: 2px;
    display: none;
    position: absolute;
    top: 1.5em;
    left: 0px;
    width: min-content;
    text-align: center;
    background-color: white;
    border: 1px solid red;
    border-radius: 5px;

    color: black;
    font-style: normal;
    font-size: 100%;
}

.extdata:hover::after {
    display: block;
    z-index: 1;
}
/* support for extdata - last row noclip */
.cfgitem_info_wrapper > table.typeC.inlineTable {
    overflow: visible;
    border-radius: 15px;
}
.cfgitem_info_wrapper > table.typeC.inlineTable tr:first-child th {
    border-radius: 15px 0px 0px 0px;
}
.cfgitem_info_wrapper > table.typeC.inlineTable tr:first-child td:last-child {
    border-radius: 0px 15px 0px 0px;
}
.cfgitem_info_wrapper > table.typeC.inlineTable tr:last-child th {
    border-radius: 0px 0px 0px 15px;
}
.cfgitem_info_wrapper > table.typeC.inlineTable tr:last-child td:last-child {
    border-radius: 0px 0px 15px 0px;
}

/*========================= FOOTER =========================*/

#footer {
    position: fixed;
    right: 0px;
    bottom: 0px;
    width: 180px;
    height: 50px;
    font-size: 1em;
    display: block;
    background: #262930;
    z-index: 400;
    border-radius: 15px 0px 0px 0px;
    overflow: hidden;
    transition: opacity 0.2s ease-in-out;
}

#footer img.logo_brno {
    width: 200px;
    position: relative;
    bottom: 1.3em;
    right: 5px;
}

#footer:hover {
    opacity: 0;
}

/************** LIGHT SKIN UPDATE **************/
/*color vars
white - #f8f8f8
light blue gradient - rgba(159,134,255,1)
dark blue gradient - #007ae1
dark grey main - #262930
black - #000000
*/

/*index and main layout-------------------------------------------------------------------------------------------------------------*/

html, #bodyBack,#bodyBackFull, #body, #titlebar, body {
    background: transparent;
}

html {
    background-size: cover;
    background-image: url(elements_flightrefund/userBackground.webp);
    background-repeat: no-repeat;
}

#user-menu {
    box-shadow: 0px 0px 0px 1px #262930;
}

ul.pageFilterEnabled {
    box-shadow: none;
}

.eventBoardBody {
    border: 3px solid #007AE1;
    box-shadow: inset 0px 0px 8px 4px #f8f8f8;
    background: #f8f8f8;
}

.eventBoardItem, .ticketCalendarItem, .ticketCalendarItem:last-child, .eventBoardItem:last-child {
    background-image: linear-gradient(#f8f8f8, #f8f8f8), linear-gradient(to right, #007AE1, #007AE1);
}

div.eventBoardButton {
    box-shadow: -5px -4px 5px 5px #f8f8f8;
}

.circleState {
    background-image: linear-gradient(#f8f8f8, #f8f8f8), /*fill*/ linear-gradient(to right, rgba(0,122,225,1), rgba(159,134,255,1));
}

.circleStateLink:hover {
    background: #ffffff;
    box-shadow: 0px 0px 1px 2px #0095ff;
}

#titlebar .circleState a:hover {
    color: #0095ff;
}

#titlebar .circleState a:active {
    background-color: #0095ff;
    color: #ffffff;
}

h1, h2, h3, legend, div.info_table_title, .eventBoardHead h2, .circleStateContainer span, #nav li a, a.eventBoardHeadButton, .eventBoardItemName a, .ticketCalendarName a, .ticketCalendarDate {
    color: var(--text-black);
    font-weight: normal;
}

#leftmenuDropdown, .menul1, .menul2 {
    background: #262930;
}

.menul1 a, .menul2 a {
    color: #b3b3b3;
}

#leftmenu div.menul2:hover {
    background: #33373F;
}
#leftmenu div.menul2 {
    background: #2D3038;
}

#leftmenu div.menul1, .menul2 {
    border-top: thin solid #33373F;
}

.main-menu-left, .menul1:last-child {
    border-bottom: thin solid #33373F;
}

#floatElem.menul1:hover > a.menuitem, #floatElem .menul2:hover > a.menuitem, #floatElem.menul1 > a.menuitem, #collapseLink:hover a {
    color: #ffffff;
}

div.ui-dialog {
    background-image: linear-gradient(white, white), /*fill*/ linear-gradient(to right, #262930, #262930);
    border: 1px solid #262930;
}

.sidebar.actionMenu .menuitem.menulevel1 {
    border: none;
    border-radius: 15px;
}

.sidebar.actionMenu li.menuitem.menulevel2 .menulinkdiv.ui-menu-item-wrapper {
    padding: 0px;
}

.sidebar.actionMenu li.menuitem.menulevel2 .menulinkdiv.ui-menu-item-wrapper a.menulink {
    display: block;
    padding: 3px 1em 3px 0.4em;
}

/*confitemDetail info action buttons*/
.cfgitem_info_wrapper .sidebar.actionMenu {
    flex-grow: 0;
}
.cfgitem_info_wrapper .sidebar.actionMenu li.menuitem.menulevel1 .menulinkdiv.ui-state-active  {
    background: #cdcdcd;
    color: #f8f8f8;
}
/*confitemDetail list action buttons*/
table.info_table .sidebar.actionMenu li.menuitem.menulevel1 .menulinkdiv.ui-state-active  {
    background: #f8f8f8;
    color: #000000;
}

table.info_table .sidebar.actionMenu li.menuitem.menulevel1 .menulinkdiv:hover {
    background: #ff0000;
    color: #f8f8f8;
}

.ui-widget.ui-widget-content {
    z-index: 1000!important;
    box-shadow: rgba(0,0,0,0.24) 0px 3px 8px;
    margin-top: 7px;
    margin-left: -2em!important;
    border-radius: 15px;
}

.confitemListActionMenu .ui-widget.ui-widget-content {
    margin-top: 0px;
    margin-top: 0px;
}

table.typeA {
    border: 1px solid #e2e2e2;
    box-shadow: 0px 0px 2px 0px #cccccc;
}

.eventBoardItemBody span {
    color: #666666;
    transition: color 0.3s ease-in-out;
}

input[type=text]:disabled, input[type=password]:disabled, input[type=tel]:disabled, input[type=email]:disabled, input[type=url]:disabled, input[type=week]:disabled, input[type=search]:disabled, input[type=number]:disabled, input[type=month]:disabled, input[type=datetime-local]:disabled, input[type=date]:disabled, textarea:disabled, select:disabled, select:disabled option {
    border: 1px solid #5b5b5b;
    color: #2d2d2d;
    padding-left: 5px;

}

legend {
    color: #000000;
}

th.displayAll {
    background: #ececec;
    color: #0095ff;
    border-radius: 0px!important;
}

th.displayAll:hover {
    text-decoration: none;
}

table.typeC.workflow_action td {
    background: #ececec;
}

table.typeC.workflow_action tr:nth-child(even) td {
    background: #ececec;
}

table.typeC.workflow_action tbody tr:hover td {
    background: #ececec;
}

.windowed {
    background: #f8f8f8!important;
}

div.currentFilterContainer table.andCond, div.currentFilterContainer table.orCond {
    border: 1px solid #cfd6de;
    box-shadow: none;
}

div.login-body {
    background-color: #f8f8f8;
}

.ui-widget-header {
    background-color: var(--main-bright-orange);
    border: 1px solid var(--main-shadow-orange);
    font-size: 1.2em;
}

/*cfgitem actions btn/menu*/
.confitemListActionMenu ul.actionMenu li a {
    background: #f8f8f8;
}

.sidebar {
    background: unset;
}

/*------ vis.js timeline ------*/
.vis-current-time {
    box-shadow: 0px 0px 3px 1px rgba(255,0,0,0.5);
    width: 2px!important;
    background-color: rgba(255,0,0,0.5)!important;
}

.vis-custom-time {
    background-color: rgba(34,34,34,0.7)!important;
    pointer-events: none;
}

.vis-custom-time-marker {
    background-color: rgba(34,34,34,0.8)!important;
    border: 2px solid rgba(0,0,0,0.2);
    border-radius: 0px 10px 10px 0px;
}

.vis-item {
    border-color: #ccc!important;
    border-radius: 10px!important;
}

.vis-item.vis-selected {
    border-color: #0095ff!important;
    box-shadow: 0px 0px 3px 1px #0095ff;
}

.vis-item.vis-background.projectContainer {
    background: rgba(0,0,0,0.05);
    vetical-align: center;
}

.vis-item.ganttLink a {
    display: block;
    width: 100%;
    color: #fff;
    text-decoration: none;
    text-transform: capitalize;
}

.vis-item.ganttLink a:hover {
    text-decoration: none;
    font-weight: bold;
}

div.vis-current-month.vis-major, div.vis-text.vis-major {
    font-weight: bold;
}
.vis-minor {
    border-bottom: 1px solid #bfbfbf;
}

/*timeline gantt-specific styles*/
#timelineGantt {
    width: 100%;
    background: #eeeeee;
    border: 1px solid #cfd6de;
    border-radius: 10px;
}
#timelineGantt.empty {
    border: none;
    background: none;
}

#timelineGantt div.cfgitem_title {
    margin: 0px;
}
#timelineGantt div.cfgitem_title span.projectTitle {
    color: #fff;
    font-weight: bold;
}
#timelineGantt .vis-timeline {
    border: none;
    border-radius: 0px 0px 10px 10px;
}
#timelineGantt .vis-content .vis-label {
    max-width: 250px;
}
#timelineGantt .vis-inner h3 {
    text-align: center;
    font-weight: 500;
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
}

#timelineGantt .vis-inner h3.interactive {
    cursor: pointer;
    transition: all ease-in-out 200ms;
}
#timelineGantt .vis-inner h3.interactive:hover {
    color: #222222;
    transform: scale(1.05);
}

.vis-labelset .vis-label .vis-inner {
    width: 100%;
    text-align: center;
    padding: 0px 5px 5px!important;
}

.vis-labelset .vis-label.mile .vis-inner {
    padding: 10px 5px!important;
}

.vis-labelset .vis-label .vis-inner span {
    font-size: 13px;
}

#timelineGantt .vis-item.vis-range .vis-item-overflow .vis-item-content {
    width: 100%;
}

#timelineGantt .vis-item.vis-line {
    z-index: 1!important;
    border-width: 1px;
    border-color: #b3b3b3!important;
    box-shadow: 0px 0px 0px 2px #b3b3b3;
}

#timelineGantt .vis-item.vis-dot {
    box-shadow: 0px 0px 0px 2px #b3b3b3!important;
    border-color: #cccccc!important;
}

#timelineGantt .vis-item.vis-box, #timelineGantt .vis-item.vis-box .vis-item-content, #timelineGantt .vis-item.vis-box a {
    z-index: 10!important;
}

#timelineGantt .vis-custom-time-marker {
    top: 4px;
}

#timelineGantt .vis-custom-time-marker a {
    pointer-events: all!important;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
}

#timelineGantt .vis-custom-time-marker a:hover {
    font-weight: bold;
}

#timelineGantt .vis-time-axis .vis-grid.vis-minor, #timelineGantt .vis-time-axis .vis-grid.vis-major {
    border-color: #ccc;
}

/* gantt popup and modal */
#timelineGantt {
    z-index: 90;
}
.ganttModal {
    width: 100%;
    height: 100%;
    display: block;
    background: rgba(0,0,0,0.5);
    position: absolute;
    z-index: 200;
    top: 0px;
}

.ganttPopup {
    position: absolute;
    z-index: 250;
}

/*@media only screen and (max-width: 925px) {*/
@media only screen and (max-width: 1130px) {
    .circleStateContainer span,
    .circleStateContainer div.circleState span {
        color: #ffffff!important;
    }
    #nav > a > span.burgerMenu {
        filter: none;/*invert(0%) sepia(2%) saturate(0%) hue-rotate(176deg) brightness(99%) contrast(102%);/*color is #000000, this is achieved by calculating from https://codepen.io/sosuke/pen/Pjoqqp*/
    }
    #nav > a:hover > span.burgerMenu {
        /*filter: invert(19%) sepia(58%) saturate(4736%) hue-rotate(346deg) brightness(91%) contrast(94%);*/
        color: #cdcdcd;
    }
}

/*========================= passenger ticketDetail =========================*/


/*global*/
.passengerTicketTitle {
    text-align: center;
}

div.passengerTicketContainer, div.passengerActionContainer, div.passengerMessageContainer, div.messages {
    width: 40vw;
    min-width: 300px;
    margin: 2em auto;
    background: var(--bg-off-orange);
    box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
    border-radius: 15px;
    font-family: 'bioSans_regular';
    padding: 15px;
}

.tableDiv {
    display: table;
    text-align: left;
    width: auto;
    border-collapse: collapse;
}

.tableDiv .tableDiv {
    width: 100%;
}

.tableRow {
    display: table-row;
}

.tableCell, .tableCellHead {
    display: table-cell;
    width: 33%;
    padding: 2px;
}

.tableCellSubTable {
    padding: 0;
}

.utcDateTime::before {
    content: "(";
}
.utcDateTime::after {
    content: " UTC)";
}
.utcDateTime {
    font-size: 75%;
}

.passengerTicketItem {
    padding-bottom: 1em;
}

.passengerTicketFlightPathItem {
    border: 2px solid var(--main-bright-orange);
    border-radius: 15px;
}

.passengerTicketFlightPathItem .tableCell, .passengerTicketFlightPathItem .tableCellHead {
    border: 1px solid #cbcbcb;
}

.passengerTicketFlightPathItem .tableCellHead {
    font-weight: 400;
    color: var(--main-bright-orange);
    background-color: rgb(236 236 236);
}

.passengerTicketFlightPathItem .center {
    text-align: center;
}

table.passengerTicketFlightPathAirline td,
table.passengerTicketFlightPathAirline th {
    padding-left: 0;
}

.passengerTicketFlightPath {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
}

.passengerTicketFlightPathItem {
    flex: 1 0;
}

.passengerTicketFlightPathItem {
    border-collapse: collapse;
}

.passengerTicketFlightPathItem td, .passengerTicketFlightPathItem th {
    border: 1px solid black;
}

.passengerTicketFiles .passengerTicketFilesTitle {
    margin-left: -2em;
}

.passengerTicketState {
    display: block;
    position: absolute;
    right: 1em;
    font-size: 0.9em;
    border-radius: 20px;
    height: 2em;
    padding: 0 1em;
    text-align: end;
    color: #ffffff;
    bottom: 1em;
    background-color: #09b826;
}

.passengerActionContainer div.workflow_action_title, .passengerActionContainer table.typeC {
    box-shadow: unset!important;
    border: none;
}

.passengerTicketTitle, div.passengerTicketContainer, div.passengerActionContainer, div.passengerMessageContainer {
    position: relative;
    right: 125px;
}

div.passengerActionContainer.multiple, div.passengerActionContainer.create {
    background: transparent;
    box-shadow: none;
}

div.passengerActionContainer.create.singleAction {
    box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
}

div.passengerActionContainer .workflow_actions div.workflow_action_title.ui-accordion-header {
    padding: 0 0 2.5em;
    /*border-bottom: 2px solid var(--border-grey);*/
}

div.passengerActionContainer .workflow_actions div.workflow_action_title.ui-accordion-header.ui-state-active {
    border: 1px solid var(--border-grey);
    border-bottom: none;
    box-shadow: none;
}

/*div.passengerActionContainer .workflow_actions form.workflow_action.ui-accordion-content-active {
    border: none;
}*/

div.passengerActionContainer .workflow_actions form.workflow_action.ui-accordion-content-active table.workflow_action {
    border-radius: 5px;
}

/*detail*/
.passengerTicketContainer .passengerTicketHeader {
    padding: 1em 2em;
    font-size: 1.1em;
    display: flex;
    justify-content: space-between;
}

.passengerTicketHeader span.passengerTicketName {
    float: left;
    font-weight: bold;
    color: #000000;
    margin-right: 10%;
    text-align: left;
}
.passengerTicketHeader span.passengerTicketState {
    color: #555555;
    font-weight: bold;
    word-wrap: normal;
    padding-left: 0.5em;
}

.passengerTicketHeader span.passengerTicketState.inner {
    color: var(--main-bright-orange);
    padding-left: 0em;
}

.passengerTicketContainer div.passengerTicketContent {
    padding: 1em 2em;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

div.passengerTicketContent table, div.passengerTicketHeader > span {
    width: 50%;
}

div.passengerTicketContent table.passengerFlightInfo {
    margin-right: 10%;
    vertical-align: middle;
}

div.passengerTicketContent table th {
    width: 2em;
    padding-right: 0em;
}

div.passengerTicketContent table th img.detail-param-icon {
    height: 2em;
}

div.passengerTicketContent table td {
    background: var(--bg-off-orange);
    padding-bottom: 0.5em;
    text-align: left;
}

div.passengerTicketContainer div.passengerTicketFiles {
    width: 100%;
    padding: 0 2em 2em 2em;
    display: flex;
    flex-direction: column;
}

div.passengerTicketContainer .passengerTicketFiles {
    width: 100%;
}

div.passengerTicketContainer .passengerTicketFiles span.ticketFile {
    margin: 0em 0em 0.5em;
}

.passengerTicketFiles .ticketFile .detail-file-icon {
    height: 2em;
    margin: 0em 1em 0em 0.5em;
    vertical-align: middle;
}

.singleFlightContainer {
    padding: 0.5em 0;
}

.singleFlightContainer div.passengerTicketHeader {
    padding: 0.5em 2em;
}

.singleFlightContainer div.passengerTicketContent {
    padding: 1em 1em;
}

/*workflow*/

.passengerActionContainer {
    box-shadow: none;
}

.passengerActionContainer div.workflow_actions,
.passengerActionContainer div.workflow_actions div.workflow_action_title,
.passengerActionContainer div.workflow_actions div.workflow_action_request_blocks,
.passengerActionContainer table.workflow_action.typeC > tbody {
    width: 100%;
}

.passengerActionContainer table.workflow_action.typeC > tbody {
    display: block;
}

.passengerActionContainer table.workflow_action.typeC > thead > tr,
.passengerActionContainer table.workflow_action.typeC > tbody > tr {
    display: flex;
    flex-direction: column;
    margin-left: 0.5em;
}
.passengerActionContainer table.workflow_action.typeC > thead > tr > th,
.passengerActionContainer table.workflow_action.typeC > tbody > tr > th {
    width: 100%!important;
    text-align: center!important;
    border: none!important;
    font-weight: normal!important;
}
.passengerActionContainer table.workflow_action.typeC > thead > tr > td,
.passengerActionContainer table.workflow_action.typeC > tbody > tr > td {
    width: 100%!important;
    text-align: center!important;
    border: none!important;
    font-weight: normal!important;
}
.passengerActionContainer .workflow_action_title {
    border-radius: 15px 15px 0px 0px;
    text-align: center;
    height: 2em;
    line-height: 2.5em;
    background: var(--bg-off-orange);
    color: #000000!important;
    font-weight: bold;
    font-size: 1.4em;
    transition: color 150ms ease-in-out;
}

.passengerActionContainer .workflow_action_title.ui-accordion-header:hover {
    color: var(--main-bright-orange)!important;
}

.passengerActionContainer table.typeC.workflow_action {
    background: var(--bg-off-orange);
    padding: 0 2.5%;
    border-radius: 0px 0px 15px 15px;
}

.passengerActionContainer .workflow_action_title:last-child,
.passengerActionContainer .workflow_action_title:last-of-type + form.workflow_action.ui-accordion-content-active/*,
.passengerActionContainer form.workflow_action.disable_accordion:last-child*/ {
    border-radius: 0 0 15px 15px!important;
}
.passengerActionContainer .workflow_action_title:first-child {
    border-radius: 15px 15px 0 0!important;
}

/*override tr background to always be white*/
.passengerActionContainer table.workflow_action.typeC tr,
.passengerActionContainer table.workflow_action.typeC th,
.passengerActionContainer table.workflow_action.typeC td {
    background: var(--bg-off-orange)!important;
    background-color: var(--bg-off-orange)!important;
}

.passengerActionContainer table.workflow_action.typeC input:not([type="radio"]),
.passengerActionContainer table.workflow_action.typeC textarea {
    background: var(--text-white)!important;
    border: 1px solid #e5e5eb!important;
    color: #000000;
    border-radius: 30px;
    height: 2.5em;
    font-size: 14px;
    padding: 0 1em;
    min-width: 200px;
    width: 60%;
}

.passengerActionContainer table.workflow_action.typeC input.required:invalid,
.passengerActionContainer table.workflow_action.typeC textarea.required:invalid {
    border: 2px solid #e5252b!important;
}

.passengerActionContainer table.workflow_action.typeC input:focus,
.passengerActionContainer table.workflow_action.typeC textarea:focus {
    border: 1px solid #0075ff!important;
}

.passengerActionContainer table.workflow_action.typeC textarea {
    height: 8em;
    font-size: 0.9em;
    border-radius: 15px;
    padding: 0.5em;
}

.passengerActionContainer table.workflow_action.typeC .file-input .file-preview {
    width: 60%;
    margin: 0.25em auto;
    border-radius: 15px;
    background: var(--text-white);
    border: 1px solid #e5e5eb!important;
}

.passengerActionContainer  .file-preview .krajee-default.file-preview-frame {/*todo: check elsewhere*/
    height: 150px;
    overflow: hidden;
}

/*radio*/
.passengerActionContainer table.workflow_action.typeC tr.workflow_rq_item.workflow_rq_newClaimInfo_claimTypeInput td {
    display: flex;
    flex-direction: column;
    background: #e8f0fe!important;
    border: 1px solid #e5e5eb!important;
    border-radius: 30px;
    font-size: 14px;
    padding: 1.25em 1em;
    margin: auto;
    min-width: 200px;
    width: 60%!important;
}

.passengerActionContainer form.workflow_action.flight_multiform .workflow_action tr.workflow_rq_item th {
    font-size: 1.1em!important;
    line-height: 1.5em;
    font-weight: bold!important;
    padding: 1em 0em 0.5em!important;
}

.passengerActionContainer form.workflow_action.flight_multiform .workflow_action div.selectButtons.lov_buttonsDataType {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    background: var(--bg-off-orange)!important;
    border: none;
    margin-bottom: 0.5em;
}

.passengerActionContainer form.workflow_action.flight_multiform .workflow_action div.selectButtons.lov_buttonsDataType label {
    font-size: 1em;
    line-height: 1em;
    color: var(--text-black);
}

.workflow_action.typeC td.workflow_action_submit {
    padding: 0;
}

.passengerActionContainer table.workflow_action.typeC td.workflow_action_submit input {
    background: var(--main-bright-green)!important;
    border-color: var(--main-bright-green)!important;
    color: var(--text-white);
    margin: 1.5em auto;
    padding: 0 1em;
    height: 40px;
    width: 60%;
    min-width: 200px;
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.1);
    transition: all 0.2s ease-in-out;
    white-space: normal;
}

.passengerActionContainer table.workflow_action.typeC td.workflow_action_submit input:hover {
    background: var(--main-bright-green)!important;
    box-shadow: 0px 2px 8px 0px var(--main-bright-green);
    transform: scale(1.05);
}

.passengerActionContainer table.workflow_action.typeC td select {
    background: #ffffff url(elements_flightrefund/svg/collapseDown.svg) no-repeat scroll right 5px center!important;
    background-size: 20px!important;
    padding: 0 2.25em 0 1em;
    border: 1px solid #e5e5eb!important;
    color: #000000;
    border-radius: 30px;
    height: 2.5em;
    font-size: 14px;
    min-width: 200px;
    width: 60%;
}

.claimReviewPassengers {
    font-size: 100%;
    line-height: 2;
    text-align: left;
    margin-left: 5px;
}

.claimReviewPassengerStatusIcon img {
    margin-left: 1em;
    vertical-align: middle;
}

.claimReviewCompensation {
    font-size: 130%;
    font-weight: bold;
    margin-top: 1em;
}

.claimReviewCompensationTotal {
    color: green
}


/*message*/

div.passengerMessageContainer {
    display: flex;
    flex-direction: column;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

div.passengerMessageContainer.hidden {
    opacity: 0;
}

div.passengerMessageContainer span.passengerMessageTitle {
    padding: 0em 2em;
    margin: 1em auto 0.5em;
    font-size: 1.4em;
    font-weight: bold;
    text-align: center;
    display: block;
    color: #000000;
}

div.passengerMessageContainer span.passengerMessageContent {
    width: 70%;
    min-width: 200px;
    margin: auto;
    display: block;
    text-align: center;
}
div.passengerMessageContainer input.passengerMessageButton {
    display: block;
    background: var(--main-bright-orange)!important;
    border-color: var(--main-bright-orange)!important;
    color: var(--text-white);
    margin: 1em auto;
    height: 40px;
    box-shadow: 0px 2px 8px 0px rgb(0,0,0,0.1);
    transition: all 0.2s ease-in-out;
    min-width: 30%;
    width: 30%;
    font-size: 1.1em;
}

div.passengerMessageContainer input.passengerMessageButton:hover {
    background: var(--main-bright-orange)!important;
    box-shadow: 0px 2px 8px 0px var(--main-bright-orange);
    transform: scale(1.05);
}

/*fail message*/

div.failMessageContainer {
    position: relative;
    width: 400px;
    height: 600px;
    min-width: 250px;
    margin: 0em auto;
    background: var(--text-white);
    box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
    border-radius: 4px;
    font-family: 'bioSans_regular';
}

.failMessageContainer .failMessageHeader {
    height: 50%;
    background: var(--text-red);
    border-radius: 4px 4px 0 0;
    padding: 4em;
}

.failMessageContainer .failMessageHeader .failMessageIcon {
    background-image: url(elements_flightrefund/svg/failureEmoji_icon.svg);
    height: 100%;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.failMessageContainer .failMessageContent {
    padding: 4em 2em 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 50%;
    position: relative;
    justify-content: space-between;
    text-align: center;
    border-radius: 0 0 4px 4px;
    font-size: 1.1em;
}

.failMessageContainer .failMessageContent .failMessageText {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-transform: uppercase;
}

.failMessageContainer a.failMessageClose {
    background: var(--text-red);
    color: var(--text-white);
    padding: 0.5em 3em;
    border-radius: 1.5em;
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
}

.failMessageContainer a.failMessageClose:hover {
    box-shadow: 0px 2px 8px 0px var(--text-red);
    transform: scale(1.05);
}

@media only screen and (max-width: 539px) {
    div.failMessageContainer {
        width: 60vw;
        font-size: 0.9em;
    }
}

@media only screen and (max-width: 399px) {
    div.failMessageContainer {
        width: 50vw;
    }
}

/*createTicket*/
div.passengerActionContainer.create form.workflow_action.workflow_ac_init_checkFlight tr.workflow_rq_item td img.input-icon {
    height: 18px;
    position: absolute;
    top: calc(50% + 1px - 18px/2);
    margin-left: -30px;
}

form.workflow_action.workflow_ac_init_checkFlight tr.workflow_rq_item.workflow_rq_init_checkFlight1 td img.input-icon {
    content: url(elements_flightrefund/svg/iconsBlack/date_black.svg);
}

form.workflow_action.workflow_ac_init_checkFlight tr.workflow_rq_item.workflow_rq_checkFlight_flightNumber td img.input-icon {
    content: url(elements_flightrefund/svg/iconsBlack/flightNumber_black.svg);
}

div.passengerActionContainer.create form.workflow_action.workflow_ac_init_checkFlight tr.workflow_rq_item.workflow_rq_checkFlight_airline a {
    background: transparent url(elements_flightrefund/svg/iconsBlack/airline_black.svg) no-repeat scroll center center;
    background-size: 18px 30px;
    padding: 8px 37px 8px 0px;
    box-shadow: inset 0px 0px 4px 2px #e5e5eb;
    border-radius: 30px;
    background-position: 10px 2px;
    margin-left: -40px;
    margin-right: 9px;
    top: 0px;
    transition: box-shadow 0.2s ease;
}

div.passengerActionContainer.create form.workflow_action.workflow_ac_init_checkFlight tr.workflow_rq_item.workflow_rq_checkFlight_airline a:hover {
    box-shadow: inset 0px 0px 6px 3px #90f9b6;
}

/*autocomplete input-select - permissible only so long as widget is used in newClaim create only*/
.ui-widget.ui-widget-content.ui-autocomplete {
    width: calc(24vw - 1em)!important;
    min-width: 200px!important;
    border-radius: 5px!important;
}
.ui-widget.ui-widget-content.ui-autocomplete .ui-menu-item-wrapper {
    background: #ffffff!important;
    border-top: 1px solid #e5e5eb!important;
}
.ui-widget.ui-widget-content.ui-autocomplete .ui-menu-item-wrapper:hover {
    background: #e8f0fe!important;
    border-top: 1px solid #0095ff!important;
    border-bottom: 2px solid #0095ff!important;
}

@media (max-width: 890px) {
    .passengerTicketTitle, div.passengerTicketContainer, div.passengerActionContainer, div.passengerMessageContainer {
        right: unset;
    }
}

/*flightClaim rearange flights action drag/drop user-sortable list*/
#dragDropSort {
    list-style: none;
    padding: 0;
    margin: 0;
}

#dragDropSort li {
    margin: 0.5em;
    padding: 0.5em 1em;
    border: 1px solid #dfdfdf;
    background: #f5f5f5;
    border-radius: 1em;
    font-size: 1.5em;
}

#dragDropSort li:hover {
    background: #e8f0fe;
    cursor: pointer;
}

#dragDropSort li:active {
    border: 2px dashed #0095ff;
}

#dragDropSort li.hint {
    border: 1px solid #0095ff;
    background: #e8f0fe;
}

#dragDropSort li.active {
    border: 2px dashed #0095ff;
    background: rgba(0,149,255,0.3);
}

@media (hover: none) and (pointer: coarse) {
    .languageContainer {
        position: absolute;
        right: 60px;
        left: unset;
        z-index: 1;
    }
}

@-moz-document url-prefix() {/*firefox workarounds/fixes*/
    b, .passengerTicketHeader span.passengerTicketName, .passengerTicketHeader span.passengerTicketState, .passengerMessageTitle, div.passengerMessageContainer input.passengerMessageButton, .tileTitle a, #infobox input[type="submit"].infobox_button, .passengerActionContainer .workflow_action_title, .passengerActionContainer table.workflow_action.typeC td.workflow_action_submit input,
    .workflow_actions div.workflow_action_title.flight_multiform:not(.disable_accordion), form.workflow_action table.typeC tbody tr td.workflow_action_submit input
    {/*hacky fix to firefox inability to render bioSans bold*/
        font-weight: normal!important;
        text-shadow: 0.5px 0px!important;
    }
    .passengerTicketHeader span.passengerTicketName, .passengerTicketHeader span.passengerTicketState {/*ticket detail, bigger fontsize*/
        font-size: 1.05em!important;
    }
    * {
        scrollbar-color: #262930 rgba(0,0,0,0.2)!important;
    }
}

/*datePicker custom gov-like*/
.ui-datepicker, .ui-datepicker-header, .ui-datepicker table.ui-datepicker-calendar tr, .ui-datepicker table.ui-datepicker-calendar th , .ui-datepicker table.ui-datepicker-calendar td a {
    background: var(--main-bright-orange);
    color: var(--text-white)!important;
    border: none;
    border-radius: 3px;
}

.ui-datepicker {
    width: auto;
    padding: 0.5em 1em
}

.ui-datepicker table.ui-datepicker-calendar th a, .ui-datepicker table.ui-datepicker-calendar td a {
    text-align: center;
    vertical-align: middle;
    padding: 0.25em;
    font-size: 1.4em;
}

.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-today a {
    background: var(--main-shadow-orange);
}


.ui-datepicker table.ui-datepicker-calendar td a:focus {
    border: 2px solid var(--text-white);
    background: var(--main-bright-orange);
}


.ui-datepicker table.ui-datepicker-calendar td a:hover, .ui-datepicker .ui-datepicker-next:hover, .ui-datepicker .ui-datepicker-prev:hover {
     background: var(--main-shadow-orange);
     border: none;
}

.ui-datepicker .ui-datepicker-next, .ui-datepicker .ui-datepicker-next-hover, .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-prev-hover {
    top: 1.2em;
    padding: 0;
    height: 2.4em;
    width: 2.4em;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ui-datepicker .ui-datepicker-next, .ui-datepicker .ui-datepicker-next-hover {
    right: -0.5em;
    transform: rotate(270deg);
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-prev-hover {
    left: -0.5em;
    transform: rotate(90deg);
}

.ui-datepicker .ui-datepicker-next:before  {
    font-family: 'GPC';
    content: "\e900";
}

.ui-datepicker .ui-datepicker-prev:before  {
    font-family: 'GPC';
    content: "\e900";
}

.ui-datepicker .ui-datepicker-next:before, .ui-datepicker .ui-datepicker-prev:before {
    font-size: 1.5em;
    color: var(--text-white);
    line-height: 1.2em;
    padding-left: 0em;
}

.ui-datepicker .ui-datepicker-next span.ui-icon, .ui-datepicker .ui-datepicker-prev span.ui-icon {
    display: none;
}

.ui-datepicker .ui-datepicker-title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.5em 1.2em;
    padding: 0 0.5em;
    line-height: 1.8em;
    text-align: left;
    font-size: 1.5em;
    font-weight: normal;
    text-transform: capitalize;
}

.ui-datepicker select.ui-datepicker-year {
    min-width: fit-content;
    width: 0%;
}

.g-recaptcha{

    display: flex;
    justify-content: space-around;

}
@media only screen and (max-width: 1100px){
    .passengerTicketContainer div.passengerTicketContent{
        display: flex;
        align-items: stretch;
        justify-content: center;
        align-content: flex-end;
        flex-direction: column;
        flex-wrap: nowrap;
    }
}

@media only screen and (max-width: 900px) {
    .g-recaptcha {
        transform:scale(1);
        transform-origin:0 0;
        display: flex;
        justify-content: unset;
    }
    .claimReviewCompensation{
       font-size: 130%;
   }
}

@media only screen and (max-width: 700px) {
    .g-recaptcha {
        transform:scale(0.76);
        transform-origin:0 0;
        display: flex;
        justify-content: unset;
      }
    .claimReviewCompensation{
       font-size: 110%;
   }
}
@media only screen and (max-width: 350px) {
    .g-recaptcha{
        transform:scale(0.60);
        transform-origin:0 0;
        display: flex;
        justify-content: unset;
   }
   .passengerTicketContainer div.passengerTicketContent{
        display: flex;
        align-items: stretch;
        justify-content: center;
        align-content: flex-end;
        flex-direction: column;
        flex-wrap: nowrap;
   }
}


.passengerActionContainer div.workflow_action_title.ui-accordion-header {
    box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1)!important;
    margin-top: 20px;
}

.passengerActionContainer div.workflow_action_title.ui-accordion-header.ui-accordion-header-collapsed {
    border-radius: 15px!important;
}

.passengerActionContainer form.workflow_action.ui-accordion-content-active {
    box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
    border: 1px solid var(--border-grey);
    border-top: none;
}

.passengerActionContainer form.workflow_action.ui-accordion-content-active table.workflow_action {
    border-radius: 0!important;
    padding: 0;
}

.passengerActionContainer form.workflow_action.disable_accordion/*,
.passengerActionContainer form.workflow_action.disable_accordion:last-child*/ {
    margin-top: 20px;
    border-radius: 15px!important;
    box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1)!important;
}

CybotCookiebotDialogBodyButton {
    height: 50px;
}