.dbq-card {
    opacity: 0;
    width: calc(100% - 30px);
    margin: 15px;
}

.dbq-button {

}

    .dbq-button.disabled {
        opacity: .65 !important;
    }


/*
    Folder Document Picker
*/
.dbq-folder-document-picker,
.dbq-file-picker {
    overflow-y: auto;
}

    .dbq-folder-document-picker .dropdown-menu,
    .dbq-file-picker .dropdown-menu {
    }

        .dbq-folder-document-picker .dropdown-menu > li:first-child,
        .dbq-file-picker .dropdown-menu > li:first-child {
            margin-left: 30px;
        }

    .dbq-folder-document-picker ul,
    .dbq-file-picker ul {
        list-style: none;
    }

        .dbq-folder-document-picker ul li,
        .dbq-file-picker ul li {
            cursor: pointer;
            margin-left: 23px;
        }

            .dbq-folder-document-picker ul li:before,
            .dbq-file-picker ul li:before {
                font-family: "Font Awesome 5 Free";
                display: inline-block;
                margin-left: -1.3em; /* same as padding-left set on li */
                width: 1.3em; /* same as padding-left set on li */
                font-weight: 900;
            }

            .dbq-folder-document-picker ul li.dbqfdp-folder:before,
            .dbq-file-picker ul li.dbqfp-folder:before {
                content: "\f07b";
            }

            .dbq-folder-document-picker ul li.dbqfdp-folder[data-is-folder-open="true"]:before,
            .dbq-file-picker ul li.dbqfp-folder[data-is-folder-open="true"]:before {
                content: "\f07c";
            }

            .dbq-folder-document-picker ul li.dbqfdp-folder-document:before,
            .dbq-file-picker ul li.dbqfp-file:before {
                content: "\f15c";
            }

    /*.dbq-folder-document-picker .document-editor-scrollview {
        float: left;
        min-height: 150px;
        height: calc(100% - 30px);
        max-height: 100%;
        width: 100%;
    }

    .dbq-folder-document-picker .dbqfdp-folders {

    }

    .dbq-folder-document-picker .dbqfdp-documents {

    }*/

    /*
        Folder Document Picker: Folder
    */
    /*.dbq-folder-document-picker .dbqfdp-folder {
        float: left;
        position: relative;
        margin: 10px 5px 0px 5px;
        width: calc(100% - 10px);
        border-radius: 5px;
        padding: 5px;
        cursor: pointer;
    }

        .dbq-folder-document-picker .dbqfdp-folder :nth-of-type(1) {
            margin-top: 5px;
        }

        .dbq-folder-document-picker .dbqfdp-folder :nth-last-child(1) {
            margin-bottom: 5px;
        }

        .dbq-folder-document-picker .dbqfdp-folder .active,
        .dbq-folder-document-picker .dbqfdp-folder :hover {
            background-color: #343a40;
        }

        .dbq-folder-document-picker .dbqfdp-folder .folder-name {
            margin-left: 5px;
        }*/

        /*
            Folder Document Picker: Folder options
        */

        /*.dbq-folder-document-picker .dbqfdp-folder .folder-options {
            position: absolute;
            top: 0;
            right: 0;
            opacity: 0;
        }

            .dbq-folder-document-picker .dbqfdp-folder .folder-options button {
                width: 26px;
                height: 26px;
                margin: 4px 5px 2px 0;
            }

        .dbq-folder-document-picker .dbqfdp-folder:hover .folder-options {
            opacity: 1;
            transition: 0.5s;
        }*/

        /*
            Folder Document Picker: Foldler options function button visibility
        */

        /*.dbq-folder-document-picker .dbqfdp-folder:hover .document-style-function-button-add {
            display: none;
        }

        .dbq-folder-document-picker .dbqfdp-folder:hover .document-style-function-button-remove {
            display: none;
        }*/



/* ****************************** 
    Dynabloqs Navbar Functions
****************************** */

#dbq-navbar-functions {

}

    #dbq-navbar-functions button {
        margin: 0 0 0 10px;
    }

        /* We set a minimum width for timer buttons. Timer buttons may show a time which updates every second, changing the button width constantly.
           By setting a minimum width, the button will always stay the same size. */
        #dbq-navbar-functions button[data-type='0'] {
            min-width: 100px;
        }

/************************************************************* 
    Dynabloqs Two Factor Authentication Control
*************************************************************/

.dbqtfa-modal {
}

    .dbqtfa-modal .form-control,
    .dbqtfa-modal .alert {
        margin-bottom: 15px;
    }

    .dbqtfa-modal .dbqtfa-app-buttons {
        display: flex;
        justify-content: center;
        padding: 27px 0 0 0;
    }

    .dbqtfa-modal .dbqtfa-qr-code {
        display: flex;
        justify-content: center;
    }

    .dbqtfa-modal .dbqtfa-secret-key-container {
        background: black;
        color: white;
        padding: 5px;
        display: inline-block;
        border-radius: 5px;
        margin-bottom: 15px;
    }

        .dbqtfa-modal .dbqtfa-secret-key-container .dbqtfa-secret-key {
        }

    .dbqtfa-modal .dbqtfa-copy-secret-key {
        height: 31px;
        margin-left: 5px;
    }

        .dbqtfa-modal .dbqtfa-copy-secret-key svg {
            width: 20px;
            height: 20px;
            fill: #fff;
        }

    .dbqtfa-modal input.error {
        border-color: red !important; /* Had to add important due to other importants, may be removed when restyling is done. */
    }