.explorer {
  border-bottom: solid 1px var(--divider-color);
  max-height: 100%;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
  "header header"
  "nav    aside"
  "main   aside";
}

.explorer>header {
  grid-area: header;
  min-height: 5rem;
}

.explorer>header>label {
  color: var(--text-color);
  font-size: 1.3rem;
  font-weight: 500;
}

.explorer>header .separator {
  margin: 0 .5rem;
}

.explorer>nav {
  border-top: solid 1px var(--divider-color);

  grid-area: nav;
  display: flex;
}
.explorer>nav>.tabs {
  width: 100%;
}

.explorer>nav>.tabs a {
  text-decoration: none;
}

.explorer>nav>.tabs .tab {
  color: rgba( 0,0,0, .8);
  flex-direction: column !important;
  line-height: 1.2rem;
  font-size: 1.1rem;
  font-weight: 500;
  height: 4rem;
}

.explorer>nav>.tabs .tab:hover {
  background-color: var(--divider-color-light);
}

.explorer>nav>.tabs .tab.selected {
  color: #000;
}

.explorer>main {
  grid-area: main;
  overflow: auto;
}

.explorer>main>section>header {
  position: sticky;
  top: 0px;
  z-index: 100;
}

.explorer>main>section>header>label {
  color: #5f6368;
  font-weight: 500;
}

.explorer>aside {
  grid-area: aside;
  min-width: 0;
  width: 0;
  transition: all .5s;
  animation-duration: 1s;
  animation: courtain;
  animation-duration: .5s;
  overflow: hidden;
  border-top: solid 1px var(--divider-color);

}

.explorer>aside.active {
  transition: all .5s;
  width: 32rem;
  display: flex;
  flex-direction: column;
  min-width: 32rem;
  border-left: solid 1px var(--divider-color);
}

.explorer>aside .tabs {
  border-bottom: solid 1px var(--divider-color);
}

.explorer>aside .stack {
  padding: 0rem !important;
}

@keyframes courtain {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.explorer .sorter {
  display: flex;
  align-items: center;
}

.explorer .sorter .field-box {
  border: solid 0px;
}


.explorer .sorter .field-box:hover {
  background-color: #96969666;
}

.explorer .sorter .field-box>select {
  height: 3rem;
  appearance: none;
}


.file-card {
  border: solid 1px var(--divider-color);
  border-radius: .5rem;
  display: flex;
  flex-direction: column;
  animation: fadeIn;
  animation-duration: .6s;
}

@keyframes fadeIn {
  0% { opacity: 0; transform: scale(.9,.9); }
  100% { opacity: 1; transform: scale(1,1); }
}

.file-card.selected {
  border: solid 1px var(--primary-color);
}

.file-card.selected>footer {
  background-color: var(--primary-color-lighter);
}

.file-card>main {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-card>main .thumb-icon {
  width: 5rem !important;
  height: 5rem !important;
  min-width: 5rem !important;
  min-height: 5rem !important;
}

.file-card>main .thumb-icon>.material-icons {
  font-size: 5rem !important;
}

.file-card>main>.check-icon {
  display: none;
  position: absolute;
  top: .5rem;
  left: .5rem;
}

.file-card:hover>main>.check-icon {
  display: flex;
}

.file-card>main>.check-icon.checked {
  display: flex;
}

.file-card>main>.menu-icon {
  display: none;
  position: absolute;
  top: .5rem;
  right: .5rem;
}

.file-card:hover>main>.menu-icon {
  display: block;
}

.file-card>main>.decorator {
  position: absolute;
  bottom: .5rem;
  right: 1.3rem;
  padding: .5rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: .3rem;
  text-transform: capitalize;
}

.file-card>main>.state-label {
  position: absolute;
  bottom: .5rem;
  left: 1.3rem;
  padding: .5rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: .3rem;
  text-transform: capitalize;
}

.file-card>main>.state-label.ok {
  color: white;
  background-color: green;
}

.file-card>main>.state-label.error {
  color: white;
  background-color: red;
}

.file-card>main>.thumb {
  width: 100% !important;
  height: 100% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,.54);
}

.file-card>main>.thumb>img {
  object-fit: cover !important;
}

.file-card>footer {
  border-top: dotted 1px var(--divider-color);
  font-size: 1.3rem;
  font-weight: 500;
  color: rgba(0,0,0,.72);
  padding: 1.3rem 1rem;
}

.file-card>footer .header {
  padding: 0;
  height: 3rem;
}

.file-card>footer .icon {
  width: 3rem !important;
  height: 3rem !important;
  min-width: 3rem !important;
  min-height: 3rem !important;
}

.file-card>footer>p {
  margin: 0;
  padding: .4rem 0 0 .4rem;
  color: rgba(0,0,0,.54);
}











.card.file {
  position: relative;
  overflow: visible !important;
}

.card.file.selected {
  border: solid 1px var(--primary-color);
}

.card.file.selected>footer {
  background-color: var(--primary-color-lighter);
}

.card.file>.state {
  text-transform: upperCase;
  position: absolute;
  top: .5rem;
  left: .5rem;
  color: var(--primary-color-text);
  background-color: var(--accent-color);
  padding: .5rem;
  font-size: 1.1rem;
  font-weight: 500;
  border-radius: 2px;
  z-index: 1;
}

.card.file>.menu-icon {
  position: absolute ;
  top: 0rem ;
  right: 0rem !important;
  z-index: 10;
}

.card.file>.thumb {
  width: 100% !important;
  height: 100% !important;
}

.card.file>footer>header {
  width: 100%;
  display: flex;
  align-items: center;
  min-height: 4rem;
}

.card.file>footer>header>.icon {
  margin: .5rem;
}

.card.file>footer>header>label {
  flex: 1;
  font-size: 1rem;
}

.card.file .decorator {
  color: var(--secondary-color-text);
  background-color: var(--secondary-color);
  padding: .5rem;
  margin: .5rem;
  font-size: 1rem;
  font-weight: 400;
}