/*
 * This file contains common CSS styles for webtransfer.
 *
 * Use it sparingly and only for very specific things, that have to be styled for ALL customers.
 *
 * Please only use id or class selectors here! Please do also prefix them with 'wbt-' e.g. #wbt-bla-bla
 * or .wbt-blub-blub to better find and identify such global styles.
 */
.wbt-file-hash {
    font-size: 0.75em;
    color: #7d7d7d;
}

.wbt-form-hint {
    margin-top: -3px;
    margin-bottom: 10px;
    font-size: 0.75rem;
    display: none;
}

.wbt-form-hint-do-not-hide {
    display: block;
}

.wbt-form-hint-icon {
    display: inline-block;
    margin-left: 5px;
    cursor: help;
}

#wbt-content ul.wbt-form-hint-list {
    margin: 0;
    padding: 0;
}

#wbt-content ul.wbt-form-hint-list li {
    margin-left: 1rem;
}

#wbt-content ul.wbt-form-hint-list li:first-child:last-child{
    list-style-type: none;
    margin-left: 0;
}

/* apply position relative to the password generater parent */
label[for="downloadpassword_upload1"] + .nobr {
    position: relative;
}

label[for="downloadpassword_upload2"] + .nobr {
    position: relative;
}

.wbt-pw-tools {
    position: absolute;
    right: 5px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0;
    margin: 0;
}

#wbt-open-pw-generator-button {
    background: transparent none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border: none;
    padding: 0;
    margin: 0 3px 0 0;
}

 #wbt-password-eye-button1, #wbt-password-eye-button2 {
    background: transparent none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    padding: 0;
    margin: 0;
}

#wbt-open-pw-generator-button,
#wbt-password-eye-button1,
#wbt-password-eye-button2 {
    max-height: 23px;
}

.wbt-open-pw-generator:hover,
.wbt-open-pw-generator:active,
.wbt-open-pw-generator:focus {
    background-color: transparent;
}

.wbt-pw-generator {
    display: none;
    position: absolute;
    left: 0;
    top: 2rem;
    z-index: 1000;
    background-color: white;
    padding: 1rem;
    width: 100%;
    min-width: 400px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.12), 
              0 2px 2px rgba(0,0,0,0.12), 
              0 4px 4px rgba(0,0,0,0.12), 
              0 8px 8px rgba(0,0,0,0.12),
              0 16px 16px rgba(0,0,0,0.12);
            box-shadow: 0 1px 1px rgba(0,0,0,0.12), 
              0 2px 2px rgba(0,0,0,0.12), 
              0 4px 4px rgba(0,0,0,0.12), 
              0 8px 8px rgba(0,0,0,0.12),
              0 16px 16px rgba(0,0,0,0.12);
}

.wbt-pw-generator > h2 {
    margin-top: 0;
}

.wbt-pw-generator__buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;    
    -ms-flex-flow: wrap;    
        flex-flow: wrap;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.wbt-inline-icon {
    display: inline-block;
    min-width: 25px;
    margin:auto;
}

.wbt-icons-list {
    text-align:center;
    white-space: nowrap;
}

.wbt-sub-menu-active {
    font-weight: bold !important;
}

.wbt-main-menu-active {
    font-weight: bold !important;
}

.wbt-global-menu-active {
    font-weight: bold !important;
}

/* Inspired by https://stackoverflow.com/questions/2802842/simple-css-tabs-need-to-break-border-on-active-tab */
#wbt-sub-menu {
    padding: 3px 0;
    margin-left: 0;
}

#wbt-sub-menu li {
    list-style: none;
    display: inline-block;
    margin: 0 0 8px;
}

#wbt-sub-menu li a {
    padding: 3px 0.5em;
    margin-left: 3px;
    border: 1px solid #778;
    border-bottom: none;
    text-decoration: none;
    color: #666666;
}

#wbt-sub-menu li a:hover {
    color: #000;
}

.wbt-tippy-img {
    float: none;
    vertical-align: middle;
}

.wbt-display-none {
    display:none;
}

#wbt-spinningcircle {
    position: fixed;
    top: 50%;
    left: 50%;
    width:auto;
    display:none;
}

#wbt-spinningcircle img {
    min-width: 50px;
}

#wbt-uploading {
    text-align: center;
    background-repeat: no-repeat;
    background-position: 50% 200px;
    /*noinspection CssUnknownTarget*/
    background-image: url('../images/uploading.gif');
    display: none;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    padding: 75px 0 0;
    margin: 0;
    z-index: 1000;
    font-weight: bold;
    font-size: large;
    background-color: rgba(255,255,255,0.8);
}

.wbt-pie-chart-wrapper {
    max-width: 400px;
}

.wbt-button-disabled {
    color: gray !important;
}

.wbt-icon {
    min-width: 16px;
    min-height: 16px;
    display: block;
}

.wbt-email-list {
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
}

.wbt-email-list li {
    padding: 0 !important;
    margin-bottom: 2px !important;
}

@media (max-width:900px) {
    .wbt-grid-container {
        display: block;
    }
}

@media (min-width:900px) {
    .wbt-grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
    }
}

table#wbt-transfer-summary {
    margin-bottom: 1em;
    background-color: whitesmoke;
}

table#wbt-transfer-summary tr td:first-child {
    width: 30%;
}

table#wbt-transfer-summary tr td {
    padding: 0.31em;
    border: none;
    background: none;
}

#wbt-back-link {
    text-decoration: none;
    color: #666666;
}

.wbt-email {
    white-space: nowrap;
}

#wbt-uploaded-files_wrapper td,
.wbt-file,
.wbt-filename {
    overflow-wrap: anywhere;
    min-width: 100px;
}

.wbt-host-and-warning,
.wbt-location-and-flag {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#wbt-uploaded-files_wrapper td.filesize {
    white-space: nowrap;
}

#wbt-download_wrapper {
    margin-bottom: 15px;
}

.wbt-action-btn {
    margin-bottom: 5px;
    margin-top: 15px;
}

.wbt-action-btn-form {
    width: 100%;
}

hr {
    color: #666666;
}

#fileuploader{
    width: 100%;
}

#uploader_container{
    padding: 0;
    min-width: 380px;
}

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 16px;
    background-color: white; /* in order to get mix-blend-mode working! */
}

input.wbt-secret {
    /*noinspection CssNoGenericFontName*/
    font-family: text-security-disc;
    /* Use -webkit-text-security if the browser supports it */
    -webkit-text-security: disc;
}

.wbt-save-message,
.wbt-message-templates,
.wbt-message-saved {
    text-align: right;
    display: block;
    font-size: 0.9em;
    text-decoration: none;
    font-weight: bold;
}

.wbt-save-message,
.wbt-message-saved {
    display: none;
}

.wbt-message-template-dialog,
.wbt-message-template-dialog * {
    box-sizing: border-box;
}

.wbt-message-template-dialog {
    width: clamp(300px, 75%, 600px);
    max-height: 400px;
    padding-left: 0;
    padding-right: 0;
    border-width: 1px;
    margin: auto;
}

.wbt-message-template-dialog h3 {
    padding: 0 1rem;
    margin-top: 0;
}

.wbt-message-template-dialog p {
    padding: 0 1rem;
}

.wbt-message-template-dialog ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.wbt-message-template-dialog ul li {
    display: flex;
    width: 100%;
    padding: 0.5rem 1rem !important;
}

.wbt-message-template-dialog ul li a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.wbt-message-template-dialog ul li button {
    appearance: none;
    border: none;
    background: url('/images/trash.svg') no-repeat center center;
    width: 24px;
    height: 24px;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.wbt-message-template-dialog ul li:hover {
    background-color: rgba(0, 0, 0, 0.12);
}


#wbt-content .wbt-form-row .wbt-date-picker-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

#wbt-content .wbt-form-row input[type='date'].wbt-date-picker {
    position: absolute;
    left: 0;
    width: 0px;
    padding: 0;
    border: none;
    background: none;
}