/*---------------------------*/
/*----------GENERAL----------*/
/*---------------------------*/
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  transition: all ease 300ms;
}
body, html {
  background-color: #f1f4f7;
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  color: #606060;
}
a {
  color: #0097e6;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Lato', 'Roboto';
  font-weight: bold;
}
h1 {
  font-size: 2rem;
}
h2 {
  font-size: 1.8rem;
}
.card {
  border: 1px solid #ddd;
}
.btn-primary-opme {
  color: #fff;
  background-color: #0097e6;
  border-color: #0390da;
}
.btn-primary-opme:hover {
  color: #fff;
  background-color: #0284c8;
  border-color: #045cbc; 
}
.btn-primary-opme:active {
  color: #fff;
  background-color: #045cbc;
  border-color: #045ab8;
}
.btn-success-opme {
  color: #fff;
  background-color: #28323C;
  border-color: #212931;
}
.btn-success-opme:hover, .btn-success-opme:active {
  color: #fff;
  background-color: #20272F;
  border-color: #181D23;
}
.btn-danger-opme {
  color: #fff;
  background-color: #ef5f50;
  border-color: #e15748;
}
.btn-danger-opme:hover {
  color: #fff;
  background-color: #d35a4e;
  border-color: #bd5449;
}
.btn-danger-opme:active {
  color: #fff;
  background-color: #af493f;
  border-color: #a84b41;
}
.form-control { 
  background: #f1f4f7;
}
.form-control:focus, .page-link:focus, .btn.focus, .btn:focus {
  border-color: #34495e; 
  box-shadow: 0 0 0 0 rgb(52, 73, 94);
  border-width: 1px;
}
.page-item.active .page-link {
  z-index: 1;
  color: #fff;
  background-color: #34495e;
  border-color: #34495e;
}
.page-link, .page-link:hover {
  color: #34495e;
}
.card thead {
  background: #34495e;
  color: #fff;
}
.card tbody tr:nth-child(even) {
  background: #f1f4f7;
}
.breadcrumb a, .breadcrumb a:hover, .list-group a {
  color: #34495e;
}
.badge-primary-opme {
  background: #0097e6;
  color: #fff;
}
.badge-success-opme {
  background: #2ecc71;
  color: #fff;
}
.card-item {
  border: 1px solid #eaeaea;
  background: #f7f7f7;
}
.card-item h2 {
    font-size: 1rem;
    text-transform: uppercase;
    color: #28323c;
}
.card-item span {
    font-size: 1.8rem;
    font-family: "Lato";
    color: #28323c;
}

/*---------------------------*/
/*-----------HEADER----------*/
/*---------------------------*/

/*Header withput login*/
.header-main {
  background: #34495e;
}
.logo a {
  font-family: 'Lato', 'Roboto';
  font-size: 2rem; 
  text-decoration: none;
}
.logo-text {
  font-size: 0.8rem;
}
.menu-logout {
  background: #0097e6;
  border-radius: 25px;
  padding: 6px 8px;
}
.menu-logout img {
  width: 30px;
}
#logout {
  width: 20px;
  position: relative;
  top: 2px;
  left: 5px;
}
#logout path {
  fill: #fff;
  transition: all ease 300ms;
}
#logout:hover path {
  fill: #ef5f50;
}

/*Header with login*/
.header-app {
  position: fixed;
  left: 0; 
  top: 0;
  height: 100vh;
  background: #28323c;
  z-index: 3;
  transition: all ease 300ms;
  overflow-y: auto;
}
.header-app .logo-app {
  background: #28323c;
  color: #fff;
  height: 47px;
  overflow: hidden;
}
.header-app .logo-app h1 a {
  font-size: 1.7rem;
  color: #fff;
  text-decoration: none;
  position: relative;
  top: -4px;
}
.header-app .logo-app h1 span {
  color: #0097e6;
}
.header-app h2 {
  font-size: 1.2rem;
  color: #e9ecef;
  position: relative;
}
.header-app figure img {
  width: 40px;
  border: 3px solid #e9ecef;
  border-radius: 50%;
}
.header-top {
  position: fixed;
  z-index: 2;
  top: 0;
  right: 0;
  background: #34495e;
  padding: 10px 35px;
  height: 47px;
  transition: all ease 300ms;
}
#btn-menu-app {
  background: none;
  border: 0;
  cursor: pointer;
}
.header-app .profile {
  background: #0097e6;
}
.header-app li a {
  font-weight: bold;
  color: #e9ecef;
  text-decoration: none;
  font-size: 0.8rem;
  position: relative;
  border-bottom: 1px solid #34495e;
}
.header-app li a:nth-child(1) {
  border-top: 1px solid #34495e;
}
.header-app li a:hover {
  background: #0097e6;
}
.force-90 {
  width: calc(100% - 65px) !important;
  flex: 0 0  calc(100% - 65px) !important;
  max-width:  calc(100% - 65px) !important;
  margin-left: 65px;
}
.header-app.hide {
  width: 65px !important;
  flex: 0 0  65px !important;
  max-width:  65px !important;
}
.submenu {
  position: relative;
}
.submenu::before {
  content: "+";
  position: absolute;
  right: 15px;
  top: 4px;
  font-size: 2rem;
  color: #fff;
  z-index: 2;
  cursor: pointer;
}
.submenu.show {
  background: #34495e;
}
.submenu.show::before {
  content: "-";
}
.submenu.show>a {
  background: #0097e6;
}
.submenu-list {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: all ease 300ms;
  padding-left: 5px;
} 
.submenu.show .submenu-list {
  height: auto;
}

/*Breadcrumb*/
.breadcrumb {
  position: fixed;
  top: 6px;
  z-index: 3;
  right: 70px;
  background: #f1f4f7;
  padding: 5px 15px;
  border-radius: 50px;
}
.breadcrumb a, .list-group a, .breadcrumb-item.active, .breadcrumb a:hover  {
  color: #606060;
  text-decoration: none;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: #606060 !important;
  content: "/";
}

/*---------------------------*/
/*-----------FOOTER----------*/
/*---------------------------*/
footer.footer-main {
  font-size: .9rem;
  background: #23292f;
  padding: 20px;
  color: #ddd;
  transition: all ease 300ms;
}
footer.footer-main a {
  color: #fff;
}

/*---------------------------*/
/*-----------LOGIN-----------*/
/*---------------------------*/
.card-login {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
}
.card-login img {
  width: 100px;
  position: absolute;
  top: -3rem;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 50%;
}
.card-app {
  min-height: calc(100vh - 60px);
}

/*---------------------------*/
/*----------SIGNUP-----------*/
/*---------------------------*/
.form-check-label {
  cursor: pointer;
  margin: 3px 0;
} 

/*---------------------------*/
/*---------MY BUDGETS--------*/
/*---------------------------*/
#andrei .nav-link {
  background: #34495e;
  color: #fff;
}
#andrei .nav-link:hover {
  color: #fff;
}
#andrei .nav-link.active {
  background: #fff;
  color: #34495e;
}
.card-budgets tr td:nth-child(2) a, .card-budgets tr td:nth-child(2) a:hover {
  color: #34495e;
}

/*---------------------------*/
/*---------SEND MAIL---------*/
/*---------------------------*/
.send-email .d-flex .col-lg-2, .send-email .d-flex .detail-title {
  font-size: 1rem;
  background: #e9ecef;
  padding: 10px 15px;
  border: 1px solid #ddd;
}
.send-email .d-flex .col-lg-10, .send-email .d-flex .detail-text {
  font-size: 1rem;
  padding: 10px 15px;
  border: 1px solid #ddd;
  background: #fbfbfb;
} 

/*---------------------------*/
/*-----RESPONSIVE DESIGN-----*/
/*---------------------------*/
@media(max-width: 801px) {
  .breadcrumb {
    position: relative;
    left: 0;
    top: 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    z-index: 0;
  }
}
@media(max-width: 768px) {
  body,html {
    font-size: 15px;
  }
}
@media(max-width: 576px) {
  body,html {
    font-size: 14px;
  }
}

.list-group-formset label {
  display: none;
}
.list-group-formset .form-group,
.list-group-formset .invalid-feedback {
  margin-bottom: 0;
}

.list-group-formset .form-control {
  padding: .25rem .5rem;
  font-size: .875rem;
  line-height: 1.5;
  border-radius: .2rem;
}

.has-danger .radio,
.has-danger .checkbox {
  color: #dc3545;
}

.has-danger .invalid-feedback {
  display: block;
}


@media only screen and (min-width : 1200px) {

    .container { max-width: 1250px; } 

}