/* ---------------------- Global ---------------------- */

body, p, div, td {
    /* font-family: Roboto, Helvetica, sans-serif !important; */
    /* font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif; !important; */
    font-family: 'Open Sans', 'Helvetica Neue', helvetica, arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    color: #414042 !important;
    /* font-feature-settings: "pnum"; */
    /* -webkit-font-smoothing: antialiased; */
    /* -webkit-font-smoothing: auto; */
    line-height: 20px;
    word-break: normal !important;
}

.alert {
    margin: 20px 0px 20px 0px !important;
}

.clear {
    clear: both;
}

.btn {
    padding: 8px 12px !important;
}

.btn-success {
    background-color: #59aa6d !important;
}

/* ---------------------- Left Menu ---------------------- */

.sidebar .nav-collapse li a .sub-item, 
.sidebar[data-background-color="white"] .nav-collapse li a .sub-item {
    font-size: 15px;
}

.sidebar .nav-collapse, 
.sidebar[data-background-color="white"] .nav-collapse {
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
}

.sidebar.sidebar-style-2 .nav .nav-item a,
.sidebar .nav > .nav-item a p, 
.sidebar[data-background-color="white"] .nav > .nav-item a p,
.sidebar.sidebar-style-2[data-background-color="dark"] .nav .nav-item a:hover p, 
.sidebar.sidebar-style-2[data-background-color="dark"] .nav .nav-item a:hover i, 
.sidebar.sidebar-style-2[data-background-color="dark"] .nav .nav-item a:focus p, 
.sidebar.sidebar-style-2[data-background-color="dark"] .nav .nav-item a:focus i, 
.sidebar.sidebar-style-2[data-background-color="dark"] .nav .nav-item a[data-toggle="collapse"][aria-expanded="true"] p, 
.sidebar.sidebar-style-2[data-background-color="dark"] .nav .nav-item a[data-toggle="collapse"][aria-expanded="true"] i, 
.sidebar.sidebar-style-2[data-background-color="dark2"] .nav .nav-item a:hover p, 
.sidebar.sidebar-style-2[data-background-color="dark2"] .nav .nav-item a:hover i, 
.sidebar.sidebar-style-2[data-background-color="dark2"] .nav .nav-item a:focus p, 
.sidebar.sidebar-style-2[data-background-color="dark2"] .nav .nav-item a:focus i, 
.sidebar.sidebar-style-2[data-background-color="dark2"] .nav .nav-item a[data-toggle="collapse"][aria-expanded="true"] p, 
.sidebar.sidebar-style-2[data-background-color="dark2"] .nav .nav-item a[data-toggle="collapse"][aria-expanded="true"] i,
.sidebar .nav > .nav-item a i, 
.sidebar[data-background-color="white"] .nav > .nav-item a i {
    color: #fff !important;
}

.sidebar .nav > .nav-item a p, 
.sidebar[data-background-color="white"] .nav > .nav-item a p {
    font-size: 16px;
    font-weight: 450;
    padding-top: 2px;
}

/* ---------------------- Dashboard ---------------------- */

.dashboard-top-chart {
    display: inline-block;
    height: 70px; 
    vertical-align: top;
    width: 100%;
}

.performance-stat-card {
    margin-bottom: 12px !important;
}

.performance-stat-num {
    font-size: 40px; 
    margin-bottom: 0px !important;
    line-height: 45px;
}

.performance-stat-num-label {
    margin-bottom: 12px !important; 
    font-size: 18px;
}

.social-stat-label {
    text-align: center;
    margin: 0px 10px 6px 10px;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 2px;
}

.dashboard {
    clear: both;
    position: relative;
    border: 3px solid #e4eaef;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    padding: 20px 7px 20px 7px;
    margin: 5px 0 25px 0;
}

.graph_group{
    float:left;
    width:auto;
}

.graph_container {
    float: left;
}

.graph {
    width: 250px;
    height: 110px;
}

.graph_detail {
    padding-left: 10px;
    margin-top: 24px;
    overflow: hidden;
    width: 230px;
    float: left;
}

.dashboard .clicks {
    margin: 0px 0px 0px 40px;
}

.dashboard .sales .graph_detail {
    width: 320px;
}

.clicks,
.visits,
.device_types,
.shares{
    float: left;
    margin: 0 0 0 15px;
    width: 455px;
}
.dashboard .sales {
    float: left;
    margin: 0 0 0 15px;
    width: 570px;
}
.clearboth {
    clear: both;
}
.total {
    clear: both;
    text-align: left;
    padding-left: 37px;
    font-weight: bold;
    font-size: 11px;
    color: #999;
}
.graph_detail .summary_label {
    color: #00599C;
    font-weight: bold;
    font-size: 14px;
}
.total a, .total a:active, .total a:visited {
    color: #999;
}
.graph_detail .summary_value {
    font-weight: bold;
    font-size: 17px;
}

.campaign {
    border-bottom: 1px #F2F1F1 solid;
    padding-bottom: 15px;
}

.recent_activity {
    border-bottom: 1px #F2F1F1 solid;
    padding-bottom: 15px;
}

#recent-activity-column {
    margin: 0px 60px;
}

#recent-activity-column h2,
#referral-campaigns-column h2 {
    margin: 0px 0px 30px 0px;
    padding: 0px 0px 4px 0px;
  border-bottom: 2px solid #ccc;    
}


.campaign_data .graph{
    width: 350px;
    height: 220px;
}

.campaign_data .sales,
.campaign_data .clicks,
.campaign_data .visits,
.campaign_data .device_types,
.campaign_data .shares{
    width: 450px;
    /*height: 220px;*/
}

.graph.pie-graph{
    width: 435px;
    height: 220px;
}

.report-item {
    float: left;
    margin: 10px 10px 10px 15px;
    padding: 6px;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc #ccc #999 #ccc;
    -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
    -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
    box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
    width: auto;
}

.report-item .map {
    width: 910px;
    height: 320px;
}

.social-channel-badge {
    padding: 8px;
  border-radius: 5px;
  color: #fff;
}

#facebook-share-dashboard-data .social-channel-badge {
    background-color: #7288B5; /* #3b5998 */
}

#twitter-share-dashboard-data .social-channel-badge {
  background-color: #00a0d1;
}

#email-share-dashboard-data .social-channel-badge {
  background-color: #7070DB;
}

#total-share-dashboard-data .social-channel-badge {
  background-color: #81b71a;
}

.social-channel-icon {
    display: inline;
    float: left;
}

.social-channel-data {
    display: inline;
    float: left;
    margin: 0px 0px 0px 10px;
}

.social-channel-data h3 {
    margin: 0px 0px 6px 0px;
}

/* ---------------- Online Stores - Top ------------------ */

.store-connected-indicator {
    margin: 0px 0px 0px 8px;
    padding: 3px 5px;
    background-color: #CDE0C4;
    color: #356635;
}

.store-connected-indicator:hover {
  color: #356635;   
}

.store-not-connected-indicator {
  margin: 0px 0px 0px 8px;
  padding: 3px 5px;
  background-color: #C26565;
  color: #fff;
}

.store-not-connected-indicator:hover {
  color: #fff;  
}

/* ---------------- Campaigns - Top ------------------ */

#view-campaigns-header #menu_settings {
    display: inline;
    float: left;
    width: 700px;
}

#view-campaigns-header #create-campaign-btn {
  display: inline;
  float: right;
    margin: -5px 90px 0px 0px;
}

#view-campaigns-header #create-campaign-btn a {
  display: block;
  width: 200px; 
  height: 38px;  
  text-indent: -4000px;
  outline: none;
  background: #fff url(/img/create_new_campaign_btn.png) top right;
}

/* ---------------- Campaign Creation ------------------ */

#creation-step-list {
    width: 100%;
    margin: 0px 0px 20px 0px;
}

#creation-step-list li {
    display: inline;
    float: left;
    width: 20%;
    padding: 4px 0px;
    border-right: 2px solid #ccc;
    text-align: center;
}

#creation-step-list li.current-step {
  background-color: #f1f1f1;
  font-weight: bold;    
}

#creation-step-list li#last-step {
  border: none; 
}

#create-form-submit-buttons {
    margin: 30px 0px 0px 0px;
    text-align: center;
}

#creation-main {
    padding: 30px 20px;
    background-color: #fff;
}

h2#campaign-creation-name {
    margin: 0px 0px 20px 0px;
    padding: 8px 0px 6px 0px;
    border-bottom: 3px solid #ccc;
    background-color: #f1f1f1;
    text-align: center;
    overflow-wrap: break-word;
}

.level-section {
    margin: 0px 0px 10px 0px;
    padding: 8px;
    border: 2px solid #f1f1f1; 
}

.level-header {
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 2px 1px; 
    border-bottom: 2px solid #ccc; 
}

.level-header-title {
    display: inline;
    float: left;
    padding: 0px;
    margin: 0px 0px 0px 0px;
    font-size: 16px;
}

.level-header-delete {
    display: inline;
    float: right;
    width: auto;
    margin: 0;
    padding: 0px 0px 3px 0px;
}

.level-header-delete a {
  color: #fff;  
}

#add-level {
    margin: 10px 0px 10px 0px;
    padding: 4px;
    background-color: #fff;
    border: 2px solid #ccc;
    text-align: center;
}

#add-level a {
  color: #fff;  
}

#review-steps h3 {
    margin: 40px 0px 20px 0px;
    padding: 0px 0px 6px 0px;
    border-bottom: 1px solid #ccc;
}

.review-subtitle {
    font-weight: bold;  
}

/* ---------------- Campaigns - Customization ------------------ */

#customization-area-full-page {
    padding: 10px;
    background-color: #fff;
}

.customize-area-header {
    margin-top: 0px !important;
    padding: 4px 8px;
    border-bottom: 1px solid #ccc;
    background-color: #f1f1f1;
    margin-bottom: 10px;
    font-size: 20px;
}

#customize-select-area {
    width: 200px;
    margin: 0px 0px 20px 0px;
}

#customize-main {
  display: inline;
  float: left;
  width: 75%;
  padding: 0px 25px 0px 0px;
  border-right: 2px solid #ccc;
}

#page-preview {
    width: 100%;
    border: 1px solid #ccc; 
}

.customization-preview-iframe {
    width: 100%; 
    height: 300px;
    overflow-y: scroll; 
}

#customize-main #myTab {
    margin-top: 10px;
}

#customize-menu {
  display: inline;
  float: right;
  width: 18%; 
  margin: 20px 10px 0px 0px;
}

#customize-menu ul {
  margin: 0px 0px 40px 0px;
}

#customize-menu h3 {
  border-bottom: 2px solid #ccc;
  margin: 0px 0px 8px 0px;
  padding: 0px 0px 6px 0px;
  font-size: 18px;
}

#customize-menu h4 {
  font-size: 12px;
  font-weight: bold;
}

#customize-menu p {
  font-size: 12px;  
}

#customization-fields-scroll {
    height: 400px;
    overflow-y: scroll;
    border: 1px solid #ccc;
    margin: 0px 0px 15px 0px;
    padding: 10px;
}

#customize-main .tab-pane {
    margin-top: 10px;
}

.customize-code-field {
    width: 100%;
    height: 280px;
    border: 1px solid #ccc;
}

#customize-campaign-name {
    border-bottom: 2px solid #F0AD4E;
    padding: 10px 0px;
    text-align: center;
    font-size: 22px;
}

#customize-variables-list {
    height: 500px;
    overflow-y: scroll;
    border: 1px solid #ccc;
    margin: 0px 0px 15px 0px;
    padding: 10px;
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(0,0,0,.5);
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

#facebook-share-preview {
    width: 650px;
    height: 584px;
    margin: 15px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background: #fff url(/img/social/facebook/facebook_post_preview.png) no-repeat top left;
    background-size: 650px 584px;
}

#facebook-share-preview-url a {
    display: inline;
    float: left;
    margin: 65px 0px 0px 28px
}

#facebook-share-preview-thumb {
    display: inline;
    float: left;
    width: 605px;
    height: 321px;
    margin: 9px 0px 0px 21px;
}

#facebook-share-preview-fields {
    float: left;
    margin: 5px 0px 0px 45px;
}

#facebook-share-preview-fields p {
    margin: 0px 0px 2px 0px;
    padding: 0;
    font-family: system-ui, -apple-system, system-ui, ".SFNSText-Regular", sans-serif !important;
    line-height: 18px;
}

#facebook-share-preview-post-title {
  color: #4f8f00;
  font-size: 16px;
}

#facebook-share-preview-offer-desc {
  font-size: 11px;  
}

#twitter-share-preview {
    width: 650px;
    height: 584px;
    margin: 15px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background: #fff url(/img/social/twitter/twitter_post_preview.png) no-repeat top left;
    background-size: 650px 584px;
    border: 2px solid #ccc;
}

#twitter-share-preview-person-write {
    display: inline;
    float: left;
    margin: 43px 0px 0px 78px;
    width: 500px;
}

#twitter-share-preview-thumb {
    display: inline;
    float: left;
    width: 524px;
    height: 282px;
    margin: 15px 0px 0px 80px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

#twitter-share-preview-fields {
    float: left;
    margin: 14px 0px 0px 93px;
}

#twitter-share-preview-fields p {
    margin: 0px 0px 2px 0px;
    padding: 0;
    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    line-height: 18px;
}

#twitter-share-preview-post-title {
    color: #4f8f00;
    font-size: 20px;
    margin-bottom: 5px !important;
}

#twitter-share-preview-offer-desc {
    font-size: 15px;
    font-weight: 400;
    color: rgb(91, 112, 131);
    width: 500px;
}

#twitter-share-preview-url-domain {
    float: left;
    margin: 9px 0px 0px 113px;
    color: rgb(91, 112, 131);
}

#order-items-table td img {
    max-width:400px;
    max-height:400px;
}

table.table-overflow-break {
    word-break: normal;
}

/* --------------------------- RP Customization area --------------------------- */

#ChooseFromLibraryModal .image-preview img {
    width: 150px;
}

.asset-table-row:hover {
    background-color: #fffdcb !important;
}