@font-face {
    font-family: tkRegular;
    src: url(../font/tk_Type/TKTypeRegular.ttf);
}

@font-face {
    font-family: tkBold;
    src: url(../font/tk_Type/TKTypeBold.ttf);
}

@font-face {
    font-family: tkMedium;
    src: url(../font/tk_Type/TKTypeMedium.ttf);
}

html{
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: tkRegular;
    height: 100%;
    overflow: hidden;
}

.LayoutHeader {
    background-color: #00a0f5;
    display: flex;
    height: 65px;
    white-space: nowrap;
    position: relative;
    width: 100%;
    z-index: 1;
}

.LayoutHeader_Left {
    display: flex;
    flex: 75%;
    align-items: center;
    padding: 15px;
    padding-left: 0px;
}

.LayoutHeader_LeftText {
    font-size: 36px;
    color: white;
    padding-left: 25px;
    text-decoration: none;
}

.LayoutHeader_Right {
    display: flex;
    flex: 25%;
    justify-content: flex-end;
    align-items: center;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 18px;
}

.LayoutHeader_RightItemsDropdown {
    display: flex;
    padding: 0px 15px 10px 0px;
    flex-direction: row;
    background-color: #00a0f5;
    justify-content: flex-end;
    align-items: baseline;
    opacity: 0;
    transition: all .5s ease;
    margin-top: -37px;
}

.LayoutHeader_RightItemsDropdown.clicked {
    opacity: 1;
}

.LayoutHeader_RightDropdownBtn {
    display: none;
    width: 60px;
    border: none;
    background-color: #00a0f5;
}

.LayoutHeader_LeftImage {
    padding-left: 13px;
    padding-right: 15px;
}

.LayoutHeader_LeftImageSmall {
    display: none;
    width: 50px;
    margin-left: 10px;
    margin-right: 10px;
}

.LayoutHeader_LoginDropdown {
    flex-direction: column;
    background-color: white;
    align-items: center;
    position: fixed;
    padding-top: 20px;
    width: 250px;
    border: 2px solid #00a0f5;
    border-radius: 6px;
    z-index: 1;
    /*right: 16px;
    top: 50px;*/
}

.LayoutHeader_LoginDropdown:before {
    content: '';
    width: 0;
    position: absolute;
    height: 0;
    top: -7px;
    right: 10px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid white;
}

.LayoutHeader_LoginDropdown form {
    text-align: center;
}

.LayoutHeader_LoginDropdown label {
    color: #00a0f5;
    padding-bottom: 2px;
}

input.LoginDropdownInput {
    margin-bottom: 15px;
    width: 200px;
}

input.LoginDropdown_Input {
    background: white;
    font-size: 13px;
    padding: 3px;
    border: 1px solid #00a0f5;
    border-radius: 3px;
    margin-bottom: 10px;
    margin-top: 5px;
    width: 80%;
    height: 20px;
}

input#LoginDropdown_SubmitBtn.LoginDropdown_Input {
    background: #00a0f5;
    outline: none;
    color: white;
    cursor: pointer;
    width: fit-content;
    width: -moz-fit-content;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid white;
    font-size: 18px;
    margin-top: 0px;
    height: 30px;
}

#NavItem {
    margin: 6px;
    padding: 0px;
    text-decoration: none;
    color: #ffffff;
}

.NavItemUserDropdown, input.NavItemUserDropdown {
    padding: 10px;
    padding-right: 20px;
    text-decoration: none;
    color: #ffffff;
    border: none;
    border-bottom: 1px solid white;
    width: 100%;
    text-align: end;
    box-sizing: border-box;
    background: inherit;
    font-family: inherit;
    font-size: 16px;
    width: 90%;
    outline: none;
}

    .NavItemUserDropdown::selection, inpit.NavItemUserDropdown::selection, img#NavItem::selection, .LayoutHeader_LeftText::selection, .LayoutHeader_LeftImage::selection, .LayoutHeader_LeftText sup::selection {
        background-color: transparent;
    }

.NavItemUserDropdown:hover, input.NavItemUserDropdown:hover {
    color: #d9dee8;
    cursor: pointer;
}

i#NavItem.fa.fa-user:hover {
    color: #78879b;
}

#NavItem:hover, NavItemDropdown:hover, a#NavItemDropdown:hover, button#NavItemDropdown:hover, input#NavItemDropdown:hover, input.LeftPanelBtn:hover, input.DocumentPanelBtn:hover {
    text-decoration: underline;
    cursor: pointer;
}

button#NavItem {
    background: #00a0f5;
    border: none;
}

input#NavItem {
    background: inherit;
    border: none;
    outline: none;
    font-size: inherit;
    font-family: inherit;
    border-bottom: 1px solid white;
    width: 100%;
    text-align: end;
}

button#NavItem.LayoutHeader_LoginBtn {
    color: white;
    font-family: tkRegular;
    font-size: 18px;
    outline: none;
    cursor: pointer;
}

#NavItemDropdown {
    margin-left: 25px;
    text-decoration: none;
    color: #ffffff;
    display: flex;
    margin-top: 10px;
}

input#NavItemDropdown {
    background: inherit;
    border: none;
    outline: none;
    font-size: inherit;
    font-family: inherit;
    padding: 0px;
}

button#NavItemDropdown.LayoutHeader_LoginBtn {
    color: white;
    font-family: tkRegular;
    font-size: 16px;
    outline: none;
    cursor: pointer;
    padding: 0px;
}

button#NavItemDropdown {
    background: #00a0f5;
    border: none;
}

.UserDropdown {
    display: flex;
    flex-direction: column;
    position: fixed;
    right: -150px;
    top: 64px;
    background: #00a0f5;
    align-items: flex-end;
    width: 150px;
    opacity: 0;
    border-bottom-left-radius: 10px;
    transition: all .5s ease;
    text-align: right;
    text-align-last: right;
}

.UserDropdown.clicked {
    opacity: 1;
    right: 0px;
}

img#NavItem.UserIcon {
    width: 40px;
    /* Apple safari fix for correct image aspect ratio */
    object-fit: contain;
}

#ContentContainer {
    overflow: auto;
    height: 100%
}

.MainFlexContainer {
    display: flex;
    width: 100%;
    height: calc(100% - 103px);
    position: fixed;
}

.MainDiv {
    height: 100%;
    width: 100%;
    position: fixed;
}

.DocumentContainer {
    display: flex;
    flex: 100%;
    overflow: auto;
    flex-direction: column;
    position: relative;
    border: none;
    padding: 15px;
}

.LeftPanel {
    flex: 20%;
    border-right: 1px solid #eef0f2;
    padding: 20px;
}

h4.LeftPanel_Headline{
    margin-top: 0px;
    font-size: 30px;
}

.LeftPanelBtn, .DocumentPanelBtn {
    font-size: 18px;
    background-color: transparent;
    border: none;
    font-family: tkRegular;
    outline: none;
    padding-left: 0px;
    padding-right: 0px;
    margin-top: 5px;
    white-space: normal;
    text-align: left;
}

.DocumentContainer_Headline {
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 25px;
    font-family: tkRegular;
}

.LanguageButton {
    height: 20px;
    outline: none;
    border-radius: 6px;
    border: 2px solid #00a0f5;
    padding: 3px;
    align-self: flex-end;
    margin: 0px 5px -4px 5px;
}

.DocumentList {
    flex-direction:row!important;
    color: #00a0f5;
    margin: 0px 0px 0px 50px;
}

#LanguageTxt {
    font-size: 20px;
    margin: 10px 0px 0px 50px;
}

.DocumentContainer ul, ul.DocumentList {
    padding-left: 0px;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.DocumentContainer h4::selection, li.DocumentList_Headline2::selection, li.DocumentList_Headline1::selection, .Breadcrumb a::selection, .DocumentBtnFlag::selection, li.DocumentList_Headline::selection, input.LanguageButton::selection {
    color: none;
    background: none;
}

li.DocumentList_Headline2 {
    margin-top: 20px;
    margin-bottom: 10px;
}

li.DocumentList_Headline2, li.DocumentList_Headline1 {
    font-size: 18px;
    font-family: tkBold;
}

li.DocumentList_Headline2, li.DocumentList_Headline1 {
    width: fit-content;
    width: -moz-fit-content;
}

li.DocumentList_Headline {
    border-bottom: 2px solid;
    font-size: 20px;
    font-family: tkBold;
    margin-top: 15px;
    padding-left: 0px !important;
    white-space: nowrap;
}

li.DocumentList_Headline1 {
    border-bottom: 2px solid;
    padding-bottom: 0px;
    padding-left: 0px!important;
    font-size: 20px;
    margin-top: 20px;
}

.MainFlexContainer_Content {
    display: flex;
    flex: 100%;
    overflow: auto;
}

.MainFlexContainer_Content h4 {
    font-size: 30px;
    margin: 0px;
}

.fa {
    font-family: tkRegular;
    color: #00a0f5;
}

button.LayoutHeader_RightDropdownBtn.fa.fa-bars {
    outline: none;
    font-size: 35px;
    color: white;
}

button.LayoutHeader_RightDropdownBtn.fa.fa-angle-down {
    outline: none;
    font-size: 50px;
    color: white;
}

.alert {
    display: flex;
    padding: 10px 20px 10px 20px;
    background-color: #ffb400;
    text-align: center;
}

span.AlertMessage {
    display: flex;
    flex: 90%;
    font-weight: bold;
    color: black;
    flex-direction: column;
}

.closebtn {
    display: flex;
    align-self: flex-end;
    color: black;
    font-weight: bold;
    float: right;
    font-size:40px;
    line-height: 20px;
    cursor: pointer;
}


#cookieConsentBtn {
    background: white;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    width: 100px;
    align-self: center;
    border: 1px solid black;
    padding: 1px;
    margin-left: 30px;
}

.Breadcrumb {
    padding: 10px;
    border-bottom: 1px solid #eef0f2;
}

.Breadcrumb a {
    text-decoration: none;
    color: #00a0f5;
}

.DocumentView {
    margin-left: 285px;
    height: calc(100% - 106px);
    overflow: auto;
    scroll-behavior: smooth;
}

.InputTextField {
    display: flex;
    flex: 100%;
    width: -webkit-fill-available;
    background: white;
    font-size: 13px;
    border: 1px solid #00a0f5;
    border-radius: 3px;
    padding: 5px;
    margin: 0px 0px 10px 0px;
}

.InputBtn {
    background: #00a0f5;
    color: white;
    cursor: pointer;
    width: 50%;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid white;
    font-size: 18px;
    align-self: center!important;
}

.SubmitBox {
    display: flex;
    border: 2px solid #00a0f5;
    border-radius: 6px;
    align-items: baseline;
    padding: 15px;
}

.SubmitForm {
    display: flex;
    flex: 100%;
    flex-direction: column;
    align-content: flex-start;
}

.SubmitLabel {
    display: flex;
    font-family: tkBold;
}

.SubmitBox ul {
    display: flex;
    flex-direction: column;
    padding: 0px;
    align-items: flex-end;
}

.SubmitBox li {
    display: flex;
    align-items: baseline;
}

input#CbInternal, input#CbDisabled, input#CbResetLoginAttempts{
    margin-right: 0px;
}

td#CbTData {
    margin-right: 0px;
    text-align: end;
}

.EditUserGenInfo {
    color: black;
    margin-top: 20px;
    width: fit-content;
    width: -moz-fit-content;
}

.EditUserGenInfo span {
    font-family: tkBold;
}

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

.EditUserFormDiv {
    display: flex;
    flex: 100%;
    flex-direction: column;
    margin-right: 40px;
}

.OverviewTable {
    width: 100%;
    color: black;
    border-spacing: 5px;
}

.OverviewTable th {
    background: #00a0f5;
    color: white;
}

.OverviewTable select {
    width: 100%;
    height: 100%;
    padding: 4px;
    border: 1px solid;
    font-size: 16px;
    text-align-last: center;
    text-align: center;
    padding-left: 20px;
}

.OverviewTable select:hover {
    cursor: pointer;
}

.OverviewTableBtn {
    height: 35px;
}

.OverviewTable tr {
    text-align: center;
    width: 100%;
}

.OverviewTable tr:hover {
    background-color: #eef0f2;
}

.LayoutHeader_LeftText sup {
    font-size: 22px;
}

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

.DocumentList_DocTablesLi form {
    margin-bottom: 15px;
}

.DropDownDiv {
    display: flex;
    white-space: nowrap;
    align-items: flex-end;
    flex-direction: row-reverse;
}

.ResetPasswordDiv {
    display: flex;
    flex-direction: column;
    margin: 10px;
    max-width: 400px;
    color: #00a0f5;
}

.ResetPasswordDiv h4, .ResetPasswordDiv p, .ResetPasswordDiv .SubmitBox {
    margin: 10px;
}

.RegistrationDiv {
    display: flex;
    flex-direction: column;
    margin: 30px;
    max-width: 500px;
    color: #00a0f5;
}

.row {
    display: flex;
    align-items: baseline;
}

.column {
    flex: 50%;
}

div#FormLabel.column {
    flex: 40%;
}

div#FormInput.column {
    flex: 60%;
}

.FormSelect {
    padding: 5px;
    margin-bottom: 10px;
    width: 100%;
}

#BackToTopBtn {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 40px;
    z-index: 99;
    outline: none;
    background-color: white;
    color: #00a0f5;
    cursor: pointer;
    border: none;
    padding: 0px;
    border-radius: 50%;
}

#BackToTopBtn:hover {
    background-color: #eef0f2;
}

span.TopIcon {
    background: url(../image/tk_Icon_Arrow_up_RGB_blue.svg) no-repeat;
    float: left;
    width: 40px;
    height: 40px;
}

.SearchDiv {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    margin-right: 20px;
}

.InputSearchDocs {
    display: flex;
    width: 200px;
    border-radius: 3px;
    border-color: transparent;
}

.InputSearchDocs:focus {
    outline: none;
}

.FilteredDocs {
    max-height: 600px;
    overflow: auto;
    font-size: 16px;
    position: absolute;
    margin: 47px 0px 0px 0px;
    background-color: #00a0f5;
    color: white;
    background-color: white;
    color: #00a0f5;
    border-left: 2px solid;
    border-bottom: 2px solid;
    border-right: 2px solid;
    border-bottom-left-radius: 8px;
}

#searchUl {
    display: flex;
    padding: 0px;
    max-width: 600px;
    white-space: normal;
    flex-direction: column;
    align-items: flex-start;
    list-style: none;
    margin: 0px;
    min-width: 300px;
}

#searchContentUl {
    padding: 0px;
}

#searchLinkLi {
    white-space: nowrap;
    border-bottom: 1px solid #00a0f5;
    margin-bottom: 5px;
    width: min-content;
    width: -moz-min-content;
    width: -webkit-min-content;
}

#searchLinkLi a {
    font-size: 17px;
    color: #00a0f5;
    width: 100%;
}

#searchContentLi {
    padding: 0px;
}

#searchContentLi p {
    font-size: 16px;
    margin: 0px;
}

#searchItemDiv {
    display: flex;
    flex-direction: column;
    align-content: flex-end;
    padding: 8px;
    width: 100%;
}

#searchItemDiv ul {
    display: flex;
    flex-direction: column;
    padding: 0px;
}

.FilteredDocs ul li {
    display: flex;
    width: 100%;
}

.FilteredDocs ul li a {
    text-decoration: none;
    color: white;
    font-family: tkBold;
}

.InputSearchDocsPic {
    background-color: white;
    margin-left: -3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    padding: 2px;
    width: 25px;
    height: 25px;
}

.InputSearchDocsPic::selection {
    background-color: transparent;
}

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

#components-reconnect-show, #components-reconnect-failed, #components-reconnect-rejected, #components-reconnect-modal {
    display: none!important;
}

/*---------------------------@media css---------------------------*/
@media only screen and (max-width: 1000px) {
    .LayoutHeader_RightDropdownBtn {
        display: inline;
    }

    #LanguageTxt {
        margin-left: 15px;
        font-size: 16px;
    }

    .LanguageButton {
        height: 16px;
        padding: 2px;
        margin: 0px 5px -4px 5px;
    }

    .MainFlexContainer_Content h4 {
        font-size: 20px;
    }

    .DocumentList {
        margin-left: 15px;
    }

    .DocumentPanelBtn {
        font-size: 14px;
    }

    li .DocumentList_Headline1, li.DocumentList_Headline2 {
        font-size: 15px;
    }

    .LayoutHeader_RightItems, .SearchDiv {
        display: none;
    }

    #BackToTopBtn {
        bottom: 15px;
        right: 15px;
    }

    span.TopIcon {
        width: 30px;
        height: 30px;
    }
}

@media only screen and (min-width: 1001px) {
    .LayoutHeader_RightItemsDropdown {
        display: none!important;
    }

    .LayoutHeader_RightDropdownBtn.fa {
        display: none!important;
    }
}

@media only screen and (max-width: 750px) {
    .LayoutHeader_Left {
        flex: 90%;
        padding-right: 0px;
    }

    #NavItemDropdown{
        margin-left: 15px;
    }

    .LayoutHeader_LeftImageSmall {
        display: inline;
    }

    .LayoutHeader_RightDropdownBtn {
        font-size: 20px !important;
        width: 30px;
    }

    .LayoutHeader_LeftText {
        font-size: 25px;
        flex: 10%;
    }

    .LayoutHeader_RightItemsDropdown.clicked, button#NavItemDropdown.LayoutHeader_LoginBtn {
        margin-top: -1px;
        font-size: 12px;
    }

    button#NavItemDropdown.LayoutHeader_LoginBtn {
        margin: 10px 0px 0px 15px;
    }

    .LayoutHeader_LeftText sup {
        font-size: 15px;
    }

    .LayoutHeader_LeftText {
        padding-left: 5px;
        white-space: normal;
    }

    .LayoutHeader_LeftImage {
        display: none;
    }

    .DocumentList_DocTablesLi, .DocumentList {
        flex-direction: column!important;
    }

    .DocumentList_DocTablesLi form {
        margin-bottom: 0px;
    }

    li.DocumentList_Headline {
        margin: 10px 0px 0px 0px;
    }

    .SubmitLabel {
        padding-right: 5px;
        font-size: 14px;
    }

    .InputTextField, .InputBtn {
        font-size: 12px;
    }

    .RegistrationDiv {
        margin: 15px;
    }

    #DocumentListUl {
        margin-right: 0px !important;
    }

}

@media only screen and (max-width: 359px) {
    .DropDownDiv {
        flex-direction: column !important;
    }

    .LayoutHeader_Right, .LayoutHeader_LeftText {
        padding: 0px;
    }

    .LayoutHeader_Right {
        margin-right: 5px;
    }

    .ResetPasswordDiv h4, .ResetPasswordDiv p, .ResetPasswordDiv .SubmitBox {
         margin: 0px 0px 10px 0px; 
    }

    .LayoutHeader_RightItemsDropdown {
        margin-top: -145px;
    }
}

@media only screen and (max-width: 950px)
{
    .DocumentView {
        margin-left: 15px;
    }
}

/* Things that have to be overwritten in document.css*/
div#toc {
    padding-top: 8px!important;
}
#toc.toc2 {
    margin-top: 107px !important;
}

#toc a {
    color: #00a0f5;
}

#toctitle {
    color: #00a0f5;
    font-family: tkRegular;
}

#toc ul {
    padding-left: 10px;
    font-family: tkRegular;
}

#toc li {
    font-family: tkRegular;
}

#content, #footer, #footnotes, #header {
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-left: 15px;
    max-width: 92%;
}

div#toc a:hover {
    text-decoration: underline;
}

@media only screen and (max-width: 950px) {
    #content, #footer, #footnotes, #header {
        margin-right: 10%!important;
        margin-left: 0px;
    }

    .image.right {
        margin-top: 0px;    
    }

    #toc.toc2 {
         margin-top: 0px!important;
    }
}

@media only screen and (min-width: 951px) {
    #toc.toc2 {
        width: 253px;
        height: calc(100% - 134px);
        overflow: auto;
        border-bottom: none;
        border-top: none;
        border-left: none;
        border-right: 1px solid #eef0f2;
        background-color: white;
        z-index: 1;
    }
}

#header > h1:first-child {
    margin-top: 5px;
}

/* Mozilla specific styles */
button::-moz-focus-inner {
    border: 0;
}