html {
    width: 98%;
    /*width: calc(89vw + (100 - 89) * ((100vw - 300px)/(1900 - 300)));*/
}
@media only screen and (min-height:768px) {
    html {
        height: 100% !important;
    }
}

@media only screen and (max-height:767px) {
    html {
        height: auto !important;
    }
}

body {
    /*background-color: #DFC798;*/
    background-image: linear-gradient(#65532E 0%, #CAA55B 7%, #DEC695 12%, #F2E6CD 90%);
    /*background-image: linear-gradient(#65532E 0%, #CAA55B 7%, #DEC695 12%, #F2E6CD 100%);*/
    background-repeat: no-repeat;
    background-attachment: fixed;
    /*background-image: linear-gradient(#B38742, #DFC798, #DFC798 25%);*/
}

* {
    direction: ltr;
    font-family: 'Roboto' !important;
    /*font-family: 'Crimson Text', 'Times New Roman' !important;*/
    font-size: calc(10px + (20 - 10) * ((80vw - 300px) / (1900 - 300)));
    /*font-size: calc(8px + (16 - 8) * ((80vw - 300px) / (1900 - 300)));*/
    /*font-size: 20px;*/
    /*font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1900 - 300)));*/
    line-height: calc(1.3em + (1.5 - 1.3) * ((100vw - 300px)/(1900 - 300)));
}

@media only screen and (min-width:768px), (min-device-width:768px) {
    .col-header-xs {
        display: none;
    }

    .col-header-lg {
        display: block;
    }

    /*#lnkImgLogoToggle {
        pointer-events: none;
    }*/
}

@media only screen and (max-width:767px), (max-device-width:767px) {
    .col-header-xs {
        display: block;
        border-bottom: 3px solid #FFFFFF;
        /*height: 100px;*/
        /*min-height: 114px;
        max-height: 119px;*/
    }
    .hUserFullName{
        margin-top:10px !important;
    }
    .hUserFullName-xs {
        margin: 5px 0 0 5px;
    }

    .hMerchantTradeName-xs {
        /*margin: 36px 0;*/
        /* Yazan 2020-12-03 */
        padding: 0 0 5px 35px;
        /*padding-bottom: 5px;*/
        /* ---------------- */
    }

    .col-header-lg {
        display: none;
    }

    /*#lnkImgLogoToggle {
        pointer-events: all;
    }*/
}

.spanToggleMenu {
    top: 145px !important;
    position: fixed;
    /*position: absolute;*/
    margin-left: 238px;
    z-index: 2;
    transition: margin-left .5s, width .5s;
    color: #1A1A1A !important;
}
@media only screen and (max-width:767px), (max-device-width:767px) {
    .spanToggleMenu {
        top: 254px !important;
        /*top: 284px !important;*/
        /*top: 190px !important;*/
        left: -12px;
    }
}

.spanToggleMenu > span > i.glyphicon {
    color: #1A1A1A !important;
    font-size: calc(13px + (26 - 13) * ((80vw - 300px) / (1900 - 300)));
    /*font-size: calc(11px + (22 - 11) * ((80vw - 300px) / (1900 - 300)));*/
    /*font-size: 20px;*/
}

    .navbar-fixed-top, .col-header {
        background-image: linear-gradient(to right, #000000, #545454);
        background-repeat: no-repeat;
    }
.col-header, .col-header-xs {
    z-index: 2;
}
@media only screen and (min-width:768px), (min-device-width:768px) {
    .col-header, .col-header-xs {
        z-index: 2;
    }
}
    .col-header {
        height:80px;
        /*height:84px;*/
        /*height: 104px;*/
        /*height: 80px;*/
        /*height: 65px;*/
    }

.navbar-fixed-top .col-xs-3 {
    margin-left: 0;
    padding-left: 0;
}

    .navbar-fixed-top .col-xs-3 div {
        margin-left: 15px;
    }

.divHeaderBlock, .divLogo {
    display: inline-block;
}

.divHeaderBlock {
    margin-left: 5px;
    /*margin-left: 0;*/
}

.divLogo img {
    margin-top: 5px;
    margin-left: 50px;
    /*margin-left: 105px;*/
    /*margin-left: 180px;*/
    height: 92px;
    width: 100px;
    /*margin-top: -26px;*/
    /*margin-top: -36px;*/
    /*margin-top: -45px;*/
}
/*@media only screen and (min-width:1487px) and (min-device-width:1487px) {
    .divLogo img {
        margin-left: 0;
        height: 100px;
        width: 100px;
        margin-top: 20px;
    }
}*/
@media only screen and (max-width:1024px), (max-device-width:1024px) {
    /*@media only screen and (max-width:767px), (max-device-width:767px) {*/
    .divLogo img {
        height: 83px;
        width: 90px;
    }
}

@media only screen and (min-width:415px) and (max-width:1486px), (min-device-width:415px) and (max-device-width:1486px) {
    .divLogo img {
        /*margin-left: 70px;*/
        /*margin-left: 160px;*/
        /*margin-top: -26px;*/
        /*margin-top: -36px;*/
        /*margin-top: -45px;*/
    }
}

@media only screen and (min-width:361px) and (max-width:414px), (min-device-width:361px) and (max-device-width:414px) {
    .divLogo img {
        margin-left: 135px;
        /*margin-left: 130px;*/
        /*margin-top: -26px;*/
        /*margin-top: -35px;*/
    }
}

@media only screen and (max-width:360px), (max-device-width:360px) {
    .divLogo img {
        margin-left: 135px;
        /*margin-left: 145px;*/
        /*margin-left: 100px;*/
        /*margin-top: -26px;*/
        /*margin-top: -36px;*/
        /*margin-top: -45px;*/
        /*margin-top: -30px;*/
    }
}

.divHeaderBlock div h4 {
    margin: 5px 0 0;
    min-width: 170px;
}

.divHeaderBlock div {
/*.divLocalization, .divHeaderBlock div {*/
    margin-left: 10px !important;
}

    .divHeaderBlock div p {
        margin: 0;
    }

.hUserFullName, .hUserFullName-xs, .lnkLogout {
    color: #f0f1f3;
    margin-bottom: 0;
}
    .lnkLogout:hover {
        color: #f0f1f3;
        text-decoration:none;
    }
    .lnkLogout:focus{
        color: #FFFFFF;
        text-decoration: none;
    }
    @media only screen and (min-width:1401px), (min-device-width:1401px) {
        .hUserFullName {
        margin-left: 10px;
    }
}
/*@media only screen and (min-width:1061px) and (max-width:1250px), (min-device-width:1061px) and (max-device-width:1250px) {*/
@media only screen and (min-width:1061px) and (max-width:1400px), (min-device-width:1061px) and (max-device-width:1400px) {
    .hUserFullName {
        margin-left: 50px;
    }
}

@media only screen and (min-width:901px) and (max-width:1060px), (min-device-width:901px) and (max-device-width:1060px) {
    .hUserFullName {
        margin-left: 75px;
    }
}

@media only screen and (min-width:768px) and (max-width:900px), (min-device-width:768px) and (max-device-width:900px) {
    .hUserFullName {
        margin-left: 90px;
    }
}
/* Yazan 2020-12-06 */
/*@media only screen and (min-width:1200px) and (max-width:1399px), (min-device-width:1200px) and (max-device-width:1399px) {
    .hMerchantTradeName {
        padding-left: calc(80px + (160 - 80) * ((80vw - 300px) / (1900 - 300)));
    }
}*/
/* ---------------- */
/* Yazan 2020-12-03 */
/*@media only screen and (min-width:1400px), (min-device-width:1400px){
    .hMerchantTradeName {
        padding-left: calc(-190px + (380 + 190) * ((80vw - 300px) / (1900 - 300)));
    }
}*/
/* ---------------- */
.hMerchantTradeName {
    margin: 24px 0;
    /*margin: 0;*/
}

.divLocalization {
    z-index:3;
    margin: 5px 0 0 -70px;
    /*margin: 10px 0 0 -70px;*/
    /*margin: 10px 0 0 0px;*/
    /*margin: 10px 0 0 45px;*/
    /*margin-top: 10px;*/
    /*margin-top: 14px;*/
    position: absolute;
    /*margin-top: 10px;
    position: relative;*/
}
    @media only screen and (min-width: 992px) and (max-width: 1199px), (min-device-width: 992px) and (max-device-width: 1199px) {
        .divLocalization {
        /*margin-left: 60px;*/
        /*margin-left: 40px;*/
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (min-device-width: 768px) and (max-device-width: 991px){
    .divLocalization{
        /*margin-left:60px;*/
    }
}
@media only screen and (max-width: 767px), (max-device-width: 767px) {
    .divLocalization {
        margin-left:9px;
    }
}
@media only screen and (min-width:320px) and (max-width:767px) {
    .divLogout {
        /*margin-top: 0 !important;*/
        /*margin-top: 5px !important;*/
        /*margin-top: 17px !important;*/
    }
    .hUserFullName {
        margin-top: 17px !important;
        /*margin-top: 21px !important;*/
        /*margin-top: 41px !important;*/
        /*margin-top: 17px !important;*/
    }
}

@media only screen and (min-device-width:320px) {
    .divLogout {
        /*margin-top: 0;*/
        /*margin-top: 5px;*/
        /*margin-top: 10px;*/
    }
    .hUserFullName {
        margin-top: 10px !important;
        /*margin-top: 14px !important;*/
        /*margin-top: 34px !important;*/
        /*margin-top: 10px !important;*/
    }
}

@media only screen and (min-width:320px), (min-device-width:320px) {
    /*@media only screen and (min-device-width:320px) {*/
    .divLogout {
        margin-top: 5px;
        /*margin-top: 0;*/
    }
}

@media only screen and (min-width: 1557px), (min-device-width: 1557px){
    .divLocalization > span {
        margin-top: -1.25px !important;
    }
}
.divLocalization > span {
    margin: 0;
    /*margin: 4px 0;*/
    color: #FFFFFF;
    display: inline-block;
}
    .divLocalization > span > i.fa, .divLogout > span > i.fa {
        color: #FFFFFF;
        display: inline-block;
        margin: 0 0 0 3px;
        /*margin: 0 0 0 32px;*/
        /*margin: 0 0 0 30px;*/
        /*margin: 3px 0 0 30px;*/
        font-size: calc(22px + (28 - 22) * ((80vw - 300px) / (1900 - 300))) !important;
        /*font-size: calc(22px + (28 - 22) * ((80vw - 300px) / (1900 - 300))) !important;*/
        /*font-size: calc(13px + (26 - 13) * ((80vw - 300px) / (1900 - 300))) !important;*/
        /*font-size: 28px !important;*/
        vertical-align: middle;
    }
    .divLocalization > span > i.fa {
        vertical-align: super !important;
    }
    .divLocalization > span > i.fa, .divLogout > span > i.fa {
        /*margin-left: 12px;*/
        /*margin-left: 32px;*/
    }
.btnLocalization {
    background-color: transparent;
    min-width: 80px;
    margin-left: -3px !important;
    /*margin-left: 17px !important;*/
    /*margin-left: 50px !important;*/
    /*margin-left: 44px !important;*/
    /*margin-left: 40px !important;*/
    /*margin-left: 50px !important;*/
    padding: 0 12px 6px 0;
}
    .btnLocalization:active{
        outline:none !important;
    }
    /*@media only screen and (min-width:1950px), (min-device-width:1950px) {
    .divLocalization .form-inline button .btnLocalization {
        margin-left: 45px !important;
    }
}*/
    @media only screen and (max-width: 360px), (max-device-width:460px) {
        .form-inline .btnLocalization {
        margin-left: 26px !important;
        /*margin-left: 25px !important;*/
        /*margin-left: 10px !important;*/
    }

    /*.divLocalization > span > i.fa, .divLogout > span > i.fa {
        margin-left: 0;
    }*/

        .divLocalization > span > i.fa, .divLogout > span > i.fa {
            margin-left: 2px;
        }

    .lnkLogout, .hUserFullName, .hUserFullName-xs {
        margin-left: 50px !important;
        /*margin-left: 35px !important;*/
    }
}
.divLogout > span {
    position: absolute;
    margin-left: -38px !important;
    /*margin-left: 0 !important;*/
    margin-right: 50px !important;
    /*margin-left: calc(2px + (10 - 2) * ((100vw - 300px)/(1900 - 300))) !important;*/
    cursor: pointer;
    z-index: -1;
}
@media only screen and (max-width: 767px), (max-device-width:767px) {
    .divLogout > span {
        margin-left: 0 !important;
    }
}
#UL-Localization > li > a {
    padding-top: 0;
}
        #UL-Localization > li > a > u {
            /*float: left;*/
            text-decoration: none;
            margin-top: 6px;
            color: #1A1A1A;
            font-weight: 900;
        }
.imgFlag {
    width: 38px !important;
    height: 25px !important;
    border-radius: 5px !important;
}
.divLogout {
    margin-top: -40px;
    /*margin-top: 10px;*/
}
.lnkLogout {
    margin-right: calc(-10px + (-20 - -10) * ((80vw - 300px)/(1900 - 300)));
    margin-left: calc(8px + (-12 - 8) * ((80vw - 300px)/(1900 - 300))) !important;
    /*color: #f0f1f3;*/
    padding-bottom: 2px;
    /*border-bottom: 1px solid #f0f1f3;*/
    /*margin-left: 75px !important;*/
}

/*@media only screen and (max-width: 360px), (max-device-width:460px) {
    .lnkLogout {
        margin-left: 35px !important;
    }
}*/

@media only screen and (min-width: 361px), (min-device-width:461px) {
    /*.lnkLogout,*/ .hUserFullName, .hUserFullName-xs {
        margin-left: -5px !important;
        /*margin-left: 65px !important;*/
        /*margin-left: 75px;*/
    }
}

.pUserName {
    color: #feff00;
}

.divLeftPane {
    background-color: #cccccc;
    padding: 0;
}

.headerPageTitle {
    color: #2fa597;
    border-bottom: 3px solid #2fa597;
    margin: 95px 15px 0 25px;
}

.container {
    width: 100% !important;
    margin: 0 !important;
    padding-right: 0 !important;
}

.hrHeader {
    border-color: transparent;
    /*border-color: #EFD785;*/
    margin: 0;
    /*margin: 0 0 20px;*/
    /*margin: 0 0 30px;*/
}

.hrFooter {
    border-color: transparent;
    /*border-color: #EFD785;*/
    margin: 70px 0 0px;
}

.noPoinerEvents {
    pointer-events: none;
}
@keyframes jelly {
    from {
        transform: scale(1, 1);
    }

    30% {
        transform: scale(1.25, 0.75);
    }

    40% {
        transform: scale(0.75, 1.25);
    }

    50% {
        transform: scale(1.15, 0.85);
    }

    65% {
        transform: scale(.95, 1.05);
    }

    75% {
        transform: scale(1.05, .95);
    }

    to {
        transform: scale(1, 1);
    }
}

.formGroupBeforeSeperatedMarginBottom {
    margin-bottom: 25px;
}

.hrSeparator {
    border: 0.5px solid gray;
}

.formgroupMarginTop {
    margin-top: 15px !important;
}

.formgroupMarginTopSeparate {
    margin-top: 5px;
}
/*.control-label,*/ .paragPowered, .lblMerLogo, .lblPicCaption/*, .radio-inline*/ {
    /*font-size: 16px !important;*/
    font-size: calc(7px + (14 - 7) * ((80vw - 300px) / (1900 - 300)));
}
.control-label {
    font-size: calc(10px + (20 - 10) * ((80vw - 300px) / (1900 - 300)));
}
.form-control, .control-label, .radio-inline {
    color: #1A1A1A !important;
}

.form-control {
    background-color: transparent !important;
    border-color: #1A1A1A;
    border-radius: 12px;
    /*border-radius: 40px !important;*/
    height: 34px;
    font-size: calc(10px + (20 - 10) * ((80vw - 300px) / (1900 - 300))) !important;
    /*font-size: calc(9px + (18 - 9) * ((80vw - 300px) / (1900 - 300))) !important;*/
    /*font-size: 20px;*/
    /*font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1900 - 300))) !important;*/
    line-height: calc(1.3em + (1.5 - 1.3) * ((100vw - 300px)/(1900 - 300))) !important;
}
textarea.form-control{
    border-radius: 17px;
}
    .form-control:focus {
        border-color: #B38742;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(179,135,66,.6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(179,135,66,.6)
    }

select {
    padding-top: 3px !important;
}

.text-danger {
    color: #AF0000 !important;
    font-size: calc(10px + (20 - 10) * ((80vw - 300px) / (1900 - 300))) !important;
    /*font-size: calc(6px + (12 - 6) * ((80vw - 300px) / (1900 - 300))) !important;*/
    /*font-size: 14px;*/
    font-weight: 600;
}
.validationGeneral {
    font-size: calc(13px + (26 - 13) * ((80vw - 300px) / (1900 - 300))) !important;
    /*font-size: calc(10px + (20 - 10) * ((80vw - 300px) / (1900 - 300))) !important;*/
    /*font-size: calc(8px + (16 - 8) * ((80vw - 300px) / (1900 - 300))) !important;*/
}
::placeholder {
    color: gray !important;
    /*color: #B2b4B7 !important;*/
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: gray !important;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: gray !important;
}

#formRegisterMerchant .form-control:not(#ddlLang), #formRegisterMember .form-control:not(#ddlCountry):not(#ddlCity):not(#ddlArea) {
    /*min-width: 100%;*/
}

#ddlLang {
    max-width: 150px;
}

.noHorizPaddingDir {
    padding-right: 0;
}

select {
    padding: 0 12px !important;
}

i.fa {
    font-family: fontAwesome !important;
}
i.glyphicon {
    font-family: 'Glyphicons Halflings' !important;
}

.rowTitle {
    margin-top: 0;
    /*margin-top: 50px*/
}

/*@media only screen and (max-width:767px) and (max-device-width:767px) {
    .rowTitle {
        margin-top: 30px;
    }
}*/
@media only screen and (max-width:767px), (max-device-width:767px) {
/*@media only screen and (max-width:767px) and (max-device-width:767px) {*/
    .boxForm, .rowTitle {
        margin-top: 0 !important;
    }

    .col-header {
        margin-top: 10px;
        /*margin-top: 48px;*/
        /*margin-top: 62px;*/
        /*margin-top: 66px;*/
        /*margin-top: 34px;*/
        /*margin-top: 10px;*/
        /* Following Still Under Test*/
        position: fixed;
        right: 0;
        left: 0;
    }
    /* Following Still Under Test*/
    #divBody {
        margin-top: 98px;
        /*margin-top:128px;*/
    }
    .lnkLogout {
        /*margin-left: 42px !important;*/
        /*margin-left: 32px !important*/
    }
}
.boxForm > h1 {
    font-size: calc(16px + (32 - 16) * ((80vw - 300px) / (1900 - 300)));
    margin-top: 3px;
    margin-bottom:0;
    /*font-size: calc(14px + (28 - 14) * ((80vw - 300px) / (1900 - 300)));*/
}
.boxForm {
    /*border-top: 3px solid #B38742;*/
    border-radius: 3px;
    padding: 0 5%;
    margin-top: 10px;
}
    /*@media only screen and (max-width:767px) and (max-device-width:767px) {
        .boxForm {
        margin-top: 27px;
    }
}*/
    .boxForm > h1 {
        color: #000000 !important;
    }
    @media only screen and (max-width: 767px), (max-device-width: 767px){
        .boxForm > h1{
            margin-top: 50px;
        }
    }
.boxFooter {
    /*border-bottom: 3px solid #B38742;*/
    border-radius: 3px;
    padding: 0 5% 1px;
}

@media only screen and (max-device-height:823px) {
    #divBody {
        position: relative;
    }

    #divFooterShamiSoft {
        position: fixed;
        /*position: absolute;*/
        /*bottom: 0;*/
    }
}

#divFooterShamiSoft, #divFooterShamiSoftMenu {
    background-color: rgb(255, 255, 255);
    height: 39px;
    padding: 5px 15px;
    /*position: absolute;*/
    bottom: 0;
}
#divFooterShamiSoft {
    position: fixed;
}
div#divFooterShamiSoft > div.divFooterContent > p.paragPowered {
    font-size: calc(10px + (20 - 10) * ((80vw - 300px) / (1900 - 300)));
}
    #divFooterShamiSoftMenu {
        padding-right: 0 !important;
        position: fixed;
        /*position: absolute;*/
        /*position: absolute;*/
        /*bottom: 0;*/
        /*width: 100%;*/
    }
/*@media only screen (max-width:767px), (max-device-width:767px){
    #divFooterShamiSoftMenu{
        bottom:63px;
    }
}*/
.divFooterContent {
    width: fit-content;
    display: inline-block;
}

.paragPowered {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0;
    color: #B38742;
}

#lnkShamiSoftRedirect {
    text-decoration: none;
}

#imgSSFooter {
    width: calc(47px + (94 - 47) * ((100vw - 300px) / (1900 - 300)));
    height: calc(16.5px + (33 - 16.5) * ((100vw - 300px) / (1900 - 300)));
    /*width: 94px;*/
    /*height: 33px;*/
    display: inline-block;
}

.paragPoweredSuffix {
    display: inline-block;
    color: #B38742;
    vertical-align: middle;
    margin-bottom: 0;
}

.headerVersion {
    display: inline-block;
    margin: 0;
}

@media only acreen and (max-width:449px), (max-device-width:449px) {
    .headerVersion {
        display: none !important;
    }
}

.bVersion {
    color: #000000;
}

.uVersion {
    text-decoration: none;
    color: #1A1A1A;
}

h3.subPanelTitle {
    padding: 3px 0;
}

@media only screen and (max-width: 799px) and (min-device-height:701px) and (max-device-height:823px), (max-device-width: 799px) and (min-device-height:701px) and (max-device-height:823px) /*, (min-height:701px) and (max-height:823px)*/ {
    .rowContainer {
        /*height: calc(10px + (163 - 10) * ((148vh - 568px) / (823 - 568)));*/
        height: calc(0px + (132 - 0) * ((148vh - 568px) / (823 - 568)));
        overflow-y: auto;
    }

    .hrFooter {
        margin-top: 25px;
    }
}

@media only screen and (max-width: 799px) and (max-device-height:700px),(max-device-width: 799px) and (max-device-height:700px) /*, (max-height:700px)*/ {
    .rowContainer {
        /*height: calc(10px + (145 - 10) * ((148vh - 568px) / (823 - 568)));*/
        /*height: calc(10px + (174 - 10) * ((148vh - 568px) / (823 - 568)));*/
        height: calc(0px + (80 - 0) * ((148vh - 568px) / (823 - 568)));
        overflow-y: auto;
    }

    .hrFooter {
        margin-top: 25px;
    }
}

#ddlCountry, #ddlCity, #ddlArea, #ddlLang, #ddlGoldKtType, #ddlMember, #ddlMerchant, #ddlList /*, #ddlFilterColumn*/ {
    /*-moz-appearance: none;
    -webkit-appearance: none;
    background: url(../../images/ddlArrow.png) no-repeat 95% transparent;*/
    /*background-size: calc(12px + (24 - 12) * ((80vw - 300px) / (1900 - 300)));*/
}
#ddlCountry, 
#ddlCity, 
#ddlArea, 
#ddlLang, 
#ddlGoldKtType,
#ddlMember, 
#ddlFilterColumn {
    font-size: calc(10px + (20 - 10) * ((80vw - 300px) / (1900 - 300))) !important;
    /*font-size: calc(6px + (12 - 6) * ((80vw - 300px) / (1900 - 300))) !important;*/
    /*font-size: 14px;*/
}
/* -------------------------------------- Filter Controls CSS -------------------------------------- */
    .formGroupFilterMargingTop {
        margin-top: 1.5px !important;
    }
/* ------------------------------------------------------------------------------------------------- */
.formEditableRowMarginTop {
    margin-top: 1.5px !important;
    /*margin-top: 5px !important;*/
}
.divContainer {
    position: relative;
    direction: rtl;
    float: left;
}
.divDate {
    width: 100%;
}
.spanAbsolute {
    position: absolute;
    background-color: #2fa597;
    border-radius: 12px;
    /*border-radius: 40px;*/
    min-width: 70px;
    min-height: 32px;
    z-index: 3;
    color: #f0f1f3 !important;
    vertical-align: middle;
    max-height: 32px;
    margin:1px 0.22px 0 0;
}
.spanAbsolute, .spanAbsolute p, .spanCalendar, .spanCalendar i {
    color: #FFFFFF !important;
    background-color: #B38742;
}
    .spanAbsolute p {
        margin: 5px 0;
        /*margin: 10px 0;*/
        /*margin: 5px 0;*/
        background-color: transparent;
        font-size: calc(10px + (20 - 10) * ((80vw - 300px) / (1900 - 300))) !important;
        /*font-size: calc(7px + (14 - 7) * ((80vw - 300px) / (1900 - 300))) !important;*/
        /*font-size: 16px;*/
    }

    .spanCalendar i {
        margin: 9px 0;
    }

.spanCalendar {
    min-width: 60px;
    z-index: 2;
}

@media only screen and (max-width:767px) and (max-device-width:767px) {
    .spanAbsolute, .spanCalendar {
        min-width: 60px;
    }

        .spanAbsolute p, .spanAbsolute i {
            margin-top: 9px;
        }
}

input[type="date"]::-webkit-inner-spin-button
/*input[type="date"]::-webkit-calendar-picker-indicator*/
/*input[type="date"]::-webkit-calendar-picker-indicator*/ {
    display: none;
    -webkit-appearance: none;
}

.divSpinner {
    margin-top: 25px;
    /*margin-top: 25px !important;*/
    position: relative;
}

    .divSpinner .spinner {
        position: absolute;
        /*bottom: 8px;*/
        bottom: 0;
        left: 90%;
        color: #FFFFFF;
        /*color: black;*/
        font-size: calc(11px + (22 - 11) * ((80vw - 300px) / (1900 - 300))) !important;
        /*font-size: 24px;*/
    }

    @media only screen and (min-width:1144px), (min-device-width:1144px){
        .divSpinner .spinner {
            bottom: 3px;
            left: 80%;
            font-size: calc(9px + (18 - 9) * ((80vw - 300px) / (1900 - 300))) !important;
            /*font-size: 20px;*/
        }
    }

.btnSubmit, .btnReset, .btnButton, .btnBack, .btnSave, .btnSaveAndNew, .btnNew, .btnEdit, #btnSetMember {
    border: 2px outset !important;
    background-color: #000000;
    border-radius: 40px !important;
    min-width: 77px;
    /*min-width: 75px;*/
    /*min-width: 150px;*/
    /*min-width: 120px;*/
    color: #FFFFFF !important;
    font-size: calc(9px + (18 - 9) * ((80vw - 300px) / (1900 - 300))) !important;
    /*font-size: 20px !important;*/
    /*font-size: calc(18px + (22 - 18) * ((100vw - 300px) / (1900 - 300))) !important;*/
    padding: 0 12px !important;
    outline: none !important;
    height: calc(17px + (34 - 17) * ((80vw - 300px) / (1900 - 300))) !important;
    padding: 1px !important;
}
.btnButton {
    font-size: calc(8px + (16 - 8) * ((80vw - 300px) / (1900 - 300))) !important;
    /*font-size: 15px !important;*/
    min-height: calc(17px + (34 - 17) * ((80vw - 300px) / (1900 - 300))) !important;
    /*min-height: 34px;*/
    font-weight: 400;
    padding: 1px !important;
    min-width: 70px !important;
    /*min-width: 77px !important;*/
}
/*.btnReset, .btnBack {
    background-color: #666666;
}*/
.divSubmit, .btnReset, .btnBack, .btnSave, .btnSaveAndNew, .btnNew, .btnEdit, #btnSetMember {
    display: inline-block;
}

.btnReset, .btnBack, .btnSave, .btnSaveAndNew, .btnNew, .divSubmit, .btnEdit, #btnSetMember {
    float: left;
    margin-left: 5px;
}

@media only screen and (max-width:1023px), (max-device-width:1023px) {
    /*@media only screen and (max-width:1143px), (max-device-width:1143px) {*/
    .divSubmit, .btnSubmit, .btnReset, .btnBack, .btnSave, .btnSaveAndNew, .btnNew, .btnEdit, #btnSetMember {
        width: 100%;
        margin-left: 0;
    }
}

.divBtnControls {
    padding: 0;
}

input[type=radio] {
    outline: none !important;
}

.noPaddingControlLabel {
    padding-right: 0 !important;
}

.noPaddingFormControl {
    padding-left: 0 !important;
}

.required:before {
    content: "* ";
    color: #a94442;
}
.requiredNoSpace:before {
    content: "*";
    color: #a94442;
}
.lblSpaceBefore:before {
    content: "\00a0 \00a0 \00a0" !important;
}
/*.lblSpaceBefore:before,*/ .tagCountryName:before, .bVersion:after {
    content: "\00a0 \00a0 \00a0 \00a0" !important;
}
@media only screen and (min-width:593px) and (max-width:608px) {
    .lblJustifyCol {
        padding-left: 0;
    }
}

@media only screen and (max-width:592px), (max-device-width:575px) {
    .lblJustifyCol {
        padding-left: 0;
        margin: 10px 0 7px 0 !important;
    }

    .lblFirst {
        margin: 0 0 7px 0 !important;
    }
}

.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
    margin-left: -20px !important;
}

.divMerchantLangContainer {
    overflow-y: auto;
    height: 413px;
}

.divMerLogoVerticalSeparator {
    margin-top: 34px;
}

.divSSImage {
    position: relative;
    direction: rtl;
}

    .divSSImage span i.fa.fa-times-circle-o {
        position: absolute;
        top: -15px;
        font-size: 24px;
        margin-right: -10px;
        color: #000000;
    }

#imgMerRegForm,
#imgMerPersonalID,
#imgMerAuthorizeLetter {
    object-fit: contain;
    padding: 0 !important;
}
#imgMerRegForm,
#imgMerAuthorizeLetter {
    width: calc(150px + (300 - 150) * ((100vw - 300px) / (1900 - 300))) !important;
    height: calc(212.5px + (425 - 212.5) * ((100vw - 300px) / (1900 - 300))) !important;
    max-width: unset !important;
    max-height: unset !important;
}
#imgMerPersonalID {
    width: calc(180px + (360 - 180) * ((100vw - 300px) / (1900 - 300))) !important;
    height: calc(75px + (150 - 75) * ((100vw - 300px) / (1900 - 300))) !important;
    max-width: unset !important;
    max-height: unset !important;
}

#imgMerBrStoreImage {
    width: calc(180px + (360 - 180) * ((100vw - 300px) / (1900 - 300))) !important;
    height: calc(75px + (150 - 75) * ((100vw - 300px) / (1900 - 300))) !important;
    max-width: calc(180px + (360 - 180) * ((100vw - 300px) / (1900 - 300))) !important;
    max-height: calc(75px + (150 - 75) * ((100vw - 300px) / (1900 - 300))) !important;
    border: 3px solid #000000 !important;
    border-radius: 12px !important;
    padding: 0 !important;
    object-fit: contain;
}
#MerchantLogo {
    width: calc(150px + (300 - 150) * ((100vw - 300px) / (1900 - 300))) !important;
    height: calc(150px + (300 - 150) * ((100vw - 300px) / (1900 - 300))) !important;
    max-width: calc(150px + (300 - 150) * ((100vw - 300px) / (1900 - 300))) !important;
    max-height: calc(150px + (300 - 150) * ((100vw - 300px) / (1900 - 300))) !important;
    border: 3px solid #000000 !important;
    border-radius: 12px !important;
    padding: 0 !important;
    object-fit: contain;
}
.SSImage:not(#imgBannerPic1):not(#imgBannerPic2):not(#imgBannerPic3) {
    width: 100%;
    height: 75%;
    max-width: calc(141.5px + (283 - 141.5) * ((100vw - 300px) / (1900 - 300)));
    max-height: calc(106.125px + (212.25 - 106.125) * ((100vw - 300px) / (1900 - 300)));
    /*max-width: 283px;
    max-height: 212.25px;*/
    border: 3px solid #000000;
    border-radius: 12px;
    padding: 8px;
}

.lblMerLogo, .lblPicCaption {
    padding-top: 6px;
    color: #000000;
}
.lblMerLogo, .lblPicCaption, .radio-inline, .lblRecPerPage, .lblTotalRec, #ddlPageSize {
    font-family: 'Century Gothic' !important;
}
.icnUploadFile {
    width: calc(16px + (32 - 16) * ((100vw - 300px) / (1900 - 300)));
    height: calc(16px + (32 - 16) * ((100vw - 300px) / (1900 - 300)))
    /*width: 32px;
        height: 32px;*/
}

.rowMerLogoIcnLbl, .rowPicIcnLbl {
    margin-top: 5px;
}

.btnUploadFile {
    border: none;
    outline: none;
    background-color: transparent;
}

.divPhone, .divCurrency {
    width: 100% !important;
}
.divPhone {
    direction: ltr !important;
}
    @media only screen and (max-width:767px) and (max-device-width: 767px) {
        .divPhone, label[for="Mobile"] {
        margin-top: 15px !important;
    }
}

#map, #map > div{
    /*width: 100% !important;
    max-width: 500px !important;
    height: 75% !important;
    max-height: 375px !important;*/
    border: 1px solid rgb(204,204,204);
    border-radius: 35px;
}
/*.gm-fullscreen-control {
    margin:15px 15px 10px 10px !important;
}*/
/*.gm-fullscreen-control,*/ .gm-style a div img, .gm-style-cc {
    display: none;
}

.faContainer {
    position: relative;
    width: 100%;
}

.spanFa {
    position: absolute;
    right: 14px;
    top: 6.5px;
    z-index: 3;
}

    .spanFa i {
        color: #4D4D4D !important;
    }

textarea {
    padding: 10px 12px 6px 15.5px !important;
}
/*@media only screen and (min-width:1700px), (min-device-width:1700px){
        .divUploadPicIcn {
            padding:0 15px 0 0;
        }
    }*/
@media only screen and (max-width:345px), (max-device-width:345px) {
    .spanCoordinates {
        right: 5px;
    }
}

@media only screen and (max-width:330px), (max-device-width:330px) {
    .spanCoordinates {
        right: 0;
    }
}

.largeRadio {
    width: 20px;
    height: 20px;
}

.chkLarger {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: top;
    /*box-shadow: 3px 3px 3px rgb(204, 204, 204);*/
    background-color: white;
}

    .chkLarger:not(.chkNoKeyFrame):checked {
        animation: jelly .6s ease;
    }

/*--------------------------------CheckBox BG------------------------------------*/
.chkLarger {
    -webkit-appearance: none;
    background-color: #fafafa;
    border: 1px solid #000000;
    /*box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);*/
    padding: 9px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    outline: none !important;
}

    .chkLarger:active, .chkLarger:checked:active {
        /*box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);*/
    }

    .chkLarger:checked {
        background-color: #B38742;
        border: 1px solid #000000;
        /*box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);*/
        color: #99a1a7;
        outline: none !important;
    }

        .chkLarger:checked:after {
            content: '\2714';
            font-size: 14px;
            position: absolute;
            bottom: -2px;
            left: 1.5px;
            color: #ffffff;
        }
/*--------------------------------CheckBox BG------------------------------------*/

/* ---------------------------------------------------------------- */
.sidenavWidth {
    width: calc(100px + (200 - 100) * ((100vw - 300px) / (1900 - 300))) !important;
}
.divBodyMargin {
    margin-left: calc(104px + (208 - 104) * ((100vw - 300px) / (1900 - 300))) !important;
    padding-right: 0 !important;
}
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-image: linear-gradient(#5A4421 10%, #B38742 17%, #EFD785 100%);
    /*background-image: linear-gradient(#5A4421 7%, #B38742 17%, #EFD785 100%);*/
    /*background-image: linear-gradient(#B38742, #EFD785);*/
    /*overflow-x: hidden;*/ /* Disable horizontal scroll */
    padding: 80px 0 0 !important; /* Place content 60px from the top */
    /*padding: 80px 5px 0;*/ /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

@media only screen and (max-width:767px),(max-device-width:767px) {
    .sidenav {
        /*z-index: -1;*/
    }
}

@media only screen and (max-width:767px) {
    .sidenav {
        top: 73px !important;
        /*top: 103px !important;*/
    }
}

@media only screen and (max-device-width:767px) {
    .sidenav {
        top: 67px !important;
    }
}

.sidenav[shown=true] {
    padding: 80px 5px 0;
}

.sidenav[shown=false] {
    padding: 80px 0 0;
}

.menuLink[shown=true] {
    text-align: start;
}

.menuLink[shown=false] {
    text-align: center;
    padding-left: 0 !important;
}

#leftMenu {
    overflow-y: auto;
    width: 200px;
    height: 100vh;
    /*width: 230px;*/
}

    #leftMenu .pageTitle h4 {
        margin-top: 90px;
        /*margin-top: 92px;*/
        padding: 0 0 10px 5px;
        border-bottom: 3px solid #FFFFFF;
        font-size: calc(11.065px + (22.13 - 11.065) * ((80vw - 300px) / (1900 - 300)));
        font-weight: 900;
        /*width: 100%;*/
        color: #FFFFFF;
    }
/*#leftMenu .pageTitle h4, #leftMenu .pageTitle h4 span{
        display: inline-block;
    }*/
@media only screen and (max-width:767px) and (max-device-width:767px) {
    #leftMenu .pageTitle h4 {
        margin-top: 82px;
    }
}

@media only screen and (max-width: 371px) and (max-device-width:371px) {
    #leftMenu .pageTitle h4 {
        margin-top: 140px;
    }
}

#leftMenu .pageTitle h4 span i.fa {
    color: #000000 !important;
}

.firstMenuLink {
    margin-top: 25px;
}
/* The navigation menu links */
.sidenav a:not(.pageTitle):not(#lnkShamiSoftRedirect) {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    color: #6d6d6d !important;
    display: block;
    transition: 0.3s;
    border-top: 2px solid #6d6d6d;
    padding: 3px 0 3px 15px;
    /*padding: 0 0 0 15px;*/
}
.sidenav a:not(.pageTitle):not(#lnkShamiSoftRedirect), .pageTitle > h4{
    margin-left: 5px;
    margin-right: 5px;
}
    .lastMenuLink {
        border-bottom: 2px solid #6d6d6d;
    }

.sidenav a i:first-child {
    font-size: calc(10px + (20 - 10) * ((80vw - 300px) / (1900 - 300))) !important;
    /*font-size: calc(8px + (16 - 8) * ((80vw - 300px) / (1900 - 300))) !important;*/
    /*font-size: 18px !important;*/
    /*font-size: calc(18px + (22 - 18) * ((100vw - 300px) / (1900 - 300))) !important;*/
}

    .sidenav a i:first-child:not(.menuLinkSelectedTitle) {
        color: #000000 !important;
        /*color: #FFFFFF !important;*/
    }

.menuLinkSelectedTitle {
    color: #000000;
    font-weight: 900;
}

.sidenav a:last-child {
    border-bottom: 2px solid #6d6d6d;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
    color: #f1f1f1;
}

#divBody {
    display: inline-block !important;
    transition: margin-left .5s, width 1s;
    /*transition: margin-left .5s, width .5s;*/
    padding: 20px 20px 0 20px;
    margin-left: 200px;
    /*margin-left: 230px;*/
    /*padding-right: 80px !important;*/
}

@media only screen and (max-width:767px), (max-device-width:767px) {
    #leftMenu {
        width: 0;
    }

    #divBody {
        margin-left: 0;
        padding: 5px 15px 20px 20px !important;
        /*padding-right: 15px !important;*/
    }
}

@media screen and (max-height: 450px), (max-device-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }
}

.menu-icon {
    margin-top: 20px;
    /*margin-top: 40px;*/
    background-color: transparent;
    border: none;
    outline: none;
    margin-left: calc(195px + (8 - 195) * ((100vw - 300px) / (1900 - 300))) !important;
    /*margin-left: calc(165px + (0 - 165) * ((100vw - 300px) / (1900 - 300))) !important;*/
}

    .menu-icon > .line {
        background-color: #f0f1f3;
        height: 2px;
        display: block;
        width: 20px;
    }

        .menu-icon > .line + .line {
            margin-top: 5px;
        }
.icnMenu {
    padding: 3px;
    font-size: inherit;
    /*font-size: 18px;*/
    /*display: none;*/
    padding-left: 0;
}
    .icnMenu:not(.menuLinkSelectedTitle) {
        color: #6d6d6d !important;
    }
.no-italics {
    font-style: normal;
}

.nonResizableTextArea {
    resize: none;
    height: 145px !important;
}

.scrollHoriz {
    height: calc(81.25vh + (163 - 81.25) * ((100vh - 568px) / (1080 - 568)));
    /*height: calc(74vh + (148 - 74) * ((100vh - 568px) / (920 - 568))) !important;*/
    /*height: calc(67vh + (140 - 67) * ((100vh - 568px) / (920 - 568))) !important;*/
    overflow-x: auto !important;
}
select option {
    color: #555 !important;
}
/* ---------------------------------------------------------------- */

.lblRadio {
    font-family: 'Century Gothic';
    font-size: calc(7px + (14 - 7) * ((80vw - 300px) / (1900 - 300))) !important;
    /*font-size: 16px;*/
}
.roundedBorders{
    border-radius:37px;
    border: 2px solid #1A1A1A;
    padding: 10px 5px;
}
.lblHeader {
    font-size: calc(11px + (22 - 11) * ((80vw - 300px) / (1900 - 300))) !important;
    /*font-size: 24px !important;*/
}
.divTitle{
    margin-left: 10px;
}
.tdImage {
    display: block;
    width: calc(50.12px + (102.24 - 50.12) * ((80vw - 300px) / (1900 - 300))) !important;
    height: calc(50.12px + (102.24 - 50.12) * ((80vw - 300px) / (1900 - 300))) !important;
    background-color: transparent !important;
    border: none !important;
    margin-top: -2px !important;
    margin-right: 7px !important;
    margin-bottom: 3.5px !important;
    margin-left: 0 !important;
}
.inputPic {
    width: calc(50.12px + (102.24 - 50.12) * ((80vw - 300px) / (1900 - 300)));
    height: calc(50.12px + (102.24 - 50.12) * ((80vw - 300px) / (1900 - 300)));
    /*width: 102.24px;
    height: 102.24px;*/
    border: 1px solid #707070;
    border-radius: 15px;
}
.btnAdditional {
    background-color: transparent;
    border: 1px solid transparent !important;
    box-shadow: none;
    outline: none !important;
    pointer-events: none;
}
.headerItemPic {
    display: block;
    /*display: table;*/
    width: calc(55px + (110 - 55) * ((80vw - 300px) / (1900 - 300)));
    height: 100% !important;
    height: -webkit-fill-available !important;
    min-height: 59px !important;
}
.headerPic {
    height: auto !important;
}
.headerPic, .headerItemPic {
    border-right: 1px solid #B38742 !important;
}
.columnFilterEquivalentPic {
    width: calc(55px + (110 - 55) * ((80vw - 300px) / (1900 - 300)));
}
.colMerchantTradeName {
    z-index:-1;
}
.tdWrapSpace{
    white-space:normal !important;
}
input[type="date"],
input[type="datetime"],
input[type="datetime-local"] {
    -webkit-rtl-ordering: initial !important;
}
input[type="date"]:empty,
input[type="datetime"]:empty,
input[type="datetime-local"]:empty {
    -webkit-rtl-ordering: visual;
}
.webkitRTLOrderingInitial {
    -webkit-rtl-ordering: initial !important;
}
/*input[type=date]::-webkit-datetime-edit-month-field:not([aria-valuenow]),
input[type=datetime]::-webkit-datetime-edit-month-field:not([aria-valuenow]),
input[type=datetime-local]::-webkit-datetime-edit-month-field:not([aria-valuenow]) {
    color: transparent;
}
input[type=date]::-webkit-datetime-edit-day-field:not([aria-valuenow]),
input[type=datetime]::-webkit-datetime-edit-day-field:not([aria-valuenow]),
input[type=datetime-local]::-webkit-datetime-edit-day-field:not([aria-valuenow]) {
    color: transparent;
}
input[type=date]::-webkit-datetime-edit-year-field:not([aria-valuenow]),
input[type=datetime]::-webkit-datetime-edit-year-field:not([aria-valuenow]),
input[type=datetime-local]::-webkit-datetime-edit-year-field:not([aria-valuenow]) {
    color: transparent;
}*/
.radioTopMargin {
    margin-top: 1px !important;
}
.assignLeastWidth {
    min-width: calc(70px + (140 - 70) * ((80vw - 300px) / (1900 - 300))) !important;
}
.noLeastWidth {
    min-width: unset !important;
}
img {
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.imgEnlarged{
    border-radius: 15px;
}
.modalGeneralMessageContent{
    height: auto !important;
}
.btnToggleFilter,
#btnApplyFilter,
#btnClearFilter {
    min-width: calc(45px + (90 - 45) * ((100vw - 300px) / (1900 - 300))) !important;
}


/*  Test   */
.divRadioControls {
    display: inline-block;
    position: relative;
}
    .divRadioControls input[type="radio"] {
        display: none;
    }
    .divRadioControls label {
        color: #000;
        font-weight: normal;
    }
        .divRadioControls label:before {
            content: " ";
            display: inline-block;
            position: relative;
            top: 5px;
            margin: 0 5px 0 0;
            width: 20px;
            height: 20px;
            border-radius: 11px;
            border: 2px solid #000000;
            background-color: transparent;
        }
        .divRadioControls label:after {
            border-radius: 11px !important;
            width: 12px !important;
            height: 12px !important;
            position: absolute !important;
            top: 9px !important;
            left: 24px;
            /*left: 29px !important;*/
            content: " " !important;
            display: block !important;
        }
.selectableControl:after {
    background: #B38742 !important;
}
.imgEnlarged {
    max-height: calc(225px + (450 - 225) * ((100vw - 300px) / (1900 - 300)));
}
div.validation-summary-errors > ul > li {
    font-size: calc(13px + (26 - 13) * ((80vw - 300px) / (1900 - 300)));
}
.text-information {
    color: #000;
    font-size: calc(7px + (14 - 7) * ((80vw - 300px) / (1900 - 300)));
    font-style:italic;
}
div.FilterDate > input.form-control.controlDateFilter,
div.FilterDate > input.form-control.controlDateTimeFilter {
    margin-left: 12px;
    width: 150px !important;
}
.filterHeaderDate {
    width: 165px !important;
    max-width: 165px !important;
}
.sidebar-open{
    padding-bottom: 0 !important
}
.divPartialView{
    padding: 0 0 0 5px;
}
.btn:active,
.btnButton:active
/*.btn:not(.btnLocalization):active,
.btnButton:not(.btnLocalization):active*/ {
    transform: translateY(4px);
}
.placeHolderColour{
    color: #808080 !important;
}
.blackColour {
    color: #000000 !important;
}
input:not([type='checkbox']):not(:read-only),
textarea:not(:read-only),
select:enabled{
    background-color: #ffffff !important;
}
.txtCenter{
    text-align: center !important;
}
.imgEnlarged{
    box-shadow: 10px 10px 10px dimgray;
}
/*.rowTitle h1 {
    position: absolute;
    width: 100%;
    z-index: 2;
    color: #FFFFFF !important;
}
@media only screen and (min-width:768px), (min-device-width:768px){
    .rowTitle h1 {
        top: -85px !important;
    }
}
@media only screen and (max-width:767px), (min-device-width:767px){
    .rowTitle h1 {
        top: -220px;
    }
}*/
#SortByItemsDisplayApp {
    display: inline-block;
}

.rowPagination > td:first-child{
    border-top-left-radius: 35px;
    border-bottom-left-radius: 35px;
}
.rowPagination > td:last-child {
    border-top-right-radius: 35px;
    border-bottom-right-radius: 35px;
}
#imgVouPayProofPic {
    width: calc(150px + (300 - 150) * ((100vw - 300px) / (1900 - 300))) !important;
    height: calc(212.5px + (425 - 212.5) * ((100vw - 300px) / (1900 - 300))) !important;
    max-width: unset !important;
    max-height: unset !important;
    object-fit: contain;
    padding: 0 !important;
}



/* Extension for Croppie.css*/
.croppie-container .cr-slider-wrap {
    margin: 0 auto !important;
}

label.cabinet {
    display: block;
    cursor: pointer;
}

    label.cabinet input.file {
        position: relative;
        height: 100%;
        width: auto;
        opacity: 0;
        -moz-opacity: 0;
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
        margin-top: -30px;
    }

#upload-demo {
    width: 250px;
    height: 250px;
    padding-bottom: 25px;
}

.croppr-container {
    text-align: center;
}

.modal-content {
    height: 408px;
}

.modal-footer {
    /*padding: unset !important;*/
    /*padding: 7px 25px 0px 15px !important;*/
}
#cropImagePop .modal-footer {
    padding: 7px 25px 7px 15px !important;
}
.span-close-modal {
    font-size: 24px;
}

input.cr-slider {
    border-bottom: 1px solid transparent !important;
}

#cropImageBtn {
    background-color: #000000 !important;
    transition: 300ms;
    border: none;
    width: 80px;
}

    #cropImageBtn:hover {
        background-color: #B38742 !important;
    }

#closeModalBtn {
    background-color: #FFFFFF;
    transition: 300ms;
    width: 80px;
}

    #closeModalBtn:hover {
        background-color: #E6E6E6 !important;
    }

.modal-title {
    font-size: calc(18px + (36 - 18) * ((80vw - 300px) / (1900 - 300))) !important;
}