/* -------------------------------- 

Primary style

-------------------------------- */
*, *::after, *::before {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
    background: #e7ebee;
}

body {
  font-size: 16px;
  font-family: 'Roboto', 'Helvetica', 'sans-serif'; 
  color: #111;
  background: #fff;
    position:relative;
    
}
body::after {
  clear: both;
  content: "";
  display: table;
}

a {
  color: #E00000;
  text-decoration: none;
}
a:hover  {
    text-decoration: underline;
    color: #E00000;
}
a:focus {
    text-decoration: none;
    color: #111;
}
input {
  font-family: "Open Sans", sans-serif;
  font-size: 1.6rem;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

/* -------------------------------- 

Main Page Content

-------------------------------- */
.cd-main-content {
     position: relative;
    margin: 0 auto;
    width: 100%;
    background: #fff;
}
.cd-main-content .content-wrapper {
  padding: 0;
   
}
.wrapper-nosidebar {
    width: 100% !important;
}
.cd-main-content .content-wrapper h1 {
  text-align: left;
  padding: 15px 0;
  font-size: 2rem;
  color: #E00000;
  font-weight: 300;
}
.cd-main-content::before {
  /* never visible - used to check MQ in jQuery */
  display: none;
  content: 'mobile';
}
.mainContent-noProfile {
    margin-top: 46px;
}
/*@media only screen and (min-width: 1280px ) {
  .cd-main-content .content-wrapper {
    margin-left: 110px;
    padding-top: 55px;
  }
  .cd-main-content .content-wrapper h1 {
    padding: 20px 0;
    font-size: 3.2rem;
    font-weight: 300;
    margin: 0;
  }
  .cd-main-content::before {
    content: 'tablet';
  }
}*/
@media only screen and (min-width: 1024px) {
  .cd-main-content .content-wrapper {
   width: 75%;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      display: inline-block;
      font-size: 14px;
      margin: 10px 0 15px 0;
      padding: 0 0 0 5px;
      text-align: left;
      vertical-align: top;
  }
  .cd-main-content::before {
    content: 'desktop';
  }
}



/* -------------------------------- 

Header

-------------------------------- */
.cd-main-header {
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 46px;
  width: 100%;
  background: #111;
border-bottom: 1px solid #262626;

}
.cd-main-header::after {
  clear: both;
  content: "";
  display: table;
}
@media only screen and (min-width: 768px) {
  .cd-main-header {
    position: fixed;
    height: 46px;
  }
}
.cd-container {
    max-width: 1300px !important ;
    position: relative;
    margin: 0 auto;
    padding: 0 15px;
    height: 55px;
}
.cd-container-compalate-profile {
    margin-top: 50px
}
.profileCanopy {
    position: relative;
    width: 100%;
    z-index: 4;
    background-color: #111;
}
.profileCanopy-header {
        height: 250px;
}
.profileCanopy-header::before {
display: block;
content: "";
position: absolute;
height: 100%;
width: 100%;
box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.25);
z-index: 1
}
.profileCanopy-bgUser {
    width: 100%

}
.profileCanopy-bgUser img {
position: absolute;
left: 0;
right: 0;
top: -9999px;
bottom: -9999px;
margin: auto 0;
width: 100%;
border-radius: 15px;
    border: 2px solid #fff;    
}
.prof-container {
    height: 134px;
    position: relative;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 15px;
    width: 100%;
}
.profile-box {
    margin-top: 25px;
    border-radius: 4px;
    display: inline-block;
    color: #fff;
}
.profileCanopy-avatar {
    transition: bottom .3s;
    z-index: 2000;
    float: left
}
.profile-avatar {
    border-radius: 15px;
    height: 80px;
    position: relative;
    width: 80px;
    background: #111;
    margin-right: 10px;
}

.avatar-img-lg {
    -moz-force-broken-image-icon: 1;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%
}
.avatar-img-sm {
     -moz-force-broken-image-icon: 1;
    height: 32px;
    width: 32px; 
    display: block;
    border-radius: 50%;
   box-shadow: 0 0 0 1px rgba(179, 179, 179, 1);
}
.profilCanopy-nav {
    background-color: #f2f1ef;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 60px;
}
.profileCard-sidebar {
    background: #fff;
    margin-bottom: 10px;
}
.profileCard-sidebar-bg {
   background-size: 100%;
    height: 95px;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    background-position: 0 50%;
    width: 100%;
    padding: 0;

}
.bgSidebar {
     width: 100% !important;
    text-transform: none;
    height: 95px;
}
.profileCard-sidebar-content {
   display: block;
    padding-bottom: 15px;
}
.profileCard-sidebar-avatar {
    background-color: #fff;
    border-radius: 50%;
    margin: -30px 0 0 8px;
    padding: 1px;
    vertical-align: bottom;
    width: 75px;
    height: 75px;
}
.profileCard-sidebar-userField {
    position: absolute;
    top: 103px;
    left: 90px;
    width: 185px;
    font-size: 18px;
}
.sidebar-userFName {
    margin-top: 5px;
    font-size: 16px;
    font-weight: bold;
    text-transform: capitalize;
    
}
.sidebar-userName {
    font-size: 14px;
}
.textTruncate {
    max-width: 100%;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    word-wrap: normal !important;
}
.profileNav {
    height: 60px;
    position: relative;
    margin-bottom: -1px;
    z-index: 5;
    margin-top: 2px;
    font-family: 'Montserrat-SemiBold';
}
.sparks-nav {
    padding-left: 300px;
}
.icon-nav {
    display:none;
    
}
.profile-card {
    margin-top: 12px;
    position: absolute;
    left: 110px;
    width: 100%;

}
.profilename {
    font-size: 22px;
    text-transform: capitalize;
    font-weight: bold;
    line-height: 1.5;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.sidebarLeft {
    width: 25%;
    float:left;
    margin-top: 10px;
}
.nav-container {
    background: #fff;
    display:inline-block;
    width: 100%;
    margin-bottom: 7px;
    padding: 10px 0 0 10px
}

.profileSidebar {
    margin: 25px 0 25px 0;
   padding: 0 15px;
    
}
.u-login {
    display: inline-block;
}

.uDetails-li {
    display: inline-block
}
span.u-details {
    display: block;
    margin: 5px 0;

}
.u-details-text {
    display: inline-block;
    width: 90%;
    vertical-align: top;
    margin-left: 5px;
}
.u-details-bio {
    margin-bottom: 25px;
    font-style: italic;
    text-shadow: 1px 1px #ccc;
}
.btn-on {
     background-color: #5cb85c;
    color: #fff;
}
.btnUser {
    font-family: 'bebas_neueregular', sans-serif !important;
    font-weight: bold;
    font-size: 24px;
    clear: both;
    letter-spacing: 0.025em;
    padding: 10px 10px;
    transition: all 0.3s ease 0s;
    color: #fff !important;
    text-align: center;
    text-decoration: none;
    min-width: 145px;
    margin-bottom: 10px;
    border-radius: 4px;
}
.btn-submit {
    width: 50%;
}
.btn-sm {
    font-size: 16px !important;
    padding: 5px !important;
}
.btn-md {
    font-size: 18px !important;
}
.btn-lg {
    font-size: 28px !important;
    padding: 15px 15px !important;
}
.btn-red {
    background: #E00000 !important;
}
.btn-green {
    background:  rgb(3,172,14) !important;
}
.btn-black {
    background:  #111 !important;
}
.btn-transparent {
    border:  1px solid #E00000 ;
    color: #E00000 !important;
}
.btnUser:hover {
    color: #FFF;
    text-decoration: none;
}

.btnUser-main:hover {
    background-color: rgba(234, 231, 231, 0.98);
}

.btn-nav, .btn-nav:hover, .btn-nav:focus, .btn-nav:active {
    margin-top: 12px !important;
}
.btnUser-filled, .btnUser-filled:hover, .btnUser-filled:focus, .btnUser-filled:active {
    color: #FFF;
    background-color: #E00000;
    margin: 10px 0 10px 0;
    padding: 0.4em 1em !important;
    font-size: 16px !important;
}
.btnUser-filled:hover, .btnUser-filled:focus, .btnUser-filled:active {
    background-color:  rgba(246, 118, 56, 0.7) !important;
}

.btnCancel {
    border-color: #f0ad4e !important; 
    background-color: #f0ad4e !important;
}
.btnCancel:hover, .btnCancel:focus, .btnUser-filled:active {
    background-color:  rgba(240, 173, 78, 0.71) !important;
}
.btn-circle {
  width: 32px;
  height: 32px;
    background-color: #E00000;
    color: #fff;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;

}


.dropdown-menu>li>a {
    color: #555;
    line-height: 2 !important;
    
}
.dropdown-menu>li>a.active {
    color: #fff;
    
}
.dropdown-menu>li>a:hover {
    color: #E00000 !important;
}
.copyright {
    font-size: 12px;
    padding: 15px;
    display: inline-block
}
.copyright a{
    color: inherit;
    padding-right: 0 !important;
}
.copyright a:hover{
    color: #E00000;
    text-decoration: underline;
}
a.editProfile {
          display: none
}


.balance-container {
    float: right; color: #fff;  
    padding: 15px 0;
    margin-top: 8px
}
.am-body-content {
    max-width: 1300px !important;
    margin: 0 auto;
    padding: 0 15px;
    line-height: 1.6;
}

a.row-grid-link {
    color: #111;
    display: block;
    margin-bottom: -2px;
}
.row-grid-link a:focus{
    color: #111;
    display: block;
    margin-bottom: -2px;
}
.grid-box {
    padding-top: 2px;
    display: block;
    min-height: 1px;
    clear: both;
    border-bottom: 1px solid #ddd;
}
.row-grid {
    border-top: 1px solid #ddd; 
    display: inline-block; 
    width: 100%; 
    padding: 8px 0 13px 0;
    margin-bottom: -4px;
        position: relative;
    font-weight: 600 !important;
}
.row-grid>tbody > tr:last-child > td {
  border-bottom: 1px solid #ddd;
}
.row-grid img {
    margin-top: 5px; 
    margin-right: 5px; 
    width: 75px; 
    height: 40px; 
    border-radius: 4px;
}

.row-grid:hover {
    background: #f2f1ef;
    padding: 8px 0 13px 0;
    margin-bottom: -4px;
}
.row-grid-ps {
    z-index: 1;
}
.row-grid-ps:hover {
    z-index: 1 !important;
    position: relative !important;
    background: none;
}
.row-grid-sm {
   color: #888;
    padding-left: 5px;
    font-size: 90%;
}
.arrow-details {
    display: inline-block; 
    font-size: 16px; 
    color: #888;
}
.status-ok {
    color: green;
    font-size: 18px;
}
.status-pending {
    color: #e3990e;
    font-size: 18px;
} 
.status-cancel {
    color: red;
    font-size: 18px;
}
.col-grid-left {
    float: left;
}
.col-grid-right {
    float: right;
    text-align: right;
    font-size: 18px;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 0;
}
.col-grid-right-2 {
    float: right;
    text-align: right;
    font-size: 18px;
    margin-top: 7px
}
.col-amount {
    display: inline-block; 
    font-size: 18px;
    font-weight: 600;
}
.col-status {
    margin-right: 5px
}
.grid-title {
    color: #111 !important;
    padding-left: 5px !important;
    font-size: 16px !important;
    margin-top: 7px;
    margin-bottom: 0 !important;
    text-transform: capitalize !important;
        font-weight: 600;
} 
.cd-logo {
  float: left;
  display: block;
}
.cd-logo img {
  display: block;
    height: 35px;
    margin-top: 8px
}

.cd-nav-trigger {
  /* navigation trigger - visible on mobile devices only */
  float: right;
  position: relative;
  display: block;
  width: 34px;
  height: 44px;
  margin-right: 5%;
  /* hide text */
  overflow: hidden;
  white-space: nowrap;
  color: transparent;
}
.cd-nav-trigger span, .cd-nav-trigger span::before, .cd-nav-trigger span::after {
  /* hamburger icon in CSS */
  position: absolute;
  display: inline-block;
  height: 3px;
  width: 24px;
  background: #ffffff;
}
.cd-nav-trigger span {
  /* line in the center */
  position: absolute;
  top: 50%;
  right: 5px;
  margin-top: -2px;
  -webkit-transition: background 0.2s;
  -moz-transition: background 0.2s;
  transition: background 0.2s;
}
.cd-nav-trigger span::before, .cd-nav-trigger span::after {
  /* other 2 lines */
  content: '';
  right: 0;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-origin: 0% 50%;
  -moz-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  -o-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  transition: transform 0.2s;
}
.cd-nav-trigger span::before {
  /* menu icon top line */
  top: -6px;
}
.cd-nav-trigger span::after {
  /* menu icon bottom line */
  top: 6px;
}
.cd-nav-trigger.nav-is-visible span {
  /* hide line in the center */
  background: rgba(255, 255, 255, 0);
}
.cd-nav-trigger.nav-is-visible span::before, .cd-nav-trigger.nav-is-visible span::after {
  /* keep visible other 2 lines */
  background: white;
}
.cd-nav-trigger.nav-is-visible span::before {
  -webkit-transform: translateX(4px) translateY(-3px) rotate(45deg);
  -moz-transform: translateX(4px) translateY(-3px) rotate(45deg);
  -ms-transform: translateX(4px) translateY(-3px) rotate(45deg);
  -o-transform: translateX(4px) translateY(-3px) rotate(45deg);
  transform: translateX(4px) translateY(-3px) rotate(45deg);
}
.cd-nav-trigger.nav-is-visible span::after {
  -webkit-transform: translateX(4px) translateY(2px) rotate(-45deg);
  -moz-transform: translateX(4px) translateY(2px) rotate(-45deg);
  -ms-transform: translateX(4px) translateY(2px) rotate(-45deg);
  -o-transform: translateX(4px) translateY(2px) rotate(-45deg);
  transform: translateX(4px) translateY(2px) rotate(-45deg);
}
@media only screen and (min-width: 768px) {
  .cd-nav-trigger {
    display: none;
  }
}

.cd-search {
  position: relative;
  margin: 1.2em 5% 0.6em;
}
.cd-search.is-hidden {
  opacity: 0;
}
.cd-search::before {
  /* lens icon */
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 16px;
  width: 16px;
  background: url(../img/cd-search.svg) no-repeat 0 0;
}
.cd-search input {
  padding-left: 32px;
  width: 100%;
  height: 36px;
  border: none;
  border-radius: .25em;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}
.cd-search input:focus {
  outline: none;
}


/* -------------------------------- 

Top Navigation

-------------------------------- */
.cd-nav {
  /* top nav - not visible on mobile devices */
  display: none;
}
@media only screen and (min-width: 768px) {
  .cd-nav {
    display: block;
    float: right;
    height: 100%;
  }
}

.cd-top-nav > li > a::before {
  /* reset style */
  display: none;
}
.cd-top-nav > li a {
  padding: 1em 5% !important;
}



/* -------------------------------- 

Sidebar

-------------------------------- */
.cd-side-nav {
  position: absolute;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  padding: 45px 0 0;
 /* background-color: #212121;*/
  visibility: hidden;
  opacity: 0;
  max-height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s;
  -moz-transition: opacity 0.2s 0s, visibility 0s 0.2s;
  transition: opacity 0.2s 0s, visibility 0s 0.2s;
}
.cd-side-nav.nav-is-visible {
  opacity: 1;
  visibility: visible;
  overflow: visible;
  -webkit-overflow-scrolling: touch;
  -webkit-transition: opacity 0.2s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.2s 0s, visibility 0s 0s;
  transition: opacity 0.2s 0s, visibility 0s 0s;
  max-height: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.cd-side-nav > ul {
  padding: 0.6em 0;
}
.cd-side-nav > ul:last-of-type {
  padding-bottom: 0;
}
.cd-side-nav .cd-label, .cd-side-nav a {
  display: block;
  padding: 1em 5%;
}
.cd-side-nav .cd-label {
  text-transform: uppercase;
  font-weight: bold;
  color: #646a6f;
  font-size: 1rem;
  letter-spacing: .1em;
}
.cd-side-nav a {
  position: relative;
  color: #ffffff;
  font-size: 1.4rem;
}
.cd-side-nav ul.cd-top-nav > li:last-of-type > a {
  border-bottom: none;
}
.cd-side-nav > ul > li > a {
  padding-left: calc(5% + 24px);
  border-bottom: 1px solid #373d44;
}
.cd-side-nav > ul > li > a::before {
  /* icon before item name */
  position: absolute;
  content: '';
  left: 5%;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
	font-size: 16px;
    font-family: FontAwesome;
  /*background: url(../img/cd-nav-icons.svg) no-repeat 0 0; */
}
.cd-side-nav > ul > li.dashboard > a::before {
 	content: "\f0e4";
 	padding-bottom:3px;
}
.cd-side-nav > ul > li.broker > a::before {
 	content: "\f0ac";
 	padding-bottom:3px;
}
.cd-side-nav > ul > li.rebates > a::before {
	content: "\f1da";
 	padding-bottom:3px;
}
.cd-side-nav > ul > li.deposit > a::before {
	content: "\f0ec";
 	padding-bottom:3px;
}
.cd-side-nav > ul > li.affiliate > a::before {
  content: "\f0c0";
 	padding-bottom:3px;
}
.cd-side-nav > ul > li.promo > a::before {
  content: "\f0a1";
 	padding-bottom:3px;
}
.cd-side-nav > ul > li.contest > a::before {
  content: "\f024";
 	padding-bottom:3px;
}
.cd-side-nav > ul > li.support > a::before {
  content: "\f1cd";
 	padding-bottom:3px;
}
.cd-side-nav > ul > li.users > a::before {
	 	content: "\f007";
 	padding-bottom:3px;
}
.cd-side-nav > ul > li.e-book > a::before {
	 	content: "\f02d";
 	padding-bottom:3px;
}
.cd-side-nav .count {
  /* notification badge */
  position: absolute;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: calc(5% + 16px + 0.4em);
  padding: 0.2em 0.4em;
  background-color: #ff7e66;
  border-radius: .25em;
  color: #ffffff;
  font-weight: bold;
  font-size: 1.2rem;
  text-align: center;
}
.cd-side-nav .action-btn a {
  display: block;
  margin: 0 5%;
  padding: 1em;
  background-color: #1784c7;
  border-radius: .25em;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-align: center;
  color: #ffffff;
  font-weight: bold;
}
.cd-side-nav .action-btn a::before {
  display: none;
}


.has-children ul {
  position: relative;
  width: 100%;
  display: none;
  background-color: #33383e;
}
.has-children > a::after {
  /* arrow icon */
  position: absolute;
  content: '';
  height: 16px;
  width: 16px;
  right: 5%;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  background: url(../img/cd-arrow.svg);
}
.has-children.selected > ul {
  display: block;
}
.has-children.selected > a::after {
  -webkit-transform: translateY(-50%) rotate(180deg);
  -moz-transform: translateY(-50%) rotate(180deg);
  -ms-transform: translateY(-50%) rotate(180deg);
  -o-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
}

a.active { 
background-color: #374046 
}
.user-avatar a {
	padding: 0;
	margin: 0;
}
.sparks {
    display: block;
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    text-align: right;
}

.sparks-info {
	min-width: 40px;
}
.sparks-info-ar {
	display: inline-block;
}
.sparks-info a:link{
	text-decoration: none;
}
.spark-info-name {
    font-size: 14px !important ;
    color: #DDD;
    padding-bottom: 5px;
    display: inline-block;
}
.spark-info-value {
	color: #E00000;
}
.spark-info-value img {
    width: 35px !important; 
    height: 35px !important; 
    position: unset !important;
    margin-right: 5px;
}
.sparks-info span {
	font-size: 28px;
    line-height: 20px;
    margin: 0;
    text-transform: none;
    font-weight: 500;
    font-family: Montserrat-SemiBold;
}
.sparks li {
    padding: 0 10px;
    }
.sparks li {
    display: inline-block;
    text-align: right;
    box-sizing: content-box;
    padding: 10px 15px;
    font-weight: bold;
}
.sparks-sidebar {
    padding: 0 7px;
    margin-top: 15px;
    display: table;
    margin: 0 auto;
    margin-top: 15px !important;
}
.sparks-sidebar li {
	padding: 0 5px;
    text-align: center !important;
}
a.power-off {
	margin: 3px 0 0 10px;
	display: inline-block;
    font-size: 18px;
    color: red;
}

.top-nav {
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -moz-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
height: 100%;
margin-top: 3px;
padding-top: 8px;
}
.top-nav-left {
    margin-right: 15px; 
    margin-top: 3px;
    float: left
}
.top-nav-left li {
    padding: 7px 5px;
    display: inline-block;
    list-style: none;
}
a.top-nav-icon {
	display: inline-block;
    color: #c4c4c4;
    font-size: 18px;
}

.top-nav-badge {
    font-size: 10px;
    background-color:  #fa3e3e;
    color : #ffffff;
    margin-top: -25px;
    margin-left: -2px;
    padding: 3px 4px;
    border-radius: 5px;
}
.nav>li>a {
	/*height : 55px*/
}
.nav>li>a:hover {
	background-color : #e00000;

	color: #fff;
}
.nav>li>a>span.count {
    background: none repeat scroll 0 0 #dd191d;
    border-radius: 50%;
    background-clip: padding-box;
    color: #fff;
    display: block;
    font-size: 9px;
    height: 14px;
    line-height: 14px;
    position: absolute;
    right: 8px;
    text-align: center;
    top: 11px;
    width: 14px;
}
.fa-nav {
	margin-top:5px
}

/*MENU BARU */


/* remove outer padding */
.main .row{
padding: 0;
margin: 0;
}

/*Remove rounded coners*/
nav.sidebar.navbar {
 border-radius: 0;
  z-index: 1900;
}

nav.sidebar, .main{
		-webkit-transition: margin 200ms ease-out;
	    -moz-transition: margin 200ms ease-out;
	    -o-transition: margin 200ms ease-out;
	    transition: margin 200ms ease-out;
	}

	/* Add gap to nav and right windows.*/
	.main{
		padding: 10px 10px 0 10px;
	}

	/* .....NavBar: Icon only with coloring/layout.....*/


nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
    color: #FFF;
    background-color: transparent;
}

nav:hover .forAnimate{
    opacity: 1;
}
section{
    padding-left: 15px;
}
.navbar-default {
    background: inherit !important;
}
.navbar-nav>li>a {
    padding-top: 10px; 
    padding-bottom: 10px; 
    color : #4c4c4c !important; 
    /*font-family: "bebas_neueregular", sans-serif;
    font-size: 18px;*/
}
.navbar {
    border: 0 solid transparent !important;
}


/*NAV END */

.fa-stack {
    width: 100%;
    font-size: 18px;
    top: -2px;
     height: 100% !important; 
   line-height: 1em !important;
}
.editable {
    padding-top: 0 !important;
}
.theme-color {
    width : 30px;
    height: 30px;
    background-color: #E00000;
    border-radius: 2px;
    display:inline-block;
    vertical-align: middle
}
.edit-container {
    display: none;
    margin-top: 15px;
    border: 1px solid #eee;
    padding: 10px 10px;
}
/*
input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
}
input[type=text]:focus, textarea:focus {
     box-shadow: 0 0 5px #E00000;
     border: 1px solid #E00000;
}
*/
.btn-edit {
    font-size: 14px !important;
    padding: 2px 7px;
}
/*hack Date Picker*/
.ui-widget-header {
    border: 1px solid #E00000;
    background: #E00000;
}
.ui-state-active, .ui-widget-content .ui-state-active {
    border: 1px solid #E00000;
}
.ui-datepicker-title {
        color: #262222;
 }

.announcement {
    margin: 15px 0;
}
.announcement h4 {
    margin-top: 5px;
    border-bottom: 1px rgba(235, 223, 223, 0.34) solid;
    padding-bottom: 15px;
}
.announcement span {
    color: #9a8c8c;
    font-size: 90%;
}
.ann-content {
    margin: 15px 0;
}
.ann-content ul, .ann-content ol {
    margin-left: 25px !important;
}
.ann-content ul li {
    list-style: square !important;
}
.ann-content ol li {
   list-style-type: decimal;
}
.noti-btn-link {
    background: inherit;
    color: rgba(0, 0, 0, 0.55) !important;
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 15px;
    border-bottom: 1px solid #e0e0e0;
    color: inherit;
    border-left-width: 0;
    border-right-width: 0;
    border-top-width: 0
}
.ann-modal {
    display: table; 
    margin-left: 10px
}
.ann-modal h4 {
    font-size: 16px;
}
.ann-modal span {
    font-size: 13px;
}
.noti-btn-link:hover {
    background: rgba(238, 238, 238, 0.5) !important;
}
.unread-ann {
    color: #E00000 !important; 
    background: #eee; 
    font-weight: bold
}

.dropdown ul.dropdown-top-menu:before {
    content: "";
    border-bottom: 10px solid #fff;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    position: absolute;
    top: -10px;
    right: 16px;
    z-index: 10;
}
.dropdown ul.dropdown-top-menu:after {
    content: "";
    border-bottom: 12px solid #ccc;
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
    position: absolute;
    top: -12px;
    right: 14px;
    z-index: 9;
}

.value-exchanger {
font-size: 1.2em;
display: block;
text-align: right;
}
/*SOCIAL MEDIA CSS */
.main-content-sosmed {
    width: 590px !important;
    margin: 10px !important;
    float: left;
}
.sidebar {
    display: inline-block;
    width: 100%;
}
.sidebar h2 {
    font-size: 18px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    font-weight: bold;
    margin-bottom: 10px;
}
.title-broker-name {
    margin-right: 5px;
}
.title-ps-name {
    margin-right: 0;
}
.banner-box {
   margin-top: 10px
}


.menu-sticky-bottom {
    display: none;
}
.navbar-nav {
    text-transform: uppercase;
    color: #FFF !important;
}
a.navbar-nav {
    color: #FFF !important
}
.hide-btn {
    display: none;
}
.menu-min768-max995 {
    display: none
}
.menu-min995 {
    display: block;
}
.navbar-nav-min-955 {
    display: inline-block !important; 
    margin-top: 10px;
        text-transform: uppercase;
   
}

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    background: #e00000 !important;
}
.nav-sidebar-left {
    margin-top: 54px !important;
}

.left-sidebar-menu {
    margin-top: 20px;
    font-size: 16px;
}
.left-sidebar-menu a  {
    color: #4e4e4e !important;
    padding: 8px 10px;
    line-height: 18px;
     width: 100%;
    display: block;
     border: 1px solid #fff;
    
}

.active-menu, .left-sidebar-menu a:hover{
    border: 1px solid #ccc !important;
    width: 100%;
    display: block;
}
.active-menu {
    font-weight: bold;
}
.sidebar-title {
   font-weight: normal !important;
    color: #e00000 !important;
    font-size: 24px !important;
    border-bottom: 1px solid #ccc !important;
}
.page-title, .sidebar-title {
    font-size: 20px;
    line-height: 22px;
    text-transform: uppercase;
    border-bottom: 1px solid #e00000;
    margin-bottom: 15px;
    padding-bottom: 10px;
    font-weight: lighter;
    font-family: Montserrat-SemiBold;
}

@media (max-width: 995px) {
    .menu-min768-max995 {
    display: block
   }
    .menu-min995 {
       display: none;
     }
    .hide-btn {
    display: block !important;
    }
    
    .body {
        background: #fff !important;
    }
    .cd-main-content {
        width: 100%;
    }
    .cd-container {
        margin: 0 10px !important;
    }
    .cd-logo {
        margin: 0 !important;
    }
    .main-box-header {
        padding: 10px 10px;
    }
    .main-box-body {
        padding: 0 10px 20px 10px;
    }
    .main-box-body-home {
        padding: 0 0 20px 0 !important;
    }
     .btnUser-nav {
          border-radius: 4px !important;
      }
    .profileNav {
       position: absolute;
        width: 100%;

    }
    .profile-avatar {
        margin: 0 auto;
    }
   
    .profileCanopy-avatar {
        position: relative;
        float: none;
        display: none;
    }
    .profileCanopy-header {
        height: 100% !important;
    }
    .profile-card {
        margin-left: 0;
        display: block;
        text-align: center;
        width: 100%;
        position: relative;
        padding: 0 10px;
        left: 0;
        margin-top: 15px;
    }
    .profileCanopy-header::before {
        box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.25); 
    }
    .profileCanopy-bgUser {
        margin-top: 0;
    }
    .profileCanopy-bgUser img {
        height: 100%;
        width: auto;
    }
    h2.profilename {
        font-size: 20px;
    }
    .sparks {
        text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
    width: 100%;
    margin: 0 !important;
    box-shadow: rgb(0 0 0 / 5%) 0 6px 24px 0, rgb(0 0 0 / 8%) 0 0 0 1px;
    -webkit-box-shadow: rgb(0 0 0 / 5%) 0 6px 24px 0, rgb(0 0 0 / 8%) 0 0 0 1px;
    -moz-box-shadow: rgba(0, 0, 0, 0.05) 0 6px 24px 0, rgba(0, 0, 0, 0.08) 0 0 0 1px;
    border-radius: 4px;
        background: #fff;

    }
    .sparks-info {
        text-align: center !important;
    }
   
    .sparks-nav {
        padding-left: 0;
    }
    .sidebarLeft {
        width: 100%;
        margin-top: 0 !important;
    }
    .sparks-info-ar {
        position: absolute;
        top: 65px;
        left: 42%;
        text-align: center !important;
    }
    .profileSidebar {
        font-size: 90%;
        margin-top: 175px;
        padding: 15px;
        background: #fff;
        margin-bottom: 0 !important;
        border-bottom: 1px #f3f3f3 solid;

    }
    .u-login {
        margin-bottom: 0 !important;
    }
    .container-fluid>.navbar-header {
          margin-top: 10px;
    }
    .container-fluid {
        margin-left: 3px;
        margin-right: 3px;
    }
    nav.navbar.navbar-default.sidebar {
        top: 35px !important;
    }
    .icon-nav, .icon-nav:hover, .icon-nav:focus, .icon-nav:active {
        display: block;
        top: 73px;
        position: relative;
        right: 50px;
        padding-top: 6px;
        padding-bottom: 6px;
        margin: 12px 25px 0 0 !important;
        border-radius: 4px;
    }
    .navbar-default {
        margin: 11px -5px 0 -5px !important;
        pointer-events: none;
        border: 0;
        position: fixed !important;
        top: 46px;
        width: 60%
    }
    .am-body-content {

        display: block;
        position: relative;
        width: 100%;
        background: #fff;
    }
    .title-bar {
        font-size: 24px !important;
    }
    .hide-td {
        display: none;
    }
    .full-width {
        width: 100%;
        margin-bottom: 10px;
    }
    .navbar-toggle {
        pointer-events: visible;
        color: #E00000 !important;
        padding: 0 5px !important;
        margin-right: 15px !important; 
        border-radius: 0 !important;
    }
    .navbar-default .navbar-toggle {
        border-color: #E00000;
    }
    .icon-bar {
        background-color:   #66757f !important;
        font-weight: 600 !important;
        font-size: 16px !important;
      }
    .navbar-nav {
        margin: 0 -15px;
        padding: 10px;
    }
    .navbar-header {
        background-color: #e1e1e1;
        margin-top: 5px;
        padding-left: 10px
    }
    .navbar-collapse {
        pointer-events: visible;

    }
    .pull-left-block {
        width: 100%;
        margin-bottom: 10px;
    }
    .pull-right-block {
        width: 100%;
    }
    .btn-small {
        padding: 0 7px !important;
        font-size: 11px;
    }

    .info-box-rpr img {
        display: block;
        margin: 0 auto !important;
        float: none !important;
        height : 32px;
    }
    .avatar-top {
        display: none;
    }
    .title-bar {
        margin-top: 25px;
    }
    .mainContent-noProfile {
        margin-top: 0;
    }
    .u-details-bio {
        text-align: center;
         text-shadow: 0 0 0 rgba(0, 0, 0, 0.8);
    }
    .overlay-edit-profile {
          display: inline-block !important;
      }
  
    .prof-container {
        height: 360px;
    }
    .profilename {
        font-size: 16px; 
    }

     .main-box {
         box-shadow: none; 
        -webkit-box-shadow: none; 
        -moz-box-shadow: none;
    }
    .col-no-padd {
        padding: 0 !important;
    }
    .main-box-header {
        padding-left: 0 !important; 
    }
    .hide-max995 {
        display: none;
    }
    .banner-box {
      margin-top: 0;
     margin-bottom: 80px;
      }
   
    .menu-sticky-bottom {
        position: fixed; 
        bottom: 0; 
        z-index:1000; 
        background: #fff; 
        display: block; width: 100%;
        -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
        -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
        padding: 10px 0 15px 0;
    }
    .menu-sticky-bottom span {
        display: inline-block;
         width: 100%;
    }
    .menu-sticky-bottom img {
       display: table;
       margin: 0 auto;
    }
    .menu-sticky-bottom a:link, .menu-sticky-bottom a:hover, .menu-sticky-bottom a:focus, .menu-sticky-bottom a:active, .menu-sticky-bottom a:visited {
        color: #111 !important;
    }
    .col-19p, .col-24p {
        width: 19%;
        float: left;
        min-height: 1px; 
        position: relative
    }
    .chat-box-round {
        border-radius: 50%;
    border: 1px solid #ccc;
    height: 70px;
    width: 70px;
    margin: 0 auto;
    display: table;
    margin-top: -30px;
    background-color: #e00000;
    }
    .col-19p {
        width: 19%;
    }
    .col-24p {
        width: 24%;
    }

    .nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
        background-color: #e00000;
        border-color: #e00000;
        margin-bottom: 10px;
    }
    .nav .open>a:focus, .nav .open>a:hover {
        color: #fff !important;
    }
    .navbar-nav-955 {
        display: inline-block !important; 
        margin-left: 15px
    }
    .sidebar-menu-box {
        display: none;
    }
       .prof-container {
        height: 105px;
        width: 100%
    }
    .icon-round {
        width: 100px;
        text-align: center;
    }
    .am-body-content-home {
     margin-top: 50px !important;
    }
    .cd-main-content-incomplate-profile {
        margin-top: 110px !important;
    }
    .nav-link-right {
        display: none;
    }
     .rchedule-head {
        display: none;
    }
    .rchedule-first-row {
        border-top: 1px solid #eee;
    }
    .footer {
        display: none;
    }
    .clear-footer {
        margin-top: 0 !important;
    }
    .notif-tab-mobile {
        display: block !important;
    }
   
}
@media (min-width: 768px) {
    .navbar-nav {
        display: none;
    }
    .nav>li>a {
        color: #4c4c4c;
    }
    .btn-add-ps {
        float: right;
    padding : 7px 5px !important;
     margin-bottom: 0 !important;
    }
    .dekstop-only {
        display: block !important;
    }
}
@media (min-width: 995px) {
    .nav-link-right {
        display: inline-block;
    }
    .nav-link-right a:link {
        color: #e00000 !important;
    }
    .nav-link-right a:hover {
        color: #fff !important;
    }

}
@media (min-width: 768px) and (max-width: 995px) {
    .sparks {
        background: #111;
    }
    .balance-container {
        margin-top: 0 !important;
    }
    .spark-info-name {
        color: #ddd !important;
    }
      .sparks-info span {
        font-size: 24px;    
    }
}

.selection {
    height: 40px;
    width: 100%;
    border: none;
    background: inherit;
    padding-left: 0;
    font-size: 18px;
    font-family: Montserrat-SemiBold !important;
    color: #555555;
}

.pagination {
    font-size: 20px;
    margin-left: auto;
    margin-right: auto;
    display: table;
    margin-top : 15px !important;
    margin-bottom: 25px !important;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    background-color: #e00000 !important;
    border-color: #e00000 !important;
}
.close {
    color: #111 !important;
    background: transparent !important;
    border-color: none !important;
}
.page-header {
    margin : 0 0 20px 0 !important;
}
.list-group-item {
    border: none !important;
    border-bottom: 1px dashed #ddd !important;
    margin-bottom: 5px !important;
    color: #555;
}
.item-value {
    display: inline-block;
    float: right;
    color: #555;
}
.btn-as-link {
    display: block !important;
    clear: both;
    white-space: nowrap !important;
    color: inherit ;
    background: inherit !important;
    border-color: inherit !important;
    width: 100%;
    text-align: left;
}
.media-body, .media-left, .media-right {
    vertical-align: middle !important;
}
/*HACK MODAL BOOSTRAP*/
.modal-open {
    padding-right: 0 !important;
}
.modal-title {
    text-transform: uppercase;
}
.dd-trading-account, .dd-trading-account>li>a {
    color: #555 !important;
    border-bottom: none !important;
}
.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: transparent !important;
}
.profile-complate {
    background: #E00000;
     color: #FFFFFF;
     padding: 7px 5px;
    height: 110px;
}
.profile-complate a:link, .profile-complate a:hover {
    color: #FFFFFF;
    text-decoration: underline;
   
}
.incompalate-profile {
    margin-top: 166px !important;
}
.i-menu-active {
    float: right; color: #ccc;
}
.filter-box {
    border: 1px solid #e6e6e6; 
    background: #f7f7f7; 
    border-radius: 13px; 
    padding: 10px 15px; 
    font-size: 18px; 
    color: #555555
}
.filter-box a {
    color: #E00000;
    text-decoration: underline;
}
.total-filter {
    border-top: 1px solid #ddd; 
    text-align: center; 
    font-size: 18px;
    padding: 10px 15px;
}
.btn-filter {
    font-family: Montserrat-SemiBold !important;
    min-width: 1px !important;
    font-size: 14px !important;
    padding: 9px 10px !important;
    margin-top: 1px !important;
   
}
.btn-refresh {
    min-width: 1px !important;
    margin-top: 0 !important;
    margin-left: 5px !important;
    font-size: 14px !important;
    padding: 5px !important;
    margin-bottom: 5px !important;
    width: 50px !important;
}

.wrap-input100 {
    border-radius: 4px !important;
}
.select2-container--open .select2-dropdown {
    left: 0 !important;
    border-radius: 4px !important;
}
.wrap-input100-filter {
        padding: 2px 10px 2px 10px !important;
}
.wrap-input-filter2 {
    padding: 0 7px !important;
    height: 38px !important;
    margin-bottom: 0 !important;
}
.input100-filter {
          font-size: 14px;
    }
.input100-filter2 {
    display: block;
    font-family: Montserrat-SemiBold !important;
    line-height: 1.2;
    height: 38px !important;
    font-size: 14px !important;
}
.pagination>li>a, .pagination>li>span {
    margin: 0 4px;
    border-radius: 4px;
}
.advance-filter {
    float: right;
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: bold;
    font-family: Montserrat-SemiBold !important;
    margin-left: 7px;
    background-color: #f7f7f7 !important;
    color: #555555 !important;
    border: 0 !important;
}
.filter-container {
    padding: 10px 0 10px 0;
    border-top: 1px solid #ddd;
    margin-top: -10px;
}
.click-notes {
    font-size: 12px; font-style: italic; margin-top: 2px"
}
.bottom-notes {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 4px;
}
.bottom-notes ul {
    list-style-type: square;
    margin-left: 15px;
}
.bottom-notes ul li {
    list-style-type: square;
    margin-left: 5px;
}
/*HACK SELECT2 */
.select2-container {
        width :100%;
}
.select2-selection {
  -webkit-box-shadow: 0;
  box-shadow: 0;
  background-color: #fff;
  border: 0;
  border-radius: 0;
  color: #555555;
  font-size: 14px;
  outline: 0;
  min-height: 1px;
  text-align: left;
 width: 100%;
    width: calc(100%);&: focus {
        outline: none;}
}

.select2-selection__rendered {
  margin: 5px;

}
.select2-selection__arrow {
  margin: 5px;

}

/*================ */

.select-filter {
    width: 100%;
    border: none;
    background: inherit;
    padding-left: 7px !important;
    font-family: Montserrat-SemiBold !important;
    color: #555555;
    font-size: 14px !important;
    height: 38px !important;
    
}
.label-status {
    padding: 5px 10px !important;
}
.title-select-popup {
    font-size: 18px;
    margin-top: 15px;
}
.select-popup-wrap {
    width: 100%;
    height: 100%;
    padding: 16px 15px 16px 22px;
    display: inline-block;
}
a:hover.link-popup, a:focus.link-popup  {
    text-decoration: none !important;
}

.label-select-popup {
    display: block !important; 
    margin-top: 5px !important;
}
.select-pupup-left {
   line-height: 1.5 !important;
    color: #adadad;
    float: left;   
    width: 85% ;
    display: block !important;
}
.select-popup-right {
    float: right; 
    line-height: 1.5; 
    color: #adadad; 
    display: block 
}
.sub-title {
    color: #9f9a9a; 
    font-size: 18px; 
    margin-bottom: 10px
}
.sub-title a {
     color: #9f9a9a !important; 
}
.sub-title a:hover {
     text-decoration: none !important; 
}
.detail-box {
    padding: 10px !important;;
    margin-bottom: 15px;
    border: 1px solid #ededed;
 }
.header-detail-box {
    background-color: #ece8e8;
    text-align: center; 
    margin-bottom: 15px; 
    padding: 18px 18px 10px 18px;
    border-radius: 15px;
}
.header-detail-box img {
    margin: 0 auto 5px auto; 
    width: 110px; 
    height: 50px; 
    border-radius: 4px; 
    display: block;
}
.header-detail-box span {
    color: #555555; 
    font-size: 18px; 
    text-transform: uppercase;
}
.radio-container {
    border: 1px solid #e6e6e6 !important; 
    border-radius: 4px !important; 
    padding: 15px 15px 15px 20px !important; 
}
button[disabled] {
   opacity: 0.7 !important;;
}
.wrap-input100 {
    border: 0 solid #e6e6e6 !important;
}
.page-subtitle {
    width: 100%; 
    font-size: 16px; 
    text-align: center;
    font-family: Montserrat-SemiBold;
    color: #393939;
    line-height: 1.5;
    text-transform: uppercase;
    margin: 10px 0 5px 0;
    display: block;
}
.cancel-btn {
    background-color: inherit !important; 
    color: inherit !important;
}
.sub-title-mid {
    padding: 0 !important; 
    text-align: center  !important;
    font-weight: bold; 
    color: #555555;
}
.sub-title-left {
    padding: 0 !important;
}
.sub-title-right {
    padding: 0 !important;
    text-align: right !important;
}
.h2-sub-title {
    font-size: 20px !important; 
    margin-bottom: 10px !important;
    font-weight: bold !important;
    color: #555555 !important;
}
.notice-container {
    margin-bottom: 0;
}
.user-notice {
     background: #fffde7;
    border: 1px solid #ffe564;
    color: #454430;
    font-size: 1.4rem;
    padding: 0.5em 1em;
    margin-bottom: 4px !important;
    border-radius: 15px;
}
.get-start-box {
   background: #ffe564 !important; 
    border-radius: 4px !important; 
    text-align: center !important; 
}
.btn-get-start {
    padding-left: 15px !important;
    padding-right: 15px !important;
    border: 1px solid #454430;
    color: #454430 !important;
    text-decoration: none;
    margin: 0 5px 
}
.all-his {
    float:right; 
    font-size: 75%;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 0;
}
.move-ib img {
    max-width: 100%;
    margin: 15px 0;
    border: 1px solid #ddd; 
}
.img-chat {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-bottom: 25px;
    transition: all .2s ease-in-out;
}
.rchedule-head {
    background-color: #eee; 
    font-weight: bold; 
    text-transform: uppercase; text-align: center
}
.lang-select {
    margin: 0 10px 0 15px;
}
    ol {
        list-style-type: decimal;
    margin-left: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.5em;

 }
 ol li {
      list-style-type: decimal;
    margin-left: 5px;
 }
.footer {
    font-size: 0.875rem;
    line-height: 1.6;
    background-color: #303030;
    position: absolute;
    width: 100%;
    bottom: 0;
}
.footer-wrap {
    max-width: 1300px !important;
    position: relative;
    margin: 0 auto;
    display: table;
    padding: 0 15px;

}
.medsos-footer {
background-color: #303030 !important;
   padding: 5px 0;
}
dsos-footer img {
    border-radius: 6px;
}
.medsos-footer span {
    color: #b1b1b1;
    font-weight: bold;
    font-size: 14px !important;
}
.medsos-container {
    width: 100%;
    padding: 0 15px;
}

.sosmed-list {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-top: 5px;
    margin-right: 10px;
 
}
.contact-list {
    color : #b1b1b1;
    font-size: 14px;
    width: 100%;
    text-align: center;
}
.contact-list li {
    display: inline-block;
    margin-right: 25px;
    font-size: 16px !important;
}
.credit-footer {
    font-size: 11px;
    background: #222;
    color: #717171;
    padding: 20px 0;
}
.footer p {
    margin-top: 10px;
}
.footer a {
    color: inherit
}
.clear-footer {
    position: relative; display: block; margin-top: 250px
}
.slogan {
     font-size: 14px;
    font-family: 'Montserrat-SemiBold';
    display: inline-block;
    text-transform: uppercase;
}
.notif-tab-mobile {
    display: none;
}
.img-select {
    margin-right: 15px; 
    width: 100px; 
    height: 48px; 
    border-radius: 4px;
}
.img-select2 {
    margin-right: 15px; 
    width: 110px; 
    height: 50px; 
    border-radius: 4px;
}
 .select-pbfx-title-1 {
        display: block;
        color: #555555;
}
.advance-filter-wrap {
        padding-left: 0;
        padding-right: 0;
}

.i-src-modal {
    position: absolute !important;
    color: #adadad !important;
    font-size: 14px!important;
    margin-left: 15px !important;
    margin-top: 5px !important;
    padding-right: 5px !important;
}
.input-src-modal {
    padding-left: 5px !important;
    height: 22px!important;
    margin-left: 25px !important;
    font-size: 14px !important;
}
.wrap-input-src-ta {
    padding: 0 7px !important;
    height: 38px !important;
    margin-bottom: 0 !important;

}
.wd-icon {
    display: inline-block;
    position: absolute;
    padding: 3px 5px;
    border-radius: 2px;
    font-size: 12px;
    color: #ddd !important;
}
.approved-color {
    color: #0080009c !important;
}
.pending-color {
    color: #e3990ea1 !important;
}
.failed-color {
    color: #ff00007d !important;
}
.archived-color {
    color: #aaa !important;
}
/* external css: flickity.css */

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

body { font-family: sans-serif; }

.gallery {
  background: #EEE;
}

.gallery-cell {
  width: 66%;
  height: 200px;
  margin-right: 10px;
  background: #8C8;
  counter-increment: gallery-cell;
}

/* cell number */
.gallery-cell:before {
  display: block;
  text-align: center;
  content: counter(gallery-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

.row-menu-box {
    margin-bottom: 15px;
}  
.row-menu-box span {
    text-align: center;
    font-size: 12px;
    width: 100%;
    margin: 0 auto;
    display: table;
    margin-top: 5px;
    color: #555;
        padding: 0 10px;
   
    }
    .row-menu-box img {
        border-radius: 6px; 
        display: table; 
        margin: 0 auto;
        width: 60px;
        height: 50px;
    }

.menu-grid-item {
    background: #ece8e8;
    border-radius: 15px;
    padding: 20px 10px;
    margin-left: 5px;
    margin-right: 5px;
}
.menu-grid-item:hover   {
    background: #ccc;

}

.pd-0 {
    padding: 0 !important;
}
.media-ol-sm {
    width: 46px !important;
    height: 46px !important;
    font-size: 32px !important;
}
.media-ol {
    background: #E00000;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 64px;
    height: 64px;
    color: #fff;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 42px;
    border-radius: 10px;
}
.media-body-ol {
    font-size: 93%;
    text-align: left;
}
.media-heading {
    text-transform: uppercase !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}

/* ==== Tampilan mobile phone Maksimal lebar layar 768px ==== */
@media (max-width: 768px) {
    .balance-container {
        float: none;
        display: inline-block;
        margin-top: 0;
    }
     .spark-info-name {
        color: #555;
    }
    .sparks-info span {
        font-size: 20px;    
    }
     .spark-info-value img {
         display: none;
    }
    .navbar-collapse {
    position: fixed!important;
    background: #111 !important;
    z-index: 3000 !important;
    width: 100% !important;
    top: 53px !important;
    border-top: 0 solid transparent;
    }
    .sparks li {
     padding: 5px 7px;
    margin-left: 4px;
    }

    h2.profilename {
        font-size: 16px;
    }
    .cd-container {
        padding: 0 5px !important;
        width: 100%;
    }
    .top-nav-left {
        margin-left: 25px;
    }

    .spark-info-name {
        font-weight: normal !important;
        font-size: 11px !important;
        padding-bottom : 0;
    }
    .am-body-content{
        padding: 0 0;
        margin-top: 70px;
    }
    .main-box-header-icon {
        height: 45px
    }
    .main-box h2 {
        font-size: 1.2em;
    }
    .main-box-header-note {
        font-size: 13px;
    }
    .row-grid-sm {
        font-size: 12px;
    }
    .title-broker-name {
    display: none;
   }
    .col-amount {
        font-size: 16px;
    }
    .col-status {
        margin-right: 0;
    }
    .status-ok, .status-pending, .status-cancel {
    font-size: 16px;
    }
    .arrow-details {
        font-size: 16px;
    }
    .col-grid-right {
        margin-top: 0;
    }
    .sidebar h2 {
        margin-left: 5px;
    }
    
    .menu-mobile {
        display: inline-block !important;
    }
    .profilCanopy-nav {
        display: none;
    }
    .navbar-nav>li {
        width: 100% !important;
    }
    .navbar-nav>li>a {
        color: #999999 !important;
        font-family: inherit;
        font-size: 16px;
        line-height: 1 !important;
        padding-top: 12px !important;
         padding-bottom: 12px !important;
    }
    .dropdown-menu>li>a {
        color: #999999 !important;
        line-height: 2 !important;
        border-bottom: 1px solid #343232 !important;
        text-transform: capitalize !important;
    }
    .profile-box {
        margin-top: 0;
    }
    .nav-incompalate-profile {
        margin-top: 110px !important;
    }
  .pagination {
    font-size: 16px !important;
     }
    .pagination>li>a, .pagination>li>span {
    margin: 0 2px !important;
    }
    .btn-filter-broker {
        margin-top: 5px;
    }
    .advance-filter {
        font-size: 12px !important;
        margin-left: 5px !important;
    }
    .select-filter {
    height: 32px !important;
    font-size: 12px !important;
    }
    .input100-filter {
        font-size: 12px !important;
    }
    .input100-filter2 {
        height: 32px !important;
        font-size: 12px !important;
    }
    .label-status {
        font-size: 75%;
    }
    .btn-submit {
      width: 100%;
      font-size: 24px !important;
      padding: 10px 10px !important;
    }
    .sticky-btn-container {
        position:fixed !important;
        bottom: 0 !important;
        padding: 10px 15px 0 15px !important;
        left: 0 !important;
        right: 0 !important;
        background: #ffffff;
    }
    .page-title {
        font-size: 18px;
        text-align: center;
    }
    .hide-xs {
        display: none;
    }
    .back-link {
        padding: 2px 20px 2px 0 !important;
    }
    .cancel-btn {
         padding: 2px 5px 2px 20px !important;
    }
    .icon-cancel {
        font-size: 22px !important;
    }
    .his-container {
        border-bottom: 1px solid #ddd;
    }
    .col-grid-right-2 {
        margin-top: 5px
    }
    .img-chat {
        width: 75px !important;
    height: 75px !important;
    }
    .lang-select {
        margin: 0 25px 4px 0 !important;
    }
    .lang-img {
        height: 22px !important;
    }
    .glyphicon-lang {
        display: none !important;
    }
    .img-select {
        margin-right: 15px; 
        width: 90px !important;
        height: 44px !important;
        border-radius: 4px;
    }
    .img-select2 {
    margin-right: 10px !important;
    width: 90px !important;
    }
    .select-wrap-pbfx-1 {
        padding: 16px 15px 16px 15px !important;
    }
    .select-pbfx-title-1 {
        margin-top: -3px !important;
    }
    .label-radio100 {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    .advance-filter-wrap {
        text-align: center !important;
        margin-top: 10px !important;
    }
    .advance-filter-broker { 
        float: none !important;
    }
    .select-filter-broker {
       height: 38px !important;
      font-size: 14px !important; 
        text-align: center !important; 
    }
 
    .dd-trading-account, .dd-trading-account>li>a {
    color: #555 !important;
    border-bottom: none !important;
    }
    .wrap-input-src-ta {
        height: 34px !important;
        margin-top: -1px !important;

    }
    .col-src-ta {
        margin-bottom: 10px !important;
        padding-right: 0 !important;
    }
    .mobile-only {
        display: block !important;
    }
    .btn-get-start {
        display: block !important;
        margin: 10px 0 !important;
    }
    .wd-icon {
            color: #333 !important;
    }
    .item-value {
        float: none !important;
        text-align: center !important;
        display: block !important;
    }
    .item-title {
        text-align: center !important;
        display: block !important;
        font-weight: bold !important;
    }
    .menu-grid-item {
        background: transparent;
        padding: 10px 0;
    }
    .row-menu-box {
        background: #ece8e8;
        padding: 8px 4px;
        border-radius: 15px;
    }
    .row-menu-box img {
        height: 40px;
        width: 50px;
    }
    .row-menu-box span {
        font-size: 0px
    }
    .profile-complate {
        font-size: 12px
    }
    .cd-logo img {
    height: 32px;
    margin-top: 10px
    }
}