body {
    padding-top: 56px;
}

/* Update UI after a link is cleaned */

#link-clear-btn,
#linkcleaner-buttons-container {
    display: none;
}

body[data-view="cleaned"] #linkcleaner-buttons-container {
    display: flex !important;
}

@media only screen and (hover: none) {

    body[data-view="cleaned"] #link-clear-btn {
        display: inline-block !important;
    }

}

/* QR code share option */
#qrcode {
    text-align: center;
}

#qrcode canvas {
    max-width: 100%;
}

/* Bulk mode text boxes */

#link-bulk-input,
#link-bulk-output {
    resize: none;
}

@media (min-width: 768px) {

    #link-bulk-input,
    #link-bulk-output {
        height: calc(100vh - 140px);
    }
}

@media (min-width: 1200px) {

    #link-bulk-input,
    #link-bulk-output {
        height: calc(100vh - 170px);
    }
}

/* Pride mode */
body[data-pride-mode="true"] #linkcleaner-header {
    background: linear-gradient(135deg, rgba(255, 177, 201, 1) 0%, rgba(255, 177, 201, 1) 9%, rgba(255, 255, 255, 1) 9%, rgba(255, 255, 255, 1) 18%, rgba(117, 216, 239, 1) 18%, rgba(117, 216, 239, 1) 27%, rgba(97, 54, 13, 1) 27%, rgba(97, 54, 13, 1) 36%, rgba(0, 0, 0, 1) 36%, rgba(0, 0, 0, 1) 45%, rgba(229, 0, 0, 1) 45%, rgba(229, 0, 0, 1) 54%, rgba(255, 141, 0, 1) 54%, rgba(255, 141, 0, 1) 64%, rgba(255, 238, 0, 1) 64%, rgba(255, 238, 0, 1) 72%, rgba(0, 129, 33, 1) 72%, rgba(0, 129, 33, 1) 81%, rgba(0, 76, 255, 1) 81%, rgba(0, 76, 255, 1) 90%, rgba(118, 1, 136, 1) 90%, rgba(118, 1, 136, 1) 100%) !important;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3) inset !important;
    color: #FFF !important;
    text-shadow: 0px 0px 5px #000 !important;
}

body[data-pride-mode="true"] .navbar .navbar-brand::after {
    content: ' 🏳️‍🌈';
}