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

Main CSS stlesheet for Reverb admin app.

For new version and deploy.

1) Make changes here and save.
2) Copy contents of this file, create new file, paste contents, and save with filename formate like reverb_admin_global_YYYY-MM-DD.css
3) Minify CSS code: https://cssminifier.com/

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

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

body, p, div, td {
    /* font-family: 'Open Sans', 'Helvetica Neue', helvetica, arial, sans-serif; */
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    font-size: 13.5px;
    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;
}

h2, h3, h4, h5, h6 {
    font-family: 'PT Sans', Helvetica, Arial, sans-serif;
}

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

.clear {
    clear: both;
}

.btn {
    padding: 8px 12px !important;
    font-weight: 600 !important;
}

.btn-primary,
.btn-success {
    background-color: #91cf16 !important;
    color: #fff;
    border: 0px;
    text-transform: uppercase;
}

.btn {
    border-radius: 3px !important;
}

.btn-primary:hover, 
.btn-primary:focus,
.btn-success:hover, 
.btn-success:focus {
    background: #a7d945 !important;
    border: 0px !important;
    border-color: #91cf16 !important;
}

.page-item.active .page-link {
    background-color: #91cf16 !important;
    border-color: #91cf16 !important;
}

#main-panel-area, #main-content-area {
    /* background: linear-gradient(-45deg, #4676B5, #C0CFE3) !important; */
    background-color: #ebeef0;
}

.card {
    margin-bottom: 25px !important;
    background-color: #fff !important;
    border-radius: 0px;
    box-shadow: none;
}

#card-header-main {
    background-color: #f1f1f1 !important;
    border-bottom-color: #ccc !important;
    padding: 10px !important;
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
}

#card-header-main .card-title {
    padding-left: 8px;
}

.nav-tabs {
    margin-bottom: 15px;
}

.well {
    margin-bottom: 15px;
}

.table th {
    border-top: 0px !important;
    text-transform: uppercase;
}

.modal-dialog,
.modal-content {
    /* 80% of window height */
    height: 80%;
}

.modal-body {
    /* 100% = dialog height, 120px = header + footer */
    max-height: calc(100% - 120px);
    overflow-y: scroll;
}   

#large-modal-iframe {
    height: 100%;
}

.ts-green,
.ts-green-icon {
    color: #91cf16;
}

.ts-green-bkgr {
    background-color: #91cf16;
}

dt {
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 2px;
    margin-bottom: 4px;
    font-family: 'PT Sans', Helvetica, Arial, sans-serif;
    font-size: 15px;
    margin-bottom: 8px;
    font-weight: bold !important;
    width: 80%;
}

dd {
    margin-bottom: 14px !important;
}

.dropdown-menu li a {
    width: 100%;
    text-align: left;
}

.dropdown-menu li a:hover, .dropdown-menu li a:focus {
    background-color: #f1f1f1;
}

/* ---------------------- Top Header Bar ---------------------- */

#main-header {
    background-color: #fff;
}

#logo-header {
    background-color: #1b1f28 !important;
}

a.logo {
    margin: 8px 0px 0px 3px !important;
}

.logo-header {
    height: 54px !important;
    background-color: #1b1f28;
    border-bottom: 2px solid #67798c;
}

#main-top-navbar {
    min-height: 54px;
    background-color: #fff;
}

.dropdown-user {
    width: 200px;
}

.avatar-sm {
    width: auto !important;
}

#avatar-icon img {
    margin-right: 5px;
}

#avatar-first-name {
    vertical-align: baseline;
    font-weight: 600;
}

#avatar-menu-dropdown-icon i {
    margin-left: 4px;
    vertical-align: text-top;
}

#user-menu-list {
    padding-left: 20px;
    list-style-type: none;
}

#user-menu-list li {
    margin: 0px 20px 0px 0px;
}

#user-menu-list li a {
    margin: 0px 0px 4px 0px;
    padding: 4px 10px 4px 10px;
}

.topbar-nav {
    padding: 8px 0px 0px 0px;
}

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

.sidebar[data-background-color="dark2"] {
    background-color: #1b1f28 !important;
}

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

.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.sidebar-style-2 .nav .nav-item .active a {
    background-color: #1b1f28 !important;
}

.sidebar.sidebar-style-2 .nav .nav-item .active a span {
    color: #fff !important;
    opacity: inherit !important;
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 2px;
}

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

.sidebar.sidebar-style-2 .nav .nav-item a {
    padding: 8px 10px;
}

.sidebar.sidebar-style-2 .nav .nav-item a[data-toggle=collapse][aria-expanded=true],
.sidebar.sidebar-style-2 .nav .nav-item a[aria-expanded=true] {
    background-color: #67798c !important;
}

.sidebar .nav-collapse, 
.sidebar[data-background-color="white"] .nav-collapse {
    padding-top: 2px;
}

.menu-item-active {
    background-color: #67798c !important;
}

/* ---------------------- Inner Pages ---------------------- */

.masthead {
    margin: 10px 0px 20px 0px;
}

.masthead h3 {
    font-size: 24px;
    font-weight: 400;
}

div.dataTables_wrapper div.dataTables_length select {
    width: 60px;
}

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

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

.performance-stat-card, .card-stats {
    margin-bottom: 12px !important;
    border-radius: 5px;
    background-color: #ffffff;
    margin-bottom: 30px;
    -webkit-box-shadow: 2px 6px 15px 0px rgb(69 65 78 / 10%);
    -moz-box-shadow: 2px 6px 15px 0px rgba(69, 65, 78, 0.1);
    box-shadow: 2px 6px 15px 0px rgb(69 65 78 / 10%);
    border: 0px;
}

.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;
}

.avatar .avatar-title {
    background-color: #8580d1;
}

/* ---------------- 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: 78%;
  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: 0px 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-x: hidden;
    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;
}

.dataTables_scrollBody { 
    scrollbar-width: thin !important;
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 4px;
  height: 4px;
}

::-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;
}