pns-container {
    display: block;
}

pns-floating-form {
    border: solid 1px #616C70;
    box-sizing: content-box;
    background: #FFFFFF;
    position: absolute;
    left: calc(50% - 300px);
    width: 600px;
    padding: 5px;
    top: 150px;
}

pns-form-item {
    box-sizing: border-box;
    display: inline-block;
    padding-left: 5px;
    width: 300px;
}

pns-floating-form a {
    margin: 15px;
}

/*////////////////////////////////////////////////////////////////////////////
// --------------------------------- MENU --------------------------------- //
////////////////////////////////////////////////////////////////////////////*/

pns-menu {
    background: #616C70;
    display: block;
}

pns-menu-option {
    background: #4F4F4F;
    display: inline-block;
    text-align: center;
    line-height: 25px;
    margin-right: 2px;
    line-height: 25px;
    color: #FAFAFA;
    font-size: 16px;
    cursor: pointer;
    width: 120px;       /* Long usernames were breaking the user menu on the right side of the page */
    height: 25px;
}

    pns-menu-option:hover {
        background: #333333;
        font-weight: bold;
    }

.pns-menu-option-dropdown {
    overflow: hidden;
}

.pns-menu-option-right {
    float: right !important;
    overflow: hidden;
}

.menu-dropdown {
    overflow: hidden;
}

    .menu-dropdown .menu-dropbtn {
        border: none;
        outline: none;
        color: #FAFAFA;
        background-color: inherit;
        font-family: inherit;
        margin: -1px;
    }

    pns-menu-option a:hover, .menu-dropdown:hover .menu-dropbtn {
        background-color: #333333;
    }

.menu-dropdown-content {
    display: none;
    position: absolute;
    background-color: #ddd;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    .menu-dropdown-content a {
        float: none;
        color: #333;
        padding: 6px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

        .menu-dropdown-content a:hover {
            background-color: #eee;
        }

.menu-dropdown:hover .menu-dropdown-content {
    display: block;
}

/*////////////////////////////////////////////////////////////////////////////
// ------------------------------ INTERFACES ------------------------------ //
////////////////////////////////////////////////////////////////////////////*/

pns-login-win {
    box-shadow: 2px 2px 8px#333333;
    transform: translate(-50%, -50%);
    border: solid 1px #DEDEDE;
    background: #FFFFFF;
    border-radius: 10px;
    position: absolute;
    display: block;
    padding: 10px;
    width: 325px;
    left: 50%;
    top: 50%;
}

pns-auth {
    box-shadow: 2px 2px 8px#333333;
    transform: translate(-50%, -50%);
    border: solid 1px #DEDEDE;
    background: #FFFFFF;
    border-radius: 10px;
    position: absolute;
    display: block;
    padding: 10px;
    width: 325px;
    left: 50%;
    top: 50%;
}

pns-documents {
    display: block;
}

pns-document-editor {
    box-shadow: 2px 2px 8px#333333;
    transform: translate(-50%, 0);
    border: solid 1px #DEDEDE;
    width: calc(100% - 50px);
    height: calc(100% - 100px);
    background: #FFFFFF;
    border-radius: 10px;
    position: absolute;
    max-width: 1285px;
    display: block;
    left: 50%;
    top: 50px;
}

    pns-document-editor h1 {
        text-align: center;
    }

pns-token-manager {
    position: absolute;
    width: 250px;
    left: 10px;
}

pns-doc-token input {
    cursor: pointer;
}

.TinyMceContainer {
    width: calc(100% - 285px);
    height: calc(100% - 80px);
    position: absolute;
    max-width: 1000px;
    left: 275px;
}

.TokenList {
    margin-top: 10px;
    overflow-y: auto;
    height: 250px;
}

.DocumentFlowsInterface table tbody tr td:first-child {
    width: 300px;
}

.clickable:hover {
    background-color: yellow !important;
}

/* Workaround for multiselect jamming checkbox command label together due to paynseconds app.css */
input.form-check-input[type=checkbox],input[type=radio] { 
    margin: 3px -15px 0;
}

tr:hover td
{
    background-color: #dcdcdc !important;
}

/*.modal {
    z-index: 1010;
}

.modal-overlay {
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
*/

pns-user-editor {
    box-shadow: 2px 2px 8px #333333;
    transform: translate(-50%, 0);
    border: solid 1px #DEDEDE;
    background: #FFFFFF;
    border-radius: 10px;
    position: absolute;
    max-width: 1285px;
    display: block;
    left: 50%;
    top: 50px;
    padding: 10px;
    z-index: 1010;
}

.modal {
    display: none;
    position: fixed;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    position: relative;
    background-color: white;
    padding: 20px;
    margin: auto;
    width: 75%;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

@-webkit-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}