/*
    THIS CSS FILE WILL CONTAIN ALL OF THE MEDIA QUERIES TO SUPPORT TABLETS / MOBILES
    THERE MIGHT STILL BE SOME OTHER MEDIA QUERIES FLOATING AROUND IN OTHER CSS FILES
    THIS ATTEMPTS TO BE AS ATOMIC AS POSSIBLE

    ALL OF THE CLASS NAMES IN THIS FILE MUST HAVE THE PREFIX .knl-mscss- (MediaSupportCSS)

    RESPONSIVE GUIDE -- PLEASE USE DIV
        - container should use class "knl-mscss-responsive"
        - first level children must have knl-mscss-responsive__[1, 2, 3, 4, 5, etc]

    TERMS EXPLANATION:
        xs  --> extra small     x <= 499
        sm  --> small           x <= 767
        md  --> medium          768 >= x <= 959
        lg  --> large           x >= 960
        rm  --> reduced main    x <= 959

    MAGIC NUMBERS EXPLANATION:
        767px   --> the width where we will apply sm classes
        959px   --> the width of the section #main - 1
        979px   --> the width where navbar menus become burger menus    
*/

.knl-mscss-responsive {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
}

.no-flexbox .knl-mscss-responsive {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.knl-mscss-responsive > .knl-mscss-responsive__1 { flex: 1; -webkit-flex: 1; -ms-flex: 1 }
.knl-mscss-responsive > .knl-mscss-responsive__2 { flex: 2; -webkit-flex: 2; -ms-flex: 2 }
.knl-mscss-responsive > .knl-mscss-responsive__3 { flex: 3; -webkit-flex: 3; -ms-flex: 3 }
.knl-mscss-responsive > .knl-mscss-responsive__4 { flex: 4; -webkit-flex: 4; -ms-flex: 4 }
.knl-mscss-responsive > .knl-mscss-responsive__5 { flex: 5; -webkit-flex: 5; -ms-flex: 5 }

.no-flexbox .knl-mscss-responsive > .knl-mscss-responsive__1 { display: table-cell; }
.no-flexbox .knl-mscss-responsive > .knl-mscss-responsive__2 { display: table-cell; }
.no-flexbox .knl-mscss-responsive > .knl-mscss-responsive__3 { display: table-cell; }
.no-flexbox .knl-mscss-responsive > .knl-mscss-responsive__4 { display: table-cell; }
.no-flexbox .knl-mscss-responsive > .knl-mscss-responsive__5 { display: table-cell; }

@media all and (min-width: 960px) {
    .knl-mscss-lg-topLeft-borderRadius6     { border-radius: 6px 0 0 0; }
    .knl-mscss-lg-topRight-borderRadius6    { border-radius: 0 6px 0 0; }
    .knl-mscss-lg-bottomRight-borderRadius6 { border-radius: 0 0 6px 0; }
    .knl-mscss-lg-bottomLeft-borderRadius6  {border-radius: 0 0 0 6px;}
    .knl-mscss-lg-top-borderRadius6         { border-radius: 6px 6px 0 0; }
    .knl-mscss-lg-bottom-borderRadius6      { border-radius: 0 0 6px 6px; }
    .knl-mscss-lg-full-borderRadius6      { border-radius: 6px 6px 6px 6px; }

    .knl-mscss-lg-block-i { display: block !important; }
}

@media all and (min-width: 768px) and (max-width: 959px) {
    .knl-mscss-md-topLeft-borderRadius6     { border-radius: 6px 0 0 0; }
    .knl-mscss-md-topRight-borderRadius6    { border-radius: 0 6px 0 0; }
    .knl-mscss-md-bottomRight-borderRadius6 { border-radius: 0 0 6px 0; }
    .knl-mscss-md-bottomLeft-borderRadius6  { border-radius: 0 0 0 6px; }
    .knl-mscss-md-top-borderRadius6         { border-radius: 6px 6px 0 0; }
    .knl-mscss-md-bottom-borderRadius6      { border-radius: 0 0 6px 6px; }
    .knl-mscss-md-full-borderRadius6      { border-radius: 6px 6px 6px 6px; }

    .knl-mscss-md-block-i { display: block !important; }

 }

@media all and (max-width: 767px) {
    .knl-mscss-responsive { display: block; }

    .knl-mscss-responsive > div {
        width: 99%;/* not 100% to respect the scrollbar */
        max-width: 767px;
    }

    .no-flexbox .knl-mscss-responsive > div {
        display: block !important;
    }

    .knl-mscss-responsive > div:not(.knl-mscss-ignore) div {
         width: 100%;
    }

    .knl-mscss-sm-hidden        { display: none; }
    .knl-mscss-sm-hidden-i      { display: none !important; }
    .knl-mscss-sm-block-i       { display: block !important; }
    .knl-mscss-sm-inlineBlock   { display: inline-block; }
    .knl-mscss-sm-inlineBlock-i { display: inline-block !important; }
    .knl-mscss-sm-table-i       { display: table !important; }

    .knl-mscss-sm-topLeft-borderRadius6     { border-radius: 6px 0 0 0; }
    .knl-mscss-sm-topRight-borderRadius6    { border-radius: 0 6px 0 0; }
    .knl-mscss-sm-bottomRight-borderRadius6 { border-radius: 0 0 6px 0; }
    .knl-mscss-sm-bottomLeft-borderRadius6  { border-radius: 0 0 0 6px; }
    .knl-mscss-sm-top-borderRadius6         { border-radius: 6px 6px 0 0; }
    .knl-mscss-sm-bottom-borderRadius6      { border-radius: 0 0 6px 6px; }
    .knl-mscss-sm-full-borderRadius6      { border-radius: 6px 6px 6px 6px; }

    .knl-mscss-sm-fontSize7     { font-size: 0.7em; }
    .knl-mscss-sm-fontSize7-i   { font-size: 0.7em !important; }
    
    .knl-mscss-sm-width30-i { width: 30px !important; }
    .knl-mscss-sm-width50 { width: 50px; }
    .knl-mscss-sm-width110  { width: 110px; }

    .knl-mscss-sm-marginLeft90-i { margin-left: 90px !important; }

    .knl-mscss-sm-paddingLeft25-i { padding-left: 25px !important; }

    .knl-mscss-sm-borderRightNone-i { border-right: none !important; }
    .knl-mscss-sm-borderLeftNone-i  { border-left: none !important; }

 }

@media all and (max-width: 500px)
{
    .knl-mscss-xs-block-i { display: block !important; }
    .knl-mscss-xs-hidden-i { display: none !important; }

}

@media all and (max-width: 959px) /* 960px is the width of section #main */
{
    .knl-mscss-rm-width100vw    { width: 100vw; }
    .knl-mscss-rm-widthAuto     { width: auto; }
    .knl-mscss-rm-widthAuto-i   { width: auto !important; }
    .knl-mscss-rm-width97pc-i   { width: 97% !important; }
    .knl-mscss-rm-width100pc-i  { width: 100% !important; }
    .knl-mscss-rm-width220-i    { width: 220px !important; }

    .knl-mscss-rm-block-i       { display: block !important; }
    .knl-mscss-rm-inlineBlock-i { display: inline-block !important; }
    .knl-mscss-rm-table-i       { display: table !important; }
    .knl-mscss-rm-hidden-i      { display: none  !important; }

    .knl-mscss-rm-respectVerticalScrollbar { padding-right: 17px; }
    .knl-mscss-rm-respectVerticalScrollbar-i { padding-right: 17px !important; }

    .knl-mscss-rm-floatLeft-i { float: left !important; }
    .knl-mscss-rm-floatRight-i { float: right !important; }

    .knl-mscss-rm-positionAbsolute-i { position: absolute !important; }

    
}