/* Landing Page */
.btn-login{
  background: linear-gradient(71.99deg, #5E2563 -4.59%, #65799B 251.97%);
  box-shadow: none;
  border-radius: 6px;
}

.btn-login:hover{
  box-shadow: 3px 5px 10px 1px rgba(0, 0, 0, 0.25);
  transform: translateY(-2px);
}

.btn-login:active{
  background: linear-gradient(71.99deg, #5E2563 -4.59%, #65799B 251.97%) !important;
  transform: translateY(-1px);
}

/* loading anim */
#loading-anim{
  display: none;
}
.spinner-border{
  border-radius: 50% !important;
  border-color: #cb0c9f;
  border-right-color: transparent;
}
.sidenav .navbar-brand {
  padding: 0.5rem 1rem;
}

.navbar-vertical .navbar-brand > img, .navbar-vertical .navbar-brand-img {
  max-width: 100%;
  max-height: 3.5rem;
}

.file-icon-bg {
  min-width: 41px;
  height: 41px;
  background-image: linear-gradient(310deg, #cb0c9f 0%, #cb0c9f 100%);
  border-radius: 5px;
}

.plus-circle{
  display: flex;
  min-width: 41px;
  height: 41px;
  border-radius: 100%;
  align-items: center;
  justify-content: center;
  border: solid 3px #cb0c9f;
  color: #cb0c9f;
}

.file-icon {
  font-size: 1.4rem;
  color: white;
}

.file-size{
  max-width: 100px;
}

.file-dropdown{
  transform: translate3d(-13px, 4px, 0px) !important;
}

.dropdown .dropdown-menu.dropdown-menu-end:before {
  right: 10px;
  left: auto;
  }

.btn-view {
  font-size: 0.9rem;
  border: none;
  background: none;
  color: #cb0c9f;
  font-weight: 600;
  transition: font-weight 0.4s;
}

.btn-view:hover {
  font-weight: 500;
}

.modal-xxl {
  max-width: 85%;
}

/* Pair Device */
.pair_device{
  color: #344767;
}

.pair{
  color: white !important;
  font-size: .7rem;
  padding: 5px 20px;
  background-color: #cb0c9f;
  cursor: pointer;
}

.card-device{
  max-height: 320px;
  max-width: 300px;
  margin: auto;
}

.card-device-container {
  max-width: 300px;
}

.device-content i{
  color: #5D4D79;
  font-size: 6rem;
  transform: translateY(-25px);
}

.device-content p, .device-content h6{
  margin: 0;
}

.fa-pencil-alt{
  font-size: 1.25rem;
  color: #cb0c9f;
}

.device-name{
  font-size: 1.25rem;
}

.device-ip{
  font-size: 0.85rem;
}

/* Drag n Drop file input */
::selection {
  color: #fff;
  background: #6990f2;
}

.modal-md {
  max-width: 600px;
}
.drag-area {
  width: 430px;
  background: #fff;
  border-radius: 5px;
  padding: 30px;
  margin: auto;
}
.drag-area header {
  color: #6990f2;
  font-size: 27px;
  font-weight: 600;
  text-align: center;
}
.drag-area .form {
  height: 250px;
  display: flex;
  margin: 20px 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 5px;
  border: 2px dashed #6990f2;
}

.drag-area .added {
  background-color: #e8f0f8;
}

.form :where(i, p) {
  color: #6990f2;
}
.form i {
  font-size: 50px;
}
.form p {
  font-weight: 600;
  margin-top: 15px;
  margin-bottom: 0;
  font-size: 16px;
  text-align: center;
}

.form h5 {
  opacity: 0.5;
  font-size: 1rem;
}

#input_file {
  display: none;
}

.input-label {
  cursor: pointer;
  border-radius: 3px;
}

.dropdown-menu {
  box-shadow: 0 8px 26px -4px rgb(20 20 20 / 15%), 0 8px 9px -5px rgb(20 20 20 / 6%);
  font-size: .9rem;
}

#user-page .dropstart .dropdown-menu{
  transition: visibility 0.25s, opacity 0.25s;
}

.fa-trash-alt {
  margin-left: 1px;
  cursor: pointer;
}

.dropdown-icon {
  width: 30px;
}

.icon-custom i {
  font-size: .8rem;
}

.swal2-popup{
  flex-direction: column;
  align-items: center;
}

.swal2-validation-message{
  display: none;
}

/* New css */
.table-responsive{
  overflow-y: hidden;
}
.dropdown:not(.dropdown-hover) .dropdown-setting {
  margin-top: 0px !important;
}

.dropdown-menu li{
  position: relative;
}
.dropdown-menu .submenu{ 
  display: none;
  position: absolute;
  left:100%; top:-7px;
}
.dropdown-menu .submenu-left{ 
  right:100%; left:auto;
}

.dropdown-menu > li:hover{ background-color: #f1f1f1 }
.dropdown-menu > li:hover > .submenu{
  display: block;
}

.user-edit-dropdown{
  border: 2px solid #E9ECEF;
box-sizing: border-box;
box-shadow: 1px 8px 26px -4px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}

.primary-text{
  color: #344767;
}

.btn-add-member{
  width: 100%;
  height: 40px;
  text-transform: none;
  font-size: .75rem;
}

.fa-times-circle::before {
  box-sizing: none;
  margin: auto;
}

.user-email{
  opacity: .5;
}

.permission-title{
  min-width: 180px;
}

.permission-subtitle{
  cursor: pointer;
}

/* checkboxes */
.custom-control-label{
  cursor: pointer;
}

.addmembers-checkbox{
  margin: auto 0 auto auto;
}

.checkbox-div{
  cursor: pointer;
}

.btn-modal{
  max-width: 140px;
}

.card-member{
  height: 80vh !important;
  overflow-y: auto;
 }

 .tabcontent{ 
  display: none;
  animation: fadeIn ease 1s;
}

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

.session-bot-border{
  border-bottom: 2px solid #CFCFCF ;
  margin-bottom: 1rem;
}

.current{
  color: #D12AAB;
  border-bottom: 2px solid #D12AAB;
  padding: 12px 0rem;
  margin-bottom: -2px !important;
}

#page-container {
  position: relative;
  min-height: 100vh;
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 3.5rem;            /* Footer height */
}

@media (max-width: 769px) {
  .dropdown-menu{
    margin-top: 10px !important;
  }
}
  
@media (max-width: 426px) {
  .device-content i{
    font-size: 3rem;
    transform: translateY(-25px);
  }

  .fa-pencil-alt{
    font-size: 1rem;
  }
  .device-content h6{
    line-height: normal;
    font-size: .75rem;
  }

  h6.device-name{
    font-size: 1rem;
  }
  
  .device-ip{
    font-size: 0.85rem;
  }
}