@charset "UTF-8";
/**
 *
 * You can write your CSS code here, DO NOT touch the default JavaScript file
 * because it will make it harder for you to update.
 * 
 */

/*# sourceMappingURL=custom.css.map */

:root {
	--primary-color: #0D47A1;
	--secondary-color: #2E7D32; /*#1565C0;*/
	--primary-color-tinted: #1565C0;
    --danger-color: #C62828;
    --accent-green: #1dbf73;
    --verified: var(--accent-green);
    --bg-primary: var(--primary-color);
     --bg-secondary: #a14fff;
     --bg-accent: #a6c6f747;
	--bg-danger: #C62828;
	--bg-danger-tinted: #D32F2F;
	--bg-teal: #00796B;
	--bg-grey: #D4F1F4; /*#E0F2F1;*/
    --alert-success: #E8F5E9;
    --alert-info: #00796B; /* #5c57ff*/;
    --alert-warning: #ffa42680;
    --description: #6c757d;
    --gray: var(--description);
    --text-primary: var(--primary-color);
}

hr {
    opacity: .7 !important;
}

button.btn-primary {
    border-radius: none !important;
}

.btn-exclusive {
    background: #FDD835 !important;
    color: #3b3b3b;
} 

/******************************
    VERIFIED
******************************/
.verified-user {
    color: var(--verified) !important;
}

/******************************
    BUTTONS
******************************/

button.primary, .btn-primary {
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: #fff;
    font-weight: 500;
}

button.primary:hover, .btn-primary:hover {
    background: #fff;
    /*color: var(--button-primary-color);*/
    color: #fff !important;
    /*font-weight: 600;*/
    border: 1px solid #fff;
}

/*button.inverse:hover {
    background: var(--primary-color);
    color: #fff;
}*/

.btn-inverse {
    background: #fff;
    border: 2px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
    font-weight: 700;
}

.btn-inverse-danger {
    background: #fff;
    border: 2px solid var(--danger-color) !important;
    color: var(--danger-color) !important;
    font-weight: 700;
}

.btn-inverse:hover {
    background: #fff;
    border: 2px solid #5c57ff !important; /*2px solid var(--button-primary-color);*/
    color: #5c57ff !important;
    font-weight: 700;
}

/******************************
    TEXT
******************************/

.text-primary {
    color: var(--primary-color) !important;
}

.text-secondary {
    color: var(--secondary-color) !important;
}

.text-danger {
    color: var(--danger-color) !important;
}

.text-gray {
    color: var(--text-gray) !important;
}

/* 
  =========================
 TEXT-FLOW ELLIPSIS NORMAL SCREEN
  =========================
*/

.media .flow {
  white-space: wrap;
  width: 800px; 
  max-width: 100%; 
  overflow: hidden;
  /*text-overflow: ellipsis; */
  /*border: 1px solid #000000;*/
}


/* 3.18 Navbar */
.navbar-bg {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 115px;
    background-color: var(--primary-color);
    z-index: -1;
}

/* 4.2 Section */
 .section .section-header {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
    background-color: #fff;
    border-radius: 3px;
    border: none;
    position: relative;
    margin-bottom: 30px;
    padding: 20px;
    display: flex;
    align-items: center; 
}

    .btn-primary, .btn-primary.disabled {
    box-shadow: none;
  background-color:  var(--primary-color);
  border-color: var(--primary-color);
}

 .btn-primary:active, .btn-primary:hover, .btn-primary.disabled:active, .btn-primary.disabled:hover {
    background: var(--primary-color) !important; 
}


/* 3.5 Card */
.card .card-header h4 {
      font-size: 16px;
      line-height: 28px;
      color: var(--primary-color);
      padding-right: 10px;
      margin-bottom: 0; 
  }

       .card.card-primary {
    border-top: 0px solid #6777ef; }

a {
    color: var(--primary-color-tinted);
    font-weight: 500;
    transition: all .5s;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
}

.btn-danger, .btn-danger.disabled {
    box-shadow: 0 2px 6px transparent;
    background-color: var(--bg-danger-tinted);
    border-color: var(--bg-danger-tinted);
    color: #fff;
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.disabled:hover, .btn-danger.disabled:focus, .btn-danger.disabled:active {
    background-color: var(--bg-danger) !important;
     }

.bg-danger {
    background-color: var(--bg-danger) !important;
}

.bg-success {
    background-color: var(--secondary-color) !important;
}

.bg-grey {
    background-color: var(--bg-grey) !important;
}

.bg-teal {
    background-color: var(--bg-teal) !important;
}

.bg-accent {
    background-color: var(--bg-secondary) !important;
}

.text-success, .text-success-all *, .text-success-all ::before, .text-success-all ::after {
    color: var(--secondary-color) !important;
}

.text-danger, .text-danger-all *, .text-danger-all ::before, .text-danger-all ::after {
    color: var(--bg-danger) !important;
}

.alert-success {
    background: var(--alert-success) !important;
    color: #111 !important;
}

.alert-info {
    background: var(--alert-info) !important;
    /*color: #111 !important;*/
}

.alert-warning {
    background: var(--alert-warning) !important;
    color: #111;
}

.badge-success {
    background-color: var(--secondary-color) !important;
}

.badge-danger {
    background-color: var(--bg-danger) !important;
}

h3, h4, h5 {
    color: var(--primary-color);
}

/*** New User Welcome Modal ***/

.modal p.card-greeting {
    font-weight: bolder;
}

.modal p.card-text {
    color: #3b3b3b;
}


/***  Photo Verification Image Upload ****/

#upload {
    opacity: 0;
}

#upload-label {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
}

.image-area {
    border: 2px dashed rgba(255, 255, 255, 0.7);
    padding: 1rem;
    position: relative;
}

.image-area::before {
    content: 'Uploaded image result';
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    z-index: 1;
}

.image-area img {
    z-index: 2;
    position: relative;
}

/*** Select2 ***/

.select2-container--default .select2-selection--multiple .select2-selection__choice, .select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #efefef !important;
    color: #0d47a1;
}

/** Main-sidebar Menu Link **/
.sidebar-menu .menu-header {
    color: #0d47a1d9 !important;
}

.sidebar-menu .nav-link {
    color: #111 !important;
    font-weight: 700;
}

/*** Agency Box display ***/
 .box{
        display: none;
    }


/* 
  =========================
  CAMPAIGN STATUS BEEP
  =========================
*/

    .beep-status-running {
  position: relative; }
   .beep-status-running:after {
    content: '';
    position: absolute;
    top: 2px;
    right: 8px;
    width: 7px;
    height: 7px;
    background-color: var(--accent-green) !important; /* #ffa426; */
    border-radius: 50%;
    -webkit-animation: pulsate 1s ease-out;
            animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    opacity: 1; }


 .beep-status-stopped {
  position: relative; }
   .beep-status-stopped:after {
    content: '';
    position: absolute;
    top: 2px;
    right: 8px;
    width: 7px;
    height: 7px;
    background-color: var(--danger-color) !important; /* #ffa426; */
    border-radius: 50%;
    -webkit-animation: pulsate 1s ease-out;
            animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    opacity: 1; }


    /* 
  =========================
  DB Data LOAD MORE
  =========================
*/

/* bottom padding was affected after load implementation */
.list-unstyled-border li {
    border-bottom: 1px solid #f9f9f9;
    padding-bottom: 15px;
    margin-bottom: -22px;
}

 .load {
            display: none;
            /*font-size: 20px;*/
        }

    /* 
  =========================
  APM PAYMENT FORM DESCRIPTION
  =========================
*/

div.section-body.payment-form .text-description {
    font-size:  16px;
}


/* 
  =========================
  MEDIA QUERY for TEXT-FLOW ELLIPSIS SMALL SCREENS
  =========================
*/
    @media screen and (max-width: 768px) {
        .media .flow {
      white-space: wrap; 
      width: 228px;
      line-height: 1.2; 
      overflow: hidden;
      text-overflow: ellipsis; 
        /*border: 1px solid #000000;*/
        }

    }