@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap");
:root {
--primary-font: 'Poppins', sans-serif;
--h1-size: 4rem;
--h1-weight: 600;
--h2-size: 3rem;
--h2-weight: 600;
--h3-size: 1.5rem;
--h3-weight: 600;
--h4-size: 1.3rem;
--h4-weight: 600;
--h5-size: 1.2rem;
--h5-weight: 600;
--h6-size: 1rem;
--h6-weight: 600;
--p-size: 1rem;
--p-weight: 400;
--nav-item-color: #444;
--nav-hover-color: #2c2e30;
--nav-toggler-color: #7e8085;
--primary-color: #f6a71c;
--primary-color-2: #000000;
--secondary-color: #666;
--secondary-color-2: #777;
--social-color-1: #3b5999;
--social-color-2: #55acee;
--social-color-3: #dd4b39;
--social-color-4: #00b489;
--white-color: #ffffff;
--primary-t-color: #222;
--primary-p-color: #565656;
--primary-l-color: rgba(0, 0, 0, 0.12);
--secondary-l-color: rgba(45, 49, 54, 0.09);
--valid-color: #28a745;
--invalid-color: #ffa200;
--primary-bg-color:  #f6a71c;
--primary-bg-color-2: #ffffff;
--primary-bg-color-3: rgba(16, 16, 45, 1);
--nav-bg-color: #d3d3d3;
}
* {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
}
img {
vertical-align: middle;
border-style: none;
}
body {
font-family: var(--primary-font);
font-size: 1rem;
line-height: 1.5;
font-weight: 400;
color: var(--primary-color-2);
}
.auth {
display: flex;
height: calc(100vh - 105px);
min-height: 500px;
align-items: center;
justify-content: center;
}
.auth .auth_left {
margin: 0 auto;
background: transparent;
}
.auth .auth_left {
background: transparent;
width: 100%;
max-width: 500px;
padding: 0;
}
.auth .card-body {
padding: 30px;
}
.auth .header-brand {
display: block;
width: 100px;
margin: auto;
}
.auth .card-title{
color: #4285F4;
font-weight: 500;
text-transform: uppercase;
}
.btn-log {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: .375rem 1.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
min-width: 140px;
border-radius: 20px;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
[type=button], [type=reset], [type=submit], button {
-webkit-appearance: button;
}
button, select {
text-transform: none;
}
.btn.btn-facebook, .dataTables_wrapper .dataTables_paginate .btn-facebook.paginate_button {
background: #3b5998;
color: #fff;
}
.btn.btn-google, .dataTables_wrapper .dataTables_paginate .btn-google.paginate_button {
background: #4285F4;
color: #fff;
}
[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
cursor: pointer;
}
.btn, .dataTables_wrapper .dataTables_paginate .paginate_button {
font-size: 14px;
}
.auth_left .btn-primary{
background: #4285F4;
color: #fff;
width: 100%;
max-width: 300px;
border-radius: 34px;
margin: auto;
}
.auth{
background-color: #eff2f5;
}
.auth_left .card{
border-radius: 20px;
}
.auth_left .card-body .form-control{
border: solid 1px black;
border-radius: 20px;
padding: 10px 20px;
font-size: 12px;
height: 40px;
}
.auth.style-4 {
background-color: #229cf4;
}
.auth.style-4  .auth_left .btn-primary{
background-color: #229cf4;
}
.auth.style-4  .card-title{
color: #229cf4;
}
.auth.style-3 {
background-color: #795fdc;
}
.auth.style-3  .auth_left .btn-primary{
background-color: #795fdc;
}
.auth.style-3   .card-title{
color: #795fdc;
}
.auth.style-2 {
background-color: #ff7307;
}
.auth.style-2  .auth_left .btn-primary{
background-color: #ff7307;
}
.auth.style-2 .card-title{
color: #ff7307;
}
.auth.style-1 {
background-color: #00b5ad;
}
.auth.style-1 .auth_left .btn-primary{
background-color: #00b5ad;
}
.auth.style-1 .card-title{
color: #00b5ad;
}

.a1{fill:none;stroke:#00b5ad;stroke-miterlimit:100}
.a2{fill:none;stroke:#ff7307;stroke-miterlimit:100}
.a3{fill:none;stroke:#856be8;stroke-miterlimit:100}
.a4{fill:none;stroke:#229cf4;stroke-miterlimit:100}

.s1{color:#00b5ad}
.s2{color:#ff7307}
.s3{color:#856be8}
.s4{color:#229cf4}


.s1:hover .a1,
.s1:hover .icon-svg,
.s1.s-active .icon-svg .a1,
.s1.s-active .icon-svg{
    background-color:#00b5ad ;
    fill:white
}
.s2:hover .a2,
.s2:hover .icon-svg,
.s2.s-active .icon-svg .a2,
.s2.s-active .icon-svg{
    background-color:#ff7307 ;
    fill:white
}
.s3:hover .a3,
.s3:hover .icon-svg,
.s3.s-active .icon-svg .a3,
.s3.s-active .icon-svg{
    background-color:#856be8 ;
    fill:white
}
.s4:hover .a4,
.s4:hover .icon-svg,
.s4.s-active .icon-svg .a4,
.s4.s-active .icon-svg{
    background-color:#229cf4 ;
    fill:white
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    padding: 0;
    list-style: none;
    }

    .grid-2 span{
        display: block;
        text-align: center;
    }
    .grid-2 .icon-svg{
        width: 95px;
        height: 95px;
        border: solid 1px;
        padding: 20px;
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto;
    }
.spn-ttx{
    text-align: center;
    text-transform: uppercase;
    font-weight: 400;
    font-size:14px ;
    margin-top: 8px;
}
    @media (min-width: 767px) {
        .grid-2 {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(1, 1fr);
            grid-column-gap: 20px;
            grid-row-gap: 10px;
            padding: 0;
            list-style: none;
            }
            .grid-2 .icon-svg{
                width: 75px;
                height: 75px;
             
            }
            .spn-ttx{
              font-size:14px ;
              margin-top: 8px;
            }

    }
.txt-gray{
    color: gray;
}
.header-nv{
    padding: 20px 0px 20px 30px;
    position: relative;
    background-color: #eff2f5;
}
.wrp-logo{
    width: 200px;
}
@media (min-width: 999px) {
.bg-header{
    background-image: url(../img/bg-headv2.png);
    position: absolute;
    right: 0;
    width: calc(100% - 200px);
    height: 100%;
    top: 0;
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;

}
}