/* CUSTOM STYLES BY FN */

main {
  padding-left: 0px;
}

.manager__container {
  margin-left: 265px;
}

[data-page='Login'] main {
  padding-left: 0px;
}

#save {
  display: none;
}

.ui {
  position: absolute;
}

.showSaveBtn {
  display: block !important;
}

.mt-40 {
  margin-top: 40px;
}

.mb-2 {
  margin-bottom: 40px;
}

.underline {
  text-decoration: underline;
}

.delete-Project {
  margin-right: 40px;
}

.btn_red {
  background: #e56862;
  color: #fff;
}

.btn:disabled {
  background: grey !important;
  color: #fff;
}

.btn_red:hover {
  background: #e45851;
}

.nav__head::before {
  background: none;
}

.sidebar__logo img {
  width: 70px;
}

.header {
  justify-content: end;
}

.header__search {
  height: 58px;
}

.icon-dashboard-login {
  width: 6.38em;
  height: 6em;
  fill: black;
}

.login__logo .login__pic {
  width: 150px;
}

.login {
  background: url('../static/dashboard-IMG/bg-login-custom.jpg') no-repeat 50%
    50% / cover;
}

.login::before {
  background: rgba(30, 31, 32, 0.1);
}

.login__row {
  background-color: rgba(255, 255, 255, 0.8);
}

.login__col:nth-child(2) {
  background-color: rgba(255, 255, 255, 0.6);
}

.page__meta__id {
  color: grey;
}

.sidebar {
  justify-content: space-between;
}

.dashboard__row {
  flex-wrap: wrap;
}

.dashboard__col_w33 {
  margin-bottom: 15px;
}

.draggable-mirror {
  width: 300px;
}

.add__project__container,
.delete__project__container {
  position: fixed;
  z-index: 11;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  display: none;
}

.drag__upload__container {
  position: absolute;
  z-index: 11;
  top: 50%;
  left: calc(50% + 165px);
  transform: translate(-50%, -50%);
  display: none;
  color: white;
  font-size: 30px;
}

.add__project__wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.delete__project__wrapper,
.upload__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.show-container {
  display: block;
}

.background-none {
  background: none;
}

.manager__plus {
  cursor: pointer;
}

.manager__folder {
  flex-shrink: 0;
}

.manager__item {
  background-color: #e3e3e3;
}

.manager__item-online {
  background-color: #88e99b;
}

.manager__item:hover,
.manager__item.active {
  background-color: #ebe9e9;
}

.manager__item-online:hover {
  background-color: #7fda91;
}

.page__edit__wrapper {
  margin-top: 40px;
}

.infos {
  padding: 20px 20px;
}

.uploadZone {
  font-size: 20px;
  padding: 20px;
  height: 250px;
  border-radius: 12px;
  border: 2px solid rgba(127, 133, 162, 0.2);
}

.dragActive {
  border-color: #3e6bec;
}

.progress-helperText {
  margin-top: 5px;
  font-size: 14px;
  display: none;
}

/* Progress Bar */

.progress-bar {
  margin-top: 30px;
  height: 10px;
  background: rgba(62, 107, 236, 0.2);
  border-radius: 50px;
  position: relative;
  display: none;
}

.progress-bar-visible {
  display: block;
}

.progress {
  width: 10%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50px;
  height: 10px;
  background: #3e6bec;
  transition: width 0.5s;
}

/* Single Items */

.single-project {
  max-width: 250px;
  min-height: 120px;
}

.single_project-photo,
.single_project-video {
  width: 100%;
  height: 170px;
  max-width: 250px;
}

.single_project-photo img,
.single_project-video img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.project__detail-link {
  display: block;
}

.files__item {
  padding: 0;
  overflow: hidden;
  position: relative;
}

.video__item {
  margin: 10px;
}

.video__prev__container {
  border-radius: 12px;
  overflow: hidden;
}

.video__preview {
  margin: 10px;
}

.video__preview iframe {
  width: 540px;
  height: 300px;
}

.video__ID {
  display: none;
}

.project-name {
  font-size: 15px;
  position: absolute;
  bottom: 5%;
  left: 5%;
  color: white;
  font-weight: 600;
  text-shadow: 2px 1px 2px rgba(0, 0, 0, 0.4);
}

.project-type {
  font-size: 15px;
  position: absolute;
  top: 5%;
  right: 5%;
  color: white;
  font-weight: 600;
  text-shadow: 2px 1px 2px rgba(0, 0, 0, 0.4);
}

.project-status {
  margin-left: 15px;
}

/* Custom Switch */

/* The switch - the box around the slider */
.custom-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin: 6px;
}

/* Hide default HTML checkbox */
.custom-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: '';
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #2196f3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.field__wrap {
  display: flex;
  align-items: center;
}

/* Custom Select */

/* SINGLE PAGE Delete Photo / Video */

.single_project-photo:hover .photo-edit-Btns {
  opacity: 1;
}

.single_project-photo:hover .star-edit {
  opacity: 1;
}

.single_project-photo:hover .star-edit path {
  fill: white;
}

.photo-edit-Btns {
  opacity: 0;
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  column-gap: 8px;
}

.star-edit {
  opacity: 0;
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  align-items: center;
  column-gap: 8px;
  cursor: pointer;
}

.star-edit:hover path {
  fill: yellow !important;
}

.star-edit-online {
  opacity: 1;
}

.star-edit path {
  fill: transparent;
}

.star-edit-online path {
  fill: yellow;
}

.custom-delete-Btn {
  width: 17px;
}

.custom-delete-Btn path {
  fill: white;
  cursor: pointer;
}

.custom-delete-Btn:hover path {
  fill: #3e6bec;
}

.custom-online-Btn,
.custom-offline-Btn {
  width: 20px;
}

.custom-online-Btn path {
  fill: #3e6bec;
  cursor: pointer;
}

.custom-online-Btn:hover path {
  fill: #6288ee;
}

.custom-offline-Btn path {
  fill: white;
  cursor: pointer;
}

.custom-offline-Btn:hover path {
  fill: #3e6bec;
}

.image-offline {
  opacity: 0.3;
}

.project-offline {
  opacity: 0.3;
}

.dev__wrapper {
  font-size: 16px;
}

.error-red {
  color: red;
  font-weight: 500;
}