/*
    This file is to show how CSS and other static resources (such as images) can be
    used from a library project/package.
*/
.cfg-container {
    display: flex;
    flex:1;
    flex-direction: column;
    height: 100%;
    max-width: 100%;
}

.cfg-title {
    flex: 0;
    display: flex;
    background-color: var(--f-color-3);
    color: var(--textcolor-2);
    padding: 1.0rem 0.5rem 0.5rem 0.5rem;
}

.cfg-workarea {
    flex: 1;
    display: flex;
    flex-direction: row;
    height:1%;
    border: 1px solid var(--border-1);
}

.cfg-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
}

.cfg-itemheading {
    flex: 0 0 auto;
    margin: 0.5rem;
}

.cfg-itemcontent {
    display: flex;
    flex: 1;
/*    max-width: 50rem;*/
}

.cfg-actionbuttonbar {
    justify-content: flex-start;
}

.cfg-menu {
    flex: 1;
    overflow: auto;
    width:100%;
    height: 100%;
}

/*
    https://stackoverflow.com/questions/41081275/bootstrap-left-align-checkbox-in-horizontal-form
*/
.move-left {
    width: auto;
    box-shadow: none;
}

.tng-input-icon {
    min-width: 2.8rem;
    height: 100%;
}

.tng-dark-theme .tng-input-icon {
    color: var(--dark-textcolor-1);
}

.btn-sq-lg {
    width: 8rem !important;
    height: 6.5rem !important;
}

.btn-sq {
    width: 6rem !important;
    height: 6rem !important;
}

.btn-sq-sm {
    width: 4rem !important;
    height: 4rem !important;
}

.btn-sq-xs {
    width: .2rem !important;
    height: .2rem !important;
    padding: .5rem;
}