@import "fonts.css";
:root {
    --primary: #0057D9;
    --secondary: #4DB8FF;
    --orange:#FF7A45;
    --font-clr: #171718;
    --dark:#1A1A1A;
    --border:#E9EEF7;
    --bg:#F8FAFD;
     --charcoal:#1A1A1A;
    --hairline:#E7ECF4;
    --muted:#5B6472;
    
    --shadow:0 15px 50px rgba(0,0,0,.08);
    
    --font-cg-re: century-gothic-reg,sans-serif;
    --font-cg-bo: century-gothic-bold,sans-serif;
    
    --font-reg: 'inter-regular',sans-serif;
    --font-sb: 'inter-semiBold', sans-serif;
    --font-b1: 'inter-medium', sans-serif;
    --font-b2: 'inter-bold', sans-serif;
    --font-b3: 'inter-black', sans-serif;
    --font-b4: 'inter-extra-bold', sans-serif;
    --roboto-re: 'roboto-regular', sans-serif;
    --roboto-me: 'roboto-medium', sans-serif;
    --roboto-bo: 'roboto-bold', sans-serif;
    --roboto-bl: 'roboto-black', sans-serif
}

body {
    margin: 0;
    padding: 0;
    background-color: #f9f7f6!important;
    color: var(--font-clr);
    font-family: var(--font-reg)
}

.navbar-toggler {
    padding: 0;
    margin-left: 10px
}

.navbar-toggler.x {
    border: none
}

.navbar-toggler.x:focus {
    outline: none;
    box-shadow: none
}

.navbar-toggler.x[aria-expanded=true] .icon-bar:nth-of-type(1) {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 10% 10%;
    -ms-transform-origin: 10% 10%;
    transform-origin: 10% 10%
}

.navbar-toggler.x[aria-expanded=true] .icon-bar:nth-of-type(2) {
    opacity: 0;
    filter: alpha(opacity=0)
}

.navbar-toggler.x[aria-expanded=true] .icon-bar:nth-of-type(3) {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 10% 90%;
    -ms-transform-origin: 10% 90%;
    transform-origin: 10% 90%
}

.navbar-toggler.x .icon-bar {
    width: 22px;
    display: block;
    height: 2px;
    background-color: var(--font-clr);
    -webkit-transition: all 0.2s;
    transition: all 0.2s
}

.navbar-toggler.x .icon-bar+.icon-bar {
    margin-top: 4px
}

.navbar-toggler.x .icon-bar:nth-of-type(1) {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0)
}

.navbar-toggler.x .icon-bar:nth-of-type(2) {
    opacity: 1;
    filter: alpha(opacity=100)
}

.navbar-toggler.x .icon-bar:nth-of-type(3) {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0)
}

.btn {
    border-radius: 50px;
    padding: 12px 26px;
    font-size: 16px
}

.btn-sm {
    padding: .25rem 1rem!important
}

.btn-sm2 {
    padding: 4px 8px;
    font-size: 14px
}

.btn.left_btn {
    padding: 8px 22px;
    min-width: 140px;
    text-align: left;
    position: relative;
    transition: 0.3s ease-in-out
}

.btn.left_btn .btn_arrow_icon {
    position: absolute;
    top: 50%;
    right: 22px;
    transform: translateY(-50%);
    transition: 0.3s all
}

.item:hover .btn.left_btn {
    padding: 8px 22px 8px 10px
}

.item:hover .btn_arrow_icon {
    right: 10px
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: white!important
}

.btn-primary:hover {
    background-color: var(--secondary);
    border-color: var(--secondary)
}

.btn-secondary {
    background-color: var(--primary);
    border-color: var(--primary)
}

.btn-secondary:hover {
    background-color: var(--primary);
    border-color: var(--primary)
}

.btn-outline-secondary {
    border-color: var(--primary);
    background-color: #fff;
    color: var(--secondary)
}

.btn-outline-secondary:hover,.btn-outline-secondary:focus {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: #fff
}

.btn.btn-green {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff
}

.btn.btn-green:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white)!important
}

.btn-white {
    background-color: #fff;
    border-color: #fff;
    color: var(--primary)!important
}

.btn-outline-white {
    background-color: #fff0;
    border-color: #fff;
    color: #fff
}

.btn.btn-outline-primary {
    background-color: #fff;
    border-color: var(--primary);
    color: var(--primary)!important
}

.btn.btn-outline-primary:active,.btn.btn-outline-primary:active a,.btn.btn-outline-primary:focus,.btn.btn-outline-primary:focus a,.btn.btn-outline-primary:hover,.btn.btn-outline-primary:hover a {
    background-color: var(--primary);
    border-color: var(--primary);
    color: white!important
}

.btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):active,.show>.btn-primary.dropdown-toggle {
    background-color: var(--primary);
    border-color: var(--primary)
}

.btn,.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-primary.dropdown-toggle:focus {
    -webkit-box-shadow: none!important;
    box-shadow: none!important
}

.btn-outline-primary:not(:disabled):not(.disabled).active,.btn-outline-primary:not(:disabled):not(.disabled):active,.show>.btn-outline-primary.dropdown-toggle {
    background-color: var(--primary);
    border-color: var(--primary)
}

.bg-primary {
    background-color: var(--primary)!important
}

.bg-secondary {
    background-color: var(--primary)!important
}

.bg-dark {
    background-color: #000000!important
}

.text-primary {
    color: var(--primary)!important
}

.text-secondary {
    color: var(--primary)!important
}

.text-gray {
    color: #a1a1a1
}

.modify_strip .input_group .icon {
    padding-left: 10px;
    color: #20262E
}

.modify_strip .input_group .form-control.gp_icon {
    padding-left: 34px;
    height: 47px;
    color: #20262E
}

.label_m {
    font-size: 16px;
    font-weight: 500
}

.trn03 {
    transition: ease-in-out 0.3s;
    -moz-transition: ease-in-out 0.3s;
    -webkit-transition: ease-in-out 0.3s;
    -o-transition: ease-in-out 0.3s
}

.form-check-input:checked {
    background-color: var(--secondary);
    border-color: var(--secondary)
}

.modal-header {
    justify-content: space-between
}

.modal .close {
    color: var(--font-clr);
    border: 1px solid var(--secondary);
    background: #fff;
    border-radius: 50px;
    height: 30px;
    width: 30px;
    font-size: 16px;
    opacity: 1;
    font-weight: 700
}

.dt-buttons button.dt-button,.dt-buttons div.dt-button,a.dt-button {
    background-image: none!important;
    background-color: white!important;
    color: var(--secondary)!important;
    border-radius: 50px!important;
    padding: 4px 16px!important;
    border: 1px solid var(--primary)!important;
    transition: 0.35s all
}

.dt-buttons button.dt-button:hover,.dt-buttons div.dt-button:hover,a.dt-button:hover {
    background-color: var(--primary)!important;
    color: white!important
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: white!important;
    border: 1px solid var(--primary)!important;
    color: var(--secondary)!important;
    border-radius: 50px!important;
    padding: 6px 18px!important;
    transition: 0.3s all
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,.dataTables_wrapper .dataTables_paginate .paginate_button:active {
    background: transparent!important;
    background-color: var(--primary)!important;
    border-color: var(--primary)!important;
    color: white!important
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    background-color: #dadada!important;
    border: 1px solid #dadada!important;
    color: #999999!important
}

.dataTables_filter label input {
    border: 1px solid #eff1f7;
    background-color: #eff1f7;
    border-radius: 50px;
    height: 35px;
    position: relative;
    outline: none!important;
    padding: 2px 8px
}

.navbar-toggler {
    padding: 0;
    margin-left: 10px;
    color: #fff
}

.navbar-toggler.x {
    border: none
}

.navbar-toggler.x:focus {
    outline: none;
    box-shadow: none
}

.navbar-toggler.x[aria-expanded=true] .icon-bar:nth-of-type(1) {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 10% 10%;
    -ms-transform-origin: 10% 10%;
    transform-origin: 10% 10%
}

.navbar-toggler.x[aria-expanded=true] .icon-bar:nth-of-type(2) {
    opacity: 0;
    filter: alpha(opacity=0)
}

.navbar-toggler.x[aria-expanded=true] .icon-bar:nth-of-type(3) {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 10% 90%;
    -ms-transform-origin: 10% 90%;
    transform-origin: 10% 90%
}

.navbar-toggler.x .icon-bar {
    width: 22px;
    display: block;
    height: 2px;
    background-color: #fff;
    -webkit-transition: all 0.2s;
    transition: all 0.2s
}

.navbar-toggler.x .icon-bar+.icon-bar {
    margin-top: 4px
}

.navbar-toggler.x .icon-bar:nth-of-type(1) {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0)
}

.navbar-toggler.x .icon-bar:nth-of-type(2) {
    opacity: 1;
    filter: alpha(opacity=100)
}

.navbar-toggler.x .icon-bar:nth-of-type(3) {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0)
}