#tutorial{
  background-image:url("/img/tutorial.png");
  height:100%;
  width:100%;
  z-index:100;
  position:absolute;
}
.head-blue{
  background-color: #3b9ddb;
  padding: 5px;
  color: white;
  border-radius: 5px 5px 0px 0px;
  padding-left: 20px;
  padding-right: 20px;
}
.miunisant{
  font-size:4mm;
  text-align:left;
  font-family: 'Open Sans', sans-serif;
  padding:15px;
}
.logounisant{
   width:80%;
   aspect-ratio:1/1;
   margin-top:20px;
   border-radius:100%;
   margin-left:10%;
}
.singleimage{
   width:100%;
   max-width: 300px;
   aspect-ratio:1.6875/1;
}
.umateria{
   width:100%;
   aspect-ratio:1/1;
}
.logou{
  border-radius:100%;
  width:100%;
  height:auto !important;
  aspect-ratio:1/1;

}
.chocolate{
  width:80px;
  height:80px;
  padding:0;
  text-align:center;
  color:#333;
  margin-left:30px;
  cursor:pointer;
}
.chocolate span{
  display:inline-block;
  width:20%;
  height:20%;
  border-radius:2px;
  margin:0;
  box-sizing:content-box !important;
  margin-left:4px;
  border:solid #87919D 2px;
  transition:.5s;
  color:#87919D;
}
.chocolate:hover span:nth-child(even){
  cursor:pointer;
  border-color:transparent;
  transition:.5s;
  animation-name:domino;
  animation-duration:1s;
  animation-iteration-count: infinite;
}
.chocolate:hover span:nth-child(odd){
  cursor:pointer;
  border-color:transparent;
  transition:.5s;
  animation-name:domino2;
  animation-duration:1s;
  animation-iteration-count: infinite;
}
@keyframes domino {
  0%   {background-color: white;}
  50%  {background-color: #87919D;}
  100% {background-color: white;}
}
@keyframes domino2 {
  0%   {background-color: #87919D;}
  50%  {background-color: white;}
  100% {background-color: #87919D;}
}
.menucho{
  width:100%;
}
.chat-tawk{
  text-align:center;
  position:absolute;
  bottom:15px;
  width:150px;
}
.linechat{
  height:15px;
}

#alert-content{
  position: absolute;
    display: flex;
    z-index: 10000;
    margin-left: 20px;
    margin-top: 20px;
}
.profile-image {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    font-size: 17px;
    line-height: 2;
    /* margin-left: 0px; */
    padding: 0px 5px;
  }
  .sidebar-wrapper .menu .submenu.active {
    max-height: 5500px;
  }
.day{
  width:0px;
  position:fixed;
  background-color:rgba(0,0,0,.8);
  z-index:98;
  height:100%;
  left:150px;
  transition:.5s;
}
.moon{
  width:100%;
  transition:.5s;
}
.menu{
  height:auto;
  width:0px;
  position:fixed;
  background-color:#EDF1F5;
  left:150px;
  z-index:99;
  transition:.9s;
}
.menu-open{
  width: 50%;
  border-radius: 0% 4% 4% 0%;
  box-shadow: 10px 10px 10px;
  transition: .9s;
  height: auto;
  top: 17%;
}
.menu-card{
  height: 100px;
  width: 100%;
  border: solid #ADAEB0 1px;
  border-radius: 5px;
  
  cursor:pointer;
}
.menu-card span, i{
  color:#333 !important;
}
.menu-card td:nth-child(1){
  width:50px;
}
.menu-card:hover .franja{
  width:30px;
  transition:.5s;
  background-color:#D88506;
}
.franja{
  height:80px;
  margin-top:10px;
  margin-bottom:10px;
  margin-left:-1px;
  background-color:#7E9EBE;
  width:20px;
  transition:.5s;
}
.cloader {
  background: #ecf0f1;
  transition: 1s all ease-out;
  -webkit-animation-name: linear-bg;
          animation-name: linear-bg;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}

@-webkit-keyframes linear-bg {
  from {
    background: #ecf0f1;
  }
  100% {
    background: #DDD;
  }
}

@keyframes linear-bg {
  from {
    background: #ecf0f1;
  }
  100% {
    background: #DDD;
  }
}

.menu-content{
  transition: .9s;
}