/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/

:root{
    --first-color: #1C2D50;
    --second-color: #ED6C28;

    --pp-green: 156, 195, 26;
    --pp-aqua: 0, 164, 99;
    --pp-orange: 239, 130, 0;
    --pp-red: 230 67 16;

    --body: #f5f7fb;
    --back-primary: #fff;
    --shadow: rgb(18 38 63 / 3%);
    --shadow-form: 0 0 0 0.2rem rgb(171 140 228 / 5%);
    --border: #edf2f9;
    --ground: #f7f7f7;

    --border-one: #b1b1b1;
    
    --text-main: #12263f;
    --text-white: #fff;
    --text-side-title: #b2b2cf;

    --hover: #f5f5f5;
    --hover-one: #efefef;

    --logo: url(../img/puropago-logo.svg);
    --arrow: url(../img/arrow-one.png);
}

body.dark-only{
    --first-color: #ED6C28;

    --body: #2c2d3a;
    --back-primary: #1c1c27;
    --shadow: rgba(0,0,0,.1);
    --border: #18181b;
    --ground: #1f1f22;

    --text-main:#afafaf;

    --hover: #212125;
    --hover-one: #1d1e21;

   
    --arrow: url(../img/arrow-two.png);


}


body {
    font-size: 0.9375rem;
    overflow-x: hidden;
    font-family: "CerebriSans", sans-serif;
    color: var(--text-main);
    background-color: var(--body);
}

::-webkit-scrollbar {
width: 7px;
}
::-webkit-scrollbar-thumb {
background: #808080;
border-radius: 5px;
}

.logo-static {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 240px;
    position: absolute;
}
.logo-name {
    padding: 0;
    color: var(--text-white);
    font-size: 1.5rem;
    font-family: montserrat;
    letter-spacing: -1px;
    margin: auto;
    text-align: center;
    position: relative;
    display: block;
}
.logo {
    background: var(--logo);
    width: 44px;
    height: 40px;
    position: relative;
    background-size: 150px;
    background-repeat: no-repeat;
    margin: 1.5rem auto 0 auto;
    display: block;
}
.logo-name span{
    font-weight: 700;
}

.navigation {
    position: fixed;
    width: 250px;
    height: 100%;
    background: -o-radial-gradient(#262730, #0e0f1a);
    background: radial-gradient(#262730, #0e0f1a);
    padding: 0 0 0 10px;
    overflow: hidden;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    z-index: 999;
}
.navigation ul{
    position: absolute;
    top: 105px;
    left: 0;
    width: 100%;
    margin: 0;   
    padding: 0 0 0 10px;
}
.navigation ul li{
    position: relative;
    width: 100%;
    list-style:none; 
}
.navigation ul li.hovered a{
    background: var(--body);
    color: var(--first-color);
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}
.navigation ul li a{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    text-align: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-decoration: none;
    color: var(--text-side-title);
    min-height: 35px;
    z-index: 1;
    border-top-left-radius: 30px; 
    border-bottom-left-radius: 30px;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}
.navigation ul li:hover a{
    color: var(--text-white);
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}
.navigation ul li:hover a span.title {
    padding: 0 10px 0 20px;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}
.navigation ul li.hovered:hover a {
    color: var(--first-color);
    font-weight: 700;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}
.navigation ul li.hovered:hover ul li a {
    font-weight: initial;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}
.navigation ul li a .icon{
    position: relative;
    display: block;
    min-width: 40px;
    font-size: .6rem;
}
.navigation ul li a .title{
    position: relative;
    display: block;
    padding: 0 10px;
    white-space: nowrap;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}
.navigation ul li.accordion ul {
    position: relative;
    top: initial;
    display: none;
    margin: 0 0 10px 0;
    max-height: 100vh;
} 
.navigation ul li.accordion.hovered ul li a {
    background: var(--first-color);
} 
.navigation ul li.accordion.hovered ul li a {
    color: var(--text-white);
}
.navigation ul li a .icon.right {
    right: 0;
    position: absolute;
}
.navigation ul li.accordion.show a span.icon.right i:before {
    content: "\f078";
}
.navigation ul li a .icon.right {
    right: 0;
    position: absolute;
    font-size: 10px;
}
.navigation ul li.accordion ul li {
    padding: 0 0 0 20px;
    height: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background: transparent;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

.navigation ul li.accordion.hovered ul li:before {
    position: relative;
    box-shadow: none;
    right: initial;
    top: initial;
    display: flex;
    background: transparent;
    border-radius: 0;
    height: initial;
    width: auto;
}
.navigation ul li.accordion ul li:before {
    content: "\f054";
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    font-size: 7px;
    margin: 0 20px 0 0;
    position: relative;
    color: var(--text-white);
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

.navigation ul li.accordion ul li a {
    background: transparent!important;
    color: var(--text-side-title)!important;
    font-size: .8125rem;
}

.navigation ul li.accordion ul li a:hover {
    color: var(--text-white)!important;
}

.navigation ul li.hovered:before {
    position: absolute;
    content: "";
    background: var(--body);
    height: 35px;
    z-index: -1;
    left: 0;
    border-radius: 30px 0 0 30px;
    width: 100%;
}
.navigation ul li.accordion.hovered ul li.hovered:before {
    color: var(--second-color);
}

/* curvas*/
.navigation ul li.hovered a:before {
    content: "";
    position: absolute;
    right: 0;
    top: -15px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: transparent;
    -webkit-box-shadow: 15px 15px 0 10px var(--body);
            box-shadow: 15px 15px 0 10px var(--body);
    pointer-events: none;
}
.navigation ul li.hovered a:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -15px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: initial;
    background: transparent;
    -webkit-box-shadow: 15px -15px 0 10px var(--body);
            box-shadow: 15px -15px 0 10px var(--body);
    pointer-events: none;
}
.navigation ul li.accordion.hovered ul li a:before {
    display: none;
}
.navigation ul li.accordion.hovered ul li a:after {
    display: none;
}

.navigation ul li.hovered a.hoveredt span:nth-child(1) i, 
.navigation ul li.accordion.hovered a span:nth-child(1) i {
    background: var(--second-color);
    color: #fff;
    border-radius: 100%;
    padding: .5rem;
    margin: 0 0 0 -2px;
    width: 25px;
    height: 25px;
}

/*main*/

.main{
    width: calc(100% - 250px);
    left: 250px;
    min-height: 100vh;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    overflow: auto;
    position: relative;
}
.topbar{
    width: 100%;
    height: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0 10px;
}
.toggle{
    position: sticky;
    top: 0;
    width: 60px;
    height: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 1.5em;
    cursor: pointer;
}


/*sidebar toggle*/


.main-sidebar-hide .navigation {
    width: 60px;
    background: -o-linear-gradient(337deg, #262730, #0e0f1a);
    background: linear-gradient(113deg, #262730, #0e0f1a);
}
.main-sidebar-hide.main-sidebar-open .navigation {
    width: 250px;
}
.main-sidebar-hide .navigation ul li.accordion.show>ul {
    display: none!important;
}
.main-sidebar-open .navigation ul li.accordion.show>ul {
    display: block!important;
}
.main.active{
    width: calc(100% - 60px);
    left: 60px;
}
.footer.active {
    width: calc(100% - 60px);
    left: 60px
}

body.main-sidebar-show .main.active,
body.main-sidebar-show .footer.active{
    width: calc(100% - 250px);
    left: 250px;
}

body.main-sidebar-hide.main-sidebar-show .main, 
body.main-sidebar-hide.main-sidebar-show .footer{
    width: calc(100% - 60px);
    left: 60px;
}

body.main-sidebar-hide.main-sidebar-show .main.active, 
body.main-sidebar-hide.main-sidebar-show .footer.active {
    width: calc(100% - 250px);
    left: 250px;
}
body.main-sidebar-hide .navigation ul li.accordion a .icon.right {
    min-width: 15px;
}
.main-sidebar-hide .navigation .logo-static {
    width: 70%;
}
.main-sidebar-hide .navigation .logo-static .logo-name {
    font-size: 9px;
    letter-spacing: 0;
    margin: 0 0 0 -4px;
}
body.main-sidebar-hide.main-sidebar-open .logo-static {
    width: 240px;
}
body.main-sidebar-hide.main-sidebar-open .logo-static .logo-name {
    display: block;
}
body.main-sidebar-hide.main-sidebar-open .logo-static .logo-name {
    font-size: initial;
    letter-spacing: initial;
    margin: auto;
}
.main-sidebar-hide .navigation h6.navbar-heading {
    display: none;
}
.main-sidebar-hide.main-sidebar-open .navigation h6.navbar-heading {
    display: initial;
}

/*siedebar user*/
.main-sidebar-user {
    bottom: 10px;
    top: auto;
    position: absolute;
    margin: 0.4rem 0;
}
.main-sidebar-user .btn-group.dropup button.dropdown-toggle {
    background: transparent;
    border: 0px;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0;
}
.main-sidebar-user .btn-group.dropup button.dropdown-toggle .user-avatar, .dropdown-menu .user-avatar {
    min-width: 40px;
    height: 40px;
    background: #ddd;
    border-radius: 100%;
    margin: 0 1.25rem 0 0;
}
.user-name {
    text-align: left;
    width: 135px;
    margin: 0 .50rem 0 0;
}
.user-name .name {
    font-weight: 500;
    color: var(--text-white);
    font-size: 1rem;
}
.user-name span {
    display: block;
    color: #b2b2cf;
    font-size: .85rem;
}
.main-sidebar-user .btn-group.dropup .dropdown-toggle::after {
    border-bottom: .3em solid #fff;
}
ul.dropdown-menu {
    padding: 0;
    background: var(--back-primary);
    color: var(--text-main);
}
ul.dropdown-menu .d-flex{
    align-items: center;
}
ul.dropdown-menu .user-name .name {
    color: var(--first-color);
    font-size: 1rem;
}
ul.dropdown-menu .user-name span {
    color: #5a5a5a;
    line-height: 17px;
    font-size: .85rem;
}
.dropdown-item{
    color: var(--text-main);
    font-size: .8rem;
}
.dropdown-item i {
    font-size: .8rem;
    margin: 0 .5rem 0 0;
    color: var(--second-color);
}
.dropdown-item.active, .dropdown-item:active {
    color: var(--text-white);
    text-decoration: none;
    background-color:var(--second-color);
}
.dropdown-item:focus, .dropdown-item:hover {
    color: var(--text-main);
    background-color: var(--shadow);
}
.navigation .navbar-heading {
    padding: .5rem 0 .5rem 1rem;
    font-size: .625rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-white);
}

/*body*/

.content{
    padding: 20px;
}
.card-body.one span {
    color: rgb(var(--pp-green));
}
.card-body.two span {
    color: rgb(var(--pp-aqua));
}
.card-body.three span {
    color: rgb(var(--pp-orange));
}
.card-body.four span {
    color: rgb(var(--pp-red));
}
.card-body.one i,.card-body.two i, .card-body.three i, .card-body.four i {
    position: absolute;
    color: rgba(0,0,0,.2);
    right: 10px;
    bottom: 10px;
    font-size: 2rem;
}


/*footer*/
.footer {
    background-color: var(--back-primary);
    padding: 5px;
    bottom: 0;
    position: relative;
    left: 250px;
    width: calc(100% - 250px);
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

/*-----------------------------------------bootsrap-----------------------------------------*/
.card{
    margin-bottom: 1.5rem;
    background-color: var(--back-primary);
    border-color: var(--border);
    -webkit-box-shadow: 0 0.75rem 1.5rem var(--shadow);
            box-shadow: 0 0.75rem 1.5rem var(--shadow);
}
.card-header {
    padding: 1rem 1.5rem;
    margin-bottom: 0;
    background-color: transparent;
    border-bottom: 1px solid var(--border);
}
.card-header-title {
    margin-bottom: 0;
}

.border, .border-top, .border-bottom {
    border-color: var(--border)!important;
}

.border-end {
    border-right: 1px solid var(--border)!important;
}
.border-top {
    border-top: 1px solid var(--border)!important;
}
.border-bottom {
    border-bottom: 1px solid var(--border)!important;
}
.border-start {
    border-left: 1px solid var(--border)!important;
}

.header-pretitle {
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #95aac9;
}
.header-title {
    margin-bottom: 0;
}

/*----------------titulos--------------------*/

.text-muted {
    --bs-text-opacity: 1;
    color: #95aac9!important;
}


.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 1.125rem;
    font-weight: 500;
    line-height: 1.1;
}
.text-uppercase.h6, h6.text-uppercase {
    letter-spacing: .08em;
}
.h2, h2 {
    font-size: 1.25rem;
}
.h4, h4 {
    font-size: .9375rem;
}
.h6, h6 {
    font-size: .625rem;
}

.h4, .h5, .h6, h4, h5, h6 {
    margin-bottom: .5625rem;
}
.display-1, .display-2, .display-3, .display-4, .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    letter-spacing: -.02em;
}
/*----------------input--------------------*/
.form-control.search::-webkit-input-placeholder{
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    text-align: right;
}
.form-control.search::-webkit-input-placeholder, 
.form-control.search::-moz-placeholder, 
.form-control.search:-ms-input-placeholder, 
.form-control.search::placeholder{
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    text-align: right;
}

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

.form-check-input:focus {
    border-color: var(--border);
    outline: 0;
    -webkit-box-shadow: var(--shadow-form);
    box-shadow: var(--shadow-form);
}

.form-control, .form-select {
    border-color: var(--border);
    background-color: var(--back-primary);
    color: var(--text-main);
    padding: .2rem .2rem;
    font-family: OpenSans;
}

.form-control:focus, .form-select:focus {
    border-color: var(--border);
    background-color: var(--back-primary);
    color: var(--text-main);
    -webkit-box-shadow: var(--shadow-form);
    box-shadow: var(--shadow-form);
}
.form-select {
    background-size: 10px 8px;
    background-image: var(--arrow);
}

.form-label {
    font-weight: 600;
}

.col-form-label{
    font-size: 11px;
    line-height: 12px; 
    font-weight: 600;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.help-block.error {
  margin-bottom: 5px;
}

.has-error label{
  color: #ff3547;
}

.has-error input.form-control{
  border-bottom-color: #ff3547;
}

/*----------------botones--------------------*/

.btn-primary, .btn-secondary {
    background: var(--second-color);
    border-color: var(--second-color);
    color: var(--text-white);
    font-family: 'OpenSans';
    text-transform: uppercase;
    letter-spacing: .03rem;
    font-size: .7rem;
}
.btn-secondary {
    background: var(--ground);
    border-color: var(--border);
    color: var(--first-color);
    font-weight: 600;
}
.btn-secondary:focus, .btn-secondary:hover{
    color: var(--first-color);
    background: var(--ground);
    border-color: var(--second-color);
}
.btn-check:focus + .btn-primary, .btn-primary:focus{
    color: var(--text-white);
    background-color: var(--second-color);
    border-color: var(--second-color);
}
.btn-primary:hover {
    color: var(--text-white);
    background-color: var(--second-color);
    border-color: var(--second-color);
}
.btn-wid{
    width: 100%;
}
*.btn:focus {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

/*----------------table--------------------*/
.table{
    color: var(--text-main);
    border-color: var(--border)!important;
}
.table thead th {
    line-height: 14px;
}
thead, tbody, tfoot, tr, td, th {
    border-color: var(--border);
}
.table>:not(:last-child)>:last-child>* {
    border-bottom-color: var(--border);
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: var(--text-white);
    background-color: var(--first-color);
}
.nav a{
    color: var(--first-color)
}
/*-----------------------------------------datatable-----------------------------------------*/
.table.dataTable {
    width: 100%!important;
    font-family: OpenSans;
}

.dataTables_wrapper table.dataTable {
    border: 1px solid var(--border);
}
table.dataTable.row-border tbody tr:first-child th, 
table.dataTable.row-border tbody tr:first-child td, 
table.dataTable.display tbody tr:first-child th, 
table.dataTable.display tbody tr:first-child td {
    border-top: none;
}

.dataTables_wrapper table.dataTable tbody td:nth-last-child(1){
     border-right: 0px;
}

.dataTables_wrapper table.dataTable tbody td, 
.dataTables_wrapper table.dataTable tbody th {
    background-color: var(--back-primary);
    border-right: 1px solid var(--border);
}

table.dataTable tbody th, table.dataTable tbody td {
    padding: 8px 10px;
}
.dataTables_wrapper .dataTables_filter input[type="search"] {
    border: 1px solid var(--border);
    padding: 0 10px;
    margin-left: 10px;
    height: 37px;
    border-radius: 3px;
    background-color: var(--back-primary);
}

.dataTables_wrapper .dataTables_length select {
    background-color: var(--back-primary);
    border-color: var(--border);
    color: var(--text-main);
    padding: 0 10px;
    margin: 0 10px;
    height: 2.7142em;
    border-radius: 3px;
}

.dataTables_wrapper .dataTables_length {
    float: left;
}
.dataTables_wrapper .dataTables_info { 
    display: inline-block;
}
.dataTables_wrapper .dataTables_paginate {
    display: inline-block;
    padding-top: 5px;
    float: right;
}

.paginate_button.next {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

.paginate_button.previous {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}
.paginate_button {
    padding: .375rem .75rem;
    border: 1px solid var(--border);
    background-color: var(--back-primary);
    text-decoration: none;
    color: var(--first-color);
}
.paginate_button:hover{
    background: var(--ground);
    color: var(--second-color);
}

/*login*/
body.login {
    background: url(../img/login-e60.png);
    background-size: cover;
    height: 100vh;
}
#login-box {
    position: absolute;
    display: block;
    width: 350px;
    height: auto;
    left: 50%;
    -webkit-transition: .3s ease all;
    -o-transition: .3s ease all;
    transition: .3s ease all;
    top: 50%;
    -webkit-transform: translate(-150%, -50%);
    -ms-transform: translate(-150%, -50%);
    transform: translate(-150%, -50%);
}
.login-boxes {
    background: -o-linear-gradient(45deg, rgba(0,0,0,.7), rgba(0,0,0,.3));
    background: linear-gradient(45deg, rgba(0,0,0,.7), rgba(0,0,0,.3));
    padding: 2rem;
    margin-top: 2rem;
    border-radius: 10px;
    border: 1px solid rgb(17 40 78);
}
.login-boxes h5 {
    text-align: center;
    color: var(--text-white);
    font-weight: 600;
}
.input-group-text.login {
    color: var(--text-white);
    font-size: 10px;
}
.input-group-text.login, .form-control.login {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.04);
}
.input-group-text.login.right{
   margin-left: 0px!important;
   border-left: 0px;
}
.form-control.login {
    color: #ffffff;
    border-right: 0;
}
.form-control.login:focus {
    color: #ffffff;
    -webkit-box-shadow: none;
            box-shadow: none;
}


/*highchart*/

.highcharts-grid-line, .highcharts-axis-line {
   stroke: var(--border);
}
.highcharts-xaxis-grid{
    stroke-width: 0;
}
g.highcharts-axis-labels.highcharts-xaxis-labels text {
    color: var(--text-main)!important;
    fill: var(--text-main)!important;
}
#container {
    height: 400px;
}
.highcharts-container, .highcharts-container svg {
    width: 100%!important;
}

.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    border-collapse: collapse;
    border: 1px solid var(--border);
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}




/*responsive*/
@media (max-width: 991px){
    .navigation{
        left: -250px;
        top: 60px;
        height: 90%;
    }
     .navigation.hide{
        left: -250px;
    }
    .main-sidebar-show .navigation {
        width: 250px;
        left: 0px;
    }
    .main-sidebar-hide .navigation {
        width: 250px;
    }
    .main{
        width: 100%;
        left: 0;
    }
    .main.active{
        width: 100%;
        left: 0px;
    }
    .navigation.active:hover ul li.accordion ul {
        display: none!important;
    }
    .navigation.active ul li.accordion.show ul {
        display: initial!important;
    }
    .footer{
        width: 100%;
        left: 0;
    }
    .footer.active{
        width: 100%;
        left: 0px;
    }
    body.main-sidebar-hide.main-sidebar-show .main,
    body.main-sidebar-hide.main-sidebar-show .footer,
    body.main-sidebar-hide.main-sidebar-show .main.active,
    body.main-sidebar-hide.main-sidebar-show .footer.active,
    body.main-sidebar-show .main.active, 
    body.main-sidebar-show .footer.active {
        width: 100%;
        left: 00px;
    }
    .topbar{
        position: fixed;
        background: var(--back-primary);
        z-index: 999;
    }
    .main-sidebar-hide.main-sidebar-open .logo-static .logo-name,
    .main-sidebar-show.main-sidebar-hide .navigation .logo-static .logo-name {
        font-size: initial;
        letter-spacing: initial;
        margin: auto;
    }
    .main-sidebar-show.main-sidebar-hide .navigation .logo-static{
        width: 240px;
    }
    .content{
        padding: 80px 20px 20px 20px;
    }
    #login-box{
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

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

    .not-ps .ps-3, .not-ps.ps-3{
        padding-left: 0!important;
    }

    .not-ps.pe-3{
        padding-right: 0!important;
    }
}
@media (max-width: 480px){


}

/*fonts*/


@font-face {
    font-family: 'CerebriSans';
    src: local(CerebriSans Regular), url('fonts/CerebriSans/cerebrisans-regular.woff');
    font-weight: 400;
}
@font-face {
    font-family: 'CerebriSans';
    src: local(CerebriSans Medium), url('fonts/CerebriSans/cerebrisans-medium.woff');
    font-weight: 500;
}
@font-face {
    font-family: 'CerebriSans';
    src: local(CerebriSans SemiBold), url('fonts/CerebriSans/cerebrisans-semibold.woff');
    font-weight: 600;
}

@font-face {
    font-family: 'Montserrat';
    src: local(Montserrat Light), url('fonts/Montserrat/Montserrat-Light.ttf');
    font-weight: 100;
}
@font-face {
    font-family: 'Montserrat';
    src: local(Montserrat Regular), url('fonts/Montserrat/Montserrat-Regular.ttf');
    font-weight: 400;
}
@font-face {
    font-family: 'Montserrat';
    src: local(Montserrat Medium), url('fonts/Montserrat/Montserrat-Medium.ttf');
    font-weight: 500;
}
@font-face {
    font-family: 'Montserrat';
    src: local(Montserrat semibold), url('fonts/Montserrat/Montserrat-SemiBold.ttf');
    font-weight: 600;
}
@font-face {
    font-family: 'Montserrat';
    src: local(Montserrat Bold), url('fonts/Montserrat/Montserrat-Bold.ttf');
    font-weight: 700;
}
@font-face {
    font-family: 'Montserrat';
    src: local(Montserrat Black), url('fonts/Montserrat/Montserrat-Black.ttf');
    font-weight: 900;
}

@font-face {
    font-family: 'OpenSans';
    src: local(OpenSans Light), url('fonts/Open_Sans/OpenSans-Light.ttf');
    font-weight: 100;
}
@font-face {
    font-family: 'OpenSans';
    src: local(OpenSans Regular), url('fonts/Open_Sans/OpenSans-Regular.ttf');
    font-weight: 400;
}

@font-face {
    font-family: 'OpenSans';
    src: local(OpenSans Bold), url('fonts/Open_Sans/OpenSans-Bold.ttf');
    font-weight: 600;
}

#particles-js{
    width: 100%;
    height: 100%;
    position: absolute;
    
}