html {
  font-size: unset !important;
  font-weight: unset !important;
  font-optical-sizing: unset;
}
.reset-all {
  all: initial;
}

body {
  font-family: "Product Sans" !important;
  font-weight: unset !important;
}

*::-webkit-scrollbar-track {
  width: 5px;
  background: #fff;
}
*::-webkit-scrollbar {
  width: 5px;
  background: #fff;
}
*::-webkit-scrollbar-thumb {
  position: absolute;
  width: 5px;
  background: rgb(58, 23, 139);
  border-radius: 5px;
}

a {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

td,
th {
  padding: 5px 0px;
  font-size: 10pt;
}

.row {
  padding: 0px 15px 0px 0px;
}

.shadow {
  text-shadow: #000000 0px 0px 10px;
}

.noshadow {
  box-shadow: none !important;
}

.f10 {
  font-size: 10pt !important;
}
.f12 {
  font-size: 12pt !important;
}
.f14 {
  font-size: 14pt !important;
}
.f16 {
  font-size: 16pt !important;
}
.f18 {
  font-size: 18pt !important;
}
.f20 {
  font-size: 20pt !important;
}

.btn,
.btn-flat {
  border-radius: 0.33em;
  font-size: 10pt;
  font-weight: 500;
  box-shadow: none;
  text-align: center;
  margin: 15px;
}

.tabs .tab a {
  color: #0d47a1;
  font-weight: 500;
}
.tabs .tab a.active {
  color: #0d47a1;
}
.tabs .tab a:hover {
  color: #0d47a1;
}
.tabs .tab a:focus {
  background-color: rgba(13, 71, 161, 0.1);
}
.tabs .tab a:focus.active {
  background-color: rgba(13, 71, 161, 0.1);
}
.tabs .indicator {
  background-color: #0d47a1;
}

html,
body {
  height: 100%;
}

main {
  height: 100%;
  background-color: #eee;
}

html,
body {
  height: 100%;
}

main {
  height: 100%;
}

#side {
  position: static;
  height: 100%;
  top: 170px;
  left: 0;
  overflow: hidden;
  float: left;
  background-color: #fff;
  width: 255px;
}

.menuside {
  width: 250px;
  height: 30px;
  color: #444;
  line-height: 30px;
  margin: 0px 0px 5px 0px;
  border-radius: 0px 15px 15px 0px;
  cursor: pointer;
}

.menuside:hover {
  background-color: #eee;
}

.menuside-in {
  padding: 0px 0px 0px 45px;
  color: #777;
}

i.menuicon {
  width: 65px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  z-index: -10;
  float: left;
  color: #777;
}

#toptools {
  height: 60px;
  display: block;
}

#mainview {
  margin: 0;
  padding: 0;
}

#midiapanel {
  border-left: 1px solid #eee;
  min-height: calc(100vh - 80px);
}

.collection {
  background-color: #ffffff;
  border: 1px solid #ddd;
  -webkit-border-radius: 0.8rem;
  border-radius: 0.8rem;
  overflow: hidden;
  box-shadow: none;
}

#panUserList {
  font-size: 10pt;
}

#loading {
  position: fixed;
  width: 100%;
  height: 120%;
  background-color: rgba(255, 255, 255, 0);
  z-index: 9999;
  transition: all 200ms ease-in-out;
  display: none;
  top: -100px;
}

#loading_bullet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  padding: 4px 0px 0px 4px;
  background-color: #fff;
  box-shadow: 0px 5px 5px #bbb;
  border: 1px solid #eee;
  z-index: 9998;
}
#contador {
  margin: 10px !important;
  background-color: indigo;
  color: #ffffff;
  border-radius: 5px;
  padding: 5px;
}

.dynamic-color {
  height: 50px;
}

.btn-floating.sample {
  margin: 5px;
}

#palette {
  height: 400px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  overflow: scroll;
  overflow-x: hidden;
  position: fixed;
  display: none;
}

.sample {
  height: 40px;
  cursor: pointer;
}

.sample i {
  padding: 0 8px 0 0;
}

.dynamic-color .red,
.dynamic-color .pink,
.dynamic-color .purple,
.dynamic-color .deep-purple,
.dynamic-color .indigo,
.dynamic-color .blue,
.dynamic-color .light-blue,
.dynamic-color .cyan,
.dynamic-color .teal,
.dynamic-color .green,
.dynamic-color .light-green,
.dynamic-color .lime,
.dynamic-color .yellow,
.dynamic-color .amber,
.dynamic-color .orange,
.dynamic-color .deep-orange,
.dynamic-color .brown,
.dynamic-color .grey,
.dynamic-color .blue-grey,
.dynamic-color .black,
.dynamic-color .white,
.dynamic-color .transparent {
  height: 40px;
  width: 100%;
  padding: 0;
  margin: 0;
}

#panNovoUser_Close {
  margin: 3px;
  cursor: pointer;
}

#cmdNovoItem {
  position: relative;
  overflow: hidden;
  margin: 10px;
}

.fechado {
  height: 45px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 2em;
  cursor: pointer;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
.aberto {
  height: auto;
  width: unset;
  border-radius: 1em;
  content: "";
}

.novo-item {
  border-bottom: 1px solid #eee;
  padding: 5px 0px;
}

.ql-toolbar.ql-snow {
  border: 0;
}

.modal {
  border-radius: 1em;
  transform: translateY(50%) scaleX(1) !important;
  border: 0;
  z-index: 5000;
}

*:focus {
  outline: none;
}

#barra-busca {
  margin: 10px;
}

#barra-busca .search-box {
  width: 100%;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 2em;
  height: 50px;
  padding: 0;
  overflow: hidden;
}

#barra-busca .search-box > input {
  width: 90%;
  padding: 15px 0px;
  top: 5px;
  border: 0;
  z-index: 10;
}

#barra-busca .search-box:hover {
  box-shadow: 0px 2px 5px rgba(17, 17, 17, 0.3);
}

#barra-busca .search-box .circle {
  width: 40px;
  height: 40px;
  margin: 5px;
  right: 5px;
  font-size: 16pt;
  text-align: center;
  padding-top: 10px;
  cursor: pointer;
  z-index: 1000;
}

#barra-busca .btn {
  border-radius: 0.33em;
  box-shadow: none;
  text-transform: none;
}

#barra-busca .btn:hover {
  border: 1px solid #aaa;
  box-shadow: 0px 0px 5px #f0f0f0;
}

#barra-busca #sugests {
  width: 100%;
}

#barra-busca a.sugests-item {
  padding: 5px 20px 5px 20px;
  clear: both;
  font-weight: 700;
  border: 1px;
  display: block;
  border: 1px;
  text-align: left;
}

.dialogo {
  position: absolute;
  z-index: 10;
  width: 100%;
  height: 100vmax;
  top: 0;
  left: 0;
  background-color: rgb(0, 0, 0, 0.5);
  z-index: 100 !important;
}

.dialogo-conteudo {
  position: fixed;
  bottom: 10vh;
  left: 15%;
  width: 70%;
  height: 80vh;

  background-color: rgb(255, 255, 255);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 0px 50px #333333;
}

.cabecario {
  height: 15vh !important;
}
.rolagem {
  height: 65vh !important;
  overflow-y: scroll;
}

.btn-small {
  height: 30px !important;
  line-height: 30px !important;
  margin: 10px !important;
}

/** BARRA DE BUSCA NAS MIDIAS **/

#busca-midia .search-box {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #ccc;
  border-radius: 15px;
  height: 30px;

  overflow: hidden;
}

#busca-midia .search-box > input {
  width: 90%;
  padding: 5px 0px;
  top: 5px;
  border: 0;
  z-index: 10;
}

#busca-midia .search-box:hover {
  box-shadow: 0px 2px 5px rgba(17, 17, 17, 0.3);
}

#busca-midia .search-box .circle {
  width: 24px;
  height: 24px;
  margin: 3px;
  right: 3px;
  font-size: 12pt;
  text-align: center;
  padding-top: 3px;
  cursor: pointer;
  z-index: 1000;
}

#busca-midia .btn {
  border-radius: 0.33em;
  box-shadow: none;
  text-transform: none;
}

#busca-midia .btn:hover {
  border: 1px solid #aaa;
  box-shadow: 0px 0px 5px #f0f0f0;
}

/**	ESTILOS MOBILE **/

@media only screen and (max-width: 992px) {
  header,
  main,
  footer {
    padding-left: 0;
  }

  #mainview {
    margin: 0px 0px 0px 0px;
  }

  #side {
    width: 0px;
    position: fixed;
    box-shadow: 5px 5px 10px #eee;
    top: 60px;
    z-index: 1000;
  }
  .row {
    padding: 0;
  }

  .input-field > #lide {
    height: 100px;
    padding: 10px;
  }
}

.user-background {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}