html {
  width: 100%;
  height: 100%;
}

html body {
  height: 100%;
}

html body #app {
  height: 100%;
  display: flex;
  flex-direction: column;
}

html body #app .navbar {
  height: 100px;
  background-color: #045ba7;
}

html body #app .navbar .nav-link {
  color: white;
  font-weight: bold;
}

html body #app .navbar .nav-link .card-columns {
  -moz-column-count: 3;
  column-count: 3;
}

html body #app .navbar .left-side a {
  width: 100%;
  text-align: center;
}

html body #app .menu-opener .nav-link:hover .menu-wrapper {
  display: block;
}

html body #app .menu-opener .nav-link .menu-wrapper {
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
  position: absolute;
  z-index: 999;
  top: 100%;
  right: 0;
  display: none;
  background-color: #fefefe;
  border-radius: calc(0.25rem - 1px);
  box-shadow: 4px 4px 2000px 2000px rgba(31, 39, 45, 0.2);
  color: #045ba7;
}

html body #app .menu-opener .nav-link .menu-wrapper:hover {
  display: block;
}

html body #app .menu-opener .nav-link .menu-wrapper .card {
  border: 0;
  margin: 0;
}

html body #app .menu-opener .nav-link .menu-wrapper .card hr {
  margin: 0 0 20px 0;
}

html body #app .menu-opener .nav-link .menu-wrapper-state-animated {
  -webkit-animation: actionsShowing 0.5s;
          animation: actionsShowing 0.5s;
}

html body #app main {
  flex-grow: 1;
  width: 100%;
}

html body #app main .ql-snow .ql-picker.ql-header {
  width: 135px;
}

html body #app main .container {
  height: 100%;
}

html body #app main .container .row {
  height: 100%;
}

html body #app main .container .row .container-for-login {
  display: flex;
  justify-content: center;
}

html body #app main .container .row .container-for-login .card-login {
  align-self: center;
  background: #ffffff;
  box-shadow: -20px 20px 60px #d9d9d9, 20px -20px 60px #ffffff;
  font-size: 20px;
}

html body #app main .form-checkbox {
  margin-top: 10px;
}

html body #app main .form-checkbox input {
  width: 10%;
}

html body #app main .welcome-page-content {
  display: flex;
  height: 100%;
  width: 100%;
}

html body #app main .welcome-page-content .sidebar-header {
  background-color: rgba(0, 0, 0, 0.03);
}

html body #app main .welcome-page-content .last-news {
  width: 450px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 10px 0 20px #a9bbff;
  z-index: 3;
  overflow: auto;
}

html body #app main .welcome-page-content .last-news ul {
  flex: 1 0 auto;
}

html body #app main .welcome-page-content .last-news ul .nav-link {
  color: #1344ff;
}

html body #app main .welcome-page-content .last-news ul .nav-link .media-body {
  font-size: 16px;
}

html body #app main .welcome-page-content .last-news ul .nav-link .media-body .more {
  font-size: 14px;
  display: block;
  padding-right: 20px;
  width: 100%;
  text-align: end;
}

html body #app main .welcome-page-content .last-news ul .nav-link:hover {
  color: #030381;
  background-color: rgba(0, 0, 0, 0.03);
}

html body #app main .welcome-page-content .last-news .bottom-news {
  color: #1344ff;
  flex: 0 0 auto;
}

html body #app main .welcome-page-content .last-news .bottom-news:hover {
  color: #030381;
  font-size: 16px;
  background-color: rgba(0, 0, 0, 0.03);
}

html body #app main .welcome-page-content .row {
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  width: 100%;
}

html body #app main .welcome-page-content .row .card .image-box {
  position: relative;
  margin: auto;
  overflow: hidden;
}

html body #app main .welcome-page-content .row .card .image-box img {
  max-width: 100%;
  transition: all 0.3s;
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1);
}

html body #app main .welcome-page-content .row .card .card-overlay-img {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 1.25rem;
  border-radius: calc(0.25rem - 1px);
  background: rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 100%;
  align-items: end;
}

html body #app main .welcome-page-content .row .card .overlay-text {
  width: 100%;
  display: flex;
  color: white;
  flex-direction: column;
}

html body #app main .welcome-page-content .row .card .overlay-text h4 {
  text-align: end;
}

html body #app main .welcome-page-content .row .card .overlay-text .btn {
  align-self: end;
}

html body #app main .welcome-page-content .row .card:hover .image-box img {
  transform: scale(2);
}

html body #app main .welcome-page-content .actual-purpose {
  box-shadow: -10px 0 20px #a9bbff;
  width: 450px;
  height: 100%;
  z-index: 3;
  display: flex;
  flex-direction: column;
}

html body #app main .welcome-page-content .actual-purpose ul {
  flex: 1;
}

html body #app main .welcome-page-content .actual-purpose ul .nav-link {
  color: #1344ff;
}

html body #app main .welcome-page-content .actual-purpose ul .nav-link .media-body {
  font-size: 16px;
}

html body #app main .welcome-page-content .actual-purpose ul .nav-link .media-body .more {
  font-size: 14px;
  display: block;
  padding-right: 20px;
  width: 100%;
  text-align: end;
}

html body #app main .welcome-page-content .actual-purpose ul .nav-link:hover {
  color: #030381;
  background-color: rgba(0, 0, 0, 0.03);
}

html body #app main .welcome-page-content .actual-purpose .bottom-news {
  color: #1344ff;
  flex: 0 0 auto;
}

html body #app main .welcome-page-content .actual-purpose .bottom-news:hover {
  color: #030381;
  font-size: 16px;
  background-color: rgba(0, 0, 0, 0.03);
}

html body #app footer {
  flex: 0 0 auto;
  background-color: #045ba7;
}

html body #app footer .nav-link {
  color: white;
  font-weight: bold;
}

html body #app footer .link-container {
  flex: 1 0 auto;
}

html body #app footer .fa-user-cog {
  flex: 0 0 auto;
  font-size: 16px;
  margin-bottom: 20px;
}

html #dropdown .dropdown-menu {
  top: 0;
  position: relative;
  margin-top: 0;
}