/*
//===================================================================================
// Copyright (c) Calnex Solutions Ltd.  All rights reserved.
// THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY
// OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT
// LIMITED TO THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
// FITNESS FOR A PARTICULAR PURPOSE.
//===================================================================================
// The contents of this file should not be copied or distributed
// without permission being granted by Calnex Solutions Ltd.
//=================================================================================== 
*/

/* flex box, contained divs stacked side by side (i.e. in a row) */
.cx-flex-row {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}

/* flex box, contained divs stacked on top of each other (i.e. in a column) */
.cx-flex-col {
    display: -ms-flexbox;
    display: -webkit-flex; 
    display: flex;

    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.cx-flex-row-reverse {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

/* Aligns content of flexbox centrally along main axis (horizontal for cx-flex-row, vertical for cx-flex-col */
.cx-flex-justify-center {
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

/* Items are packed toward the start line */
.cx-flex-justify-start {
    -ms-flex-pack: flex-start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

/* Items are packed toward the end line */
.cx-flex-justify-end {
    -ms-flex-pack: flex-end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

/* items are evenly distributed in the line with equal space around them */
.cx-flex-justify-space-around {
    -ms-flex-pack: justify;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}

/* items are evenly distributed in the line; first item is on the start line, last item on the end line */
.cx-flex-justify-space-between {
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

/* Aligns content of flexbox centrally along secondary axis (vertical for cx-flex-row, horizontal for cx-flex-col */
.cx-flex-align-center {
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

/* Cross-start margin edge of the items is placed on the cross-start line */
.cx-flex-align-start {
    -ms-flex-align: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

/* Cross-end margin edge of the items is placed on the cross-end line */
.cx-flex-align-end {
    -ms-flex-align: flex-end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}

.cx-flex-align-stretch {
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
}

/* Aligns content of flexbox centrally along main and secondary axis */
.cx-flex-center-center {
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;

    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}


/* This aligns a flex container's lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.
   Note: this property has no effect when there is only one line of flex items. */

/* Lines evenly distributed with equal space around each line */
.cx-flex-align-content-space-around
{
    -webkit-align-content: space-around;
    -ms-flex-line-pack: distribute;
    align-content: space-around;
}

/*  Lines packed to the center of the container */
.cx-flex-align-content-center
{
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
}

/*  Lines packed to the end of the container */
.cx-flex-align-content-end
{
    -webkit-align-content: flex-end;
    -ms-flex-line-pack: flex-end;
    align-content: flex-end;
}


/* By default, flex items will all try to fit onto one line. You can change that and allow
   the items to wrap as needed with this property. Direction also plays a role here, 
   determining the direction new lines are stacked in. */

.cx-flex-wrap {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.cx-flex-no-wrap {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}


/* When associated with a div contained in a parent flexbox the div will fill the maximum available space after */
/* rendering of sibling divs of fixed or unspecified size portions and will grow if the size of the parent flex box */
/* grows */
.cx-flex-default {
    -ms-flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto;
}

.cx-flex-fill {
    -ms-flex: 1 0 0px;
    -webkit-flex: 1 0 0px;
    flex: 1 0 0px;
}


.cx-flex-fill-half {
    -ms-flex: 0.5 0 0px;
    -webkit-flex: 0.5 0 0px;
    flex: 0.5 0 0px;
}

.cx-flex-fill-1-two-tenths {
    -ms-flex: 1.2 0 0px;
    -webkit-flex: 1.2 0 0px;
    flex: 1.2 0 0px;
}

.cx-flex-fill-1-quarter {
    -ms-flex: 1.25 0 0px;
    -webkit-flex: 1.25 0 0px;
    flex: 1.25 0 0px;
}

.cx-flex-fill-1-half {
    -ms-flex: 1.5 0 0px;
    -webkit-flex: 1.5 0 0px;
    flex: 1.5 0 0px;
}

.cx-flex-fill-1-three-quarter {
    -ms-flex: 1.75 0 0px;
    -webkit-flex: 1.75 0 0px;
    flex: 1.75 0 0px;
}

.cx-flex-fill-2 {
    -ms-flex: 2 0 0px;
    -webkit-flex: 2 0 0px;
    flex:2 0 0px;
}

.cx-flex-fill-2-half {
    -ms-flex: 2.5 0 0px;
    -webkit-flex: 2.5 0 0px;
    flex:2.5 0 0px;
}

.cx-flex-fill-3 {
    -ms-flex: 3 0 0px;
    -webkit-flex: 3 0 0px;
    flex:3 0 0px;
}

.cx-flex-fill-3-half {
    -ms-flex: 3.5 0 0px;
    -webkit-flex: 3.5 0 0px;
    flex:3.5 0 0px;
}

.cx-flex-fill-4 {
    -ms-flex: 4 0 0px;
    -webkit-flex: 4 0 0px;
    flex:4 0 0px;
}

.cx-flex-fill-4-2 {
    -ms-flex: 4.2 0 0px;
    -webkit-flex: 4.2 0 0px;
    flex:4.2 0 0px;
}

.cx-flex-fill-4-half {
    -ms-flex: 4.5 0 0px;
    -webkit-flex: 4.5 0 0px;
    flex: 4.5 0 0px;
}

.cx-flex-fill-5 {
    -ms-flex: 5 0 0px;
    -webkit-flex: 5 0 0px;
    flex: 5 0 0px;
}

.cx-flex-fill-5-half {
    -ms-flex: 5.5 0 0px;
    -webkit-flex: 5.5 0 0px;
    flex: 5.5 0 0px;
}

.cx-flex-fill-6 {
    -ms-flex: 6 0 0px;
    -webkit-flex: 6 0 0px;
    flex:6 0 0px;
}

.cx-flex-fill-7 {
    -ms-flex: 7 0 0px;
    -webkit-flex: 7 0 0px;
    flex:7 0 0px;
}

.cx-flex-fill-8 {
    -ms-flex: 8 0 0px;
    -webkit-flex: 8 0 0px;
    flex:8 0 0px;
}

.cx-flex-fill-9 {
    -ms-flex: 9 0 0px;
    -webkit-flex: 9 0 0px;
    flex: 9 0 0px;
}

.cx-flex-fill-10 {
    -ms-flex: 10 0 0px;
    -webkit-flex: 10 0 0px;
    flex:10 0 0px;
}

.cx-flex-fill-11 {
    -ms-flex: 11 0 0px;
    -webkit-flex: 11 0 0px;
    flex:11 0 0px;
}

.cx-flex-fill-12 {
    -ms-flex: 12 0 0px;
    -webkit-flex: 12 0 0px;
    flex:12 0 0px;
}

.cx-flex-fill-14 {
    -ms-flex: 14 0 0px;
    -webkit-flex: 14 0 0px;
    flex:14 0 0px;
}

.cx-flex-fill-15 {
    -ms-flex: 15 0 0px;
    -webkit-flex: 15 0 0px;
    flex: 15 0 0px;
}

.cx-flex-fill-16 {
    -ms-flex: 16 0 0px;
    -webkit-flex: 16 0 0px;
    flex:16 0 0px;
}

.cx-flex-fill-18 {
    -ms-flex: 18 0 0px;
    -webkit-flex: 18 0 0px;
    flex:18 0 0px;
}

.cx-flex-fill-20 {
    -ms-flex: 20 0 0px;
    -webkit-flex: 20 0 0px;
    flex: 20 0 0px;
}

.cx-flex-fill-22 {
    -ms-flex: 22 0 0px;
    -webkit-flex: 22 0 0px;
    flex:22 0 0px;
}

.cx-flex-fill-24 {
    -ms-flex: 24 0 0px;
    -webkit-flex: 24 0 0px;
    flex:24 0 0px;
}

.cx-flex-fill-26 {
    -ms-flex: 26 0 0px;
    -webkit-flex: 26 0 0px;
    flex:26 0 0px;
}

.cx-flex-fill-28 {
    -ms-flex: 28 0 0px;
    -webkit-flex: 28 0 0px;
    flex:28 0 0px;
}

.cx-flex-fill-30 {
    -ms-flex: 30 0 0px;
    -webkit-flex: 30 0 0px;
    flex:30 0 0px;
}

.cx-flex-fill-32 {
    -ms-flex: 32 0 0px;
    -webkit-flex: 32 0 0px;
    flex:32 0 0px;
}

.cx-flex-fill-34 {
    -ms-flex: 34 0 0px;
    -webkit-flex: 34 0 0px;
    flex:34 0 0px;
}

.cx-flex-fill-36 {
    -ms-flex: 36 0 0px;
    -webkit-flex: 36 0 0px;
    flex:36 0 0px;
}

.cx-flex-fill-40 {
    -ms-flex: 40 0 0px;
    -webkit-flex: 40 0 0px;
    flex:40 0 0px;
}

.cx-flex-fill-50 {
    -ms-flex: 50 0 0px;
    -webkit-flex: 50 0 0px;
    flex:50 0 0px;
}

.cx-flex-fill-64 {
    -ms-flex: 64 0 0px;
    -webkit-flex: 64 0 0px;
    flex: 64 0 0px;
}

/* The 'cx-flex-grow-' classes specify a flex-basis indicated by the name, they permit growth but not shrinkage */
.cx-flex-grow-em-1 {
    -ms-flex: 1 0 1em;
    -webkit-flex: 1 0 1em;
    flex: 1 0 1em;
}

.cx-flex-grow-em-2 {
    -ms-flex: 1 0 2em;
    -webkit-flex: 1 0 2em;
    flex: 1 0 2em;
}

.cx-flex-grow-0-auto {
    -ms-flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}

.cx-flex-grow-auto {
    -ms-flex: 1 0 auto;
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
}

.cx-flex-grow-10-auto {
    -ms-flex: 10 0 auto;
    -webkit-flex: 10 0 auto;
    flex: 10 0 auto;
}

.cx-flex-grow-shrink-auto {
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
}

.cx-flex-grow-shrink-4em {
    -ms-flex: 1 1 4em;
    -webkit-flex: 1 1 4em;
    flex: 1 1 4em;
}

/* flex fill specifier with grow and shrink properties set to 0 should give a constant width/height when attached to */
/* child div of a flexbox */

.cx-flex-fixed-px-1 {
    -ms-flex: 0 0 1px;
    -webkit-flex: 0 0 1px;
    flex: 0 0 1px;
}

.cx-flex-fixed-px-2 {
    -ms-flex: 0 0 2px;
    -webkit-flex: 0 0 2px;
    flex: 0 0 2px;
}

.cx-flex-fixed-px-3 {
    -ms-flex: 0 0 3px;
    -webkit-flex: 0 0 3px;
    flex: 0 0 3px;
}

.cx-flex-fixed-em-eighth {
    -ms-flex: 0 0 0.125em;
    -webkit-flex: 0 0 0.125em;
    flex: 0 0 0.125em;
}

.cx-flex-fixed-em-point35 {
    -ms-flex: 0 0 0.35em;
    -webkit-flex: 0 0 0.35em;
    flex: 0 0 0.35em;
}

.cx-flex-fixed-em-quarter {
    -ms-flex: 0 0 0.25em;
    -webkit-flex: 0 0 0.25em;
    flex: 0 0 0.25em;
}

.cx-flex-fixed-em-half {
    -ms-flex: 0 0 0.5em;
    -webkit-flex: 0 0 0.5em;
    flex: 0 0 0.5em;
}

.cx-flex-fixed-em-three-quarters {
    -ms-flex: 0 0 0.75em;
    -webkit-flex: 0 0 0.75em;
    flex: 0 0 0.75em;
}

.cx-flex-fixed-em-1 {
    -ms-flex: 0 0 1em;
    -webkit-flex: 0 0 1em;
    flex: 0 0 1em;
}

.cx-flex-fixed-em-1-half {
    -ms-flex: 0 0 1.5em;
    -webkit-flex: 0 0 1.5em;
    flex: 0 0 1.5em;
}

.cx-flex-fixed-em-1-point-6 {
    -ms-flex: 0 0 1.6em;
    -webkit-flex: 0 0 1.6em;
    flex: 0 0 1.6em;
}

.cx-flex-fixed-em-2 {
    -ms-flex: 0 0 2em;
    -webkit-flex: 0 0 2em;
    flex: 0 0 2em;
}

.cx-flex-fixed-em-2-eighth {
    -ms-flex: 0 0 2.125em;
    -webkit-flex: 0 0 2.125em;
    flex: 0 0 2.125em;
}

.cx-flex-fixed-em-2-half {
    -ms-flex: 0 0 2.5em;
    -webkit-flex: 0 0 2.5em;
    flex: 0 0 2.5em;
}

.cx-flex-fixed-em-2-three-quarter {
    -ms-flex: 0 0 2.75em;
    -webkit-flex: 0 0 2.75em;
    flex: 0 0 2.75em;
}

.cx-flex-fixed-em-3 {
    -ms-flex: 0 0 3em;
    -webkit-flex: 0 0 3em;
    flex: 0 0 3em;
}

.cx-flex-fixed-em-4 {
    -ms-flex: 0 0 4em;
    -webkit-flex: 0 0 4em;
    flex: 0 0 4em;
}

.cx-flex-fixed-em-5 {
    -ms-flex: 0 0 5em;
    -webkit-flex: 0 0 5em;
    flex: 0 0 5em;
}

.cx-flex-fixed-em-5-half {
    -ms-flex: 0 0 5.5em;
    -webkit-flex: 0 0 5.5em;
    flex: 0 0 5.5em;
}

.cx-flex-fixed-em-6 {
    -ms-flex: 0 0 6em;
    -webkit-flex: 0 0 6em;
    flex: 0 0 6em;
}

.cx-flex-fixed-em-7 {
    -ms-flex: 0 0 7em;
    -webkit-flex: 0 0 7em;
    flex: 0 0 7em;
}

.cx-flex-fixed-em-8 {
    -ms-flex: 0 0 8em;
    -webkit-flex: 0 0 8em;
    flex: 0 0 8em;
}

.cx-flex-fixed-em-9 {
    -ms-flex: 0 0 9em;
    -webkit-flex: 0 0 9em;
    flex: 0 0 9em;
}

.cx-flex-fixed-em-10 {
    -ms-flex: 0 0 10em;
    -webkit-flex: 0 0 10em;
    flex: 0 0 10em;
}

.cx-flex-fixed-em-11 {
    -ms-flex: 0 0 11em;
    -webkit-flex: 0 0 11em;
    flex: 0 0 11em;
}

.cx-flex-fixed-em-12 {
    -ms-flex: 0 0 12em;
    -webkit-flex: 0 0 12em;
    flex: 0 0 12em;
}

.cx-flex-fixed-em-13 {
    -ms-flex: 0 0 13em;
    -webkit-flex: 0 0 13em;
    flex: 0 0 13em;
}

.cx-flex-fixed-em-14 {
    -ms-flex: 0 0 14em;
    -webkit-flex: 0 0 14em;
    flex: 0 0 14em;
}

.cx-flex-fixed-em-14-quarter {
    -ms-flex: 0 0 14.25em;
    -webkit-flex: 0 0 14.25em;
    flex: 0 0 14.25em;
}

.cx-flex-fixed-em-16 {
    -ms-flex: 0 0 16em;
    -webkit-flex: 0 0 16em;
    flex: 0 0 16em;
}

.cx-flex-fixed-em-20 {
    -ms-flex: 0 0 20em;
    -webkit-flex: 0 0 20em;
    flex: 0 0 20em;
}

.cx-flex-fixed-em-22 {
    -ms-flex: 0 0 22em;
    -webkit-flex: 0 0 22em;
    flex: 0 0 22em;
}

.cx-flex-fixed-em-24 {
    -ms-flex: 0 0 24em;
    -webkit-flex: 0 0 24em;
    flex: 0 0 24em;
}

.cx-flex-fixed-em-25 {
    -ms-flex: 0 0 25em;
    -webkit-flex: 0 0 25em;
    flex: 0 0 25em;
}

.cx-flex-fixed-em-26 {
    -ms-flex: 0 0 26em;
    -webkit-flex: 0 0 26em;
    flex: 0 0 26em;
}

.cx-flex-fixed-em-32 {
    -ms-flex: 0 0 32em;
    -webkit-flex: 0 0 32em;
    flex: 0 0 32em;
}

.cx-flex-fixed-em-42 {
    -ms-flex: 0 0 42em;
    -webkit-flex: 0 0 42em;
    flex: 0 0 42em;
}

.cx-flex-fixed-em-64 {
    -ms-flex: 0 0 64em;
    -webkit-flex: 0 0 64em;
    flex: 0 0 64em;
}

.cx-flex-fixed-px-5 {
    -ms-flex: 0 0 5px;
    -webkit-flex: 0 0 5px;
    flex: 0 0 5px;
}

.cx-flex-fixed-px-10 {
    -ms-flex: 0 0 10px;
    -webkit-flex: 0 0 10px;
    flex: 0 0 10px;
}

.cx-flex-fixed-px-12 {
    -ms-flex: 0 0 12px;
    -webkit-flex: 0 0 12px;
    flex: 0 0 12px;
}

.cx-flex-fixed-px-20 {
    -ms-flex: 0 0 20px;
    -webkit-flex: 0 0 20px;
    flex: 0 0 20px;
}

.cx-flex-fixed-px-30 {
    -ms-flex: 0 0 30px;
    -webkit-flex: 0 0 30px;
    flex: 0 0 30px;
}

/* common flexbox classes shared among many partials
   N.B. These are being replaced with the styles above to remove the dependency on absolute/relative positioning,
   width and height, instead we should be relying on display:flex and flex attributes to define and fill content
   boundaries */
.flex-container {
    width: 100%;
    height: 100%;

    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    position: relative;
    margin:auto;
}

.flex-center-aligned {
    display: -ms-flexbox;
    display:-webkit-flex;
    display:flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;

    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.flex-direction-column {
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.flex-direction-row {
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}