* {
  transition: all 0.5s ease;
}
body {
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
::-webkit-scrollbar-button {
background-image:url('');
background-repeat:no-repeat;
width:5px;
height:0px
}
::-webkit-scrollbar-track {
background-color:#ecedee
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
border-radius: 0px;
background-color:#6dc0c8;
}
::-webkit-scrollbar-thumb:hover{
background-color:#56999f;
}
::-webkit-resizer{
background-image:url('');
background-repeat:no-repeat;
width:4px;
height:0px
}
::-webkit-scrollbar{
width: 8px;
}
.block-borders {
  border-width: 1px;
  border-color: #d6d6d6;
  border-style: solid;
  border-radius: 7px;
  padding: 19px;
}
.block-border {
  width: calc(100% + 38px);
  margin-left: -19px;
}
.base-urls {
  margin-top: 20px;
}
.content {
  margin-top: 10px;
}
.sidebar {
  position: fixed;
  z-index: 999999999;
  top: 0;
  left: 0;
  background: #3b3e40;
  padding: 6px 14px;
  transition: all 0.5s ease;
}
.sidebar .logo_content .logo {
  color: #fff;
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s ease;
}
.sidebar.active .logo_content .logo {
  opacity: 1;
  pointer-events: none;
}
.logo_content .logo i{
  margin-right: 5px;
}
.sidebar #menu-btn{
  position: absolute;
  color: #fff;
  left: 50%;
  top: 6px;
  text-align: center;
  line-height: 50px;
  transform: translateX(-50%);
}
.sidebar.active #menu-btn {
  left: 90%
}
.sidebar ul{
  margin-top: 20px;
  padding-left: 0;
}
.sidebar ul li{
  position: relative;
  margin: 5px 0;
  list-style: none;
  line-height: 50px;
}
.sidebar ul li .tooltip{
  position: absolute;
  left: 122px;
  top: 0;
  transform: translate(-50%, -50%);
  border-radius: 6px;
  background: #fff;
  line-height: 35px;
  text-align: center;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  transition: 0s;
  opacity: 0;
  pointer-events: none;
}
.sidebar.active ul li .tooltip{
  display: none;
}
.sidebar ul li:hover .tooltip{
  transition: all 0.5s ease;
  opacity: 1;
  top: 50%;
}
.sidebar ul li a{
  color: #fff;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: all 0.4s ease;
  border-radius: 12px;
  white-space: nowrap;
}
.sidebar ul li a:hover{
  color: #11101d;
  background: #fff;
}
.sidebar ul li i{
  border-radius: 12px;
  line-height: 50px;
  text-align: center;
}
.sidebar .links-name{
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s ease;
}
.sidebar.active .links-name{
  opacity: 1;
  pointer-events: auto;
  transition: all 0.5s ease;
}
.sidebar .profile-content{
  position: absolute;
  color: #fff;
  bottom: 0;
  left: 0;
  width: 100%;
}
.sidebar .profile-content .profile{
  position: relative;
  padding: 10px 6px;
  height: 60px;
  background: none;
  transition: all 0.4s ease;
}
.profile-content .profile .profile-details{
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.sidebar.active .profile .profile-details{
  opacity: 1;
  pointer-events: auto;
}
.sidebar.active .profile-content .profile {
  background: #2e3132;
}
.profile .profile-details .name-job{
  margin-left: 10px;
}
.profile .profile-details .name{
  font-weight: 400;
}
.profile #log_out, .profile #log_in{
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  line-height: 50px;
  border-radius: 12px;
  text-align: center;
  transition: all 0.4s ease;
  background: #383838
}
.sidebar.active .profile #log_out, .sidebar.active .profile #log_in{
  left: 88%;
  background: none;
}
.sidebar .profile #log_out, .sidebar .profile #log_in{
  position: absolute;
  z-index: 99;
  color: #fff;
  transition: all 0.5 ease;
}
.sidebar .profile #log_out:hover, .sidebar .profile #log_in:hover{
  background: #fff;
  color: #1d1b31;
}
.home-content{
  position: absolute;
  left: 78px;
  transition: all 0.5s ease;
}
.sidebar.active ~ .home-content{
  width: calc(100% - 78px);
  left: 78px;
}
.btn-success {
  background-color: #00c2ac !important;
  border-color: #00c2ac !important;
}
.btn-success:hover {
  background-color: #008f7f !important;
  border-color: #008f7f !important;
}
.btn-danger {
  background-color: #d42a2a !important;
  border-color: #d42a2a !important;
}
.btn-danger:hover {
  background-color: #a62121 !important;
  border-color: #a62121 !important;
}
.notification {
  position: absolute;
  top: -3.5px;
  right: -3.5px;
  padding: .45rem;
  background-color: #d42a2a;
}
@media(min-device-width: 882px){
  .phone-screen {
      display: none;
  }
  .pc-screen {}

  body {
      min-height: 100vh;
      width: 100%;
  }
  .sidebar {
    height: 100%;
    width: 78px;
  }
  .sidebar.active{
    width: 240px;
  }
  .sidebar .logo_content .logo {
    height: 50px;
    width: 100%;
  }
  .logo_content .logo i{
    font-size: 28px;
  }
  .logo_content .logo .logo_name{
    font-size: 20px;
    font-weight: 400;
  }
  .sidebar #menu-btn{
    font-size: 20px;
    height: 50px;
    width: 50px;
  }
  .sidebar ul li{
    height: 50px;
    width: 100%;
  }
  .sidebar ul li .tooltip{
    height: 35px;
    width: 122px;
  }
  .sidebar ul li i{
    height: 50px;
    min-width: 50px;
  }
  .sidebar .profile-content .profile{
    height: 60px;
  }
  .profile .profile-details .name{
    font-size: 15px;
  }
  .profile .profile-details .job{
    font-size: 12px;
  }
  .profile #log_out, .profile #log_in{
    min-width: 50px;
    font-size: 25px;
  }
  .sidebar .profile #log_out, .sidebar .profile #log_in{
    font-size: 22px;
  }
  .home-content{
    width: calc(100% - 78px);
  }
  .sidebar.active ~ .home-content{
    width: calc(100% - 78px);
  }
  .auth-form {
    width: 40%;
  }
  .lead {
    font-size: 25px;
    text-align: justify;
  }
}
@media(max-device-width: 882px){
  .phone-screen {}
  .pc-screen {
      display: none;
  }


  body {
      min-height: 100vh;
      width: 100%;
  }
  .sidebar {
    height: 100vh;
    width: 58px;
    padding: 6px 4px;
  }
  .sidebar.active{
    width: 240px;
  }
  .sidebar .logo_content .logo {
    height: 50px;
    width: 100%;
  }
  .logo_content .logo i{
    font-size: 40px;
  }
  .logo_content .logo .logo_name{
    font-size: 20px;
    font-weight: 400;
  }
  .sidebar #menu-btn{
    font-size: 25px;
    height: 50px;
    width: 50px;
  }
  .sidebar ul li{
    height: 50px;
    width: 100%;
  }
  .sidebar ul li .tooltip{
    height: 35px;
    width: 122px;
  }
  .sidebar ul li i{
    font-size: 20px;
    height: 50px;
    min-width: 50px;
  }
  .sidebar.active .links-name{
    font-size: 20px;
    opacity: 1;
    pointer-events: auto;
    transition: all 0.5s ease;
  }
  .sidebar .profile-content{
    bottom: unset;
  }
  .sidebar .profile-content .profile{
    height: 60px;
    padding: 4px 6px;
  }
  .profile .profile-details .name{
    font-size: 17px;
  }
  .profile .profile-details .job{
    font-size: 14px;
  }
  .profile #log_out, .profile #log_in{
    min-width: 50px;
    font-size: 20px;
  }
  .sidebar .profile #log_out, .sidebar .profile #log_in{
    font-size: 22px;
  }
  .home-content{
    left: 58px;
    width: calc(100vw - 58px);
  }
  .sidebar.active ~ .home-content{
    width: calc(100% - 58px);
  }
  .auth-form {
    width: 75%;
  }
  .mt-4 {
    padding-left: 15px;
  }
  .lead {
    font-size: 15px;
    padding: 0 15px;
    text-align: justify;
  }
}