/* General Layout Grid System >>> Start */
.XContainer:not(.XC), .XSection:not(.XC), .XR:not(.XC) {
    clear: both;
}
.XR > .XC {
    float: left;
}
.XR > .XC.FR {
    float: right;
}
.XR::after {
  content: "";
  display: block;
  clear: both;
}

/*==========  Mobile First Design  ==========*/
/*>>>>>>>>>>>>>>> EXTRA SMALL(XS)[mobile phones](max-width : 599px)*/
@media only screen and (max-width: 599px) {
    .XC.XS, .XC.XS12 {
        width: 100%;
    }

    .XC.XS1 {
        width: 8.33%;
    }

    .XC.XS2 {
        width: 16.66%;
    }

    .XC.XS3 {
        width: 25%;
    }

    .XC.XS4 {
        width: 33.33%;
    }

    .XC.XS5 {
        width: 41.66%;
    }

    .XC.XS6 {
        width: 50%;
    }

    .XC.XS7 {
        width: 58.33%;
    }

    .XC.XS8 {
        width: 66.66%;
    }

    .XC.XS9 {
        width: 75%;
    }

    .XC.XS10 {
        width: 83.33%;
    }

    .XC.XS11 {
        width: 91.66%;
    }
}
/*>>>>>>>>>>>>>>> SMALL(SM)[portrait tablets and large phones](min-width: 600px, max-width : 767px)*/
@media only screen and (min-width: 600px) {
    .XC.SM1 {
        width:8.33%;
    }       
    .XC.SM2 {
        width:16.66%;
    }       
    .XC.SM3 {
        width:25%;
    }       
    .XC.SM4 {
        width:33.33%;
    }       
    .XC.SM5 {
        width:41.66%;
    }       
    .XC.SM6 {
        width:50%;
    }       
    .XC.SM7 {
        width:58.33%;
    }       
    .XC.SM8 {
        width:66.66%;
    }       
    .XC.SM9 {
        width:75%;
    }
    .XC.SM10 {
        width:83.33%;
    }
    .XC.SM11 {
        width:91.66%;
    }
    .XC.SM12 {
        width:100%;
    }
}

/*>>>>>>>>>>>>>>> MEDIUM DEVICES(MD)[landscape tablets](min-width: 768px, max-width: 991px)*/
@media only screen and (min-width : 768px) {
    /*-----------------------------------------Grid of 12 columns*/
    .XC.MD1 {
        width:8.33%;
    }       
    .XC.MD2 {
        width:16.66%;
    }       
    .XC.MD3 {
        width:25%;
    }       
    .XC.MD4 {
        width:33.33%;
    }       
    .XC.MD5 {
        width:41.66%;
    }       
    .XC.MD6 {
        width:50%;
    }       
    .XC.MD7 {
        width:58.33%;
    }       
    .XC.MD8 {
        width:66.66%;
    }       
    .XC.MD9 {
        width:75%;
    }
    .XC.MD10 {
        width:83.33%;
    }
    .XC.MD11 {
        width:91.66%;
    }
    .XC.MD12 {
        width:100%;
    }
}

/*>>>>>>>>>>>>>>> LARGE DEVICES(LG)[laptops/desktops](min-width: 992px, max-width: 1200px)*/
@media only screen and (min-width : 992px) {
    /*-----------------------------------------Grid of 12 columns*/
    .XC.LG1 {
        width:8.33%;
    }       
    .XC.LG2 {
        width:16.66%;
    }       
    .XC.LG3 {
        width:25%;
    }       
    .XC.LG4 {
        width:33.33%;
    }       
    .XC.LG5 {
        width:41.66%;
    }       
    .XC.LG6 {
        width:50%;
    }       
    .XC.LG7 {
        width:58.33%;
    }       
    .XC.LG8 {
        width:66.66%;
    }       
    .XC.LG9 {
        width:75%;
    }
    .XC.LG10 {
        width:83.33%;
    }
    .XC.LG11 {
        width:91.66%;
    }
    .XC.LG12 {
        width:100%;
    }
}

/*>>>>>>>>>>>>>>> EXTRA LARGE DEVICES(XL)[large laptops and desktops](min-width: 1200px)*/
@media only screen and (min-width : 1200px) {
    /*-----------------------------------------Grid of 12 columns*/
    .XC.XL1 {
        width:8.33%;
    }       
    .XC.XL2 {
        width:16.66%;
    }       
    .XC.XL3 {
        width:25%;
    }       
    .XC.XL4 {
        width:33.33%;
    }       
    .XC.XL5 {
        width:41.66%;
    }       
    .XC.XL6 {
        width:50%;
    }       
    .XC.XL7 {
        width:58.33%;
    }       
    .XC.XL8 {
        width:66.66%;
    }       
    .XC.XL9 {
        width:75%;
    }
    .XC.XL10 {
        width:83.33%;
    }
    .XC.XL11 {
        width:91.66%;
    }
    .XC.XL12 {
        width:100%;
    }
}
/* General Layout Grid System >>> End */

/* Specific Elements Layout >>> Start*/
/*>>>>>>>>>>>>>>> EXTRA SMALL(XS)[mobile phones](max-width : 599px)*/
@media only screen and (max-width: 599px) {
    body{z-index:1;} /*To be used by js to check media size on window resize*/
    #divLayout{width:100%;}
    #divLogo a{margin:auto;}
    #divLogo + #hSNOP{line-height:unset;}
    #divLogo + #hSNOP span:first-child{font-size:20px;}
    #divGeneralSearch{left:auto !important;}
    #divGeneralSearchWI input[type=text]{display:none !important;}
    #divMainMenu{text-align:left;}
    #liMenuTrig{display:inline-block;}
    #ulMainMenu > li:not(#liMenuTrig){display:none;text-align:left;}
    #divAccessMenu{left:0px;right:0px !important;}
    #divLoginName{width:auto;}
    #spnLoginName{display:none !important;}
    #spnLoginUserLinksTrig{display:inline-block;}
    #ulLoginUserLinks{width:auto;}
    #liLoginName2{display:block;}
    /*-------------------------------------------------------*/
    #divFilters + div > fieldset {margin-top:-3px;}
    #divFilters + div > fieldset legend{margin-left:94px;}
    #divFilters + div > fieldset .ButtonsW{position:relative;margin-top: -4px;}
    #divFilters + div > fieldset .ButtonsW + div{height:calc(100% - 38px);}
    #ulFilters > li{width:100%;}
    #liFilterButtonsTrig{display:inline-block;}
    #aCloseFilters{right:10px;}
    #divFilters + div > fieldset .ButtonsW > ul li:nth-last-child(2){display:none;}
    /*-------------------------------------------------------*/
    .XFormList .XC.SpaceHolder{display:none;}
    /*-------------------------------------------------------*/
    #divFooter{text-align:center;}
}
/*>>>>>>>>>>>>>>> SMALL(SM)[portrait tablets and large phones](min-width: 600px, max-width : 767px)*/
@media only screen and (min-width: 600px) {
    body{z-index:2;}
    #divLayout{width:100%;}
    #divLogo + #hSNOP{line-height:unset;}
    #divLogo + #hSNOP span:first-child{font-size:28px;}
    #divGeneralSearch{left:auto !important;}
    #divGeneralSearchWI input[type=text]{display:inline;width:350px !important;}
    #divMainMenu{text-align:left;}
    /*#liMenuTrig{display:inline-block;}*/
    /*#ulMainMenu > li:not(#liMenuTrig){display:none;text-align:left;}*/
    #ulMainMenu > li:not(#liMenuTrig){display:inline-block;text-align:center;}
    /*-------------------------------------------------------*/
    #divFilters + div > fieldset legend{margin-left:94px;}
    #divFilters + div > fieldset .ButtonsW{width:calc(100% - 400px) !important;}
    #liFilterButtonsTrig{display:inline-block;}
    #divFilters + div > fieldset .ButtonsW > ul li:nth-last-child(2){display:none;}
    /*-------------------------------------------------------*/
    .XForm.XMRG_TB50 {margin-top: 50px;margin-bottom: 50px;}
    .XFormList .Label.XC {line-height:30px;}
    .XFormList .XC.SpaceHolder{display:inline-block;}
    /*-------------------------------------------------------*/
    #spnAuthorContacts{text-align:right;}
}
/*>>>>>>>>>>>>>>> MEDIUM DEVICES(MD)[landscape tablets](min-width: 768px, max-width: 991px)*/
@media only screen and (min-width : 768px) {
    body{z-index:3;}
    #divLogo + #hSNOP{line-height: 32px;height:74px;}
    /*-------------------------------------------------------*/
    #divFilters + div > fieldset legend{margin-left:90px;}
    #liFilterButtonsTrig {display: none;}
    #divFilters + div > fieldset .ButtonsW > ul li:nth-last-child(2){display:none;}
}
/*>>>>>>>>>>>>>>> LARGE DEVICES(LG)[laptops/desktops](min-width: 992px, max-width: 1200px)*/
@media only screen and (min-width : 992px) {
    body{z-index:4;}
    #divLogo + #hSNOP span:first-child{font-size:32px;}
    #divMainMenu{text-align:right;}
    /*#liMenuTrig{display:none;}*/
    #ulMainMenu > li:not(#liMenuTrig){display:inline-block;text-align:center;}
    /*-------------------------------------------------------*/
    #divFilters + div > fieldset .ButtonsW > ul li:nth-last-child(2){display:inline-block;}
}
/*>>>>>>>>>>>>>>> EXTRA LARGE DEVICES(XL)[large laptops and desktops](min-width: 1200px)*/
@media only screen and (min-width : 1200px) {
    body{z-index:5;}
    #divLayout{width:80%;}
}
/* Specific Elements Layout >>> End */