/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 14 Dec, 2018, 10:23:39 AM
    Author     : vignesh.g
*/

/*
*-----------------------------------------------------------------------------------------------------------------------
*------------------------This Page is Used as @Media Responsive Design For All Mobile Devices--------------------------
                         /*Added By: Vignesh.G on 08/12/2018*/
/*----------------------------------------------------------------------------------------------------------------------
*/

/* 
  ##Device = For All SmartPhones (Portrait)
  ##Screen = B/w the width of 320px to 480px
*/
@media only screen and (min-width: 320px) and (max-width: 480px)
{    
    
/*------------------------------App HomeScreen and Login----------------------------------------------------------------------*/
    .sliderHeader{
        /*height: 130vh;*/
        padding-top: 0px !important;
    }
    .appWrapper{
        display: flex !important;
        align-items: center !important;
        flex-direction: column !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 100% !important;
        padding: 0px !important;
        /*                background: rgba(4, 40, 68, 0.85);*/
    }
    .appLoginBlockAlignmentForTab{
        width: 100% !important;        
    }
    .appLoginInputFontSizeForTab{
        font-size: 0.8rem !important;        
    }
    .appLoginBlockFontSizeAlignmentForTab{
        font-size: 10px !important;
    }
    .appLoginBlockDetailsTitleForTab{
        font-size: 1.45rem;
    }
    .appLoginBlockFontSizeAlignmentForNokia120{
        font-size: 8px !important;
    }
    .appLoginConditionsForGalaxyNote3{
        font-size: 0.6em !important;
    } 
    /*Registration Details*/
    #appRegistrationAlignment{
        padding-top: 5%;
        margin-left: 0% !important;        
        top: 0% !important;
    }
    .appWizard-containerForTab{
        width: 90% !important;
        overflow: auto;
        height: 540px !important;
    }
    .appForm-group{
        margin: 5px 0 0 0!important;
    }
    .appWizard-cardForTab{
        height: 540px !important;
    }
    .appPaymentFooterBlockFontSizeForTab{
        font-size: 6pt !important;
    }
    .msgBoxContent{
        overflow: auto;
    }
    .appPaidBodyHeightSizeForGalaxyNote3{
        height: 61vh !important;
    }
    .appRegistrationDetailsTitleAlignment{
        padding-left: 0%;
    }
    .appRegisterFormCloseBtn{
        left: 4% !important;
    }
    .appWizardNavigationHide{
        display: none !important;
    }
    .appRegistrationDetailsAlignment{
        /*width: 115% !important;*/
    }
    .appRegistrationDetailsAlignment> .form-group > .icon-addon > .multiselect-native-select > .btn-group{
    width: 100% !important;
    }    
    .appBusinessRegistrationWidth{
        width: 96% !important;
    }
    #busiPartnerDtlTbl_wrapper{
        width: 142%;
        right: 20%;
    }
    .appBusinessRegistrationTableAlignment{
        height: 8vh;
    }
    /*-----------------------*/    
    .appContainer{
        width: 100% !important;
        padding-right: 0px !important;
        padding-left: 0px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .carousel-inner img {
        width: 100% !important;
        height: 100% !important;
    }
    /*.carousel-item {
       height: 60vh !important;
    }*/
    /*.carousel-inner{
        height: 60vh !important;
    }*/
    .carousel-inner > .carousel-item {
        height: 41vh !important;
    }
    .carousel-inner > .carousel-item > img {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        -webkit-transform: translate(-50%, -50%) !important;
        -ms-transform: translate(-50%, -50%) !important;
        transform: translate(-50%, -50%) !important;
        max-height: 800px !important;
        border-radius: 8px;
        object-fit: cover;
    }
    /*.appImgSpec{
        width: 600px !important;
        height: 300px !important;
    } */
    .kerryLogo{
        background-color: white !important;
        width: 100% !important; 
        margin-top: 11px !important;
    }
    .firstMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .firstMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .secondMenu{
        background-color: #FFFFFF;
        transition: all 0.2s ease;
    }
    .secondMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .thirdMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .thirdMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .fourthMenu{
        background-color: #FFFFFF;
        transition: all 0.5s ease;
    }
    .fourthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black; */
    }
    .fifthMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .fifthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .sixthMenu{
        background-color: #FFFFFF;
        transition: all 0.2s ease;
    }
    .sixthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .seventhMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .seventhMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .textCenter{
        display: inline !important;
        padding-left: 30%;
        vertical-align: -9px;
    }
    .firstDirectionCenter{
        display: inline !important;
        vertical-align: bottom;
        position: relative;
        float: left;
        top: 31%;
        left: 5%;
    }
    .secondDirectionCenter{
        display: inline !important;
        vertical-align: bottom;
        position: relative;
        float: right;
        top: 31%;
        right: 5%;
    }
    .linkDiv{
        cursor: pointer !important;
        text-align: inherit !important;
        /*font-family: cursive !important;*/
        font-family: popinsMedium !important;
        color: #3366cc !important;
        /*font-size: 21pt !important;*/
        font-size: 10pt !important;
        height: 70px !important;
        padding-left: 0px !important;
        border-radius: 5px;
        /*background-color: #254f8c !important;*/
    }
    .linkDiv:hover {
        /*    transform: scale(1.04);  (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
        color: floralwhite !important;
        background-color: #f15a2f !important;
    }
    .appCol-sm-6{
        height: 0px !important;
        border-bottom: 0.5px solid #3c8dbc !important;
    }
    .uncol-sm-6{
        display: none;
    }
    .appRow{
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        margin-right: -15px !important;
        margin-left: -15px !important;
    }
    /*.hideForAppMenu{
        display: none;
    }*/
    .imgForAppMenu{
        display: inline-block !important;
        position: relative !important;
        top: 8px !important;
        left: 23%;
    }
    /*.linkDiv:hover > .hideForWeb{
      animation: shake 0.8s;
      animation-iteration-count: 2;
    }*/
    .toRemoveLineBreak > br{
        display: none;
    }
    @keyframes shake {
        0% { transform: translate(1px, 1px) rotate(0deg); }
        10% { transform: translate(-1px, -2px) rotate(-1deg); }
        20% { transform: translate(-3px, 0px) rotate(1deg); }
        30% { transform: translate(3px, 2px) rotate(0deg); }
        40% { transform: translate(1px, -1px) rotate(1deg); }
        50% { transform: translate(-1px, 2px) rotate(-1deg); }
        60% { transform: translate(-3px, 1px) rotate(0deg); }
        70% { transform: translate(3px, 1px) rotate(-1deg); }
        80% { transform: translate(-1px, -1px) rotate(1deg); }
        90% { transform: translate(1px, 2px) rotate(0deg); }
        100% { transform: translate(1px, -2px) rotate(-1deg); }
    }
    /*@keyframes shake {
      0% { transform: translate(3px, 3px) rotate(0deg); }
      10% { transform: translate(-2px, -3px) rotate(-1deg); }
      20% { transform: translate(-4px, 1px) rotate(1deg); }
      30% { transform: translate(3px, 2px) rotate(0deg); }
      40% { transform: translate(1px, -1px) rotate(1deg); }
      50% { transform: translate(-1px, 2px) rotate(-1deg); }
      60% { transform: translate(-3px, 1px) rotate(0deg); }
      70% { transform: translate(3px, 1px) rotate(-1deg); }
      80% { transform: translate(-1px, -1px) rotate(1deg); }
      90% { transform: translate(1px, 2px) rotate(0deg); }
      100% { transform: translate(3px, -4px) rotate(-1deg); }
    }*/
    .appMenuContainer{
        width: 100% !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .footerClass{
        padding-top: 0rem !important;
        padding-bottom: 0rem !important;
    }
    .appmodal-dialog{
        margin: 0rem !important;
    }
    .appLoginPageWrapper{
        padding: 12px !important;
    }
    .appLoginFirstSizeWidth{
        width: 30% !important;
    }    

/*------------------------------App inside menu----------------------------------------------------------------------*/
#paymentHdrName{
   font-size: 1rem !important;
}
#paymentHdrPanNo{
   font-size: 0.8rem !important;
}
#paymentHdrGstNo{
   font-size: 0.8rem !important;
}
#orgCustTypeEpay{
   font-size: 0.7rem !important;
}
.appSubTitleFontAdjust{
   font-size: 0.8rem !important;
}
.fa-2x{
   font-size: 1em !important;
}
.apptype2Cart{
    font-size: 0.8rem !important;
    width: 18px !important;
    height: 18px !important; 
}
#searchTypeInGateWayService{
    font-size: 0.7rem !important;
}
.appInvAmountFontAdjust{
    font-size: 1rem !important;
}
#unPaidInvTableData{
    font-size: 10px !important;
}
.appInvBtnFontAdjust{
    font-size: 0.475rem !important;
}
.appeInvoiceDeclarationFontAdjust{
    font-size: 0.8rem !important;
}
.appeInvoiceDeclarationFontAdjust2{
    font-size: 0.6rem !important;
}
.appMakePaymentBtnFontSizeAdjust{
    font-size: 0.675rem !important;
}
#paymentHdrAddr{
    font-size: 0.8rem !important;
    height: 56px !important;
    overflow: hidden;
}
.appEInvoiceDetailsTitleMarginBottom{
    margin-bottom: 0.3rem !important;
}
.appPaymentServiceFontSizeAdjust{
    font-size: 0.7rem !important;
}
.appPaymentServiceHeightAdjust{
    height: 23px !important;
    font-size: 0.7rem !important;
}
.appForm-groupMarginBottom{
    margin-bottom: 0.2rem !important;
}
.appContainerTitleSizeForTab2{
    font-size: 7.94pt !important;
}
.appFontSizeForTab{
    font-size: 6pt !important;
    }
/*.col-sm-12{
    display: block !important;
}*/
.appPaymentTitle{
    display: contents !important;
}
.col-sm-2{
    display: none !important;
}
.appPaymentTitleStartPadding{
   padding-left: 2%;
}
.appKerryPaymentTitle{
    display: contents !important;
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-left: 15px;
    
}
.appPaymentTitleHideForWeb{
    display: inline-block !important;
    position: relative !important;
    top: 4px !important;
    padding-left: 16%;
}
.webPaymentTitleHideForApp{
    display: none !important;
}
.appUnpaidFooterPaddingForGalaxyNote3{
    padding-top: 57%;
}
.appRecentPaymentFooterPaddingForPixel2XL{
    padding-top: 0%
}
.appPaymentTitleWelcomeConsignee{
    width: 80% !important;
}
.appPaymentTitleConsigneePadding{
    padding-right: 11%;
    font-size: 7.94pt !important;
}
.appPaymentButtonSize{
    font-size: .475rem !important;
}
.appPaymentCenterAlign{
    padding-left: 3%;
}
.appPaymentInvoiceNoField{
    width: 40% !important;
}
.appPaymentSearchInvoiceNo{
    width: 60% !important;
}
.appEInvoiceTransType{
    width: 151px !important;
}
.navbar-appTitleBackground{
    background-color: floralwhite !important;
}
.msgBox{
    left: 16.5px !important;
    width: 285px !important;
}
.appContainerSubTitleHideForWeb{
    display: block !important;
    position: relative !important;
}
.appCopyRightForTab{
    padding-top: 24% !important;
    padding-left: 3%;
    font-size: 6pt !important;
}
.appContainerSelectFontSize{
    font-size: .675rem !important;
    height: 23px !important;
}
.appTariffTitle{
    padding-left: 0% !important;
    padding-top: 3% !important;
}
.appTariffSubTitleAlignmentForTab2{
    font-size: 7.94pt !important;
}
.tariffPaymentButtonSize{
    width: 79% !important;
    font-size: 0.875rem !important;
    padding: 2px 6px !important;
}
.appTariffCopyRightAlignmentSizeForTab{
    padding-top: 5% !important;
    font-size: 6pt !important;
}
.appTariffDropDown{
    padding: 0px !important;
}
#appTariffFontColor{
    color: white !important;
}
#appTariffFontColor:hover{
    color: #004085 !important;
}
.appMumbaiCFSPadding{
    padding-top: 1px !important;
}
.appMumbaiBodyHeight{
    height: 58vh !important;
}
.appMumbaiMarginBottom{
    margin-bottom: 0px !important;
}
.appICDCFSPadding{
    padding-top: 1px !important;
}
.appICDBodyHeight{
    height: 58vh !important;
}
.appICDMarginBottom{
    margin-bottom: 0px !important;
}
/*----------------------------------------------------------------------------------------------------------------------
*/   
}

/* 
  ##Device = For Nokia Lumia 520 and iPhone 5/SE (Portrait)
  ##Screen = B/w the width of 320px to 480px
*/
@media only screen and (min-width: 320px) and (max-width: 480px) and (min-height: 533px) and (max-height: 570px)
{    
    
/*------------------------------App HomeScreen and Login----------------------------------------------------------------------*/
    .sliderHeader{
        /*height: 130vh;*/
        padding-top: 0px !important;
    }
    .appWrapper{
        display: flex !important;
        align-items: center !important;
        flex-direction: column !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 100% !important;
        padding: 0px !important;
        /*                background: rgba(4, 40, 68, 0.85);*/
    }
    .appLoginBlockAlignmentForTab{
        width: 100% !important;        
    }
    .appLoginInputFontSizeForTab{
        font-size: 0.8rem !important;        
    }
    .appLoginBlockFontSizeAlignmentForTab{
        font-size: 10px !important;
    }
    .appLoginBlockDetailsTitleForTab{
        font-size: 1.45rem;
    }
    .appLoginBlockFontSizeAlignmentForNokia120{
        font-size: 8px !important;
    }
    .appLoginConditionsForGalaxyNote3{
        font-size: 0.6em !important;
    }
    .appForgotPasswordMarginLeft{
      margin-left: -5%;
    }
    .appChangePasswordMarginLeft{
      margin-left: -5%;
    }
    .appChangePasswordLeftAndRightPadding{
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    /*Registration Details*/
    #appRegistrationAlignment{
        padding-top: 5%;
        margin-left: 0% !important;        
        top: 0% !important;
    }
    .appWizard-containerForTab{
        width: 90% !important;
        overflow: auto;
        height: 540px !important;
    }
    .appForm-group{
        margin: 5px 0 0 0!important;
    }
    .appWizard-cardForTab{
        height: 540px !important;
    }
    .appPaymentFooterBlockFontSizeForTab{
        font-size: 6pt !important;
    }
    .msgBoxContent{
        overflow: auto;
    }
    .appPaidBodyHeightSizeForGalaxyNote3{
        height: 61vh !important;
    }
    .appRegistrationDetailsTitleAlignment{
        padding-left: 0%;
    }
    .appRegisterFormCloseBtn{
        left: 4% !important;
    }
    .appWizardNavigationHide{
        display: none !important;
    }
    .appRegistrationDetailsAlignment{
        /*width: 115% !important;*/
    }
    .appRegistrationDetailsAlignment> .form-group > .icon-addon > .multiselect-native-select > .btn-group{
    width: 100% !important;
    }
    .appBusinessRegistrationWidth{
        width: 96% !important;
    }
    #busiPartnerDtlTbl_wrapper{
        width: 142%;
        right: 20%;
    }
    .appBusinessRegistrationTableAlignment{
        height: 8vh;
    }
    /*-----------------------*/    
    .appContainer{
        width: 100% !important;
        padding-right: 0px !important;
        padding-left: 0px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .carousel-inner img {
        width: 100% !important;
        height: 100% !important;
    }
    /*.carousel-item {
       height: 60vh !important;
    }*/
    /*.carousel-inner{
        height: 60vh !important;
    }*/
    .carousel-inner > .carousel-item {
        height: 41vh !important;
    }
    .carousel-inner > .carousel-item > img {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        -webkit-transform: translate(-50%, -50%) !important;
        -ms-transform: translate(-50%, -50%) !important;
        transform: translate(-50%, -50%) !important;
        max-height: 800px !important;
        border-radius: 8px;
        object-fit: cover;
    }
    /*.appImgSpec{
        width: 600px !important;
        height: 300px !important;
    } */
    .kerryLogo{
        background-color: white !important;
        width: 100% !important; 
        margin-top: 11px !important;
    }
    .firstMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .firstMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .secondMenu{
        background-color: #FFFFFF;
        transition: all 0.2s ease;
    }
    .secondMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .thirdMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .thirdMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .fourthMenu{
        background-color: #FFFFFF;
        transition: all 0.5s ease;
    }
    .fourthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black; */
    }
    .fifthMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .fifthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .sixthMenu{
        background-color: #FFFFFF;
        transition: all 0.2s ease;
    }
    .sixthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .seventhMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .seventhMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .textCenter{
        display: inline !important;
        padding-left: 30%;
        vertical-align: -9px;
    }
    .firstDirectionCenter{
        display: inline !important;
        vertical-align: bottom;
        position: relative;
        float: left;
        top: 31%;
        left: 5%;
    }
    .secondDirectionCenter{
        display: inline !important;
        vertical-align: bottom;
        position: relative;
        float: right;
        top: 31%;
        right: 5%;
    }
    .linkDiv{
        cursor: pointer !important;
        text-align: inherit !important;
        /*font-family: cursive !important;*/
        font-family: popinsMedium !important;
        color: #3366cc !important;
        /*font-size: 21pt !important;*/
        font-size: 10pt !important;
        height: 70px !important;
        padding-left: 0px !important;
        border-radius: 5px;
        /*background-color: #254f8c !important;*/
    }
    .linkDiv:hover {
        /*    transform: scale(1.04);  (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
        color: floralwhite !important;
        background-color: #f15a2f !important;
    }
    .appCol-sm-6{
        height: 0px !important;
        border-bottom: 0.5px solid #3c8dbc !important;
    }
    .uncol-sm-6{
        display: none;
    }
    .appRow{
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        margin-right: -15px !important;
        margin-left: -15px !important;
    }
    /*.hideForAppMenu{
        display: none;
    }*/
    .imgForAppMenu{
        display: inline-block !important;
        position: relative !important;
        top: 8px !important;
        left: 23%;
    }
    /*.linkDiv:hover > .hideForWeb{
      animation: shake 0.8s;
      animation-iteration-count: 2;
    }*/
    .toRemoveLineBreak > br{
        display: none;
    }
    @keyframes shake {
        0% { transform: translate(1px, 1px) rotate(0deg); }
        10% { transform: translate(-1px, -2px) rotate(-1deg); }
        20% { transform: translate(-3px, 0px) rotate(1deg); }
        30% { transform: translate(3px, 2px) rotate(0deg); }
        40% { transform: translate(1px, -1px) rotate(1deg); }
        50% { transform: translate(-1px, 2px) rotate(-1deg); }
        60% { transform: translate(-3px, 1px) rotate(0deg); }
        70% { transform: translate(3px, 1px) rotate(-1deg); }
        80% { transform: translate(-1px, -1px) rotate(1deg); }
        90% { transform: translate(1px, 2px) rotate(0deg); }
        100% { transform: translate(1px, -2px) rotate(-1deg); }
    }
    /*@keyframes shake {
      0% { transform: translate(3px, 3px) rotate(0deg); }
      10% { transform: translate(-2px, -3px) rotate(-1deg); }
      20% { transform: translate(-4px, 1px) rotate(1deg); }
      30% { transform: translate(3px, 2px) rotate(0deg); }
      40% { transform: translate(1px, -1px) rotate(1deg); }
      50% { transform: translate(-1px, 2px) rotate(-1deg); }
      60% { transform: translate(-3px, 1px) rotate(0deg); }
      70% { transform: translate(3px, 1px) rotate(-1deg); }
      80% { transform: translate(-1px, -1px) rotate(1deg); }
      90% { transform: translate(1px, 2px) rotate(0deg); }
      100% { transform: translate(3px, -4px) rotate(-1deg); }
    }*/
    .appMenuContainer{
        width: 100% !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .footerClass{
        padding-top: 0rem !important;
        padding-bottom: 0rem !important;
    }
    .appmodal-dialog{
        margin: 0rem !important;
    }
    .appLoginPageWrapper{
        padding: 12px !important;
    }
    .appLoginFirstSizeWidth{
        width: 30% !important;
    }    

/*------------------------------App inside menu----------------------------------------------------------------------*/
#paymentHdrName{
   font-size: 1rem !important;
}
#paymentHdrPanNo{
   font-size: 0.8rem !important;
}
#paymentHdrGstNo{
   font-size: 0.8rem !important;
}
#orgCustTypeEpay{
   font-size: 0.7rem !important;
}
.appSubTitleFontAdjust{
   font-size: 0.8rem !important;
}
.fa-2x{
   font-size: 1em !important;
}
.apptype2Cart{
    font-size: 0.8rem !important;
    width: 18px !important;
    height: 18px !important; 
}
#searchTypeInGateWayService{
    font-size: 0.7rem !important;
}
.appInvAmountFontAdjust{
    font-size: 1rem !important;
}
#unPaidInvTableData{
    font-size: 10px !important;
}
.appInvBtnFontAdjust{
    font-size: 0.475rem !important;
}
.appeInvoiceDeclarationFontAdjust{
    font-size: 0.8rem !important;
}
.appeInvoiceDeclarationFontAdjust2{
    font-size: 0.6rem !important;
}
.appMakePaymentBtnFontSizeAdjust{
    font-size: 0.675rem !important;
}
#paymentHdrAddr{
    font-size: 0.8rem !important;
    height: 56px !important;
    overflow: hidden;
}
.appEInvoiceDetailsTitleMarginBottom{
    margin-bottom: 0.3rem !important;
}
.appPaymentServiceFontSizeAdjust{
    font-size: 0.7rem !important;
}
.appPaymentServiceHeightAdjust{
    height: 23px !important;
    font-size: 0.7rem !important;
}
.appForm-groupMarginBottom{
    margin-bottom: 0.2rem !important;
}
.appContainerTitleSizeForTab2{
    font-size: 7.94pt !important;
}
.appFontSizeForTab{
    font-size: 6pt !important;
    }
/*.col-sm-12{
    display: block !important;
}*/
.appPaymentTitle{
    display: contents !important;
}
.col-sm-2{
    display: none !important;
}
.appPaymentTitleStartPadding{
   padding-left: 2%;
}
.appKerryPaymentTitle{
    display: contents !important;
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-left: 15px;
    
}
.appPaymentTitleHideForWeb{
    display: inline-block !important;
    position: relative !important;
    top: 4px !important;
    padding-left: 16%;
}
.webPaymentTitleHideForApp{
    display: none !important;
}
.appUnpaidFooterPaddingForGalaxyNote3{
    padding-top: 57%;
}
.appRecentPaymentFooterPaddingForPixel2XL{
    padding-top: 0%
}
.appPaymentTitleWelcomeConsignee{
    width: 80% !important;
}
.appPaymentTitleConsigneePadding{
    padding-right: 11%;
    font-size: 7.94pt !important;
}
.appPaymentButtonSize{
    font-size: .475rem !important;
}
.appPaymentCenterAlign{
    padding-left: 3%;
}
.appPaymentInvoiceNoField{
    width: 40% !important;
}
.appPaymentSearchInvoiceNo{
    width: 60% !important;
}
.appEInvoiceTransType{
    width: 151px !important;
}
.navbar-appTitleBackground{
    background-color: floralwhite !important;
}
.msgBox{
    left: 16.5px !important;
    width: 285px !important;
}
.appContainerSubTitleHideForWeb{
    display: block !important;
    position: relative !important;
}
.appCopyRightForTab{
    padding-top: 24% !important;
    padding-left: 3%;
    font-size: 6pt !important;
}
.appContainerSelectFontSize{
    font-size: .675rem !important;
    height: 23px !important;
}
.appTariffTitle{
    padding-left: 0% !important;
    padding-top: 3% !important;
}
.appTariffSubTitleAlignmentForTab2{
    font-size: 7.94pt !important;
}
.tariffPaymentButtonSize{
    width: 79% !important;
    font-size: 0.875rem !important;
    padding: 2px 6px !important;
}
.appTariffCopyRightAlignmentSizeForTab{
    padding-top: 5% !important;
    font-size: 6pt !important;
}
.appTariffDropDown{
    padding: 0px !important;
}
#appTariffFontColor{
    color: white !important;
}
#appTariffFontColor:hover{
    color: #004085 !important;
}
.appMumbaiCFSPadding{
    padding-top: 1px !important;
}
.appMumbaiBodyHeight{
    height: 58vh !important;
}
.appMumbaiMarginBottom{
    margin-bottom: 0px !important;
}
.appICDCFSPadding{
    padding-top: 1px !important;
}
.appICDBodyHeight{
    height: 58vh !important;
}
.appICDMarginBottom{
    margin-bottom: 0px !important;
}
/*----------------------------------------------------------------------------------------------------------------------
*/   
}


/* 
  ##Device = Galaxy S5, Nexus 5, Nexus 4 (Portrait)
  ##Screen = B/w the width of 320px to 480px & the height of 640px to 667px
*/
@media only screen and (min-width: 320px) and (max-width: 480px) and (min-height: 640px) and (max-height: 667px)
{    
    
/*------------------------------App HomeScreen and Login----------------------------------------------------------------------*/
    .sliderHeader{
        /*height: 130vh;*/
        padding-top: 0px !important;
    }
    .appWrapper{
        display: flex !important;
        align-items: center !important;
        flex-direction: column !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 100% !important;
        padding: 0px !important;
        /*                background: rgba(4, 40, 68, 0.85);*/
    }
    /*Registration Details*/
    #appRegistrationAlignment{
        padding-top: 5%;
        margin-left: 0% !important;        
        top: 0% !important;
    }
    .appWizard-containerForTab{
        width: 90% !important;
        overflow: auto;
        height: 640px !important;
    }
    .appForm-group{
        margin: 5px 0 0 0!important;
    }
    .appWizard-cardForTab{
        height: 640px !important;
    }
    .appPaidInvoiceFooterBlockPadding{
        padding-top: 8%;
    }
    .appUnPaidInvoiceFooterBlockPadding{
        padding-top: 6%;
    }
    .appRecentPaymentFooterBlockPadding{
        padding-top: 6%;
    }
    .appGenerateInvoiceFooterBlockPadding{
        padding-top: 20%;
    }
    .appPaymentFooterBlockFontSizeForTab{
        font-size: 6pt !important;
    }
    .msgBoxContent{
        overflow: auto;
    }
    .appRegistrationDetailsTitleAlignment{
        /*padding-left: 15%;*/
    }
    .appRegisterFormCloseBtn{
        left: 4% !important;
    }
    .appWizardNavigationHide{
        display: none !important;
    }
    .appRegistrationDetailsAlignment{
        /*width: 115% !important;*/
    }
    .appRegistrationDetailsAlignment> .form-group > .icon-addon > .multiselect-native-select > .btn-group{
    width: 100% !important;
    }    
    .appBusinessRegistrationWidth{
        width: 96% !important;
    }
    #busiPartnerDtlTbl_wrapper{
        width: 116%;
        right: 7%;
    }
    .appBusinessRegistrationTableAlignment{
        height: 8vh;
    }
    /*-----------------------*/    
    .appContainer{
        width: 100% !important;
        padding-right: 0px !important;
        padding-left: 0px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .carousel-inner img {
        width: 100% !important;
        height: 100% !important;
    }
    /*.carousel-item {
       height: 60vh !important;
    }*/
    /*.carousel-inner{
        height: 60vh !important;
    }*/
    .carousel-inner > .carousel-item {
        height: 41vh !important;
    }
    .carousel-inner > .carousel-item > img {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        -webkit-transform: translate(-50%, -50%) !important;
        -ms-transform: translate(-50%, -50%) !important;
        transform: translate(-50%, -50%) !important;
        max-height: 800px !important;
        border-radius: 8px;
        object-fit: cover;
    }
    /*.appImgSpec{
        width: 600px !important;
        height: 300px !important;
    } */
    .kerryLogo{
        background-color: white !important;
        width: 100% !important; 
        margin-top: 11px !important;
    }
    .firstMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .firstMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .secondMenu{
        background-color: #FFFFFF;
        transition: all 0.2s ease;
    }
    .secondMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .thirdMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .thirdMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .fourthMenu{
        background-color: #FFFFFF;
        transition: all 0.5s ease;
    }
    .fourthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black; */
    }
    .fifthMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .fifthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .sixthMenu{
        background-color: #FFFFFF;
        transition: all 0.2s ease;
    }
    .sixthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .seventhMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .seventhMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .textCenter{
        display: inline !important;
        padding-left: 30%;
        vertical-align: bottom;
    }
    .firstDirectionCenter{
        display: inline !important;
        vertical-align: bottom;
        position: relative;
        float: left;
        top: 31%;
        left: 5%;
    }
    .secondDirectionCenter{
        display: inline !important;
        vertical-align: bottom;
        position: relative;
        float: right;
        top: 31%;
        right: 5%;
    }
    .linkDiv{
        cursor: pointer !important;
        text-align: inherit !important;
        /*font-family: cursive !important;*/
        font-family: popinsMedium !important;
        color: #3366cc !important;
        /*font-size: 21pt !important;*/
        font-size: 11pt !important;
        height: 63px !important;
        padding-left: 0px !important;
        border-radius: 5px;
        /*background-color: #254f8c !important;*/
    }
    .linkDiv:hover {
        /*    transform: scale(1.04);  (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
        color: floralwhite !important;
        background-color: #f15a2f !important;
    }
    .appCol-sm-6{
        height: 0px !important;
        border-bottom: 0.5px solid #3c8dbc !important;
    }
    .uncol-sm-6{
        display: none;
    }
    .appRow{
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        margin-right: -15px !important;
        margin-left: -15px !important;
    }
    /*.hideForAppMenu{
        display: none;
    }*/
    .imgForAppMenu{
        display: inline-block !important;
        position: relative !important;
        top: 8px !important;
        left: 23%;
    }
    /*.linkDiv:hover > .hideForWeb{
      animation: shake 0.8s;
      animation-iteration-count: 2;
    }*/
    .toRemoveLineBreak > br{
        display: none;
    }
    @keyframes shake {
        0% { transform: translate(1px, 1px) rotate(0deg); }
        10% { transform: translate(-1px, -2px) rotate(-1deg); }
        20% { transform: translate(-3px, 0px) rotate(1deg); }
        30% { transform: translate(3px, 2px) rotate(0deg); }
        40% { transform: translate(1px, -1px) rotate(1deg); }
        50% { transform: translate(-1px, 2px) rotate(-1deg); }
        60% { transform: translate(-3px, 1px) rotate(0deg); }
        70% { transform: translate(3px, 1px) rotate(-1deg); }
        80% { transform: translate(-1px, -1px) rotate(1deg); }
        90% { transform: translate(1px, 2px) rotate(0deg); }
        100% { transform: translate(1px, -2px) rotate(-1deg); }
    }
    /*@keyframes shake {
      0% { transform: translate(3px, 3px) rotate(0deg); }
      10% { transform: translate(-2px, -3px) rotate(-1deg); }
      20% { transform: translate(-4px, 1px) rotate(1deg); }
      30% { transform: translate(3px, 2px) rotate(0deg); }
      40% { transform: translate(1px, -1px) rotate(1deg); }
      50% { transform: translate(-1px, 2px) rotate(-1deg); }
      60% { transform: translate(-3px, 1px) rotate(0deg); }
      70% { transform: translate(3px, 1px) rotate(-1deg); }
      80% { transform: translate(-1px, -1px) rotate(1deg); }
      90% { transform: translate(1px, 2px) rotate(0deg); }
      100% { transform: translate(3px, -4px) rotate(-1deg); }
    }*/
    .appMenuContainer{
        width: 100% !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .footerClass{
        padding-top: 0rem !important;
        padding-bottom: 0rem !important;
    }
    .appmodal-dialog{
        margin: 0rem !important;
    }
    .appLoginPageWrapper{
        padding: 12px !important;
    }
    .appLoginFirstSizeWidth{
        width: 33% !important;
    }
    .appLoginConditionsForGalaxyNote3{
        font-size: 0.75em !important;
    }     

/*------------------------------App inside menu----------------------------------------------------------------------*/
#paymentHdrName{
   font-size: 1rem !important;
}
#paymentHdrPanNo{
   font-size: 0.8rem !important;
}
#paymentHdrGstNo{
   font-size: 0.8rem !important;
}
#orgCustTypeEpay{
   font-size: 0.7rem !important;
}
.appSubTitleFontAdjust{
   font-size: 0.8rem !important;
}
.fa-2x{
   font-size: 1em !important;
}
.apptype2Cart{
    font-size: 0.8rem !important;
    width: 18px !important;
    height: 18px !important; 
}
#searchTypeInGateWayService{
    font-size: 0.7rem !important;
}
.appInvAmountFontAdjust{
    font-size: 1rem !important;
}
#unPaidInvTableData{
    font-size: 10px !important;
}
.appInvBtnFontAdjust{
    font-size: 0.475rem !important;
}
.appeInvoiceDeclarationFontAdjust{
    font-size: 0.8rem !important;
}
.appeInvoiceDeclarationFontAdjust2{
    font-size: 0.6rem !important;
}
.appMakePaymentBtnFontSizeAdjust{
    font-size: 0.675rem !important;
}
#paymentHdrAddr{
    font-size: 0.8rem !important;
    height: 56px !important;
    overflow: hidden;
}
.appEInvoiceDetailsTitleMarginBottom{
    margin-bottom: 0.5rem !important;
}
.appPaymentServiceFontSizeAdjust{
    font-size: 0.7rem !important;
}
.appPaymentServiceHeightAdjust{
    height: 23px !important;
    font-size: 0.7rem !important;
}
.appForm-groupMarginBottom{
    margin-bottom: 0.2rem !important;
}
.appContainerTitleSizeForTab2{
    font-size: 7.94pt !important;
}
.appFontSizeForTab{
    font-size: 6pt !important;
    }
/*.col-sm-12{
    display: block !important;
}*/
.appPaymentTitle{
    display: contents !important;
}
.col-sm-2{
    display: none !important;
}
.appPaymentTitleStartPadding{
   padding-left: 2%;
}
.appKerryPaymentTitle{
    display: contents !important;
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-left: 15px;
    
}
.appPaymentTitleHideForWeb{
    display: inline-block !important;
    position: relative !important;
    top: 4px !important;
    padding-left: 24%;
}
.webPaymentTitleHideForApp{
    display: none !important;
}
.appPaymentTitleWelcomeConsignee{
    width: 80% !important;
}
.appPaymentTitleConsigneePadding{
    padding-right: 11%;
}
.appPaymentTitleConsigneeSizeForGalaxyNote3{
    font-size: 0.8rem !important;
}
.appPaidBodyHeightSizeForGalaxyNote3{
    height: 61vh !important;
}
.appUnpaidFooterPaddingForGalaxyNote3{
    padding-top: 66%;
}
.appPaymentButtonSize{
    font-size: .575rem !important;
}
.containerImgAdjustPadding{
    padding-top: 15% !important;
}
.appPaymentCenterAlign{
    padding-left: 3%;
}
.appPaymentInvoiceNoField{
    width: 40% !important;
}
.appPaymentSearchInvoiceNo{
    width: 60% !important;
}
.appEInvoiceTransType{
    width: 151px !important;
}
.navbar-appTitleBackground{
    background-color: floralwhite !important;
}
.msgBox{
    left: 12.5px !important;
    width: 383px !important;
}
.appContainerSubTitleHideForWeb{
    display: block !important;
    position: relative !important;
}
.appCopyRightForTab{
    padding-top: 36% !important;
    padding-left: 3%;
    font-size: 6pt !important;
}
.appTariffTitle{
    padding-left: 0% !important;
    padding-top: 3% !important;
}
.tariffPaymentButtonSize{
    font-size: 1.075rem !important;
}
.appTariffDropDown{
    padding: 0px !important;
}
#appTariffFontColor{
    color: white !important;
}
#appTariffFontColor:hover{
    color: #004085 !important;
}
.appMumbaiCFSPadding{
    padding-top: 1px !important;
}
.appMumbaiBodyHeight{
    height: 65vh !important;
}
.appMumbaiMarginBottom{
    margin-bottom: 0px !important;
}
.appICDCFSPadding{
    padding-top: 1px !important;
}
.appICDBodyHeight{
    height: 65vh !important;
}
.appICDMarginBottom{
    margin-bottom: 0px !important;
}
.appTariffCopyRightAlignmentSizeForTab{
    padding-top: 1% !important;
    font-size: 6pt !important;
}
/*----------------------------------------------------------------------------------------------------------------------
*/   
}



/* 
  ##Device = pixel2, iphone6/7/8plus (Portrait)
  ##Screen = B/w the width of 320px to 480px & the height of 730px to 740px
*/
@media only screen and (min-width: 320px) and (max-width: 480px) and (min-height: 730px) and (max-height: 740px)
{    
    
/*------------------------------App HomeScreen and Login----------------------------------------------------------------------*/
    .sliderHeader{
        /*height: 130vh;*/
        padding-top: 0px !important;
    }
    .appWrapper{
        display: flex !important;
        align-items: center !important;
        flex-direction: column !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 100% !important;
        padding: 0px !important;
        /*                background: rgba(4, 40, 68, 0.85);*/
    }
    /*Registration Details*/
    #appRegistrationAlignment{
        padding-top: 5%;
        margin-left: 0% !important;
        /*width: 100% !important;*/
        top: 0% !important;
    }
    .appWizard-containerForTab{
        width: 90% !important;
        overflow: auto;
        height: 640px !important;
    }
    .appForm-group{
        margin: 5px 0 0 0!important;
    }
    .appWizard-cardForTab{
        height: 640px !important;
    }    
    .appPaidInvoiceFooterBlockPadding{
        padding-top: 19%;
    }
    .appUnPaidInvoiceFooterBlockPadding{
        padding-top: 33%;
    }
    .appRecentPaymentFooterBlockPadding{
        padding-top: 18%;
    }
    .appGenerateInvoiceFooterBlockPadding{
        padding-top: 45%;
    }
    .appPaymentFooterBlockFontSizeForTab{
        font-size: 6pt !important;
    }
    .msgBoxContent{
        overflow: auto;
    }
    .appRegistrationDetailsTitleAlignment{
        /*padding-left: 15%;*/
    }
    .appRegisterFormCloseBtn{
        left: 8% !important;
    }
    .appWizardNavigationHide{
        display: none !important;
    }
    .appRegistrationDetailsAlignment{
        /*width: 115% !important;*/
    }
    .appRegistrationDetailsAlignment> .form-group > .icon-addon > .multiselect-native-select > .btn-group{
    width: 100% !important;
    }    
    .appBusinessRegistrationWidth{
        width: 96% !important;
    }
    #busiPartnerDtlTbl_wrapper{
        width: 106%;
        right: 3%;
    }
    .appPaymentHeightForPixel2XL{
        height: 35vh !important;
    }
    .appBusinessRegistrationTableAlignment{
        height: 8vh;
    }
    /*-----------------------*/    
    .appContainer{
        width: 100% !important;
        padding-right: 0px !important;
        padding-left: 0px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .carousel-inner img {
        width: 100% !important;
        height: 100% !important;
    }
    /*.carousel-item {
       height: 60vh !important;
    }*/
    /*.carousel-inner{
        height: 60vh !important;
    }*/
    .carousel-inner > .carousel-item {
        height: 41vh !important;
    }
    .carousel-inner > .carousel-item > img {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        -webkit-transform: translate(-50%, -50%) !important;
        -ms-transform: translate(-50%, -50%) !important;
        transform: translate(-50%, -50%) !important;
        max-height: 800px !important;
        border-radius: 8px;
        object-fit: cover;
    }
    /*.appImgSpec{
        width: 600px !important;
        height: 300px !important;
    } */
    .kerryLogo{
        background-color: white !important;
        width: 100% !important; 
        margin-top: 11px !important;
    }
    .firstMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .firstMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .secondMenu{
        background-color: #FFFFFF;
        transition: all 0.2s ease;
    }
    .secondMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .thirdMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .thirdMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .fourthMenu{
        background-color: #FFFFFF;
        transition: all 0.5s ease;
    }
    .fourthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black; */
    }
    .fifthMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .fifthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .sixthMenu{
        background-color: #FFFFFF;
        transition: all 0.2s ease;
    }
    .sixthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .seventhMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .seventhMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .textCenter{
        display: inline !important;
        padding-left: 30%;
        vertical-align: bottom;
    }
    .firstDirectionCenter{
        display: inline !important;
        vertical-align: bottom;
        position: relative;
        float: left;
        top: 31%;
        left: 5%;
    }
    .secondDirectionCenter{
        display: inline !important;
        vertical-align: bottom;
        position: relative;
        float: right;
        top: 31%;
        right: 5%;
    }
    .linkDiv{
        cursor: pointer !important;
        text-align: inherit !important;
        /*font-family: cursive !important;*/
        font-family: popinsMedium !important;
        color: #3366cc !important;
        /*font-size: 21pt !important;*/
        font-size: 11pt !important;
        height: 72px !important;
        padding-left: 0px !important;
        border-radius: 5px;
        /*background-color: #254f8c !important;*/
    }
    .linkDiv:hover {
        /*    transform: scale(1.04);  (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
        color: floralwhite !important;
        background-color: #f15a2f !important;
    }
    .appCol-sm-6{
        height: 0px !important;
        border-bottom: 0.5px solid #3c8dbc !important;
    }
    .uncol-sm-6{
        display: none;
    }
    .appRow{
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        margin-right: -15px !important;
        margin-left: -15px !important;
    }
    /*.hideForAppMenu{
        display: none;
    }*/
    .imgForAppMenu{
        display: inline-block !important;
        position: relative !important;
        top: 8px !important;
        left: 23%;
    }
    /*.linkDiv:hover > .hideForWeb{
      animation: shake 0.8s;
      animation-iteration-count: 2;
    }*/
    .toRemoveLineBreak > br{
        display: none;
    }
    @keyframes shake {
        0% { transform: translate(1px, 1px) rotate(0deg); }
        10% { transform: translate(-1px, -2px) rotate(-1deg); }
        20% { transform: translate(-3px, 0px) rotate(1deg); }
        30% { transform: translate(3px, 2px) rotate(0deg); }
        40% { transform: translate(1px, -1px) rotate(1deg); }
        50% { transform: translate(-1px, 2px) rotate(-1deg); }
        60% { transform: translate(-3px, 1px) rotate(0deg); }
        70% { transform: translate(3px, 1px) rotate(-1deg); }
        80% { transform: translate(-1px, -1px) rotate(1deg); }
        90% { transform: translate(1px, 2px) rotate(0deg); }
        100% { transform: translate(1px, -2px) rotate(-1deg); }
    }
    /*@keyframes shake {
      0% { transform: translate(3px, 3px) rotate(0deg); }
      10% { transform: translate(-2px, -3px) rotate(-1deg); }
      20% { transform: translate(-4px, 1px) rotate(1deg); }
      30% { transform: translate(3px, 2px) rotate(0deg); }
      40% { transform: translate(1px, -1px) rotate(1deg); }
      50% { transform: translate(-1px, 2px) rotate(-1deg); }
      60% { transform: translate(-3px, 1px) rotate(0deg); }
      70% { transform: translate(3px, 1px) rotate(-1deg); }
      80% { transform: translate(-1px, -1px) rotate(1deg); }
      90% { transform: translate(1px, 2px) rotate(0deg); }
      100% { transform: translate(3px, -4px) rotate(-1deg); }
    }*/
    .appMenuContainer{
        width: 100% !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .footerClass{
        padding-top: 0rem !important;
        padding-bottom: 0rem !important;
    }
    .appmodal-dialog{
        margin: 0rem !important;
    }
    .appLoginPageWrapper{
        padding: 12px !important;
    }
    .appLoginFirstSizeWidth{
        width: 38% !important;
    }    

/*------------------------------App inside menu----------------------------------------------------------------------*/
#paymentHdrName{
   font-size: 1rem !important;
}
#paymentHdrPanNo{
   font-size: 0.8rem !important;
}
#paymentHdrGstNo{
   font-size: 0.8rem !important;
}
#orgCustTypeEpay{
   font-size: 0.7rem !important;
}
.appSubTitleFontAdjust{
   font-size: 0.8rem !important;
}
.fa-2x{
   font-size: 1em !important;
}
.apptype2Cart{
    font-size: 0.8rem !important;
    width: 18px !important;
    height: 18px !important; 
}
#searchTypeInGateWayService{
    font-size: 0.7rem !important;
}
.appInvAmountFontAdjust{
    font-size: 1rem !important;
}
#unPaidInvTableData{
    font-size: 10px !important;
}
.appInvBtnFontAdjust{
    font-size: 0.475rem !important;
}
.appeInvoiceDeclarationFontAdjust{
    font-size: 0.8rem !important;
}
.appeInvoiceDeclarationFontAdjust2{
    font-size: 0.6rem !important;
}
.appMakePaymentBtnFontSizeAdjust{
    font-size: 0.675rem !important;
}
#paymentHdrAddr{
    font-size: 0.8rem !important;
    height: 40px !important;
    overflow: hidden;
}
.appEInvoiceDetailsTitleMarginBottom{
    margin-bottom: 0.5rem !important;
}
.appPaymentServiceFontSizeAdjust{
    font-size: 0.7rem !important;
}
.appPaymentServiceHeightAdjust{
    height: 23px !important;
    font-size: 0.7rem !important;
}
.appForm-groupMarginBottom{
    margin-bottom: 0.2rem !important;
}
.appContainerTitleSizeForTab2{
    font-size: 9.94pt !important;
}
.appFontSizeForTab{
    font-size: 6pt !important;
    }
/*.col-sm-12{
    display: block !important;
}*/
.appPaymentTitle{
    display: contents !important;
}
.col-sm-2{
    display: none !important;
}
.appPaymentTitleStartPadding{
   padding-left: 2%;
}
.appKerryPaymentTitle{
    display: contents !important;
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-left: 15px;
    
}
.appPaymentTitleHideForWeb{
    display: inline-block !important;
    position: relative !important;
    top: 4px !important;
    padding-left: 24%;
}
.webPaymentTitleHideForApp{
    display: none !important;
}
.appPaymentTitleWelcomeConsignee{
    width: 80% !important;
}
.appPaymentTitleConsigneePadding{
    padding-right: 11%;
    font-size: 9.94pt !important;
}
.appPaymentButtonSize{
    font-size: .675rem !important;
}
.appPaymentCenterAlign{
    padding-left: 3%;
}
.appCopyRightForTab{
    padding-top: 33% !important;
    padding-left: 3%;
    font-size: 6pt !important;
}
.appPaymentInvoiceNoField{
    width: 40% !important;
}
.appPaymentSearchInvoiceNo{
    width: 60% !important;
}
.appEInvoiceTransType{
    width: 151px !important;
}
.navbar-appTitleBackground{
    background-color: floralwhite !important;
}
.msgBox{
    left: 12.5px !important;
    width: 383px !important;
}
.appContainerSubTitleHideForWeb{
    display: block !important;
    position: relative !important;
}
.appTariffTitle{
    padding-left: 0% !important;
    padding-top: 3% !important;
}
.appTariffSubTitleAlignmentForTab2{
    font-size: 9.94pt !important;
}
.tariffPaymentButtonSize{
    font-size: 1.075rem !important;
}
.appTariffDropDown{
    padding: 0px !important;
}
#appTariffFontColor{
    color: white !important;
}
#appTariffFontColor:hover{
    color: #004085 !important;
}
.appMumbaiCFSPadding{
    padding-top: 1px !important;
}
.appMumbaiBodyHeight{
    height: 70vh !important;
}
.appMumbaiMarginBottom{
    margin-bottom: 0px !important;
}
.appICDCFSPadding{
    padding-top: 1px !important;
}
.appICDBodyHeight{
    height: 70vh !important;
}
.appICDMarginBottom{
    margin-bottom: 0px !important;
}
.appTariffCopyRightAlignmentSizeForTab{
    padding-top: 3% !important;
    font-size: 6pt !important;
}
/*----------------------------------------------------------------------------------------------------------------------
*/   
}





/* 
  ##Device = pixel2XL, iphoneX (Portrait)
  ##Screen = B/w the width of 320px to 480px & the height of 810px to 825px
*/ 
@media only screen and (min-width: 320px) and (max-width: 480px) and (min-height: 810px) and (max-height: 854px)
{    
    
/*------------------------------App HomeScreen and Login----------------------------------------------------------------------*/
    .sliderHeader{
        /*height: 130vh;*/
        padding-top: 0px !important;
    }
    .appWrapper{
        display: flex !important;
        align-items: center !important;
        flex-direction: column !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 100% !important;
        padding: 0px !important;
        /*                background: rgba(4, 40, 68, 0.85);*/
    }
    /*Registration Details*/
    #appRegistrationAlignment{
        padding-top: 5%;
        margin-left: 0% !important;
        /*width: 100% !important;*/
        top: 0% !important;
    }
    .appWizard-containerForTab{
        width: 90% !important;
        overflow: auto;
        height: 640px !important;
    }
    .appForm-group{
        margin: 5px 0 0 0!important;
    }
    .appWizard-cardForTab{
        height: 640px !important;
    }
    .appPaymentInvoiceFooterBlockPadding{
        padding-top: 11%;
    }
    .appPaidInvoiceFooterBlockPadding{
        padding-top: 22%;
    }
    .appUnPaidInvoiceFooterBlockPadding{
        padding-top: 9%;
    }
    .appRecentPaymentFooterBlockPadding{
        padding-top: 23%;
    }
    .appGenerateInvoiceFooterBlockPadding{
        padding-top: 48%;
    }
    .appPaymentFooterBlockFontSizeForTab{
        font-size: 6pt !important;
    }
    .msgBoxContent{
        overflow: auto;
    }
    .appRegistrationDetailsTitleAlignment{
        /*padding-left: 15%;*/
    }
    .appRegisterFormCloseBtn{
        left: 6% !important;
    }
    .appWizardNavigationHide{
        display: none !important;
    }
    .appRegistrationDetailsAlignment{
        /*width: 115% !important;*/
    }
    .appRegistrationDetailsAlignment> .form-group > .icon-addon > .multiselect-native-select > .btn-group{
    width: 100% !important;
    }    
    .appBusinessRegistrationWidth{
        width: 96% !important;
    }
    #busiPartnerDtlTbl_wrapper{
        width: 115%;
        right: 8%;
    }
    .appBusinessRegistrationTableAlignment{
        height: 8vh;
    }
    /*-----------------------*/ 
    .appContainer{
        width: 100% !important;
        padding-right: 0px !important;
        padding-left: 0px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .carousel-inner img {
        width: 100% !important;
        height: 100% !important;
    }
    /*.carousel-item {
       height: 60vh !important;
    }*/
    /*.carousel-inner{
        height: 60vh !important;
    }*/
    .carousel-inner > .carousel-item {
        height: 41vh !important;
    }
    .carousel-inner > .carousel-item > img {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        -webkit-transform: translate(-50%, -50%) !important;
        -ms-transform: translate(-50%, -50%) !important;
        transform: translate(-50%, -50%) !important;
        max-height: 800px !important;
        border-radius: 8px;
        object-fit: cover;
    }
    /*.appImgSpec{
        width: 600px !important;
        height: 300px !important;
    } */
    .kerryLogo{
        background-color: white !important;
        width: 100% !important; 
        margin-top: 11px !important;
    }
    .firstMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .firstMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .secondMenu{
        background-color: #FFFFFF;
        transition: all 0.2s ease;
    }
    .secondMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .thirdMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .thirdMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .fourthMenu{
        background-color: #FFFFFF;
        transition: all 0.5s ease;
    }
    .fourthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black; */
    }
    .fifthMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .fifthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .sixthMenu{
        background-color: #FFFFFF;
        transition: all 0.2s ease;
    }
    .sixthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .seventhMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .seventhMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .textCenter{
        display: inline !important;
        padding-left: 30%;
        vertical-align: bottom;
    }
    .firstDirectionCenter{
        display: inline !important;
        vertical-align: bottom;
        position: relative;
        float: left;
        top: 31%;
        left: 5%;
    }
    .secondDirectionCenter{
        display: inline !important;
        vertical-align: bottom;
        position: relative;
        float: right;
        top: 31%;
        right: 5%;
    }
    .linkDiv{
        cursor: pointer !important;
        text-align: inherit !important;
        /*font-family: cursive !important;*/
        font-family: popinsMedium !important;
        color: #3366cc !important;
        /*font-size: 21pt !important;*/
        font-size: 11pt !important;
        height: 84px !important;
        padding-left: 0px !important;
        border-radius: 5px;
        /*background-color: #254f8c !important;*/
    }
    .linkDiv:hover {
        /*    transform: scale(1.04);  (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
        color: floralwhite !important;
        background-color: #f15a2f !important;
    }
    .appCol-sm-6{
        height: 0px !important;
        border-bottom: 0.5px solid #3c8dbc !important;
    }
    .uncol-sm-6{
        display: none;
    }
    .appRow{
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        margin-right: -15px !important;
        margin-left: -15px !important;
    }
    /*.hideForAppMenu{
        display: none;
    }*/
    .imgForAppMenu{
        display: inline-block !important;
        position: relative !important;
        top: 8px !important;
        left: 23%;
    }
    /*.linkDiv:hover > .hideForWeb{
      animation: shake 0.8s;
      animation-iteration-count: 2;
    }*/
    .toRemoveLineBreak > br{
        display: none;
    }
    @keyframes shake {
        0% { transform: translate(1px, 1px) rotate(0deg); }
        10% { transform: translate(-1px, -2px) rotate(-1deg); }
        20% { transform: translate(-3px, 0px) rotate(1deg); }
        30% { transform: translate(3px, 2px) rotate(0deg); }
        40% { transform: translate(1px, -1px) rotate(1deg); }
        50% { transform: translate(-1px, 2px) rotate(-1deg); }
        60% { transform: translate(-3px, 1px) rotate(0deg); }
        70% { transform: translate(3px, 1px) rotate(-1deg); }
        80% { transform: translate(-1px, -1px) rotate(1deg); }
        90% { transform: translate(1px, 2px) rotate(0deg); }
        100% { transform: translate(1px, -2px) rotate(-1deg); }
    }
    /*@keyframes shake {
      0% { transform: translate(3px, 3px) rotate(0deg); }
      10% { transform: translate(-2px, -3px) rotate(-1deg); }
      20% { transform: translate(-4px, 1px) rotate(1deg); }
      30% { transform: translate(3px, 2px) rotate(0deg); }
      40% { transform: translate(1px, -1px) rotate(1deg); }
      50% { transform: translate(-1px, 2px) rotate(-1deg); }
      60% { transform: translate(-3px, 1px) rotate(0deg); }
      70% { transform: translate(3px, 1px) rotate(-1deg); }
      80% { transform: translate(-1px, -1px) rotate(1deg); }
      90% { transform: translate(1px, 2px) rotate(0deg); }
      100% { transform: translate(3px, -4px) rotate(-1deg); }
    }*/
    .appMenuContainer{
        width: 100% !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .footerClass{
        padding-top: 0rem !important;
        padding-bottom: 0rem !important;
    }
    .appmodal-dialog{
        margin: 0rem !important;
    }
    .appLoginPageWrapper{
        padding: 12px !important;
    }
    .appLoginFirstSizeWidth{
        width: 34% !important;
    }      

/*------------------------------App inside menu----------------------------------------------------------------------*/
#paymentHdrName{
   font-size: 1rem !important;
}
#paymentHdrPanNo{
   font-size: 0.8rem !important;
}
#paymentHdrGstNo{
   font-size: 0.8rem !important;
}
#orgCustTypeEpay{
   font-size: 0.7rem !important;
}
.appSubTitleFontAdjust{
   font-size: 0.8rem !important;
}
.fa-2x{
   font-size: 1em !important;
}
.apptype2Cart{
    font-size: 0.8rem !important;
    width: 18px !important;
    height: 18px !important; 
}
#searchTypeInGateWayService{
    font-size: 0.7rem !important;
}
.appInvAmountFontAdjust{
    font-size: 1rem !important;
}
#unPaidInvTableData{
    font-size: 10px !important;
}
.appInvBtnFontAdjust{
    font-size: 0.475rem !important;
}
.appeInvoiceDeclarationFontAdjust{
    font-size: 0.8rem !important;
}
.appeInvoiceDeclarationFontAdjust2{
    font-size: 0.6rem !important;
}
.appMakePaymentBtnFontSizeAdjust{
    font-size: 0.675rem !important;
}
#paymentHdrAddr{
    font-size: 0.8rem !important;
    height: 40px !important;
    overflow: hidden;
}
.appEInvoiceDetailsTitleMarginBottom{
    margin-bottom: 0.5rem !important;
}
.appPaymentServiceFontSizeAdjust{
    font-size: 0.7rem !important;
}
.appPaymentServiceHeightAdjust{
    height: 23px !important;
    font-size: 0.7rem !important;
}
.appForm-groupMarginBottom{
    margin-bottom: 0.2rem !important;
}
.appContainerTitleSizeForTab2{
    font-size: 9.94pt !important;
}
.appFontSizeForTab{
    font-size: 6pt !important;
    }
/*.col-sm-12{
    display: block !important;
}*/
.appPaymentTitle{
    display: contents !important;
}
.col-sm-2{
    display: none !important;
}
.appPaymentTitleStartPadding{
   padding-left: 2%;
}
.appKerryPaymentTitle{
    display: contents !important;
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-left: 15px;
    
}
.appPaymentTitleHideForWeb{
    display: inline-block !important;
    position: relative !important;
    top: 4px !important;
    padding-left: 24%;
}
.webPaymentTitleHideForApp{
    display: none !important;
}
.appPaymentTitleWelcomeConsignee{
    width: 80% !important;
}
.appPaymentTitleConsigneePadding{
    padding-right: 11%;
    font-size: 9.94pt !important;
}
.appPaymentButtonSize{
    font-size: .675rem !important;
}
.appPaymentCenterAlign{
    padding-left: 3%;
}
.appPaymentInvoiceNoField{
    width: 40% !important;
}
.appPaymentSearchInvoiceNo{
    width: 60% !important;
}
.appEInvoiceTransType{
    width: 151px !important;
}
.navbar-appTitleBackground{
    background-color: floralwhite !important;
}
.msgBox{
    left: 12.5px !important;
    width: 383px !important;
}
.appContainerSubTitleHideForWeb{
    display: block !important;
    position: relative !important;
}
.appCopyRightForTab{
    padding-top: 36% !important;
    padding-left: 3%;
    font-size: 6pt !important;
}
.appTariffTitle{
    padding-left: 0% !important;
    padding-top: 3% !important;
}
.tariffPaymentButtonSize{
    font-size: 1.075rem !important;
}
.appTariffDropDown{
    padding: 0px !important;
}
.appTariffSubTitleAlignmentForTab2{
    font-size: 9.94pt !important;
}
#appTariffFontColor{
    color: white !important;
}
#appTariffFontColor:hover{
    color: #004085 !important;
}
.appMumbaiCFSPadding{
    padding-top: 1px !important;
}
.appICDCFSPadding{
    padding-top: 1px !important;
}
.appPaymentHeightForPixel2XL{
    height: 36.5vh !important;
}
.appPaidFooterPaddingForPixel2XL{
    padding-top: 6%;
}
.appUnpaidFooterPaddingForPixel2XL{
    padding-top: 102%;
}
.appRecentPaymentFooterPaddingForPixel2XL{
    padding-top: 6%
}
.appGenerateInvoiceFooterPaddingForPixel2XL{
    padding-top: 19%;
}
.appContainerTrackTraceFooterPaddingForPixel2XL{
    padding-top: 19%;
}
.appMumbaiBodyHeight{
    height: 72vh !important;
}
.appMumbaiMarginBottom{
    margin-bottom: 0px !important;
}
.appICDBodyHeight{
    height: 72vh !important;
}
.appICDMarginBottom{
    margin-bottom: 0px !important;
}
.appTariffCopyRightAlignmentSizeForTab{
    padding-top: 3% !important;
    font-size: 6pt !important;
}
/*----------------------------------------------------------------------------------------------------------------------
*/   
}


/* 
  ##Device = Samsung Galaxy Tab (Portrait-600*774)
  ##Screen = B/w the width of 600px to 800px & the height of 741px to 800px
*/
@media only screen and (min-width: 600px) and (max-width: 800px) and (min-height: 720px) and (max-height: 800px)
{    
    
/*------------------------------App HomeScreen and Login----------------------------------------------------------------------*/
    .appContainerMaxWidth{
        max-width: 1000px;
    }
    .sliderHeader{
        /*height: 130vh;*/
        padding-top: 0px !important;
    }
    .appWrapper{
        display: flex !important;
        align-items: center !important;
        flex-direction: column !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 100% !important;
        padding: 0px !important;
        /*                background: rgba(4, 40, 68, 0.85);*/
    }
    /*Registration Details*/
    #appRegistrationAlignment{
        padding-top: 15%;
        margin-left: 9% !important;
        width: 125% !important;
        top: 0% !important;
    }
    .msgBoxContent{
        overflow: auto;
    }
    .appWizard-containerForTab{
        width: 129% !important;
        overflow: auto;
        height: 640px !important;
    }
    .appForm-group{
        margin: 5px 0 0 0!important;
    }
    .appWizard-cardForTab{
        height: 640px !important;
    }  
    .appPaymentInvoiceFooterBlockPadding{
        padding-top: 0%;
    }
    .appPaidInvoiceFooterBlockPadding{
        top: 5%;
    }
    .appUnPaidInvoiceFooterBlockPadding{
        top: 5%;
    }
    .appRecentPaymentFooterBlockPadding{
        padding-top: 0%;
    }
    .appGenerateInvoiceFooterBlockPadding{
        padding-top: 4%;
    }
    #paymentHdrAddr{    
    height: 44px !important;
    overflow: hidden;
    }    
    .appRegistrationDetailsTitleAlignment{
        /*padding-left: 15%;*/
    }
    .appRegisterFormCloseBtn{
        left: 12% !important;
    }
    .appWizardNavigationHide{
        display: none !important;
    }
    .appRegistrationDetailsAlignment{
        width: 100% !important;
    }
    .appRegistrationDetailsAlignment> .form-group > .icon-addon > .multiselect-native-select > .btn-group{
    width: 100% !important;
    }    
    .appBusinessRegistrationWidth{
        width: 93% !important;
    }
    #busiPartnerDtlTbl_wrapper{
        left: 3%;
        width: 90%;
        right: 0%;
    }
    .appBusinessRegistrationTableAlignment{
        height: 8vh;
    }
    /*-----------------------*/ 
    .appContainer{
        width: 100% !important;
        padding-right: 0px !important;
        padding-left: 0px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .carousel-inner img {
        width: 100% !important;
        height: 100% !important;
    }
    /*.carousel-item {
       height: 60vh !important;
    }*/
    /*.carousel-inner{
        height: 60vh !important;
    }*/
    .carousel-inner > .carousel-item {
        height: 41vh !important;
    }
    .carousel-inner > .carousel-item > img {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        -webkit-transform: translate(-50%, -50%) !important;
        -ms-transform: translate(-50%, -50%) !important;
        transform: translate(-50%, -50%) !important;
        max-height: 800px !important;
        border-radius: 8px;
        object-fit: cover;
    }
    /*.appImgSpec{
        width: 600px !important;
        height: 300px !important;
    } */
    .kerryLogo{
        background-color: white !important;
        width: 100% !important; 
        margin-top: 11px !important;
    }
    .firstMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .firstMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .secondMenu{
        background-color: #FFFFFF;
        transition: all 0.2s ease;
    }
    .secondMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .thirdMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .thirdMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .fourthMenu{
        background-color: #FFFFFF;
        transition: all 0.5s ease;
    }
    .fourthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black; */
    }
    .fifthMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .fifthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .sixthMenu{
        background-color: #FFFFFF;
        transition: all 0.2s ease;
    }
    .sixthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .seventhMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .seventhMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .textCenter{
        display: inline !important;
        padding-left: 30%;
        vertical-align: bottom;
    }
    .firstDirectionCenter{
        display: inline !important;
        vertical-align: bottom;
        position: relative;
        float: left;
        top: 31%;
        left: 5%;
    }
    .secondDirectionCenter{
        display: inline !important;
        vertical-align: bottom;
        position: relative;
        float: right;
        top: 31%;
        right: 5%;
    }
    .linkDiv{
        cursor: pointer !important;
        text-align: inherit !important;
        /*font-family: cursive !important;*/
        font-family: popinsMedium !important;
        color: #3366cc !important;
        /*font-size: 21pt !important;*/
        font-size: 17pt !important;
        height: 90px !important;
        padding-left: 0px !important;
        border-radius: 5px;
        padding-top: 1%;
        /*background-color: #254f8c !important;*/
    }
    .linkDiv:hover {
        /*    transform: scale(1.04);  (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
        color: floralwhite !important;
        background-color: #f15a2f !important;
    }
    .appCol-sm-6{
        height: 0px !important;
        border-bottom: 0.5px solid #3c8dbc !important;
    }
    .appCol-sm-6ForTab{
        height: 0px !important;
        border-bottom: 0.5px solid #3c8dbc !important;
    }
    .appFontSizeForTab{
        font-size: 11pt !important;
    }
    .appLoginBlockAlignmentForTab{
        width: 135% !important;
        height: 80vh;
    }
    .appLoginBlockDetailsTitleForTab{
        font-size: 3rem;
    }
    .appLoginDetailsBlockHeightAlignmentForTab{
        height: 80vh;
    }
    .appLoginBlockFontSizeAlignmentForTab{
        font-size: 18px !important;
    }
    .appLoginInputFontSizeForTab{
        font-size: 2rem !important;
        padding-top: 41px;
    }
    .appLoginBlockLoginFontSizeAlignmentForTab{
        font-size: 2rem !important;
    }
    .appLoginConditionsForGalaxyNote3{
        font-size: 1.5em !important;
    }
    .appLoginCopyRightForTab{
        font-size: 11px !important;
        padding-top: 11%;   
    }
    .appRow{
        display: -ms-flexbox !important;
        display: block !important;
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        margin-right: -15px !important;
        margin-left: -15px !important;
    }
    /*.hideForAppMenu{
        display: none;
    }*/
    .imgForAppMenu{
        display: inline-block !important;
        position: relative !important;
        top: 8px !important;
        left: 23%;
    }
    /*.linkDiv:hover > .hideForWeb{
      animation: shake 0.8s;
      animation-iteration-count: 2;
    }*/
    .toRemoveLineBreak > br{
        display: none;
    }
    @keyframes shake {
        0% { transform: translate(1px, 1px) rotate(0deg); }
        10% { transform: translate(-1px, -2px) rotate(-1deg); }
        20% { transform: translate(-3px, 0px) rotate(1deg); }
        30% { transform: translate(3px, 2px) rotate(0deg); }
        40% { transform: translate(1px, -1px) rotate(1deg); }
        50% { transform: translate(-1px, 2px) rotate(-1deg); }
        60% { transform: translate(-3px, 1px) rotate(0deg); }
        70% { transform: translate(3px, 1px) rotate(-1deg); }
        80% { transform: translate(-1px, -1px) rotate(1deg); }
        90% { transform: translate(1px, 2px) rotate(0deg); }
        100% { transform: translate(1px, -2px) rotate(-1deg); }
    }
    /*@keyframes shake {
      0% { transform: translate(3px, 3px) rotate(0deg); }
      10% { transform: translate(-2px, -3px) rotate(-1deg); }
      20% { transform: translate(-4px, 1px) rotate(1deg); }
      30% { transform: translate(3px, 2px) rotate(0deg); }
      40% { transform: translate(1px, -1px) rotate(1deg); }
      50% { transform: translate(-1px, 2px) rotate(-1deg); }
      60% { transform: translate(-3px, 1px) rotate(0deg); }
      70% { transform: translate(3px, 1px) rotate(-1deg); }
      80% { transform: translate(-1px, -1px) rotate(1deg); }
      90% { transform: translate(1px, 2px) rotate(0deg); }
      100% { transform: translate(3px, -4px) rotate(-1deg); }
    }*/
    .appMenuContainer{
        width: 100% !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        max-width: 1000px !important;
    }
    .footerClass{
        padding-top: 0rem !important;
        padding-bottom: 0rem !important;
    }
    .appmodal-dialog{
        margin: 0rem !important;        
    }
    .appLoginPageWrapper{
        padding: 9% !important;
    }
    .appLoginFirstSizeWidth{
        width: 31% !important;
    }      

/*------------------------------App inside menu----------------------------------------------------------------------*/

/*.col-sm-12{
    display: block !important;
}*/
.appPaymentTitle{
    display: contents !important;
}
.col-sm-2{
    display: none !important;
}
.appPaymentTitleStartPadding{
   padding-left: 2%;
}
.appKerryPaymentTitle{
    display: contents !important;
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-left: 15px;
    
}
.appPaymentTitleHideForWeb{
    display: inline-block !important;
    position: relative !important;
    top: 4px !important;
    padding-left: 25%;
}
.appKerryImgForTab2{
        width: 150% !important;
}
.webPaymentTitleHideForApp{
    display: none !important;
}
.appPaymentTitleConsigneeForTab{
    max-width: 100% !important;
}
.appPaymentTitleWelcomeConsignee{
    width: 80% !important;
}
.appPaymentTitleConsigneePadding{
    padding-right: 46%;
}
.appPaymentButtonSize{
    font-size: .675rem !important;
}
.appPaymentCenterAlign{
    padding-left: 3%;
}
.appeInvoiceDeclarationFontAdjust2{
    font-size: 0.6rem !important;
}
.appColWidthForCol12InTab{
    flex: 0 0 100% !important;
    max-width: 100% !important;
}
.appColAlignmentForContainerCol12InTab{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 15% !important;
}
.appColAlignmentForTariffCol12InTab{
    flex: 0 0 100% !important;
    width: 100% !important;
}
.appTariffDetailsSelectPaddingForTab{
    padding-right: 51% !important;
}
.appPaymentFooterBlockFontSizeForTab{
    font-size: 12pt !important;
}
.appCopyRigtForTab{
    padding-top: 6% !important;
    font-size: 12pt !important;
}
.appePaymentFirstDivAlignment{
    height: 14vh !important;
}
.appePaymentThirdDivAlignment{
    height: 26vh !important;
}
.appUnPaidFirstDivAlignment{
    height: 14vh !important;
}
.appPaidBodyHeightSizeForGalaxyNote3{
    height: 67vh !important;
}
.appGenerateInvoiceFirstDivAlignment{
    height: 17vh !important;
}
.appPaymentInvoiceNoField{
    width: 40% !important;
}
.appModalContentForTab{
    width: 130% !important;
}
.appContainerGetDetailsForTab{
    width: 100% !important;
}
.appPaymentSearchInvoiceNo{
    width: 60% !important;
}
.appEInvoiceTransType{
    width: 215px !important;
}
.navbar-appTitleBackground{
    background-color: floralwhite !important;
}
.msgBox{    
    width: 383px !important;
}
.appContainerSubTitleHideForWeb{
    display: block !important;
    position: relative !important;
}
.appCopyRightForTab{
    padding-top: 22% !important;
    font-size: 12pt !important;
}
.containerImgAdjustPadding{
    padding-top: 14% !important;
    padding-right: 18%;
}
.appTariffTitle{
    padding-left: 0% !important;
    padding-top: 3% !important;
}
.appTarifTitleAlignmentForTab2{
    height: 9%;
}
.tariffPaymentButtonSize{
    font-size: 1.075rem !important;
}
.appTariffDropDown{
    padding: 0px !important;
}
#appTariffFontColor{
    color: white !important;
}
#appTariffFontColor:hover{
    color: #004085 !important;
}
.appMumbaiCFSPadding{
    padding-top: 1px !important;
}
.appICDCFSPadding{
    padding-top: 1px !important;
}
.appPaymentHeightForPixel2XL{
    height: 34.5vh !important;
}
.appPaidFooterPaddingForPixel2XL{
    padding-top: 0%;
}
.appUnpaidFooterPaddingForPixel2XL{
    padding-top: 58%;
}
.appRecentPaymentFooterPaddingForPixel2XL{
    padding-top: 0%
}
.appGenerateInvoiceFooterPaddingForPixel2XL{
    padding-top: 0%;
}
.appContainerTrackTraceFooterPaddingForPixel2XL{
    padding-top: 0%;
}
.appMumbaiBodyHeight{
    height: 67vh !important;
}
.appMumbaiMarginBottom{
    margin-bottom: 0px !important;
}
.appICDBodyHeight{
    height: 67vh !important;
}
.appICDMarginBottom{
    margin-bottom: 0px !important;
}
.appTariffFontSizeForTab{
    font-size: 11pt !important;
}
.appTariffCopyRightAlignmentSizeForTab{
    padding-top: 0% !important;
    font-size: 12pt !important;
}
/*----------------------------------------------------------------------------------------------------------------------
*/   
}



/* 
  ##Device = iPads (Portrait)
  ##Screen = B/w the width of 600px to 800px & the height of 1024px to 1366px
*/ 
@media only screen and (min-width: 600px) and (max-width: 800px) and (min-height: 903px) and (max-height: 1366px)
{    
    
/*------------------------------App HomeScreen and Login----------------------------------------------------------------------*/
    .appContainerMaxWidth{
        max-width: 1000px;
    }
    .sliderHeader{
        /*height: 130vh;*/
        padding-top: 0px !important;
    }
    .appWrapper{
        display: flex !important;
        align-items: center !important;
        flex-direction: column !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 100% !important;
        padding: 0px !important;
        /*                background: rgba(4, 40, 68, 0.85);*/
    }
    /*Registration Details*/
    #appRegistrationAlignment{
        padding-top: 15%;
        margin-left: 9% !important;
        width: 125% !important;
        top: 0% !important;
    }
    .msgBoxContent{
        overflow: auto;
    }
    .appWizard-containerForTab{
        width: 129% !important;
        overflow: auto;
        height: 740px !important;
    }
    .appForm-group{
        margin: 5px 0 0 0!important;
    }
    .appWizard-cardForTab{
        height: 740px !important;
    }  
    .appPaymentInvoiceFooterBlockPadding{
        padding-top: 0%;
    }
    .appPaidInvoiceFooterBlockPadding{
        top: 5%;
    }
    .appUnPaidInvoiceFooterBlockPadding{
        top: 5%;
    }
    .appRecentPaymentFooterBlockPadding{
        padding-top: 2%;
    }
    .appGenerateInvoiceFooterBlockPadding{
        padding-top: 7%;
    }
    #paymentHdrAddr{    
    height: 44px !important;
    overflow: hidden;
    }    
    .appRegistrationDetailsTitleAlignment{
        /*padding-left: 15%;*/
    }
    .appRegisterFormCloseBtn{
        left: 23% !important;
    }
    .appWizardNavigationHide{
        display: none !important;
    }
    .appRegistrationDetailsAlignment{
        width: 100% !important;
    }
    .appRegistrationDetailsAlignment> .form-group > .icon-addon > .multiselect-native-select > .btn-group{
    width: 100% !important;
    }    
    .appBusinessRegistrationWidth{
        width: 93% !important;
    }
    #busiPartnerDtlTbl_wrapper{
        left: 3%;
        width: 90%;
        right: 0%;
    }
    .appBusinessRegistrationTableAlignment{
        height: 8vh;
    }
    /*-----------------------*/ 
    .appContainer{
        width: 100% !important;
        padding-right: 0px !important;
        padding-left: 0px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .carousel-inner img {
        width: 100% !important;
        height: 100% !important;
    }
    /*.carousel-item {
       height: 60vh !important;
    }*/
    /*.carousel-inner{
        height: 60vh !important;
    }*/
    .carousel-inner > .carousel-item {
        height: 41vh !important;
    }
    .carousel-inner > .carousel-item > img {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        -webkit-transform: translate(-50%, -50%) !important;
        -ms-transform: translate(-50%, -50%) !important;
        transform: translate(-50%, -50%) !important;
        max-height: 800px !important;
        border-radius: 8px;
        object-fit: cover;
    }
    /*.appImgSpec{
        width: 600px !important;
        height: 300px !important;
    } */
    .kerryLogo{
        background-color: white !important;
        width: 100% !important; 
        margin-top: 11px !important;
    }
    .firstMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .firstMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .secondMenu{
        background-color: #FFFFFF;
        transition: all 0.2s ease;
    }
    .secondMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .thirdMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .thirdMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .fourthMenu{
        background-color: #FFFFFF;
        transition: all 0.5s ease;
    }
    .fourthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black; */
    }
    .fifthMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .fifthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .sixthMenu{
        background-color: #FFFFFF;
        transition: all 0.2s ease;
    }
    .sixthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .seventhMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .seventhMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .textCenter{
        display: inline !important;
        padding-left: 30%;
        vertical-align: bottom;
    }
    .firstDirectionCenter{
        display: inline !important;
        vertical-align: bottom;
        position: relative;
        float: left;
        top: 31%;
        left: 5%;
    }
    .secondDirectionCenter{
        display: inline !important;
        vertical-align: bottom;
        position: relative;
        float: right;
        top: 31%;
        right: 5%;
    }
    .linkDiv{
        cursor: pointer !important;
        text-align: inherit !important;
        /*font-family: cursive !important;*/
        font-family: popinsMedium !important;
        color: #3366cc !important;
        /*font-size: 21pt !important;*/
        font-size: 17pt !important;
        height: 97px !important;
        padding-left: 0px !important;
        border-radius: 5px;
        padding-top: 1%;
        /*background-color: #254f8c !important;*/
    }
    .linkDiv:hover {
        /*    transform: scale(1.04);  (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
        color: floralwhite !important;
        background-color: #f15a2f !important;
    }
    .appCol-sm-6{
        height: 0px !important;
        border-bottom: 0.5px solid #3c8dbc !important;
    }
    .appCol-sm-6ForTab{
        height: 0px !important;
        border-bottom: 0.5px solid #3c8dbc !important;
    }
    .appFontSizeForTab{
        font-size: 13pt !important;
    }
    .appLoginBlockAlignmentForTab{
        width: 135% !important;
        height: 60vh;
    }
    .appLoginBlockDetailsTitleForTab{
        font-size: 3rem;
    }
    .appLoginDetailsBlockHeightAlignmentForTab{
        height: 60vh;
    }
    .appLoginBlockFontSizeAlignmentForTab{
        font-size: 20px !important;
    }
    .appLoginInputFontSizeForTab{
        font-size: 2rem !important;
        padding-top: 41px;
    }
    .appLoginBlockLoginFontSizeAlignmentForTab{
        font-size: 2rem !important;
    }
    .appLoginConditionsForGalaxyNote3{
        font-size: 1.5em !important;
    }
    .appLoginCopyRightForTab{
        font-size: 11px !important;
        padding-top: 11%;   
    }
    .appRow{
        display: -ms-flexbox !important;
        display: block !important;
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        margin-right: -15px !important;
        margin-left: -15px !important;
    }
    /*.hideForAppMenu{
        display: none;
    }*/
    .imgForAppMenu{
        display: inline-block !important;
        position: relative !important;
        top: 8px !important;
        left: 23%;
    }
    /*.linkDiv:hover > .hideForWeb{
      animation: shake 0.8s;
      animation-iteration-count: 2;
    }*/
    .toRemoveLineBreak > br{
        display: none;
    }
    @keyframes shake {
        0% { transform: translate(1px, 1px) rotate(0deg); }
        10% { transform: translate(-1px, -2px) rotate(-1deg); }
        20% { transform: translate(-3px, 0px) rotate(1deg); }
        30% { transform: translate(3px, 2px) rotate(0deg); }
        40% { transform: translate(1px, -1px) rotate(1deg); }
        50% { transform: translate(-1px, 2px) rotate(-1deg); }
        60% { transform: translate(-3px, 1px) rotate(0deg); }
        70% { transform: translate(3px, 1px) rotate(-1deg); }
        80% { transform: translate(-1px, -1px) rotate(1deg); }
        90% { transform: translate(1px, 2px) rotate(0deg); }
        100% { transform: translate(1px, -2px) rotate(-1deg); }
    }
    /*@keyframes shake {
      0% { transform: translate(3px, 3px) rotate(0deg); }
      10% { transform: translate(-2px, -3px) rotate(-1deg); }
      20% { transform: translate(-4px, 1px) rotate(1deg); }
      30% { transform: translate(3px, 2px) rotate(0deg); }
      40% { transform: translate(1px, -1px) rotate(1deg); }
      50% { transform: translate(-1px, 2px) rotate(-1deg); }
      60% { transform: translate(-3px, 1px) rotate(0deg); }
      70% { transform: translate(3px, 1px) rotate(-1deg); }
      80% { transform: translate(-1px, -1px) rotate(1deg); }
      90% { transform: translate(1px, 2px) rotate(0deg); }
      100% { transform: translate(3px, -4px) rotate(-1deg); }
    }*/
    .appMenuContainer{
        width: 100% !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        max-width: 1000px !important;
    }
    .footerClass{
        padding-top: 0rem !important;
        padding-bottom: 0rem !important;
    }
    .appmodal-dialog{
        margin: 0rem !important;
        bottom: 89px;
    }
    .appLoginPageWrapper{
        padding: 12px !important;
    }
    .appLoginFirstSizeWidth{
        width: 34% !important;
    }      

/*------------------------------App inside menu----------------------------------------------------------------------*/

/*.col-sm-12{
    display: block !important;
}*/
.appPaymentTitle{
    display: contents !important;
}
.col-sm-2{
    display: none !important;
}
.appPaymentTitleStartPadding{
   padding-left: 2%;
}
.appKerryPaymentTitle{
    display: contents !important;
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-left: 15px;
    
}
.appPaymentTitleHideForWeb{
    display: inline-block !important;
    position: relative !important;
    top: 4px !important;
    padding-left: 35%;
}
.webPaymentTitleHideForApp{
    display: none !important;
}
.appPaymentTitleConsigneeForTab{
    max-width: 100% !important;
}
.appPaymentTitleWelcomeConsignee{
    width: 80% !important;
}
.appPaymentTitleConsigneePadding{
    padding-right: 56%;
}
.appPaymentButtonSize{
    font-size: .675rem !important;
}
.appPaymentCenterAlign{
    padding-left: 3%;
}
.appColWidthForCol12InTab{
    flex: 0 0 100% !important;
    max-width: 100% !important;
}
.appColAlignmentForContainerCol12InTab{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 15% !important;
}
.appColAlignmentForTariffCol12InTab{
    flex: 0 0 100% !important;
    width: 100% !important;
}
.appTariffDetailsSelectPaddingForTab{
    padding-right: 51% !important;
}
.appPaymentFooterBlockFontSizeForTab{
    font-size: 12pt !important;
}
.appCopyRigtForTab{
    padding-top: 6% !important;
    font-size: 12pt !important;
}
.appePaymentFirstDivAlignment{
    height: 10vh !important;
}
.appePaymentThirdDivAlignment{
    height: 31vh !important;
}
.appUnPaidFirstDivAlignment{
    height: 11vh !important;
}
.appGenerateInvoiceFirstDivAlignment{
    height: 13vh !important;
}
.appPaymentInvoiceNoField{
    width: 40% !important;
}
.appModalContentForTab{
    width: 130% !important;
}
.appContainerGetDetailsForTab{
    width: 100% !important;
}
.appPaymentSearchInvoiceNo{
    width: 60% !important;
}
.appEInvoiceTransType{
    width: 215px !important;
}
.navbar-appTitleBackground{
    background-color: floralwhite !important;
}
.msgBox{    
    width: 383px !important;
}
.appContainerSubTitleHideForWeb{
    display: block !important;
    position: relative !important;
}
.appCopyRightForTab{
    padding-top: 28% !important;
    font-size: 12pt !important;
}
.appTariffTitle{
    padding-left: 0% !important;
    padding-top: 3% !important;
}
.tariffPaymentButtonSize{
    font-size: 1.075rem !important;
}
.appTariffDropDown{
    padding: 0px !important;
}
#appTariffFontColor{
    color: white !important;
}
#appTariffFontColor:hover{
    color: #004085 !important;
}
.appMumbaiCFSPadding{
    padding-top: 1px !important;
}
.appICDCFSPadding{
    padding-top: 1px !important;
}
.appPaymentHeightForPixel2XL{
    height: 36.5vh !important;
}
.appPaidFooterPaddingForPixel2XL{
    padding-top: 11%;
}
.appUnpaidFooterPaddingForPixel2XL{
    padding-top: 80%;
}
.appRecentPaymentFooterPaddingForPixel2XL{
    padding-top: 6%
}
.appGenerateInvoiceFooterPaddingForPixel2XL{
    padding-top: 29%;
}
.appContainerTrackTraceFooterPaddingForPixel2XL{
    padding-top: 0%;
}
.appMumbaiBodyHeight{
    height: 72vh !important;
}
.appMumbaiMarginBottom{
    margin-bottom: 0px !important;
}
.appICDBodyHeight{
    height: 72vh !important;
}
.appICDMarginBottom{
    margin-bottom: 0px !important;
}
.appTariffFontSizeForTab{
    font-size: 11pt !important;
}
.appTariffCopyRightAlignmentSizeForTab{
    padding-top: 3% !important;
    font-size: 12pt !important;
}
/*----------------------------------------------------------------------------------------------------------------------
*/   
}




/* 
  ##Device = iPad Pro(1024 & 1366) (Portrait)
  ##Screen = B/w the width of 600px to 800px & the height of 1024px to 1366px
*/
@media only screen and (min-width: 1000px) and (max-width: 1048px) and (min-height: 1024px) and (max-height: 1366px)
{    
    
/*------------------------------App HomeScreen and Login----------------------------------------------------------------------*/
    .appContainerMaxWidth{
        max-width: 1024px;
    }
    .appindexLoginBtnForTab2{
        height: 5vh !important;
    }
    .appLoginCloseButtonforTab2{
        font-size: 2.5rem !important;
    }
    .appKerryImgForTab2{
        width: 199% !important;
    }
    .appTarifTitleAlignmentForTab2{
       height: 7%;
    }
    .sliderHeader{
        /*height: 130vh;*/
        padding-top: 0px !important;
    }
    .appWrapper{
        display: flex !important;
        align-items: center !important;
        flex-direction: column !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 100% !important;
        padding: 0px !important;
        /*                background: rgba(4, 40, 68, 0.85);*/
    }
    /*Registration Details*/
    #appRegistrationAlignment{
        padding-top: 15%;
        margin-left: 9% !important;
        width: 125% !important;
        top: 0% !important;
    }
    .msgBoxContent{
        overflow: auto;
    }
    .appWizard-containerForTab{
        width: 129% !important;
        overflow: auto;
        height: 740px !important;
    }
    .appForm-group{
        margin: 5px 0 0 0!important;
    }
    .appWizard-cardForTab{
        height: 740px !important;
    }  
    .appPaymentInvoiceFooterBlockPadding{
        padding-top: 4%;
    }
    .appPaidInvoiceFooterBlockPadding{
        padding-top: 3%;
    }
    .appUnPaidInvoiceFooterBlockPadding{
        padding-top: 3%;
    }    
    .appGenerateInvoiceFooterBlockPadding{
        padding-top: 0%;
    }    
    .appBusinessRegistrationPaddingForTab2{
        padding-left: 15% !important;
    } 
    .appRegistrationDetailsTitleAlignment{
        /*padding-left: 15%;*/
    }
    #paymentHdrAddr{    
    height: 44px !important;
    overflow: hidden;
    }   
    .appRegisterFormCloseBtn{
        left: 23% !important;
    }
    .appWizardNavigationHide{
        display: none !important;
    }
    .appRegistrationDetailsAlignment{
        width: 100% !important;
    }
    .appRegistrationDetailsAlignment> .form-group > .icon-addon > .multiselect-native-select > .btn-group{
    width: 100% !important;
    }    
    .appBusinessRegistrationWidth{
        width: 93% !important;
    }
    #busiPartnerDtlTbl_wrapper{
        left: 3%;
        width: 90%;
        right: 0%;
    }
    .appBusinessRegistrationTableAlignment{
        height: 8vh;
    }
    /*-----------------------*/ 
    .appContainer{
        width: 100% !important;
        padding-right: 0px !important;
        padding-left: 0px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .carousel-inner img {
        width: 100% !important;
        height: 100% !important;
    }
    /*.carousel-item {
       height: 60vh !important;
    }*/
    /*.carousel-inner{
        height: 60vh !important;
    }*/
    .carousel-inner > .carousel-item {
        height: 41vh !important;
    }
    .carousel-inner > .carousel-item > img {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        -webkit-transform: translate(-50%, -50%) !important;
        -ms-transform: translate(-50%, -50%) !important;
        transform: translate(-50%, -50%) !important;
        max-height: 800px !important;
        border-radius: 8px;
        object-fit: cover;
    }
    /*.appImgSpec{
        width: 600px !important;
        height: 300px !important;
    } */
    .kerryLogo{
        background-color: white !important;
        width: 100% !important; 
        margin-top: 11px !important;
    }
    .firstMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .firstMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .secondMenu{
        background-color: #FFFFFF;
        transition: all 0.2s ease;
    }
    .secondMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .thirdMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .thirdMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .fourthMenu{
        background-color: #FFFFFF;
        transition: all 0.5s ease;
    }
    .fourthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black; */
    }
    .fifthMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .fifthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .sixthMenu{
        background-color: #FFFFFF;
        transition: all 0.2s ease;
    }
    .sixthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .seventhMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .seventhMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .textCenter{
        display: inline !important;
        padding-left: 30%;
        vertical-align: bottom;
    }
    .firstDirectionCenter{
        display: inline !important;
        vertical-align: bottom;
        position: relative;
        float: left;
        top: 31%;
        left: 5%;
    }
    .secondDirectionCenter{
        display: inline !important;
        vertical-align: bottom;
        position: relative;
        float: right;
        top: 31%;
        right: 5%;
    }
    .linkDiv{
        cursor: pointer !important;
        text-align: inherit !important;
        /*font-family: cursive !important;*/
        font-family: popinsMedium !important;
        color: #3366cc !important;
        /*font-size: 21pt !important;*/
        font-size: 25pt !important;
        height: 130px !important;
        padding-left: 0px !important;
        border-radius: 5px;
        padding-top: 3%;
        /*background-color: #254f8c !important;*/
    }
    .linkDiv:hover {
        /*    transform: scale(1.04);  (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
        color: floralwhite !important;
        background-color: #f15a2f !important;
    }
    .appCol-sm-6{
        height: 0px !important;
        border-bottom: 0.5px solid #3c8dbc !important;
    }
    .appCol-sm-6ForTab{
        height: 0px !important;
        border-bottom: 0.5px solid #3c8dbc !important;
    }
    .appFontSizeForTab{
        font-size: 13pt !important;
    }
    .appLoginBlockAlignmentForTab{
        width: 110% !important;
        height: 60vh;
    }
    .appLoginBlockDetailsTitleForTab{
        font-size: 4rem;
    }
    .appLoginDetailsBlockHeightAlignmentForTab{
        height: 60vh;
    }
    .appLoginBlockFontSizeAlignmentForTab{
        font-size: 26px !important;
    }
    .appLoginInputFontSizeForTab{
        font-size: 3rem !important;
        padding-top: 59px;
    }
    .appLoginBlockLoginFontSizeAlignmentForTab{
        font-size: 2rem !important;
    }
    .appLoginConditionsForGalaxyNote3{
        font-size: 1.9em !important;
    }
    .appLoginCopyRightForTab{
        font-size: 14px !important;
        padding-top: 19%;   
    }
    .appRow{
        display: -ms-flexbox !important;
        display: block !important;
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        margin-right: -15px !important;
        margin-left: -15px !important;
    }
    /*.hideForAppMenu{
        display: none;
    }*/
    .imgForAppMenu{
        display: inline-block !important;
        position: relative !important;
        top: 8px !important;
        left: 23%;
    }
    /*.linkDiv:hover > .hideForWeb{
      animation: shake 0.8s;
      animation-iteration-count: 2;
    }*/
    .toRemoveLineBreak > br{
        display: none;
    }
    @keyframes shake {
        0% { transform: translate(1px, 1px) rotate(0deg); }
        10% { transform: translate(-1px, -2px) rotate(-1deg); }
        20% { transform: translate(-3px, 0px) rotate(1deg); }
        30% { transform: translate(3px, 2px) rotate(0deg); }
        40% { transform: translate(1px, -1px) rotate(1deg); }
        50% { transform: translate(-1px, 2px) rotate(-1deg); }
        60% { transform: translate(-3px, 1px) rotate(0deg); }
        70% { transform: translate(3px, 1px) rotate(-1deg); }
        80% { transform: translate(-1px, -1px) rotate(1deg); }
        90% { transform: translate(1px, 2px) rotate(0deg); }
        100% { transform: translate(1px, -2px) rotate(-1deg); }
    }
    /*@keyframes shake {
      0% { transform: translate(3px, 3px) rotate(0deg); }
      10% { transform: translate(-2px, -3px) rotate(-1deg); }
      20% { transform: translate(-4px, 1px) rotate(1deg); }
      30% { transform: translate(3px, 2px) rotate(0deg); }
      40% { transform: translate(1px, -1px) rotate(1deg); }
      50% { transform: translate(-1px, 2px) rotate(-1deg); }
      60% { transform: translate(-3px, 1px) rotate(0deg); }
      70% { transform: translate(3px, 1px) rotate(-1deg); }
      80% { transform: translate(-1px, -1px) rotate(1deg); }
      90% { transform: translate(1px, 2px) rotate(0deg); }
      100% { transform: translate(3px, -4px) rotate(-1deg); }
    }*/
    .appMenuContainer{
        width: 100% !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        max-width: 1024px !important;
    }
    .footerClass{
        padding-top: 0rem !important;
        padding-bottom: 0rem !important;
    }
    .appmodal-dialog{
        margin: 0rem !important;
        bottom: 89px;
    }
    .appLoginPageWrapper{
        padding: 12px !important;
    }
    .appLoginFirstSizeWidth{
        width: 34% !important;
    }      

/*------------------------------App inside menu----------------------------------------------------------------------*/

/*.col-sm-12{
    display: block !important;
}*/
.appPaymentTitle{
    display: contents !important;
}
.col-sm-2{
    display: none !important;
}
.appPaymentTitleStartPadding{
   padding-left: 2%;
}
.appKerryPaymentTitle{
    display: contents !important;
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-left: 15px;
    
}
.appPaymentTitleHideForWeb{
    display: inline-block !important;
    position: relative !important;
    top: 4px !important;
    padding-left: 31%;
}
.webPaymentTitleHideForApp{
    display: none !important;
}
.appPaymentTitleConsigneeForTab{
    max-width: 100% !important;
    height: 3vh;
}
.appPaymentTitleWelcomeConsignee{
    width: 80% !important;
}
.appPaymentTitleConsigneePadding{
    padding-right: 69%;
    font-size: 1.05rem !important;
}
.appPaymentButtonSize{
    font-size: 1.175rem !important;
}
.appPaymentCenterAlign{
    padding-left: 3%;
}
.appColWidthForCol12InTab{
    flex: 0 0 100% !important;
    max-width: 100% !important;
}
.appColAlignmentForContainerCol12InTab{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 15% !important;
}
.appColAlignmentForTariffCol12InTab{
    flex: 0 0 100% !important;
    width: 100% !important;
}
.appTariffDetailsSelectPaddingForTab{
    padding-right: 51% !important;
}
.appPaymentFooterBlockFontSizeForTab{
    font-size: 12pt !important;   
}
.appRecentPaymentFooterBlockFontSizeForTab2{
    padding-top: 7% !important;
}
.appGenerateInvoiceFooterBlockFontSizeForTab2{
    padding-top: 30% !important;
}
.appCopyRightForTab{
    padding-top: 30% !important;
    font-size: 12pt !important;
}
.appePaymentFirstDivAlignment{
    height: 10vh !important;
}
.appePaymentThirdDivAlignment{
    height: 31vh !important;
}
.appUnPaidFirstDivAlignment{
    height: 11vh !important;
}
.appGenerateInvoiceFirstDivAlignment{
    height: 10vh !important;
}
.appPaymentInvoiceNoField{
    width: 40% !important;
}
.appModalContentForTab{
    width: 130% !important;
}
.appContainerGetDetailsForTab{
    width: 100% !important;
}
.appPaymentSearchInvoiceNo{
    width: 60% !important;
}
.appEInvoiceTransType{
    width: 293px !important;
}
.navbar-appTitleBackground{
    background-color: floralwhite !important;
}
.msgBox{    
    width: 383px !important;
}
.appContainerSubTitleHideForWeb{
    display: block !important;
    position: relative !important;
}
.appTariffTitle{
    padding-left: 0% !important;
    padding-top: 3% !important;
}
.tariffPaymentButtonSize{
    font-size: 1.675rem !important;
}
.appTariffDropDown{
    padding: 0px !important;
}
#appTariffFontColor{
    color: white !important;
}
#appTariffFontColor:hover{
    color: #004085 !important;
}
.appTariffSubTitleAlignmentForTab2{
    font-size: 19pt !important;
}
.appMumbaiCFSPadding{
    padding-top: 1px !important;
}
.appICDCFSPadding{
    padding-top: 1px !important;
}
.appPaymentHeightForPixel2XL{
    height: 36.5vh !important;
}
.appPaidFooterPaddingForPixel2XL{
    padding-top: 11%;
}
.appUnpaidFooterPaddingForPixel2XL{
    padding-top: 80%;
}
.appRecentPaymentFooterPaddingForPixel2XL{
    padding-top: 6%
}
.appGenerateInvoiceFooterPaddingForPixel2XL{
    padding-top: 29%;
}
.appContainerTrackTraceFooterPaddingForPixel2XL{
    padding-top: 19%;
}
.appContainerTitleSizeForTab2{
    font-size: 1.50rem !important;
}
.appMumbaiBodyHeight{
    height: 72vh !important;
}
.appMumbaiMarginBottom{
    margin-bottom: 0px !important;
}
.appICDBodyHeight{
    height: 72vh !important;
}
.appICDMarginBottom{
    margin-bottom: 0px !important;
}
.appTariffFontSizeForTab{
    font-size: 11pt !important;
}
.appTariffCopyRightAlignmentSizeForTab{
    padding-top: 6% !important;
    font-size: 12pt !important;
}
/*----------------------------------------------------------------------------------------------------------------------
*/
}






/***************************************----***----------------------------------LandScape View------------------------------------***********************************************/



/* 
  ##Device = For iPhone 5/SE  and Nokia Lumia 520 (Landscape)
  ##Screen = B/w the width of 530px to 570px & the height of 320px to 480px
*/ 
@media only screen and (min-width: 530px) and (max-width: 570px) and (min-height: 320px) and (max-height: 480px)
{    
    
/*------------------------------App HomeScreen and Login----------------------------------------------------------------------*/
    .appContainerMaxWidth{
        max-width: 1000px;
    }
    .sliderHeader{
        /*height: 130vh;*/
        padding-top: 0px !important;
    }
    .appWrapper{
        display: flex !important;
        align-items: center !important;
        flex-direction: column !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 100% !important;
        padding: 0px !important;
        /*                background: rgba(4, 40, 68, 0.85);*/
    }
    /*Registration Details*/
    #appRegistrationAlignment{
        padding-top: 0%;
        margin-left: 0% !important;
        width: 100% !important;
        top: 1% !important;
    }
    .appForgotPasswordMarginLeft{
          margin-top: -3%;
    }
    .appForgotPasswordPadding{
        padding: 10px !important;
    }
    .appChangePasswordMarginLeft{
        margin-top: -4%;
    }
    .appChangePasswordLeftAndRightPadding{
        padding: 10px !important;
    }
    .appBusinessRegistrationPaddingForTab2{
        margin-left: -9% !important;
    }
    .appForm-group{
        margin: 5px 0 0 0!important;
    }
    .appWizard-containerForTab{
        width: 70% !important;
        height: 321px !important;
        margin-left: 14%;
        overflow: auto;
    }
    .appWizard-cardForTab{        
        height: 539px !important;
    }
    .appRegistrationDetailsTitleAlignment{
        /*padding-left: 15%;*/
    }
    .appRegisterFormCloseBtn{
        left: 5% !important;
    }
    .appWizardNavigationHide{
        display: none !important;
    }
    .appRegistrationDetailsAlignment{
        width: 100% !important;
    }
    .appRegistrationDetailsAlignment> .form-group > .icon-addon > .multiselect-native-select > .btn-group{
    width: 100% !important;
    }    
    .appBusinessRegistrationWidth{
        width: 93% !important;
    }
    #busiPartnerDtlTbl_wrapper{
        left: 3%;
        width: 90%;
        right: 0%;
    }
    .appBusinessRegistrationTableAlignment{
        height: 8vh;
    }
    /*-----------------------*/ 
    .appContainer{
        width: 100% !important;
        padding-right: 0px !important;
        padding-left: 0px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .carousel-inner img {
        width: 100% !important;
        height: 100% !important;
    }
    /*.carousel-item {
       height: 60vh !important;
    }*/
    /*.carousel-inner{
        height: 60vh !important;
    }*/
    .carousel-inner > .carousel-item {
        height: 71vh !important;
    }
    .carousel-inner > .carousel-item > img {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        -webkit-transform: translate(-50%, -50%) !important;
        -ms-transform: translate(-50%, -50%) !important;
        transform: translate(-50%, -50%) !important;
        max-height: 800px !important;
        border-radius: 8px;
        object-fit: cover;
    }
    /*.appImgSpec{
        width: 600px !important;
        height: 300px !important;
    } */
    .kerryLogo{
        background-color: white !important;
        width: 100% !important; 
        margin-top: 11px !important;
    }
    .firstMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .firstMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .secondMenu{
        background-color: #FFFFFF;
        transition: all 0.2s ease;
    }
    .secondMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .thirdMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .thirdMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .fourthMenu{
        background-color: #FFFFFF;
        transition: all 0.5s ease;
    }
    .fourthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black; */
    }
    .fifthMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .fifthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .sixthMenu{
        background-color: #FFFFFF;
        transition: all 0.2s ease;
    }
    .sixthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .seventhMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .seventhMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .textCenter{
        display: inline !important;
        padding-left: 30%;
        vertical-align: bottom;
    }
    .firstDirectionCenter{
        display: inline !important;
        vertical-align: bottom;
        position: relative;
        float: left;
        top: 31%;
        left: 5%;
    }
    .secondDirectionCenter{
        display: inline !important;
        vertical-align: bottom;
        position: relative;
        float: right;
        top: 31%;
        right: 5%;
    }
    .linkDiv{
        cursor: pointer !important;
        text-align: inherit !important;
        /*font-family: cursive !important;*/
        font-family: popinsMedium !important;
        color: #3366cc !important;
        /*font-size: 21pt !important;*/
        font-size: 10pt !important;
        height: 70px !important;
        padding-left: 0px !important;
        border-radius: 5px;
        padding-top: 0%;
        /*background-color: #254f8c !important;*/
    }
    .linkDiv:hover {
        /*    transform: scale(1.04);  (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
        color: floralwhite !important;
        background-color: #f15a2f !important;
    }
    .appCol-sm-6{
        height: 0px !important;
        border-bottom: 0.5px solid #3c8dbc !important;
    }
    .appCol-sm-6ForTab{
        height: 0px !important;
        border-bottom: 0.5px solid #3c8dbc !important;
    }
    .appFontSizeForTab{
        font-size: 6pt !important;
    }
    .appLoginBlockAlignmentForTab{
        width: 100% !important;
        height: 95vh;
    }
    .appLoginBlockDetailsTitleForTab{
        font-size: 1.5rem;
    }
    .appLoginDetailsBlockHeightAlignmentForTab{
        height: 95vh;
    }
    .appLoginBlockFontSizeAlignmentForTab{
        font-size: 10px !important;
    }
    .appLoginInputFontSizeForTab{
        font-size: 0.8rem !important;
        padding-top: 0px;
    }
    .appLoginInputPaddingForLandscapeView{
        padding: 0px 10px !important;
    }
    .appLoginBlockLoginFontSizeAlignmentForTab{
        font-size: 2rem !important;
    }
    .appLoginConditionsForGalaxyNote3{
        font-size: 0.9em !important;
    }
    .appLoginCopyRightForTab{
        font-size: 9px !important;
        padding-top: 3%;   
    }
    .appRow{
        display: -ms-flexbox !important;
        display: block !important;
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        margin-right: -15px !important;
        margin-left: -15px !important;
    }
    /*.hideForAppMenu{
        display: none;
    }*/
    .imgForAppMenu{
        display: inline-block !important;
        position: relative !important;
        top: 8px !important;
        left: 23%;
    }
    /*.linkDiv:hover > .hideForWeb{
      animation: shake 0.8s;
      animation-iteration-count: 2;
    }*/
    .toRemoveLineBreak > br{
        display: none;
    }
    @keyframes shake {
        0% { transform: translate(1px, 1px) rotate(0deg); }
        10% { transform: translate(-1px, -2px) rotate(-1deg); }
        20% { transform: translate(-3px, 0px) rotate(1deg); }
        30% { transform: translate(3px, 2px) rotate(0deg); }
        40% { transform: translate(1px, -1px) rotate(1deg); }
        50% { transform: translate(-1px, 2px) rotate(-1deg); }
        60% { transform: translate(-3px, 1px) rotate(0deg); }
        70% { transform: translate(3px, 1px) rotate(-1deg); }
        80% { transform: translate(-1px, -1px) rotate(1deg); }
        90% { transform: translate(1px, 2px) rotate(0deg); }
        100% { transform: translate(1px, -2px) rotate(-1deg); }
    }
    /*@keyframes shake {
      0% { transform: translate(3px, 3px) rotate(0deg); }
      10% { transform: translate(-2px, -3px) rotate(-1deg); }
      20% { transform: translate(-4px, 1px) rotate(1deg); }
      30% { transform: translate(3px, 2px) rotate(0deg); }
      40% { transform: translate(1px, -1px) rotate(1deg); }
      50% { transform: translate(-1px, 2px) rotate(-1deg); }
      60% { transform: translate(-3px, 1px) rotate(0deg); }
      70% { transform: translate(3px, 1px) rotate(-1deg); }
      80% { transform: translate(-1px, -1px) rotate(1deg); }
      90% { transform: translate(1px, 2px) rotate(0deg); }
      100% { transform: translate(3px, -4px) rotate(-1deg); }
    }*/
    .appMenuContainer{
        width: 100% !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        max-width: 1000px !important;
    }
    .footerClass{
        padding-top: 0rem !important;
        padding-bottom: 0rem !important;
    }
    .appmodal-dialog{
        margin: 0rem !important;
        bottom: 33px;
    }
    .appLoginPageWrapper{
        padding: 40px !important;
    }
    .appLoginFirstSizeWidth{
        width: 29% !important;
    }      

/*------------------------------App inside menu----------------------------------------------------------------------*/
#paymentHdrName{
   font-size: 1rem !important;
}
#paymentHdrPanNo{
   font-size: 0.8rem !important;
}
#paymentHdrGstNo{
   font-size: 0.8rem !important;
}
#orgCustTypeEpay{
   font-size: 0.7rem !important;
}
.appSubTitleFontAdjust{
   font-size: 0.8rem !important;
}
.fa-2x{
   font-size: 1em !important;
}
.apptype2Cart{
    font-size: 0.8rem !important;
    width: 18px !important;
    height: 18px !important; 
}
#searchTypeInGateWayService{
    font-size: 0.7rem !important;
}
.appInvAmountFontAdjust{
    font-size: 1rem !important;
}
#unPaidInvTableData{
    font-size: 10px !important;
}
.appInvBtnFontAdjust{
    font-size: 0.475rem !important;
}
.appeInvoiceDeclarationFontAdjust{
    font-size: 0.8rem !important;
}
.appeInvoiceDeclarationFontAdjust2{
    font-size: 0.6rem !important;
}
.appMakePaymentBtnFontSizeAdjust{
    font-size: 0.675rem !important;
}
#paymentHdrAddr{
    font-size: 0.8rem !important;
    height: 56px !important;
    overflow: hidden;
}
.appEInvoiceDetailsTitleMarginBottom{
    margin-bottom: 0.3rem !important;
}
.appPaymentServiceFontSizeAdjust{
    font-size: 0.7rem !important;
}
.appPaymentServiceHeightAdjust{
    height: 23px !important;
    font-size: 0.7rem !important;
}
.appForm-groupMarginBottom{
    margin-bottom: 0.2rem !important;
}
.appContainerTitleSizeForTab2{
    font-size: 7.94pt !important;
}
/*.col-sm-12{
    display: block !important;
}*/
.appPaymentInvoiceFooterBlockPadding{
        top: 95px !important;
}
.appPaidInvoiceFooterBlockPadding{
        padding-top: 22%;
}
.appUnPaidInvoiceFooterBlockPadding{
        padding-top: 6%;
}
.appRecentPaymentFooterBlockPadding{
        padding-top: 23%;
}
.appGenerateInvoiceFooterBlockPadding{
        padding-top: 18%;
}
.msgBoxContent{
        overflow: auto;
}
.appPaymentTitle{
    display: contents !important;
}
.col-sm-2{
    display: none !important;
}
.appPaymentTitleStartPadding{
   padding-left: 2%;
}
.appKerryPaymentTitle{
    display: contents !important;
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-left: 15px;
    
}
.appPaymentTitleHideForWeb{
    display: inline-block !important;
    position: relative !important;
    top: 4px !important;
    padding-left: 32%;
}
.webPaymentTitleHideForApp{
    display: none !important;
}
.appPaymentTitleConsigneeForTab{
    max-width: 100% !important;
}
.appPaymentTitleWelcomeConsignee{
    width: 80% !important;
}
.appPaymentTitleConsigneePadding{
    padding-right: 58%;
    font-size: 7.94pt !important;
}
.appPaymentButtonSize{
    font-size: .475rem !important;
}
.appPaymentCenterAlign{
    padding-left: 3%;
}
.appColWidthForCol12InTab{
    flex: 0 0 100% !important;
    max-width: 100% !important;    
}
.appColAlignmentForContainerCol12InTab{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 15% !important;
}
.appColAlignmentForTariffCol12InTab{
    flex: 0 0 100% !important;
    width: 100% !important;
}
.appTariffDetailsSelectPaddingForTab{
    padding-right: 51% !important;
}
.appPaymentFooterBlockFontSizeForTab{
    font-size: 6pt !important;
}
.appCopyRightForTab{
    padding-top: 6% !important;
    font-size: 6pt !important;
}
.appePaymentFirstDivAlignment{
    height: 27vh !important;
}
.appePaymentThirdDivAlignment{
    height: 31vh !important;
}
.appUnPaidFirstDivAlignment{
    height: 29vh !important;
}
.appGenerateInvoiceFirstDivAlignment{
    height: 37vh !important;
}
.appGenerateInvoiceTitleBackgroundHeight{
    height: 31vh !important; 
}
.appPaymentInvoiceNoField{
    width: 40% !important;
}
.appModalContentForTab{
    width: 130% !important;
}
.appContainerGetDetailsForTab{
    width: 100% !important;
}
.appPaymentSearchInvoiceNo{
    width: 60% !important;
}
.appEInvoiceTransType{
    width: 215px !important;
}
.navbar-appTitleBackground{
    background-color: floralwhite !important;
}
.msgBox{    
    width: 383px !important;
}
.appPaidInvoiceNotOverflow{
    overflow: initial !important;
}
.appUnPaidInvoiceNotOverflow{
    overflow: initial !important;
}
.appGenerateInvoiceNotOverflow{
    overflow: initial !important;
}
.appContainerSubTitleHideForWeb{
    display: block !important;
    position: relative !important;
}
.appTariffTitle{
    padding-left: 0% !important;
    padding-top: 3% !important;
}
.tariffPaymentButtonSize{
    font-size: 1.075rem !important;
}
.appTariffSubTitleAlignmentForTab2{
    font-size: 9.94pt !important;
}
.appTariffDropDown{
    padding: 0px !important;
}
#appTariffFontColor{
    color: white !important;
}
#appTariffFontColor:hover{
    color: #004085 !important;
}
.appMumbaiCFSPadding{
    padding-top: 1px !important;
    margin-top: 0% !important;
}
.appICDCFSPadding{
    padding-top: 1px !important;
    margin-top: 0% !important;
}
.appPaymentHeightForPixel2XL{
    height: 56.5vh !important;
}
.appPaidFooterPaddingForPixel2XL{
    padding-top: 11%;
}
.appUnpaidFooterPaddingForPixel2XL{
    padding-top: 35%;
}
.appRecentPaymentFooterPaddingForPixel2XL{
    padding-top: 6%
}
.appGenerateInvoiceFooterPaddingForPixel2XL{
    padding-top: 0%;
}
.appContainerTrackTraceFooterPaddingForPixel2XL{
    padding-top: 19%;
}
.appContainerSelectFontSize{
    font-size: .675rem !important;
    height: 23px !important;
}
.appContainerandFooterAlignment{
    height: 215px !important;
    overflow: auto;
}
.appNavBar-BrandInContainer{
    width: 80% !important;
    padding-left: 2% !important;
}
.appMumbaiBodyHeight{
    height: 32vh !important;
}
.appMumbaiMarginBottom{
    margin-bottom: 0px !important;
}
.appICDBodyHeight{
    height: 32vh !important;
}
.appICDMarginBottom{
    margin-bottom: 0px !important;
}
.appTariffFontSizeForTab{
    font-size: 11pt !important;
}
.appTariffCopyRightAlignmentSizeForTab{
    padding-top: 0% !important;
    font-size: 6pt !important;
    top: 0px !important;
    margin: 0 0 0px !important;
}
/*----------------------------------------------------------------------------------------------------------------------
*/   
}




/* 
  ##Device = Galaxy S5, Nexus 5, Nexus 4 (Landscape)
  ##Screen = B/w the width of 640px to 667px & the height of 320px to 480px
*/
@media only screen and (min-width: 640px) and (max-width: 667px) and (min-height: 320px) and (max-height: 480px)
{    
    
/*------------------------------App HomeScreen and Login----------------------------------------------------------------------*/
    .appContainerMaxWidth{
        max-width: 1000px;
    }
    .sliderHeader{
        /*height: 130vh;*/
        padding-top: 0px !important;
    }
    .appWrapper{
        display: flex !important;
        align-items: center !important;
        flex-direction: column !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 100% !important;
        padding: 0px !important;
        /*                background: rgba(4, 40, 68, 0.85);*/
    }
    /*Registration Details*/
    #appRegistrationAlignment{
        padding-top: 0%;
        margin-left: 0% !important;
        width: 100% !important;
        top: 1% !important;
    }
    .appForgotPasswordMarginLeft{
          margin-top: -3%;
    }
    .appForgotPasswordPadding{
        padding: 10px !important;
    }
    .appChangePasswordMarginLeft{
        margin-top: -4%;
    }
    .appChangePasswordLeftAndRightPadding{
        padding: 10px !important;
    }
    .appBusinessRegistrationPaddingForTab2{
        margin-left: -9% !important;
    }
    .appForm-group{
        margin: 5px 0 0 0!important;
    }
    .appWizard-containerForTab{
        width: 100% !important;
        height: 360px !important;
        margin-left: 34%;
        overflow: auto;
    }
    .appWizard-cardForTab{        
        height: 539px !important;
    }
    .appRegistrationDetailsTitleAlignment{
        /*padding-left: 15%;*/
    }
    .appRegisterFormCloseBtn{
        left: 5% !important;
    }
    .appWizardNavigationHide{
        display: none !important;
    }
    .appRegistrationDetailsAlignment{
        width: 100% !important;
    }
    .appRegistrationDetailsAlignment> .form-group > .icon-addon > .multiselect-native-select > .btn-group{
    width: 100% !important;
    }    
    .appBusinessRegistrationWidth{
        width: 93% !important;
    }
    #busiPartnerDtlTbl_wrapper{
        left: 3%;
        width: 90%;
        right: 0%;
    }
    .appBusinessRegistrationTableAlignment{
        height: 8vh;
    }
    /*-----------------------*/ 
    .appContainer{
        width: 100% !important;
        padding-right: 0px !important;
        padding-left: 0px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .carousel-inner img {
        width: 100% !important;
        height: 100% !important;
    }
    /*.carousel-item {
       height: 60vh !important;
    }*/
    /*.carousel-inner{
        height: 60vh !important;
    }*/
    .carousel-inner > .carousel-item {
        height: 71vh !important;
    }
    .carousel-inner > .carousel-item > img {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        -webkit-transform: translate(-50%, -50%) !important;
        -ms-transform: translate(-50%, -50%) !important;
        transform: translate(-50%, -50%) !important;
        max-height: 800px !important;
        border-radius: 8px;
        object-fit: cover;
    }
    /*.appImgSpec{
        width: 600px !important;
        height: 300px !important;
    } */
    .kerryLogo{
        background-color: white !important;
        width: 100% !important; 
        margin-top: 11px !important;
    }
    .firstMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .firstMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .secondMenu{
        background-color: #FFFFFF;
        transition: all 0.2s ease;
    }
    .secondMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .thirdMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .thirdMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .fourthMenu{
        background-color: #FFFFFF;
        transition: all 0.5s ease;
    }
    .fourthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black; */
    }
    .fifthMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .fifthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .sixthMenu{
        background-color: #FFFFFF;
        transition: all 0.2s ease;
    }
    .sixthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .seventhMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .seventhMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .textCenter{
        display: inline !important;
        padding-left: 30%;
        vertical-align: bottom;
    }
    .firstDirectionCenter{
        display: inline !important;
        vertical-align: bottom;
        position: relative;
        float: left;
        top: 31%;
        left: 5%;
    }
    .secondDirectionCenter{
        display: inline !important;
        vertical-align: bottom;
        position: relative;
        float: right;
        top: 31%;
        right: 5%;
    }
    .linkDiv{
        cursor: pointer !important;
        text-align: inherit !important;
        /*font-family: cursive !important;*/
        font-family: popinsMedium !important;
        color: #3366cc !important;
        /*font-size: 21pt !important;*/
        font-size: 10pt !important;
        height: 70px !important;
        padding-left: 0px !important;
        border-radius: 5px;
        padding-top: 0%;
        /*background-color: #254f8c !important;*/
    }
    .linkDiv:hover {
        /*    transform: scale(1.04);  (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
        color: floralwhite !important;
        background-color: #f15a2f !important;
    }
    .appCol-sm-6{
        height: 0px !important;
        border-bottom: 0.5px solid #3c8dbc !important;
    }
    .appCol-sm-6ForTab{
        height: 0px !important;
        border-bottom: 0.5px solid #3c8dbc !important;
    }
    .appFontSizeForTab{
        font-size: 6pt !important;
    }
    .appLoginBlockAlignmentForTab{
        width: 100% !important;
        height: 95vh;
    }
    .appLoginBlockDetailsTitleForTab{
        font-size: 1.5rem;
    }
    .appLoginDetailsBlockHeightAlignmentForTab{
        height: 95vh;
    }
    .appLoginBlockFontSizeAlignmentForTab{
        font-size: 10px !important;
    }
    .appLoginInputFontSizeForTab{
        font-size: 0.8rem !important;
        padding-top: 0px;
    }
    .appLoginInputPaddingForLandscapeView{
        padding: 0px 10px !important;
    }
    .appLoginBlockLoginFontSizeAlignmentForTab{
        font-size: 2rem !important;
    }
    .appLoginConditionsForGalaxyNote3{
        font-size: 0.9em !important;
    }
    .appLoginCopyRightForTab{
        font-size: 8px !important;
        padding-top: 19%;   
    }
    .appRow{
        display: -ms-flexbox !important;
        display: block !important;
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        margin-right: -15px !important;
        margin-left: -15px !important;
    }
    /*.hideForAppMenu{
        display: none;
    }*/
    .imgForAppMenu{
        display: inline-block !important;
        position: relative !important;
        top: 8px !important;
        left: 23%;
    }
    /*.linkDiv:hover > .hideForWeb{
      animation: shake 0.8s;
      animation-iteration-count: 2;
    }*/
    .toRemoveLineBreak > br{
        display: none;
    }
    @keyframes shake {
        0% { transform: translate(1px, 1px) rotate(0deg); }
        10% { transform: translate(-1px, -2px) rotate(-1deg); }
        20% { transform: translate(-3px, 0px) rotate(1deg); }
        30% { transform: translate(3px, 2px) rotate(0deg); }
        40% { transform: translate(1px, -1px) rotate(1deg); }
        50% { transform: translate(-1px, 2px) rotate(-1deg); }
        60% { transform: translate(-3px, 1px) rotate(0deg); }
        70% { transform: translate(3px, 1px) rotate(-1deg); }
        80% { transform: translate(-1px, -1px) rotate(1deg); }
        90% { transform: translate(1px, 2px) rotate(0deg); }
        100% { transform: translate(1px, -2px) rotate(-1deg); }
    }
    /*@keyframes shake {
      0% { transform: translate(3px, 3px) rotate(0deg); }
      10% { transform: translate(-2px, -3px) rotate(-1deg); }
      20% { transform: translate(-4px, 1px) rotate(1deg); }
      30% { transform: translate(3px, 2px) rotate(0deg); }
      40% { transform: translate(1px, -1px) rotate(1deg); }
      50% { transform: translate(-1px, 2px) rotate(-1deg); }
      60% { transform: translate(-3px, 1px) rotate(0deg); }
      70% { transform: translate(3px, 1px) rotate(-1deg); }
      80% { transform: translate(-1px, -1px) rotate(1deg); }
      90% { transform: translate(1px, 2px) rotate(0deg); }
      100% { transform: translate(3px, -4px) rotate(-1deg); }
    }*/
    .appMenuContainer{
        width: 100% !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        max-width: 1000px !important;
    }
    .footerClass{
        padding-top: 0rem !important;
        padding-bottom: 0rem !important;
    }
    .appmodal-dialog{
        margin: 0rem !important;
        bottom: 33px;
    }
    .appLoginPageWrapper{
        padding: 40px !important;
    }
    .appLoginFirstSizeWidth{
        width: 29% !important;
    }      

/*------------------------------App inside menu----------------------------------------------------------------------*/
#paymentHdrName{
   font-size: 1rem !important;
}
#paymentHdrPanNo{
   font-size: 0.8rem !important;
}
#paymentHdrGstNo{
   font-size: 0.8rem !important;
}
#orgCustTypeEpay{
   font-size: 0.7rem !important;
}
.appSubTitleFontAdjust{
   font-size: 0.8rem !important;
}
.fa-2x{
   font-size: 1em !important;
}
.apptype2Cart{
    font-size: 0.8rem !important;
    width: 18px !important;
    height: 18px !important; 
}
#searchTypeInGateWayService{
    font-size: 0.7rem !important;
}
.appInvAmountFontAdjust{
    font-size: 1rem !important;
}
#unPaidInvTableData{
    font-size: 10px !important;
}
.appInvBtnFontAdjust{
    font-size: 0.475rem !important;
}
.appeInvoiceDeclarationFontAdjust{
    font-size: 0.8rem !important;
}
.appeInvoiceDeclarationFontAdjust2{
    font-size: 0.6rem !important;
}
.appMakePaymentBtnFontSizeAdjust{
    font-size: 0.675rem !important;
}
#paymentHdrAddr{
    font-size: 0.8rem !important;
    height: 56px !important;
    overflow: hidden;
}
.appEInvoiceDetailsTitleMarginBottom{
    margin-bottom: 0.3rem !important;
}
.appPaymentServiceFontSizeAdjust{
    font-size: 0.7rem !important;
}
.appPaymentServiceHeightAdjust{
    height: 23px !important;
    font-size: 0.7rem !important;
}
.appForm-groupMarginBottom{
    margin-bottom: 0.2rem !important;
}
.appContainerTitleSizeForTab2{
    font-size: 7.94pt !important;
}
/*.col-sm-12{
    display: block !important;
}*/
.appPaymentInvoiceFooterBlockPadding{
        top: 95px !important;
}
.appPaidInvoiceFooterBlockPadding{
        padding-top: 22%;
}
.appUnPaidInvoiceFooterBlockPadding{
        padding-top: 6%;
}
.appRecentPaymentFooterBlockPadding{
        padding-top: 23%;
}
.appGenerateInvoiceFooterBlockPadding{
        padding-top: 18%;
}
.msgBoxContent{
        overflow: auto;
}
.appPaymentTitle{
    display: contents !important;
}
.col-sm-2{
    display: none !important;
}
.appPaymentTitleStartPadding{
   padding-left: 2%;
}
.appKerryPaymentTitle{
    display: contents !important;
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-left: 15px;
    
}
.appPaymentTitleHideForWeb{
    display: inline-block !important;
    position: relative !important;
    top: 4px !important;
    padding-left: 32%;
}
.webPaymentTitleHideForApp{
    display: none !important;
}
.appPaymentTitleConsigneeForTab{
    max-width: 100% !important;
}
.appPaymentTitleWelcomeConsignee{
    width: 80% !important;
}
.appPaymentTitleConsigneePadding{
    padding-right: 62%;
    font-size: 0.8rem !important;
}
.appPaymentButtonSize{
    font-size: .575rem !important;
}
.appPaymentCenterAlign{
    padding-left: 3%;
}
.appColWidthForCol12InTab{
    flex: 0 0 100% !important;
    max-width: 100% !important;    
}
.appColAlignmentForContainerCol12InTab{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 15% !important;
}
.appColAlignmentForTariffCol12InTab{
    flex: 0 0 100% !important;
    width: 100% !important;
}
.appTariffDetailsSelectPaddingForTab{
    padding-right: 51% !important;
}
.appPaymentFooterBlockFontSizeForTab{
    font-size: 6pt !important;
}
.appCopyRightForTab{
    padding-top: 6% !important;
    font-size: 6pt !important;
}
.appePaymentFirstDivAlignment{
    height: 27vh !important;
}
.appePaymentThirdDivAlignment{
    height: 31vh !important;
}
.appUnPaidFirstDivAlignment{
    height: 29vh !important;
}
.appGenerateInvoiceFirstDivAlignment{
    height: 37vh !important;
}
.appGenerateInvoiceTitleBackgroundHeight{
    height: 31vh !important; 
}
.appPaymentInvoiceNoField{
    width: 40% !important;
}
.appModalContentForTab{
    width: 130% !important;
}
.appContainerGetDetailsForTab{
    width: 100% !important;
}
.appPaymentSearchInvoiceNo{
    width: 60% !important;
}
.appEInvoiceTransType{
    width: 215px !important;
}
.navbar-appTitleBackground{
    background-color: floralwhite !important;
}
.msgBox{    
    width: 383px !important;
}
.appPaidInvoiceNotOverflow{
    overflow: initial !important;
}
.appUnPaidInvoiceNotOverflow{
    overflow: initial !important;
}
.appGenerateInvoiceNotOverflow{
    overflow: initial !important;
}
.appContainerSubTitleHideForWeb{
    display: block !important;
    position: relative !important;
}
.appTariffTitle{
    padding-left: 0% !important;
    padding-top: 3% !important;
}
.tariffPaymentButtonSize{
    font-size: 1.075rem !important;
}
.appTariffSubTitleAlignmentForTab2{
    font-size: 9.94pt !important;
}
.appTariffDropDown{
    padding: 0px !important;
}
#appTariffFontColor{
    color: white !important;
}
#appTariffFontColor:hover{
    color: #004085 !important;
}
.appMumbaiCFSPadding{
    padding-top: 1px !important;
    margin-top: 0% !important;
}
.appICDCFSPadding{
    padding-top: 1px !important;
    margin-top: 0% !important;
}
.appPaymentHeightForPixel2XL{
    height: 56.5vh !important;
}
.appPaidFooterPaddingForPixel2XL{
    padding-top: 11%;
}
.appUnpaidFooterPaddingForPixel2XL{
    padding-top: 35%;
}
.appRecentPaymentFooterPaddingForPixel2XL{
    padding-top: 6%
}
.appGenerateInvoiceFooterPaddingForPixel2XL{
    padding-top: 0%;
}
.appContainerTrackTraceFooterPaddingForPixel2XL{
    padding-top: 19%;
}
.appContainerSelectFontSize{
    font-size: .675rem !important;
    height: 23px !important;
}
.appContainerandFooterAlignment{
    height: 255px !important;
    overflow: auto;
}
.appNavBar-BrandInContainer{
    width: 80% !important;
    padding-left: 2% !important;
}
.appMumbaiBodyHeight{
    height: 42vh !important;
}
.appMumbaiMarginBottom{
    margin-bottom: 0px !important;
}
.appICDBodyHeight{
    height: 42vh !important;
}
.appICDMarginBottom{
    margin-bottom: 0px !important;
}
.appTariffFontSizeForTab{
    font-size: 11pt !important;
}
.appTariffCopyRightAlignmentSizeForTab{
    padding-top: 0% !important;
    font-size: 6pt !important;
    top: 0px !important;
    margin: 0 0 0px !important;
}
/*----------------------------------------------------------------------------------------------------------------------
*/   
}




/* 
  ##Device = pixel2, iphone6/7/8plus (Landscape)
  ##Screen = B/w the width of 730px to 740px & the height of 320px to 480px
*/
@media only screen and (min-width: 730px) and (max-width: 740px) and (min-height: 320px) and (max-height: 480px)
{    
    
/*------------------------------App HomeScreen and Login----------------------------------------------------------------------*/
    .appContainerMaxWidth{
        max-width: 1000px;
    }
    .sliderHeader{
        /*height: 130vh;*/
        padding-top: 0px !important;
    }
    .appWrapper{
        display: flex !important;
        align-items: center !important;
        flex-direction: column !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 100% !important;
        padding: 0px !important;
        /*                background: rgba(4, 40, 68, 0.85);*/
    }
    /*Registration Details*/
    #appRegistrationAlignment{
        padding-top: 0%;
        margin-left: 0% !important;
        width: 100% !important;
        top: 1% !important;
    }
    .appForgotPasswordMarginLeft{
          margin-top: -3%;
    }
    .appForgotPasswordPadding{
        padding: 10px !important;
    }
    .appChangePasswordMarginLeft{
        margin-top: -4%;
    }
    .appChangePasswordLeftAndRightPadding{
        padding: 10px !important;
    }
    .appBusinessRegistrationPaddingForTab2{
        margin-left: -9% !important;
    }
    .appForm-group{
        margin: 5px 0 0 0!important;
    }
    .appWizard-containerForTab{
        width: 100% !important;
        height: 412px !important;
        margin-left: 49%;
        overflow: auto;
    }
    .appWizard-cardForTab{        
        height: 539px !important;
    }
    .appRegistrationDetailsTitleAlignment{
        /*padding-left: 15%;*/
    }
    .appRegisterFormCloseBtn{
        left: 5% !important;
    }
    .appWizardNavigationHide{
        display: none !important;
    }
    .appRegistrationDetailsAlignment{
        width: 100% !important;
    }
    .appRegistrationDetailsAlignment> .form-group > .icon-addon > .multiselect-native-select > .btn-group{
    width: 100% !important;
    }    
    .appBusinessRegistrationWidth{
        width: 93% !important;
    }
    #busiPartnerDtlTbl_wrapper{
        left: 0%;
        width: 100%;
        right: 0%;
    }
    .appBusinessRegistrationTableAlignment{
        height: 8vh;
    }
    /*-----------------------*/ 
    .appContainer{
        width: 100% !important;
        padding-right: 0px !important;
        padding-left: 0px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .carousel-inner img {
        width: 100% !important;
        height: 100% !important;
    }
    /*.carousel-item {
       height: 60vh !important;
    }*/
    /*.carousel-inner{
        height: 60vh !important;
    }*/
    .carousel-inner > .carousel-item {
        height: 71vh !important;
    }
    .carousel-inner > .carousel-item > img {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        -webkit-transform: translate(-50%, -50%) !important;
        -ms-transform: translate(-50%, -50%) !important;
        transform: translate(-50%, -50%) !important;
        max-height: 800px !important;
        border-radius: 8px;
        object-fit: cover;
    }
    /*.appImgSpec{
        width: 600px !important;
        height: 300px !important;
    } */
    .kerryLogo{
        background-color: white !important;
        width: 100% !important; 
        margin-top: 11px !important;
    }
    .firstMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .firstMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .secondMenu{
        background-color: #FFFFFF;
        transition: all 0.2s ease;
    }
    .secondMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .thirdMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .thirdMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .fourthMenu{
        background-color: #FFFFFF;
        transition: all 0.5s ease;
    }
    .fourthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black; */
    }
    .fifthMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .fifthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .sixthMenu{
        background-color: #FFFFFF;
        transition: all 0.2s ease;
    }
    .sixthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .seventhMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .seventhMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .textCenter{
        display: inline !important;
        padding-left: 30%;
        vertical-align: bottom;
    }
    .firstDirectionCenter{
        display: inline !important;
        vertical-align: bottom;
        position: relative;
        float: left;
        top: 31%;
        left: 5%;
    }
    .secondDirectionCenter{
        display: inline !important;
        vertical-align: bottom;
        position: relative;
        float: right;
        top: 31%;
        right: 5%;
    }
    .linkDiv{
        cursor: pointer !important;
        text-align: inherit !important;
        /*font-family: cursive !important;*/
        font-family: popinsMedium !important;
        color: #3366cc !important;
        /*font-size: 21pt !important;*/
        font-size: 10pt !important;
        height: 70px !important;
        padding-left: 0px !important;
        border-radius: 5px;
        padding-top: 0%;
        /*background-color: #254f8c !important;*/
    }
    .linkDiv:hover {
        /*    transform: scale(1.04);  (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
        color: floralwhite !important;
        background-color: #f15a2f !important;
    }
    .appCol-sm-6{
        height: 0px !important;
        border-bottom: 0.5px solid #3c8dbc !important;
    }
    .appCol-sm-6ForTab{
        height: 0px !important;
        border-bottom: 0.5px solid #3c8dbc !important;
    }
    .appFontSizeForTab{
        font-size: 6pt !important;
    }
    .appLoginBlockAlignmentForTab{
        width: 100% !important;
        height: 95vh;
    }
    .appLoginBlockDetailsTitleForTab{
        font-size: 1.5rem;
    }
    .appLoginDetailsBlockHeightAlignmentForTab{
        height: 95vh;
    }
    .appLoginBlockFontSizeAlignmentForTab{
        font-size: 10px !important;
    }
    .appLoginInputFontSizeForTab{
        font-size: 0.8rem !important;
        padding-top: 0px;
    }
    .appLoginInputPaddingForLandscapeView{
        padding: 15px 10px !important;
    }
    .appLoginBlockLoginFontSizeAlignmentForTab{
        font-size: 2rem !important;
    }
    .appLoginConditionsForGalaxyNote3{
        font-size: 0.9em !important;
    }
    .appLoginCopyRightForTab{
        font-size: 8px !important;
        padding-top: 19%;   
    }
    .appRow{
        display: -ms-flexbox !important;
        display: block !important;
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        margin-right: -15px !important;
        margin-left: -15px !important;
    }
    /*.hideForAppMenu{
        display: none;
    }*/
    .imgForAppMenu{
        display: inline-block !important;
        position: relative !important;
        top: 8px !important;
        left: 23%;
    }
    /*.linkDiv:hover > .hideForWeb{
      animation: shake 0.8s;
      animation-iteration-count: 2;
    }*/
    .toRemoveLineBreak > br{
        display: none;
    }
    @keyframes shake {
        0% { transform: translate(1px, 1px) rotate(0deg); }
        10% { transform: translate(-1px, -2px) rotate(-1deg); }
        20% { transform: translate(-3px, 0px) rotate(1deg); }
        30% { transform: translate(3px, 2px) rotate(0deg); }
        40% { transform: translate(1px, -1px) rotate(1deg); }
        50% { transform: translate(-1px, 2px) rotate(-1deg); }
        60% { transform: translate(-3px, 1px) rotate(0deg); }
        70% { transform: translate(3px, 1px) rotate(-1deg); }
        80% { transform: translate(-1px, -1px) rotate(1deg); }
        90% { transform: translate(1px, 2px) rotate(0deg); }
        100% { transform: translate(1px, -2px) rotate(-1deg); }
    }
    /*@keyframes shake {
      0% { transform: translate(3px, 3px) rotate(0deg); }
      10% { transform: translate(-2px, -3px) rotate(-1deg); }
      20% { transform: translate(-4px, 1px) rotate(1deg); }
      30% { transform: translate(3px, 2px) rotate(0deg); }
      40% { transform: translate(1px, -1px) rotate(1deg); }
      50% { transform: translate(-1px, 2px) rotate(-1deg); }
      60% { transform: translate(-3px, 1px) rotate(0deg); }
      70% { transform: translate(3px, 1px) rotate(-1deg); }
      80% { transform: translate(-1px, -1px) rotate(1deg); }
      90% { transform: translate(1px, 2px) rotate(0deg); }
      100% { transform: translate(3px, -4px) rotate(-1deg); }
    }*/
    .appMenuContainer{
        width: 100% !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        max-width: 1000px !important;
    }
    .footerClass{
        padding-top: 0rem !important;
        padding-bottom: 0rem !important;
    }
    .appmodal-dialog{
        margin: 0rem !important;
        bottom: 33px;
    }
    .appLoginPageWrapper{
        padding: 40px !important;
    }
    .appLoginFirstSizeWidth{
        width: 29% !important;
    }      

/*------------------------------App inside menu----------------------------------------------------------------------*/
#paymentHdrName{
   font-size: 1rem !important;
}
#paymentHdrPanNo{
   font-size: 0.8rem !important;
}
#paymentHdrGstNo{
   font-size: 0.8rem !important;
}
#orgCustTypeEpay{
   font-size: 0.7rem !important;
}
.appSubTitleFontAdjust{
   font-size: 0.8rem !important;
}
.fa-2x{
   font-size: 1em !important;
}
.apptype2Cart{
    font-size: 0.8rem !important;
    width: 18px !important;
    height: 18px !important; 
}
#searchTypeInGateWayService{
    font-size: 0.7rem !important;
}
.appInvAmountFontAdjust{
    font-size: 1rem !important;
}
#unPaidInvTableData{
    font-size: 10px !important;
}
.appInvBtnFontAdjust{
    font-size: 0.475rem !important;
}
.appeInvoiceDeclarationFontAdjust{
    font-size: 0.8rem !important;
}
.appeInvoiceDeclarationFontAdjust2{
    font-size: 0.6rem !important;
}
.appMakePaymentBtnFontSizeAdjust{
    font-size: 0.675rem !important;
}
#paymentHdrAddr{
    font-size: 0.8rem !important;
    height: 56px !important;
    overflow: hidden;
}
.appEInvoiceDetailsTitleMarginBottom{
    margin-bottom: 0.3rem !important;
}
.appPaymentServiceFontSizeAdjust{
    font-size: 0.7rem !important;
}
.appPaymentServiceHeightAdjust{
    height: 23px !important;
    font-size: 0.7rem !important;
}
.appForm-groupMarginBottom{
    margin-bottom: 0.2rem !important;
}
.appContainerTitleSizeForTab2{
    font-size: 9.94pt !important;
}
/*.col-sm-12{
    display: block !important;
}*/
.appPaymentInvoiceFooterBlockPadding{
        top: 95px !important;
}
.appPaidInvoiceFooterBlockPadding{
        padding-top: 22%;
}
.appUnPaidInvoiceFooterBlockPadding{
        padding-top: 6%;
}
.appRecentPaymentFooterBlockPadding{
        padding-top: 23%;
}
.appGenerateInvoiceFooterBlockPadding{
        padding-top: 18%;
}
.msgBoxContent{
        overflow: auto;
}
.appPaymentTitle{
    display: contents !important;
}
.col-sm-2{
    display: none !important;
}
.appPaymentTitleStartPadding{
   padding-left: 2%;
}
.appKerryPaymentTitle{
    display: contents !important;
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-left: 15px;
    
}
.appPaymentTitleHideForWeb{
    display: inline-block !important;
    position: relative !important;
    top: 4px !important;
    padding-left: 32%;
}
.webPaymentTitleHideForApp{
    display: none !important;
}
.appPaymentTitleConsigneeForTab{
    max-width: 100% !important;
}
.appPaymentTitleWelcomeConsignee{
    width: 80% !important;
}
.appPaymentTitleConsigneePadding{
    padding-right: 62%;
    font-size: 9.94pt !important;
}
.appPaymentButtonSize{
    font-size: .675rem !important;
}
.appPaymentCenterAlign{
    padding-left: 3%;
}
.appColWidthForCol12InTab{
    flex: 0 0 100% !important;
    max-width: 100% !important;    
}
.appColAlignmentForContainerCol12InTab{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 15% !important;
}
.appColAlignmentForTariffCol12InTab{
    flex: 0 0 100% !important;
    width: 100% !important;
}
.appTariffDetailsSelectPaddingForTab{
    padding-right: 51% !important;
}
.appPaymentFooterBlockFontSizeForTab{
    font-size: 6pt !important;
}
.appCopyRightForTab{
    padding-top: 6% !important;
    font-size: 6pt !important;
}
.appePaymentFirstDivAlignment{
    height: 23vh !important;
}
.appePaymentThirdDivAlignment{
    height: 31vh !important;
}
.appUnPaidFirstDivAlignment{
    height: 29vh !important;
}
.appGenerateInvoiceFirstDivAlignment{
    height: 29vh !important;
}
.appGenerateInvoiceTitleBackgroundHeight{
    height: 27vh !important; 
}
.appPaymentInvoiceNoField{
    width: 40% !important;
}
.appModalContentForTab{
    width: 130% !important;
}
.appContainerGetDetailsForTab{
    width: 100% !important;
}
.appPaymentSearchInvoiceNo{
    width: 60% !important;
}
.appEInvoiceTransType{
    width: 215px !important;
}
.navbar-appTitleBackground{
    background-color: floralwhite !important;
}
.msgBox{    
    width: 383px !important;
}
.appPaidInvoiceNotOverflow{
    overflow: initial !important;
}
.appUnPaidInvoiceNotOverflow{
    overflow: initial !important;
}
.appGenerateInvoiceNotOverflow{
    overflow: initial !important;
}
.appContainerSubTitleHideForWeb{
    display: block !important;
    position: relative !important;
}
.appTariffTitle{
    padding-left: 0% !important;
    padding-top: 3% !important;
}
.tariffPaymentButtonSize{
    font-size: 1.075rem !important;
}
.appTariffSubTitleAlignmentForTab2{
    font-size: 9.94pt !important;
}
.appTariffDropDown{
    padding: 0px !important;
}
#appTariffFontColor{
    color: white !important;
}
#appTariffFontColor:hover{
    color: #004085 !important;
}
.appMumbaiCFSPadding{
    padding-top: 1px !important;
    margin-top: 0% !important;
}
.appICDCFSPadding{
    padding-top: 1px !important;
    margin-top: 0% !important;
}
.appPaymentHeightForPixel2XL{
    height: 56.5vh !important;
}
.appPaidFooterPaddingForPixel2XL{
    padding-top: 11%;
}
.appUnpaidFooterPaddingForPixel2XL{
    padding-top: 35%;
}
.appRecentPaymentFooterPaddingForPixel2XL{
    padding-top: 6%
}
.appGenerateInvoiceFooterPaddingForPixel2XL{
    padding-top: 0%;
}
.appContainerTrackTraceFooterPaddingForPixel2XL{
    padding-top: 19%;
}
.appContainerSelectFontSize{
    font-size: .675rem !important;
    height: 23px !important;
}
.appContainerandFooterAlignment{
    height: 305px !important;
    overflow: auto;
}
.appNavBar-BrandInContainer{
    width: 80% !important;
    padding-left: 2% !important;
}
.appMumbaiBodyHeight{
    height: 50vh !important;
}
.appMumbaiMarginBottom{
    margin-bottom: 0px !important;
}
.appICDBodyHeight{
    height: 50vh !important;
}
.appICDMarginBottom{
    margin-bottom: 0px !important;
}
.appTariffFontSizeForTab{
    font-size: 11pt !important;
}
.appTariffCopyRightAlignmentSizeForTab{
    padding-top: 0% !important;
    font-size: 6pt !important;
    top: 0px !important;
    margin: 0 0 0px !important;
}
/*----------------------------------------------------------------------------------------------------------------------
*/   
}


/* 
  ##Device = pixel2XL, iphoneX (Landscape)
  ##Screen = B/w the width of 810px to 854px & the height of 320px to 480px
*/ 
@media only screen and (min-width: 810px) and (max-width: 854px) and (min-height: 320px) and (max-height: 480px)
{    
    
/*------------------------------App HomeScreen and Login----------------------------------------------------------------------*/
    .appContainerMaxWidth{
        max-width: 1000px;
    }
    .sliderHeader{
        /*height: 130vh;*/
        padding-top: 0px !important;
    }
    .appWrapper{
        display: flex !important;
        align-items: center !important;
        flex-direction: column !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 100% !important;
        padding: 0px !important;
        /*                background: rgba(4, 40, 68, 0.85);*/
    }
    /*Registration Details*/
    #appRegistrationAlignment{
        padding-top: 0%;
        margin-left: 0% !important;
        width: 100% !important;
        top: 1% !important;
    }
    .appForgotPasswordMarginLeft{
          margin-top: -3%;
    }
    .appForgotPasswordPadding{
        padding: 10px !important;
    }
    .appChangePasswordMarginLeft{
        margin-top: -4%;
    }
    .appChangePasswordLeftAndRightPadding{
        padding: 10px !important;
    }
    .appBusinessRegistrationPaddingForTab2{
        margin-left: -9% !important;
    }
    .appForm-group{
        margin: 5px 0 0 0!important;
    }
    .appWizard-containerForTab{
        width: 80% !important;
        height: 412px !important;
        margin-left: 40%;
        overflow: auto;
    }
    .appWizard-cardForTab{        
        height: 539px !important;
    }
    .appRegistrationDetailsTitleAlignment{
        /*padding-left: 15%;*/
    }
    .appRegisterFormCloseBtn{
        left: 8% !important;
    }
    .appWizardNavigationHide{
        display: none !important;
    }
    .appRegistrationDetailsAlignment{
        width: 100% !important;
    }
    .appRegistrationDetailsAlignment> .form-group > .icon-addon > .multiselect-native-select > .btn-group{
    width: 100% !important;
    }    
    .appBusinessRegistrationWidth{
        width: 93% !important;
    }
    #busiPartnerDtlTbl_wrapper{
        left: 0%;
        width: 100%;
        right: 0%;
    }
    .appBusinessRegistrationTableAlignment{
        height: 8vh;
    }
    /*-----------------------*/ 
    .appContainer{
        width: 100% !important;
        padding-right: 0px !important;
        padding-left: 0px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .carousel-inner img {
        width: 100% !important;
        height: 100% !important;
    }
    /*.carousel-item {
       height: 60vh !important;
    }*/
    /*.carousel-inner{
        height: 60vh !important;
    }*/
    .carousel-inner > .carousel-item {
        height: 71vh !important;
    }
    .carousel-inner > .carousel-item > img {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        -webkit-transform: translate(-50%, -50%) !important;
        -ms-transform: translate(-50%, -50%) !important;
        transform: translate(-50%, -50%) !important;
        max-height: 800px !important;
        border-radius: 8px;
        object-fit: cover;
    }
    /*.appImgSpec{
        width: 600px !important;
        height: 300px !important;
    } */
    .kerryLogo{
        background-color: white !important;
        width: 100% !important; 
        margin-top: 1px !important;
    }
    .firstMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .firstMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .secondMenu{
        background-color: #FFFFFF;
        transition: all 0.2s ease;
    }
    .secondMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .thirdMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .thirdMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .fourthMenu{
        background-color: #FFFFFF;
        transition: all 0.5s ease;
    }
    .fourthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black; */
    }
    .fifthMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .fifthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .sixthMenu{
        background-color: #FFFFFF;
        transition: all 0.2s ease;
    }
    .sixthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .seventhMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .seventhMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .textCenter{
        display: inline !important;
        padding-left: 30%;
        vertical-align: bottom;
    }
    .firstDirectionCenter{
        display: inline !important;
        vertical-align: bottom;
        position: relative;
        float: left;
        top: 31%;
        left: 5%;
    }
    .secondDirectionCenter{
        display: inline !important;
        vertical-align: bottom;
        position: relative;
        float: right;
        top: 31%;
        right: 5%;
    }
    .linkDiv{
        cursor: pointer !important;
        text-align: inherit !important;
        /*font-family: cursive !important;*/
        font-family: popinsMedium !important;
        color: #3366cc !important;
        /*font-size: 21pt !important;*/
        font-size: 11pt !important;
        height: 84px !important;
        padding-left: 0px !important;
        border-radius: 5px;
        padding-top: 0%;
        /*background-color: #254f8c !important;*/
    }
    .linkDiv:hover {
        /*    transform: scale(1.04);  (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
        color: floralwhite !important;
        background-color: #f15a2f !important;
    }
    .appCol-sm-6{
        height: 0px !important;
        border-bottom: 0.5px solid #3c8dbc !important;
    }
    .appCol-sm-6ForTab{
        height: 0px !important;
        border-bottom: 0.5px solid #3c8dbc !important;
    }
    .appFontSizeForTab{
        font-size: 6pt !important;
    }
    .appLoginBlockAlignmentForTab{
        width: 100% !important;
        height: 95vh;
    }
    .appLoginBlockDetailsTitleForTab{
        font-size: 1.5rem;
    }
    .appLoginDetailsBlockHeightAlignmentForTab{
        height: 95vh;
    }
    .appLoginBlockFontSizeAlignmentForTab{
        font-size: 10px !important;
    }
    .appLoginInputFontSizeForTab{
        font-size: 0.8rem !important;
        padding-top: 0px;
    }
    .appLoginInputPaddingForLandscapeView{
        padding: 15px 10px !important;
    }
    .appLoginBlockLoginFontSizeAlignmentForTab{
        font-size: 2rem !important;
    }
    .appLoginConditionsForGalaxyNote3{
        font-size: 0.9em !important;
    }
    .appLoginCopyRightForTab{
        font-size: 8px !important;
        padding-top: 19%;   
    }
    .appRow{
        display: -ms-flexbox !important;
        display: block !important;
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        margin-right: -15px !important;
        margin-left: -15px !important;
    }
    /*.hideForAppMenu{
        display: none;
    }*/
    .imgForAppMenu{
        display: inline-block !important;
        position: relative !important;
        top: 8px !important;
        left: 23%;
    }
    /*.linkDiv:hover > .hideForWeb{
      animation: shake 0.8s;
      animation-iteration-count: 2;
    }*/
    .toRemoveLineBreak > br{
        display: none;
    }
    @keyframes shake {
        0% { transform: translate(1px, 1px) rotate(0deg); }
        10% { transform: translate(-1px, -2px) rotate(-1deg); }
        20% { transform: translate(-3px, 0px) rotate(1deg); }
        30% { transform: translate(3px, 2px) rotate(0deg); }
        40% { transform: translate(1px, -1px) rotate(1deg); }
        50% { transform: translate(-1px, 2px) rotate(-1deg); }
        60% { transform: translate(-3px, 1px) rotate(0deg); }
        70% { transform: translate(3px, 1px) rotate(-1deg); }
        80% { transform: translate(-1px, -1px) rotate(1deg); }
        90% { transform: translate(1px, 2px) rotate(0deg); }
        100% { transform: translate(1px, -2px) rotate(-1deg); }
    }
    /*@keyframes shake {
      0% { transform: translate(3px, 3px) rotate(0deg); }
      10% { transform: translate(-2px, -3px) rotate(-1deg); }
      20% { transform: translate(-4px, 1px) rotate(1deg); }
      30% { transform: translate(3px, 2px) rotate(0deg); }
      40% { transform: translate(1px, -1px) rotate(1deg); }
      50% { transform: translate(-1px, 2px) rotate(-1deg); }
      60% { transform: translate(-3px, 1px) rotate(0deg); }
      70% { transform: translate(3px, 1px) rotate(-1deg); }
      80% { transform: translate(-1px, -1px) rotate(1deg); }
      90% { transform: translate(1px, 2px) rotate(0deg); }
      100% { transform: translate(3px, -4px) rotate(-1deg); }
    }*/
    .appMenuContainer{
        width: 100% !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        max-width: 1000px !important;
    }
    .footerClass{
        padding-top: 0rem !important;
        padding-bottom: 0rem !important;
    }
    .appmodal-dialog{
        margin: 0rem !important;
        bottom: 33px;
    }
    .appLoginPageWrapper{
        padding: 40px !important;
    }
    .appLoginFirstSizeWidth{
        width: 29% !important;
    }      

/*------------------------------App inside menu----------------------------------------------------------------------*/
#paymentHdrName{
   font-size: 1rem !important;
}
#paymentHdrPanNo{
   font-size: 0.8rem !important;
}
#paymentHdrGstNo{
   font-size: 0.8rem !important;
}
#orgCustTypeEpay{
   font-size: 0.7rem !important;
}
.appSubTitleFontAdjust{
   font-size: 0.8rem !important;
}
.fa-2x{
   font-size: 1em !important;
}
.apptype2Cart{
    font-size: 0.8rem !important;
    width: 18px !important;
    height: 18px !important; 
}
#searchTypeInGateWayService{
    font-size: 0.7rem !important;
}
.appInvAmountFontAdjust{
    font-size: 1rem !important;
}
#unPaidInvTableData{
    font-size: 10px !important;
}
.appInvBtnFontAdjust{
    font-size: 0.475rem !important;
}
.appeInvoiceDeclarationFontAdjust{
    font-size: 0.8rem !important;
}
.appeInvoiceDeclarationFontAdjust2{
    font-size: 0.6rem !important;
}
.appMakePaymentBtnFontSizeAdjust{
    font-size: 0.675rem !important;
}
#paymentHdrAddr{
    font-size: 0.8rem !important;
    height: 56px !important;
    overflow: hidden;
}
.appEInvoiceDetailsTitleMarginBottom{
    margin-bottom: 0.3rem !important;
}
.appPaymentServiceFontSizeAdjust{
    font-size: 0.7rem !important;
}
.appPaymentServiceHeightAdjust{
    height: 23px !important;
    font-size: 0.7rem !important;
}
.appForm-groupMarginBottom{
    margin-bottom: 0.2rem !important;
}
.appContainerTitleSizeForTab2{
    font-size: 9.94pt !important;
}
/*.col-sm-12{
    display: block !important;
}*/
.appPaymentInvoiceFooterBlockPadding{
        top: 95px !important;
}
.appPaidInvoiceFooterBlockPadding{
        padding-top: 22%;
}
.appUnPaidInvoiceFooterBlockPadding{
        padding-top: 6%;
}
.appRecentPaymentFooterBlockPadding{
        padding-top: 23%;
}
.appGenerateInvoiceFooterBlockPadding{
        padding-top: 18%;
}
.msgBoxContent{
        overflow: auto;
}
.appPaymentTitle{
    display: contents !important;
}
.col-sm-2{
    display: none !important;
}
.appPaymentTitleStartPadding{
   padding-left: 2%;
}
.appKerryPaymentTitle{
    display: contents !important;
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-left: 15px;
    
}
.appPaymentTitleHideForWeb{
    display: inline-block !important;
    position: relative !important;
    top: 4px !important;
    padding-left: 37%;
}
.webPaymentTitleHideForApp{
    display: none !important;
}
.appPaymentTitleConsigneeForTab{
    max-width: 100% !important;
}
.appPaymentTitleWelcomeConsignee{
    width: 80% !important;
}
.appPaymentTitleConsigneePadding{
    padding-right: 66%;
    font-size: 9.94pt !important;
}
.appPaymentButtonSize{
    font-size: .675rem !important;
}
.appPaymentCenterAlign{
    padding-left: 3%;
}
.appColWidthForCol12InTab{
    flex: 0 0 100% !important;
    max-width: 100% !important;    
}
.appColAlignmentForContainerCol12InTab{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 15% !important;
}
.appColAlignmentForTariffCol12InTab{
    flex: 0 0 100% !important;
    width: 100% !important;
}
.appTariffDetailsSelectPaddingForTab{
    padding-right: 51% !important;
}
.appTariffDetailsTariffDropDownPadding{
    padding-left: 0% !important;
}
.appPaymentFooterBlockFontSizeForTab{
    font-size: 6pt !important;
}
.appCopyRightForTab{
    padding-top: 6% !important;
    font-size: 6pt !important;
}
.appePaymentFirstDivAlignment{
    height: 23vh !important;
}
.appePaymentThirdDivAlignment{
    height: 31vh !important;
}
.appUnPaidFirstDivAlignment{
    height: 24vh !important;
}
.appGenerateInvoiceFirstDivAlignment{
    height: 29vh !important;
}
.appGenerateInvoiceTitleBackgroundHeight{
    height: 27vh !important; 
}
.appPaymentInvoiceNoField{
    width: 40% !important;
}
.appModalContentForTab{
    width: 130% !important;
}
.appContainerGetDetailsForTab{
    width: 100% !important;
}
.appPaymentSearchInvoiceNo{
    width: 60% !important;
}
.appEInvoiceTransType{
    width: 215px !important;
}
.navbar-appTitleBackground{
    background-color: floralwhite !important;
}
.msgBox{    
    width: 383px !important;
}
.appPaidInvoiceNotOverflow{
    overflow: initial !important;
}
.appUnPaidInvoiceNotOverflow{
    overflow: initial !important;
}
.appGenerateInvoiceNotOverflow{
    overflow: initial !important;
}
.appContainerSubTitleHideForWeb{
    display: block !important;
    position: relative !important;
}
.appTariffTitle{
    padding-left: 0% !important;
    padding-top: 3% !important;
}
.tariffPaymentButtonSize{
    font-size: 1.075rem !important;
}
.appTariffSubTitleAlignmentForTab2{
    font-size: 9.94pt !important;
}
.appTariffDropDown{
    padding: 0px !important;
}
#appTariffFontColor{
    color: white !important;
}
#appTariffFontColor:hover{
    color: #004085 !important;
}
.appMumbaiCFSPadding{
    padding-top: 1px !important;
    margin-top: 0% !important;
}
.appICDCFSPadding{
    padding-top: 1px !important;
    margin-top: 0% !important;
}
.appPaymentHeightForPixel2XL{
    height: 56.5vh !important;
}
.appPaidFooterPaddingForPixel2XL{
    padding-top: 11%;
}
.appUnpaidFooterPaddingForPixel2XL{
    padding-top: 35%;
}
.appRecentPaymentFooterPaddingForPixel2XL{
    padding-top: 6%
}
.appGenerateInvoiceFooterPaddingForPixel2XL{
    padding-top: 0%;
}
.appContainerTrackTraceFooterPaddingForPixel2XL{
    padding-top: 19%;
}
.appContainerSelectFontSize{
    font-size: .675rem !important;
    height: 23px !important;
}
.appContainerandFooterAlignment{
    height: 305px !important;
    overflow: auto;
}
.appNavBar-BrandInContainer{
    width: 80% !important;
    padding-left: 2% !important;
}
.appMumbaiBodyHeight{
    height: 50vh !important;
}
.appMumbaiMarginBottom{
    margin-bottom: 0px !important;
}
.appICDBodyHeight{
    height: 50vh !important;
}
.appICDMarginBottom{
    margin-bottom: 0px !important;
}
.appTariffFontSizeForTab{
    font-size: 11pt !important;
}
.appTariffCopyRightAlignmentSizeForTab{
    padding-top: 0% !important;
    font-size: 6pt !important;
    top: 0px !important;
    margin: 0 0 0px !important;
}
/*----------------------------------------------------------------------------------------------------------------------
*/   
}


/* 
  ##Device = Samsung Galaxy Tab (Landscape-774*600)
  ##Screen = B/w the width of 741px to 800px & the height of 600px to 800px
*/
@media only screen and (min-width: 741px) and (max-width: 1024px) and (min-height: 479px) and (max-height: 600px)
{    
    
/*------------------------------App HomeScreen and Login----------------------------------------------------------------------*/
    .appContainerMaxWidth{
        max-width: 1000px;
    }
    .sliderHeader{
        /*height: 130vh;*/
        padding-top: 0px !important;
    }
    .appWrapper{
        display: flex !important;
        align-items: center !important;
        flex-direction: column !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 100% !important;
        padding: 0px !important;
        /*                background: rgba(4, 40, 68, 0.85);*/
    }
    /*Registration Details*/
    #appRegistrationAlignment{
        padding-top: 0%;
        margin-left: 0% !important;
        width: 100% !important;
        top: 7% !important;
    }
    .msgBoxContent{
        overflow: auto;
    }
    .appWizard-containerForTab{
        width: 100% !important;
        overflow: auto;
        height: 540px !important;
        margin-left: 49% !important;
    }
    .appForm-group{
        margin: 5px 0 0 0!important;
    }
    .appWizard-cardForTab{
        height: 540px !important;
    }  
    .appPaymentInvoiceFooterBlockPadding{
        top: 52px !important;
    }
    .appPaidInvoiceFooterBlockPadding{
        top: 5%;
    }
    .appUnPaidInvoiceFooterBlockPadding{
        top: 5%;
    }
    .appRecentPaymentFooterBlockPadding{
        padding-top: 0%;
    }
    .appGenerateInvoiceFooterBlockPadding{
        padding-top: 4%;
    }
    #paymentHdrAddr{    
    height: 44px !important;
    overflow: hidden;
    }    
    .appRegistrationDetailsTitleAlignment{
        /*padding-left: 15%;*/
    }
    .appRegisterFormCloseBtn{
        left: 12% !important;
    }
    .appWizardNavigationHide{
        display: none !important;
    }
    .appRegistrationDetailsAlignment{
        width: 100% !important;
    }
    .appRegistrationDetailsAlignment> .form-group > .icon-addon > .multiselect-native-select > .btn-group{
    width: 100% !important;
    }    
    .appBusinessRegistrationWidth{
        width: 93% !important;
    }
    #busiPartnerDtlTbl_wrapper{
        left: 3%;
        width: 90%;
        right: 0%;
    }
    .appBusinessRegistrationTableAlignment{
        height: 8vh;
    }
    /*-----------------------*/ 
    .appContainer{
        width: 100% !important;
        padding-right: 0px !important;
        padding-left: 0px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .carousel-inner img {
        width: 100% !important;
        height: 100% !important;
    }
    /*.carousel-item {
       height: 60vh !important;
    }*/
    /*.carousel-inner{
        height: 60vh !important;
    }*/
    .carousel-inner > .carousel-item {
        height: 50vh !important;
    }
    .carousel-inner > .carousel-item > img {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        -webkit-transform: translate(-50%, -50%) !important;
        -ms-transform: translate(-50%, -50%) !important;
        transform: translate(-50%, -50%) !important;
        max-height: 800px !important;
        border-radius: 8px;
        object-fit: cover;
    }
    /*.appImgSpec{
        width: 600px !important;
        height: 300px !important;
    } */
    .kerryLogo{
        background-color: white !important;
        width: 100% !important; 
        margin-top: 11px !important;
    }
    .firstMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .firstMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .secondMenu{
        background-color: #FFFFFF;
        transition: all 0.2s ease;
    }
    .secondMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .thirdMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .thirdMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .fourthMenu{
        background-color: #FFFFFF;
        transition: all 0.5s ease;
    }
    .fourthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black; */
    }
    .fifthMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .fifthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .sixthMenu{
        background-color: #FFFFFF;
        transition: all 0.2s ease;
    }
    .sixthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .seventhMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .seventhMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .textCenter{
        display: inline !important;
        padding-left: 30%;
        vertical-align: bottom;
    }
    .firstDirectionCenter{
        display: inline !important;
        vertical-align: bottom;
        position: relative;
        float: left;
        top: 31%;
        left: 5%;
    }
    .secondDirectionCenter{
        display: inline !important;
        vertical-align: bottom;
        position: relative;
        float: right;
        top: 31%;
        right: 5%;
    }
    .linkDiv{
        cursor: pointer !important;
        text-align: inherit !important;
        /*font-family: cursive !important;*/
        font-family: popinsMedium !important;
        color: #3366cc !important;
        /*font-size: 21pt !important;*/
        font-size: 17pt !important;
        height: 90px !important;
        padding-left: 0px !important;
        border-radius: 5px;
        padding-top: 1%;
        /*background-color: #254f8c !important;*/
    }
    .linkDiv:hover {
        /*    transform: scale(1.04);  (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
        color: floralwhite !important;
        background-color: #f15a2f !important;
    }
    .appCol-sm-6{
        height: 0px !important;
        border-bottom: 0.5px solid #3c8dbc !important;
    }
    .appCol-sm-6ForTab{
        height: 0px !important;
        border-bottom: 0.5px solid #3c8dbc !important;
    }
    .appFontSizeForTab{
        font-size: 11pt !important;
    }
    .appLoginBlockAlignmentForTab{
        width: 135% !important;
        height: 80vh;
    }
    .appLoginBlockDetailsTitleForTab{
        font-size: 3rem;
    }
    .appLoginDetailsBlockHeightAlignmentForTab{
        height: 80vh;
    }
    .appLoginBlockFontSizeAlignmentForTab{
        font-size: 18px !important;
    }
    .appLoginInputFontSizeForTab{
        font-size: 2rem !important;
        padding-top: 0px;
    }
    .appLoginBlockLoginFontSizeAlignmentForTab{
        font-size: 2rem !important;
    }
    .appLoginConditionsForGalaxyNote3{
        font-size: 1.5em !important;
    }
    .appLoginCopyRightForTab{
        font-size: 11px !important;
        padding-top: 22%;   
    }
    .appRow{
        display: -ms-flexbox !important;
        display: block !important;
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        margin-right: -15px !important;
        margin-left: -15px !important;
    }
    /*.hideForAppMenu{
        display: none;
    }*/
    .imgForAppMenu{
        display: inline-block !important;
        position: relative !important;
        top: 8px !important;
        left: 23%;
    }
    /*.linkDiv:hover > .hideForWeb{
      animation: shake 0.8s;
      animation-iteration-count: 2;
    }*/
    .toRemoveLineBreak > br{
        display: none;
    }
    @keyframes shake {
        0% { transform: translate(1px, 1px) rotate(0deg); }
        10% { transform: translate(-1px, -2px) rotate(-1deg); }
        20% { transform: translate(-3px, 0px) rotate(1deg); }
        30% { transform: translate(3px, 2px) rotate(0deg); }
        40% { transform: translate(1px, -1px) rotate(1deg); }
        50% { transform: translate(-1px, 2px) rotate(-1deg); }
        60% { transform: translate(-3px, 1px) rotate(0deg); }
        70% { transform: translate(3px, 1px) rotate(-1deg); }
        80% { transform: translate(-1px, -1px) rotate(1deg); }
        90% { transform: translate(1px, 2px) rotate(0deg); }
        100% { transform: translate(1px, -2px) rotate(-1deg); }
    }
    /*@keyframes shake {
      0% { transform: translate(3px, 3px) rotate(0deg); }
      10% { transform: translate(-2px, -3px) rotate(-1deg); }
      20% { transform: translate(-4px, 1px) rotate(1deg); }
      30% { transform: translate(3px, 2px) rotate(0deg); }
      40% { transform: translate(1px, -1px) rotate(1deg); }
      50% { transform: translate(-1px, 2px) rotate(-1deg); }
      60% { transform: translate(-3px, 1px) rotate(0deg); }
      70% { transform: translate(3px, 1px) rotate(-1deg); }
      80% { transform: translate(-1px, -1px) rotate(1deg); }
      90% { transform: translate(1px, 2px) rotate(0deg); }
      100% { transform: translate(3px, -4px) rotate(-1deg); }
    }*/
    .appMenuContainer{
        width: 100% !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        max-width: 1000px !important;
    }
    .footerClass{
        padding-top: 0rem !important;
        padding-bottom: 0rem !important;
    }
    .appmodal-dialog{
        margin: 0rem !important;        
    }
    .appLoginPageWrapper{
        padding: 9% !important;
    }
    .appLoginFirstSizeWidth{
        width: 31% !important;
    }      

/*------------------------------App inside menu----------------------------------------------------------------------*/

/*.col-sm-12{
    display: block !important;
}*/
.appPaymentTitle{
    display: contents !important;
}
.col-sm-2{
    display: none !important;
}
.appPaymentTitleStartPadding{
   padding-left: 2%;
}
.appKerryPaymentTitle{
    display: contents !important;
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-left: 15px;
    
}
.appPaymentTitleHideForWeb{
    display: inline-block !important;
    position: relative !important;
    top: 4px !important;
    padding-left: 30%;
}
.appKerryImgForTab2{
        width: 150% !important;
}
.webPaymentTitleHideForApp{
    display: none !important;
}
.appPaymentTitleConsigneeForTab{
    max-width: 100% !important;
}
.appPaymentTitleWelcomeConsignee{
    width: 80% !important;
}
.appPaymentTitleConsigneePadding{
    padding-right: 57%;
}
.appPaymentButtonSize{
    font-size: .675rem !important;
}
.appPaymentCenterAlign{
    padding-left: 3%;
}
.appeInvoiceDeclarationFontAdjust2{
    font-size: 0.6rem !important;
}
.appColWidthForCol12InTab{
    flex: 0 0 100% !important;
    max-width: 100% !important;
}
.appColAlignmentForContainerCol12InTab{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 15% !important;
}
.appColAlignmentForTariffCol12InTab{
    flex: 0 0 100% !important;
    width: 100% !important;
}
.appTariffDetailsSelectPaddingForTab{
    padding-right: 51% !important;
}
.appPaymentFooterBlockFontSizeForTab{
    font-size: 11pt !important;
}
.appCopyRigtForTab{
    padding-top: 6% !important;
    font-size: 12pt !important;
}
.appePaymentFirstDivAlignment{
    height: 19vh !important;
}
.appePaymentThirdDivAlignment{
    height: 26vh !important;
}
.appUnPaidFirstDivAlignment{
    height: 19vh !important;
}
.appPaidBodyHeightSizeForGalaxyNote3{
    height: 67vh !important;
}
.appGenerateInvoiceFirstDivAlignment{
    height: 22vh !important;
}
.appPaymentInvoiceNoField{
    width: 40% !important;
}
.appModalContentForTab{
    width: 130% !important;
}
.appContainerGetDetailsForTab{
    width: 100% !important;
}
.appPaymentSearchInvoiceNo{
    width: 60% !important;
}
.appEInvoiceTransType{
    width: 215px !important;
}
.navbar-appTitleBackground{
    background-color: floralwhite !important;
}
.msgBox{    
    width: 383px !important;
}
.appContainerSubTitleHideForWeb{
    display: block !important;
    position: relative !important;
}
.appCopyRightForTab{
    padding-top: 22% !important;
    font-size: 12pt !important;
}
.containerImgAdjustPadding{
    padding-top: 14% !important;
    padding-right: 18%;
}
.appContainerandFooterAlignment {
    height: 480px !important;
    overflow: auto;
}
.appNavBar-BrandInContainer{    
    padding-left: 8% !important;
}
.appTariffTitle{
    padding-left: 0% !important;
    padding-top: 3% !important;
}
.appTarifTitleAlignmentForTab2{
    height: 11%;
}
.tariffPaymentButtonSize{
    font-size: 1.075rem !important;
}
.appTariffDropDown{
    padding: 0px !important;
}
#appTariffFontColor{
    color: white !important;
}
#appTariffFontColor:hover{
    color: #004085 !important;
}
.appMumbaiCFSPadding{
    padding-top: 1px !important;
}
.appICDCFSPadding{
    padding-top: 1px !important;
}
.appPaymentHeightForPixel2XL{
    height: 34.5vh !important;
}
.appPaidFooterPaddingForPixel2XL{
    padding-top: 0%;
}
.appUnpaidFooterPaddingForPixel2XL{
    padding-top: 58%;
}
.appRecentPaymentFooterPaddingForPixel2XL{
    padding-top: 0%
}
.appGenerateInvoiceFooterPaddingForPixel2XL{
    padding-top: 0%;
}
.appContainerTrackTraceFooterPaddingForPixel2XL{
    padding-top: 0%;
}
.appMumbaiBodyHeight{
    height: 56vh !important;
}
.appMumbaiMarginBottom{
    margin-bottom: 0px !important;
}
.appICDBodyHeight{
    height: 56vh !important;
}
.appICDMarginBottom{
    margin-bottom: 0px !important;
}
.appTariffFontSizeForTab{
    font-size: 11pt !important;
}
.appTariffCopyRightAlignmentSizeForTab{
    padding-top: 0% !important;
    font-size: 12pt !important;
}
/*----------------------------------------------------------------------------------------------------------------------
*/   
}

/* 
  ##Device = iPad=1024*768 (Landscape)
  ##Screen = B/w the width of 600px to 800px & the height of 1024px to 1366px
*/ 
@media only screen and (width: 1024px) and (height: 768px)
{    
    
/*------------------------------App HomeScreen and Login----------------------------------------------------------------------*/
    .appContainerMaxWidth{
        max-width: 1024px;
    }
    .appindexLoginBtnForTab2{
        height: 5vh !important;
    }
    .appLoginCloseButtonforTab2{
        font-size: 2.5rem !important;
    }
    .appKerryImgForTab2{
        width: 199% !important;
    }
    .appTarifTitleAlignmentForTab2{
       height: 7%;
    }
    .sliderHeader{
        /*height: 130vh;*/
        padding-top: 0px !important;
    }
    .appWrapper{
        display: flex !important;
        align-items: center !important;
        flex-direction: column !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 100% !important;
        padding: 0px !important;
        /*                background: rgba(4, 40, 68, 0.85);*/
    }
    /*Registration Details*/
    #appRegistrationAlignment{
        padding-top: 0%;
        margin-left: 0% !important;
        width: 100% !important;
        top: 18% !important;
    }
    .msgBoxContent{
        overflow: auto;
    }
    .appWizard-containerForTab{
        width: 100% !important;
        overflow: auto;
        height: 540px !important;
        margin-left: 41% !important;
    }
    .appForm-group{
        margin: 5px 0 0 0!important;
    }
    .appWizard-cardForTab{
        height: 540px !important;
    }  
    .appPaymentInvoiceFooterBlockPadding{
        padding-top: 4%;
    }
    .appPaidInvoiceFooterBlockPadding{
        padding-top: 0%;
    }
    .appUnPaidInvoiceFooterBlockPadding{
        padding-top: 3%;
    }    
    .appGenerateInvoiceFooterBlockPadding{
        padding-top: 0%;
    }    
    .appBusinessRegistrationPaddingForTab2{
        padding-left: 15% !important;
    }
    .appPaidBodyHeightSizeForGalaxyNote3{
        height: 64vh !important;
    }
    .appRegistrationDetailsTitleAlignment{
        /*padding-left: 15%;*/
    }
    #paymentHdrAddr{    
    height: 44px !important;
    overflow: hidden;
    }   
    .appRegisterFormCloseBtn{
        left: 23% !important;
    }
    .appWizardNavigationHide{
        display: none !important;
    }
    .appRegistrationDetailsAlignment{
        width: 100% !important;
    }
    .appRegistrationDetailsAlignment> .form-group > .icon-addon > .multiselect-native-select > .btn-group{
    width: 100% !important;
    }    
    .appBusinessRegistrationWidth{
        width: 93% !important;
    }
    #busiPartnerDtlTbl_wrapper{
        left: 3%;
        width: 90%;
        right: 0%;
    }
    .appBusinessRegistrationTableAlignment{
        height: 8vh;
    }
    /*-----------------------*/ 
    .appContainer{
        width: 100% !important;
        padding-right: 0px !important;
        padding-left: 0px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .carousel-inner img {
        width: 100% !important;
        height: 100% !important;
    }
    /*.carousel-item {
       height: 60vh !important;
    }*/
    /*.carousel-inner{
        height: 60vh !important;
    }*/
    .carousel-inner > .carousel-item {
        height: 46vh !important;
    }
    .carousel-inner > .carousel-item > img {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        -webkit-transform: translate(-50%, -50%) !important;
        -ms-transform: translate(-50%, -50%) !important;
        transform: translate(-50%, -50%) !important;
        max-height: 800px !important;
        border-radius: 8px;
        object-fit: cover;
    }
    /*.appImgSpec{
        width: 600px !important;
        height: 300px !important;
    } */
    .kerryLogo{
        background-color: white !important;
        width: 100% !important; 
        margin-top: 11px !important;
    }
    .firstMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .firstMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .secondMenu{
        background-color: #FFFFFF;
        transition: all 0.2s ease;
    }
    .secondMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .thirdMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .thirdMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .fourthMenu{
        background-color: #FFFFFF;
        transition: all 0.5s ease;
    }
    .fourthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black; */
    }
    .fifthMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .fifthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .sixthMenu{
        background-color: #FFFFFF;
        transition: all 0.2s ease;
    }
    .sixthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .seventhMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .seventhMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .textCenter{
        display: inline !important;
        padding-left: 30%;
        vertical-align: bottom;
    }
    .firstDirectionCenter{
        display: inline !important;
        vertical-align: bottom;
        position: relative;
        float: left;
        top: 31%;
        left: 5%;
    }
    .secondDirectionCenter{
        display: inline !important;
        vertical-align: bottom;
        position: relative;
        float: right;
        top: 31%;
        right: 5%;
    }
    .linkDiv{
        cursor: pointer !important;
        text-align: inherit !important;
        /*font-family: cursive !important;*/
        font-family: popinsMedium !important;
        color: #3366cc !important;
        /*font-size: 21pt !important;*/
        font-size: 25pt !important;
        height: 130px !important;
        padding-left: 0px !important;
        border-radius: 5px;
        padding-top: 3%;
        /*background-color: #254f8c !important;*/
    }
    .linkDiv:hover {
        /*    transform: scale(1.04);  (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
        color: floralwhite !important;
        background-color: #f15a2f !important;
    }
    .appCol-sm-6{
        height: 0px !important;
        border-bottom: 0.5px solid #3c8dbc !important;
    }
    .appCol-sm-6ForTab{
        height: 0px !important;
        border-bottom: 0.5px solid #3c8dbc !important;
    }
    .appFontSizeForTab{
        font-size: 13pt !important;
    }
    .appLoginBlockAlignmentForTab{
        width: 110% !important;
        height: 80vh;
    }
    .appLoginBlockDetailsTitleForTab{
        font-size: 4rem;
    }
    .appLoginDetailsBlockHeightAlignmentForTab{
        height: 80vh;
    }
    .appLoginBlockFontSizeAlignmentForTab{
        font-size: 26px !important;
    }
    .appLoginInputFontSizeForTab{
        font-size: 3rem !important;
        padding-top: 35px;
    }
    .appLoginBlockLoginFontSizeAlignmentForTab{
        font-size: 2rem !important;
    }
    .appLoginConditionsForGalaxyNote3{
        font-size: 1.9em !important;
    }
    .appLoginCopyRightForTab{
        font-size: 14px !important;
        padding-top: 9%;   
    }
    .appRow{
        display: -ms-flexbox !important;
        display: block !important;
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        margin-right: -15px !important;
        margin-left: -15px !important;
    }
    /*.hideForAppMenu{
        display: none;
    }*/
    .imgForAppMenu{
        display: inline-block !important;
        position: relative !important;
        top: 8px !important;
        left: 23%;
    }
    /*.linkDiv:hover > .hideForWeb{
      animation: shake 0.8s;
      animation-iteration-count: 2;
    }*/
    .toRemoveLineBreak > br{
        display: none;
    }
    @keyframes shake {
        0% { transform: translate(1px, 1px) rotate(0deg); }
        10% { transform: translate(-1px, -2px) rotate(-1deg); }
        20% { transform: translate(-3px, 0px) rotate(1deg); }
        30% { transform: translate(3px, 2px) rotate(0deg); }
        40% { transform: translate(1px, -1px) rotate(1deg); }
        50% { transform: translate(-1px, 2px) rotate(-1deg); }
        60% { transform: translate(-3px, 1px) rotate(0deg); }
        70% { transform: translate(3px, 1px) rotate(-1deg); }
        80% { transform: translate(-1px, -1px) rotate(1deg); }
        90% { transform: translate(1px, 2px) rotate(0deg); }
        100% { transform: translate(1px, -2px) rotate(-1deg); }
    }
    /*@keyframes shake {
      0% { transform: translate(3px, 3px) rotate(0deg); }
      10% { transform: translate(-2px, -3px) rotate(-1deg); }
      20% { transform: translate(-4px, 1px) rotate(1deg); }
      30% { transform: translate(3px, 2px) rotate(0deg); }
      40% { transform: translate(1px, -1px) rotate(1deg); }
      50% { transform: translate(-1px, 2px) rotate(-1deg); }
      60% { transform: translate(-3px, 1px) rotate(0deg); }
      70% { transform: translate(3px, 1px) rotate(-1deg); }
      80% { transform: translate(-1px, -1px) rotate(1deg); }
      90% { transform: translate(1px, 2px) rotate(0deg); }
      100% { transform: translate(3px, -4px) rotate(-1deg); }
    }*/
    .appMenuContainer{
        width: 100% !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        max-width: 1024px !important;
    }
    .footerClass{
        padding-top: 0rem !important;
        padding-bottom: 0rem !important;
    }
    .appmodal-dialog{
        margin: 0rem !important;
        bottom: 0px;
    }
    .appLoginPageWrapper{
        padding: 12px !important;
    }
    .appLoginFirstSizeWidth{
        width: 34% !important;
    }      

/*------------------------------App inside menu----------------------------------------------------------------------*/

/*.col-sm-12{
    display: block !important;
}*/
.appPaymentTitle{
    display: contents !important;
}
.col-sm-2{
    display: none !important;
}
.appPaymentTitleStartPadding{
   padding-left: 2%;
}
.appKerryPaymentTitle{
    display: contents !important;
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-left: 15px;
    
}
.appPaymentTitleHideForWeb{
    display: inline-block !important;
    position: relative !important;
    top: 4px !important;
    padding-left: 31%;
}
.webPaymentTitleHideForApp{
    display: none !important;
}
.appPaymentTitleConsigneeForTab{
    max-width: 100% !important;
    height: 5.25vh;
}
.appPaymentTitleWelcomeConsignee{
    width: 80% !important;
}
.appPaymentTitleConsigneePadding{
    padding-right: 69%;
    font-size: 1.05rem !important;
}
.appPaymentButtonSize{
    font-size: 1.175rem !important;
}
.appPaymentCenterAlign{
    padding-left: 3%;
}
.appColWidthForCol12InTab{
    flex: 0 0 100% !important;
    max-width: 100% !important;
}
.appColAlignmentForContainerCol12InTab{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 15% !important;
}
.appColAlignmentForTariffCol12InTab{
    flex: 0 0 100% !important;
    width: 100% !important;
}
.appTariffDetailsSelectPaddingForTab{
    padding-right: 51% !important;
}
.appPaymentFooterBlockFontSizeForTab{
    font-size: 12pt !important;   
}
.appRecentPaymentFooterBlockFontSizeForTab2{
    padding-top: 0% !important;
}
.appGenerateInvoiceFooterBlockFontSizeForTab2{
    padding-top: 0% !important;
}
.appCopyRightForTab{
    padding-top: 1% !important;
    font-size: 12pt !important;
}
.appePaymentFirstDivAlignment{
    height: 15vh !important;
}
.appePaymentThirdDivAlignment{
    height: 31vh !important;
}
.appUnPaidFirstDivAlignment{
    height: 15vh !important;
}
.appGenerateInvoiceFirstDivAlignment{
    height: 17vh !important;
}
.appPaymentInvoiceNoField{
    width: 40% !important;
}
.appModalContentForTab{
    width: 130% !important;
}
.appContainerGetDetailsForTab{
    width: 100% !important;
}
.appPaymentSearchInvoiceNo{
    width: 60% !important;
}
.appEInvoiceTransType{
    width: 293px !important;
}
.navbar-appTitleBackground{
    background-color: floralwhite !important;
}
.msgBox{    
    width: 383px !important;
}
.appContainerandFooterAlignment {
    height: 610px !important;
    overflow: auto;
}
.appNavBar-BrandInContainer{    
    padding-left: 9% !important;
}
.appContainerSubTitleHideForWeb{
    display: block !important;
    position: relative !important;
}
.appTariffTitle{
    padding-left: 0% !important;
    padding-top: 3% !important;
}
.tariffPaymentButtonSize{
    font-size: 1.675rem !important;
}
.appTariffDropDown{
    padding: 0px !important;
}
#appTariffFontColor{
    color: white !important;
}
#appTariffFontColor:hover{
    color: #004085 !important;
}
.appTariffSubTitleAlignmentForTab2{
    font-size: 19pt !important;
}
.appMumbaiCFSPadding{
    padding-top: 1px !important;
}
.appICDCFSPadding{
    padding-top: 1px !important;
}
.appPaymentHeightForPixel2XL{
    height: 36.5vh !important;
}
.appPaidFooterPaddingForPixel2XL{
    padding-top: 0%;
}
.appUnpaidFooterPaddingForPixel2XL{
    padding-top: 27%;
}
.appRecentPaymentFooterPaddingForPixel2XL{
    padding-top: 0%
}
.appGenerateInvoiceFooterPaddingForPixel2XL{
    padding-top: 0%;
}
.appContainerTrackTraceFooterPaddingForPixel2XL{
    padding-top: 0%;
}
.containerImgAdjustPadding{
    padding-top: 2% !important;
}
.appContainerTitleSizeForTab2{
    font-size: 1.50rem !important;
}
.appMumbaiBodyHeight{
    height: 68vh !important;
}
.appMumbaiMarginBottom{
    margin-bottom: 0px !important;
}
.appICDBodyHeight{
    height: 68vh !important;
}
.appICDMarginBottom{
    margin-bottom: 0px !important;
}
.appTariffFontSizeForTab{
    font-size: 11pt !important;
}
.appTariffCopyRightAlignmentSizeForTab{
    padding-top: 0% !important;
    font-size: 12pt !important;
}
/*----------------------------------------------------------------------------------------------------------------------
*/
}



/* 
  ##Device = iPad Pro(1366 & 1024) (Landscape)
  ##Screen = B/w the width of 1366px & the height of 1024px
*/
@media only screen and (width: 1366px) and (height: 1024px)
{    
    
/*------------------------------App HomeScreen and Login----------------------------------------------------------------------*/
    .appContainerMaxWidth{
        max-width: 1366px;
    }
    .appindexLoginBtnForTab2{
        height: 5vh !important;
    }
    .appLoginCloseButtonforTab2{
        font-size: 2.5rem !important;
    }
    .appKerryImgForTab2{
        width: 199% !important;
    }
    .appTarifTitleAlignmentForTab2{
       height: 8%;
    }
    .sliderHeader{
        /*height: 130vh;*/
        padding-top: 0px !important;
    }
    .appWrapper{
        display: flex !important;
        align-items: center !important;
        flex-direction: column !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 100% !important;
        padding: 0px !important;
        /*                background: rgba(4, 40, 68, 0.85);*/
    }
    /*Registration Details*/
    #appRegistrationAlignment{
        padding-top: 0%;
        margin-left: 0% !important;
        width: 100% !important;
        top: 23% !important;
    }
    .msgBoxContent{
        overflow: auto;
    }
    .appWizard-containerForTab{
        width: 100% !important;
        overflow: auto;
        height: 540px !important;
        margin-left: 41% !important;
    }
    .appForm-group{
        margin: 5px 0 0 0!important;
    }
    .appWizard-cardForTab{
        height: 540px !important;
    }  
    .appPaymentInvoiceFooterBlockPadding{
        padding-top: 4%;
    }
    .appPaidInvoiceFooterBlockPadding{
        padding-top: 3%;
    }
    .appUnPaidInvoiceFooterBlockPadding{
        padding-top: 3%;
    }    
    .appGenerateInvoiceFooterBlockPadding{
        padding-top: 0%;
    }    
    .appBusinessRegistrationPaddingForTab2{
        padding-left: 15% !important;
    } 
    .appRegistrationDetailsTitleAlignment{
        /*padding-left: 15%;*/
    }
    #paymentHdrAddr{    
    height: 44px !important;
    overflow: hidden;
    }   
    .appRegisterFormCloseBtn{
        left: 23% !important;
    }
    .appWizardNavigationHide{
        display: none !important;
    }
    .appRegistrationDetailsAlignment{
        width: 100% !important;
    }
    .appRegistrationDetailsAlignment> .form-group > .icon-addon > .multiselect-native-select > .btn-group{
    width: 100% !important;
    }    
    .appBusinessRegistrationWidth{
        width: 93% !important;
    }
    #busiPartnerDtlTbl_wrapper{
        left: 3%;
        width: 90%;
        right: 0%;
    }
    .appBusinessRegistrationTableAlignment{
        height: 8vh;
    }
    /*-----------------------*/ 
    .appContainer{
        width: 100% !important;
        padding-right: 0px !important;
        padding-left: 0px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .carousel-inner img {
        width: 100% !important;
        height: 100% !important;
    }
    /*.carousel-item {
       height: 60vh !important;
    }*/
    /*.carousel-inner{
        height: 60vh !important;
    }*/
    .carousel-inner > .carousel-item {
        height: 41vh !important;
    }
    .carousel-inner > .carousel-item > img {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        -webkit-transform: translate(-50%, -50%) !important;
        -ms-transform: translate(-50%, -50%) !important;
        transform: translate(-50%, -50%) !important;
        max-height: 800px !important;
        border-radius: 8px;
        object-fit: cover;
    }
    /*.appImgSpec{
        width: 600px !important;
        height: 300px !important;
    } */
    .kerryLogo{
        background-color: white !important;
        width: 100% !important; 
        margin-top: 11px !important;
    }
    .firstMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .firstMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .secondMenu{
        background-color: #FFFFFF;
        transition: all 0.2s ease;
    }
    .secondMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .thirdMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .thirdMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .fourthMenu{
        background-color: #FFFFFF;
        transition: all 0.5s ease;
    }
    .fourthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black; */
    }
    .fifthMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .fifthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .sixthMenu{
        background-color: #FFFFFF;
        transition: all 0.2s ease;
    }
    .sixthMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .seventhMenu{
        background-color: #F1EDED;
        transition: all 0.2s ease;
    }
    .seventhMenu:hover{
        background-color: #6495ED;
        /*    border: 1px solid black;
            outline-style: solid;
            outline-color: black;    */
    }
    .textCenter{
        display: inline !important;
        padding-left: 30%;
        vertical-align: bottom;
    }
    .firstDirectionCenter{
        display: inline !important;
        vertical-align: bottom;
        position: relative;
        float: left;
        top: 31%;
        left: 5%;
    }
    .secondDirectionCenter{
        display: inline !important;
        vertical-align: bottom;
        position: relative;
        float: right;
        top: 31%;
        right: 5%;
    }
    .linkDiv{
        cursor: pointer !important;
        text-align: inherit !important;
        /*font-family: cursive !important;*/
        font-family: popinsMedium !important;
        color: #3366cc !important;
        /*font-size: 21pt !important;*/
        font-size: 31pt !important;
        height: 133px !important;
        padding-left: 0px !important;
        border-radius: 5px;
        padding-top: 3%;
        /*background-color: #254f8c !important;*/
    }
    .linkDiv:hover {
        /*    transform: scale(1.04);  (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
        color: floralwhite !important;
        background-color: #f15a2f !important;
    }
    .appCol-sm-6{
        height: 0px !important;
        border-bottom: 0.5px solid #3c8dbc !important;
    }
    .appCol-sm-6ForTab{
        height: 0px !important;
        border-bottom: 0.5px solid #3c8dbc !important;
    }
    .appFontSizeForTab{
        font-size: 13pt !important;
    }
    .appLoginBlockAlignmentForTab{
        width: 110% !important;
        height: 74vh;
    }
    .appLoginBlockDetailsTitleForTab{
        font-size: 4rem;
    }
    .appLoginDetailsBlockHeightAlignmentForTab{
        height: 74vh;
    }
    .appLoginBlockFontSizeAlignmentForTab{
        font-size: 26px !important;
    }
    .appLoginInputFontSizeForTab{
        font-size: 3rem !important;
        padding-top: 59px;
    }
    .appLoginBlockLoginFontSizeAlignmentForTab{
        font-size: 2rem !important;
    }
    .appLoginConditionsForGalaxyNote3{
        font-size: 1.9em !important;
    }
    .appLoginCopyRightForTab{
        font-size: 14px !important;
        padding-top: 19%;   
    }
    .appRow{
        display: -ms-flexbox !important;
        display: block !important;
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        margin-right: -15px !important;
        margin-left: -15px !important;
    }
    /*.hideForAppMenu{
        display: none;
    }*/
    .imgForAppMenu{
        display: inline-block !important;
        position: relative !important;
        top: 8px !important;
        left: 23%;
    }
    /*.linkDiv:hover > .hideForWeb{
      animation: shake 0.8s;
      animation-iteration-count: 2;
    }*/
    .toRemoveLineBreak > br{
        display: none;
    }
    @keyframes shake {
        0% { transform: translate(1px, 1px) rotate(0deg); }
        10% { transform: translate(-1px, -2px) rotate(-1deg); }
        20% { transform: translate(-3px, 0px) rotate(1deg); }
        30% { transform: translate(3px, 2px) rotate(0deg); }
        40% { transform: translate(1px, -1px) rotate(1deg); }
        50% { transform: translate(-1px, 2px) rotate(-1deg); }
        60% { transform: translate(-3px, 1px) rotate(0deg); }
        70% { transform: translate(3px, 1px) rotate(-1deg); }
        80% { transform: translate(-1px, -1px) rotate(1deg); }
        90% { transform: translate(1px, 2px) rotate(0deg); }
        100% { transform: translate(1px, -2px) rotate(-1deg); }
    }
    /*@keyframes shake {
      0% { transform: translate(3px, 3px) rotate(0deg); }
      10% { transform: translate(-2px, -3px) rotate(-1deg); }
      20% { transform: translate(-4px, 1px) rotate(1deg); }
      30% { transform: translate(3px, 2px) rotate(0deg); }
      40% { transform: translate(1px, -1px) rotate(1deg); }
      50% { transform: translate(-1px, 2px) rotate(-1deg); }
      60% { transform: translate(-3px, 1px) rotate(0deg); }
      70% { transform: translate(3px, 1px) rotate(-1deg); }
      80% { transform: translate(-1px, -1px) rotate(1deg); }
      90% { transform: translate(1px, 2px) rotate(0deg); }
      100% { transform: translate(3px, -4px) rotate(-1deg); }
    }*/
    .appMenuContainer{
        width: 100% !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        max-width: 1366px !important;
    }
    .footerClass{
        padding-top: 0rem !important;
        padding-bottom: 0rem !important;
    }
    .appmodal-dialog{
        margin: 0rem !important;
        bottom: 89px;
    }
    .appLoginPageWrapper{
        padding: 12px !important;
    }
    .appLoginFirstSizeWidth{
        width: 34% !important;
    }      

/*------------------------------App inside menu----------------------------------------------------------------------*/

/*.col-sm-12{
    display: block !important;
}*/
.appPaymentTitle{
    display: contents !important;
}
.col-sm-2{
    display: none !important;
}
.appPaymentTitleStartPadding{
   padding-left: 2%;
}
.appKerryPaymentTitle{
    display: contents !important;
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-left: 15px;
    
}
.appPaymentTitleHideForWeb{
    display: inline-block !important;
    position: relative !important;
    top: 4px !important;
    padding-left: 37%;
}
.webPaymentTitleHideForApp{
    display: none !important;
}
.appPaymentTitleConsigneeForTab{
    max-width: 100% !important;
    height: 4vh;
}
.appPaymentTitleWelcomeConsignee{
    width: 80% !important;
}
.appPaymentTitleConsigneePadding{
    padding-right: 69%;
    font-size: 1.35rem !important;
}
.appPaymentButtonSize{
    font-size: 1.175rem !important;
}
.appPaymentCenterAlign{
    padding-left: 3%;
}
.appColWidthForCol12InTab{
    flex: 0 0 100% !important;
    max-width: 100% !important;
}
.appColAlignmentForContainerCol12InTab{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 15% !important;
}
.appColAlignmentForTariffCol12InTab{
    flex: 0 0 100% !important;
    width: 100% !important;
}
.appTariffDetailsSelectPaddingForTab{
    padding-right: 51% !important;
}
.appPaymentFooterBlockFontSizeForTab{
    font-size: 12pt !important;   
}
.appRecentPaymentFooterBlockFontSizeForTab2{
    padding-top: 3% !important;
}
.appGenerateInvoiceFooterBlockFontSizeForTab2{
    padding-top: 21% !important;
}
.appCopyRightForTab{
    padding-top: 13% !important;
    font-size: 12pt !important;
}
.appePaymentFirstDivAlignment{
    height: 11vh !important;
}
.appePaymentThirdDivAlignment{
    height: 22vh !important;
}
.appUnPaidFirstDivAlignment{
    height: 11vh !important;
}
.appGenerateInvoiceFirstDivAlignment{
    height: 14vh !important;
}
.appPaymentInvoiceNoField{
    width: 40% !important;
}
.appModalContentForTab{
    width: 130% !important;
}
.appContainerGetDetailsForTab{
    width: 100% !important;
}
.appPaymentSearchInvoiceNo{
    width: 60% !important;
}
.appEInvoiceTransType{
    width: 293px !important;
}
.navbar-appTitleBackground{
    background-color: floralwhite !important;
}
.msgBox{    
    width: 383px !important;
}
.appContainerSubTitleHideForWeb{
    display: block !important;
    position: relative !important;
}
.appTariffTitle{
    padding-left: 0% !important;
    padding-top: 3% !important;
}
.tariffPaymentButtonSize{
    font-size: 1.675rem !important;
}
.appTariffDropDown{
    padding: 0px !important;
}
#appTariffFontColor{
    color: white !important;
}
#appTariffFontColor:hover{
    color: #004085 !important;
}
.appTariffSubTitleAlignmentForTab2{
    font-size: 19pt !important;
}
.appMumbaiCFSPadding{
    padding-top: 1px !important;
}
.appICDCFSPadding{
    padding-top: 1px !important;
}
.appPaymentHeightForPixel2XL{
    height: 36.5vh !important;
}
.appPaidFooterPaddingForPixel2XL{
    padding-top: 0%;
}
.appUnpaidFooterPaddingForPixel2XL{
    padding-top: 38%;
}
.appRecentPaymentFooterPaddingForPixel2XL{
    padding-top: 0%
}
.appContainerandFooterAlignment {
    height: 860px !important;
    overflow: auto;
}
.appNavBar-BrandInContainer{    
    padding-left: 17% !important;
}
.appGenerateInvoiceFooterPaddingForPixel2XL{
    padding-top: 0%;
}
.appContainerTrackTraceFooterPaddingForPixel2XL{
    padding-top: 0%;
}
.appContainerTitleSizeForTab2{
    font-size: 1.50rem !important;
}
.appColMaxSize{
    width: 100% !important;
}
.appMumbaiBodyHeight{
    height: 72vh !important;
}
.appMumbaiMarginBottom{
    margin-bottom: 0px !important;
}
.appICDBodyHeight{
    height: 72vh !important;
}
.appICDMarginBottom{
    margin-bottom: 0px !important;
}
.appTariffFontSizeForTab{
    font-size: 11pt !important;
}
.appTariffCopyRightAlignmentSizeForTab{
    padding-top: 0% !important;
    font-size: 12pt !important;
}
/*----------------------------------------------------------------------------------------------------------------------
*/
}