.footer-50 {
    -ms-grid-template-rows: auto 50px;
    grid-template-rows: auto 50px;
    display: -ms-grid;
    display: grid;
}

@media screen and (max-width: 500px) {
    .footer-50 .footer {
        -ms-grid-template-rows: 100%;
        grid-template-rows: 100%;
        display: none;
    }
}

.fab-create-link {
    background-color: rgb(50,200,245);
}

.grid-100 {
    display: -ms-grid;
    display: grid;
    -ms-grid-template-rows: calc(100vh - 50px) auto;
    grid-template-rows: calc(100vh - 50px) auto;
}

.link-types {
    width: 100%;
    max-width: 300px;

    max-height: 100%;

    overflow-y: auto;
}

.link-type {
    width: 100%;

    height: 60px;
    line-height: 60px;

    display: -ms-grid;
    display: grid;

    -ms-grid-template-rows: 100%;
    -ms-grid-template-columns: 60px auto;

    grid-template-rows: 100%;
    grid-template-columns: 60px auto;

    margin: 10px 0px 10px 0px;

    border: 1px solid rgb(200, 200, 200);

    box-sizing: border-box;

    cursor: pointer;

    text-decoration: none !important;
    color: rgb(32, 32, 32);
}

.link-type:hover {
    color: black;
}

.link-type .link-type-text {

    overflow: hidden;

    padding: 8px 16px;
    line-height: 44px;

    box-sizing: border-box;
    font-size: 1.2em;

}

.link-type .link-type-icon {
    width: 100%;
    height: 100%;
    overflow: hidden;

    padding: 6px;

    box-sizing: border-box;
}

.link-type-icon img {
    margin: 0px;
    padding: 0px;

    display: block;

    width: 100%;
    height: 100%;
}

.link-setup {
    width: 100%;
    max-width: 600px;

    height: auto;
}

.link-setup .link-form {
    width: 100%;
    height: auto;
    font-size: 1.15em;
}

.field-element-container > .field, .create-link-btn {
    width: 100%;
    height: 40px;
    margin-bottom: 6px;
    border-radius: 0px;
    outline: none;
    transition: all .1s;
}

.field-element-container > .field:focus, .create-link-btn:focus {
    border-width: 2px;
    border-color: rgb(32, 32, 32);
}

.field-element-container > .field {
    border: 1px solid gray;
    padding-left: 8px;
}

.create-link-btn {
    text-align: center;
    line-height: 40px;
    background-color: rgb(50,200,245);
    color: white;
    font-size: 1.15em;
    margin-top: 6px;
    cursor: pointer;
}

.create-link-btn:hover {
    background-color: rgb(42,190,232);
}

.create-link-btn:active {
    background-color: rgb(20,172,210);
}

.url-shortener {
    width: 100%;
    height: 60px;
    margin-top: 10px;
}

.shortener-input {
    width: 100%;
    height: 30px;
    border: 1px solid gray;
    display: inline-block;
    line-height: 30px;
    display: -ms-grid;
    display: grid;

    -ms-grid-template-rows: 100%;
    -ms-grid-template-columns: 50px auto;

    grid-template-rows: 100%;
    grid-template-columns: 50px auto;
    overflow: hidden;
    font-family: sans-serif;
}

.shortener-input span {
    width: 100%;
    height: 100%;
    line-height: 30px;
    padding-left: 6px;
}

.shortener-input input {
    width: 100%;
    height: 30px;
    border: 0px none;
    padding: 0px;
    margin: 0px;
    outline: none;
}

.shortener-check {
    height: 25px;
    line-height: 25px;
    margin-top: 8px;
    font-size: 1.10em;
}

.result-link-container {
    width: 100%;
    max-width: 340px;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;

    height: 38px;
    line-height: 38px;
    display: -ms-grid;
    display: grid;

    -ms-grid-template-columns: 1fr 38px 38px;
    -ms-grid-template-rows: 100%;

    grid-template-columns: 1fr 38px 38px;
    grid-template-rows: 100%;

    border: 1px solid gray;
    transition: all .10s;
}

.result-link-container:hover {
    border: 1px solid rgb(48, 48, 48);
}

.result-link-container:focus-within {
    border: 2px solid rgb(32, 32, 32) !important;
}

.result-link-container > * {
    display: inline-block;
    width: 100%;
    height: 100%;
    outline: none;
    box-sizing: border-box;
    border: 0 none !important;
    box-sizing: border-box;
}


.result-link {
    text-align: right;
    direction: RTL;
    padding-left: 6px;
    font-size: 1.05em;
}

.result-copy, .result-share {
    background-size: 75%;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.result-copy {
    background-image: url('../img/copy.svg');
    background-size: 65%;
}

.result-share {
    background-image: url('../img/share.svg');
}

.copy-msg {
    margin: auto;
    padding: 4px;
    background-color: rgb(50, 200, 245);
    color: white;
    display: none;
}

@keyframes copy-animation {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.copy-anim {
    display: inline !important;
    animation-name: copy-animation;
    animation-duration: 3s;
}


/* IE10-11 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .page, .page-return-icon {
        display: none;
    }
    .page[page-index="0"] {
        display: block !important;
    }

    .page-header {
        display: inline-block !important;
    }

    .page-title {
        width: 100%;
        text-align: center;
    }

    #link-dashboard {
        display: none !important;
    }
}

.swal2-html-container {
    overflow: hidden !important;
    padding: 8px !important;
}

/*

    qr-container
    qr-code-header
    qr-code

*/

.qr-container {
    text-align: center;
    padding-bottom: 16px;
}

.qr-code-header {
    display: block;
    text-align: center;
    font-size: 1.3em;
}

.qr-code {
    display: inline-block;
    background-color: rgb(128, 128, 128);
}

.svg-circleplus {
    stroke: white;
    width: 100%;
    height: 100%;
}

.link-mgr {
    display: block !important;
    width: 100%;
    overflow: auto;
}

@media only screen and (min-width: 768px) {

    /* width */
    .link-mgr::-webkit-scrollbar {
        width: 10px;
    }
    
    /* Track */
    .link-mgr::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    
    /* Handle */
    .link-mgr::-webkit-scrollbar-thumb {
        background: #888;
    }
    
    /* Handle on hover */
    .link-mgr::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

}

.linkView {
    display: block;
    width: 100%;
    /* height: 70px; */
    /* font-size: 1.2em; */
    padding: 6px;
    font-weight: 400;
    padding-bottom: 8px;
    border-bottom: 1px solid rgb(200, 200, 200);
    cursor: pointer;
}

.linkView > .linkType {
    font-size: 1.4em !important;
    font-weight: 500;
}

.linkView > .linkDate {
    font-size: 1.1em !important;
}

.login-appeal {
    display: block;
    max-width: 100%;
    overflow: hidden;
}