@media all and (max-width : 640px) {
    #divAppTitle {
        width: auto;
        float: none;
    }

    #lblAppTitle, #lblUser {
        width: auto;
    }
    
    .container-fluid .form-group {
        margin-bottom: var(--root-length);
    }

    .btn-toolbar[role='toolbar'] {
        width: 100%;
        margin-left: 0em;
    }

        .btn-toolbar[role='toolbar'] > .btn-group {
            width: 100%;
            float: none;
        }

            .btn-toolbar[role='toolbar'] > .btn-group > .btn {
                margin-bottom: var(--root-length-small);
                border-radius: var(--root-border-radius);
                width: 100%;
            }

    .input-group {
        width: 100%;
        min-width: 100%;
    }

        .input-group .form-control {            
            width: auto;
        }

            .input-group .input-group-text.content,
            .input-group .form-control.content {
                min-width: fit-content;
            }

    .treeview {
        width: 100%;
    }

    .system-zone .system-title-center .system-icon {
        width: 100%;
    }

    .toggle[data-toggle=toggle][role=button] {
        width:100%;
    }       
}

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

    .toggle[data-toggle=toggle][role=button] {
        display:none;
    }
}

/*~640*/
@media (max-width: 640px) {

    .modal-dialog {
        min-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/*641~800*/
@media (min-width: 641px) and (max-width: 800px) {

    .modal-dialog {
        min-width: 640px;
    }
}
/*641~1200*/
@media (min-width: 801px) and (max-width: 1200px) {

    .modal-dialog {
        min-width: 80%;
    }
}
/*1201~*/
@media (min-width: 1201px) {

    .modal-dialog {
        min-width: 960px;
    }
}