@import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,500,500i,700,700i&display=swap');

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x- ng-cloak {
    display: none !important;
}


html, body, td, input, select, textarea, button, p {
    color: #303b47;
    color: var(--gray-dark);
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500 !important;
}


body {
    padding-top: 11px !important;
}


.input-style {
    height: 33px;
    min-width: 180px;
}

.p-5{
    padding:5px;
}

.ms-blue {
    background-color: #00A4EF;
    color: white;
    font-size: 16px;
}

.gray-color {
    background-color:lightgrey !important;
}

.mb-5 {
    margin-bottom: 5px !important;
}
.mt-5 {
    margin-top: 5px !important;
}
.mt-10 {
    margin-top: 10px;
}

.mt-21 {
    margin-top: 21px;
}
.pl-0 {
    padding-left: 0px !important;
}
.pr-0 {
    padding-right: 0px !important;
}
.pl-5 {
    padding-left: 5px !important;
}

.pr-5 {
    padding-right: 5px !important;
}
.width-96 {
    width: 96%;
}

.width-48{
    width:48% !important;
}
.width-47 {
    width: 48% !important;
}
.width-50 {
    width: 50% !important;
}
.font-21 {
    padding: 30px;
    font-weight: bold;
    font-size: 25px;
}

.charity-box-shadow {
    padding-bottom: 21px;
    border-radius: 6px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   /* min-height: 632px;*/
    /*height: calc(99vh - 44.50px);*/
}
/*.charity-box-shadow {
    padding-bottom: 21px;
    border-radius: 6px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    min-height: 500px;
}*/
.sales-box-shadow {
    padding-bottom: 21px;
    border-radius: 6px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.green{
    background-color:mediumseagreen;
    color:white;
}
.white {
    background-color: white;
    color: black;
}

.red{
    color:red;
}

.darkgray {
    border: 1px solid darkgray;
}
.right-darkgray {
    border: 1px solid darkgray;
}

.border-top-none {
    border-top: none;
}
.border-bottom-none {
    border-bottom: none;
}

.height-40{
    height: 40px;
}
.p-5{
    padding:5px;
}
.m-b{
    margin-bottom:5px;
}

.screen-slide {
    position: absolute;
    bottom: 0;
    float: left;
    width: 100%;
    overflow: hidden;
    text-align: center;
    transition: height .4s ease-in-out;
    -webkit-transition: height .4s ease-in-out;
    -moz-transition: height .4s ease-in-out;
}


.input-min-width {
    min-width: 511px;
}
.w-25 {
    width: 25%;
}
.display-flex{
    display:flex;
}
.display-block {
    display: flex;
}
.display-block-ruby {
    text-align: center;
    display: block ruby;
}
.w-100{
    width:100%;
}

.sales-web{
    padding: 10px;
    width: 48%;
    margin-right: 15px;
}
.sales-mob {
    width: 100%;
}

.banner {
    background: #85CEFF;
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.blue-border {
    border-top: 0.5px solid blue;
    border-bottom: 0.5px solid blue;
}
.blue-border-bottom {
    border-bottom: 0.5px solid blue;
}

.btn-normal {
    font-size: 18px !important;
   
    padding: 5px;
}
.btn-bold {
    font-size: 18px !important;
    
    padding: 5px;
}

.btnActive {
    border: 1px solid blue;
    font-weight: 600;
}
.font-bold {
    font-weight: 700;
}


.logoStyle-mob {
    height: 90px;
    width: 100%;
}
.logoStyle-web {
    width: 281px;
    height: 99px;
}
.cat-design{
    position: fixed;
    background: #eee;
    width: 80% !important;
    text-align: right;
    top: 14%;
    overflow: hidden;
    z-index: 999999999999999999;
    padding: 9px;
}

.pl-40 {
    padding-left: 40px;
}

.display-none{
    display:none;
}

.width-36{
    width:36%;
}
.width-50 {
    width: 50%;
}
.width-64 {
    width: 64%;
}
.word-wrap {
    word-wrap: break-word;
    white-space: pre-wrap;
    /*width: fit-content;*/
}

.display-content {
    display: contents;
}

.channel-logo {
    width: 190px;
    height: 56px;
}
.hr-ipad-line {
    width: 55%;
}
.hr-web-line {
    width: 55%;
    float: left;
}
.hr-mob-line {
    width: 81%;
}

.customAmount-cls {
    white-space: nowrap;
    display: block ruby;
    padding: 12px;
}
.NonCustomAmount-cls {
    white-space: nowrap;
    display: flex;
    padding: 12px;
}

/*.topnav {
    background-color: #333;
    overflow: hidden;
}

    .topnav a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
    }

        .topnav a:hover {
            background-color: #ddd;
            color: black;
        }

        .topnav a.active {
           background-color: #04AA6D;
            color: white;
        }

    .topnav .icon {
        display: none;
    }*/

.topnav {
    overflow: hidden;
    /*background-color: #333;*/
    position: relative;
}

    .topnav #myLinks {
        display: none;
    }

    .topnav a {
        color: white;
        /*padding: 14px 16px;*/
        padding: 3px 6px;
        text-decoration: none;
        /*font-size: 17px;*/
        font-size: 18px;
        display: block;
        float: left;
        white-space: nowrap;
    }

        .topnav a.icon {
            background: black;
            display: block;
            /* position: absolute;
            right: 0;*/
            /* top: 0;*/
            /*top: 39%;*/
            /*position: fixed;*/
            position: absolute;
            top: 18%; /*30%;*/
            right: 0%;
        }

        .topnav a:hover {
           /* background-color: #ddd;*/
            color: black;
        }

.active {
    /*background-color: #04AA6D;*/
    color: white;
}
.topnav a:not(:first-child) {
    display: none;
}

.width-280{
    width:280px !important;
}

.mwLinkClass {
    /*font-size: 18px;*/
    font-weight: bold;
    color: #1c55e4;
    cursor:pointer;
}

.font-14 {
    font-size: 14px;
}
.font-13 {
    font-size: 13px;
}

.input-sales {
    height: 40px !important;
    width: 93px !important;
    font-weight: 600 !important;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
   /* .topnav a:not(:first-child) {
        display: none;
    }*/
    .topnav a:nth-child(n+2) {
        display: block;
    }

    .topnav a.icon {
        float: right;
        display: block;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
    .topnav.responsive {
        position: relative;
    }

        .topnav.responsive a.icon {
            position: absolute;
            right: 0;
            top: 0;
        }

        .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
        }
}