/* app css stylesheet */

/*FONTS*/

/*@font-face {
    font-family: 'Helvitica';
    src: url('../fonts/Helvetica.ttc');
}

@font-face {
    font-family: 'ProximaNovaLight'; 
    src: url('../fonts/ProximaNovaLight.otf');
}*/

@font-face {
    font-family: 'ProximaNova'; 
    src: url('../fonts/ProximaNova.otf');
}

@font-face {
    font-family: 'BarcodeFont';
    src: url('../fonts/BarcodeFont.ttf');
    
}

/*GLOBALS*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

* {
    font-family: Helvetica;
}

body{
	background-color: rgb(250,250,250);
    overflow-x: hidden;
}


#main-cover{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.text-right {
    text-align: right;
}

/*DROPDOWN MENU STANDARD*/

.standard-dropdownmenubtn, 
.standard-dropdownmenubtn:hover,
.standard-dropdownmenubtn:focus,
.standard-dropdownmenubtn:active,
.standard-dropdownmenubtn:visited {
    padding: 0px !important;
    color: #ccad1f !important;
    border: none !important;
    background-color: #fff3bc !important;
}
.standard-dropdownmenubtn i{
    padding: 5px;
}


.soacolmd12 {
    width: 100%;
    float: left;
}

.soacolmd8 {
    width: 66.66666667%;
    float: left;
}

.soacolmd7 {
    width: 58.33333333%;
    float: left;
}

.soacolmd6 {
    width: 49%;
    float: left;
}

.soacolmd5 {
    width: 41.66666667%;
    float: left;
}

.soacolmd4 {
    width: 33.33333333%;
    float: left;
}

.soacolmd3 {
    width: 25%;
    float: left;
}

.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    background-color: #ffb000;
    border-color: #ffb000;
}

.pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {
    color: #846c00;
}

.pagination>li>a, .pagination>li>span {
    color: #ffb000;
}

@media print {

    .an-dlimage, .an-printimg {
        display: none;
    }

    .an-background2, .jh-margin, .ha-margin, .fa-margin {
        margin: 0 !important;
    }

    .an-logo, .jh-logo, .ha-logo{
        padding: 0 !important;
    }
}


.modal-content {
    border-radius: 0 !important;
}


/*COOKIES MESSAGE STARTS HERE*/
.cookiesoverlay {
    background-color: rgba(0, 0, 0, 0.85);
    border-collapse: collapse;
    position: fixed;
    bottom: 0;
    left: 0;
    height: auto;
    background-position: center;
    width: 100%;
    box-shadow: 0 0 20px 5px rgba(0,0,0,0.4);
    z-index: 9999;
}

.cookiesclosebtn {
    color: #fff;
    margin: 20px 22px 0px 0;
    font-size: 21px;
    cursor: pointer;
}

.cookiesbox {
    width: 90%;
    margin: 0 auto;
}

.cookiestext {
    font-size: 15px;
    font-weight: 200;
    color: #D9D9D9 !important;
    -webkit-font-smoothing: subpixel-antialiased;
    line-height: 1.4em;
    margin-top: 5px;
}

.cookiestext a {
    border-bottom: 1px solid #957229;
    color: #D9D9D9;
}

.cookiestext a:hover {
    border-bottom: 0;
    color: #fed000;
    text-decoration: none !important;
}
.cookies-content {
    float: left;
    width: 60%;
    color: #D9D9D9;
    margin-top: 1.6em;
    line-height: normal !important;
    margin-left: 185px;
}

.cookies-btn button {
    font-size: 14px;
    font-weight: 500;
    border: none;
    width: 160px;
    height: 40px;
    margin: 20px auto;
    background: #363636;
    display: block;
    cursor: pointer;
    color: #fff !important;
    border-radius: 0;
    text-align: center !important;
    letter-spacing: normal;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    text-shadow: none !important;
    font-family: 'Montserrat', sans-serif !important;
}
.cookies-btn {
    float: right;
    display: -ms-flexbox;
    display: flex;
}

table.pymtlogqueuetbl {
    margin-top: 20px;
    margin-bottom: 0 !important;
}


table.pymtlogqueuetbl>thead>tr>th{
    font-size: 11px;
    border: 0.5px solid #aaa !important;
}

table.pymtlogqueuetbl>tbody>tr>td {
    font-size: 10px;
    border: 0.5px solid #aaa !important;
    border-top: 0 !important;
}
table.pymtlogqueuetbl>tbody>tr:not(:last-child)>td {
    border-bottom: 0 !important;
}

.totalwalletlblgrid {
    grid-area: twlblgrid;
}

.totalwalletvalgrid {
    grid-area: twvalgrid;
}

.openwithdrawamtgrid {
    grid-area: twbtngrid;
}

.twgrid-container {
    display: grid !important;
    grid-template-areas: 'twlblgrid twbtngrid'
    'twvalgrid twbtngrid';
    grid-template-columns: 50% 50%;
    grid-gap: 0;
}

@media screen and (max-width: 1149px) {
    .cookies-content {
        margin-left: 0;
        width: 80%;
    }
}

@media screen and (max-width: 954px) {
    .cookiesbox {
        width: 90%;
        margin: 0 auto;
    }
}
@media screen and (max-width: 890px) {
    .cookies-content {
        float: none !important;
        width: 100%;
        text-align: center;
    }
    .cookiestext {
        font-size: 15px;
    }
    .cookies-btn {
        float: none !important;
    }
    .cookies-btn {
        float: none !important;
    }
    .cookies-btn button {
        font-size: 15px;
        border: none;
        width: 150px;
        height: 30px;
        margin: 20px auto;
    }
}

@media screen and (max-width: 700px) {
    .cookiestext {
        font-size: 12px;
    }
    .cookies-btn button {
        font-size: 13px;
        border: none;
        width: 150px;
        height: 30px;
        margin: 10px auto;
    }
}

/*COOKIES MESSAGE ENDS HERE*/

@media screen and (max-width: 380px) {
    .gk-tag-as-paid .modal-dialog{
        width: auto !important;
    }
}

@media screen and (min-width: 381px) {
    .gk-tag-as-paid .modal-dialog{
        margin: 30px auto;
    }

}

@media screen and (max-width: 800px) {
    .gk-manage-agent .modal-dialog {
        width: auto !important;
    }
}


@media screen and (max-width: 600px) {

    .ja-dropdowncoloradvance {
        margin-bottom: 0 !important;
    }

    #main-mini-menu-header {
        display: block !important;
    }

    #ja-topnav {
        display: none;
    }

    .hdr-name, .hdr-menu {
        display: none !important;
    }

    .grid-container {
        display: grid;
        grid-template-areas: 'header menu'
                             'main main' !important;
        grid-gap: 7px !important;
        grid-template-columns: 50% 50% !important;
    }

    .ja-printicon, .ja-searchbox, .ja-searchstng:before {
        display: none;

    }

    #main-page-wrapper {
        margin-top: 40px !important;
    }

    #mini-menu-header-cntr {
        visibility: visible !important;
    }

    #mini-menu-header {
        /*display: block !important;*/
        margin-top: 60px;
        overflow: hidden;
        position: fixed;
        background-color: rgb(255, 255, 255);
        width: 100%;
        z-index: 1001;
    }

    .jh-print, .ha-print, .fa-print1 {
        display: none !important;
    }

    /******************SOA**********************/
    .gk-manage-agent .modal-dialog {
        width: auto !important;
    }

    .gk-manage-agent .modal-content{
        overflow-x: auto !important;
        background-color: #313942 !important;
        padding: 48px 0 !important;
    }

    .fa-x{
        position: fixed !important;
        opacity: 1 !important;
        top: 10px !important;
        right: 10px !important;
    }

    #ModalSOA {
        width: 600px !important;
        background-color: white !important;
        padding: 10px 20px !important;
    }

    .fa-bg {
        height: 45px !important;
        padding: 7px 30px 7px 25px !important;
    }

    .fa-content{
        margin-left: 0 !important;
        padding: 0 30px !important;
        padding-left: 145px !important;
    }
    .fa-row1{
        margin-bottom: 30px !important;
    }
    .fa-modalheader {
        margin-left: 0 !important;
        padding: 0 30px !important;
        padding-left: 10px !important;
    }

    .fa-state {
        font-size: 18px !important;
    }

    p.fa-state + strong {
        font-size: 12px !important;
    }

    .fa-border {
        padding: 15px !important;
    }
    .fa-font1, .fa-font2 {
        font-size: 10px !important;
    }
    .barcode {
        font-size: 70px !important;
    }

    .fa-tdhead {
        font-size: 12px !important;
    }

    .fa-tdhead2 {
        font-size: 11px !important;
    }

    .fa-table2 td {
        font-size: 12px !important;
    }

    .fa-table2 td b{
        font-size: 10px !important;
    }

    .fa-ID {
        font-size: 12px !important;
    }

    .fa-code1 {
        font-size: 10px !important;
    }


}

@media screen and (min-width: 601px) {
    #mini-menu-header {
        visibility: hidden;
        display: none !important;
    }
}

@-webkit-keyframes opacity {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
@-moz-keyframes opacity {
    0% { opacity: 1; }
    100% { opacity: 0; }
}


.loading-text {
    text-align: center;
}

.loading-text span {

    -webkit-animation-name: opacity;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;


    -moz-animation-name: opacity;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;

    -ms-animation-name: opacity;
    -ms-animation-duration: 1s;
    -ms-animation-iteration-count: infinite;

    -o-animation-name: opacity;
    -o-animation-duration: 1s;
    -o-animation-iteration-count: infinite;

    animation-name: opacity;
    animation-duration: 1s;
    animation-iteration-count: infinite;

}

.loading-text span:nth-child(2) {
    -webkit-animation-delay: 100ms;
    -moz-animation-delay: 100ms;
    -ms-animation-delay: 100ms;
    -o-animation-delay: 100ms;
    animation-delay: 100ms;

}

.loading-text span:nth-child(3) {
    -webkit-animation-delay: 300ms;
    -moz-animation-delay: 300ms;
    -ms-animation-delay: 300ms;
    -o-animation-delay: 300ms;
    animation-delay: 300ms;
}

#mini-menu-header-cntr {
    top: 0;
    position: fixed;
    right: 0;
    margin-right: 25px;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    visibility: hidden;
    border: none;
    z-index: 1030;
}

#sidebar-nav-settings {
    display: none;
}

#main-mini-menu-header {
    display: none;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
}

#main-mini-menu-header img {
    cursor: pointer;
    height: 25px;
    margin: 0 5px;
    outline: none;
    opacity: 0.6;
}


#main-mini-menu-header img:hover, #main-mini-menu-header img:active, #main-mini-menu-header img:focus, #main-mini-menu-header img.active {
    border-bottom: 2px solid #d3b649;
    opacity: 1;
}

#main-mini-menu-header + div ul.sidebar-nav {
    list-style: none;
    padding-left: 15px;
}

#main-mini-menu-header + div ul.sidebar-nav li {
    padding: 10px 0;
}

#mini-menu-header-cntr:hover, #mini-menu-header-cntr:active, #mini-menu-header-cntr:focus {
    background-color: transparent;
}

/*
-----------------------------------------------------------------------------------------------------------------------------------


                                            START: ANNE'S CSS


-----------------------------------------------------------------------------------------------------------------------------------
*/

.an-background{
    background-color: rgb(49,57,66);
    position: absolute;
    /*height: 100%;
    overflow-y:scroll;*/

}

.an-background2{
    background-color: white;
    margin-top: 30px;
    margin-left: 140px;
    margin-right: 140px;
    margin-bottom: 30px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.an-logo{
    width:230px;
    height: auto;
    padding: 31px 0 80px;
}

.an-billstat{
    font-size:18px;
}

.an-dlprintcol{
    padding-top: 50px;
}

.an-printimg{
    height:35px;
    width: 35px;
    cursor: pointer;
}

.an-dlimage{
    height:32px;
    width: 35px;
    cursor: pointer;
}

.an-rowbottom{
    margin-bottom: 70px;
}

.an-whitelist{
    color:rgb(251,208,15);
    font-size:20px;

}

.an-whiteX{
    color:rgb(211,182,42);
    font-size: 30px;
    float:right;
    cursor: pointer;
}

.an-whiteX2{
    color:rgb(211,182,42);
    font-size: 30px;
    float:right;
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 30px;
}

.an-button{
    background-color:rgb(251,208,15);
    color:white;
    width:93%;
    font-weight: 500;
    font-family: 'ProximaNova';
    font-size: 16px;
}

.an-button:hover{
    background-color: #c7aa26;
    font-weight: 500;
    color: white;
}

.an-button:focus{
    background-color: #c7aa26;
  font-weight: 500;
  color: white;
}


.an-button:active{
    background-color: #c7aa26;
  font-weight: 500;
  color: white;
}


.an-modalbody{
    margin-left: 10%;
    margin-right: 5%;
  word-break: break-word;
}

.an-sizemodal .modal-dialog{
    width: 40%;

}

.an-youhave{
  color:gray;
}

.an-sizemodal{
    /*position: absolute;*/
    margin:auto;
}

.an-inputnum{
    width:350px;
}

.tablecss{
  text-align: left;
  width: 100%;
}
.an-tdspace{
  width:35%;
    padding-right: 2px;
    color:rgb(210,181,41);
  word-break: break-word;
}

/*.an-tdspace2{
    padding-right: 20px;
}

.an-td3{
  width:65%;
    font-weight: bold;
}*/

.an-moblabel{
    color: rgb(120,136,132);

}

.ad_userlabel {
    margin-bottom: 5px;
}


.an-clearable{
    border-left: none;
    border-right: 1px solid rgb(204,204,204);
    border-top: 1px solid rgb(204,204,204);
    border-bottom: 1px solid rgb(204,204,204);
    background-color: transparent;
    color:rgb(211,182,42);
}

.an-clearable:hover{
    border-left: none;
    background-color: transparent;
    color:rgb(211,182,42);
    outline: 0;
}

.an-inputnum {
    width:93%;
    height: 35px;
}

.an-inputnum:focus,active {
    -webkit-appearance:none;
    outline: none;
}

.an-inpbord{
    border-right: none;
    font-family: "ProximaNova";
}

.an-changepinput{
    font-family: "ProximaNova";
    width:95%;
}


/*makes outline disappear in bootstrap inputs*/
.form-control:focus{
    border-color: #cccccc;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/*makes outline disappear in bootstrap buttons*/
.btn:focus,.btn:active {
   outline: none !important;
   box-shadow: none;
}

.an-opac{
    opacity:0;
    cursor: text;
}


.an-alertbtn{
    float: right;
    border:none;
    background-color: rgb(242,222,222);
    padding: 0px;
    position:relative;
    word-break: break-all;
 }

  .an-verifybtn{
    background-color:rgb(251,208,15);
    color:white;
    width:100%;
    border:none;
    height:40px;
    font-weight: 500;
     font-family: "ProximaNova";
     font-size: 16px;
 }



 .an-verifybtn:hover,.an-verifybtn:focus{
    background-color: #c7aa26;
    font-weight: 500;
    color: white;
    outline: none !important;
    box-shadow: none;
  }

.an-cancelbtn{
    background-color: rgb(159,159,159);
    color:white;
    font-weight: 500;
    width:100%;
    border:none;
    height:40px;
     font-family: "ProximaNova";
     font-size: 16px;

 }

 .an-cancelbtn:hover,.an-cancelbtn:focus{
    background-color: grey;
    font-weight: 500;
    color: white;
    outline: none !important;
    box-shadow: none;
 }

 .an-row{
    margin:0;
    padding:0;
    border-spacing: 0;
 }

 .an-col{
    padding:0px;
    margin: 0px;
 }

 .an-changeP{
    color:rgb(251,208,15);
    font-size: 20px;
    margin-left: 145px;
 }

 .an-xx{
    font-size: 20px;
    float:right;
    cursor: pointer;
    color: rgb(159,159,159);
 }

 .an-xx:hover,.an-xx:focus{
    outline: none !important;
    box-shadow: none;
 }

 .an-successimg{
    width:80px;
    height:80px;
}


/*---------------------------------------------------------------------------------------------------------------------*/

@media only screen and (max-width:599px){
  .an-sizemodal{
      top:10%;
      left:0%;
      width:95%;
      height:100%; 

  }
   .an-sizemodal .modal-dialog {
      width:95%; /* The width is 100%, when the viewport is 800px or smaller */
    }

    .an-modalbody{
      margin-left: 5%;
      margin-right: 5%;
    }
    .an-verifybtn{
      height:33px;
      font-size: 15px;
    }

    .an-cancelbtn{
      height:33px;
      font-size: 15px;
    }

    .an-changepinput{
      height: 29px;
      font-size: 15px
    }

     .an-td3{
      width:55%;
      font-size:15px; 
    }

    .an-tdspace{
      width:45%;
      font-size: 15px;
    }

    .an-success{
      font-size:15px;
    }

  .an-youhave{
      font-size:15px;
      color:gray;
  }
   
  .an-successimg{
    height: 75px;
    width: 75Px;
  }

}

@media only screen and (max-width:411px){
  .an-sizemodal{
      top:5%;
      left:0%;
      width:95%;
      height:100%; 
      
  }
   .an-sizemodal .modal-dialog {
      width:95%; /* The width is 100%, when the viewport is 800px or smaller */
    }

    .an-modalbody{
      margin-left: 5%;
      margin-right: 5%;
    }

    .an-whitelist {
      font-size: 17px;
    }

    .an-whiteX2 {
        font-size: 17px;
        right: 10px;
        top: 35px;
    }

    .an-whiteX {
        font-size: 17px;
    }

     .an-td3{
      width:55%;
      font-size:14px; 
    }

    .an-tdspace{
      width:45%;
      font-size: 14px;
    }


    .an-success{
      font-size:14px;
    }

  .an-youhave{
      font-size:14px;
      color:gray;
  }
   
  .an-successimg{
    height: 70px;
    width: 70Px;
  }

  }

@media only screen and (max-width:360px){
  .an-sizemodal{
      top:2%;
      left:0%;
      width:100%;
      height:100%;
      margin: 0px;
      
  }
   .an-sizemodal .modal-dialog {
      width:95%; /* The width is 100%, when the viewport is 800px or smaller */
    }

    .an-modalbody{
      margin-left: 5%;
      margin-right: 5%;
    }

    .an-sizemodal .modal-body {
      padding: 0px;
    }

    .an-whitelist {
      font-size: 17px;
    }

    .an-whiteX2 {
        font-size: 17px;
        right: 10px;
        top: 25px;
    }
     .an-td3{
      width:55%;
      font-size:14px; 
    }

    .an-tdspace{
      width:45%;
      font-size: 14px;
    }


    .an-verifybtn{
      height:31px;
      font-size: 14px;
    }

    .an-cancelbtn{
      height:31px;
      font-size: 14px;
    }

    .an-changepinput{
      height: 28px;
      font-size: 14px
    }


     .an-youhave{
      font-size:14px;
      color:gray;
    }

    .an-success{
      font-size:14px;
    }

    .an-successimg{
    height: 70px;
    width: 70px;
    }

}

@media only screen and (max-width:320px){
  .an-sizemodal{
      top:2%;
      left:0%;
      width:100%;
      height:100%;
      margin: 0px;
      
  }
   .an-sizemodal .modal-dialog {
      width:95%; /* The width is 100%, when the viewport is 800px or smaller */
    }

    .an-modalbody{
      margin-left: 5%;
      margin-right: 5%;
    }

   .an-sizemodal .modal-body {
      padding: 0px;
    }

    .an-whitelist {
      font-size: 15px;
    }

    .an-whiteX2 {
        font-size: 15px;
        right: 10px;
        top: 25px;
    }

    .an-td3{
      font-size:12px; 
    }

    .an-tdspace{
      font-size: 12px;
    }

  .an-moblabel{
    font-size: 12px;

  }
  .an-button{
    font-size: 12px;
  }

   .an-verifybtn{
      height:28px;
      font-size: 12px;
    }

    .an-cancelbtn{
      height:28px;
      font-size: 12px;
    }

    .an-changepinput{
      height: 26px;
      font-size: 12px
    }

  .an-inpbord{
     font-size: 12px;
  }
  
  .an-success{
      font-size:12px;
  }

  .an-youhave{
      font-size:12px;
      color:gray;
  }
   
  .an-successimg{
    height: 65px;
    width: 65px;
  }

}

@media only screen and (min-width:600px) and (max-width:800px){
  .an-sizemodal{
      top:10%;
      left:0%;
      width:95%;
      height:100%; 

  }
   .an-sizemodal .modal-dialog {
      width:90%; /* The width is 100%, when the viewport is 800px or smaller */
    }

    .an-modalbody{
      margin-left: 5%;
      margin-right: 5%;
    }

    .an-sizemodal .modal-body {
      padding: 0px;
    }

    .an-whitelist {
      font-size: 30px;
    }

    .an-whiteX2 {
        font-size: 25px;
        right: 10px;
        top: 25px;
    }

    .an-td3{
    font-size:23px; 
    }
    .an-tdspace{
    font-size: 23px;
    }

  .an-moblabel{
    font-size: 23px;

  }
  .an-button{
    height:50px;
    font-size: 23px;
  }

  .an-verifybtn{
      float:left;
      width:50%;
      height:50px;
      font-size: 23px;
    }

    .an-cancelbtn{
      width:50%;
      height:50px;
      font-size: 23px;
    }

    .an-changepinput{
      height: 50px;
      font-size: 23px
    }

  .an-inpbord{
    height:50px;
    font-size: 23px;
  }
  .alertstyle{
    font-size: 23px;
  }

   .an-youhave{
      font-size:22px;
      color:gray;
    }
 
  .an-success{
    font-size:22px;
   }

  .an-successimg{
    height: 110px;
    width: 110px;
  }

}

@media only screen and (min-width:801px) and (max-width:1030px){
  .an-sizemodal{
      top:10%;
      left:0%;
      width:95%;
      height:100%; 

  }
   .an-sizemodal .modal-dialog {
      width:85%; /* The width is 100%, when the viewport is 800px or smaller */
    }

    .an-modalbody{
      margin-left: 5%;
      margin-right: 5%;
    }

   .an-sizemodal .modal-body {
      padding: 0px;
    }

    .an-whitelist {
      font-size: 35px;
    }

    .an-whiteX2 {
        font-size: 35px;
        right: 10px;
        top: 25px;
    }

   .an-td3{
    font-size:28px; 
    }

    .an-tdspace{
    font-size: 28px;
    }

    .an-moblabel{
    font-size: 28px;

    }

    .an-button{
    height:55px;
    font-size: 28px;
    }

    .an-verifybtn{
      height:55px;
      font-size: 28px;
    }

    .an-cancelbtn{
      height:55px;
      font-size: 28px;
    }

    .an-inpbord{
      height:55px;
      font-size: 28px;
    }

    .an-changepinput{
      height: 55px;
      font-size: 28px
    }

  .alertstyle{
    font-size: 28px;
  }

   .an-youhave{
      font-size:25px;
      color:gray;
    }

  .an-success{
    font-size:25px;
  }

  .an-successimg{
    width:130px;
    height:130px;
  }

}

/*
-----------------------------------------------------------------------------------------------------------------------------------


                                            END: ANNE'S CSS


-----------------------------------------------------------------------------------------------------------------------------------
*/

/*
-----------------------------------------------------------------------------------------------------------------------------------


                                            START: JANE'S CSS


-----------------------------------------------------------------------------------------------------------------------------------
*/

    /*Mini Menu Burger*/
/***************************************/
    .sidebar-nav a{
        text-decoration: none;
        color: grey;
    }
    .sidebar-nav a:hover{
        color: rgb(211,182,73);
        text-decoration: none;
    }
    .sidebar-nav a:active{
        background: none;
        /*border-bottom: 4px solid rgb(211,182,73);*/
        border-image: linear-gradient(to left, #ffffff00 45%, rgb(254, 208, 0) 45%);
        border-image-slice: 1;
        text-decoration: none;
        color: rgb(211,182,73);
    }
    .navbar-collapse{
        border-bottom: solid lightgrey 2px;
    }
    /*Mini Menu Burger*/
/***************************************/


    /*Unpaid, Paid, Pending Schedule*/
/***************************************/
    .ja-table1{
        width: 100%;
        table-layout: fixed;
        border-left: none;
        border-top: none;
        border-bottom: 1px solid lightgray;
    }
    #ja-topnav a{
        color: grey;
    }
    #ja-topnav .ja-navbar-nav li > a{
        padding-bottom: 10px;
    }

    #ja-topnav .ja-navbar-nav li:hover > a{
        background: none;
        border-bottom: 4px solid rgb(211,182,73);
        border-image: linear-gradient(to left, #ffffff00 45%, rgb(254, 208, 0) 45%);
        border-image-slice: 1;
        text-decoration: none;
        color: black;
    }
    #ja-topnav .ja-navbar-nav li.active > a {
        background: none;
        border-bottom: 4px solid rgb(211,182,73);
        border-image: linear-gradient(to left, #ffffff00 45%, rgb(254, 208, 0) 45%);
        border-image-slice: 1;
        text-decoration: none;
        color: rgb(211,182,73);
    }

    #main-mini-menu-header + div ul.sidebar-nav li.active > a{
        background: none;
        color: rgb(211,182,73);
    }

    .ja-navbar-nav li{
        margin-top: 100px;
        /*margin-top: 80px;*/
        -webkit-transition: border .2s;
        transition: border .2s;
        float: left;
        display: inline-block;
        color: black;
        text-align: center;
        padding: 1px 16px;
        text-decoration: none;
        font-size: 17px;
    }
    .ja-navbar-nav i{
        text-align: center;
        color: rgb(211,182,73);
        font-size: 0.8em;
    }
    /*Unpaid, Paid, Pending Schedule*/
/***************************************/

    /*Accounts*/
/***************************************/
    .ja-image img{
        height: 17px;
        width: 17px;
        float: left;
    }
    .ja-image i{
        font-size: 0.7em;
        float: right;
        margin-top: 3px;
        color: rgb(211,182,73);
    }
    .ja-dropdown-accounts{
        position: relative;
        display: inline-block;
        float: right;
        margin-top: 100px;
    }

    .ja-dropdown-accounts .dropdown-backdrop {
        position: relative;
    }

    .ja-dropdown-view-tag .dropdown-backdrop {
        position: relative;
    }

    .ja-dropdown-content-accounts {
        display: none;
        position: absolute;
        min-width: 200px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        padding: 12px 16px;
        z-index: 1;
        margin-right: 30px;
    }
    .jh-dropdown-content {
        display: none;
        position: absolute;
        min-width: 150px;
        box-shadow: 0px 6px 14px 0px rgba(0,0,0,0.2);
        padding: 10px 12px;
        z-index: 1;
        margin-right: 30px;
    }
    .ja-dropdowncolor-accounts{
        cursor: pointer;
        outline: 0px;
        border: none;
        background-color: rgb(250,244,219);
        margin-right: 30px;
        height: 40px;
        width: auto;
        padding: 10px;
        margin-bottom: 10px;
        margin-top: 5px;
        color: #d5b833;
        font-size: 14px;
        font-weight: 600;

    }
    .ja-dropdowncolor-accounts:hover,  .ja-dropdowncolor-accounts:active, .ja-dropdowncolor-accounts:focus,
    .ja-dropdowncolor-accounts:active:hover, .ja-dropdowncolor-accounts:active:focus{
        background-color: rgb(249,248,221) !important;
        color: #d5b833 !important;
    }

    .ja-dropdowncolor-accounts .dropdown-backdrop {
        position: initial;
    }
    .ja-bgwhite-accounts{
        background-color: rgb(255,255,255);
    }
        /*Accounts*/
/***************************************/

    /*Alert Message*/
/***************************************/
    #main-page-wrapper {
        padding-left: 20px;
        padding-right: 20px;
        margin-bottom: 150px;
    }
    .ja-alermessagetbtn{
        float: right;
        border:none;
        background-color: transparent;
        padding: 0px;
        margin-right: 0px;
    }
    .alertmsgcss{
        width: 100%;
        padding: 10px !important;
        left: 0;
    }   
    /*Alert Message*/
/***************************************/

    /*Count and total of Bills*/
/***************************************/
    .totalNo{grid-area: header; }
    .totalAmt{grid-area: menu;}
    .search{grid-area: main;}
    .totalBills{ grid-area: right;}
    .advanceFilter{grid-area: footer;}
    .space{grid-area: space;}
    .tbl-setting{grid-area: setting;}

    .grid-container{
        display: grid;
        /*grid-template-areas: 'header menu space main'
                             'header menu space main';
        grid-template-columns: 25% 25% 5%;          
        grid-gap: 0;*/
        grid-template-areas: 'header menu space' 'main main space';
        grid-template-columns: 25% 25% 50%;
        grid-gap: 30px;
      /*background-color: #2196F3;*/
      margin-top: 80px;
    }
    .grid-container  div {
      /*background-color: rgba(255, 255, 255, 0.8);*/
      font-size: 13px;
      text-align: center;
      padding: 0;
    }
    .grid-container > div  {
        padding: 0 15px;
    }
    .grid-container  div.ja-border1 {
        padding: 10px 20px;
    }

    .grid-container  div.ja-border2 {
        padding: 10px 20px;
    }
    .ja-border1{
        position: static;
        border-style: solid;
        background-color: white;
        height: 110px;
        /*width: 200px;*/   
        border-left: none;
        border-bottom: none;
        border-top: none;
        border-right: 3px solid black;
        border-image: linear-gradient(to top, white 65%, rgb(21,188,198) 35%);
        border-image-slice: 1;
    }

    .ja-border1 p, .ja-border2 p{
        font-size: 25px;
        color: grey;
        /*padding-top: 20px;*/
        padding-top: 15px;
        text-align: left;
    }
    .ja-border1 text,.ja-border2 text{
        font-size: 13px;
        color: grey;
        float: left;
        text-align: left;
    }
    .ja-border2{
        position: static;
        border-style: solid;
        background-color: white;
        height: 110px;
        /*width: 200px;*/
        border-left: none;
        border-bottom: none;
        border-top: none;
        border-right: 3px solid black;
        border-image: linear-gradient(to top, white 65%, rgb(254,208,0) 35%);
        border-image-slice: 1;
    }/*
    .ja-border2 p{
        font-size: 25px;
        color: grey;
        padding-top: 15px;
        text-align: left;

    }*/
    /*.ja-border2 text{
        font-size: 13px;
        color: grey;
        float: left;
        text-align: left;
    }*/
    .ja-month-label{
        font-size: 11px;
        color: #b5b5b5;
    }
    .ja-searchstng:before {
        font-family: FontAwesome;
        content: "\f002";
        position: absolute;
        top: 8px;
        left: 15px;
        color: gray;
    }
    .ja-searchbox{
        width: 100%;
        padding-left: 50px;
        border: none;
        outline: none;
        background-color: white;
    }
    .inputtextstyle{
        font-family: "ProximaNova";
        height: 35px;
    }
    /*Count and total of Bills*/
/***************************************/

    /*Advance Dropdown*/
/***************************************/
    .ja-printicon{
        position: static;
        float: right;
        background-color: rgb(250,244,219);
        width: 38px;
        height: 35px;
        padding: 6px;
        /*margin-top: 35px;*/
    }
    .ja-printicon img{
        height: 18px;
        width: 18px;
    }
    .ja-advance-dropdown {
        position: relative;
        display: inline-block;
    }
    .ja-advancefiltericon img{
        height: 18px;
        width: 18px;
    }

    .ja-advancefiltericon{
        position: static;
        outline: none;
        border: none;
        float: right;
        /*margin-top: 35px;*/
        margin-top: 0;
        margin-right: 10px;
        background-color: rgb(250,244,219);
        width: 130px;
        height: 35px;
        padding: 6px;
        color: rgb(211,181,43);
    }
    .ja-advancefiltericon:hover{
        background-color: lightyellow;
    }
    .ja-dropdowncoloradvance{
        cursor: pointer;
        color: #d3b52b;
        outline: 0px;
        border:none;
        background-color: rgb(250,244,219);
        margin-right: 10px;
        height: 35px;
        width: auto;
        padding: 7px;
        margin-bottom: 10px;
    }
    .ja-dropdowncoloradvance:hover{
        background-color: rgb(249,248,221);
    }
    .ja-form {
        width: 330px;
        border-radius: 0px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
        text-indent: 10px;
    }
    .fontadjust md-input-container{
        font-size: 13px;
    }
    .ja-alertbtn-advancedropdown{
        float: right;
        border:none;
        background-color: rgb(242,222,222);
        padding: 0px;
        margin-right: 10px;
    }
    .ja-dropdownform-advancedropdown{
        margin-top: 0px;
        margin-bottom:0px;
    }
    .addressellipse{
        width: 50px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .btnposition{
        margin: 0;
        padding: 0;
    }
    .searchbtn{
        height:35px;
        outline: none;
        background-color: #fed000;
        font-weight: 700;
        font-size: 16px;
        color: white !important;
        width: 100%;
        border: none;
     }
    .searchbtn:hover,
    .searchbtn:active,
    .searchbtn:focus {
      background-color: #c7aa26;
      height:35px;
      outline: none;
      font-weight: 700;
      font-size: 16px;
      color: white !important;
      width: 100%;
      border: none;
    }
    .resetbtn{
        height:35px;
        outline: none;
        background-color: lightgrey;
        font-weight: 700;
        font-size: 16px;
        color: white !important;
        width: 100%;
        border: none;
     }
    .resetbtn:hover,
    .resetbtn:active,
    .resetbtn:focus {
      background-color: grey;
      height:35px;
      outline: none;
      font-weight: 700;
      font-size: 16px;
      color: white !important;
      width: 100%;
      border: none;
    }

    /*Advance Dropdown*/
/***************************************/

    /*Table 1*/
/***************************************/
    .ja-table2 th, .ja-table2 td{
        font-size: 12px;
        color: grey;
    }
    .ja-table2-padding{
        padding-left: 8px;
        padding-right: 8px;
    }
    .ja-table2{
        margin-top: 10px;
        border-collapse: separate;
        border-spacing: 0px 10px;
    }
    .ja-address1{
        display:inline-block; 
        width: 400px;
        height: 80px;
        padding: 31px 8px 32px 8px;
        border-right: 0.5px solid #e2e2e2; 
        white-space: nowrap; 
        overflow:hidden !important; 
        text-overflow: ellipsis;
    }
    .ja-tablecolor td{
        background-color: white;
        border-bottom: 0.5px solid #e2e2e2;
        border-top: 0.5px solid #e2e2e2;
    }

    .ja-tablecolor td:first-child {
        border-left: 0.5px solid #e2e2e2;
    }
    .ja-burgericon img{
        height: 23px;
        width: 23px;
        background-color: rgb(250,244,219);
        padding: 2px;
    }
    .ja-burgericon td{
        text-align: center;
    }
    .ja-dropdown-view-tag {
        position: relative;
        display: inline-block;
    }
    .ja-ddown-view-tag {
        display: none;
        position: absolute;
        min-width: 200px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        padding: 11px 15px;
        z-index: 1;
    }
    .ja-bgwhite-view-tag{
        background-color: rgb(255,255,255);
    }
    /*Table 1*/
/***************************************/


    /*Tag as Paid Modal CSS*/
/***************************************/
    .tapspace2{
        font-size: 16px;
        padding: 30px;
    }
    .tapalert{
        width: 100%;
        height: 50px;
    }
    .ja-tapalertbtn{
        float: right;
        border:none;
        background-color: rgb(242,222,222);
        padding: 0px;
    }
    .tapspacebtn{
        padding-top: 10px;
        padding-bottom: 15px;
    }
    .proceedbtn{
        outline: none;
        background-color: #fed000;
        font-weight: 500;
        font-size: 16px;
        color: white !important;
        width: 120px;
        border: none;
        padding-top: 7px;
        padding-bottom: 7px;
        margin-right: 25px;
    }

    .cancelbtn{
        outline: none;
        background-color: lightgrey;
        font-weight: 500;
        font-size: 16px;
        color: white !important;
        width: 120px;
        border: none;
        padding-top: 7px;
        padding-bottom: 7px;
    }
    .cancelbtn:hover,
    .cancelbtn:active,
    .cancelbtn:focus {
        background-color: grey;
        font-weight: 500;
        font-size: 16px;
        color: white;
        width: 120px;
    }

    .proceedbtn:hover,
    .proceedbtn:active,
    .proceedbtn:focus {
      background-color: #c7aa26;
      font-weight: 500;
      font-size: 16px;
      color: white;
      width: 120px;
    }
    .gk-tag-as-paid .modal-dialog{
      width: 385px;
    }

    .gk-tag-as-paid .modal-content{
        border-radius: 0px;
    }
    /*Tag as Paid Modal CSS*/
/***************************************/


    /*@media only screen and  (min-width: 320px) and (max-width: 480px)*/
/******************************************************************************/
    @media only screen and  (min-width: 320px) and (max-width: 480px) {
        #main-page-wrapper {
            padding-left: 0px;
            padding-right: 0px;
            margin-bottom: 150px;
        }
        .alertmargintop{
            margin-top: 10px;
        }
        .ja-border1 p{
            font-size: 16px;
            color: grey;
            padding-top: 15px;
            text-align: left;
        }
        .ja-border1 text{
            font-size: 10px;
            color: grey;
            float: left;
            text-align: left;
        }
        .grid-container  div.ja-border1 {
            padding: 3px 5px;
        }
        .grid-container > div  {
            padding: 0;
        }
        .ja-border2{
            margin-right: 10px;
        }
        .ja-border1{
            margin-right: 10px;
        }
        .ja-border2 p{
            font-size: 16px;
            color: grey;
            padding-top: 15px;
            text-align: left;
        }
        .ja-border2 text{
            font-size: 10px;
            color: grey;
            float: left;
            text-align: left;
        }
        .grid-container  div.ja-border2 {
            padding: 3px 5px;
        }
        .ja-advancefiltericon img{
            height: 11px;
            width: 11px;
        }
        .ja-dropdowncoloradvance{
            cursor: pointer;
            color: #d3b52b;
            outline: 0px;
            border:none;
            background-color: rgb(250,244,219);
            height: 30px;
            width: auto;
            margin-right: 10px;
        }
        .ja-dropdowncoloradvance p{
            font-size: 10px;
        }
        .ja-form {
            width: 230px;
        }
        .searchbtn,
        .resetbtn,
        .searchbtn:hover,
        .searchbtn:active,
        .searchbtn:focus,
        .resetbtn:hover,
        .resetbtn:active,
        .resetbtn:focus{
            font-size: 11px;
            height:30px;
        }
        .alert-danger p{
            font-size: 10px;
            padding: 0;
        }
        .ja-table2 > th, .ja-table2 > td{
            font-size: 10px;
            color: grey;
        }
        .ja-address1{
            width: 200px;
        }
        .ja-ddown-view-tag {
            min-width: 150px;
            padding: 10px 14px;
        }
        .jh-padding{
            padding: 5px;
        }
        .tapspace2{
            font-size: 12px;
            padding: 20px;
        }
        .proceedbtn,.cancelbtn{
            font-size: 12px;
            width: 60px;
            height: 25px;
            border: none;
            left: 5%;
            padding-top: 5px;
            padding-bottom: 5px;
            margin-top: 0;
        }
        .proceedbtn{
            margin-right: 0;
        }
        .proceedbtn:hover,
        .proceedbtn:active,
        .proceedbtn:focus,
        .cancelbtn:hover,
        .cancelbtn:active,
        .cancelbtn:focus{
          font-size: 12px;
          width: 50px;
          padding-top: 5px;
          padding-bottom: 5px;
        }
        .fontadjust md-input-container{
            font-size: 10px;
        }
        .fontadjust{
            margin-right: 9px;
        }

        
    }
    /*End of media screen 320 to 480*/
/******************************************************************************/

    /*@media only screen and  (min-width: 481px) and (max-width: 599px)*/
/******************************************************************************/
    @media only screen and (min-width: 481px) and (max-width: 599px) {
        #main-page-wrapper {
            padding-left: 0px;
            padding-right: 0px;
            margin-bottom: 150px;
        }
        .alertmargintop{
            margin-top: 10px;
        }
        .ja-border1 p, .ja-border2 p{
            font-size: 20px;
            color: grey;
            /*padding-top: 20px;*/
            padding-top: 15px;
            text-align: left;
        }
        .ja-month-label{
            font-size: 11px;
        }
        .ja-border1 text,.ja-border2 text{
            font-size: 11px;
            color: grey;
            float: left;
            text-align: left;
        }
        .ja-dropdowncoloradvance{
            width: auto;
            margin-right: 0;
            padding: 8px;
        }
        .ja-dropdowncoloradvance p{
            font-size: 12px;
        }
        .ja-advancefiltericon img{
            height: 12px;
            width: 12px;
        }
        .fontadjust md-input-container{
            font-size: 11px;
        }
        .fontadjust{
            margin-right: -2px;
        }
        .ja-form {
            width: 250px;
        }
        .searchbtn,
        .resetbtn,
        .searchbtn:hover,
        .searchbtn:active,
        .searchbtn:focus,
        .resetbtn:hover,
        .resetbtn:active,
        .resetbtn:focus{
            font-size: 11px;
            height:30px;
        }
        .tapspace2{
            font-size: 12px;
            padding: 20px;
        }
        .proceedbtn,.cancelbtn{
            font-size: 12px;
            width: 60px;
            height: 25px;
            border: none;
            left: 5%;
            padding-top: 5px;
            padding-bottom: 5px;
            margin-top: 0;
        }
        .proceedbtn{
            margin-right: 0;
        }
        .proceedbtn:hover,
        .proceedbtn:active,
        .proceedbtn:focus,
        .cancelbtn:hover,
        .cancelbtn:active,
        .cancelbtn:focus{
          font-size: 12px;
          width: 50px;
          padding-top: 5px;
          padding-bottom: 5px;
        }
        .ja-ddown-view-tag {
            min-width: 160px;
            padding: 10px 14px;
        }
      
    }

    /*End of media screen 481 to 767*/
/******************************************************************************/

    /*@media only screen and  (min-width: 601px) and (max-width: 767px)*/
/******************************************************************************/
    @media only screen and (min-width: 601px) and (max-width: 767px) {

        #main-page-wrapper {
            padding-left: 0px;
            padding-right: 0px;
            margin-bottom: 150px;
        }

        .ja-navbar-nav li {
            margin-top: 120px;
            padding: 0 10px;
            font-size: 15px;
            padding-bottom: 10px;
        }

        .ja-image img {
            height: 16px;
            width: 16px;
            float: left;
        }

        .ja-image i {
            font-size: 0.7em;
            float: right;
            margin-top: 3px;
            color: rgb(211, 182, 73);
        }

        .ja-dropdown-accounts {
            margin-top: 120px;
        }

        .ja-dropdowncolor-accounts {
            height: 30px;
            float: right;
            margin-right: 8px;
            padding: 5px 10px !important;
            margin-bottom: 0px;
        }

        .ja-dropdown-content-accounts {
            min-width: 150px;
            margin-right: 7px;
        }

        .grid-container > div {
            padding: 0 5px;
        }

        .grid-container div.ja-border1, .grid-container div.ja-border2 {
            padding: 0 5px;
        }

        .ja-border1 p, .ja-border2 p {
            font-size: 18px;
            color: grey;
            /*padding-top: 20px;*/
            padding-top: 15px;
            text-align: left;
        }

        .ja-border1 text, .ja-border2 text {
            font-size: 11px;
            color: grey;
            float: left;
            text-align: left;
        }

        .grid-container {
            grid-template-areas: 'header menu space main main' 'header menu space footer main';
            grid-template-columns: 26% 26% 3%;
        }

        .ja-month-label {
            font-size: 11px;
        }

        .ja-printicon {
            margin-top: 10px;
            width: 35px;
            height: 33px;
            padding: 6px;
        }

        .ja-printicon img {
            height: 15px;
            width: 15px;
        }

        .ja-advancefiltericon img {
            height: 15px;
            width: 15px;
        }

        .ja-dropdowncoloradvance {
            height: 33px;
            width: auto;
            padding: 7px;
            margin-top: 10px;
            text-align: center;
        }

        .ja-form {
            width: 270px;
        }

        .ja-dropdowncoloradvance p {
            font-size: 12px;
        }

        .fontadjust md-input-container {
            font-size: 12px;
        }

        .fontadjust {
            margin-right: 30px;
        }

        .searchbtn,
        .resetbtn,
        .searchbtn:hover,
        .searchbtn:active,
        .searchbtn:focus,
        .resetbtn:hover,
        .resetbtn:active,
        .resetbtn:focus {
            font-size: 12px;
            height: 32px;
        }

        .tapspace2 {
            font-size: 12px;
            padding: 20px;
        }

        .proceedbtn, .cancelbtn {
            font-size: 12px;
            width: 60px;
            height: 25px;
            border: none;
            left: 5%;
            padding-top: 5px;
            padding-bottom: 5px;
            margin-top: 0;
        }

        .proceedbtn {
            margin-right: 0;
        }

        .proceedbtn:hover,
        .proceedbtn:active,
        .proceedbtn:focus,
        .cancelbtn:hover,
        .cancelbtn:active,
        .cancelbtn:focus {
            font-size: 12px;
            width: 50px;
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .ja-ddown-view-tag {
            min-width: 165px;
            padding: 10px 14px;
        }
    }
/******************************************************************************/

/*
-----------------------------------------------------------------------------------------------------------------------------------


                                            END: JANE'S CSS


-----------------------------------------------------------------------------------------------------------------------------------
*/

/*
-----------------------------------------------------------------------------------------------------------------------------------


                                            START: JHEYSA'S CSS


-----------------------------------------------------------------------------------------------------------------------------------
*/

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.jh-background{
    background-color: rgb(49,57,66);
    min-height: 100%;
    min-width: 100%;
}

.jh-margintop{
    margin-top: 30px;
}

.jh-margin{
    background-color: white;
    margin-top: 30px;
    margin-left: 140px;
    margin-right: 140px;
    margin-bottom: 30px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 20px;
    padding-bottom: 50px;
}

.jh-white{
    background-color: white;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 100px;
    padding-bottom: 100px;
}

.jh-modalbg{
    background-color: rgb(250,250,250) !important;
    padding-top: 40px;
    padding-bottom: 40px;
    padding-right: 50px;
    padding-left: 50px;
}

.jh-lightgraybg{
    background-color: rgb(250,250,250) !important;
}

.jh-logo{
    width:230px;
    height: auto;
    padding: 31px 0 80px;
}

.jh-image{
    height:32px;
    width: 35px;
    cursor: pointer;
}

.jh-dlprinttop{
    padding-top: 50px;
}

.jh-bottom{
    margin-bottom: 70px;
}

.jh-agent{
    font-size: 18px;
    font-weight: bold;
}

.jh-tdhead{
    font-weight: bold;
    text-align: center;
    padding: 10px;
    box-shadow: 0px 2px rgb(220,220,220);
}
.jh-table{
    padding: 10px;
    box-shadow: 0px 1px rgb(220,220,220);
}

.jh-status{
    font-weight: bold;
}

.alignright{
    text-align: right;
}

.jh-yellowcolor{
    color: rgb(212,182,68);
}

.gk-agents-modal .modal-dialog {
    width: 95%;
    margin: 2%;
}

.gk-adminuser-modal .modal-dialog{
    width: 95%;
}

.gk-userlog-modal .modal-dialog{
    width: 95%;
}

.jh-search{
    background-color: rgb(250,244,219);
    border: none;
    padding: 8px;
    border-radius: 3px;
}

.jh-advncsearch{
    height: 15px;
    width: 15px;
}

.jh-print{
    background-color: rgb(250,244,219);
    border: none;
    padding: 8px;
    cursor: pointer;
    border-radius: 3px;
}

.jh-printlogo{
    height: 18px;
    width: 18px;
}

.jh-bluetext{
    color: rgb(154,173,202);
}

.jh-searchbox{
    height: 45px;
    width: 90%;
    padding-left: 20px;
    border: none;
    outline: none;
}

.jh-searchtext{
    font-family: "ProximaNova";
}

.jh-glyphsearch{
    padding-top: 14px;
    padding-bottom: 16px;
    padding-left: 15px;
    padding-right: 5px;
    background-color: white;
}

.jh-whitelist:hover,
.jh-whitelist:active,
.jh-whitelist:focus {
  background-color: #c7aa26;
  font-weight: 500;
  font-size: 16px;
}

.jh-whitelist{
    background-color: rgb(254,208,0);
    border: none;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 200px;
    height: 40px;
    border-radius: 3px;
    color: white;
    outline: none;
    font-weight: 500;
    font-size: 16px;
}

.jh-whitelistmargin{
    margin-left: 70px;
}

.jh-tdhead2{
    text-align: center;
    padding: 15px;
    background-color: rgb(250,250,250);
    color: rgb(128,128,128);
    font-size: 12px;
    font-weight: bold;
}

.jh-table2{
    padding: 15px;
    background-color: white;
    border: 2px solid #e2e2e2;
    text-align: left;
    font-size: 12px;
}

.jh-paddingtable{
    border-collapse:separate; 
    border-spacing:0 10px;
}

.jh-table2 td{
    padding: 20px;
    border-color: #e2e2e2;
    border-left-width: 0;
    border-right-width: 0;
    border-top-width: 0.5px;
    border-bottom-width: 0.5px;
    border-style: solid;
}

.jh-table2 td:first-child{
    border-left-width: 0.5px;
}

.jh-table2 td:last-child{
    border-right-width: 0.5px;
}

.jh-burger{
    background-color: rgb(254,251,236);
    border: none;
    padding: 5px;
}
.jh-dropdown {
    position: relative;
    display: inline-block;
}

.jh-dropdown .dropdown-backdrop {
    position: relative;
}

.jh-dropdown-content {
    display: none;
    position: absolute;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown-menu{
    padding-top: 10px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
}

.dropdown-menu:hover{
    background-color: rgb(255,255,255);
}

.dropdown-menu>li>a:hover {
    color: rgb(234,193,0);
    cursor: pointer;
}

.jh-bgwhite{
    background-color: rgb(255,255,255);
}

.jh-glyph{
    color: rgb(211,182,42);
    font-size: 30px;
    float:right;
    cursor: pointer;
    
}

.jh-dropmdcont{
    margin-top: 0px;
    margin-bottom:0px;
}

.jh-date{
    margin-top: 0px;
    margin-bottom:10px;
}

.jh-dropinput{
    border-bottom:2px solid rgb(220,220,220);
}

.jh-form {
    width: 310px;
    border-radius: 0px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 0px;
}

.md-option {
   z-index:3000;
}

.md-select-menu-container.md-active {
   z-index: 1051;
}

md-backdrop.md-select-backdrop.md-click-catcher {
   z-index: 1051;
}

.jh-row{
    margin:0;
    padding:0;
    border-spacing: 0;
 }

.jh-alert{
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.jh-dropSearch{
    background-color: rgb(254,208,0);
    color:white;
    width:100%;
    border: none;
    height: 35px;
    outline: none;
}

.jh-dropSearch:hover{
    background-color: #c7aa26;
    color:white;
}
.jh-dropSearch:focus{
    background-color: rgb(234,193,0);
    color:white;
}

.jh-dropReset{
    background-color:rgb(159,159,159);
    color:white;
    width:100%;
    border:none;
    height:35px;
    outline: none;
}

.jh-dropReset:hover{
    background-color: rgb(128,128,128);
    color:white;
}

.jh-dropReset:focus{
   background-color: rgb(159,159,159);
    color:white;
}

.jh-btnposition{
    margin: 0;
    padding: 0;
}

.jh-padding{
    padding: 5px;
}

.textstyle{
    font-family: "ProximaNova";
}

.jh-overflow{
    overflow-x: auto;
}

.jh-norecord{
    font-size:20px;
    padding-bottom: 10px;
    padding-top: 20px;
}

.jh-alertbtn{
    float: right;
    border:none;
    padding: 0px;
 }

.jh-alertbtn1{
    float: right;
    border:none;
    padding: 0px;
 }

.jh-bottomtable{
    padding-bottom: 90px;
}

.jh-nofoundfont{
    font-size: 13px;
}

.jh-droplabel{
    margin-top: 15px;
}



 /******************************************************************************/

@media only screen and  (min-width: 768px) and (max-width: 991px) and (orientation: landscape) {

    .gk-agents-modal .modal-dialog{
        width: 97%;
    }

    .jh-margintop{
        margin-top: 10px;
    }

    .jh-modalbg{
        background-color: rgb(250,250,250) !important;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 30px;
        padding-left: 15px;
    }

    .jh-searchbox{
        height: 35px;
        width: 90%;
        padding-left: 20px;
        border: none;
        outline: none;
        font-size: 15px;
    }

    .jh-searchtext{
        font-family: "ProximaNova";
    }

    .jh-bluetext{
        margin-top: 10px;
        color: rgb(154,173,202);
        font-size: 13px;
    }

    .jh-glyphsearch{
        padding-top: 8px;
        padding-bottom: 13px;
        padding-left: 15px;
        padding-right: 5px;
        background-color: white;
    }

    .jh-search{
        background-color: rgb(250,244,219);
        border: none;
        padding: 8px;
        border-radius: 3px;
    }

    .jh-searchtext{
        font-family: "ProximaNova";
        font-size: 13px;
    }

    .jh-advncsearch{
        height: 13px;
        width: 13px;
    }

    .jh-print{
        background-color: rgb(250,244,219);
        border: none;
        padding-bottom: 6px;
        padding-top: 8px;
        padding-left: 8px;
        padding-right: 8px;
        cursor: pointer;
        border-radius: 3px;
    }

    .jh-printlogo{
        height: 18px;
        width: 18px;
    }

    .jh-whitelist:hover,
    .jh-whitelist:active,
    .jh-whitelist:focus {
        background-color: #c7aa26;
        font-weight: 500;
        font-size: 13px;
    }

    .jh-whitelist{
        background-color: rgb(254,208,0);
        border: none;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        width: 140px;
        height: 35px;
        border-radius: 3px;
        color: white;
        outline: none;
        font-weight: 500;
        font-size: 13px;
    }

     .jh-alertbtn1{
        float: right;
        border:none;
        padding: 0px;
     }

    .jh-form {
        width: 230px;
        border-radius: 0px;
        padding-left: 4px;
        padding-right: 4px;
        padding-top: 8px;
        padding-bottom: 0px;
        font-size: 12px;
    }

    .jh-alertbtn{
        float: right;
        border:none;
        padding: 0px;
     }

     .jh-alert{
        padding: 10px;
        margin-bottom: 20px;
        border: 1px solid transparent;
        border-radius: 4px;
        font-size: 12px;
     }

     .jh-droplabel{
        margin-top: 10px;
    }

     .jh-dropSearch{
        background-color: rgb(254,208,0);
        color:white;
        width:100%;
        border: none;
        height: 30px;
        outline: none;
        font-size: 13px;
    }

    .jh-dropSearch:hover{
        background-color: #c7aa26;
        color:white;
    }
    .jh-dropSearch:focus{
        background-color: rgb(234,193,0);
        color:white;
    }

    .jh-dropReset{
        background-color:rgb(159,159,159);
        color:white;
        width:100%;
        border:none;
        height:30px;
        outline: none;
        font-size: 13px;
    }

    .jh-dropReset:hover{
        background-color: rgb(128,128,128);
        color:white;
    }

    .jh-dropReset:focus{
       background-color: rgb(159,159,159);
        color:white;
    }

    .jh-tdhead2{
        text-align: center;
        padding: 10px;
        background-color: rgb(250,250,250);
        color: rgb(128,128,128);
        font-size: 10px;
        font-weight: bold;
    }

    .jh-table2{
        padding: 10px;
        background-color: white;
        border: 2px solid #e2e2e2;
        text-align: left;
        font-size: 10px;
    }

    .jh-norecord{
        font-size:15px;
        padding-bottom: 10px;
        padding-top: 16px;
    }

    .jh-dropdown {
        position: relative;
        display: inline-block;
    }

    .jh-dropdown-content {
        display: none;
        position: absolute;
        min-width: 150px;
        box-shadow: 0px 6px 14px 0px rgba(0,0,0,0.2);
        padding: 10px 12px;
        z-index: 1;
        font-size: 12px;
    }

    .dropdown-menu{
        padding-top: 1px;
        padding-right: 0px;
        padding-left: 0px;
        padding-bottom: 0px;
    }

    .dropdown-menu:hover{
        background-color: rgb(255,255,255);
    }

    .dropdown-menu>li>a:hover {
        color: rgb(234,193,0);
        cursor: pointer;
        padding: 3px 20px 0px;
    }

    .jh-bottomtable{
        padding-bottom: 50px;
    }

    .jh-nofoundfont{
        font-size: 10px;
    }
    .pagination{
        font-size: 12px;
    }
}

@media only screen and  (min-width: 481px) and (max-width: 767px) {

.gk-agents-modal .modal-dialog{
        width: 96%;
    }

    .jh-margintop{
        margin-top: 10px;
    }

    .jh-modalbg{
        background-color: rgb(250,250,250) !important;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 20px;
        padding-left: 20px;
    }

    .alignright{
        text-align: right;
    }

    .jh-modalheader{
        font-size: 17px;
    }


    .jh-searchbox{
        height: 35px;
        width: 90%;
        padding-left: 20px;
        border: none;
        outline: none;
    }

    .jh-searchtext{
        font-family: "ProximaNova";
    }

    .jh-bluetext{
        margin-top: 10px;
        color: rgb(154,173,202);
        font-size: 10px;
    }

    .jh-glyphsearch{
        padding-top: 7px;
        padding-bottom: 28px;
        padding-left: 15px;
        padding-right: 5px;
        background-color: white;
        height: 12px;
    }

    .jh-search{
        background-color: rgb(250,244,219);
        border: none;
        padding: 5px;
        border-radius: 3px;
    }

    .jh-searchtext{
        font-family: "ProximaNova";
        font-size: 10px;
    }

    .jh-advncsearch{
        height: 10px;
        width: 10px;
    }

    .jh-print{
        background-color: rgb(250,244,219);
        border: none;
        padding-bottom: 2px;
        padding-top: 2px;
        padding-left: 5px;
        padding-right: 5px;
        cursor: pointer;
        border-radius: 3px;
    }

    .jh-printlogo{
        height: 14px;
        width: 14px;
    }

    .jh-whitelist:hover,
    .jh-whitelist:active,
    .jh-whitelist:focus {
        background-color: #c7aa26;
        font-weight: 500;
        font-size: 12px;
    }

    .jh-whitelist{
        background-color: rgb(254,208,0);
        border: none;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 3px;
        padding-bottom: 3px;
        width: 140px;
        height: 25px;
        border-radius: 3px;
        color: white;
        outline: none;
        font-weight: 500;
        font-size: 12px;
    }

    .jh-alertbtn1{
        float: right;
        border:none;
        padding: 0px;
     }

    .jh-form {
        width: 200px;
        border-radius: 0px;
        padding-left: 4px;
        padding-right: 4px;
        padding-top: 8px;
        padding-bottom: 0px;
        font-size: 10px;
    }

    .jh-alertbtn{
        float: right;
        border:none;
        padding: 0px;
     }

     .jh-alert{
        padding: 8px;
        margin-bottom: 20px;
        border: 1px solid transparent;
        border-radius: 4px;
        font-size: 10px;
     }

    .jh-droplabel{
        margin-top: 10px;
    }

     .jh-dropSearch{
        background-color: rgb(254,208,0);
        color:white;
        width:100%;
        border: none;
        height: 30px;
        outline: none;
        font-size: 10px;
    }

    .jh-dropSearch:hover{
        background-color: #c7aa26;
        color:white;
    }
    .jh-dropSearch:focus{
        background-color: rgb(234,193,0);
        color:white;
    }

    .jh-dropReset{
        background-color:rgb(159,159,159);
        color:white;
        width:100%;
        border:none;
        height:30px;
        outline: none;
        font-size: 10px;
    }

    .jh-dropReset:hover{
        background-color: rgb(128,128,128);
        color:white;
    }

    .jh-dropReset:focus{
       background-color: rgb(159,159,159);
        color:white;
    }

    .jh-table2 td{
        padding: 9px;
        border-color: #e2e2e2;
        border-left-width: 0;
        border-right-width: 0;
        border-top-width: 0.5px;
        border-bottom-width: 0.5px;
        border-style: solid;
    }

    .jh-tdhead2{
        text-align: center;
        padding: 3px;
        background-color: rgb(250,250,250);
        color: rgb(128,128,128);
        font-size: 10px;
        font-weight: bold;
    }

    .jh-table2{
        padding: 3px;
        background-color: white;
        border: 2px solid #e2e2e2;
        text-align: left;
        font-size: 10px;
    }

    .jh-style i{
        padding: 3px;
        font-size: 8px;
    }

    .jh-norecord{
        font-size:15px;
        padding-bottom: 10px;
        padding-top: 16px;
    }

    .jh-dropdown {
        position: relative;
        display: inline-block;
    }

    .jh-dropdown-content {
        display: none;
        position: absolute;
        min-width: 120px;
        box-shadow: 0px 6px 14px 0px rgba(0,0,0,0.2);
        padding: 10px 12px;
        z-index: 1;
        font-size: 12px;
    }

    .dropdown-menu{
        padding-top: 0px;
        padding-right: 0px;
        padding-left: 0px;
        padding-bottom: 0px;
    }

    .dropdown-menu:hover{
        background-color: rgb(255,255,255);
    }

    .dropdown-menu>li>a:hover {
        color: rgb(234,193,0);
        cursor: pointer;
        padding: 3px 20px 0px;
        padding-top: 1px;
        padding-bottom: 1px;
    }

    .jh-bottomtable{
        padding-bottom: 50px;
    }

    .jh-nofoundfont{
        font-size: 10px;
    }
    .pagination{
        font-size: 10px;
    }
}



@media only screen and  (min-width: 320px) and (max-width: 480px) {

    .gk-agents-modal .modal-dialog{
        width: 96%;
    }

    .jh-margintop{
        margin-top: 10px;
    }

    .jh-modalbg{
        background-color: rgb(250,250,250) !important;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 30px;
        padding-left: 15px;
    }

    .alignright{
        text-align: right;
        padding-right: 0px;
    }

    .jh-modalheader{
        font-size: 17px;
    }

    .jh-glyph{
        color: rgb(211,182,42);
        font-size: 15px;
        float:right;
        cursor: pointer;
    }

    .jh-searchbox{
        height: 35px;
        width: 85%;
        padding-left: 20px;
        border: none;
        outline: none;
    }

    .jh-searchtext{
        font-family: "ProximaNova";
    }

    .jh-bluetext{
        margin-top: 10px;
        color: rgb(154,173,202);
        font-size: 10px;
    }

    .jh-glyphsearch{
        padding-top: 7px;
        padding-bottom: 28px;
        padding-left: 15px;
        padding-right: 5px;
        background-color: white;
        height: 12px;
    }

    .jh-search{
        background-color: rgb(250,244,219);
        border: none;
        padding: 5px;
        border-radius: 3px;
    }

    .jh-searchtext{
        font-family: "ProximaNova";
        font-size: 10px;
    }

    .jh-advncsearch{
        height: 10px;
        width: 10px;
    }

    .jh-print{
        background-color: rgb(250,244,219);
        border: none;
        padding-bottom: 2px;
        padding-top: 2px;
        padding-left: 5px;
        padding-right: 5px;
        cursor: pointer;
        border-radius: 3px;
    }

    .jh-printlogo{
        height: 14px;
        width: 14px;
    }

    .jh-whitelist:hover,
    .jh-whitelist:active,
    .jh-whitelist:focus {
        background-color: #c7aa26;
        font-weight: 500;
        font-size: 12px;
    }

    .jh-whitelist{
        background-color: rgb(254,208,0);
        border: none;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 3px;
        padding-bottom: 3px;
        width: 140px;
        height: 25px;
        border-radius: 3px;
        color: white;
        outline: none;
        font-weight: 500;
        font-size: 12px;
    }

    .jh-alertbtn1{
        float: right;
        border:none;
        padding: 0px;
     }

    .jh-form {
        width: 180px;
        border-radius: 0px;
        padding-left: 4px !important;
        padding-right: 4px !important;
        padding-top: 8px !important;
        padding-bottom: 0px !important;
        font-size: 10px;
    }

    .jh-alertbtn{
        float: right;
        border:none;
        padding: 0px;
     }

     .jh-alert{
        padding: 8px;
        margin-bottom: 20px;
        border: 1px solid transparent;
        border-radius: 4px;
        font-size: 10px;
     }

    .jh-droplabel{
        margin-top: 10px;
    }

     .jh-dropSearch{
        background-color: rgb(254,208,0);
        color:white;
        width:100%;
        border: none;
        height: 30px;
        outline: none;
        font-size: 10px;
    }

    .jh-dropSearch:hover{
        background-color: #c7aa26;
        color:white;
    }
    .jh-dropSearch:focus{
        background-color: rgb(234,193,0);
        color:white;
    }

    .jh-dropReset{
        background-color:rgb(159,159,159);
        color:white;
        width:100%;
        border:none;
        height:30px;
        outline: none;
        font-size: 10px;
    }

    .jh-dropReset:hover{
        background-color: rgb(128,128,128);
        color:white;
    }

    .jh-dropReset:focus{
       background-color: rgb(159,159,159);
        color:white;
    }

    .jh-table2 td{
        padding: 9px;
        border-color: #e2e2e2;
        border-left-width: 0;
        border-right-width: 0;
        border-top-width: 0.5px;
        border-bottom-width: 0.5px;
        border-style: solid;
    }

    .jh-tdhead2{
        text-align: center;
        padding: 3px;
        background-color: rgb(250,250,250);
        color: rgb(128,128,128);
        font-size: 10px;
        font-weight: bold;
    }

    .jh-table2{
        padding: 3px;
        background-color: white;
        border: 2px solid #e2e2e2;
        text-align: left;
        font-size: 10px;
    }

    .jh-style i{
        padding: 3px;
        font-size: 8px;
    }

    .jh-norecord{
        font-size:15px;
        padding-bottom: 10px;
        padding-top: 16px;
    }

    .jh-dropdown {
        position: relative;
        display: inline-block;
    }

    .jh-dropdown-content {
        display: none;
        position: absolute;
        min-width: 120px;
        box-shadow: 0px 6px 14px 0px rgba(0,0,0,0.2);
        padding: 10px 12px;
        z-index: 1;
        font-size: 12px;
    }

    .dropdown-menu{
        padding-top: 0px;
        padding-right: 0px;
        padding-left: 0px;
        padding-bottom: 0px;
    }

    .dropdown-menu:hover{
        background-color: rgb(255,255,255);
    }

    .dropdown-menu>li>a:hover {
        color: rgb(234,193,0);
        cursor: pointer;
        padding: 3px 20px 0px;
        padding-top: 1px;
        padding-bottom: 1px;
    }

    .jh-bottomtable{
        padding-bottom: 50px;
    }

    .jh-nofoundfont{
        font-size: 10px;
    }
    .pagination{
        font-size: 10px;
    }
}

/*
-----------------------------------------------------------------------------------------------------------------------------------


                                            END: JHEYSA'S CSS


-----------------------------------------------------------------------------------------------------------------------------------
*/

/*
-----------------------------------------------------------------------------------------------------------------------------------


                                            START: HANNA'S CSS


-----------------------------------------------------------------------------------------------------------------------------------
*/


#log{
    height: 100%;
    width: 100%;
    position: relative;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: -moz-linear-gradient(left, rgb(254, 208, 0) 0%, rgb(254, 208, 0) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%);
    background: -webkit-linear-gradient(left, rgb(254, 208, 0) 0%, rgb(254, 208, 0) 35%, rgb(255, 255, 255) 35%, rgb(255, 255, 255) 100%);
    background: -o-linear-gradient(left, rgb(254, 208, 0) 0%, rgb(254, 208, 0) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%);
    background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%);
    background: linear-gradient(to right, rgb(254, 208, 0) 0%, rgb(254, 208, 0) 40%, rgb(255, 255, 255) 40%, rgb(255, 255, 255) 100%);
}

.ha-background{
  background-color: rgb(49,57,66);
  min-height: 100%;
  min-width: 100%;
}

.ha-tablewidth{
  width: 80%;
}

.ha-logo{
  width:230px;
  height: auto;
  padding: 31px 0 80px;
}

.ha-dlprinttop{
  padding-top: 50px;
}


.ha-image{
  height:32px;
  width: 35px;
  cursor: pointer;
}

.ha-agent{
  font-size: 18px;
  font-weight: bold;
}


* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.login-btn {
    outline: 0px;
    background-color: #fed000;
    font-weight: 500;
    color: white !important;
    width: 120px;
    font-size: 16px;
}

.login-btn:hover,
.login-btn:active,
.login-btn:focus {
  background-color: #c7aa26;
  font-weight: 500;
  color: white; 
  width: 120px;
  font-size: 16px;
}

#content {
    position: relative;
    z-index: 2;
    padding: 30px;
    text-align: center;
    font-weight: bold;
    font-family: Arial, sans-serif;
}

 .mlogo{
  width: 200px;
  height: 150px;
  margin-top: 250px;
}

.ha-border {
    border-style: none;
    width: 350px;
    padding-top: 200px;  
}

.hw{
  background: #fed000;
 
}

.ha-norecord{
    font-size:20px;
    border-bottom:1px solid #c5c5c5;
    border-top:1px solid #c5c5c5;
    padding-bottom: 10px;
    padding-top: 10px;
}

.hw:hover{
  color: white;
  outline: 0px;
}

 .page-wrapper {
    background-color: rgb(240,240,240) !important;
}

.title{
  font-weight: bold; 
  font-size: 30px; 
  color: grey;
}

 .column01{
    float: left;
    width: 40%;
    height: 694px;
   
 }

 .ha-sizemodal .modal-dialog{
  width: 40%;
}

.ha-sizemodal{
  /*position: absolute;*/
    margin:auto;
}

 .column02{
    float: left;
    width: 60%;
    font-family: "Times New Roman", courier, sans-serif;
    padding-top: 180px;
 }
 
 .pad{
    padding-left: 15px;
 }

 .ebox{
  width: 340px;
  height: 50px;
  font-size: 15px;
 }

 .log{
  outline: 0px; 
  background-color: #fed000; 
  font-weight: bold; 
  color: white;
  width: 35px;
 }

 .ha-alertbtn{
    float: right;
    border:none;
    background-color: rgb(242,222,222);
    height: 15px;
    font-weight: bolder;
    outline: 0px;
 }

  .ha-alertbtn1{
    float: right;
    border:none;
    background-color: rgb(223,240,216);
    width: 10px;
    height: 15px;
    font-weight: bolder;
 /*   padding: 0px; */
    outline: 0px;
 }

 .ha-headerTop {
  color: rgb(220,173,73);
  /*width: 100%;*/
 width: auto;
 position: relative;
 display: inline;
}

.b{
    font-weight: bold;
}

.ha-img{
  height: 60px;
  padding: 13px;
}

.bg{
  cursor: pointer;
  color: white;
  outline: 0px;
  border:none;
   background-color: #fed000;
}

.bg:hover{
    cursor: pointer;
    background-color: #fed000;
}

.ad{
  padding-top: 18px;
  font-weight: bold;
  color: white;
  text-align: right;
  margin-right: 25px;
}

.drop{
  position: relative;
    display: inline-block;
}

.top{
  margin-top: 2px;
}

/* -----------------WALLET DETAILS---------------------         */

.totalNo{
  grid-area: header; 
}

.bor{
  border: none;
  height: 100px;
  width: 300px;
  text-align: left;
  padding-left: 10px;
  padding-top: 20px;
  padding-bottom: 20px;

}

.ha-button:hover,
.ha-button:active,
.ha-button:focus {
  background-color: #c7aa26;
  font-weight: 500;
  font-size: 16px;
}

.ha-button{
  background-color: rgb(254,208,0);
  border: none;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 93%;
  height: 40px;
  border-radius: 3px;
  color: white;
  outline: none;
  font-weight: 500;
  font-size: 16px;
}

.ha-border1 {
    position: static;
    margin-left: 30px;
    border-style: solid;
    background-color: white;
    height: 20%;
    width: 95%;
    display: block;
    border-left: none;
    border-bottom: none;
    border-top: none;
    border-right: none;
    align-content: left;
    font-size: 20px;
    color: gray;
    float: left;

}

    .ha-modalbg {
    background-color: rgb(250,250,250) !important;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-right: 20px;
    padding-left: 20px;
}
          
    .ha-modalxbody{
    margin-left: 10%;
    margin-right: 5%;
    word-break: break-all;
}


.ha-fontTW{
  float: left; 
  font-size: 30px; 
  padding-left: 30px; 
  font-weight: thick;
}

.ha-fontAW{
  padding-left: 30px; 
  float: left; 
  font-size: 25px;
}


.ha-withdraw:hover,
.ha-withdraw:active,
.ha-withdraw:focus {
  background-color: #c7aa26;
  font-weight: 500;
  /*font-size: 15px;*/
}

.ha-withdraw{
  background-color: rgb(254,208,0);
  border: none;
  width: 200px;
  position: relative;
  height: 40px;
  border-radius: 5px;
  color: white;
  outline: none;
  float: right;
  font-size: 15px;
  font-weight: 500;
  margin-top: 27px;
}

.ha-yellowcolor{
  color: rgb(212,182,68);
}

.ha-yellowcolors{
  color: rgb(212,182,68);
  padding-left: 30px;
  font-weight: bolder;
}

.ha-whitelist{
  color:rgb(212,182,68);
  font-size:20px;

}

.ha-glyphsearch{
  padding-top: 14px;
  padding-bottom: 16px;
  padding-left: 15px;
  padding-right: 5px;
  background-color: white;
}

.ha-withdrawlogstxt{
  text-align: left; 
  font-size: 20px; 
  padding-top: 15px;
}

.ha-modalbodyseparator{
  margin-top: 30px;
}

.ha-bgwhite{
  background-color: rgb(255,255,255);
}

.ha-searchbox{
  height: 45px;
  width: 60%;
  padding-left: 20px;
  border: none;
  outline: none;
}

.ha-search{
  background-color: rgb(250,244,219);
  border: none;
  padding: 8px;
}

.ha-form {
    width: 330px;
    border-radius: 0px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 0px;
}

.ha-lightgraybg{
  background-color: rgb(250,250,250) !important;
}

.ha-dropmdcont{
    margin-top: 0px;
    margin-bottom:0px;
}

.ha-dropinput{
    border-bottom:2px solid rgb(220,220,220);
}

.ha-btnposition{
  margin: 0;
  padding: 0;
}

.ha-dropSearch{
    background-color: rgb(254,208,0);
    color:white;
    width:100%;
    border: none;
    height: 35px;
}

.ha-dropSearch:hover{
    background-color: rgb(234,193,0);
    color:white;
}
.ha-dropSearch:focus{
    background-color: rgb(234,193,0);
    color:white;
}

.ha-dropReset{
    background-color:rgb(159,159,159);
    color:white;
    width:100%;
    border:none;
    height:35px;
}

.ha-dropReset:hover{
    background-color: rgb(128,128,128);
    color:white;
}

.ha-dropReset:focus{
   background-color: rgb(128,128,128);
    color:white;
}

.ha-print{
  background-color: rgb(250,244,219);
  border: none;
  padding: 10px;
  cursor: pointer;
}

.ha-margintop{
  margin-top: 20px;
}


.ha-overflow{
  overflow: auto;
}

.ha-tdhead2{
  text-align: center;
  color: gray;
  padding: 20px;
  background-color: rgb(250,250,250);
  font-weight: bold;
  font-size: 13px;
}

.ha-table2{
  border: 0.5px solid #e2e2e2;
  padding: 20px;
  background-color: rgb(255,255,255);
  border: 2px solid rgb(242,239,225);
  text-align: left;
}

.ha-table2 td{
  padding: 20px;
  border-color: #e2e2e2;
}

.h{
  border-left: 0.5px solid #e2e2e2;
  border-top: 0.5px solid #e2e2e2;
  border-bottom: 0.5px solid #e2e2e2;
}

.a{
  border-top: 0.5px solid #e2e2e2;
  border-bottom: 0.5px solid #e2e2e2;
}

.n{
  border-top: 0.5px solid #e2e2e2;
  border-bottom: 0.5px solid #e2e2e2;
}

.d{
  border-top: 0.5px solid #e2e2e2;
  border-bottom: 0.5px solid #e2e2e2;
}

.y{
  border-top: 0.5px solid #e2e2e2;
  border-bottom: 0.5px solid #e2e2e2;
}

.l{
  border-top: 0.5px solid #e2e2e2;
  border-bottom: 0.5px solid #e2e2e2;
  border-right: 0.5px solid #e2e2e2;
}

.ha-dropdown {
    position: relative;
    display: inline-block;
}

.ha-paddingtable{
  border-collapse:separate; 
  border-spacing:0 1em;
}

.ha-glyph{
  color:rgb(211,182,42);
  font-size: 30px;
  float:right;
  cursor: pointer;
  outline: 0px;
}

.ha-dropdown {
    position: relative;
    display: inline-block;
}

.ha-modalbg{
  background-color: rgb(250,250,250) !important;
  padding-top: 50px;
  padding-bottom: 50px;
  padding-right: 50px;
  padding-left: 50px;
}

.alright{
  text-align: right;
}

.gk-wallet-agent .modal-dialog{
  width: 95%;
}

.dropdown-menu{
  padding-top: 0px;
  padding-right: 0px;
  padding-left: 0px;
  padding-bottom: 0px;
}

.dropdown-menu:hover{
  background-color: rgb(255,255,255);
}

.dropdown-menu>li>a:hover {
  color: rgb(234,193,0);
}

.md-option {
   z-index:3000;
}

.textstyle{
  font-family: "ProximaNova";
}


.ha-margin{
  background-color: white;
  margin-top: 30px;
  margin-left: 140px;
  margin-right: 140px;
  margin-bottom: 30px;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 20px;
  padding-bottom: 50px;
}

.ha-table{
  padding: 10px;
  box-shadow: 0px 1px rgb(220,220,220);
}

.ha-modalbody{
  margin-left: 10%;
  margin-right: 5%;
}

.ha-moblabel{
    color: rgb(120,136,132);
    width: 93% !important;
}

.ha-moblabel1{
  color: rgb(120,136,132);
  font-weight: bold;
}

.ha-inputnum{
  width:93%;
  height: 35px;
}

input.ebox {
    color: #5d5e5e;
    font-size: 14px;
    font-weight: normal;
    font-family: Helvetica;
}

.login-alert {
  position: fixed;
  margin-top: -100px;
  width: 340px;
}

.mrleft{
  margin-left: 100px;
}

/*---------------------------------Mobile Responsive--------------------------------------------*/



        @media screen and (max-width: 655px) {

            .ha-sizemodal .modal-dialog{
                width: auto;
            }

           #log{
            height: auto;
              position: relative;
              top: 0;
              bottom: 0;
              right: 0;
              left: 0;
              background: -moz-linear-gradient(top, rgb(254, 208, 0) 0%, rgb(254, 208, 0) 20%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 100%);
              background: -webkit-linear-gradient(top, rgb(254, 208, 0) 0%, rgb(254, 208, 0) 20%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 100%);
              background: -o-linear-gradient(top, rgb(254, 208, 0) 0%, rgb(254, 208, 0) 20%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 100%);
              background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 20%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 100%);
              background: linear-gradient(to bottom, rgb(254, 208, 0) 0%, rgb(254, 208, 0) 50px, rgb(255, 255, 255) 50px, rgb(255, 255, 255) 100%);
          }
          * {
              -webkit-box-sizing: border-box;
              -moz-box-sizing: border-box;
              box-sizing: border-box;
          }

          .mlogo{
            width: auto;
            height: 30px;
            float: left;
            margin-top: 8px;
          }

          .ha-border {
            padding-left: 20px;
          }

          .title {
            font-size: 27px;
          }
}

    @media screen and (max-width: 4000px) {

        .mrleft {
            float: right;
            margin: 0 !important;
        }
    }

        @media screen and (max-width: 375px) {
           .ha-border {
            padding-top: 180px;
            padding-left: 10px;
            width: 310px;
          }

          .title {
            font-size: 26px;
          }

          input.ebox {
            width: 100%;
          }

          .login-alert {
            width: 310px !important;
          }
}

        @media screen and (max-width: 330px) {

            .ha-border {
            padding-top: 150px;
            padding-left: 5px;
            width: 270px;
          }

          .title {
            font-size: 20px;
          }

          input.ebox {
            width: 100%;
          }

          .login-alert {
            width: 270px !important;
          }
}          

         @media screen and (max-width: 330px) {
           .ha-border {
            padding-top: 150px;
            padding-left: 5px;
            width: 270px;
          }

          .title {
            font-size: 20px;
          }

          input.ebox {
            width: 100%;
          }

          .login-alert {
            width: 270px !important;
          }  
}

/*----------------------------------------------------------------------------------------------------*/
          /* ##Device = Tablets, Ipads (portrait)
              ##Screen = B/w 768px to 1024px*/
         @media only screen and (min-width: 901px) and (max-width: 991px) {
         .mlogo{
          width: 200px;
          height: 150px;
          margin-top: 250px;
          margin-left: 55px;
          float: left;
          }

        .ha-border {
          border-style: none;
          width: 350px;
          padding-top: 200px; 
          margin-left: 385px; 
          }
}         

          @media only screen and (min-width: 656px) and (max-width: 739px) {
        
         .mlogo{
          width: 200px;
          height: 150px;
          margin-top: 250px;
          margin-left: 25px;
          float: left;
          }
 
         .ha-border {
          border-style: none;
          width: 350px;
          padding-top: 200px; 
          margin-left: 280px; 
          }
} 

         @media only screen and (min-width: 740px) and (max-width: 900px) {
         .mlogo{
          width: 200px;
          height: 150px;
          margin-top: 250px;
          margin-left: 40px;
          float: left;
          }

        .ha-border {
          border-style: none;
          width: 350px;
          padding-top: 200px; 
          margin-left: 360px; 
          }
}

/*------------------------------------------MOB------------------------------------------------------*/

@media only screen and (max-width: 600px) {

    .gk-wallet-agent .modal-dialog .row{
        margin: 0 !important;
    }

    .gk-wallet-agent .modal-dialog .col-md-12, .gk-wallet-agent .modal-dialog .col-md-11,
    .gk-wallet-agent .modal-dialog .col-md-10, .gk-wallet-agent .modal-dialog .col-md-9,
    .gk-wallet-agent .modal-dialog .col-md-8, .gk-wallet-agent .modal-dialog .col-md-7,
    .gk-wallet-agent .modal-dialog .col-md-6, .gk-wallet-agent .modal-dialog .col-md-5,
    .gk-wallet-agent .modal-dialog .col-md-4, .gk-wallet-agent .modal-dialog .col-md-3,
    .gk-wallet-agent .modal-dialog .col-md-2, .gk-wallet-agent .modal-dialog .col-md-1{
        padding: 0 !important;
    }


    .ha-modalbg {
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 20px;
        padding-left: 15px;
    }

    .ha-withdrawlogstxt {
        font-size: 17px;
        padding: 0;
        font-weight: normal;
    }

    .ha-fontTW {
        font-size: 13px;
        font-weight: bold;
        padding-left: 0;
    }

    .ha-fontAW {
        font-size: 12px;
        padding-left: 0;
    }

    .ha-withdraw {
        width: 150px;
        height: 35px;
        text-align: center;
        font-size: 12px;
        margin: 0 !important;
    }

    .ha-search{
        padding: 5px;
        border-radius: 3px;
        font-size: 12px;
    }

    .ha-border1 {
        position: relative;
        margin-left: 0 !important;
    }

    .ha-quicksrchfrm {
     display: none !important;
    }

    .ha-tdhead2 {
        font-size: 11px;
        padding: 0 5px;
    }

    .ha-table2 td {
        padding: 5px;
        font-size: 10px;
    }

    p.ha-withdrawlogstxt {
        text-align: left;
        font-size: 12px;
        padding: 0;
        margin-bottom: 0;
        margin-top: 10px;
    }

    .ha-dropdown {
        float: right;
    }

    .gk-wallet-agent .modal-dialog .ha-modalbodyseparator {
        margin-top: 20px !important;
        padding: 0 !important;
    }

    .gk-wallet-agent .modal-dialog .twgrid-container {
        padding: 10px !important;
        width: 100%;
        /*grid-template-areas: 'twlblgrid twvalgrid'
        'twbtngrid twbtngrid';
        grid-template-columns: 50% 50%;*/
    }


    .totalwalletlblgrid {
        height: 20px;
    }

    md-input-container.md-block {
        font-size: 11px;
        margin-top: 12px !important;
    }

    .gk-wallet-agent .modal-dialog .adv-srch-row>div{
        padding: 0px 10px !important;
    }

    .ha-lightgraybg>div.row {
        width: 200px;
    }

    .ha-lightgraybg form.ha-form {
        width: 100%;
    }

}




/*
-----------------------------------------------------------------------------------------------------------------------------------


                                            END: HANNA'S CSS


-----------------------------------------------------------------------------------------------------------------------------------
*/

/*
-----------------------------------------------------------------------------------------------------------------------------------


                                            START: FARINA'S CSS


-----------------------------------------------------------------------------------------------------------------------------------
*/

.fa-img{
  float: left;
  height: 40px;
  padding-left:0px;
  padding-top: 0px;
}

.fa-bg{
    position: absolute;
    top: 0;
    left: 0;
    /* margin-right: 50px; */
    margin-left: 0px;
    padding: 7px 60px 7px 50px;
    float: left;
    height: 55px;
    background-color: #fed000;
    border-radius: 0px 0px 20px 0px;
}

.fa-x{
  color: rgb(211,182,42);
  font-size: 30px;
  top: 25px;
  right: 30px;
  z-index: 1;
  position: absolute;
  cursor: pointer;
}

.fa-modalheader{
  margin-left: 0;
  padding: 0 30px;
  padding-left: 225px;
}

.fa-tdhead2{
  font-size:13px;
  text-align: left;
  padding-top: 0px;
  padding-bottom: 0px;
  /*padding-left: 50px;*/
  margin-left: 5px;
  margin-right: 40px;
  color: #333;
 
}

.fa-tdhead3 {
  color:black;
  font-size:13px;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-left: 5px;
  margin-right: 30px;
 
}

.gk-manage-agent .modal-dialog{
  width: 70%;
}

.fa-content {
    position: relative;
    margin: auto;
    padding: 0;
}

.fa-font1{
  text-align: left;
  margin-right: 30px;
  font-size: 12px;
  color:black;
  padding-top: 0px;

}

.fa-font2{
  text-align: left;
  font-size: 12px;
  color: black;
}

.fa-font3{
  float: right;
  padding-right: 50px;
  margin-top: 10px;
  font-size: 12px;
  color:black;
}

.fa-address{
  color:black;
  font-size:12px;
  text-align: left;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 30px;
  margin-right: 50px;
 
}

.fa-state{
  color:black;
  font-size:20px;
  text-align: left;
  /*padding-top: 60px;*/
  padding-bottom: 5px;
  /*padding-left: 30px;*/
  margin: 0;
}

.fa-ID{
  text-align: center;
  font-size: 12px;
  /*margin-left: 150px*/


}

.fa-code1{
  text-align: right;
  font-size: 12px;
  /*margin-left: 160px;*/
}

.fa-table{
  color:black;
  font-size:13px;
  text-align: left;
  padding-top: 60px;
  padding-bottom: 5px;
  padding-left: 30px;
  margin-left: 30px;
}

.fa-table2{
  padding: 10px;
  box-shadow: 0px 1px rgb(220,220,220);
}

.fa-margintop{
  margin-top: 20px;
}

.fa-overflow{
  overflow: auto;
}
.fa-paddingtable{
  border-collapse:separate; 
  border-spacing:0 1em;
}
.fa-tdhead{
  text-align: center;
  color: black;
  font-weight: bolder;
  padding: 10px;

}

.fa-padding{
  padding: 10px;
  text-align: right;
  margin-left: 60px;
}

.fa-table2{
    padding: 30px;
    background-color: rgb(255,255,255);
    border: 2px solid rgb(236, 239, 241);
    text-align: right;
    border-left: 0;
    border-right: 0;
}

.fa-background{
  background-color: rgb(49,57,66);
  height: 100%;
  width: 100%;
}

.fa-margin{
  background-color: white;
  margin: 0 150px;
  /*margin-top: 30px;
  margin-left: 60px;
  margin-right: 60px;
  margin-bottom: 30px;*/
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 20px;
  padding-bottom: 50px;
  /*height: 95%;
  width: 95%;*/
}

.fa-logo{
  /*width:230px;
  height: 230px;*/
  width: 100%;
  height: auto;
  padding: 0px;
}

.-dlprinttop{
  padding-top: 50px;
}

.fa-image{
  height:32px;
  width: 35px;
  cursor: pointer;
}

.fa-statepadding{
  padding: 30px;
}

.fa-status{
  font-weight: bold;
}
.fa-agent{
  font-size: 18px;
  font-weight: bold;
}

.fa-print1{
  background-color: rgb(250,244,219);
  border: none;
  padding: 10px;
  cursor: pointer;
  float: right;
  margin-right: 7px;
}

.fa-row1{
  margin: 0;
  margin-bottom: 60px;
  position: relative;
}

  .barcode {
    font-weight: normal; 
    font-style: normal; 
    /*float: right;
    margin-right: 200px;*/
    padding-top: 0px;
    font-family: 'BarcodeFont';
    font-size: 80px;
  }


#ModalSOA {
    padding: 20px 40px;
    position: relative;
}

.fa-dlprinttop {
    position: absolute;
    top: 0;
    right: 0;
}

.fa-alermessagetbtn{
  float: right;
  border:none;
  background-color: rgb(242,222,222);
  padding: 0px;
  margin-right: 10px;
}

.fa.alertmsgcss{
  width: 100%;
  height: 30px;
  position: absolute;
  left: 0;
}

.fa-border{
  background: #eceff1;
  border-radius: 15px; 
  padding: 30px;
}

.fa-bordertop{
  margin: 0;
  margin-bottom: 30px;
}

.fa-tdbody1{
  font-size: 12px; 
  text-align: center;
}

.fa-tdbody2{
 font-size: 12px;
 padding-left: 20px;
}

.fa-tdbody3{
  font-size: 12px;
  text-align: right;
  padding-right: 10px;
}

/*
-----------------------------------------------------------------------------------------------------------------------------------


                                            END: FARINA'S CSS


-----------------------------------------------------------------------------------------------------------------------------------
*/


/* MOB */

@media screen and (max-width: 600px) {
    .jh-quicksrchfrm {
        display: none;
    }

    .advance_srch_btn span {
        display: none;
    }

    .advance_srch_btn {
        width: 34px;
    }

}

pagination {
    width: 100%;
}

@media only screen and (max-width: 380px) {
    .tap-amntpay {
        width: 120px !important;
    }
}

.table-responsive {
    border: 0 !important;
}