/*_____________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________*/
/*   Section - Begin                                                                                                                                               */
/*_____________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________*/


/*_____________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________*/
/*   Section - End                                                                                                                                                   */
/*_____________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________*/

/*_____________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________*/
/*   Font Imports - Begin                                                                                                                                               */
/*_____________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________*/

@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('fontawesome/css/all.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto');
/*_____________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________*/
/*   Font Imports - End                                                                                                                                                   */
/*_____________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________*/




/*_____________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________*/
/*   Global Variables - Begin                                                                                                                                 */
/*_____________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________*/

:root {
    --appHeaderHeight: 50px;
    --appFooterHeight: 32px;
    --pageHeaderHeight: 42px;
    --pageFooterHeight: 32px;
    --publicHeaderHeight: 100px;
    --publicFooterHeight: 50px;
    /*    --bgred: #f66;
    --bggreen: #6f6;
    --bgblue: #66f;*/
}

/*_____________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________*/
/*   Global Variables - End                                                                                                                                     */
/*_____________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________*/





/*_____________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________*/
/*   Site Settings - Begin                                                                                                                                               */
/*_____________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________*/


html, body {
    font-family: 'Roboto, Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
    width: 100%;
    margin: 0px;
}

.appBarHeaderHeight {
    height: var(--appHeaderHeight);
}

.page {
    margin: 0px;
    height: calc(100vh - var(--appHeaderHeight) - var(--appFooterHeight));
    width: 100%;
    overflow: hidden;
}

.pageContent {
    /*    height: calc(100vh - var(--appHeaderHeight) - var(--appFooterHeight) - var(--pageHeaderHeight) - var(--pageFooterHeight));*/
    height: 100%;
    width: 100%;
    overflow: auto;
}

.pageTabStrip {
    /*    height: calc(100vh - var(--appHeaderHeight) - var(--appFooterHeight) - var(--pageHeaderHeight) - var(--pageFooterHeight));*/
    height: 100%;
    width: 100%;
}

.tabContent {
    /*    height: calc(100vh - var(--appHeaderHeight) - var(--appFooterHeight) - var(--pageHeaderHeight) - var(--pageFooterHeight));*/
    height: 100%;
    width: 100%;
    max-height: 100%;
    max-width: 100%;
}

.drawerLayout {
    height: calc(100vh - var(--appHeaderHeight) - var(--appFooterHeight));
    width: 100%;
}

.drawerContent {
    height: calc(100vh - var(--appHeaderHeight) - var(--appFooterHeight));
    overflow: hidden;
}

.testColor {
    background-color: red !important;
}


.noBorder {
    border-color: transparent;
    border-width: 0px;
}

.toolBarSplitterHeight{
    height: 100px!important;
}

.publicPage {
    margin: 0px;
    height: calc(100vh - var(--publicHeaderHeight) - var(--publicFooterHeight));
    width: 100%;
    overflow: hidden;
}


/*_____________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________*/
/*   Site Settings - End                                                                                                                                               */
/*_____________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________*/






/*_____________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________*/
/*   Flexbox Layout Helpers - Begin                   */
/*            The justify-content property is used to align the items on the main axis, the direction in which flex-direction has set the flow.                    */
/*            The cross axis in flexbox runs perpendicular to the main axis, therefore if your flex-direction is either row or row-reverse then the cross axis runs down the columns. If your main axis is column or column-reverse then the cross axis runs along the rows.        */
/*            Use justify-content to align items on the main axis         */
/*             Alignment of items on the cross axis is achieved with the align-items property on the flex container or align-self property on individual items. In the case of a multi-line flex container, with additional space on the cross axis, you can use align-content to control the spacing of the rows.         */
/*                      */
/*                      */
/*                      */
/*_____________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________*/
.flexAlignLeft {
    margin-right: auto;
}


.flexAlignRight {
    margin-left: auto;
}


.flexColumnAutomaticSize {
    flex: 0 0 auto;
}



.flexColumnFillRemainingSpace {
    flex: 1 1 auto;
}

.flexColumnRightAlignContent {
    justify-content: flex-end;
}

.flexColumnPadLeftAndRight1Em {
    padding-left: 1em;
    padding-right: 1em;
}

.flexContainer{
    display: flex;
}

.flexContainerVerticalAlignItemsCenter{
    display: flex;
    align-items: center;
}

.flexContainerVerticalAlignItemsCenter {
    display: flex;
    align-items: center;
}



.flexRowJustifyContentLeft {
    display: flex;
    width: 100%;
    justify-content: flex-start;
}

.flexRowJustifyContentLeftAndRight {
    display: flex;
    width: 100%;
    justify-content: space-between;
}


.flexRowHorizontalAlignLeftVerticalAlignCenter {
    display: flex;
    flex-direction: row;                /* This is the default but doesn't hurt to specify it  anyway*/
    justify-content: flex-start;      /* Left-aligns content*/
    align-items: center;               /* Aligns on the cross-axis; in this case centered vertically*/
    padding: 0px;
    margin: 0px;
}

.flexAlignSelfVerticalCenter {
    align-self: center;
}


/*_____________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________*/
/*   Flexbox Layout Helpers  - End                                                                                                                                           */
/*_____________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________*/






/*_____________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________*/
/*   Miscellaneous Layout Helpers  - Begin                                                                                                   */
/*_____________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________*/
.positionRelative{
    position: relative;
}

.displayBlock {
    display: block;
}

.displayInline{
    display: inline;
}


.displayInlineBlock {
    display: inline-block;
}

/*_____________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________*/
/*   Miscellaneous Layout Helpers  - End                                                                                                      */
/*_____________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________*/



/*_____________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________*/
/*   Colors  - Begin                                                                                                   */
/*_____________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________*/

.fa-primary {
    color: var(--kendo-color-primary);
}

.fa-secondary {
    color: var(--kendo-color-secondary);
}

.color-omnigrant-omni{
    color: #22B19D;
}

.color-omnigrant-grant {
    color: #22B19D;
}

.color-omnigrant-axis {
    color: #0e6360;
}

.color-omnigrant-axis-bright {
    color: #0e6360;
    filter: brightness(125%);
}

.color-omnigrant-axis-brighter {
    color: #0e6360;
    filter: brightness(150%);
}

.color-omnigrant-axis-brightest {
    color: #0e6360;
    filter: brightness(175%);
}

.color-omnigrant-axis-brightest2 {
    color: #0e6360;
    filter: brightness(200%);
}

.color-omnigrant-central {
    color: #0097b2;
}

.color-omnigrant-central-bright {
    color: #0097b2;
    filter: brightness(125%);
}

.color-omnigrant-central-brighter {
    color: #0097b2;
    filter: brightness(150%);
}

.color-omnigrant-central-brightest {
    color: #0097b2;
    filter: brightness(175%);
}

.color-omnigrant-central-brightest2 {
    color: #0097b2;
    filter: brightness(200%);
}

.color-omnigrant-nexus {
    color: #fcb329;
}

.color-omnigrant-nexus-bright {
    color: #fcb329;
    filter: brightness(125%);
}

.color-omnigrant-nexus-brighter {
    color: #fcb329;
    filter: brightness(150%);
}

.color-omnigrant-nexus-brightest {
    color: #fcb329;
    filter: brightness(175%);
}

.color-omnigrant-nexus-brightest2 {
    color: #fcb329;
    filter: brightness(200%);
}

.color-omnigrant-pro {
    color: #ff5757;
}

.color-omnigrant-pro-bright {
    color: #ff5757;
    filter: brightness(125%);
}

.color-omnigrant-pro-brighter {
    color: #ff5757;
    filter: brightness(150%);
}

.color-omnigrant-pro-brightest {
    color: #ff5757;
    filter: brightness(175%);
}

.color-omnigrant-pro-brightest2 {
    color: #ff5757;
    filter: brightness(200%);
}



/*_____________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________*/
/*   Colors  - End                                                                                                      */
/*_____________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________*/

.height100{
    height: 100%!important;
}
 

.padding0{
    padding: 0px!important;
    margin: 0px!important;
}