.bg-joinder {
    background-color: rgba(93,52,236,1);
    }
.bg-joinder-primary {
    background-image: linear-gradient( 120deg,  rgba(62,161,219,1) 18%, rgba(93,52,236,1) 100% );
    }
.bg-joinder-info {
    background: linear-gradient(120deg, rgba(0,192,239,1) 15%, rgba(0,167,208,1) 100%);
    }
.bg-joinder-success {
    background: linear-gradient(120deg, rgba(76,213,107,1) 15%, rgba(40,167,69,1) 100%);
    }
.bg-joinder-yellow {
    background: linear-gradient(120deg, rgba(255,214,91,1) 15%, rgba(255,193,7,1) 100%);
    }
.bg-joinder-orange {
    background: linear-gradient(120deg, rgba(252,174,106,1) 15%, rgba(255,133,27,1) 100%);
    }
.bg-joinder-danger {
    background: linear-gradient(120deg, rgba(242,113,125,1) 15%, rgba(220,53,69,1) 100%);
    }

.bg-gray-joinder {
    background-color: rgba(0,0,0,.03);
    }

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-image: linear-gradient( 120deg,  rgba(62,161,219,1) 18%, rgba(93,52,236,1) 100% );
    color: #ffffff;
}

.pull-left{
    float: left !important;
}

@media (max-width: 767px) {
    .pagination {font-size: 12px;}
    th {font-size: 12px;}
    td {font-size: 12px;}
    .card-title {font-size: 12px;}
    footer {font-size: 12px;}
    .btn {font-size: 12px;}
    .nav-item {font-size: 12px;}
    .dataTables_info {font-size: 12px;}
    label, p, li, small {font-size: 12px !important;}
    input,input::-webkit-input-placeholder {font-size: 12px;}
    input[type="text"] {font-size: 12px;}
    select, option {font-size: 12px !important;}
    span.input-group-text {font-size: 12px !important;}
}


.card-joinder:not(.card-outline) > .card-header {
    background-image: linear-gradient( 120deg,  rgba(62,161,219,1) 18%, rgba(93,52,236,1) 100% );
  }

  .card-joinder:not(.card-outline) > .card-header,
  .card-joinder:not(.card-outline) > .card-header a {
    color: #ffffff;
  }

  .card-joinder:not(.card-outline) > .card-header a.active {
    color: rgba(93,52,236,1);
  }

  .card-joinder.card-outline {
    border-top: 3px solid rgba(93,52,236,1);
  }

  .card-joinder.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6;
  }

  .card-joinder.card-outline-tabs > .card-header a.active {
    border-top: 3px solid rgba(93,52,236,1);
  }

  .bg-joinder .btn-tool,
  .bg-gradient-joinder .btn-tool,
  .card-joinder:not(.card-outline) .btn-tool {
    color: rgba(255, 255, 255, 0.8);
  }

  .bg-joinder .btn-tool:hover,
  .bg-gradient-joinder .btn-tool:hover,
  .card-joinder:not(.card-outline) .btn-tool:hover {
    color: #ffffff;
  }

  .preview_img { height: 100%; width: 100%; position: relative; }

  .preview_img img {
    /* CSS Hack will make it width 100% and height 100% */
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    /* Maintain aspect ratio */
    max-height: 100%;
    max-width: 100%;
  }

  .navbar-joinder .navbar-brand {
    color: #ffffff;
  }

  .navbar-joinder .navbar-brand:hover, .navbar-joinder .navbar-brand:focus {
    color: #ffffff;
  }

  .navbar-joinder .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.75);
  }

  .navbar-joinder .navbar-nav .nav-link:hover, .navbar-joinder .navbar-nav .nav-link:focus {
    color: white;
  }

  .navbar-joinder .navbar-nav .nav-link.disabled {
    color: rgba(255, 255, 255, 0.25);
  }

  .navbar-joinder .navbar-nav .show > .nav-link,
  .navbar-joinder .navbar-nav .active > .nav-link,
  .navbar-joinder .navbar-nav .nav-link.show,
  .navbar-joinder .navbar-nav .nav-link.active {
    color: #ffffff;
  }

  .navbar-joinder .navbar-toggler {
    color: rgba(255, 255, 255, 0.75);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .navbar-joinder .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.75)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  }

  .navbar-joinder .navbar-text {
    color: rgba(255, 255, 255, 0.75);
  }

  .navbar-joinder .navbar-text a {
    color: #ffffff;
  }

  .navbar-joinder .navbar-text a:hover, .navbar-joinder .navbar-text a:focus {
    color: #ffffff;
  }

  .navbar-joinder .form-control-navbar,
.navbar-joinder .btn-navbar {
  background-color: rgba(255, 255, 255, 0.2);
  border: 0;
}

.navbar-joinder .form-control-navbar::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.navbar-joinder .form-control-navbar::-moz-placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.navbar-joinder .form-control-navbar:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.navbar-joinder .form-control-navbar::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.navbar-joinder .form-control-navbar::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.navbar-joinder .form-control-navbar + .input-group-append > .btn-navbar {
  color: rgba(255, 255, 255, 0.6);
}

.navbar-joinder .form-control-navbar:focus,
.navbar-joinder .form-control-navbar:focus + .input-group-append .btn-navbar {
  background-color: rgba(255, 255, 255, 0.6);
  border: 0 !important;
  color: rgba(93,52,236,1);
}

.navbar-joinder {
    background-image: linear-gradient( 120deg,  rgba(62,161,219,1) 18%, rgba(93,52,236,1) 100% );
  }


  .brand-link .brand-image-xl {
    line-height: .8;
    max-height: 45px;
    width: auto;
    margin: auto;
  }

  .logo-xl {
    opacity: 1;
    position: absolute;
    visibility: visible;
  }

  .logo-xs.brand-image-xl,
  .logo-xl.brand-image-xl {
    left: 50px;
    top: 6px;
  }