/*

    Author Css: Mehrdad Khodaei

    Color Scheme Switcher
    
    ---------------- Info ----------------
    
    Email:          mkhodaii@itshams.ir - mehrdadkhodaei18@gmail.com
    Phone:          +98 933 805 9497
    
    Powerd By:		ITShams Company - https://www.itshams.ir/

*/

/*---------------------- Public Style ---------------------*/

#scheme_color{

    
}
#scheme_color #view_colors{

    position: relative;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #fff;
    z-index: 99;
}
#scheme_color .list-colors .clr{

    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;    
    border-radius: 100%;    
    right: 8px;    
    top: 0;    
    transition: all 0.5s;
}
#scheme_color .list-colors .clr.active::after,
#scheme_color .list-colors .clr::after{

    content: "";
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #fff;
    position: absolute;
    transition: all 0.3s;
}
#scheme_color .list-colors .clr::after{

    width: 0;
    height: 0;
    opacity: 0;
}
#scheme_color .list-colors .clr:hover::after{

    opacity: 0.3;
    width: 10px;
    height: 10px;
}
#scheme_color .list-colors .clr.active::after{

    opacity: 1;
}
#scheme_color .list-colors{

    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
}
#scheme_color .list-colors.view{
    
    opacity: 1;
    visibility: visible;
    transition: all 0.5s;
}
#scheme_color .list-colors.view .clr-default{

    background-color: #2a64cc;
    border: 3px solid #4f88ec;
    top: -40px;
    transition: all 0.5s;
}
#scheme_color .list-colors.view .clr-pink{

    background-color: #880E4F;
    border: 3px solid #E91E63;
    top: -80px;
    transition: all 0.5s;
}
#scheme_color .list-colors.view .clr-green{

    background-color: #33691E;
    border: 3px solid #8BC34A;
    top: -120px;
    transition: all 0.5s;
}
#scheme_color .list-colors.view .clr-gray{

    background-color: #263238;
    border: 3px solid #607D8B;
    top: -160px;
    transition: all 0.5s;
}

/*---------------------- /Public Style ---------------------*/

/*---------------------- Color Scheme Number 1  ---------------------*/


body.clr-green .header-main .header-options {
    background-color: #7fac63;
}
body.clr-green .header-main .header-options .input-group>.input-group-addon{
    background-color: #7fac63;
    color: #fff;
}
body.clr-green .header-main .header-options .date-time {
    color: #fff;
}
body.clr-green .header-main .nav-nigc .hv-navbar {
    background-color: #7fac63;
}
body.clr-green .header-main .nav-nigc .hv-navbar .navbar-nav>li>a {
    color: #fff;
}
body.clr-green .header-main .nav-nigc .hv-navbar .navbar-nav>li>a:hover{
    color: #fff;
}
body.clr-green .services-site .quick-access .list-items .box-acs {
    background-color: #7fac63;
}
body.clr-green .services-site .quick-access .list-items .box-acs>i{
    color: #f5f5f5;
}
body.clr-green .services-site .quick-access .list-items .box-acs>svg path {
    fill: #ffffff;
}

/*---------------------- /Color Scheme Number 1  ---------------------*/

/*---------------------- Color Scheme Number 2  ---------------------*/


body.clr-pink .header-main .header-options {
    background-color: #e91e63;
}
body.clr-pink .header-main .header-options .input-group>.input-group-addon{
    background-color: #e91e63;
    color: #fff;
}
body.clr-pink .header-main .header-options .date-time {
    color: #fff;
}
body.clr-pink .header-main .nav-nigc .hv-navbar {
    background-color: #dd1c5e;
}
body.clr-pink .header-main .nav-nigc .hv-navbar .navbar-nav>li>a {
    color: #fff;
}
body.clr-pink .header-main .nav-nigc .hv-navbar .navbar-nav>li>a:hover{
    color: #fff;
}
body.clr-pink .services-site .quick-access .list-items .box-acs {
    background-color: #dd1c5e;
}
body.clr-pink .services-site .quick-access .list-items .box-acs>i{
    color: #f5f5f5;
}
body.clr-pink .services-site .quick-access .list-items .box-acs>svg path {
    fill: #ffffff;
}
/*---------------------- /Color Scheme Number 2  ---------------------*/

/*---------------------- Color Scheme Number 3  ---------------------*/


body.clr-gray .header-main .header-options {
    background-color: #607d8b;
}
body.clr-gray .header-main .header-options .input-group>.input-group-addon{
    background-color: #607d8b;
    color: #fff;
}
body.clr-gray .header-main .header-options .date-time {
    color: #fff;
}
body.clr-gray .header-main .nav-nigc .hv-navbar {
    background-color: #607d8b;
}
body.clr-gray .header-main .nav-nigc .hv-navbar .navbar-nav>li>a {
    color: #fff;
}
body.clr-gray .header-main .nav-nigc .hv-navbar .navbar-nav>li>a:hover{
    color: #fff;
}
body.clr-gray .services-site .quick-access .list-items .box-acs {
    background-color: #607d8b;
}
body.clr-gray .services-site .quick-access .list-items .box-acs>i{
    color: #f5f5f5;
}
body.clr-gray .services-site .quick-access .list-items .box-acs>svg path {
    fill: #ffffff;
}

/*---------------------- /Color Scheme Number 3  ---------------------*/