/* Metro Notification v7 */


/* ====================== */
/*      Small Boxes       */
/* ====================== */
#mnSBcontainerTR{
    position: fixed;
    z-index: 9999;
    top: 10px;
    right: 0px;
}

#mnSBcontainerTL{
    position: fixed;
    z-index: 9999;
    top: 10px;
    left: 0px;
}

#mnSBcontainerBL{
    position: fixed;
    z-index: 9999;
    bottom: 10px;
    left: 0px;
}

#mnSBcontainerBR{
    position: fixed;
    z-index: 9999;
    bottom: 10px;
    right: 0px;   
}


.mnSmallBox{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    position: relative;
    margin-bottom: 10px;
    color: white;
    opacity: 0;
    cursor: pointer;
    line-height: 0;

}

.mnSmallBox table{
    width: 100% !important;
    height: 100% !important;
    border: 0px !important;
    border-spacing: 0px !important;
    border-collapse:collapse !important;
    margin: 0px;
}

.mnSmallBox td {
   padding:0 !important;  
   margin:0 !important;
}

.mnSbContent{
    padding-left: 8px;
    display: block;
    font-size: 14px;
    padding-bottom: 5px;
    padding-top: 5px;
    line-height: 1;
}


.mnSbTitle{
    padding-left: 5px;
    font-size: 20px;
    font-weight: lighter;
    display: block;
    line-height: 1;
}


.mnSbMainImage{
    width: 100px !important;
    height: 100px !important;
}

.mnSbMainImage img{
    width: 100px !important;
    height: 100px !important;
}


#mnSBcontainerTR .mbSbIcon{
    position: absolute;
    bottom: 5px;
    right: 0px;
    width: 35px;
}

.mnSbIcon{
    width: 25px;
}

.mnSbIcon img{
    position: absolute;
    bottom: 5px;
    right: 10px;
    width: 25px;
}

.mnSbIcon i{
    font-size: 20px;
    position: absolute;
    bottom: 5px;
    right: 10px;
}

.mnSbButtonSection{
    width: 100px;
}

.mnSbButtonSection button{
    line-height: 1;
    font-size: 13px;
    padding: 5px;
    margin-top: 3px;
    margin-bottom: 3px;
    width: 97%;
    display: block;
    color: white;
    border: 1px solid white;
    cursor: pointer;
}

/* ====================== */
/*       Big Boxes        */
/* ====================== */
#mbBbTabContainer{
    z-index: 999;
    position: fixed;
    top: 10px;
    right: 10px;
}


#mnBigBoxContainerBR{
    position: fixed;
    bottom: 0px;
    right: 10px;
    z-index: 9999;
}

#mnBigBoxContainerBL{
    position: fixed;
    bottom: 0px;
    left: 10px;
    z-index: 9999;
}


.mnBbTab{
    position: relative;
    width: 35px !important;
    height: 33px !important;
    overflow: hidden;
    padding-top: 5px;
    background-color: #6D1D99;
    margin-bottom: 5px;
    cursor: pointer;
    opacity: 0;

}



.mnBbTab img{
    width: 25px;
}

.mnBbTab i{
    font-size: 27px;
    color: white;
}

.mnBbClose{
    position: absolute;
    right: 10px;
    top: 5px;
    font-size: 25px;
    cursor: pointer;
}

.mnBigBox{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    position: fixed;
    bottom: 10px;
    margin-bottom: 10px;
    color: white;
    opacity: 0;
    padding: 5px;
}

#mnBigBoxContainerBR .mnBigBox{
    right: 10px;
}

#mnBigBoxContainerBL .mnBigBox{
    left: 10px;
}

.mnBigBox table{
    width: 100%;
}


.mnBbContent{
    padding: 5px;
    display: block;
    font-size: 14px;
    font-weight: lighter;
}


.mnBbTitle{
    font-size: 20px;
    font-weight: lighter;
    display: block;
}

.mnBbIconSection{
    height: 25px;
}

.mnBbIconSection button{
    font-size: 13px;
    padding: 5px;
    margin-top: 3px;
    margin-bottom: 3px;
    width: 100%;
    display: block;
    color: white;
    border: 1px solid white;
    cursor: pointer;
}

.mnBbIconImg{
    position: absolute;
    bottom: 10px;
    right: 7px;
    width: 25px;
}

.mnBbIconSection i{
    position: absolute;
    right: 7px;
    bottom: 2px;
    font-size: 22px;
}

.mnBbIndicator{
    font-size: 25px;
    font-weight: lighter;
}



/* ====================== */
/*   Metro Messagebox     */
/* ====================== */
#mnLetterCounter{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    z-index: 99999999;
    color: white;
    font-size: 14px;
    position: fixed;
    font-weight: lighter;
    bottom: 10px;
    right: 10px;
    opacity: 0;
}


.mnMmBackScreen{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 999999;
    background-color: black;
    opacity: 0;
}

.mnMsgBox{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    color: white;
    z-index: 9999999;
    opacity: 0;
}

.mnMsgBox table{
    width: 100%;
    height: 100%;
}

.mnMsgBoxTextContainer{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.mbMsgBoxMainContainer{
    width: 100%;
    padding: 15px;
    background-color: #232323;
}

.mnMsgBoxTitle{
    display: block;
    font-size: 25px;
    font-weight: lighter;
}

.mbMsgBoxTextContent{
    display: block;
    margin-top: 5px;
    font-size: 18px;
    font-weight: lighter;
}

.mnInputField,.mnTextareaField, .mnSelectField{
    margin-top: 8px;
    border: 0px;
    color: black !important;
    font-weight: lighter;
    width: 300px;
    font-size: 18px;
    padding: 7px 10px;
}

.mnSelectField{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    height: 40px;
}


@media (max-width: 450px){
    .mnInputField,.mnTextareaField,.mnSelectField{
        width: 80%;
    }
}


.mbMsgBoxButtonSection{
    margin-top: 5px;
    display: block;
}

.mbMsgBoxButtonSection button{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    color: white;
    font-size: 14px;
    padding: 5px 15px;
    border: 1px solid white;
    font-weight: lighter !important;
    margin-left: 5px;
    margin-top: 5px;
}

.mbMsgBoxButtonSection button i{
    margin-right: 5px;

}

.mbMsgInputContent{
    display: block;
    margin-top: 5px;
}



/* ====================== */
/*   Metro Loading        */
/* ====================== */
.mnMlBackground{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 99999999;
    opacity: 0;
}

.mnMlMainContent{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-weight: lighter;
    color: white;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 999999999;
    opacity: 0;

}

.mnMlMainContent table{
    width: 100%;
    height: 100%;
}

.mnMlTitle{
    position: relative;
    font-size: 30px;
    display: block;
    margin-bottom: 10px;
}

.mnMlLoadingIcon{
    font-size: 50px !important;
    display: block;
}

.mnMlContent{
    margin-top: 10px;
    display: block;
    font-size: 20px;
}

.mnMlMainContainer{
    padding: 10px;
    background-color: black;
}


/* ====================== */
/*   Metro Loading        */
/* ====================== */
.mnSidePanel{

    position: fixed;
    height: 100%;
    top: 0px;
    color: white;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-weight: lighter;
    z-index: 99;
    opacity: 0;
    -webkit-overflow-scrolling: touch !important;
    overflow: hidden;
}


.mnSpTouchScroll{
    overflow-y: scroll !important;      
}

.mnSbShadow{
    -webkit-box-shadow: 0 0 10px 5px rgba(0,0,0,0.3);
    box-shadow: 0 0 10px 5px rgba(0,0,0,0.3);
}

.mnspLeft{
    left: 0px;
}

.mnspRight{
    right: 0px;
}

.mnSidePanel table{
    width: 100%;
    height: 100%;
}

.mnSpTitle{
    font-size: 20px;
    display: block;
    margin-bottom: 20px;
    padding: 5px;
}

.mnSpContent{
    display: block;
    font-size: 15px;
    display: block;
    padding: 5px;
}

.mnSpIcon{
    display: block;
    font-size: 40px;
}

.mnSpIcon img{
    width: 25px;
}

.mnSidePanel iframe{
    width: 100%;
    height: 100%;
    border: 0px;

}

.mspIframeLoaded{
    opacity: 0;
}