﻿@media screen and (max-width:480px) {
    body {  }

    .OuterWrapper {  }
    .InnerWrapper { font-size: 11px; line-height: 16px;   }

    h1 { clear:both; padding-top:10px;    }
    .btn { }

    .HeaderOuterWrapper { float:left; width:100%; background:#000; border-top:2px solid #ECC148  }
    .HeaderInnerWrapper { margin:0px auto; width:320px; }
    .HeaderContent .Logo {padding-top:10px; width:160px; }

    .HeaderContent .NavWrapper { float:left; font-size:10px; }

    .MainOuterWrapper { float:left; width:100%; }
    .MainInnerWrapper { margin:0px auto; width:320px; }

    .FooterOuterWrapper { float:left; width:100%; }
    .FooterInnerWrapper {margin:0px auto; width:320px; font-size:10px; }


    .txtSearch { width:270px; } 
    .btnSearch { float:right; } 

    /* ANNUAL BONUS */
    .btnCalculate {  }
    .ddlDeliveryRate, .txtOrderSum { width:200px; }
            
    /* PRICE CALCULATOR */
    .ProductSearchWrapper .txtSearch { width:250px; } 
    .ProductSearchWrapper .btnSearch { float:right; }
    .ProductSearchWrapper { float:left;  }
    .Products { width:100%; }

    .SelectedProductWrapper {   }

    .CreateEmailWrapper label {  }
    .CreateEmailWrapper .txt { width:230px; }
    .CreateEmailWrapper .btn {}

    /* FORM */
    .Form label {  width:120px; padding-top:6px;}

    /* GRIDVIEW */
    .GridView { font-size:10px; width:320px; }
    .GridView .GridViewPager .dxp-lead {  font-size:10px; }
    .GridView .GridViewRow td.dxgv { vertical-align:top;}
    .GridView .GridViewRow td.dxgv .btn { margin-top:2px; }
    .dxbButton_Metropolis div.dxb { padding:0px; }
    .GridViewButton { margin-right:0px; display:block; text-align:center; text-decoration:none !important;    }
    .GridViewButton span { font-size:11px; background-size:1px 28px; float:none !important; height:26px; box-sizing:border-box; line-height:26px; padding-left:5px !important; padding-right:5px !important; padding-top:5px; padding-bottom:5px;   }
    .GridViewButton span:hover {   }
    .GridViewHeaderActionButtons { width:60px !important; }
    
    .GridViewEdit .GridViewButton { margin-right:0px; display:inline; text-decoration:none !important;    }
    .GridViewEdit .GridViewButton span { float:left !important; padding-top:0px; margin-right:5px !important; }
    .GridViewEdit label { width:50px; padding-top:3px; font-size:10px; }    
    .GridViewEdit input[type=text] { height:22px; font-size:10px; }

    .Members .GridViewHeader:nth-child(1) {width:60px;}
    .Members .GridViewHeader:nth-child(2) {width:120px;}
    .Members .GridViewHeader:nth-child(3) { width:80px;}
    .Members .GridViewHeader:nth-child(4) {width:60px;}
    .Members .GridViewRow {font-size:10px;}

    .Bonus .GridViewHeader { font-size:7px;   font-weight:700; }
    .Bonus .GridViewRow {font-size:7px;}
    .Bonus .GridViewFooter {font-size:7px; font-weight:700;}

    .Bonus .GridViewHeader:nth-child(1) {width:140px;}
    .Bonus .GridViewHeader:nth-child(2) {width:36px;}
    .Bonus .GridViewHeader:nth-child(3) {width:36px;}
    .Bonus .GridViewHeader:nth-child(4) {width:36px;}
    .Bonus .GridViewHeader:nth-child(5) {width:36px;}
    .Bonus .GridViewHeader:nth-child(6) {width:36px;}
    .Bonus .GridViewHeader td { white-space:normal; }

    .Products .GridViewHeader { font-weight:700; font-size:9px; padding-top: 4px; padding-left: 2px; padding-bottom: 4px; padding-right: 2px; }
    .Products .GridViewRow td.dxgv { padding: 0px; padding-left: 2px; font-size:8px; padding-bottom: 4px; padding-right: 2px;  }
    .Products .GridViewPager .dxp-lead {  font-size:9px; padding:0px; }    
    .Products .GridViewPager .dxp-num { font-size:12px; padding:6px; padding-left:5px; padding-right:5px; margin-top:0px; }

    .Users .GridViewRow td:nth-child(1) { width:50px !important;}
    .Users .GridViewRow td:nth-child(2) { width:100px !important;}
    .Users .GridViewRow td:nth-child(3) { width:100px !important;}
    .Users .GridViewRow td:nth-child(4) { width:70px !important;}
    .Users .GridViewRow td:nth-child(4) .GridViewButton:nth-child(1):after  { content:'\A' }
    .Users .GridViewRow td:nth-child(4) .GridViewButton:nth-child(2):before  { content:'\A' }

    /* TABS */
    .TabWrapper { margin-top:37px; padding:10px; }

    /* TABLE */
    .Table { width:320px; margin-top:10px; }
    .Table tr.Result2  td { font-size:12px;}
    .Table tr td { padding:5px; }

    .LoginOuterWrapper { }
    .LoginInnerWrapper {  margin:60px auto;  width:280px; color:#050505; font-family: 'Lato'; font-size: 12px; line-height: 20px;   }

    .LoginContent { padding:20px; font-size:11px; width:240px;  }
    .LoginContent .Logo {  margin-bottom:30px;  }

    .LoginContent .LogoMobile {
        float: left; width:60px; 
    }

    .LoginContent .LogoASKO {
        float: right;
        margin-top: 20px;
        width: 80px;
        margin-bottom:30px;
    }

    .LoginContent label { width:80px;  }
    .LoginContent input[type=text],.LoginContent input[type=password],.LoginContent input[type=email] { width:160px; }
    .LoginContent input[type=button],.LoginContent input[type=submit] {  }

    .LoginContent .ForgotPasswordButton { font-size:11px; }
    .LoginContent .ForgotPasswordButton:hover {  }

    .PopupOuterWrapper {  }
    .PopupInnerWrapper { margin:90px auto; width:243px;  color:#050505; font-family: 'Lato'; font-size: 12px; line-height: 20px;  }
    .PopupContent { padding:10px; }    

    .SetPasswordOuterWrapper {  }
    .SetPasswordInnerWrapper {  margin:60px auto;  width:280px;  font-family: 'Lato'; font-size: 12px; line-height: 20px;  }

    .SetPasswordContent { padding:20px; width:240px; font-size:11px; }
    .SetPasswordContent .Logo { margin-bottom:30px; width:240px; }
    .SetPasswordContent label { width:80px;   }
    .SetPasswordContent input[type=text],.SetPasswordContent input[type=password],.SetPasswordContent input[type=email] {  width:160px; }
    .SetPasswordContent input[type=button],.SetPasswordContent input[type=submit] {  }
        
    .IPBLink { float:right; color:#aaa; margin-top:5px; font-size:11px; }
    .IPBLink:hover { color:#ccc;  }

    /* CAMPAIGNS */
    .CampaignItemWrapper { width:100%; }

    /* TOOLTIP */
    .HoverTooltip { max-width:258px;}
}
