.mobile {
  display: none;
}
@media screen and (max-width: 600px) {
  .mobile {
    display: block;  
  }
  .desktop {
    display: none;
  }
}

    .card {
    background: #FFFFFF;
    box-shadow: 4px 4px 60px rgb(99 69 237 / 19%);
    border-radius: 25px;
}
.simplebar-mask {
    box-shadow: rgb(0 0 0 / 20%) 2px 2px 6px;
}

    * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.buttons {
    margin: 10%;
    text-align: center;
}

.btn-hover {
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    margin: 0px;
    margin-bottom: 10px;
    height: 50px;
    text-align:center;
    border: none;
    background-size: 300% 100%;

    border-radius: 10px;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:focus {
    outline: none;
}

.btn-hover.color-1 {
    background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
    box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}
.btn-hover.color-2 {
    background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19);
    box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
}
.btn-hover.color-3 {
    background-image: linear-gradient(to right, #667eea, #764ba2, #6B8DD6, #8E37D7);
    box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
}
.btn-hover.color-4 {
    background-image: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516);
    box-shadow: 0 4px 15px 0 rgba(252, 104, 110, 0.75);
}
.btn-hover.color-5 {
    background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);
    box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);
}
.btn-hover.color-6 {
    background-image: linear-gradient(to right, #009245, #FCEE21, #00A8C5, #D9E021);
    
}
.btn-hover.color-7 {
    background-image: linear-gradient(to right, #6253e1, #852D91, #A3A1FF, #F24645);
    box-shadow: 0 4px 15px 0 rgba(126, 52, 161, 0.75);
}
.btn-hover.color-8 {
    background-image: linear-gradient(to right, #576574, #485563, #2b5876, #4e4376);
    box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
}
.btn-hover.color-9 {
    background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
    box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
}
.btn-hover.color-10 {
        background-image: linear-gradient(to right, #ed6ea0, #ec8c69, #f7186a , #FBB03B);
    box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
}
.btn-hover.color-11 {
       background-image: linear-gradient(to right, #eb3941, #f15e64, #e14e53, #e2373f);  box-shadow: 0 5px 15px rgba(242, 97, 103, .4);
}



    
    .card-title {
    font-size: 18px;
}
    
    .dropdown-menu {
    font-size: 0.85rem;
    }
    
    .dropdown-item {
    padding: 0.5rem 1.5rem;
    }


body[data-layout=horizontal][data-topbar=light] .topnav {
    background-color: #7c4dff;
}
.topnav {
    background: #7c4dff;
    box-shadow: 0 4px 15px 0 rgb(16 15 19 / 30%);
}
.topnav .navbar-nav .nav-item .nav-link.active {
    font-weight: 600;
    color: #ffffff;;
}
.topnav .navbar-nav .nav-link:focus, .topnav .navbar-nav .nav-link:hover {
    color: #ffffff;
}
.topnav .navbar-nav .nav-link {
    font-weight: 500;
}
.topnav .navbar-nav .dropdown.active>a {
    color: #ffffff;
}
.topnav .navbar-nav .dropdown-item.active, .topnav .navbar-nav .dropdown-item:hover {
    color: #7759ff;
}
    .xalert>.start-icon {
    margin-right: 0;
    min-width: 20px;
    text-align: center;
}

.xalert>.start-icon {
    margin-right: 5px;
}

.greencross
{
  font-size:18px;
      color: #25ff0b;
    text-shadow: none;
}

.xalert-simple.xalert-success
{
  border: 1px solid rgba(36, 241, 6, 0.46);
    background-color: rgba(7, 149, 66, 0.12156862745098039);
    box-shadow: 0px 0px 2px #259c08;
    color: #0ad406;

  transition:0.5s;
  cursor:pointer;
}
.xalert-success:hover{
  background-color: rgba(7, 149, 66, 0.35);
  transition:0.5s;
}
.xalert-simple.xalert-info
{
  border: 1px solid rgba(6, 44, 241, 0.46);
    background-color: rgba(7, 73, 149, 0.12156862745098039);
    box-shadow: 0px 0px 2px #0396ff;
    color: #0396ff;

  transition:0.5s;
  cursor:pointer;
}

.xalert-info:hover
{
  background-color: rgba(7, 73, 149, 0.35);
  transition:0.5s;
}

.blue-cross
{
  font-size: 18px;
    color: #0bd2ff;
    text-shadow: none;
}

.xalert-simple.xalert-warning
{
      border: 1px solid rgba(241, 142, 6, 0.81);
    background-color: rgba(220, 128, 1, 0.16);
    box-shadow: 0px 0px 2px #ffb103;
    color: #ffb103;

  transition:0.5s;
  cursor:pointer;
}

.xalert-warning:hover{
  background-color: rgba(220, 128, 1, 0.33);
  transition:0.5s;
}

.warning
{
      font-size: 18px;
    color: #ffb40b;
    text-shadow: none;
}

.xalert-simple.xalert-danger
{
  border: 1px solid rgba(241, 6, 6, 0.81);
    background-color: rgba(220, 17, 1, 0.16);
    box-shadow: 0px 0px 2px #ff0303;
    color: #ff0303;
  transition:0.5s;
  cursor:pointer;
}

.xalert-danger:hover
{
     background-color: rgba(220, 17, 1, 0.33);
  transition:0.5s;
}

.danger
{
      font-size: 18px;
    color: #ff0303;
    text-shadow: none;
}

.xalert-simple.xalert-primary
{
border: 1px solid #7b4cfd8a;
    background-color: #7b4cfd3d;
    box-shadow: 0px 0px 2px #7b4cfd;
    color: #7b4cfd;
  transition:0.5s;
  cursor:pointer;
}

.xalert-primary:hover{
  background-color: #7b4cfd69;
   transition:0.5s;
}

.alertprimary
{
      font-size: 18px;
    color: #7b4cfd;
    text-shadow: none;
}

.alert:before {
    content: '';
    position: absolute;
    width: 0;
    height: calc(100% - 44px);
    border-left: 1px solid;
    border-right: 2px solid;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    left: 0;
    top: 50%;
    transform: translate(0,-50%);
      height: 20px;
}

.btn-primary {
        background-image: linear-gradient(to left, #9045ed 58.12%, #7200ff 81.74%);
    border: unset;
    background-size: 200% auto;

}
.text-primary {
    color: #7c4dfe!important;
}