:root {
  --sdx-purple-1: #6741d5;
  --sdx-purple-2: #fd5c88;
  --sdx-red-1: #fc4b6c;
  --sdx-red-2: #fb6e50;
  --sdx-blue-1: #1f88e5;
  --sdx-blue-2: #3ac9d6;
  --sdx-green-1: #2bb36a;
  --sdx-green-2: #94d955;
  --sdx-yellow-1: #ffb22b;
  --sdx-yellow-2: #f9c851;
}

/*
	LOGIN
*/

.login-logo {
	color: white;
	background: #024d79;
	background: linear-gradient(45deg, var(--sdx-blue-1), var(--sdx-blue-2));
	margin-bottom: 0px;
	padding: 20px 20px;
	font-size: 25px;
	border-radius: 10px 10px 0px 0px;
}

.theme-red .login-logo {
    background: linear-gradient(45deg, var(--sdx-red-1), var(--sdx-red-2));
}

.theme-purple .login-logo {
    background: linear-gradient(45deg, var(--sdx-purple-1), var(--sdx-purple-2));
}

.theme-green .login-logo {
    background: linear-gradient(45deg, var(--sdx-green-1), var(--sdx-green-2));
}

.theme-yellow .login-logo {
    background: linear-gradient(45deg, var(--sdx-yellow-1), var(--sdx-yellow-2));
}

.login-box-body {
    border-radius: 0px 0px 10px 10px;
}

.login-box-body .form-control-feedback {
    color: #d2d6de;
}

.btn-login {
	color:#fff;
	margin-bottom: 20px;
	padding: 10px;
	background: linear-gradient(45deg, var(--sdx-blue-1), var(--sdx-blue-2));
}

.required:after {
	content:" *";
	color: #fc4b6c;
}

.my-radio {
    position: relative;
    display: block;
}

.my-radio label {
	font-weight: normal;
	margin-right: 15px;
}

.btn-space-right {
	margin-right: 5px;
}

.btn-space-left {
	margin-left: 5px;
}

.icon-turun {
	margin-left: 10px;
}

.main-header .logo .logo-lg img {
	height: 35px;
}

.main-header .logo .logo-mini img {
	height: 30px;
}

.user-panel {
    padding: 25px 10px;
    overflow: hidden;
}

.box-header .box-title {
    font-weight: 500;
    color: #a8b6bd;
}

.border-left {
	border-left: 1px solid #d2d6de;
}

.login-input {
	border-radius: 5px;
}

.theme-red .btn-login {
    background: linear-gradient(45deg, var(--sdx-red-1), var(--sdx-red-2));
}

.theme-purple .btn-login {
    background: linear-gradient(45deg, var(--sdx-purple-1), var(--sdx-purple-2));
}

.theme-green .btn-login {
    background: linear-gradient(45deg, var(--sdx-green-1), var(--sdx-green-2));
}

.theme-yellow .btn-login {
    background: linear-gradient(45deg, var(--sdx-yellow-1), var(--sdx-yellow-2));
}

/*
	THEME
*/

/*body {
    font-family: 'Poppins', 'Open Sans', 'Roboto', sans-serif;
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Poppins', 'Open Sans', 'Roboto', sans-serif;
}*/

body {
	color: #5f727b;
}

a {
    color: #188ae2;
}

a:hover {
	color: #1c7ace;
}

.content-wrapper {
    /*background-color: #eaeef3;*/
    background-color: #ebf0f4;
    z-index: 800;
}

.skin-blue .main-header .navbar {
    background-color: #1f88e5;
    background: linear-gradient(45deg, #1f88e5, #3ac9d6);
}

.theme-red .main-header .navbar {
    background: linear-gradient(45deg, var(--sdx-red-1), var(--sdx-red-2));
}

.theme-purple .main-header .navbar {
    background: linear-gradient(45deg, var(--sdx-purple-1), var(--sdx-purple-2));
}

.theme-green .main-header .navbar {
    background: linear-gradient(45deg, var(--sdx-green-1), var(--sdx-green-2));
}

.theme-yellow .main-header .navbar {
    background: linear-gradient(45deg, var(--sdx-yellow-1), var(--sdx-yellow-2));
}

.skin-blue .main-header .logo {
    background-color: var(--sdx-blue-1);
}

@media (max-width: 991px){
    .skin-blue .main-header .logo {
        background: linear-gradient(45deg, var(--sdx-blue-1), var(--sdx-blue-2));
    }
}

.skin-blue .main-header .logo:hover {
    background-color: var(--sdx-blue-1);
}

.theme-red .main-header .logo {
    background-color: var(--sdx-red-1);
}

.theme-purple .main-header .logo {
    background-color: var(--sdx-purple-1);
}

.theme-green .main-header .logo {
    background-color: var(--sdx-green-1);
}

.theme-yellow .main-header .logo {
    background-color: var(--sdx-yellow-1);
}

.skin-blue .main-header .logo:hover {
    /*background-color: #1c7ace;*/
    opacity: .9;
}

.theme-red .main-header .logo:hover {
    background-color: var(--sdx-red-1);
}

.theme-purple .main-header .logo:hover {
    background-color: var(--sdx-purple-1);
}

.theme-green .main-header .logo:hover {
    background-color: var(--sdx-green-1);
}

.theme-yellow .main-header .logo:hover {
    background-color: var(--sdx-yellow-1);
}

.skin-blue .main-header .navbar .sidebar-toggle:hover {
    background-color: rgba(0,0,0,0.1);
}

.btn {
	border-radius: 3px;
	border: none;
	font-weight: 600;
	/*text-transform: uppercase;*/
    font-size: 8pt;
    padding: 8px 20px;
}

.btn-danger {
	background-color: #fc4b6c;
	background: linear-gradient(45deg, #fc4b6c, #fb6e50);
}

.btn-danger:hover {
	background-color: #e03f5d;
}

.btn-primary {
	background-color: #188ae2;
	background: linear-gradient(45deg, #188ae2, #57b8de);
}

.btn-primary:hover {
	background-color: #167ccb;
} 

.btn-success {
	background-color: #4bd396;
	background: linear-gradient(45deg, #69d13b, #b3da32);
}

.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success:hover.btn-success:active, .btn-success:focus.btn-success:active {
	background-color: #37ce8a;
}

.btn-info {
	background-color: #3ac9d6;
	background: linear-gradient(45deg, #3ac9d6, #69e0ba);
}

.btn-info:hover {
	background-color: #2abfcc;
}

.btn-warning, .btn-warning.active {
	background-color: #ffb22b;
	background: linear-gradient(45deg, #ffb22b, #f9c851);
}

.btn-warning:hover {
	background-color: #e9a32a;
}

.btn-default {
	background-color: #e1e5ec;
}

.btn-default:hover {
	background-color: #e1e5ec;
}

.skin-blue .sidebar-menu > li.active > a {
    border-left-color: #1f88e5;
}

.theme-red .sidebar-menu > li.active > a {
    border-left-color: var(--sdx-red-1);
}

.theme-purple .sidebar-menu > li.active > a {
    border-left-color: var(--sdx-purple-1);
}

.theme-green .sidebar-menu > li.active > a {
    border-left-color: var(--sdx-green-1);
}

.theme-yellow .sidebar-menu > li.active > a {
    border-left-color: var(--sdx-yellow-1);
}

.skin-blue .sidebar-menu > li:hover > a {
    border-left-color: #4bd396;
}

.skin-blue .treeview-menu > li.active > a {
    color: #1f88e5;
}

.skin-blue .treeview-menu > li > a:hover {
    color: #5f727b;
}

.skin-blue .sidebar a {
    color: #5f727b;
}

.box {
	border: 1px solid #d7dfe3;
}

.input-group .input-group-addon.btn-info {
    border-radius: 0;
    border-color: #3ac9d6;
    background-color: #3ac9d6;
    color: #fff;
}

.box-filter {
	padding-left: 0px;
	margin-top: 10px;
	/*background: rgb(234, 238, 243) none repeat scroll 0% 0%;*/
    background: none;
	border-radius: 0px;
}

.skin-blue .main-header li.user-header {
	background: linear-gradient(45deg, #188ae2, #57b8de);
}

.theme-red .main-header li.user-header {
    background: linear-gradient(45deg, var(--sdx-red-1), var(--sdx-red-2));
}

.theme-purple .main-header li.user-header {
    background: linear-gradient(45deg, var(--sdx-purple-1), var(--sdx-purple-2));
}

.theme-green .main-header li.user-header {
    background: linear-gradient(45deg, var(--sdx-green-1), var(--sdx-green-2));
}

.theme-yellow .main-header li.user-header {
    background: linear-gradient(45deg, var(--sdx-yellow-1), var(--sdx-yellow-2));
}

.box.box-solid.box-default > .box-header {
    background: #eaeef3;
    border-bottom: 1px solid #d2d6de;
}

.box.box-primary {
    border-top-color: #d2d6de;
}

.box.box-success {
    border-top-color: #d2d6de;
}

.box.box-warning {
    border-top-color: #d2d6de;
}

.pagination > .active > a, .pagination > .active > a:focus {
	background-color: #188ae2;
	border-color: #188ae2;
}

.bg-red {
    background-color: var(--sdx-red-1) !important;
	background: linear-gradient(45deg, var(--sdx-red-1), var(--sdx-red-2));
}

.bg-yellow {
    background-color: var(--sdx-yellow-1) !important;
	background: linear-gradient(45deg, var(--sdx-yellow-1), var(--sdx-yellow-2));
}

.bg-green {
    background-color: var(--sdx-green-1) !important;
	background: linear-gradient(45deg, var(--sdx-green-1), var(--sdx-green-2));
}

.bg-blue {
    background-color: var(--sdx-blue-1) !important;
	background: linear-gradient(45deg, var(--sdx-blue-1), var(--sdx-blue-2));
}

.bg-red-1 {
    background-color: var(--sdx-red-1) !important;
}

.bg-yellow-1 {
    background-color: var(--sdx-yellow-1) !important;
}

.bg-green-1 {
    background-color: var(--sdx-green-1) !important;
}

.bg-blue-1 {
    background-color: var(--sdx-blue-1) !important;
}

.bg-red-2 {
    background-color: var(--sdx-red-2) !important;
}

.bg-yellow-2 {
    background-color: var(--sdx-yellow-2) !important;
}

.bg-green-2 {
    background-color: var(--sdx-green-2) !important;
}

.bg-blue-2 {
    background-color: var(--sdx-blue-2) !important;
}

.progress-bar-blue {
	background: linear-gradient(45deg, #188ae2, #57b8de);
}

.progress-bar-green {
	background: linear-gradient(45deg, #69d13b, #b3da32);
}

.progress-bar-yellow {
	background: linear-gradient(45deg, #ffb22b, #f9c851);
}

.progress-bar-red {
	background: linear-gradient(45deg, #fc4b6c, #fb6e50);
}

.skin-blue .main-sidebar, .skin-blue .left-side {
    background-color: #fff;
    /*box-shadow: 2px 0px 5px #00000026;*/
    box-shadow: none;
}

.skin-blue .sidebar-menu > li > .treeview-menu {
    margin: 0 1px;
    background: #fff;
}

.skin-blue .sidebar-menu > li.active > a {
    color: #fff;
    background: #f8f8f8;
}

.skin-blue .sidebar-menu > li:hover > a {
    background: #f8f8f8;
}

.skin-blue .sidebar-menu > li:hover > a {
    border-left-color: #1f88e5;
    color: #1f88e5;
}

.theme-red .sidebar-menu > li:hover > a {
    border-left-color: var(--sdx-red-1);
    color: var(--sdx-red-1);
}

.theme-purple .sidebar-menu > li:hover > a {
    border-left-color: var(--sdx-purple-1);
    color: var(--sdx-purple-1);
}

.theme-green .sidebar-menu > li:hover > a {
    border-left-color: var(--sdx-green-1);
    color: var(--sdx-green-1);
}

.theme-yellow .sidebar-menu > li:hover > a {
    border-left-color: var(--sdx-yellow-1);
    color: var(--sdx-yellow-1);
}

.skin-blue .sidebar-menu > li.active > a {
    color: #1f88e5;
    background: #f8f8f8;
}

.theme-red .sidebar-menu > li.active > a {
    color: var(--sdx-red-1);
    background: #f8f8f8;
}

.theme-purple .sidebar-menu > li.active > a {
    color: var(--sdx-purple-1);
    background: #f8f8f8;
}

.theme-green .sidebar-menu > li.active > a {
    color: var(--sdx-green-1);
    background: #f8f8f8;
}

.theme-yellow .sidebar-menu > li.active > a {
    color: var(--sdx-yellow-1);
    background: #f8f8f8;
}

.skin-blue .user-panel > .info, .skin-blue .user-panel > .info > a {
    color: #5f727b;
}

.content-header > .breadcrumb > li > a {
    color: #5f727b;
    text-decoration: none;
    display: inline-block;
}

h3.box-title {
    color: #5f727b;
}

/*
	@since v.1.2
*/

.sdx-card {
    position: relative;
    display: block;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border-radius: 0.375rem;
    height: 100%;
}

.sdx-card .card-body {
    padding: 1.88rem 1.81rem;
}

.grid-margin {
    margin-bottom: 20px;
}

.icon-card {
    line-height: 50px;
    float: left;
}

.heading-title {
    margin-bottom: 0px;
}

.sub-title-card {
    margin-bottom: 0px;
    font-size: 20pt;
    font-weight: 500;
}

.text-card {
    margin-left: 50px;
}

.text-blue-1 {
    color: var(--sdx-blue-1);
}

.text-blue-2 {
    color: var(--sdx-blue-2);
}

.text-green-1 {
    color: var(--sdx-green-1);
}

.text-green-2 {
    color: var(--sdx-green-2);
}

.text-red-1 {
    color: var(--sdx-red-1);
}

.text-red-2 {
    color: var(--sdx-red-2);
}

.text-yellow-1 {
    color: var(--sdx-yellow-1);
}

.text-yellow-2 {
    color: var(--sdx-yellow-2);
}

@media (max-width: 991px){
    .content-header>.breadcrumb {
        background: none;
        display: none;
    }
}

@media (max-width: 991px){
    .theme-red .main-header .logo {
        background: linear-gradient(45deg, var(--sdx-red-1), var(--sdx-red-2));
    }

    .theme-purple .main-header .logo {
        background: linear-gradient(45deg, var(--sdx-purple-1), var(--sdx-purple-2));
    }

    .theme-green .main-header .logo {
        background: linear-gradient(45deg, var(--sdx-green-1), var(--sdx-green-2));
    }

    .theme-yellow .main-header .logo {
        background: linear-gradient(45deg, var(--sdx-yellow-1), var(--sdx-yellow-2));
    }
}

@media (max-width: 991px){
    .navbar-custom-menu>.navbar-nav>li>.dropdown-menu {
        right: 0;
    }
}

@media (max-width: 991px){
    .main-header .navbar-custom-menu .dropdown-menu .btn-danger {
        color: #fff;
        background: linear-gradient(45deg, #fc4b6c, #fb6e50);
    }
}

.nav-logo {
    display: none;
}

@media (max-width: 991px){
    .nav-logo {
        display: inline-block;
        position: absolute;
        right: 0;
        left: 0;
        text-align: center;
        line-height: 50px;
        margin-left: 45px;
        margin-right: 55px;
    }

    .nav-logo img {
        height: 35px;
    }

    .main-header .logo {
        display: none;
    }
}

@media (max-width: 991px){
    .main-sidebar, .left-side {
        padding-top: 50px;
    }
}

.percentage-label {
    color: #a8b6bd;
    text-align: right;
}

.row-same-height {
    display: flex;
    flex-wrap: wrap;
}

.persen-up::before {
    content: "\f0d8";
    font: normal normal normal 14px/1 FontAwesome;
    margin-right: 5px;
    color: var(--sdx-green-2);
}

.persen-up {
    color: var(--sdx-green-2);
}

.persen-down::before {
    content: "\f0d7";
    font: normal normal normal 14px/1 FontAwesome;
    margin-right: 5px;
    color: var(--sdx-red-1);
}

.persen-down {
    color: var(--sdx-red-1);
}

.persen-normal::before {
    content: "\f0d9";
    font: normal normal normal 14px/1 FontAwesome;
    margin-right: 5px;
    color: var(--sdx-yellow-1);
}

.persen-normal {
    color: var(--sdx-yellow-1);
}

.card-icon {
    display: block;
    padding: 3px 15px;
    border-radius: 50%;
    color: #fff;
}

.main-footer {
    background: #ebf0f4;
    padding: 25px 15px;
    color: #444;
    border-top: 1px solid #e0e8ec;
    text-align: center;
}

@media screen and (max-width: 767px){
    .table-responsive {
        border: none;
    }
}

body {
    font-family: 'Poppins', sans-serif;
    font-size: 10pt;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Poppins', sans-serif;
}

label {
    font-weight: 600;
}

.box-header .box-title {
    font-size: 10pt;
}