html {
    overflow-y: scroll;
    height: 100%;
}

* { -webkit-tap-highlight-color:transparent; }

body {
    /*min-width: 1264px;*/
    height: 100%;
    color: #103769;
    font-family: "Helvetica Neue LT Pro", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857;
    margin: 0;
    padding: 0;
}

:root {
    --kdl-color-primary-accent: #00AEEF;
    --kdl-color-primary-main-150: #99afc1;
    --kdl-color-primary-main-300: #4d7293;
    --kdl-color-surface-100: #F3F8FA;

}

span.select2-dropdown {
	z-index: 30001;
}

span.select2-container {
	min-width: 200px;
}

a, a:active, a:visited, a:hover {
    color: var(--kdl-color-primary-accent);
    text-decoration: none;
    outline: none;
}

button label {
    cursor: pointer;
}

/* ---------------- main boxes --------------------------------*/

div.mainBox {
    width: 100%;
    max-width: 1424px;
    margin-left: auto;
    margin-right: auto;
}


.headerLinkContainer {
    height: 40px;
}

.headerLink {
    font-family: Helvetica;
    font-size: 20px;
    text-align: left;
    color: #013668;
    margin-left: 30px;
    margin-top: 10px;
    float: left;
    cursor: pointer;
}

:not(.selected).headerLink:hover {
    text-decoration: underline;
}

.headerLink.selected {
    color: var(--kdl-color-primary-accent);
    font-weight: bold;
    text-decoration: underline;
}

#headerSection #logoutOptions {
    display: inline-block;
    float: right;
    font-size: 11px;
    margin-top: 5px;
    margin-right: 4px;
}
#headerSection #logoutOptions ul {
    padding: 0;
    margin: 0;
}
#headerSection #logoutOptions ul li {
    display: inline-block;
    vertical-align: middle;
}

/* ---------------- feedbackPanel -------------------------------- */
#feedback {
    /* see #content .authPanel */
}

.feedbackPanel{
    background: #e7f7fd url('../pic/status/warning-icon-2_blue.png') no-repeat no-repeat 14px center !important;
    border: 1px solid #9dddf3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;

    margin: 20px;
    padding: 18px 0 15px 70px;
    font-size: 15px;
    line-height: 20px;
    color: var(--kdl-color-primary-accent);
    display: none;
}

.partially-sighted .feedbackPanel {
    background: url(../pic/status/ps-warning-icon.png) no-repeat no-repeat 14px center !important;
}

.feedbackPanel:nth-child(n){
    display: block;
}

#content ul.feedbackPanel {
    list-style-type: none;
}

.feedbackPanel .cacheRefreshButton{
    width: 120px;
    float: right;
    font-family: Helvetica;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    margin: -5px 25px;
    padding: 3px;
    border-radius: 4px;
    border: 1px solid #9dddf3;
    cursor: pointer;
}

.cacheRefreshButton:active {
    font-weight: normal;
}

.errorBlock {
    background: none;

    border: 1px solid #9dddf3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;

    color: #003767;
    padding: 35px 20px;
    padding-left: 70px;
    font-size: 15px;
    line-height: 20px;
}

.errortext,
li .feedbackPanelFATAL,
li .feedbackPanelERROR {
    display: block;

    font-size: 14px;
    line-height: 20px;
    color: #d52027;
    margin-top: 5px;
}

ul.feedbackPanel li {
    margin: 0px 0px 3px 0px;
}

#divLoading
{
    display : none;
}
#divLoading.show
{
    display : block;
    position : fixed;
    z-index: 20005;
    background-image : url('../pic/ajax-loader.gif');
    background-color:#666;
    opacity : 0.4;
    background-repeat : no-repeat;
    background-position : center;
    left : 0;
    bottom : 0;
    right : 0;
    top : 0;
}

/* ==================== warning boxes ==========================*/

.warningPanel,
li .feedbackPanelINFO, li.feedbackPanelINFO > span {
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0 rgba(0, 0, 0, 0.02);
    text-align: left;
}

.warning,
li .feedbackPanelINFO, li.feedbackPanelINFO > span {
    color: #003767;
    font-weight: bold;
    line-height: 20px;
    padding: 15px 5px 15px 60px;
    background: #e3f8ff url('../pic/status/warning-icon-2.png') no-repeat no-repeat 14px center !important;
    text-align: left;
}

.warning.subscr{
    padding-left: 5px;
    padding-top: 60px;
    font-weight: normal;
    background: #fff !important;
}

.partially-sighted .warning.subscr{
    padding-left: 5px;
    padding-top: 60px;
    font-weight: normal;
    background: #000000 !important;
}

.warning.whiteSubscr{
    padding-top: 60px;
    padding-left: 55px;
    font-weight: normal;
    background: #fff url('../pic/status/warning-icon-2.png') no-repeat no-repeat 10px 75px !important;
}

.partially-sighted .warning.whiteSubscr{
    padding-top: 60px;
    padding-left: 55px;
    font-weight: normal;
    background: #000000 url('../pic/status/ps-warning-icon.png') no-repeat no-repeat 10px 75px !important;
}

.warning.timedOut{
    padding: 65px 0 0;
    font-weight: normal;
    background: #fff !important;
    text-align: center;
}

.partially-sighted .warning.timedOut{
    background:black!important
}

.warning.whiteTimeout{
    padding-top: 85px;
    padding-left: 55px;
    padding-right: 10px;
    font-weight: normal;
    background: #fff url('../pic/status/warning-icon-2.png') no-repeat no-repeat 10px 105px !important;
}

.partially-sighted .warning.whiteTimeout{
    background: black url(../pic/status/ps-warning-icon.png) no-repeat no-repeat 10px 105px !important;
}

.w_captionText{
    display: block;
    font-size: 1.5em;
    font-weight: 900 !important;
    color: #003767;
    padding: 26px;
    line-height: 1.25;
}

.partially-sighted .w_captionText{
    background:transparent!important
}

.warningErrorPage{
    background: url('../pic/status/warning-icon-2.png') no-repeat no-repeat;
    width: 30px;
    height: 27px;
    float: left;
    padding-right: 20px;
    padding-bottom: 8px;
}

.warning.white {
    background-color: #fff !important;
    padding-left: 55px;
}

/* ---------------- inputs, buttons, etc -------------------------- */
input[type='button'],
input[type='button'].primary,
input[type='button'].active,
input[type='submit'],
button.primary,
button {
    height: 60px;
    /* iPad fix */
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}

input[type='button'].thin,
input[type='button'].primary.thin,
input[type='button'].active.thin,
input[type='submit'].thin,
button.primary.thin,
button.thin {
    height: 38px;
    padding-top: 6px;
    padding-bottom: 6px;
}

input[type='button'],
input[type='button'].primary,
input[type='submit'],
a.primary,
.quickFunctions a,
.quickFunctions a:visited,
.quickFunctions a:active,
button.primary/*,
button*/
{
    font-size: 18px;

    font-weight: bold;

    -webkit-transition: background ease 0.3s, color ease 0.3s;
    -o-transition: background ease 0.3s, color ease 0.3s;
    transition: background ease 0.3s, color ease 0.3s;

    line-height: 1.25;

    padding: 17px 30px;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;

    color: #fff;
    background-color: #fa6d16;

    border: 1px solid #fa6d16;

    display: inline-block;
    margin-bottom: 0;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;

    font-family: inherit;

    outline: none !important;
}

input[type='button']:enabled:hover,
input[type='button'].primary:hover,
input[type='button'].primary.ghost:hover,
input[type='submit']:hover,
input[type='submit'].ghost:hover,
a.primary:hover,
a.primary.ghost:hover,
button.primary:hover/*,
button:hover*/ {
    color: #fff;
    background-color: #d85505;
    border-color: #d85505;
}

input[type='button'].primary.ghost,
input[type='submit'].ghost,
a.primary.ghost,
button.primary.ghost,
button.ghost {
    background: #fff;
    color: #fa6d16;
}

.quickFunctions a,
.quickFunctions a:visited,
.quickFunctions a:active,
.yearSelectorContainer input[type='button'].active,
.monthSelectorContainer input[type='button'].active,
input[type='button'].secondary,
button.secondary {
    color: #fff;
    background-color: var(--kdl-color-primary-accent);
    border-color: var(--kdl-color-primary-accent);
}

.quickFunctions a:hover,
.yearSelectorContainer input[type='button']:hover,
.monthSelectorContainer input[type='button']:hover,
input[type='button'].secondary:hover,
input[type='button'].tertiary:hover,
button.secondary:hover,
button.tertiary:hover {
    color: #fff;
    background-color: #0089bc;
    border-color: #0089bc;
}

input[type='button'].tertiary,
.yearSelectorContainer input[type='button'],
.monthSelectorContainer input[type='button'],
button.tertiary {
    color: var(--kdl-color-primary-accent);
    background-color: transparent;
    border-color: #99dff9;
}

input[type='file'] {
    border: 1px solid var(--kdl-color-primary-accent);
    border-radius: 4px;
    padding: 20px 30px;
    max-width: 400px;
}

input[type='text'],
input[type='password'],
textarea {
    width: 150px;
    padding: 6px;

    border: 1px solid #99dff9;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;

    color: #666;;
    font-size: 16px;
    font-family: "Helvetica Neue LT Pro", Arial, sans-serif;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    outline: none;
    margin-bottom: 0;
    vertical-align: middle;

    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

input[type='text']:focus,
input[type='password']:focus,
input[type='text']:focus + span.calendarPopupLink,
textarea:focus {
    border-color: var(--kdl-color-primary-accent);
}

.calendarPopupLink{
    cursor: pointer;
}



input[type='text']:disabled,
input[type='password']:disabled,
textarea:disabled {
    color: #999;
    background-color: #F7F7F7;
}

input[type='checkbox'],
input[type='radio'] {
    cursor: pointer;
    margin: 0 5px 0 10px;
    position: relative;
    top: 1px;
}


/* ---------------- footer --------------------------------*/

footer {
    text-align: center;
    font-size: 12px;
    height: 86px;
    clear:both;
    padding-top: 128px;
}

footer .blueLine {
    background-color: #3CADF3;
    min-height: 2px;
    overflow: hidden;
    box-shadow: 0px 2px 6px #6094AD;
    -moz-box-shadow: 0px 2px 6px #6094AD;
    -webkit-box-shadow: 0px 2px 6px #6094AD;
    color: white;
}

footer ul {
    padding: 18px 0 0 0;
}

footer ul li {
    display: inline;
    padding-left: 10px;
    padding-right: 10px;
    border-right: 1px solid #103769;
    line-height: 17px;
}

footer ul li:last-child {
    border-right: none;
}

footer .copy {
    color: #666666;
}

footer .khArrows {
    float: left;
    margin-top: 10px;
}

footer .khAwards {
    float: right;
    margin-top: 10px;
}

/*---------------------- content main / common elements -----------------------------*/

#content {
    width: 100%;
}

#content h1 {
    color: var(--kdl-color-primary-accent);
    text-align: center;
    font-size: 32px;
    margin-bottom: 50px;
}

#content h2 {
    margin: 50px 0 50px;
    color: #1fb7f0;
    font-size: 28px;
}

#content h3 {
    margin: 1em 0 1em;
    font-size: 20px;
}

/* --------------------- header ----------------------------- */

#headerSection {
    background-color: white;
    box-shadow: 0px 2px 3px -2px #6094AD;
    -moz-box-shadow: 0px 2px 3px -2px #6094AD;
    -webkit-box-shadow: 0px 2px 3px -2px #6094AD;
    height: 120px;
    position: relative;
}

#headerSection #headerTop {
    height: 35px;
    //margin-right: 2rem;
}

.errorText {
    color: red;
}

#headerSection #headerLogo {
    background: url(../pic/khLogo.png) no-repeat no-repeat!important;
    background-size: 100%;
    float: left;
    width: 154px;
    height: 130px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);

    -webkit-transition: width ease 0.3s, height ease 0.3s;
    -o-transition: width ease 0.3s, height ease 0.3s;
    transition: width ease 0.3s, height ease 0.3s;
}

#headerSection #userSelector {
    float: left;
}
#headerSection #userSelector #userSelect select {
    margin: 5px 20px 0px 20px;
    padding: 0;
    max-width: 200px;
    font-size: 12px;
    height: 24px;
    border: none;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
#headerSection #userSelector #userSelect select + img {
    width: 20px;
    vertical-align: middle;
    margin-top: 5px;
    position: relative;
    left: -5px;
    display: none;
}
#headerSection #userSelector.disabled #userSelect select {
    color: #999;
    background-color: #F7F7F7;
}
#headerSection #userSelector.disabled #userSelect select + img {
    display: inline;
}

#headerSection a,
#headerSection a:visited {
    color: #0078a5;
}

#headerSection a:hover,
#headerSection a:active {
    color: #00ade9;
    text-decoration: none;
}

#headerSection a.selected {
    color: #0078a5;
    text-decoration: underline;
    cursor: default;
}

#headerSection #settings i {
    color: #f2632a;
    color: #0078a5;
    font-size: 22px;
    position: relative;
    top: 3px;
}

#headerSection #langSelector {
    float: right;
    padding-right: 20px;
    font-size: 11px;
}
#headerSection #langSelector ul {
    list-style-type: none;
    margin: 10px 0;
}
#headerSection #langSelector ul li {
    display: inline-block;
    padding-left: 3px;
}
#headerSection #langSelector ul li:first-child {
    border-right: 1px solid #103769;
    padding-right: 3px;
    padding-left: 0px;
}
.toggle-partially-sighted {
    background: url(../pic/partially-sighted.png) no-repeat !important;
    cursor: pointer;
    height: 15px;
    position: absolute;
    top: 10px;
    width: 15px
}

.partially-sighted .toggle-partially-sighted {
    background: url(../pic/partially-sighted.png) no-repeat !important;
    cursor: pointer;
    height: 15px;
    position: absolute;
    top: 10px;
    width: 15px
}
body.partially-sighted *{
    background-color:#000!important;
    background-image:none!important;
    color:yellow!important
}
body.partially-sighted {
    background-color:#000!important;
}

@keyframes heartbeat {
    0% { transform:scale(1); }
    100% { transform:scale(1.1); }
}

#headerSection .counter {
    display: inline-block;
    width: 15px;
    height: 15px;

    font-weight:bold;
    text-align: center;
    color:#FFFFFF;
    text-decoration:none;
    line-height: 17px;

    padding: 1px 2px 2px;
    background: #f2632a;

    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;

    box-shadow: 0px 1px 3px #6094AD;
    -moz-box-shadow: 0px 1px 3px #6094AD;
    -webkit-box-shadow: 0px 1px 3px #6094AD;

    transition: scale 1s ease;

    animation-name: heartbeat;
    animation-duration: 1s;
    animation-iteration-count: 300;
    animation-timing-function: ease-in-out;
}

#headerSection #headerBottom {
    margin-top: 18px;
}

#headerSection #logoutOptions {
    display: inline-block;
    float: right;
    font-size: 11px;
    margin-top: 5px;
    margin-right: 4px;
}
#headerSection #logoutOptions ul {
    padding: 0;
    margin: 0;
}
#headerSection #logoutOptions ul li {
    display: inline-block;
    vertical-align: middle;
}

#headerSection .shutDownTimeContainer {
}

#headerSection #shutdownTime {
    font-weight: bold;
    font-size: 18px;
    padding-left: 15px;
    vertical-align: super;
}

#headerSection #lastLoginBox {
    width: 130px;
    text-align: center;
}
#headerSection #lastLoginBox span {
    line-height: 20px;
}

#headerSection #logout {
}
#headerSection #logout #logoutBox {
    display: inline-block;
    width: 40px;

    padding-top: 12px;
    height: 28px;

    color: #fff;
    text-align: center;
    font-size: 16px;

    background: #fa6d16;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;

}

#headerSection #logout #logout_timer {
    text-align: center;
    position: absolute;
    bottom: 6px;
    width: 40px;
}

#headerSection #logout #timelock_timeleft {
    font-size: 9px;
    color: #fa6d16;
}

#headerSection #logoutOptions #timelock_caption{
    margin: 0;
}

#headerSection #logoutOptions #timelock {
    text-align: center;
    width: 45px;
}

/* --------------------- sticky header ----------------------------- */

#headerSection.sticky {
    width: 100%;
    min-width: 1264px;
    margin-left: auto;
    margin-right: auto;
    position: fixed;
    top: 0;
    z-index: 100;
    height: 50px;
    background: white;
}

#headerSection.sticky #headerTop {
    height: 0;
}

#headerSection.sticky #headerTop #headerLogo {
    background-size: 100%;
    width: 77px;
    height: 65px;
    display: block;
}

#headerSection.sticky #headerTop div {
    display: none;
}

#headerSection.sticky #headerBottom {
    margin-top: 0;
    height: 50px;
    background: #fff;
}

#headerSection.sticky #logout #timelock_timeleft {
    color: #fff;
}

#headerSection.sticky + #content {
    padding-top: 80px;
}

#headerSection.sticky + #content #rightColumn #helpButton {
    top: 110px;
}

#content {
    background-image: url('../pic/content/top.png'), url('../pic/content/top-left.png'), url('../pic/content/bottom-left.png'), url('../pic/content/bottom-right.png');
    /*background-position: 190px 129px, 0 179px, 0 1680px, 962px 2015px;*/
    background-position: 14% 0%, 0% 2%, 0% 75%, 70% 90%;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

#contentBody {
    width: 100%;
    max-width: 1424px;
    margin-left: auto;
    margin-right: auto;
}

#contentbody::after {
    display:block;
    content:"";
    clear:both;
}

/* ---------------- sapka választó --------------------------------*/
#customerSelect {
    width: 100%;
    height: 10%;
    padding: 26px 0 34px 0;
}
#customerSelectorDiv {
    float: left;
}
.customerSelector {
    min-width: 4.5em;
    padding: 10px 10px 10px 1em;
    float: left;
    font-family: Helvetica;
    font-size: 34px;
    font-weight: bold;
    text-align: left;
    color: #003767;
    height: 1.25em;
    cursor: pointer;
}
.customerSelector.dropDownDown {
    border: transparent;
    background: url('../pic/content/customerSelect/down-blue.png') no-repeat 0.2em rgba(0, 0, 0, 0);
    border-style: solid;
    border-width: 1px;
    border-color: transparent transparent var(--kdl-color-primary-accent) transparent;
    border-radius: 0;
}

.partially-sighted .customerSelector.dropDownDown {
    border: transparent;
    background: url('../pic/content/customerSelect/ps-down-blue.png') no-repeat 0.2em rgba(0, 0, 0, 0)!important;
    border-style: solid;
    border-width: 1px;
    border-color: transparent transparent var(--kdl-color-primary-accent) transparent;
    border-radius: 0;
}

.customerSelector.dropDownUp {
    background: url('../pic/content/customerSelect/up-blue.png') no-repeat 0.2em #e6f7fe;
    border-radius: 4px;
    border: solid 1px #99dff9;
}

.partially-sighted .customerSelector.dropDownUp {
    border: transparent;
    background: url('../pic/content/customerSelect/ps-up-blue.png') no-repeat 0.2em rgba(0, 0, 0, 0)!important;
    border-style: solid;
    border-width: 1px;
    border-color: transparent transparent var(--kdl-color-primary-accent) transparent;
    border-radius: 0;
}

.customerSelector:hover {
    border-radius: 4px;
    background-color: #e6f7fe;
    border-radius: 4px;
    border: solid 1px #99dff9;
}

.partially-sighted .customerSelector:hover {
    border-radius: 4px;
    background-color: #e6f7fe;
    border-radius: 4px;
    border: solid 1px #ffff00;
}

#customerSelectorDocuments {
    margin: 10px 0 0 0.4em;
    font-family: Helvetica;
    font-size: 34px;
    text-align: left;
    color: var(--kdl-color-primary-accent);
    float: left;
}
.customersPanel {
    width: 1px;
    position: relative;
    z-index: 1;
}
.customersPanelDiv{
    position:absolute;
    top: calc( 10px + 3em );
    left: 3em;
    min-width: 260px;
    padding: 20px 0;
    white-space: nowrap;

    background-color: #ffffff;
    border: 1px solid var(--kdl-color-primary-accent);
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}
.customerSelectorLabel {
    text-transform: uppercase;
    font-family: Helvetica;
    font-size: 12px;
    text-align: left;
    color: #a6a6a6;
    padding-bottom: 10px;
    margin: 10px 20px;
    cursor: default;
}
#customerListItemLabel{
    font-family: Helvetica;
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
    color: #003767;
    padding: 5px 20px;
    padding: 5px 35px 5px 20px;
    cursor: pointer;
}
.customerListSelected {
    background: url('../pic/content/customerSelect/check-dark.png') no-repeat 97% #e6f7fe;
    font-weight: bold;
}

.partially-sighted .customerListSelected {
    background: url(../pic/content/customerSelect/ps-check-dark.png) no-repeat 97% !important;
    font-weight: bold;
}
/*-------------------------------- Menu Panel --------------------------------*/

#folders-all {
    margin: 0 0 0 15px;
}

.folders-Background {
    border-radius: 4px;
    background-color: #ffffff;
    border: solid 1px #ececec;
}

#menu {
    /*background-color: rgba(0, 0, 0, 0);*/
    width: 20rem;
    float: left;
    border-radius: 4px;
    border: solid 1px #ececec;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#list {
	width: calc(95.5% - 280px);
	float: right;
	border-radius: 4px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-left: 10px;
}

#content .favoriteEditTitleLink {
    float: right;
    background-color: #FA6D16;
    border-color: #FA6D16;
}

.favoritesMenuPanelSavedMessageInnerDiv {
    box-shadow: 0 3px 5px #888888;
    padding: 8px 8px 8px 20px;
}

.favoritesMenuPanelSavedMessageInnerDiv span {
    vertical-align:super;
}

.favoritesMenuPanelSavedMessageOuterDiv {
    width: 1310px;
    margin-left: auto;
    margin-right: auto;
}

.favoriteHelpMessage {
    line-height: 2.3;
}

.favoriteHelpMessage ol {
    margin-top: 0;
    -webkit-padding-start: 17px;
}

.favoriteHelpMessage li {
    padding-left: 10px;
}

.menuPanelItem {
	width: 100%;
	height: 36px;
	margin-bottom: 5px;
	vertical-align: middle;
	padding-left: 5px;
	display: inline-block;
	box-sizing: border-box;
	font-weight: bold;
}

.menuPanelItem:hover {
    background-color: #e7f7fd;
}

.menuPanelItem + div div .menuPanelSubItem {
    width: 100%;
    padding-left: 20px;
    display: inline-block;
    vertical-align: middle;
    height: 30px;
    box-sizing: border-box;
}

.menuPanelSubItem:hover {
    background-color: #e7f7fd;
}

.menuPanelSubItem + div div .menuPanelSubItem {
    width: 100%;
    padding-left: 40px;
    display: inline-block;
    vertical-align: middle;
    height: 30px;
    box-sizing: border-box;
}

.menuPanelItem.closed + div, .menuPanelSubItem.closed + div {
    height: 0px;
}

.menuPanelStatus {
	padding-left: 20px;
	padding-top: 10px;
}

@keyframes menupanelCloseAnimation {
    0% {
        height: auto;
    }
    100% {
        height: 0px;
    }
}

.menuPanelItemRadio {
    display: none;
}

.menuPanelItemOpen {
    float: right;
    margin-top: 8px;
    margin-right: 10px;
    cursor: pointer;
}

.menuPanelItem span label, .menuPanelSubItem span label {
    font-family: Helvetica;
    width: auto;
    font-size: 16px;
    line-height: 2.25;
    text-align: left;
    color: #013668;
    cursor: pointer;
}

.menuPanelItem.selected span label, .menuPanelSubItem.selected span label {
    font-weight: bold;
}


.menuPanelItem.selected, .menuPanelSubItem.selected {
    background-color: #e7f7fd;
}


.favoriteEditorItemCheckbox {
    float: right;
    margin-top: 8px;
    margin-right: 15px;
}

.menuPanelLabel {
    text-transform: uppercase;
    width: 75px;
    height: 14px;
    font-family: Helvetica;
    font-size: 12px;
    text-align: left;
    color: #9b9b9b;
}

.favoriteEditorParent {
    width: 240px;
    position: relative;
    left: 30px;
    top: 25px;
}

.favoriteEditor {
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.24);
    border: solid 1px #e4e4e4;
    position: absolute;
    border-radius: 3px;
    z-index: 10;
}

.favoriteEditor::before {
    content: "";
    border-color: #fff;
    border-width: 8px;
    border-style: solid;

    box-shadow: -1px -1px 1px 0 rgba(0, 0, 0, 0.24);

    position: absolute;
    top : -8px;
    left: 34px;

    transform: rotate(45deg);
}

.favoriteEditor .header {
    text-transform: uppercase;
    font-size: 12px;
    text-align: center;
    font-family: Helvetica;
    color: #9b9b9b;
    margin-top:5px;
    margin-bottom:5px;
}

.favoriteEditorItem {
    height: 48px;
    background-color: #ffffff;
    border-color: #d1d1d1;
    border-width: 1px;
    border-style: solid none solid none;

    margin-top: -1px;

    font-size: 16px;
    line-height: 1.5;
    color: #013668;

    box-sizing: border-box;
    padding-top: 12px;
    padding-left: 20px;
}

div.inProgress .downloadBackground {
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    border: solid 4px #d1d1d1;
    border-radius: 50%;
}

div.inProgress .downloadForeground {
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    border: solid 4px var(--kdl-color-primary-accent);
    border-radius: 50%;
    position: absolute;
    clip: rect(0px, 15px, 30px, 0px);
    margin-top: -30px;
    transform: rotate(0deg);
}

@-ms-keyframes spin {
    from {
        -ms-transform: rotate(0deg);
    } to {
          -ms-transform: rotate(360deg);
      }
}
@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0deg);
    } to {
          -moz-transform: rotate(360deg);
      }
}
@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    } to {
          -webkit-transform: rotate(360deg);
      }
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    } to {
          transform: rotate(360deg);
      }
}

div.inProgress .downloadCover, div.inProgress .downloadForeground {
    -webkit-animation-name: spin;
    -webkit-animation-duration: 1500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(.65,.05,.36,1);

    -moz-animation-name: spin;
    -moz-animation-duration: 1500ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: cubic-bezier(.65,.05,.36,1);

    -ms-animation-name: spin;
    -ms-animation-duration: 1500ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: cubic-bezier(.65,.05,.36,1);

    animation-name: spin;
    animation-duration: 1500ms;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.65,.05,.36,1);
}

div.downloaded .downloadBackground {
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    border: solid 4px #d1d1d1;
    border-radius: 50%;
    background: transparent;

    animation: completeBg 2000ms forwards;

}

.partially-sighted div.downloaded .downloadBackground {
    background-color: var(--kdl-color-primary-accent) !important;
}

.errorBackground.fa-exclamation-triangle {
    font-family: FontAwesome;
    font-size: xx-large;
    text-align: left;
    color: darkorange;
}

@keyframes completeBg {
    0%, 60% {
        background: transparent;
        border: solid 4px #d1d1d1;
    }
    100% {
        background-color: var(--kdl-color-primary-accent);
        border: var(--kdl-color-primary-accent);
    }

}

div.downloaded .downloadForeground {
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    border-radius: 50%;
    position: absolute;
    margin-top: -30px;
    border: solid 4px var(--kdl-color-primary-accent);
    clip: rect(0px, 15px, 30px, 0px);

    animation: completeFg 2000ms forwards, completeFade 2000ms forwards;
    animation-timing-function: cubic-bezier(.65,.05,.36,1), ease;
}

.partially-sighted div.downloaded .downloadForeground {
    background-color: transparent !important;
}

@keyframes completeFg {
    0% {
        transform: rotate(0deg);
    }
    60% {
        transform: rotate(360deg);
        border: solid 4px var(--kdl-color-primary-accent);
    }
    100% {
        border: solid 4px var(--kdl-color-primary-accent);
        transform: rotate(360deg);
    }
}

div.downloaded .downloadBackground::after {
    content: "\f00c";
    width: 30px;
    height: 30px;
    color: #000;
    font-family: FontAwesome;
    font-size: 20px;
    position: relative;
    top: 4px;
    color: #fff;

    animation-name: completeTick;
    animation-duration: 2000ms;
}

div.downloaded .downloadCover {
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    border: solid 4px #d1d1d1;
    border-radius: 50%;
    position: absolute;
    clip: rect(0px, 15px, 30px, 0px);
    margin-top: -30px;

    animation: completeCover 2000ms steps(1, end) forwards, completeFade 2000ms;
    /*animation-delay: 0ms, 1200ms;*/
}

.partially-sighted .downloadCover {
    background-color: transparent!important
}

@keyframes completeCover {
    0% {
        border: solid 4px #d1d1d1;
        clip: rect(0px, 15px, 30px, 0px);
    }
    30%, 60% {
        border: solid 4px var(--kdl-color-primary-accent);
        clip: rect(0px, 30px, 30px, 15px);
    }
    100% {
        border: solid 4px var(--kdl-color-primary-accent);
    }
}

@keyframes completeFade {
    0%, 60% {
        opacity: 1;
        /*border: solid 4px var(--kdl-color-primary-accent);*/
    }
    100% {
        opacity: 0;
        /*border: solid 4px #0f0;*/
    }
}

@keyframes completeTick {
    0%, 60% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

div.inProgress .downloadCover {
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    border-radius: 50%;
    position: absolute;
    clip: rect(0px, 30px, 30px, 15px);
    margin-top: -30px;
    border: solid 4px var(--kdl-color-primary-accent);

    -webkit-animation-delay: 400ms;
    -moz-animation-delay: 400ms;
    -ms-animation-delay: 400ms;
    animation-delay: 400ms;
}

div.errorBackground .downloadErrorTooltipText {
    display: none;
}
div.errorBackground:hover .downloadErrorTooltipText {
    display: block;
    left: 0px;
}

.downloadSelected {
    float: left;
    position: absolute;
    bottom: 0;
    width: 65%;
    background-color: #ffffff;
    height: 80px;

    font-family: Helvetica;
    font-size: 20px;
    font-weight: bold;

    padding: 23px 20px;
    box-sizing: border-box;

    border-top: 1px #d1d1d1 solid;
    border-left: 1px #d1d1d1 solid;
    border-right: 1px #d1d1d1 solid;

    pointer-events: all;
}

.open.downloadSelected {

}

.closed.downloadSelected {
    display: none;
}


#menu input[type='checkbox'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;

    background-color: #ffffff;
    border: solid 1px #99dff9;
}

#menu input[type='checkbox']:disabled {
    background-color: #f3f3f3;
    border: solid 1px #d8d8d8;
}

#menu input[type='checkbox']:checked::after {
    content: url(../pic/content/menu/check-blue.png);
    top: 2px;
    left: 2px;
}

#menu input[type='checkbox']:checked:disabled::after {
    content: url(../pic/content/menu/check-grey.png);
    top: 2px;
    left: 2px;
}

.layer {
    width: 14px;
    height: 12px;
    font-family: FontAwesome;
    font-size: 12px;
    text-align: center;
    color: #d1d1d1;
}

/*-------------------------------- List Panel --------------------------------*/
#listTable {
    border-collapse: collapse;
    border: solid 1px rgba(0,0,0,0.2);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    width: 100%;
}
#listTable thead {
    border-radius: 4px;
    background-color: #e6f7fe;
    border: solid 1px #99dff9;
}

#listTableHeader1 {
    height: 39px;
    text-align: left;
    vertical-align: bottom;
}
.listTableHeader th:nth-child(1) {
    width: 4%;
}
.listTableHeader th:nth-child(2) {
    width: 15%;
}
.listTableHeader th:nth-child(3) {
    width: 35%;
}
.listTableHeader th:nth-child(4), .listTableHeader th:nth-child(5) {
    width: 11%;
}
.listTableHeader th:nth-child(6) {
    width: 10%;
    padding-left: 15px;
}
.listTableHeader th:nth-child(7) {
    width: 15%;
}

.listTableHeader {
    background-color: #e6f7fe;
}
.listTableHeader label {
    font-family: Helvetica;
    font-size: 16px;
    line-height: 1.5;
    color: #003767;
    font-weight: normal;
    float:left;
}

.dateLabel{
    font-family: Helvetica;
    font-size: 16px;
    line-height: 1.5;
    color: #003767;
    font-weight: normal;
    padding-top: 5px;
}
.listTableHeader a{
    text-decoration: none;
}
.wicket_orderUp label, .wicket_orderDown label{
    font-weight: bold;
}
.sortImage {
    opacity: 0.2;
    padding-left: 4px;
    padding-top: 5px;
    float: left;
}
.wicket_orderUp img, .wicket_orderDown img{
    opacity: 1;
}


#listTableHeader2 {
    height: 59px;
}
#listTableHeader2Checkbox {
    display: none;
}
input.CheckBox[type="checkbox"] + .SelectAllCheckboxLabel {
    width: 18px;
    height: 18px;
    border-radius: 2px;
    background-color: #ffffff;
    border: solid 1px #99dff9;
}

.listTableHeader  input.CheckBox[type="checkbox"] + .SelectAllCheckboxLabel.statusSelectAll {
    margin: 0 9px;
}

input.CheckBox[type="checkbox"].plus + .SelectAllCheckboxLabel {
    background: url('../pic/content/list/check-blue.png') no-repeat center #ffffff;
}

.partially-sighted input.CheckBox[type="checkbox"].plus + .SelectAllCheckboxLabel {
    background: url('../pic/content/list/ps-check-blue.png') no-repeat center #000000!important;
}

input.CheckBox[type="checkbox"].minus + .SelectAllCheckboxLabel {
    background: url('../pic/content/list/line-centered.png') no-repeat center #ffffff;
}

.partially-sighted input.CheckBox[type="checkbox"].minus + .SelectAllCheckboxLabel {
    background: url('../pic/content/list/ps-line-centered.png') no-repeat center #000000!important;
}

#listTableHeader2Column2{
    width: 128px;
    white-space: nowrap;
}
#listTableHeader2Column2 input[type="radio"] {
    display:none;
}
#listTableHeader2Column2 label {
    cursor: pointer;
}
.listTableHeader2UnreadLabel {
    background: url('../pic/content/list/unread-blue.png') no-repeat center;
    margin: 0px;
}

.partially-sighted .listTableHeader2UnreadLabel {
    background: url(../pic/content/list/ps-unread-blue.png) no-repeat center !important;
    background-size: 50% !important;
}

.listTableHeader2ReadLabel {
    background: url('../pic/content/list/read-blue.png') no-repeat center;
    margin: 0px;
}

.partially-sighted .listTableHeader2ReadLabel {
    background: url(../pic/content/list/ps-read-blue.png) no-repeat center !important;
    background-size: 50% !important;
}

.listTableHeader2TodoLabel {
    background: url('../pic/content/list/todo-blue.png') no-repeat center;
    margin: 0px;
}

.partially-sighted .listTableHeader2TodoLabel {
    background: url(../pic/content/list/ps-todo-blue.png) no-repeat center !important;
    background-size: 50% !important;
}

.listTableHeader2ButtonNotChecked + label {
    background-color: #e6f7fe;
}
.listTableHeader2ButtonChecked + label {
    background-color: #ffffff;
}
.listTableHeader2UnreadLabel, .listTableHeader2ReadLabel, .listTableHeader2TodoLabel {
    width: 33%;
    max-width: 40px;
    height: 40px;
    border-radius: 4px;
    border: solid 1px #99dff9;
    border-collapse: collapse;
    float: left;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    -webkit-background-size: 50%;
    background-size: 50%;
}
.listTableHeader2ButtonTooltip, .listTableBodyDownloadTooltip, .tooltipDiv {
    display: none;
    width: 1px;
    position: relative;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
}

.listTableHeader2UnreadLabel:hover + .listTableHeader2ButtonTooltip, .listTableHeader2ReadLabel:hover + .listTableHeader2ButtonTooltip, .listTableHeader2TodoLabel:hover + .listTableHeader2ButtonTooltip {
    display: inline-block;
}

button.listTableBodyDownloadButton:hover + .needTooltip.listTableBodyDownloadTooltip, button.listTableBodyDownloadPdfButton:hover + .needTooltip.listTableBodyDownloadTooltip, button.listTableBodyDownloadButton:hover + span > .needTooltip {
    display: block;
}

.tooltipDiv {
    left: calc(-50%);
}

.listTableHeader2ButtonTooltipText::after, .listTableBodyDownloadTooltipText::after, .listTableBodyDownloadPdfTooltipText::after, div.errorBackground .downloadErrorTooltipText::after, .tooltipText::after {
    content: "";
    border-style: solid;
    border-width: 8px;
    border-color: transparent transparent #003767 transparent;
    position: absolute;
    top: -48%;
    left: calc(10% + 30px);
}

.partially-sighted .listTableHeader2ButtonTooltipText::after, .partially-sighted .listTableBodyDownloadTooltipText::after, .partially-sighted .listTableBodyDownloadPdfTooltipText::after, .partially-sighted div.errorBackground .downloadErrorTooltipText::after, .partially-sighted .tooltipText::after {
    border-color: transparent transparent #ffff00 transparent;
}

.listTableHeader2ButtonTooltipText, .listTableBodyDownloadTooltipText, .listTableBodyDownloadPdfTooltipText, div.errorBackground .downloadErrorTooltipText, .tooltipText {
    background-color: #003767;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    z-index: 10;
    position: absolute;
    top: 40px;
    padding: 10px 20px;

    font-family: Helvetica;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
}
div.errorBackground .downloadErrorTooltipText {
    width: 250px;
    top: auto;
}
div.errorBackground .downloadErrorTooltipText::after {
    top: -35%;
    left: 90%;
}

#listTableHeader2Button1TooltipText {
    left: calc( -160px + 20px - 8px );
}
#listTableHeader2Button2TooltipText {
    left: calc( -120px + 20px );
}
#listTableHeader2Button3TooltipText {
    left: calc( -80px + 20px );
}

.partially-sighted #listTableHeader2Button1TooltipText {
    box-shadow: inset 0 0 0 2px #ffff00;
}
.partially-sighted #listTableHeader2Button2TooltipText {
    box-shadow: inset 0 0 0 2px #ffff00;
}
.partially-sighted #listTableHeader2Button3TooltipText {
    box-shadow: inset 0 0 0 2px #ffff00;
}

.partially-sighted .tooltipText {
    box-shadow: inset 0 0 0 2px #ffff00;
}
.partially-sighted .statusRadioGroup {
    box-shadow: inset 0 0 0 2px #ffff00;
}
.partially-sighted #statusSelectForm3d9 {
    background-color: green!important
}
.partially-sighted div[class^="statusSelect"] {
    background-color: transparent !important;
}
.partially-sighted form[id^="statusSelectForm"] {
    background-color: transparent !important;
}
.partially-sighted button[id^="dlButton"] {
    border: solid 1px var(--kdl-color-primary-accent);
}
.partially-sighted button[class^="listTableBodyDownloadButton"] {
    border: solid 1px var(--kdl-color-primary-accent);
}
.partially-sighted button[class^="primaryButton"] {
    border: solid 1px var(--kdl-color-primary-accent);
}
.partially-sighted img[class ^="khArrows"], .partially-sighted img[class ^="khAwards"] {
    display: none
}
.partially-sighted img[src ="pic/content/menu/chevron-up.png"]{
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    padding-left: 14px;
    background: url(../pic/content/menu/ps-chevron-up.png) left top no-repeat !important;;
}
.partially-sighted img[src ="pic/content/menu/chevron-down.png"]{
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    padding-left: 14px;
    background: url(../pic/content/menu/ps-chevron-down.png) left top no-repeat !important;;
}
.partially-sighted img[src ="pic/content/list/sort-asc.png"]{
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    padding-left: 12px;
    margin-top: 5px;
    margin-left: 4px;
    background: url(../pic/content/list/ps-sort-asc.png) no-repeat !important;;
}
.partially-sighted img[src ="pic/content/list/sort-desc.png"]{
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    padding-left: 12px;
    margin-top: 5px;
    margin-left: 4px;
    background: url(../pic/content/list/ps-sort-desc.png) no-repeat !important;;
}

.filterField {
    margin: 0 5px 0 0;
    height: 40px;
    border-radius: 4px;
    background-color: #ffffff;
    border: solid 1px #99dff9;

    color: #003767 !important;
    font-size: 16px;
    line-height: 1.5;
}
#listDateLabel{
    margin: 0 5px 0 0;
    height: 40px;
    border-radius: 4px;
    background-color: #F9F9F9;
    border: solid 1px #fa6d16;

    color: #003767 !important;
    font-size: 16px;
    line-height: 1.5;
}
#listTableHeader2Name{
    width: 100%;
}
.filterDropDownField {
    width: 97%;
    overflow: hidden;
    white-space: nowrap;
}

.filterDropDownField label {
    line-height: 40px;
    padding: 0 25px 0 6px;
}

#listTableHeader2Filter {
    text-align: center;
    padding: 0 10px;
    display: inline-flex;
}
.listTableHeader2FilterButton1, .listTableHeader2FilterButton2 {
    padding: 5px;
    border: 0;
    height: 50px;
    vertical-align: middle;
    box-shadow: inset -1px 0 0 0 rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background-color: #ffffff;
    border: solid 1px #fa6d16;
    color: #fa6d16;
    border-radius: 4px;
    cursor: pointer;
    outline: none;
}
.listTableHeader2FilterButton1 {
    display: inline-flex;
    align-items: center;
}

.listTableHeader2FilterButton1:hover, .listTableHeader2FilterButton2:hover {
    background-color: #d85505;
}

.listTableHeader2FilterButton1 {
    width: 70%;
    min-width: 220px;
}
.orange-calendar {
    margin-right: 5px;
    width: 18px;
    height: 18px;
    object-fit: contain;
    padding: 2px;
    background: url('../pic/content/list/calendar-orange.png') no-repeat center transparent;
    float: left;
    padding-top: 15px;
}
.listTableHeader2FilterButton1:hover .orange-calendar {
    background: url('../pic/content/list/calendar-white.png') no-repeat center transparent;
}

.partially-sighted .orange-calendar {
    background: url(../pic/content/list/calendar-orange.png) no-repeat center transparent!important;
}

.listTableHeader2FilterButton1Label {
    height: 24px;
    font-family: Helvetica;
    font-size: 100%;
    font-weight: bold;
    line-height: 1.33;
    text-align: center;
    color: #fa6d16;
    padding-top: 10px;
    cursor: pointer;
}
#listTableHeader2FilterButton1:hover label {
    color: #ffffff;
}
#listTableHeader2FilterButton1:hover .listTableHeader2FilterButton1Image {
    background: url('../pic/content/list/calendar-white.png') no-repeat center transparent;
}
.listTableHeader2FilterButton2 {
    width: 23%;
    max-width: 30px;
}
.chevron-down-white {
    width: 14px;
    height: 14px;
    object-fit: contain;
    padding: 2px;
    background: url('../pic/content/list/chevron-down-orange.png') no-repeat center transparent;
}
.listTableHeader2FilterButton2:hover #listTableHeader2FilterButton2Image {
    background: url('../pic/content/list/chevron-down-white.png') no-repeat center transparent;
}

.partially-sighted .chevron-down-white {
    background: url(../pic/content/list/chevron-down-orange.png) no-repeat center transparent!important;
}

.listTableHeader2FilterButton2:hover + .tooltipDiv {
    display: inline-block;
    width: 0px;
    left: 0px;
    white-space: normal;
}

.listTableHeader2FilterButton2 + .tooltipDiv .tooltipText {
    right: 100%;
    width: 200px;
    height: 50px;
}

.listTableHeader2FilterButton2 + .tooltipDiv .tooltipText::after {
    left: auto;
    right: 10px;
    top: -22%;
}

.dropDownUp {
    background: url('../pic/content/list/chevron-up.png') no-repeat 95% #ffffff;
}

.partially-sighted .dropDownUp {
    background: url('../pic/content/menu/ps-chevron-up.png') no-repeat 95% #000000 !important;
}

.dropDownDown {
    background: url('../pic/content/list/chevron-down.png') no-repeat 95% #ffffff;
}

.partially-sighted .dropDownDown {
    background: url('../pic/content/menu/ps-chevron-down.png') no-repeat 95% #000000 !important;
}

.selectDropDown {
    position: absolute;
}
.selectList {
    position: absolute;
    background-color: #ffffff;
    border: solid 1px var(--kdl-color-primary-accent);
    border-radius: 4px;
    padding: 10px;
    z-index: 10;
    max-width: 25rem;
}

.selectListTd {
    display: flex;
    white-space: nowrap;
    max-width: 100%
}

.close-dark {
    margin-top: 4px;
    float: right;
}

.selectList > div  {
    float: left;
}

#selectCheckBox {
    display: none;
}
.selectCheckBoxLabel {
    margin-right: 10px;
}


#listDateLabel {
    width: 100%;
    max-width: 125px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding-right: 5px;
    box-sizing: border-box;
    float: left;
}

.listDateLabelFrom, .listDateLabelTill {
    width: 40px;
    margin: 5px;
    font-family: Helvetica;
}

#createdFromYear,
#createdTillYear,
#closedFromYear,
#closedTillYear {
    font-size: 10px;
    font-weight: bold;
    line-height: 2.4;
    text-align: left;
    color: #fa6d16;
    position: relative;
    top: -5px;
    left: -7px;
}

#createdFromDate,
#createdTillDate,
#closedFromDate,
#closedTillDate {
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
    color: #013668;
    position: relative;
    top: -15px;
}


#listTableHeader3{
    height: 60px;
}
#listTableHeader3Cell {
    padding: 0 15px;
}
#listTableHeader3Div {
    border-top: solid 1px #99dff9;
    text-align: center;
    padding: 10px;
}

#listTableHeader3ClearFilters {
    width: 180px;
    height: 30px;
    border-radius: 2px;
    background-color: #e6f7fe;
    border: solid 1px #003767;
}
#listTableHeader3ClearFilters label{
    font-family: Helvetica;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    color: #003767;
}


.listTableBodyRows {
    height: 84px;
    box-shadow: inset 0 -1px 0 0 #e5e5e5;
    text-align: center;
    font-family: Helvetica;
    color: #003767;
}

.listTableBodyRowsHighlight {
    font-weight: 600;
}

.partially-sighted .listTableBodyRows {
    border: solid #99dff9;
    border-width: 1 1px;
}

.listTableBodyRows.selected {
    background-color: #f3f3f3;
}

.listTableBodyRows.unselected {
    background-color: #ffffff;
}

.listTableBodyRows:hover {
    background-color: #e3f8ff;
}

.normalText {
    font-weight: normal;
}
.CheckBox {
    display: none;
}
.CheckBoxLabel {
    border-radius: 2px;
    background-color: #ffffff;
    border: solid 1px #99dff9;
    width: 18px;
    height: 18px;
    display: inline-block;
}

input[type="checkbox"][checked="checked"] + .CheckBoxLabel {
    background: url('../pic/content/list/check-blue.png') no-repeat center #ffffff;
}

.partially-sighted input[type="checkbox"][checked="checked"] + .CheckBoxLabel {
    background: url('../pic/content/list/ps-check-blue.png') no-repeat center #000000!important;
}

.listTableBodyStatus {
    margin: 0px 40px 0px 20px;
    height: 14px;
    cursor: pointer;
}

.listTableBodyStatusImage {
    float: left;
    width: 12px;
    height: 12px;
    margin-right: 12px;
}
.unreadDocument .listTableBodyStatusImage {
    background-color: var(--kdl-color-primary-accent);
    border-radius: 50%;
}

.partially-sighted .unreadDocument .listTableBodyStatusImage {
    background-color: #ffff00!important;
    border-radius: 50%;
}

.readDocument .listTableBodyStatusImage {
    border-radius: 50%;
    background-color: #ffffff;
    border: solid 1px #ccc;
}

.partially-sighted .readDocument .listTableBodyStatusImage {
    border: solid 1px #ffff00;
}

.todoDocument .listTableBodyStatusImage {
    background-image: url('../pic/content/list/todo-blue.png');
}

.partially-sighted .todoDocument .listTableBodyStatusImage {
    background-image: url('../pic/content/list/ps-todo-blue.png')!important;
}

.listTableBodyStatusLabel {
    float: left;
    font-family: Helvetica;
    font-size: 11px;
    text-align: left;
    color: #003767;
    cursor: pointer;
}

.unreadDocument .listTableBodyStatusLabel {
    font-weight: bold;
}

.listTableBodyStatusTooltip {
    position: absolute;
    pointer-events: none;
    display: none;
}

.partially-sighted .listTableBodyStatusTooltip {
    background-color: transparent !important
}

.listTableBodyStatus:hover .listTableBodyStatusTooltip {
    display: block;
}
.listTableBodyStatusTooltipLabel {
    position: relative;
    top: -40px;
    left: 10px;
    padding: 10px 0 10px 10px;
    border-radius: 4px;
    white-space: nowrap;

    background-color: #003767;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
}
.listTableBodyStatusTooltipLabel::after {
    content: "";
    position: relative;
    top: calc( 1em + 18px );
    right: 80%;
    border: 8px solid transparent;
    border-top-color: #003767;
}

.partially-sighted .listTableBodyStatusTooltipLabel {
    box-shadow: inset 0 0 0 2px #ffff00;
}

.partially-sighted .listTableBodyStatusTooltipLabel::after {
    border-top-color: #ffff00;
}

.partially-sighted .listTableBodyStatusTooltipLabel::after {
    border-top-color: #ffff00;
}

.listTableBodyName {
    font-size: 18px;
}
.listTableBodyNameSmall {
    font-size: 14px;
    font-weight: 200;
}
.unreadDocument .listTableBodyName {
    font-weight: bold;
}
.listTableBodyNumber{
    font-size: 16px;
    line-height: 1.5;
}
#listTableBodyType, #listTableBodySubtype, #listTableBodyCreated {
    font-size: 14px;
    line-height: 1.71;
}

.unreadDocument #listTableBodyType, .unreadDocument #listTableBodySubtype, .unreadDocument #listTableBodyCreated {
    font-weight: bold;
}

.listTableBodyDownloadButton {
    height: 40px;
    border-radius: 4px;
    font-family: Helvetica;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
}
.primaryButton {
    width: 95%;
    background-color: var(--kdl-color-primary-accent);
    color: #ffffff;
    border: none;
}
.secondaryButton {
    width: 95%;
    background-color: #ffffff;
    border: solid 1px var(--kdl-color-primary-accent);
    color: var(--kdl-color-primary-accent);
}

.contentHeader {
    font-size: 26px;
    background-color: #cceffc;
    padding: 10px 20px 10px 20px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color: #003767;
    font-weight: bold;
    display: flex;
}

.docFlowHeader {
    width: 100%;
}

.treasuryDocFlowHeader {
    width: 100%;
    display: flex;
}
/****************************/
/*							*/
/*		DOCFLOW				*/
/*							*/
/****************************/
.newDocFlowButton {
    width: 80%;
    background: #fa6d16 !important;
    color: #ffffff !important;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    margin: 20px 10px 20px 25px;
    font-family: Helvetica !important;
    cursor: pointer;
}

.confirmButton {
    width: auto;
    min-width: 130px;
}

.docFlowName {
	word-wrap: break-word;
    width: 75%;
    display: block;
    float: left;
    position: relative;
    white-space: pre-wrap;
    margin-right: 10px;
}

.docFlowSubName {
	word-wrap: break-word;
    width: 75%;
    display: block;
    float: left;
    position: relative;
    white-space: pre-wrap;
    margin-right: 10px;
    font-size: 1rem;
    text-align: right;
    align-self: center;
}

.docFlowDescription {
    height: 8rem;
	font-size: 12px;
	font-style: normal;
	word-wrap: break-word;
    width: 95%;
    display: block;
    color: #003767;
    padding-bottom: 10px;
    font-weight: bold;
}
.docFlowDescription p {
	margin: 0px;
}
.docFlowDescription .text {
	text-align: justify;
}
.docFlowDetails {
	padding: 10px;
}
.docFlowButton {
    background-color: #fa6d16;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    margin: 0px 3px 0px 3px;
    cursor: pointer;
}
.docFlowButton_disabled {
    background-color: #cccccc !important;
    border-width: 0px !important;
    cursor: default !important;
}
.docFlowButton_disabled label {
	color: #ffffff !important;
    cursor: default !important;
}
.docButton {
    background-color: var(--kdl-color-primary-accent);
    float: right;
}
.docButtonLong {
    width: 180px;
    padding: 0px 2px 0px 2px;
}

.inverseDocButton {
    border: 1px solid #00aeef;
    border-radius: 20px;
    width: 7rem;
    text-align: center;
    padding: 0.2rem 0.7rem;
}

.docClose {
	float: right;
    background-color: #003767;
    display: block;
    position: relative;
    white-space: nowrap;
    padding: 0px 15px;
    width: 205px;
}
.docName {
	float: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 10px;
    line-height: 40px;
    color: #003767;
    font-size: 13px;
    max-width: 850px;
    width: calc(100% - 540px);
}

.documentFuncPanel {
	float: right;
	width: 520px;
}

.divStatus {
    float: right;
	/*width: 135px;*/
}

.docStatus {
	float: right;
    /*width: 10%;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /*padding-left: 10px;*/
    font-weight: bold;
    vertical-align: bottom;
    line-height: 40px;
    /*width: 125px;*/
}

.docStatus_REQUESTED_BY_BANK,
.docStatus_SENT_TO_BANK,
.docStatus_SENT_TO_CUSTOMER,
.docStatus_UNDER_REVIEW,
.docStatus_ACCEPT,
.docStatus_REJECTED,
.docStatus-zold {
	color: #3a990d;
}

.docStatus-kek {
	color: #103769;
}

.docStatus-piros {
	color: #d00000;
}

.section {
    border-left-width: 3px;
    border-left-style: solid;
    padding-left: 10px;
    margin-bottom: 20px;
    margin-top: 10px;
    padding-bottom: 15px;
    background-color: #f9f9f9;
}
.sectionHeader {
	padding: 10px;
	font-weight: bold;
	font-size: 17px;
}
.sectionDescription {
	padding: 10px;
	font-size: 12px;
}
.sectionBody {
	padding: 10px;
}
.documentBody {
	margin: 10px 0px 10px 0px;
	display: flex;
	align-items: center;
    width: 100%;
    justify-content: space-between;
}
.documentBody .fileUploadForm {
	float: right;
	margin-block-end: 0;
	margin: 1px 0px;
}

.documentBody .fileUploadForm input[type='file'] {
    border: none;
    border-radius: 4px;
    padding: 0px;
    width: 100px;
    height: 40px;
}

.documentBody .fileUploadForm input[type='file']::-webkit-file-upload-button {
    visibility: hidden;
}

.documentBody .fileUploadForm input[type='file']::after {
	content: attr(value);
    position: relative;
    top: -18px;
    left: -3px;
    bottom: 0px;
    background: #795548;
    color: white;
    text-align: center;
    font-size: 17px;
    line-height: 2;
    padding: 10px 20px 13px 20px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    margin: 0px 3px 0px 3px;
    background-color: var(--kdl-color-primary-accent);
}

.treasuryDocumentBody {
	margin: 10px 0px 10px 0px;
	display: grid;
	grid-template-columns: 2fr 1fr 2fr;
	align-items: center;
    width: 100%;
}

.documentName {
	text-overflow: ellipsis;
	min-width: 300px;
	overflow: hidden;
	white-space: nowrap;
}	

.description {
	color: var(--kdl-color-primary-accent);
}

.sectionStatus_REJECTED {
	border-left-color: #d00101;
}

.sectionStatus_ACCEPTED {
	border-left-color: #3a990d;
}

.sectionStatus_DEFAULT {
	border-color: var(--kdl-color-primary-accent);
}

.docAdd {
	background-color: #003767;
	border: none;
	border-radius: 50px;
	height: 25px;
    width: 25px;
    margin: 10px 10px 10px 5px;
}
button.docAdd label {
	padding: 0px;
    margin: 0px;
}

.btStartDocFlow {
	width: auto;
    alignment: center;
}

.msgError {
	color: #d00101;
	font-weight: bold;
	margin: 5px 0px 5px 10px;
}

.msgInfo {
	color: var(--kdl-color-primary-accent);
	margin: 5px 0px 5px 10px;
}

.msgSignatory {
    color: var(--kdl-color-primary-accent);
    margin: 5px 0px 5px 10px;
}

div.msgInfo:before {
	background-image: url('../pic/comment-24px-blue.svg');
	transform: scaleX(-1);
	background-size: 15px 15px;
    display: inline-block;
    width: 15px; 
    height: 15px;
	content: "";
	margin-right: 5px;
	vertical-align: middle;
}

.msgWarning {
	color: #fa6408;
	background-color: #f9eee7;
	line-height: 20px;
    padding: 10px;
    margin-top: 5px;
    font-weight: bold;
}

div.msgWarning:before {
	background-image: url('../pic/warning-24px-orange.svg');
	background-size: 20px 20px;
    display: inline-block;
    width: 20px; 
    height: 20px;
	content: "";
	margin-right: 5px;
	vertical-align: middle;
}

.btSectionSend {
	width: 140px;
}

.sectionSend {
	background-image: url('../pic/send-24px-orange.svg');
	background-size: 20px 20px;
    display: inline-block;
    width: 20px; 
    height: 20px;
	content: "";
	margin-right: 5px;
	vertical-align: middle;
}

.divStatusIcon {
    float: right;
	/*width: 25px;*/
}

.docflow-icon {
    height: 40px;
    width: 25px;
	background-size: 17px;
	float: right;
}

.divBtRemove {
    float: right;
	width: 28px;
}

a.docRemove {
	font-size: 1.5em;
	line-height: 40px;
	color: #103769;
	float: right;
	padding-left: 10px;
	width: 18px;
}

.icon-beerkezett-kek {
	background: url('../pic/1-beerkezett-kek.svg') no-repeat;
	background-position: center;
}

.icon-beerkezett-zold {
	background: url('../pic/1-beerkezett-zold.svg') no-repeat;
	background-position: center;
}

.icon-bekuldesre-kesz-kek {
	background: url('../pic/2-bekuldesre-kesz-kek.svg') no-repeat;
	background-position: center;
}

.icon-bekuldott-kek {
	background: url('../pic/3-bekuldott-kek.svg') no-repeat;
	background-position: center;
}

.icon-banki-feldolgozas-alatt-kek {
	background: url('../pic/4-feldolgozas-alatt-kek.svg') no-repeat;
	background-position: center;
}

.icon-javitasra-visszaadott-piros {
	background: url('../pic/5-javitasra-var-piros.svg') no-repeat;
    background-position: center;
}

.icon-javitott-elokeszitese-kek {
	background: url('../pic/6-bekuldesre-kesz-kek.svg') no-repeat;
	background-position: center;
}

.icon-javitott-banknak-tovabbitva-kek {
	background: url('../pic/7-bekuldott-kek.svg') no-repeat;
	background-position: center;
}

.icon-elfogadott-zold {
	background: url('../pic/8-elfogadott-zold.svg') no-repeat;
	background-position: center;
}

.icon-alairt-zold {
	background: url('../pic/9-alairt-zold.svg') no-repeat;
	background-position: center;
}


/****************************/
/*							*/
/*		DOCFLOW	- END		*/
/*							*/
/****************************/

.contentBody {
    border-color: #cceffc;
    border-width: 1px;
    border-style: solid;
    padding: 20px 20px 0px 20px;
}

.contentBody label {
	margin: 5px 5px 5px 5px;
	color: #003767;
}

.contentBody button label {
	color: #ffffff;
}

.contentBody select {
	min-width: 200px;
}

#menuPanelFavorites {
    margin-top: 10px;
}

input[type='button'].primaryButtonModal,
input[type='button'].primaryButtonModal:hover:enabled{
    width: 150px;
    height: 40px;
    background-color: var(--kdl-color-primary-accent);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-family: Helvetica;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    padding:0;
}

input[type='button'].secondaryButtonModal,
input[type='button'].secondaryButtonModal:hover:enabled{
    width: 150px;
    height: 40px;
    background-color: #ffffff;
    border: solid 1px var(--kdl-color-primary-accent);
    color: var(--kdl-color-primary-accent);
    border-radius: 4px;
    font-family: Helvetica;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    padding:0;
}

input[type='button'].greenFrameButtonModal,
input[type='button'].greenFrameButtonModal:hover:enabled{
    width: 150px;
    height: 40px;
    background-color: white;
    color: green;
    border: none;
    border-radius: 4px;
    font-family: Helvetica;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    padding:0;
    border: 1px solid green;
}

input[type='button'].redFrameButtonModal,
input[type='button'].redFrameButtonModal:hover:enabled{
    width: 150px;
    height: 40px;
    background-color: white;
    color: red;
    border: none;
    border-radius: 4px;
    font-family: Helvetica;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    padding:0;
    border: 1px solid red;
}

input[type='button'].orangeFrameButtonModal,
input[type='button'].orangeFrameButtonModal:hover:enabled{
    width: 150px;
    height: 40px;
    background-color: white;
    color: #fa6d16;
    border-radius: 4px;
    font-family: Helvetica;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    padding:0;
    border: 1px solid darkorange;
}

input[type='button'].orangeButtonModal,
input[type='button'].orangeButtonModal:hover:enabled{
    width: 150px;
    height: 40px;
    background-color: #fa6d16;
    color: white;
    border: none;
    border-radius: 4px;
    font-family: Helvetica;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    padding:0;
}

input[type='button'].orangeButtonModal:disabled {
    background: gray;
    color: white;
}
input[type='button'].orangeFrameButtonModal:disabled {
    background: white;
    border: 1px solid gray;
    color: gray;
}

.modalWindowDiv{
    padding: 0 15px 0;
}

.es3 {
    width: 31%;
    float: left;
    margin-left: 3px;
    font-size: 13px;
}

.notEs3Preview {
    width: 30%;
    float: left;
    margin-left: 3px;
    font-size: 20px;
}

.listTableBodyDownloadPdfButton {
    width: 43%;
    height: 40px;
    border-radius: 4px;
    font-family: Helvetica;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    float: right;
    margin-right: 7px;
    display: none;
}

#listDatePanel,
#parentDivForPositioning{
    position: relative;
}
#listDatePanelContainer {
    position: absolute;
    right: 0;
    top: 50px;
    background-color: #ffffff;
    border: solid 1px var(--kdl-color-primary-accent);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.24);
    border-radius: 4px;
    width: 290px;
    z-index: 1;
    padding: 10px;
}

#closeDatePanelContainer {
    position: absolute;
    right: -10rem;
    top: 50px;
    background-color: #ffffff;
    border: solid 1px var(--kdl-color-primary-accent);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.24);
    border-radius: 4px;
    width: 290px;
    z-index: 1;
    padding: 10px;
}

#listDatePanelButtonContainer {
    border-bottom: solid 1px #e6f7fe;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    padding: 10px 0;
}

.cancelBatchDownloadButton, .listDatePanelButton, .listDatePanelQuickFilterButton{
    height: auto;
    width: 110px;
    border-radius: 2px;
    border: solid 1px var(--kdl-color-primary-accent);
    margin: 5px;
    padding: 5px 10px;
    cursor: pointer;
}

.listDatePanelQuickFilterButton label {
    font-family: Helvetica;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    color: var(--kdl-color-primary-accent);
    cursor: pointer;
}
.listDatePanelQuickFilterButton:hover {
    background-color: var(--kdl-color-primary-accent);
}
.listDatePanelQuickFilterButton:hover label{
    color: #ffffff;
}
#listDatePanelCreatedFromContainer, #listDatePanelCreatedTillContainer{
    display: flex;
}

#listDatePanelCreatedFrom, #listDatePanelCreatedTill {
    width: 100px;
    border: 1px solid #99dff9;
    border-right: none;
    border-radius: 4px 0 0 4px;
    padding: 6px;
    color: #a6a6a6;
    font-size: 16px;
    font-family: Helvetica;
    background-color: #f9f9f9;
    cursor: default;
    pointer-events: none;
}
#listDatePanelCreatedFrom:disabled, #listDatePanelCreatedTill:disabled {
    color: #a6a6a6;
    background-color: #ffffff;
}


#listDatePanelCreatedFromCalendar, #listDatePanelCreatedTillCalendar {
    width: 20px;
    height: 15px;
    border: 1px solid #99dff9;
    padding: 8px 0;
    display: inline-block;
    vertical-align: top;
    border-left: none;
    border-radius: 0 4px 4px 0;
}
.listDatePanelDateLabel {
    width: 125px;
    font-family: Helvetica;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    color: #003767;
    margin-top: 5px;
    margin-bottom: 2px;
    cursor: default;
}
#listDatePanelDateDash {
    width: 5px;
}
#listDatePanelDateContainer, #listDatePanelDateLabelDiv {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

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

.calendarPanel {
    width: 245px !important;
    position: relative;
    left: -230px;
    top: -325px;
    margin-top: 10px;

    border: 1px solid #ccc;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    outline: none !important;

    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.arrow {
    content: "";
    border-style: solid;
    border-width: 10px;
    border-color: #FFFFFF transparent transparent transparent;
    position: absolute;
    right: 6px;
    top: 1px;
}
.arrow:after {
    content: "";
    border-style: solid;
    border-width: 10px;
    border-color: #FFFFFF transparent transparent transparent;
    position: absolute;
    right: 6px;
}


#yearPager, #monthPager {
    width: auto;
    height: 20px;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background: var(--kdl-color-primary-accent);
    color: #ffffff;
    font-family: Helvetica;
    font-size: 1em;
    font-weight: bold;
}

.calendarStepBack span, .calendarStepFwd span {
    cursor:pointer;
}

.calendarMonth {
    float: left;
    background-color: #ffffff;
}

.calendarDayName {
    width: 35px !important;
    height: 35px;
    float: left !important;
    background: var(--kdl-color-primary-accent);
    color: #FFFFFF;
    text-align: center;
    padding-top: 8px;
    box-sizing: border-box;
}
.calendarDayFiller, .calendarDay, .calendarInactive{
    width: 35px;
    height: 35px;
    float: left;
    text-align: center;
    padding-top: 8px;
    box-sizing: border-box;
}
.calendarDayFiller {
    background-color: #F9F9F9;
    color: #a6a6a6;
    cursor: default;
}
.calendarDay {
    background-color: #FFFFFF;
    cursor:pointer;
}
.calendarInactive{
    background-color: #e6f7fe;
    color: #a6a6a6;
    cursor: auto;
}
.calendarCurrentSelected, .calendarDay:hover {
    background: var(--kdl-color-primary-accent);
    border-radius: 4px;
    color: #FFFFFF;
}


.massDownloadPanel {
    width: 1px;
    position: relative;
    z-index: 1;
}
.massDownloadPanelDiv{
    width: 320px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    border: solid 1px #e4e4e4;
    border-radius: 4px;
    border-collapse: collapse;

    z-index: 10;
    padding: 20px 0px;
    text-align: left;

    position: absolute;
    right: 0px;
    top: 50px;
}

.downloadSelected .massDownloadPanelDiv {
    bottom: 60px;
    right: auto;
    top: auto;
    left: 20px;
}

.massDownloadPanelMassDownload {
    text-transform: uppercase;
    font-family: Helvetica;
    font-size: 12px;
    text-align: left;
    color: #a6a6a6;
    padding-bottom: 10px;
}
.massDownloadPanelMassDownloadDiv {
    padding: 0 20px;
}
.massDownloadPanelButton {
    width: 280px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    box-shadow: inset -1px 0 0 0 rgba(0, 0, 0, 0.2);

    background-color: #ffffff;
    border: 1px solid #fa6d16;
    cursor: auto;
}
.massDownloadPanelButton label{
    font-family: Helvetica;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    color: #fa6d16;
    width: 280px;
}
.massDownloadPanelButton:hover {
    background-color: #d85505;
}
.massDownloadPanelButton:hover label{
    color: #ffffff;
}
.massDownloadPanelDocument {
    font-family: Helvetica;
    font-size: 11px;
    text-align: center;
    color: #003767;
    margin-top: 5px;
}

.statusSelect {
    position: absolute;
}
.statusRadioGroup {
    position: relative;
    top: 17px;
    left: 40px;
    border: solid 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background: white;
    width: 250px;
    height: 45px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.statusRadioGroup::after {
    position: absolute;
    left: 10px;
    top: -18.5px;
    z-index: 10;
    content: "";
    border: 10px solid transparent;
    border-bottom-color: #FFFFFF;
}
.partially-sighted .statusRadioGroup::after {
    position: absolute;
    left: 10px;
    top: -18.5px;
    z-index: 10;
    content: "";
    border: 10px solid transparent;
    border-bottom-color: #ffff00;
}
.selectPanelAfter {
    position: absolute;
    left: 10px;
    top: -20px;
    content: "";
    border: 10px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.2);
}
.statusSelectDiv {
    width: 1px;
    height: 1em;
    border-left: solid 1px #ccc;
}
.statusSelectButton {
    display: none;
}
.statusSelectLabel {
    font-family: Helvetica;
    font-size: 11px;
    font-weight: bold;
    text-align: left;
    color: #003767;
    cursor: pointer;
}
.statusSelectButton:checked + label {
    border-bottom: solid 2px #003767;
}



.listPanelFooter {
    height: 72px;
    /*width: 100%;*/
    color: #013668;

    font-size: 16px;
    font-weight: bold;

    display: flex;
    justify-content: space-between;
    /*vertical-align: middle;*/

    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

.listPanelPagerInput {
    display: inline-block;
    width: 50px;
    margin: 0 5px 0 0;
    height: 40px;
    font-family: Helvetica;
    font-size: 16px;
    line-height: 1.5;

    color: #013668;
    border-radius: 4px;
    background-color: #ffffff;
    border: solid 1px #99dff9;
    text-align: center;
    font-weight: bold;
}

.listPanelPager {
    width: 40px;
    height:40px;
    border-radius: 4px;
    display: inline-block;
    margin: 0px 5px;
    color: #fff;
    text-align: center;
    box-sizing: border-box;
    padding: 12px 0px;
}

.listPanelPager.enabled {
    background-color: var(--kdl-color-primary-accent);
}

.listPanelPager.disabled {
    background-color: #d8d8d8;
}

.listPanelFooterFromTo {
    height: 30px;
    margin: 21px;
    background-color: #f3f3f3;

    padding: 4px 10px;
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* DOWNLOAD */


.bottomPanel {
    width: 1044px;
    margin-left: 220px;
    margin-right: auto;
    position: fixed;
    bottom: 0;
    pointer-events: none;
}
.partially-sighted .bottomPanel {
    background: rgba(0,0,0,0)!important;
}
.downloadPanel {
    float: right;
    position: relative;
    width: 365px;
    box-sizing: border-box;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    border: solid 1px #d1d1d1;
    border-radius: 4px;
    background-color: #ffffff;
    transition: all 2s;
    pointer-events: all;
}

.open.downloadPanel .downloadPanelHeader .downloadPanelArrow {
    background: url(../pic/content/download/arrow-down-dark.png);
}
.partially-sighted .open.downloadPanel .downloadPanelHeader .downloadPanelArrow {
    background: url(../pic/content/download/ps-arrow-down.png) no-repeat !important;;
}
.closed.downloadPanel .downloadPanelHeader .downloadPanelArrow {
    background: url(../pic/content/download/arrow-up-white.png);
}
.partially-sighted .closed.downloadPanel .downloadPanelHeader .downloadPanelArrow {
    background: url(../pic/content/download/ps-arrow-up.png) no-repeat !important;;
}
.disabled.downloadPanel .downloadPanelHeader .downloadPanelArrow {
    background: url(../pic/content/download/arrow-down-grey.png);
}

.downloadPanelHeader {
    width: 100%;
    height: 60px;
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    border: solid 1px #d1d1d1;
    vertical-align: middle;
    padding: 20px;
    box-sizing: border-box;
    cursor: pointer;
}

.open.downloadPanel .downloadPanelHeader {
    background-color: #ffffff;
    color: #013668;
}

.closed.downloadPanel .downloadPanelHeader {
    background-color: #013668;
    color: #ffffff;
    height: 80px;
    padding-top: 26px;
}

.disabled.downloadPanel .downloadPanelHeader {
    background-color: #ffffff;
    color: #d8d8d8;
    height: 80px;
    padding-top: 26px;
    cursor: default;
}

.downloadPanelHeader p {
    font-family: Helvetica;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    margin-left: 20px;
    margin-right: 20px;
    height: 24px;
}

.downloadPanelContents {
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
    height: 180px;
}

div.downloadPanel.animate {
    animation-duration: 200ms;
}

.closed.downloadPanel {
    animation: downloadPanelOpen forwards;
}
.disabled.downloadPanel {
    animation: downloadPanelOpen forwards;
    border-top: none;
    border-right: none;
    border-bottom: none;
}
.open.downloadPanel {
    animation: downloadPanelOpen reverse;
}
div.open + div .open.downloadPanel::after   {
    position: absolute;
    height: 79px;
    background-color: #fff;
    bottom: 0px;
    left: -2px;
    width: 3px;
    z-index: 100;
    content: "";
}

.downloadSelected.open + .disabled.downloadPanel::after {
    position: absolute;
    height: 79px;
    border-top: solid 10px #fff;
    border-bottom: solid 10px #fff;
    top: 1px;
    left: -2px;
    width: 3px;
    z-index: 100;
    content: "";
    box-sizing: border-box;
}

.cancelBatchDownload:before {
    font-family: FontAwesome;
    content: '\f00d';
    font-size: 2em;
    color: red;
}

#selectedListItemsButton:disabled{
    cursor: default;
}

@keyframes downloadPanelOpen {
    0% {
        bottom: 0px;
    }
    100% {
        bottom: -180px;
    }
}

@keyframes downloadPanelItemOpen {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.downloadPanel table {
    width: 100%;
    border-collapse: collapse;
}

.downloadItemRow {
    height: 50px;
}

.downloadItemRow::after {
    width:80%;
    margin-left: 10%;
    height:2px;
    background-color: #013668;
}

.downloadItemRow td p {
    width: 240px;
    word-wrap: break-word;
}

.downloadItemRow td {
    cursor: pointer;
}

.downloadItemRow td:nth-child(1) {
    padding-left: 20px;
    width: 60%;
    text-align: left;
}

.downloadItemRow td:nth-child(2) {
    width: 20%;
    text-align: center;
}

.downloadItemRow td:nth-child(3) {
    width: 20%;
    text-align: center;
}

div.wicket-modal div.w_content_3 {
    border: none;
    padding: 10px;
}

div.notificationText {
    color: var(--kdl-color-primary-accent);
    padding: 10px 5px;
}

/* =============================== MODAL WINDOW POPUP ====================================== */

body .wicket-modal .w_top_1 {
    display: none;
}

body .wicket-modal .w_bottom_1 {
    display: none;
}

body div.wicket-modal div.w_right_1 {
    margin: 0;
}

body div.wicket-modal div.w_blue div.w_left,
body div.wicket-modal div.w_blue div.w_right {
    background: none;
}

body div.wicket-modal div.w_content_1 {
    background: #fff;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    padding: 8px 0;
    box-shadow: 0 0 6px 1px #888;
    -moz-box-shadow: 0 0 6px 1px #888;
    -webkit-box-shadow: 0 0 6px 1px #888;
    margin: 5px;
}

body div.wicket-modal div.w_caption {
    height: initial;
    overflow: visible;
    height: 0;
    position: relative;
    cursor: default;
    line-height: initial;
    z-index: 1;
}

body div.wicket-modal div.w_content_2 {
    padding: 0;
    margin: 4px 0;
}

body div.wicket-modal div.w_content_3 {
    border: none;
}

.modalWindowClass h2 {
    padding: 0 35px 0 10px;
    margin-top: 0;
}

.modalWindowClass tr:hover {
    background-color: #e3f8ff;
}

.modalWindowClass td.border {
    width: 5px;
}

body div.wicket-modal div.w_caption {
    z-index: 20002;
}

.centerOuterDiv {
    text-align: center;
    bottom: 0px;
    position: absolute;
    width: 95%;
}

.spinnerDiv {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #dddddd;
    margin-bottom: 16px;
}

.spinnerImg {
    display: block;
    margin: auto;
    padding-top: 6px;
}

.spinnerLabel {
    margin: 10px;
    display: block;
}

.margin-y-1rem {
    margin: 1rem 0rem;
}

.bannerDots {
    height: 13px;
    width: 13px;
    padding: 0;
    display: inline-block;
    color: #fff;
    border-radius: 50%;
    border: 1px solid #103769!important;
    margin-left: 2px;
    margin-right: 2px;
}

.centeredBottom {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    margin-bottom: 10px!important;
}

.currentBanner {
    background-color: var(--kdl-color-primary-accent)!important;
}

.banners {
	border: none;
    position: relative;
    background: #e7f7fd;
    height: 184px;
    margin: auto;
    overflow: hidden;
}

.bannerLeft {
    float: left!important;
    box-sizing: inherit;
    cursor: pointer;
    font-size: 2em;
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px;
    background-color:transparent;
    border-color:transparent;
    color: rgb(0,174,239);
    outline: none;
    height: 30px;
    line-height: 0px;

    transition: 0.6s ease;
    border-radius: 0 10px 10px 0;
}

.bannerRight {
    right: 0;
    box-sizing: inherit;
    cursor: pointer;
    font-size: 2em;
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px;
    background-color:transparent;
    border-color:transparent;
    color: rgb(0,174,239);
    outline: none;
    height: 30px;
    line-height: 0px;

    transition: 0.6s ease;
    border-radius: 10px 0 0 10px;
}

.bannerRight:hover, .bannerLeft:hover {
    background-color: rgb(0,174,239);
    color: white;
}

.contentBodyWidth {
    width: 100%;
    max-width: 1264px;
    margin-left: auto;
    margin-right: auto;
}

.bankcase-page .page-title {
    background-color: #cceffc;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-size: 18px;
    font-weight: 600;
    padding: 20px;
}

.bankcase-page .listTableHeader {
	background-color: var(--kdl-color-primary-accent);
}

.bankcase-page .listTableHeader label {

	line-height: 40px;
}

.bankcase-page .listTableHeader .sortImage {
	margin-top: 9px;
	filter: grayscale(100%) invert() brightness(100);
}

.bankcase-page .listTableHeader th:nth-child(1) {
    width: 25%;
    padding-left: 20px;
}

.bankcase-page .listTableHeader th:nth-child(3) {
    width: 15%;
}

.bankcase-page .listTableHeader th:nth-child(2),
.bankcase-page .listTableHeader th:nth-child(4),
.bankcase-page .listTableHeader th:nth-child(5),
.bankcase-page .listTableHeader th:nth-child(6) {
    width: auto;
    padding-left: 0;
}

.bankcase-page .listTableBodyRows td:nth-child(1) {
    padding-left: 20px;
}

.bankcase-page .listTableBodyRows {
    cursor: pointer;
}

.bankcase-page .listTableBodyRows td label {
    cursor: pointer;
}

.bankcase-page .listTableBodyRows td {
    text-align: left;
}

.bankcase-page .listTableBodyRows .listTableBodyName {
    font-size: 16px;
}

/* =============================== Message panel ====================================== */

.messagePanel table {
    width: 100%;
}
.messagePanel th:nth-child(1), .detail-panel-header-container .dateField {
	margin: auto;
    width: 20%;
}
.messagePanel .boldField {
	font-weight: bold;
}
.messagePanel th:nth-child(2), .detail-panel-header-container .subjectField {
	margin: auto;
    width: 80%;
}
.detail-panel-header-container .subjectField {
	padding-left: 15px;
}
.messagePanel th:nth-child(n) {
    text-align: left;
    padding: 15px 15px 15px 20px;
    background-color: #e7f7fd;
}
.messagePanel td {
    border-color: rgba(230, 230, 230, 1);
    border-style: solid;
    border-width: 1px;
    border-bottom-width: 0px;
}
.boxpanel {
	margin-top: 0px;
/* 	margin-bottom: 10px; */
	/* material design */
	background-color: rgba(255, 255, 255, 1);
	box-sizing: border-box;
/* 	border-width: 1px; */
/* 	border-style: solid; */
/* 	border-color: rgba(230, 230, 230, 1); */
/* 	border-radius: 0px; */
	-moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.149019607843137);
	-webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.149019607843137);
	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.149019607843137);
}
.boxpanel .detail-panel-header-container {
	display: flex;	
}
/* .boxpanel .detail-panel-header-container, .boxpanel .wantToKnowMore { */
/* 	padding: 20px; */
/* } */
.detail-panel-container {
	display: flex;
	max-height: 50px;
	height: 50px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
	padding-right: 10px;
}
.opener {
	margin: auto;
}
#content .openableContent {
	text-align: center;
}
#content .openableContent h2, #content .openableContent h3 {
	cursor: pointer;
	margin: 0px;
}
.openableContent h2 {
	line-height: 28px;
	margin: 0px;
}
.openableContent:hover h2::after, .openableContent:hover h3::after {
	color: #FA6D16;
}
.openableContent h2::after, .openableContent h3::after {
	content: "\f107";
	font: normal normal normal 28px/1 FontAwesome;
	color: #003767;
	font-weight: normal;
	line-height: 18px;
	width: 28px;
	height: 20px;
	display: inline-block;
	-webkit-transition: all ease 0.2s;
	-o-transition: all ease 0.2s;
	transition: all ease 0.2s;
	text-align: center;
	vertical-align: top;
}
.openableContent h2::after {
	height: 28px;
	line-height: 28px;
}
.openableContent.open h2::after, .openableContent.open h3::after {
	content: "\f106";
	font: normal normal normal 28px/1 FontAwesome;
	color: #003767;
	line-height: 18px;
}
.messageContentPanel :nth-child(n) {
    margin: 0;
    padding: 0 !important;
    overflow: hidden;
}
.messageContentPanel {
    padding-bottom: 20px;
}

.messagePanel th {
	text-align: left;
	padding: 10px 10px 10px 10px;
}

.messagePanel th:nth-child(1) {
    width: 20%;
}

.messagePanel th:nth-child(2) {
    width: 85%;
}

.messagePanel tbody td div {
	padding: 5px;
}


/*   MORE   */

.sidebar-box { 
	margin: 0 20px 0 0;
	position: relative;
	/*padding: 20px;*/
	overflow: hidden;
	max-height: 160px;
   	min-height: 0px;
   	width: 100%;
}

.sidebar-box .read-more { 
	position: absolute; 
	bottom: 0; 
	left: 0;
	width: 100%; 
	text-align: center; 
	margin: 0px;
    padding: 0px;
    line-height: 90px;
	    
	/* "transparent" only works here because == rgba(0,0,0,0) */ 
/*	background-image: -moz-linear-gradient(top, transparent, white);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, transparent),color-stop(1, rgba(249,249,249,100)));*/
	background-image: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,0) 100%);
}
.sidebar-box .read-more-gradient { 
	position: absolute; 
	bottom: 0; 
	left: 0;
	width: 100%; 
	text-align: center; 
	margin: 0px 0px 10px 3px;
    padding: 0px 0 0px 0;
    line-height: 90px;
	    
	/* "transparent" only works here because == rgba(0,0,0,0) */ 
	background-image: -moz-linear-gradient(top, transparent, white);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, transparent),color-stop(1, rgba(255,255,255,100)));
}
.gray {
	background-color: #444;
	background-color: rgb(89,89,89);
}
.red {
	background-color: red;
}
.red .read-more { 
	/* transparent doesn't work in this context, must use RGBa for both */
	background-image: -moz-linear-gradient(top, rgba(255,0,0,0), rgba(255,0,0,100));
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,0,0,0)),color-stop(1, rgba(255,0,0,50)));
}
		
.docFlowMore {
   /*border-top: 1px solid #96d1f8;*/
   /*background: #65a9d7;*/
   /*background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));*/
   padding: 5px 10px;
   /*-webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;*/
   
   
   /* overboard shadows for Opera (and why spec version listed first) */
   /*box-shadow: rgba(0,0,0,1) 0 1px 0, rgba(0,0,0,90) 0 0 10px, rgba(0,0,0,90) 0 0 20px, rgba(0,0,0,90) 0 0 30px;*/
   
   /*-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;*/
   /*-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;*/
   
   color: black;
   font-size: 12px;
   font-style: normal;
   text-decoration: none;
   vertical-align: middle;
}
.docFlowMore:hover {
   color: #000000;
   text-decoration: none;
   outline: none;
}
.docFlowMore:active {
   color: #000000;
   text-decoration: none;
   outline: none;
}
.read-more-button:after {
    font-family: FontAwesome;
	content: "\f0dd";
	margin-left: 15px;
}
.read-less {
   display: none;
   text-align: center;
}

.fileUploadButton {
    position: relative;
    overflow: hidden;
    float: left;
    clear: left;
	line-height: 20px;
    width: 100px;
    height: 30px;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    margin: -1px 3px 0px 3px;
    background-color: var(--kdl-color-primary-accent);
    text-align: center;
    font-size: 16px;
    padding-top: 10px;
}
.fileUploadButton input[type="file"] {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    font-size: 100px;
    filter: alpha(opacity=0);
    cursor: pointer;
}

.bold{
    font-weight: bold;
}

input[type="button"]:disabled {
    border-color:grey;
    color: grey;
}

.eSignImage {
    width: 30%;
    height: 40%;
    margin-left: 205px;
    margin-right: auto;
    display: block;
    background-repeat: no-repeat;
}
.eSignInProgress {
    background-image: url(../pic/content/esign/esign-in-progress.png);
}
.eSignError {
    background-image: url(../pic/content/esign/esign-error.png);
}
.eSignSuccess {
    background-image: url(../pic/content/esign/esign-success.png);
}

.docDownloadButton {
    background-image: url(../pic/content/download/button-download.png);
    width: 45px;
}

.docUploadButton {
    background-image: url(../pic/content/download/button-upload.png);
    width: 45px;
}

div.wicket-modal div.w_blue a.w_close[href|="#"]{
    background-image: url(../pic/content/esign/button-x.png);
    background-repeat: round no-repeat;
    margin-right: 8px;
    margin-top: 4px;
}
#pdfModalWindowHeader {
    background: lightgray;
    padding: 1rem;
}

.button-with-image {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hideButtonCss a.w_close[href|="#"]{
    visibility:hidden;
}

input[type='button'].secondaryButtonModal.pdfDownloadButton,
input[type='button'].secondaryButtonModal.pdfDownloadButton:hover:enabled {
    border: solid 1px #fa6d16;
    color: #fa6d16;
}

.closeResultPanelButton {
    font-size: 16px;
    width: 40%;
    height: 40px;
}



/*   Bank Guarantee   */

.bg_title {
	display: block;
    text-align: center;
}

.bg_stepNumber {
	display: block;
    font-size: smaller;
    color: var(--kdl-color-primary-main-150);
}

.bg_stepTitle {
	display: block;
	padding-bottom: 5px;
}
.bg_stepBarBG {
	display: block;
	border-bottom: 1px solid #E6EBF0;
    line-height: 21px;
	width: 99%;
}
.bg_stepBar {
	display: block;
	line-height: 10px;
    border: 1px solid #9CCB65;
}

.bg_width_8_1 {
	width: 12%;
}
.bg_width_8_2 {
	width: 25%;
}
.bg_width_8_3 {
	width: 37%;
}
.bg_width_8_4 {
	width: 50%;
}
.bg_width_8_5 {
	width: 62%;
}
.bg_width_8_6 {
	width: 75%;
}
.bg_width_8_7 {
	width: 87%;
}
.bg_width_8_8 {
	width: 100%;
}

.bg_width_7_1 {
	width: 14%;
}
.bg_width_7_2 {
	width: 28%;
}
.bg_width_7_3 {
	width: 43%;
}
.bg_width_7_4 {
	width: 57%;
}
.bg_width_7_5 {
	width: 71%;
}
.bg_width_7_6 {
	width: 85%;
}
.bg_width_7_7 {
	width: 100%;
}

.bg_mainPanel {
	display: block;
	width: 60%;
	float: left;
	padding-top: 50px;
	height: 450px !important;
	overflow-x: auto;
	overflow-y: scroll;	
	padding-left: 20%;
    padding-right: 20%;
}

.bg_mainPanel div {
	float: left;
	width: 100%;
}
.bg_mainPanel .calendarPopupLink div {
	float: none;
	width: auto;
}
.bg_mainPanel .calendarPopupLink span {
    display: contents;
}
.bg_mainPanel div.calendar div {
	float: none !important;
	width: auto !important;
}
.bg_mainButtons {
	width: 100%;
	float: left;
	padding-top: 10px;
}
.bg_mainButtons div {
	margin-left: auto;
    margin-right: auto;
    display: block;
    width: 80%;
}
.bg_mainButtons button {
	height: 30px;
    padding: 0px 20px 0px 20px;
    border-radius: 20px;
    margin: 0px 3px 0px 3px;
    font-weight: bold;
}

.bg_mainPanel input[type="text"] {
	margin-right: 2%;
	width: 300px !important;
	border-radius: 8px;
	border: 1px solid #6686A3;
	margin: 0 5px 0 10px;
}
.bg_mainPanel input[type="checkbox"] {
	margin: 0 6px 0 0px;
    appearance: none;
    height: 1.5rem;
    width: 1.5rem;
    border: 1px solid var(--kdl-color-primary-main-150);
    border-radius: 4px;
    background-color: white;
    cursor: pointer;
    position: relative;
    vertical-align: bottom;
}
.bg_mainPanel input[type="checkbox"]:checked::after {
    content: "\2713";
    font-size: 1.3rem;
    color: white;
    text-align: center;
    height: 1.5rem;
    width: 1.5rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 4px;
    background-color: var(--kdl-color-primary-accent);
}
.bg_mainPanel input[type="radio"] {
	height: 19px;
}
input[type="text"].dfp_datefield {
	width: 105px !important;
	float: left;
}
.bg_mainPanel .calendarPopupLink {
    width: 15px;
    height: 16px;
    display: block;
    float: left;
    padding-top: 8px;
}
.bg_mainPanel .bg_guarantee .calendarPanel {
	top: -95px !important;
	z-index: 100;
}	
.bg_mainPanel textarea {
	width: 99%;
    height: 100px;
}
.bg_mainPanel textarea::placeholder {
	color: #4D7293;
}

.bg_labelPanel {
	width: 45% !important;
    display: block;
    float: left;
}
.bg_fieldPanel {
	width: 53% !important;
    display: block;
    float: left;
}
.bg_fieldPanel span {
    display: block;
}
.bg_fieldPanel select {
    font-size: 16px;
    padding-inline: 5px;
    padding: 4px;
    border: 1px solid #6686A3;
    vertical-align: middle;
    color: #666;
    border-radius: 8px;
    width: 300px !important;
    margin: 0 5px 0 10px;
}
.lb_optional {
	font-size: 12px;
	line-height: 16px;
	color: #4D7293;
	font-weight: normal;
	margin: 0 5px 0 10px;
}

.bg_label {
	padding: 6px 0px 6px 0px;
}
.bg_value {
	font-weight: bold;
}
.rfp_radio {
	width: 100%;
    display: block;
    float: left;
}
.rfp_radio span {
	float: left;
}
.rfp_radio_text {
	width: 80%;
}
.bg_tooltip {
  position: relative;
  display: inline-block;
  /*border-bottom: 1px dotted black;*/
}
.bg_tooltip .bg_tooltiptext {
  visibility: hidden;
  width: 320px;
  background-color: #003665;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}
.bg_tooltip:hover .bg_tooltiptext {
  visibility: visible;
  top: -80px;
}
.bg_compData {
	border-left: 1px solid #C2CFDA;
    width: 98% !important;
    margin-bottom: 5%;	
    float: left;
    margin-top: 10px;
    display: grid;
    grid-template-columns: 33% 33% 34%;
}
.bg_compData .bg_label {
	padding-bottom: 0px;
}	
.bg_compDataRow {
	width: 100%;
    display: flex;
    margin-bottom: 25px;
}
.bg_compDataField {
	padding-bottom: 15px;
}

.bg_compDataField .bg_label {
	padding-left: 10%;
	display: block;
}
.bg_rowFull {
	width: 100%;
    display: block;
    padding: 12px 0px 12px 0px !important;
}
.bg_subtitle {
    font-weight: bold;
    font-size: 16px;
    width: 100%;
    display: block;
}
.bg_subtitle .bg_label {
    padding-right: 10px;
}
.bg_description {
    font-weight: normal;
    font-size: 11px;
}
.bg_zipCode {
	width: 20% !important;
	padding-right: 15px;
}
.bg_zipCode input[type="text"] {
	width: 100% !important;
}
.bg_city {
	width: 58% !important;
}
.bg_city input[type="text"] {
	width: 100% !important;
}
.bg_door, .bg_floor {
	width: 42% !important;
}
.bg_floor input[type="text"] {
	width: 90% !important;
}
.bg_door input[type="text"] {
	width: 96% !important;
}
.bg_amount {
	width: 53% !important;
	float: left;
	padding-right: 15px;
}
.bg_amount input[type="text"] {
	width: 100% !important;
}
.bg_currency {
	width: 20% !important;
}
.bg_currency select {
	width: 100% !important;
}
.bg_subpanel {
	background-color: var(--kdl-color-surface-100);
	padding: 0px 16px 16px 16px;
	width: 94% !important;
	background-color: #F3F8FA;
	padding: 0px 2% 0px 2%;
	width: 96% !important;
	margin-bottom: 20px;
}
.bg_textareaLabel {
	display: block;
	width: 100% !important;
}
.bg_textareaLabel .bg_label {
	padding-left: 3%;
}

.bg_subpanel .bg_labelPanel {
	padding: 5px 0px 5px 0px;
}
.bg_subpanel .bg_labelPanel {
	padding: 5px 0px 5px 10px;
}
.bg_subpanel .bg_city {
	width: 61% !important;
}
.bg_subpanel .bg_door, .bg_subpanel .bg_floor {
	width: 44% !important;
}
.bg_success_container {
	width: 100% !important;
    margin-bottom: 5%;
    margin-top: 70px;
}
.bg_success {
	background: url('../pic/bankgar-success.png') no-repeat no-repeat 14px center !important;
	width: 300px !important;
    height: 250px;
    margin-left: 120px;
    margin-top: 50px;
}
.bg_success_desc {
	width: 35% !important;
	padding-left: 3%;
	margin-top: 50px;
}
.bg_success_desc .bg_subtitle {
	font-size: 25px;
	padding-bottom: 15px;
}
.bg_success_desc .bg_label {
	display: block;
}
.bg_bankOther {
	background-color: var(--kdl-color-surface-100);
    padding: 10px;
    width: 96% !important;
    margin-bottom: 16px;
}
.bg_bankOther .bg_labelPanel  {
	padding: 6px 0px 6px 0px;
}
.bg_fillDocumentModalWindow {
	width: 800px;
	height: 500px;
}
.bg_overviewPanel {
    width: 96% !important;
}
.bg_confirmPanel {
	margin: 10px auto;
    display: flex;
    justify-content: center;
    width: 95%;
}
.bg_confirmButton {
	float: none;
	width: 140px;
	height: 40px !important;
}
.dateFieldPanel span.lb_optional {
	display: block;
    float: left;
    width: 100%;
}
.bg_mainPanel input.error, .bg_mainPanel select.error, .bg_mainPanel span.error, .bg_mainPanel textarea.error {
	border-color: red !important;
}

.loading-spinner {
    cursor: wait;
    background-color: #f1f1f1;
    background-image : url('../pic/loading-spinner.gif');
    background-size: 27px;
    background-position :right center;
    background-repeat : no-repeat;
}

.kdl-sub-label {
    font-size: 12px;
    font-weight: 300;
    color: var(--kdl-color-primary-main-300);
    display: block;
}

.obliged_info_panel {
	background-color: var(--kdl-color-surface-100);
	padding: 1rem;
	border-radius: 8px
}