:root {
    --BASE__main-container-border-color          : transparent;
    --BASE__inner-container-border-color         : transparent;
    --BASE__navigation-column-border-color       : transparent;
    --BASE__main-content-column-border-color     : transparent;
    --BASE__main-application-navbar-border-color : transparent;
    --BASE__main-application-content-border-color: transparent;

    --BASE__main-container-border-width          : 0px        ;
    --BASE__inner-container-border-width         : 0px        ;
    --BASE__navigation-column-border-width       : 0px        ;
    --BASE__main-content-column-border-width     : 0px        ;
    --BASE__main-application-navbar-border-width : 0px        ;
    --BASE__main-application-content-border-width: 0px        ;
}

[data-show-base-borders="true"] {
    --BASE__main-container-border-color          : red      ;
    --BASE__inner-container-border-color         : blue     ;
    --BASE__navigation-column-border-color       : green    ;
    --BASE__main-content-column-border-color     : red      ;
    --BASE__main-application-navbar-border-color : purple   ;
    --BASE__main-application-content-border-color: orange   ;

    --BASE__main-container-border-width          : 5px        ;
    --BASE__inner-container-border-width         : 2px        ;
    --BASE__navigation-column-border-width       : 7px        ;
    --BASE__main-content-column-border-width     : 3px        ;
    --BASE__main-application-navbar-border-width : 5px        ;
    --BASE__main-application-content-border-width: 5px        ;
}



#BASE__mainContainer          {
    display        : flex                                                        ;
    justify-content: center                                                      ;
    align-items    : center                                                      ;
    width          : 100vw                                                       ;
    height         : 100vh                                                       ;
    border         : 5px solid var(--BASE__main-container-border-color)          ;
    padding        : 1px                                                         ;
}

#BASE__innerContainer         {
    width          : 100%                                                        ;
    height         : 100%                                                        ;
    border         : 2px solid var(--BASE__inner-container-border-color)         ;
}

#BASE__navigationColumn       {
    display        : flex                                                        ; 
    flex-grow      : 1                                                           ;
    padding        : 0px !important                                              ;
    border         : 7px dashed var(--BASE__navigation-column-border-color)      ;
}

#BASE__mainContentColumn      {
    display        : flex                                                        ;
    flex-direction : column                                                      ;
    border         : 3px dashed var(--BASE__main-content-column-border-color)    ;
    min-height     : 0                                                           ;
}

#BASE__mainApplicationNavbar  {
    flex-shrink    : 0                                                           ;
    border         : 5px solid var(--BASE__main-application-navbar-border-color) ;
}

#BASE__mainApplicationContent {
    flex           : 1                                                           ;
    border         : 5px solid var(--BASE__main-application-content-border-color);
}