.div1, .div2, .div3.navbar{    padding: 0rem 1rem !important;}
.navbar .navbar-nav .nav-item {    
    //padding-right: 1.5rem !important;    
    //padding-left: 1.5rem !important;    
    color: #595959;  }
ul.navbar-nav > li::after {
    content:"|";    
    font-size: 16px;    
    font-weight: lighter;    
    //float: right;    
    color: #595959;    
    padding-left: 1rem;    
    padding-right: 1rem;}  
ul.navbar-nav > li.nav-item{    
    width: max-content;}
ul.navbar-nav > li.nav-item:first-of-type {     
    padding-right: 0rem !important;}
ul.navbar-nav > li:last-of-type::after  {    
    content:"";}
.nav-item > a.h4{    
    font-weight: 400;    text-decoration: none;}
.input-group-prepend > span{    
    padding: 8px;    
    background-color: white;    
    border-right: 0px;    
    color: #a9a9a9;}
.input-group > .form-control{    
    border-left: 0px;    
    border-top-right-radius: 0.25rem !important;    
    border-bottom-right-radius: 0.25rem !important;}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after{    
    background-color: white;    
    /*border: .2px solid #a9a9a9 !important;    
    background-color: white !important;*/    
    //border-radius: 0.25rem !important;    
    background-image: url(../images/checkbox.png) !important;    
    background-repeat: no-repeat;    
    background-size: cover;}
.login-btn {    
    color: #fff;    
    background-color: #0094d3;    
    border-color: #007bff;}
span.head-icons{    
    font-size: 60px;    
    color: #43aa34;}
span.head-dtl{    
    color: #999999;    
    line-height: 16px;    
    font-size: 14px;}
.carousel-indicators{    
    float: left !important;    
    bottom: 10%;}
.carousel-indicators > li{    
    width: 15px;    
    height: 15px;    
    border-radius: 50%;    
    color: white;}
.carousel-indicators > li.active{    
    border: 1px solid white;    
    background-color: #fff0;}
header{    
    height: auto !important;}
.welcomeuser{    
    width: 14%;    
    height: auto;}
.welcomeusertitle{    
    min-width: 40px;}
.headlink > li.h2{    
    margin-bottom: 0px;}
.headlink-item > span{    
    color: white;    
    font-weight: 400;        
    vertical-align: sub;}
a.headlink-link{    
    color: white;    
    text-decoration: none;}
a.onboardtitle{    
    text-decoration: none;}
.onboardtitle >h3{    
    color: white;    
    font-weight: 300;}
.onboardtitle >h3 > span{    
    font-weight: 500;}
.alertpara1{    
    color: #575756;    
    font-size: 24px;}
.jumbotron {    
    padding: 2rem 2rem !important;}
.card-body{    
    padding:1.25rem 0rem;}
.divbody{   
    padding-left: 10px !important;   
    padding-right: 10px !important;}
.div1{        
    width: 100%;        
    height: 100%;        
    max-height: 284px;        
    background: url(../images/buttons/newjoiner2.png);        
    background-image: url(../images/buttons/newjoiner1.png);                
    background-repeat: no-repeat;        
    background-size: contain;}
.div1:hover{    
    background-image: url('../images/buttons/newjoiner2.png');    
    background-repeat: no-repeat;    
    background-size: contain;}
.div2{        
    width: 100%;        
    height: 100%;        
    max-height: 284px;        
    background-image: url(../images/buttons/linemanager1.png);        
    background-repeat: no-repeat;        
    background-size: contain;}
.div2:hover{    
    background-image: url('../images/buttons/linemanager2.png');    
    background-repeat: no-repeat;    
    background-size: contain;}
.div3{        
    width: 100%;        
    height: 100%;        
    max-height: 284px;        
    background-image: url(../images/buttons/buddy1.png);        
    background-repeat: no-repeat;        
    background-size: contain;}
.div3:hover{    
    background-image: url('../images/buttons/buddy2.png');    
    background-repeat: no-repeat;    
    background-size: contain;}
.card{    
    height: 100 !important;}
.card-body > p{    
    font-size: 20px;}
.alertpara2{    
    text-align: center !important;    
    color: #575756;}
.div4{        
    width: 100%;        
    height: 100%;        
    max-height: 284px;        
    background-image: url(../images/buttons/day1.png);        
    background-repeat: no-repeat;        
    background-size: contain;}
.div4:hover{    
    background-image: url('../images/buttons/day2.png');    
    background-repeat: no-repeat;    
    background-size: contain;}
.div5{        
    width: 100%;        
    height: 100%;        
    max-height: 284px;        
    background-image: url(../images/buttons/week1.png);        
    background-repeat: no-repeat;        
    background-size: contain;}
.div5:hover{    
    background-image: url('../images/buttons/week2.png');    
    background-repeat: no-repeat;    
    background-size: contain;}
.div6{        
    width: 100%;        
    height: 100%;        
    max-height: 284px;        
    background-image: url(../images/buttons/month1.png);        
    background-repeat: no-repeat;        
    background-size: contain;}
.div6:hover{    
    background-image: url('../images/buttons/month2.png');    
    background-repeat: no-repeat;    
    background-size: contain;}
.div7{        
    width: 100%;        
    height: 100%;        
    max-height: 284px;        
    background-image: url(../images/buttons/months1.png);        
    background-repeat: no-repeat;        
    background-size: contain;}
.div7:hover{    
    background-image: url('../images/buttons/months2.png');    
    background-repeat: no-repeat;    
    background-size: contain;}
.btn-paragraph > a{    
    color: white;    
    background: linear-gradient(to bottom, #78c3e6,#4eb0de);    
    padding: 0px 8px;    
    border-radius: 8px;    
    font-size: inherit;    
    vertical-align: unset;}
.btn-paragraph > a:hover {    
    color: #ffffff;    
    background: linear-gradient(to bottom, #69b5d9,#47a9d7);}
.linemanager{    
    padding-left: 0px;    
    padding-right: 0px;}
.alertpara3{    
    text-align: center !important;    
    color: #575756;    
    font-size: 24px;}
.btnone{        
    width: 100%;        
    height: 100;        
    //max-height: 56px;        
    background-image: url(../images/buttons/lbone1.png);        
    background-repeat: no-repeat;        
    background-size: contain;}
.btnone:hover{    
    background-image: url('../images/buttons/lbone2.png');    
    background-repeat: no-repeat;    
    background-size: contain;}
.btntwo{        
    width: 100%;        
    height: 100;        
    //max-height: 56px;        
    background-image: url(../images/buttons/lbtwo1.png);        
    background-repeat: no-repeat;        
    background-size: contain;}
.btntwo:hover{    
    background-image: url('../images/buttons/lbtwo2.png');    
    background-repeat: no-repeat;    
    background-size: contain;}
.btnthree{        
    width: 100%;        
    height: 100;        
    //max-height: 56px;        
    background-image: url(../images/buttons/lbthree1.png);        
    background-repeat: no-repeat;        
    background-size: contain;}
.btnthree:hover{    
    background-image: url('../images/buttons/lbthree2.png');    
    background-repeat: no-repeat;    
    background-size: contain;}
.btnfour{        
    width: 100%;        
    height: 100;        
    //max-height: 56px;        
    background-image: url(../images/buttons/lbfour1.png);        
    background-repeat: no-repeat;        
    background-size: contain;}
.btnfour:hover{    
    background-image: url('../images/buttons/lbfour2.png');    
    background-repeat: no-repeat;    
    background-size: contain;}
.btnfive{        
    width: 100%;        
    height: 100;        
    //max-height: 56px;        
    background-image: url(../images/buttons/lbfive1.png);        
    background-repeat: no-repeat;        
    background-size: contain;}
.btnfive:hover{    
    background-image: url('../images/buttons/lbfive2.png');    
    background-repeat: no-repeat;    
    background-size: contain;}
.tables th{    
    border-top: none;    
    padding: 0rem 0.5rem 0rem 0rem;    
    padding-bottom: 20px;}
.tables td{    
    font-size: 22px;    
    color: #515150;    
    padding: 20px 10px;    
    border: 2px solid #fff;}
.img-fluid {    
    padding-bottom: 5px;}
.normalfont{    
    color: #575756;    
    font-weight: normal;}
.jumbotron-hdng{    
    font-size: 24px;}
.onboard-img{    
    width: 70px;    
    height: 70px;}
.onboard-imghdng{    
    font-weight: bold;    
    margin-left: 5px;    
    font-size: 22px;}
@media (min-width: 576px) {
    
}
@media (min-width: 768px) {
    
}
@media (min-width: 992px) {
    
}
@media (max-width: 1200px) {    
    li.nav-item > a.h4{        
        font-size: 1.2rem;    }    
    ul.navbar-nav > li::after {        
        padding-left: 0.1rem;        
        padding-right: 0.5rem;    }    
    .alertpara1{        
        font-size: 14px;    }
}
@media (min-width: 1200px) and (max-width: 1599px) {
    li.nav-item > a.h4 {
        font-size: 1.1rem;    }    
    .navbar .navbar-nav .nav-item {        
        line-height: 1;    }    
    span.head-icons {        
        font-size: 40px;    }    
    span.head-dtl {        
        font-size: 10px;        
        //font-weight: bold;    
    }    
    .alertpara1{        
        font-size: 14px;    }    
    .normalfont{        
        font-size: 14px;    }    
    .card-body > p{        
        font-size: 14px;     }    
    .jumbotron-hdng{        
        font-size: 14px;    }    
    .onboard-img{        
        width: 50px !important;        
        height: 50px !important;    }    
    .onboard-imghdng{        
        font-size: 16px;    }    
    .div1,.div2,.div3{        
        min-height: 240px;    }    
    .div4,.div5,.div6,.div7{        
        min-height: 310px;    }    
    .alertpara3{        
        font-size: 14px;    }    
    .btnone,.btntwo,.btnthree,.btnfour,.btnfive{        
        height: 60px;    }    
    .tables td{        
        font-size: 16px;    }
}
@media (min-width: 1600px) and (max-width: 1900px){    
    li.nav-item > a.h4{        
        font-size: 1.2rem;    }    
    ul.navbar-nav > li::after {        
        padding-left: 0.1rem;        
        padding-right: 0.5rem;    }    
    .img-fluid {        
        max-width: 110%;        
        height: auto;    }    
    span.head-icons {        
        font-size: 50px;    }    
    span.head-dtl {        
        line-height: 24px;        
        font-size: 13px;    }    
    li.nav-item > a.h4 {        
        font-size: 1.30rem;    }    
    ul.navbar-nav > li.nav-item:first-of-type {        
        padding-right: 0.5rem !important;    }    
    ul.navbar-nav > li::after {        
        padding-left: 0.6rem;        
        padding-right: .2rem;    }    
    li.nav-item > a.h4{        
        padding-left: 0.5rem;    }    
    small, .small {        
        font-size: 70%;    }    
    .carousel-indicators {        
        bottom: 20%;    }    
    .alertpara1 {        
        font-size: 18px;    }    
    .div1,.div2,.div3{        
        min-height: 240px;    }    
    .div4,.div5,.div6,.div7{        
        min-height: 310px;    }    
    .alertpara3 {        
        font-size: 20px;    }
}
@media screen and (-webkit-min-device-pixel-ratio:0) {     
    /* Safari and Chrome, if Chrome rule needed */    
    ::i-block-chrome,body {         
        background-color: #fff;        }    
    ::i-block-chrome,span.head-icons {            
        font-size: 40px;        }    
    ::i-block-chrome,.navbar{            
        padding: 0;        }    
    ::i-block-chrome,.navbar-brand{            
        width: 100%;            
        padding-bottom: 0;        }    
    ::i-block-chrome,.safari-nav{            
        display: block !important;        }    
    ::i-block-chrome,.form-control{            
        padding: 0;            
        line-height: 0;        }    
    ::i-block-chrome,.custom-control-label>small{            
        font-size: 50%;        }    
    ::i-block-chrome,a.pull-right > small{            
        font-size: 50%;        }    
    ::i-block-chrome,header{            
        margin-top: 10px;        }    
    ::i-block-chrome,.bg-gradint{        
        background: -webkit-linear-gradient(right, #45AB35,#25A07F,#0094D2);    }    
    ::i-block-chrome,.img-fluid{        
        padding-bottom:0;    }    
    ::i-block-chrome,.btn-paragraph > a {        
        background: -webkit-linear-gradient(bottom, #78C3E6,#4EB0DE);        
        vertical-align: unset;    }    
    @media only screen and (max-device-width: 1200px) {        
        li.nav-item > a.h4{            
            font-size: 1.2rem;        }        
        ul.navbar-nav > li::after {            
            padding-left: 0.1rem;            
            padding-right: 0.5rem;        }        
        .alertpara1{            
            font-size: 14px;        }        
        .normalfont{            
            font-size: 14px !important;        }    
    }    
    @media only screen and (min-device-width : 1200px) and (max-device-width : 1599px){        
        li.nav-item > a.h4 {            
            font-size: 1.1rem;        }        
        .navbar .navbar-nav .nav-item {            
            line-height: 1;        }        
        span.head-icons {            
            font-size: 40px;        }        
        span.head-dtl {            
            font-size: 10px;            
            //font-weight: bold;        
        }        
        .alertpara1{            
            font-size: 14px;        }        
        .normalfont{            
            font-size: 14px;        }        
        .card-body > p{            
            font-size: 14px;         }        
        .jumbotron-hdng{            
            font-size: 14px;        }        
        .onboard-img{            
            width: 50px !important;            
            height: 50px !important;        }        
        .onboard-imghdng{            
            font-size: 16px;        }        
        .div1,.div2,.div3{            
            min-height: 240px;        }        
        .div4,.div5,.div6,.div7{            
            min-height: 310px;        }        
        .alertpara3{            
            font-size: 14px;        }        
        .btnone,.btntwo,.btnthree,.btnfour,.btnfive{            
            height: 60px;        }        
        .tables td{            
            font-size: 16px;        }    
    }    
    @media only screen and (min-device-width : 1600px) and (max-device-width : 1900px){        
        li.nav-item > a.h4{            
            font-size: 1.2rem;        }        
        ul.navbar-nav > li::after {            
            padding-left: 0.1rem;            
            padding-right: 0.5rem;        }        
        .img-fluid {            
            max-width: 110%;            
            height: auto;        }        
        span.head-icons {            
            font-size: 50px;        }        
        span.head-dtl {            
            line-height: 24px;            
            font-size: 13px;        }        
        li.nav-item > a.h4 {            
            font-size: 1.30rem;        }        
        ul.navbar-nav > li.nav-item:first-of-type {            
            padding-right: 0.5rem !important;        }        
        ul.navbar-nav > li::after {            
            padding-left: 0.6rem;            
            padding-right: .2rem;        }        
        li.nav-item > a.h4{            
            padding-left: 0.5rem;        }        
        small, .small {            
            font-size: 70%;        }        
        .carousel-indicators {            
            bottom: 20%;        }        
        .alertpara1 {            
            font-size: 18px;        }        
        .div1,.div2,.div3{            
            min-height: 240px;        }        
        .div4,.div5,.div6,.div7{            
            min-height: 310px;        }        
        .alertpara3 {            
            font-size: 20px;        }    
    }
}