/*Global modifiers*/
html, body {
    height: 100%;
    --dark-blue: #0D2A61;
    --blue: #164BAE;
    --light-blue: #cbddff;
    --help-attention: #D32521;
    --mdc-theme-primary: #0D2A61;
}

.mdc-text-field--focused:not(.mdc-text-field--disabled):not(.mdc-text-field--invalid) .mdc-floating-label {
    color: var(--mdc-theme-primary);
}

body {
    margin: 0;
    padding: 0;
}

header, footer {
    flex: none;
}

.wfa-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.wfa-body__content {
    height: 100%;
}

.wfa-color-error {
    color: red;
}

.wfa-color-success {
    color: green;
}

.wfa-visually-hidden {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.wfa-hidden {
    display: none;
}

.wfa-collapse {
    visibility: collapse;
}

.wfa-full-width {
    width: 100%;
}

.wfa-full-height {
    height: 100%;
}

.wfa-is-selected {
    background-color: #e1e1e1;
}

.wfa-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/*Top bar*/
.wfa-top-bar {
    position: relative;
    background-image: radial-gradient(circle farthest-corner at 50% 100%, var(--blue), var(--dark-blue));
    height: 126px;
    font-size: 1.9rem;
    justify-content: center;
}

/* Breadcrumbs */
.wfa-file-tree__path {
    padding: 5px 5px 5px 10px;
    font-size: larger;
}

.wfa-file-tree__path ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
}
.wfa-file-tree__path li { display: inline-flex; align-items: center; }
.wfa-file-tree__path li + li::before {
    content: "\\";
    opacity: .54;
    margin: 0 4px;
}
.wfa-file-tree__path a {
    text-decoration: none;
    color: rgba(0,0,0,.60);
    padding: 2px 4px;
    border-radius: 4px;
}
.wfa-file-tree__path a:hover {
    text-decoration: underline;
    background: rgba(0,0,0,.08);
    color: rgba(0,0,0,.87);
}
.wfa-file-tree__path [aria-current="page"] {
    color: rgba(0,0,0,.87);
    font-weight: 500;
    padding: 2px 4px;
}

/*File manager*/
.wfa-file-manager {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.wfa-file-tree__header #create-folder-btn {
    width: 56px;
    height: 56px;
}

.wfa-file-tree__header #create-folder-btn i {
    font-size: 36px;
}

/*File tree*/
.wfa-file-tree__header {
    display: flex;
    justify-content: flex-start;
    gap: 25px;
    padding: 25px 16px;
    align-items: anchor-center;
}
.wfa-file-tree {
    cursor: default;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-width: 1500px;
    margin: auto;
}

.wfa-file-tree__table-header-only {
    flex: none;
}

.wfa-file-tree .wfa-col-1 {
    width: 100%;
}

.wfa-file-tree .wfa-col-2 {
    width: 100px;
}

.wfa-file-tree .wfa-col-3,
.wfa-file-tree .wfa-col-4 {
    width: 160px;
}

.wfa-file-tree .wfa-col-5,
.wfa-file-tree .wfa-col-6 {
    width: 80px;
}

.wfa-file-tree .wfa-table__head--bordered th {
    font-size: 1.1rem;
    font-weight: 600;
}

.wfa-file-tree .js-content-table td {
    font-size: 1.1rem;
}

/*
    Since only table content is scrollabe we need to make table header wider to compensate the scroll width.
    Hence,  the last header cell width should be equal to last body cell width + browser scrollbar width.
    Browser scrollbar width is 17px, mostly.
    TODO: Calculate scrollbar width in js to please all browsers.
*/
.wfa-file-tree .wfa-col-4--cover-scroll {
    width: 177px;
}

/*Table*/
.wfa-table--no-border {
    border: none;
}

.wfa-table--scrollable {
    overflow-y: scroll;
    flex: auto;
}

.wfa-table__cell--align-left {
    text-align: left;
}

.wfa-table__cell--small-font-size {
    font-size: 0.8rem !important;
}

.wfa-table__head--bordered {
    border-top: 1px solid rgba(0, 0, 0, .12);
    border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.wfa-table tr.wfa-is-selected:hover {
    background-color: #d8d8d8;
}

/*Text with icon*/
.wfa-text-with-icon__icon,
.wfa-text-with-icon__text {
    vertical-align: bottom;
}

.wfa-text-with-icon__text {
    margin-left: 3px;
}

/*Progress bar*/
.mdc-linear-progress__bar-inner { border-color: var(--dark-blue); }
/* When closed, pin bars to 0 and disable transitions so it doesn't animate */
.mdc-linear-progress--closed .mdc-linear-progress__primary-bar,
.mdc-linear-progress--closed .mdc-linear-progress__buffer-bar {
    transform: scaleX(0) !important;
    transition: none !important;
}

/*Form*/
.wfa-form {
    padding: 10px;
}

.wfa-form--vertical {
    display: flex;
    flex-direction: column;
}

.wfa-form__title {
    padding: 5px;
    font-size: 1.3em;
    font-weight: bold;
}

.wfa-form__group {
    padding: 5px;
}

.wfa-form__control {
    margin-top: 15px;
    margin-bottom: 15px;
}

/*Login form*/
.wfa-login {
    height: 80vh;
}

.wfa-login__form {
    width: 300px;
}


.mdc-button.mdc-button--raised.wfa-file-upload__btn {
    background-color: var(--dark-blue);
}

/* Banner */
.wfa-banner {
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    background-color: #c62828;
    color: #fff3f3;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    font-family: Roboto, sans-serif;
}

.wfa-banner__text {
    flex: 1;
    text-align: center;
}

.wfa-banner__dismiss {
    font-weight: 600;
}