/* Write CSS for mobile view or for common view here */
    /* If CSS is overridding the existing css then mark it as ' !important' compulsory to get an effect of it in both view (Mobile and desktop view) */
    
    /* Tag Level CSS */
    .CustomUIWidgetContent
    {
        border: 2px solid #999 !important;
        background: #f1f2f6 !important;
        color: #333333 !important;
        height: 100% !important;
        width: 100% !important;
        top: 0% !important;
        left: 0% !important;
    }
    
    .CustomUIWidgetHeader
    {
        border: 1px solid #f1f2f6 !important;
        background: #f1f2f6 !important;
        color: #4b566c !important;
        font-weight: 800 !important;
        border-bottom: 1px solid #4b566c !important;
    }
    
    body
    {
        background-color: #eaeaea;
    }
    
    /* Class Level CSS */
    .row
    {
        margin-right: 0px !important;
    }
    
    .col-xs-12
    {
        padding-right: 0px !important;
        padding-left: 10px !important;
        padding-bottom: 1% !important;
    }
   
    .responsiveimage
    {
        width: 100% !important;
    }
    
    .footer
    {
        background: black;
        color: White;
        padding: 10px;
        bottom: 0px;
        position: fixed;
        width: 100%;
        text-align: center;
   }
   
   .ResponsiveDivToGetScrollBar
   {
       height: -webkit-fill-available !important;
       overflow: scroll;
       padding-bottom: 15%;
   }
   
    /* --------------------------------------- */
    /* Runs when it is not in mobile view */
    /* --------------------------------------- */
    @media (min-width: 768px)
    {
        /* Tag CSS */
        /* For Header Logo Image */
        .responsiveimage
        {
            height: 100px !important;
            width: auto !important;
        }
        
        /* For Footer */
        .navbar-fixed-bottom
        {
            font-size: 100% !important;
            position: fixed !important;
        }
    }
    
    /* JHL++ 31072019 */
    /* Dialog like box CSS Start */
    /* How to use? [Start]*/
    /*
    <div class="box arrow-top">
      This is a box with some content and an arrow at the top.
    </div>

    <div class="box arrow-right">
      This is a box with some content and an arrow on the right.
    </div>

    <div class="box arrow-bottom">
      This is a box with some content and an arrow at the bottom.
    </div>

    <div class="box arrow-left">
      This is a box with some content and an arrow on the left.
    </div>
    */
    /* How to use? [End]*/
    .box 
    {
        width: 150px;
        height: 75px;
        background-color: black;
        color: #fff;
        padding: 20px;
        position: relative;
        margin: 40px;
        float: left;
    }

    .box.arrow-top 
    {
        margin-top: 40px;
    }

    .box.arrow-top:after 
    {
        content: " ";
        position: absolute;
        right: 30px;
        top: -15px;
        border-top: none;
        border-right: 15px solid transparent;
        border-left: 15px solid transparent;
        border-bottom: 15px solid black;
    }

    .box.arrow-right:after 
    {
        content: " ";
        position: absolute;
        right: -15px;
        top: 15px;
        border-top: 15px solid transparent;
        border-right: none;
        border-left: 15px solid black;
        border-bottom: 15px solid transparent;
    }

    .box.arrow-bottom:after 
    {
        content: " ";
        position: absolute;
        right: 30px;
        bottom: -15px;
        border-top: 15px solid black;
        border-right: 15px solid transparent;
        border-left: 15px solid transparent;
        border-bottom: none;
    }

    .box.arrow-left:after 
    {
        content: " ";
        position: absolute;
        left: -15px;
        top: 15px;
        border-top: 15px solid transparent;
        border-right: 15px solid black;
        border-left: none;
        border-bottom: 15px solid transparent;
    }
    /* Dialog like box CSS Start */