@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap");
* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
  font-weight: 300;
}

html {
  font-size: 10px;
}

h1 {
  font-size: 2.2rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.6rem;
}

header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
header h1 {
  color: #8eb8e5;
}
header .icons {
  display: flex;
  gap: 1rem;
}

input, select, textarea {
  font-size: 1.6rem;
  border-radius: 0.4rem;
  padding: 0.35em;
  color: #3E3E3E;
  background: #FFF;
  border: 0;
  width: 100%;
  max-height: 3.6rem;
}
input::-moz-placeholder, select::-moz-placeholder, textarea::-moz-placeholder {
  color: #3E3E3E;
}
input::placeholder, select::placeholder, textarea::placeholder {
  color: #3E3E3E;
}

textarea {
  max-height: 100%;
  height: 4em;
  resize: vertical;
}

.main {
  display: grid;
  grid-template-columns: 10rem auto;
}

button, a {
  cursor: pointer;
  text-decoration: none;
}

.blue-button {
  background: #8eb8e5;
  color: #FFF;
  box-shadow: 0px 0.1rem 0.5rem 0px #8eb8e5;
  font-size: 1.6rem;
  padding: 0.35rem 0.7rem;
  font-weight: 500;
  text-align: center;
  border: 0;
}
.blue-button:hover {
  box-shadow: 0px 0.1rem 1rem 0px #8eb8e5;
}
.blue-button:disabled {
  background: rgb(172, 172, 172);
}

.red-button {
  background: #EE4F2F;
  color: #FFF;
  box-shadow: 0px 0.1rem 0.5rem 0px #EE4F2F;
  font-size: 1.6rem;
  padding: 0.35rem 0.7rem;
  font-weight: 500;
  text-align: center;
  border: 0;
}
.red-button:hover {
  box-shadow: 0px 0.1rem 1rem 0px #EE4F2F;
}

.save-button {
  background: linear-gradient(-45deg, #47ff68, #aef069, #f8db37, #d0ff00);
  background-size: 400% 400%;
  animation: gradient 5s ease infinite;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.blue-icon {
  background: transparent;
  border: 0;
  font-size: 2.7rem;
  color: #8eb8e5;
  transition: transform 0.3s;
}
.blue-icon:hover {
  transform: scale(1.1);
}

.red-icon {
  background: transparent;
  border: 0;
  font-size: 2.7rem;
  color: #EE4F2F;
  transition: transform 0.3s;
}
.red-icon:hover {
  transform: scale(1.1);
}

.green-icon {
  background: transparent;
  border: 0;
  font-size: 2.7rem;
  color: #3E885B;
  transition: transform 0.3s;
}
.green-icon:hover {
  transform: scale(1.1);
}

.show {
  display: flex !important;
}

.notyf {
  font-size: 1.6rem;
}

.trumbowyg-button-pane {
  z-index: 1;
}

.bolded {
  font-weight: bold;
  font-size: 1.5rem !important;
}

.hidden {
  display: none !important;
}

#particles-js {
  position: absolute;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.login-background {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  padding-left: 5rem;
  padding-right: 5rem;
}
.login-background .login-box {
  z-index: 1;
  display: grid;
}
.login-background .login-box .logo {
  display: grid;
  margin: 2rem 0;
}
.login-background .login-box .logo img {
  justify-self: center;
  width: 90%;
}
.login-background .login-box .logo img::-moz-selection {
  background: none;
}
.login-background .login-box .logo img::selection {
  background: none;
}
.login-background .login-box .login {
  background: rgba(235, 247, 255, 0.4901960784);
  padding: 4rem;
  border-radius: 2em;
  display: grid;
  gap: 1rem;
}
.login-background .login-box .login .login-item {
  position: relative;
}
.login-background .login-box .login .login-item input {
  border-radius: 1rem;
  outline: none;
  border: 0;
}
.login-background .login-box .login .login-item label {
  z-index: 1;
  position: absolute;
  font-size: 1.6rem;
  top: 0.8rem;
  left: 0.8rem;
  color: #8eb8e5;
  transition: top 0.3s, font-size 0.3s;
}
.login-background .login-box .login .login-item label::-moz-selection {
  background: none;
}
.login-background .login-box .login .login-item label::selection {
  background: none;
}
.login-background .login-box .login button {
  background: #3E3E3E;
  color: #FFF;
  padding: 0.5rem;
  font-size: 1.6rem;
  font-weight: bold;
  border-radius: 1rem;
  border: 0;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.login-background .login-box .login button:hover {
  cursor: pointer;
  background: #8eb8e5;
  color: #FFF;
  box-shadow: 0px 0.1rem 0.8rem 0px #8eb8e5;
}

.menu {
  background: #495464;
  height: 100%;
  width: 10rem;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 4;
}
.menu .user {
  display: grid;
  padding: 0.5rem;
  gap: 0.5rem;
  order: 1;
}
.menu .user .user-icon {
  display: grid;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.menu .user .user-icon img {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
}
.menu .user .user-name {
  color: #FFF;
}
.menu .icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  order: 2;
}

.side-menu {
  background: #FFF;
  width: 30rem;
  position: fixed;
  top: 0;
  left: 10rem;
  height: 100%;
  z-index: 3;
  flex-direction: column;
  padding: 1rem;
  gap: 1rem;
  transition: left 0.2s;
  overflow-y: scroll;
}
.side-menu .side-menu-logo {
  display: grid;
  margin: 2rem 0;
}
.side-menu .side-menu-logo img {
  align-self: center;
  justify-self: center;
  max-height: 8rem;
  width: 80%;
}
.side-menu .side-menu-lists {
  display: flex;
  flex-direction: column;
}
.side-menu .side-menu-lists .list .list-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.side-menu .side-menu-lists .list .list-body {
  display: none;
  flex-direction: column;
  padding-left: 1rem;
}
.side-menu .side-menu-lists .list a, .side-menu .side-menu-lists .list button {
  background: transparent;
  border: 0;
  font-size: 1.6rem;
  color: #495464;
}
.side-menu .side-menu-lists .list a:hover, .side-menu .side-menu-lists .list button:hover {
  color: #8eb8e5;
}
.side-menu .side-menu-lists .list button {
  font-size: 2rem;
}
.side-menu::-webkit-scrollbar {
  background: #FFF;
}
.side-menu::-webkit-scrollbar-thumb {
  background: #8eb8e5;
  border-radius: 2rem;
  height: 2rem;
}

.side-menu-hidden {
  left: -20rem;
}

.grey-background {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.container {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.list-of-elements {
  background: #ebf7ff;
  padding: 2rem;
  display: flex;
  gap: 1rem;
  flex-direction: column;
}
.list-of-elements .list-head {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 0.5rem;
}
.list-of-elements .list-head .toggle-elements {
  font-size: 1.6rem;
  width: 3.6rem;
}
.list-of-elements .list-head .search {
  position: relative;
  justify-self: flex-start;
}
.list-of-elements .list-head .btns {
  justify-self: flex-end;
}

.elements {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
}
.elements .elements-item {
  background: #FFF;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 1rem;
  positioN: relative;
}
.elements .elements-item .show-module-trigger {
  cursor: pointer;
}
.elements .elements-item .show-module {
  position: absolute;
  display: none;
  z-index: 10;
  left: 0;
  max-width: 50rem;
}
.elements .elements-item .show-module img {
  max-width: 100%;
  height: auto;
}
.elements .elements-item .elements-item-left {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  grid-template-areas: "arrows icon name name" "arrows icon on-of category";
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.elements .elements-item .elements-item-left .element-arrows {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #8eb8e5;
  grid-area: arrows;
  padding-right: 1rem;
}
.elements .elements-item .elements-item-left .element-arrows .element-arrow {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 1.5rem;
  color: #8eb8e5;
}
.elements .elements-item .elements-item-left .element-icon {
  display: flex;
  align-items: center;
  font-size: 2.7rem;
  color: #8eb8e5;
  grid-area: icon;
}
.elements .elements-item .elements-item-left p {
  font-size: 1.5rem;
  grid-area: name;
  line-height: 1.5rem;
  color: #8eb8e5;
}
.elements .elements-item .elements-item-left .on-of {
  font-size: 1.3rem;
  grid-area: on-of;
  line-height: 1.3rem;
}
.elements .elements-item .elements-item-left .category {
  font-size: 1.3rem;
  grid-area: category;
  line-height: 1.3rem;
  color: #8eb8e5;
}
.elements .elements-item .elements-item-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.elements .elements-item .elements-item-right .date-name {
  border-left: 0.1rem #8eb8e5 solid;
  padding-left: 1rem;
  color: #8eb8e5;
  width: 18rem;
}
.elements .elements-item .elements-item-right .date-name p {
  font-size: 1.2rem;
}
.elements .elements-item .elements-item-right .date-name span {
  font-size: 1.4rem;
}

.order-edit, .menu-edit {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.order-edit ul, .menu-edit ul {
  list-style: none;
}

.edit-container {
  background: #ebf7ff;
  padding: 1em;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
.edit-container .edit {
  display: grid;
  grid-template-columns: 1fr 11fr;
  gap: 1rem;
}
.edit-container .edit p {
  font-size: 1.6rem;
  color: #8eb8e5;
}
.edit-container .edit-image {
  display: grid;
  grid-template-columns: 1fr 11fr;
  gap: 1rem;
}
.edit-container .edit-image .change-image {
  display: flex;
  gap: 0.5rem;
}
.edit-container .edit-image .change-image .image-placeholder {
  height: 3.6rem;
  width: 15rem;
  padding: 1rem;
  background: #FFF;
  border-radius: 0.4rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.edit-container .edit-image .change-image .image-placeholder img {
  height: 100%;
  width: auto;
}
.edit-container .edit-image .change-image .image-placeholder svg {
  font-size: 4em;
}
.edit-container .edit-image .change-image .prefer-size {
  font-size: 1.6rem;
  align-self: flex-end;
}
.edit-container .edit-file {
  display: grid;
  grid-template-columns: 1fr 11fr;
  gap: 1rem;
}
.edit-container .edit-file div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
}
.edit-container .edit-file div span {
  align-self: flex-end;
  font-size: 1.6rem;
}
.edit-container .edit-btns {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
  justify-self: flex-end;
}
.edit-container .edit-wysiwyg {
  display: grid;
  grid-template-columns: 1fr 11fr;
  gap: 1rem;
}
.edit-container .edit-wysiwyg .trumbowyg-editor {
  background: #FFF;
}
.edit-container .edit-blocks {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.5rem;
  padding: 0.5rem 0;
}
.edit-container .edit-blocks .edit-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  background: #FFF;
  padding: 1rem;
  /* Button 10 */
}
.edit-container .edit-blocks .edit-block h3 {
  color: black;
  text-align: center;
}
.edit-container .edit-blocks .edit-block .switch {
  height: 3.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.edit-container .edit-blocks .edit-block .button {
  position: relative;
  top: 50%;
  width: 7.4rem;
  height: 3.6rem;
  margin: -2.6rem auto 0 auto;
  overflow: hidden;
}
.edit-container .edit-blocks .edit-block .button.b2 {
  border-radius: 0.2rem;
}
.edit-container .edit-blocks .edit-block .checkbox {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}
.edit-container .edit-blocks .edit-block .knobs {
  z-index: 2;
}
.edit-container .edit-blocks .edit-block #button-10 .knobs:before, .edit-container .edit-blocks .edit-block #button-10 .knobs:after, .edit-container .edit-blocks .edit-block #button-10 .knobs span {
  position: absolute;
  top: 0.4rem;
  width: 2rem;
  height: 1rem;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 0.9rem 0.4rem;
  border-radius: 0.2rem;
  transition: 0.3s ease all;
}
.edit-container .edit-blocks .edit-block #button-10 .knobs:before {
  content: "Tak";
  left: 0.4rem;
  background-color: #8eb8e5;
}
.edit-container .edit-blocks .edit-block #button-10 .knobs:after {
  content: "NIE";
  right: 0.4rem;
  color: #4e4e4e;
}
.edit-container .edit-blocks .edit-block #button-10 .knobs span {
  display: inline-block;
  left: 0.4rem;
  color: #fff;
  z-index: 1;
}
.edit-container .edit-blocks .edit-block #button-10 .checkbox:checked + .knobs span {
  color: #4e4e4e;
}
.edit-container .edit-blocks .edit-block #button-10 .checkbox:checked + .knobs:before {
  left: 4.2rem;
  background-color: #EE4F2F;
}
.edit-container .edit-blocks .edit-block #button-10 .checkbox:checked + .knobs:after {
  color: #fff;
}
.edit-container .edit-blocks .edit-block #button-10 .checkbox:checked ~ .layer {
  background-color: #fcebeb;
}
.edit-container ul {
  display: grid;
  grid-template-columns: 1fr 11fr;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.edit-container ul li {
  display: grid;
  grid-column: 2/3;
}
.edit-container ul li .edit-dropdown {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}
.edit-container ul li .edit-dropdown .accordion-header {
  display: grid;
  grid-template-columns: 1fr auto;
  text-align: left;
}
.edit-container ul li .edit-dropdown .accordion-content {
  display: none;
  padding: 1rem 0rem;
}
.edit-container ul .over button {
  background: #5c8fc5;
}

.modal-del {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.397);
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
}
.modal-del .modal-del-box {
  width: auto;
  max-height: 30vh;
  background: #FFF;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.modal-del .modal-del-box .modal-del-yes-no {
  display: flex;
  justify-content: space-between;
}

.media-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.397);
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
}
.media-modal .media-modal-box {
  width: 70vw;
  max-height: 80vh;
  background: #FFF;
  padding: 1rem;
  display: grid;
  gap: 1rem;
}
.media-modal .media-modal-box .modal-box-head {
  display: grid;
  grid-template-columns: 1fr auto;
}
.media-modal .media-modal-box .modal-box-head h2 {
  align-self: center;
}
.media-modal .media-modal-box .modal-box-head div {
  align-self: center;
}
.media-modal .media-modal-box .modal-box-head div .media-modal-close {
  background: transparent;
  border: 0;
  font-size: 2rem;
}
.media-modal .media-modal-box .modal-box-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 50vh;
}
.media-modal .media-modal-box .modal-box-content .modal-box-image {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ebf7ff;
  padding: 1rem;
}
.media-modal .media-modal-box .modal-box-content .modal-box-image img {
  max-width: 100%;
  max-height: 50vh;
}
.media-modal .media-modal-box .modal-box-content .modal-box-info {
  display: grid;
  grid-template-columns: 1fr;
  font-size: 1.6rem;
}
.media-modal .media-modal-box .modal-box-content .modal-box-info .btns {
  justify-self: flex-end;
  align-self: flex-end;
}

.file-modal .media-modal-box .modal-box-content {
  min-height: auto;
}
.file-modal .media-modal-box .modal-box-content .modal-box-info {
  justify-self: flex-start;
}

.sel-img {
  border: 0.3rem solid #8eb8e5 !important;
}

.image-modal, .file-modal-chose {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.397);
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
}
.image-modal .image-modal-box, .image-modal .file-modal-box, .file-modal-chose .image-modal-box, .file-modal-chose .file-modal-box {
  width: 70vw;
  max-height: 80vh;
  background: #FFF;
  padding: 1rem;
  display: grid;
  gap: 1rem;
}
.image-modal .image-modal-box .image-modal-header, .image-modal .image-modal-box .file-modal-header, .image-modal .file-modal-box .image-modal-header, .image-modal .file-modal-box .file-modal-header, .file-modal-chose .image-modal-box .image-modal-header, .file-modal-chose .image-modal-box .file-modal-header, .file-modal-chose .file-modal-box .image-modal-header, .file-modal-chose .file-modal-box .file-modal-header {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 0.5rem;
}
.image-modal .image-modal-box .image-modal-header h2, .image-modal .image-modal-box .file-modal-header h2, .image-modal .file-modal-box .image-modal-header h2, .image-modal .file-modal-box .file-modal-header h2, .file-modal-chose .image-modal-box .image-modal-header h2, .file-modal-chose .image-modal-box .file-modal-header h2, .file-modal-chose .file-modal-box .image-modal-header h2, .file-modal-chose .file-modal-box .file-modal-header h2 {
  align-self: center;
}
.image-modal .image-modal-box .image-modal-header input, .image-modal .image-modal-box .file-modal-header input, .image-modal .file-modal-box .image-modal-header input, .image-modal .file-modal-box .file-modal-header input, .file-modal-chose .image-modal-box .image-modal-header input, .file-modal-chose .image-modal-box .file-modal-header input, .file-modal-chose .file-modal-box .image-modal-header input, .file-modal-chose .file-modal-box .file-modal-header input {
  background: #ebf7ff;
}
.image-modal .image-modal-box .image-modal-header div, .image-modal .image-modal-box .file-modal-header div, .image-modal .file-modal-box .image-modal-header div, .image-modal .file-modal-box .file-modal-header div, .file-modal-chose .image-modal-box .image-modal-header div, .file-modal-chose .image-modal-box .file-modal-header div, .file-modal-chose .file-modal-box .image-modal-header div, .file-modal-chose .file-modal-box .file-modal-header div {
  align-self: center;
  justify-self: flex-end;
}
.image-modal .image-modal-box .image-modal-header div .image-modal-close, .image-modal .image-modal-box .file-modal-header div .image-modal-close, .image-modal .file-modal-box .image-modal-header div .image-modal-close, .image-modal .file-modal-box .file-modal-header div .image-modal-close, .file-modal-chose .image-modal-box .image-modal-header div .image-modal-close, .file-modal-chose .image-modal-box .file-modal-header div .image-modal-close, .file-modal-chose .file-modal-box .image-modal-header div .image-modal-close, .file-modal-chose .file-modal-box .file-modal-header div .image-modal-close {
  background: transparent;
  border: 0;
  font-size: 2rem;
}
.image-modal .image-modal-box .image-modal-content, .image-modal .file-modal-box .image-modal-content, .file-modal-chose .image-modal-box .image-modal-content, .file-modal-chose .file-modal-box .image-modal-content {
  background: #ebf7ff;
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, 10rem);
  justify-content: space-between;
  gap: 1rem;
  max-height: 56vh;
  overflow-y: scroll;
}
.image-modal .image-modal-box .image-modal-content .image-from-modal, .image-modal .file-modal-box .image-modal-content .image-from-modal, .file-modal-chose .image-modal-box .image-modal-content .image-from-modal, .file-modal-chose .file-modal-box .image-modal-content .image-from-modal {
  width: 10rem;
  height: 10rem;
  background: #fff;
  padding: 0.3rem;
  border: 0.3rem solid #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.image-modal .image-modal-box .image-modal-content .image-from-modal img, .image-modal .file-modal-box .image-modal-content .image-from-modal img, .file-modal-chose .image-modal-box .image-modal-content .image-from-modal img, .file-modal-chose .file-modal-box .image-modal-content .image-from-modal img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
.image-modal .image-modal-box .file-table-header, .image-modal .file-modal-box .file-table-header, .file-modal-chose .image-modal-box .file-table-header, .file-modal-chose .file-modal-box .file-table-header {
  display: grid;
  grid-template-columns: 10fr 5fr 1fr;
  background: #495464;
  padding: 0.5rem;
  color: #FFF;
}
.image-modal .image-modal-box .file-table-header p, .image-modal .file-modal-box .file-table-header p, .file-modal-chose .image-modal-box .file-table-header p, .file-modal-chose .file-modal-box .file-table-header p {
  font-size: 2rem;
  font-weight: 500;
}
.image-modal .image-modal-box .file-table-header .file-size, .image-modal .file-modal-box .file-table-header .file-size, .file-modal-chose .image-modal-box .file-table-header .file-size, .file-modal-chose .file-modal-box .file-table-header .file-size {
  justify-self: flex-end;
}
.image-modal .image-modal-box .file-modal-content, .image-modal .file-modal-box .file-modal-content, .file-modal-chose .image-modal-box .file-modal-content, .file-modal-chose .file-modal-box .file-modal-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  max-height: 56vh;
  overflow-y: scroll;
}
.image-modal .image-modal-box .file-modal-content .file-item, .image-modal .file-modal-box .file-modal-content .file-item, .file-modal-chose .image-modal-box .file-modal-content .file-item, .file-modal-chose .file-modal-box .file-modal-content .file-item {
  background: #ebf7ff;
  padding: 0.5rem;
  cursor: pointer;
  transition: 0.1s;
}
.image-modal .image-modal-box .file-modal-content .file-item .file-values, .image-modal .file-modal-box .file-modal-content .file-item .file-values, .file-modal-chose .image-modal-box .file-modal-content .file-item .file-values, .file-modal-chose .file-modal-box .file-modal-content .file-item .file-values {
  display: grid;
  grid-template-columns: 10fr 5fr 1fr;
  font-size: 1.6rem;
}
.image-modal .image-modal-box .file-modal-content .file-item .file-values .file-size, .image-modal .file-modal-box .file-modal-content .file-item .file-values .file-size, .file-modal-chose .image-modal-box .file-modal-content .file-item .file-values .file-size, .file-modal-chose .file-modal-box .file-modal-content .file-item .file-values .file-size {
  justify-self: flex-end;
}
.image-modal .image-modal-box .file-modal-content .file-item:hover, .image-modal .file-modal-box .file-modal-content .file-item:hover, .file-modal-chose .image-modal-box .file-modal-content .file-item:hover, .file-modal-chose .file-modal-box .file-modal-content .file-item:hover {
  background: #8eb8e5;
  color: #FFF;
}
.image-modal .image-modal-box .image-modal-footer, .image-modal .file-modal-box .image-modal-footer, .file-modal-chose .image-modal-box .image-modal-footer, .file-modal-chose .file-modal-box .image-modal-footer {
  display: grid;
}
.image-modal .image-modal-box .image-modal-footer .blue-button, .image-modal .file-modal-box .image-modal-footer .blue-button, .file-modal-chose .image-modal-box .image-modal-footer .blue-button, .file-modal-chose .file-modal-box .image-modal-footer .blue-button {
  justify-self: flex-start;
  width: auto;
}

.media {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  background: #ebf7ff;
  padding: 1rem;
}
.media .media-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
}
.media .media-head .media-form {
  display: grid;
  grid-template-areas: "ph name name" "ph chose upload";
  grid-template-columns: 15rem auto 1fr;
  grid-template-rows: 1fr auto;
  gap: 0.5rem;
}
.media .media-head .media-form .image-placeholder {
  width: 15rem;
  height: 10rem;
  background: #FFF;
  grid-area: ph;
  display: flex;
  justify-content: center;
  align-items: center;
}
.media .media-head .media-form .image-placeholder img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
}
.media .media-head .media-form .file-name {
  grid-area: name;
  align-self: flex-end;
  font-size: 1.6rem;
}
.media .media-head .media-form .chose-file {
  grid-area: chose;
  align-self: flex-end;
}
.media .media-head .media-form .chose-file label {
  display: block;
}
.media .media-head .media-form input {
  display: none;
}
.media .media-head .media-form .btn {
  grid-area: upload;
  align-self: flex-end;
}
.media .media-head .file-form {
  grid-template-areas: "name name name name" "chose upload upload search";
  grid-template-columns: auto auto auto auto;
  grid-template-rows: 1fr auto;
  justify-content: flex-start;
}
.media .media-head .file-form .chose-file {
  justify-self: flex-start;
}
.media .media-head .file-form .search {
  grid-area: search;
}
.media .media-head .file-form .search input {
  display: block;
}
.media .media-head .btns {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  justify-content: flex-end;
}
.media .media-head .btns .submit-remove {
  display: none;
  align-items: center;
  gap: 0.5rem;
}
.media .file-table-header {
  display: grid;
  grid-template-columns: 10fr 5fr 1fr;
  background: #495464;
  padding: 0.5rem;
  color: #FFF;
}
.media .file-table-header p {
  font-size: 2rem;
  font-weight: 500;
}
.media .file-table-header .file-size {
  justify-self: flex-end;
}
.media .file-content {
  background: #ebf7ff;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: space-between;
  gap: 1rem;
}
.media .file-content .media-item, .media .file-content .file-item {
  background: #fff;
  padding: 0.5rem;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  font-size: 1.6rem;
}
.media .file-content .media-item .file-values, .media .file-content .file-item .file-values {
  display: grid;
  grid-template-columns: 10fr 5fr 1fr;
}
.media .file-content .media-item .file-values .file-size, .media .file-content .file-item .file-values .file-size {
  justify-self: flex-end;
}
.media .file-content .media-item input, .media .file-content .file-item input {
  display: none;
}
.media .file-content .media-item .delete-check, .media .file-content .file-item .delete-check {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(235, 247, 255, 0.4117647059);
  justify-content: center;
  align-items: center;
  font-size: 5rem;
  z-index: 1;
  cursor: pointer;
}
.media .file-content .media-item .delete-check:hover, .media .file-content .file-item .delete-check:hover {
  background: transparent;
}
.media .file-content .media-item:hover img, .media .file-content .file-item:hover img {
  transform: scale(1.05);
}
.media .media-content {
  background: #ebf7ff;
  display: grid;
  grid-template-columns: repeat(auto-fill, 10rem);
  justify-content: space-between;
  gap: 1rem;
}
.media .media-content .media-item {
  width: 10rem;
  height: 10rem;
  background: #fff;
  padding: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.media .media-content .media-item img {
  transition: transform 0.3s;
  max-width: 100%;
  max-height: 100%;
  height: auto;
}
.media .media-content .media-item input {
  display: none;
}
.media .media-content .media-item .delete-check {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  width: 10rem;
  height: 10rem;
  background: rgba(235, 247, 255, 0.4117647059);
  justify-content: center;
  align-items: center;
  font-size: 5rem;
  z-index: 1;
  cursor: pointer;
}
.media .media-content .media-item .delete-check:hover {
  background: transparent;
}
.media .media-content .media-item:hover img {
  transform: scale(1.05);
}

.dashboard-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.dashboard-section .dashboard-counter {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
.dashboard-section .dashboard-counter .dashboard-counter-item {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #9dc0e6;
  cursor: pointer;
  position: relative;
  padding: 2rem;
  overflow: hidden;
}
.dashboard-section .dashboard-counter .dashboard-counter-item .left-slide {
  width: 50%;
  height: 100%;
  background: #8eb8e5;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.3s;
}
.dashboard-section .dashboard-counter .dashboard-counter-item .right-slide {
  width: 50%;
  height: 100%;
  background: #8eb8e5;
  position: absolute;
  top: 0;
  right: 0;
  transition: 0.3s;
}
.dashboard-section .dashboard-counter .dashboard-counter-item .counter-title {
  text-transform: uppercase;
  z-index: 1;
  opacity: 1;
  transition: 0.3s;
}
.dashboard-section .dashboard-counter .dashboard-counter-item .counter-title h2 {
  font-size: 3rem;
  color: #FFF;
}
.dashboard-section .dashboard-counter .dashboard-counter-item .counter-value {
  position: absolute;
  justify-self: center;
  font-size: 3rem;
  opacity: 0;
  color: #FFF;
  transition: 0.3s;
}
.dashboard-section .dashboard-counter .dashboard-counter-item:hover .counter-value {
  opacity: 1;
}
.dashboard-section .dashboard-counter .dashboard-counter-item:hover .counter-title {
  opacity: 0;
}
.dashboard-section .dashboard-counter .dashboard-counter-item:hover .left-slide {
  left: -45%;
}
.dashboard-section .dashboard-counter .dashboard-counter-item:hover .right-slide {
  right: -45%;
}
.dashboard-section .dashboard-links {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 1rem;
}
.dashboard-section .dashboard-links .dashboard-links-item {
  display: grid;
}
.dashboard-section .dashboard-links .dashboard-links-item a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background: #9dc0e6;
  padding: 1rem;
  text-align: center;
  font-size: 2rem;
  color: #FFF;
  margin: auto;
}
.dashboard-section .dashboard-charts {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.dashboard-section .dashboard-charts .line-chart {
  width: 40%;
}
.dashboard-section .dashboard-charts .bar-chart {
  width: 40%;
}
.dashboard-section .dashboard-charts .doughnut-chart {
  width: 20%;
}

@media (max-width: 1400px) {
  .dashboard-section .dashboard-counter, .dashboard-section .dashboard-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .dashboard-section .dashboard-charts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .dashboard-section .dashboard-charts .line-chart {
    width: 50%;
  }
  .dashboard-section .dashboard-charts .bar-chart {
    width: 50%;
  }
  .dashboard-section .dashboard-charts .doughnut-chart {
    width: 50%;
  }
}
@media (max-width: 1200px) {
  .edit-container .edit-blocks {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 800px) {
  .main {
    grid-template-columns: 1fr;
    grid-template-rows: 10rem auto;
  }
  .menu {
    height: 10rem;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .menu .user {
    order: 2;
  }
  .menu .icons {
    flex-direction: row;
    gap: 1rem;
    order: 1;
    padding: 0.5rem;
  }
  .side-menu {
    top: 10rem;
    left: 0;
  }
  .side-menu-hidden {
    left: -30rem;
  }
  .edit-container .edit, .edit-container .edit-image, .edit-container .edit-file {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .edit-container .edit-image .change-image {
    flex-direction: column;
  }
  .edit-container .edit-image .change-image .prefer-size {
    align-self: flex-start;
  }
  .media .media-head {
    grid-template-columns: 1fr;
  }
  .media .media-head .btns {
    justify-content: flex-start;
  }
  .dashboard-section .dashboard-charts {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  .dashboard-section .dashboard-charts .line-chart {
    width: 90%;
  }
  .dashboard-section .dashboard-charts .bar-chart {
    width: 90%;
  }
  .dashboard-section .dashboard-charts .doughnut-chart {
    width: 90%;
  }
}
@media (max-width: 650px) {
  .dashboard-section .dashboard-counter, .dashboard-section .dashboard-links {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
  }
  .edit-container .edit-blocks {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 500px) {
  html {
    font-size: 2vw;
  }
  .edit-container .edit-blocks {
    grid-template-columns: 1fr;
  }
}
.log-table {
  display: grid;
  grid-template-columns: auto auto auto auto auto 1fr;
  font-size: 1.4rem;
}
.log-table .heading {
  text-transform: uppercase;
  font-weight: 400;
  background: #495464;
  color: #ebf7ff;
  padding: 0.5rem;
}
.log-table .cell {
  border: 1px solid #3E3E3E;
  background: #FFF;
  color: #495464;
  padding: 0.5rem;
}
.log-table .DEL {
  background: #EE4F2F;
  color: #FFF;
}
.log-table .UPD {
  background: #8eb8e5;
}
.log-table .ADD {
  background: #3E885B;
  color: #FFF;
}/*# sourceMappingURL=style.css.map */