/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Sep 10, 2017, 12:32:34 PM
    Author     : heowuayngon
*/
.site-navbar {
  background: #f22233; }

.page-register-v2 .page-brand-info {
  margin-top: 100px !important; }
  .page-register-v2 .page-brand-info .brand .brand-img {
    width: 280px;
    display: table;
    margin: auto; }
  .page-register-v2 .page-brand-info p {
    text-align: center; }

.page-register-v2 .page-register-main {
  padding-top: 50px !important; }

.page-register-v2 .intl-tel-input.allow-dropdown {
  width: 100%; }

.stringeeAdmin nav .navbar-right {
  margin-right: 0px; }

.pageStringeeProfile .btnTitleEdit a {
  font-size: 14px;
  margin-left: 10px; }
  .pageStringeeProfile .btnTitleEdit a i {
    margin-right: 0px; }
  .pageStringeeProfile .btnTitleEdit a:hover {
    text-decoration: none; }

.pageStringeeProfile #blockDisabled {
  visibility: hidden; }

.pageStringeeProfile .wrapDotted {
  display: inline-block;
  width: 220px;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis; }

#modalChangePassword .modal-title {
  margin: auto;
  font-size: 20px; }

#modalChangePassword .modal-header {
  padding: 32px 20px;
  border-bottom: 1px solid #e4eaec; }
  #modalChangePassword .modal-header h4 {
    font-size: 20px; }

#modalChangePassword .modal-body input {
  font-size: 13px; }

.modal-header {
  border-bottom: 1px solid #e4eaec !important; }
  .modal-header .modal-title {
    margin: auto;
    font-size: 20px; }

/*#modalCreateProject{
    
}*/
#modalProjectCreated,
#modalCreatedNewApiKeySuccess {
  /*    .modal-header{
        border-bottom: 1px solid #e4eaec !important;
        .modal-title{
            margin: auto;
            font-size: 20px;
        }
    }*/ }
  #modalProjectCreated .ac-key-and-secret,
  #modalCreatedNewApiKeySuccess .ac-key-and-secret {
    background: #fcfcfc;
    font-weight: 400; }
    #modalProjectCreated .ac-key-and-secret:before,
    #modalCreatedNewApiKeySuccess .ac-key-and-secret:before {
      background: url(/static/assets/images/bulb.png) no-repeat;
      width: 100px;
      height: 100px;
      position: absolute;
      left: 25px;
      top: 15px;
      content: '';
      background-size: 100px; }
    #modalProjectCreated .ac-key-and-secret div,
    #modalCreatedNewApiKeySuccess .ac-key-and-secret div {
      margin-left: 130px; }
      #modalProjectCreated .ac-key-and-secret div span.ac-label,
      #modalCreatedNewApiKeySuccess .ac-key-and-secret div span.ac-label {
        display: block;
        color: #b3bec3; }
      #modalProjectCreated .ac-key-and-secret div span.ac-value,
      #modalCreatedNewApiKeySuccess .ac-key-and-secret div span.ac-value {
        color: #415058;
        font-size: 16px; }
        #modalProjectCreated .ac-key-and-secret div span.ac-value.ac-secret,
        #modalCreatedNewApiKeySuccess .ac-key-and-secret div span.ac-value.ac-secret {
          font-size: 12px; }

.alert-danger a {
  color: #f96868; }

.iconCopy {
  cursor: pointer; }

.displayNone {
  display: none; }

#pageProjectDetail #projectDetailHeader {
  position: relative;
  color: white !important;
  /*        &:before{
            background: url(/public_html/static/assets/images/projectlogoRedx2.png) no-repeat;
            width: 217px;
            height: 162px;
            position: absolute;
            right: 0px;
            bottom: 0px;
            content: '';
            background-size: 231px;
        }*/ }
  #pageProjectDetail #projectDetailHeader a {
    color: white; }
  #pageProjectDetail #projectDetailHeader .panel-title {
    color: white; }
  #pageProjectDetail #projectDetailHeader #projectName {
    font-size: 25px;
    font-weight: 300; }
  #pageProjectDetail #projectDetailHeader #btnOpenModalUpdateProjectName {
    margin-left: 15px;
    font-size: 14px;
    cursor: pointer; }
  #pageProjectDetail #projectDetailHeader #projectCreated {
    margin-top: 10px;
    font-size: 12px;
    color: #ffd1d2;
    margin-bottom: 0px; }
  #pageProjectDetail #projectDetailHeader #btnDeleteProject i {
    margin-right: 5px; }
  #pageProjectDetail #projectDetailHeader .ac-section-body {
    margin-top: 20px; }
    #pageProjectDetail #projectDetailHeader .ac-section-body .ac-label {
      display: block;
      color: #ffd1d2;
      font-weight: 500; }
    #pageProjectDetail #projectDetailHeader .ac-section-body .ac-value {
      font-size: 16px;
      font-weight: 300;
      margin-right: 5px; }
  #pageProjectDetail #projectDetailHeader .panel-heading {
    border-bottom: 1px solid #ffd1d2; }

#boxCallbackUrl #inputCallbackUrl {
  width: 410px; }

#boxAnswerUrl #inputAnswerUrl {
  width: 410px; }

.page-register-v2 .page-brand-info p {
  max-width: auto !important; }

#boxCallbackUrl .form-group, #boxAnswerUrl .form-group {
  margin-right: 10px; }

.displayNone {
  display: none !important; }

#btnRemoveCallbackUrl i,
#btnRemoveAnswerUrl i,
#btnConfirmRemoveCallbackUrl i,
#btnConfirmRemoveAnswerUrl i {
  /* Safari */
  -webkit-transform: rotate(45deg);
  /* Firefox */
  -moz-transform: rotate(45deg);
  /* IE */
  -ms-transform: rotate(45deg);
  /* Opera */
  -o-transform: rotate(45deg);
  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }

#btnEditCallbackUrl,
#btnRemoveCallbackUrl,
#btnConfirmRemoveCallbackUrl,
#btnCancelConfirmCallbackUrl,
#btnEditAnswerUrl,
#btnRemoveAnswerUrl,
#btnConfirmRemoveAnswerUrl,
#btnCancelConfirmAnswerUrl {
  margin-left: 10px;
  cursor: pointer;
  font-size: 14px; }

#btnEditCallbackUrl i,
#btnRemoveCallbackUrl i,
#btnConfirmRemoveCallbackUrl i,
#btnCancelConfirmCallbackUrl i,
#btnEditAnswerUrl i,
#btnRemoveAnswerUrl i,
#btnConfirmRemoveAnswerUrl i,
#btnCancelConfirmAnswerUrl i {
  margin-right: 5px; }

#btnCancelConfirmCallbackUrl,
#btnCancelConfirmAnswerUrl {
  border-left: 1px solid #e0e0e0;
  padding-left: 10px; }

#alertInfoAnswerUrl,
#alertInfoCallbackUrl,
#alertInfoProjectName,
#alertInfoInputUpdateProjectName,
#alertCreateSlug {
  width: 100%;
  display: table;
  color: red;
  text-align: left;
  padding-left: 0px; }

#modalCreateProject .modal-dialog,
#modalDeleteProject .modal-dialog,
#modalDeleteProject .modal-dialog,
#modalUpdateProjectName .modal-dialog,
#modalUpdateProjectSuccess .modal-dialog,
#modalMessageEventUrlConfigured .modal-dialog,
#modalMessageAnswerUrlConfigured .modal-dialog,
#modalDeleteProjectSuccess .modal-dialog,
#modalDeleteApiKeySuccess,
#modalNoMoney .modal-dialog {
  max-width: 400px; }

.modal-footer {
  padding-right: 5px;
  padding-left: 5px; }

#modalSettingURL .modal-dialog {
  width: 700px;
  max-width: 700px; }

#tableProjects h3.projectName {
  line-height: 16px; }
  #tableProjects h3.projectName a {
    text-decoration: none;
    color: #f22233;
    font-weight: 300;
    font-size: 16px; }

.panel.panel-bordered .panel-heading .panel-title {
  font-size: 25px;
  font-weight: 300; }

#pageNumber .nav-tabs-vertical .nav-tabs-line .nav-link.active, #pageNumber .nav-tabs-vertical .nav-tabs-line .nav-link.active:focus, #pageNumber .nav-tabs-vertical .nav-tabs-line .nav-link.active:hover,
#pagePayment .nav-tabs-vertical .nav-tabs-line .nav-link.active,
#pagePayment .nav-tabs-vertical .nav-tabs-line .nav-link.active:focus,
#pagePayment .nav-tabs-vertical .nav-tabs-line .nav-link.active:hover {
  border-right: 2px solid  #46be8a; }

#pageNumber .nav-tabs-line .nav-item.open .nav-link, #pageNumber .nav-tabs-line .nav-item.open .nav-link:focus, #pageNumber .nav-tabs-line .nav-item.open .nav-link:hover, #pageNumber .nav-tabs-line .nav-item.show .nav-link, #pageNumber .nav-tabs-line .nav-item.show .nav-link:focus, #pageNumber .nav-tabs-line .nav-item.show .nav-link:hover, #pageNumber .nav-tabs-line .nav-link.active, #pageNumber .nav-tabs-line .nav-link.active:focus, #pageNumber .nav-tabs-line .nav-link.active:hover,
#pagePayment .nav-tabs-line .nav-item.open .nav-link,
#pagePayment .nav-tabs-line .nav-item.open .nav-link:focus,
#pagePayment .nav-tabs-line .nav-item.open .nav-link:hover,
#pagePayment .nav-tabs-line .nav-item.show .nav-link,
#pagePayment .nav-tabs-line .nav-item.show .nav-link:focus,
#pagePayment .nav-tabs-line .nav-item.show .nav-link:hover,
#pagePayment .nav-tabs-line .nav-link.active,
#pagePayment .nav-tabs-line .nav-link.active:focus,
#pagePayment .nav-tabs-line .nav-link.active:hover {
  color: #46be8a;
  font-size: 18px;
  font-weight: 400; }

#pageNumber #tableNumber .numberPhone,
#pageNumber #tableNumberStore .numberPhone,
#pageNumber #tableMyNumber .numberPhone {
  font-weight: 400;
  color: #797979;
  /*display:flex;*/ }
  #pageNumber #tableNumber .numberPhone i.icon,
  #pageNumber #tableNumberStore .numberPhone i.icon,
  #pageNumber #tableMyNumber .numberPhone i.icon {
    padding: 0px;
    margin-top: 3px; }

.form-icons .form-control-icon {
  position: absolute;
  z-index: 99;
  top: 50%;
  left: 10px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%); }

.form-icons .form-control-icon-right {
  right: 10px;
  left: auto; }

table.table h3 {
  margin-bottom: 0px !important; }

.flag-container {
  height: 38px; }

.form-group.has-danger {
  margin-bottom: 0px; }

body.page-register-v2 {
  margin: 20px; }

body.page-register-v2 {
  height: calc(100% - 60px) !important; }

.page-register-v2 .page-register-main {
  padding: 20px 50px 0px !important; }

.page-register-v2 form {
  margin-top: 20px !important; }

.alert-dismissible {
  padding-right: 0px; }

.alert-dismissible .close {
  right: 10px; }

#formRegister {
  position: relative; }

#formLogin,
#formGeneralSettings,
#formForgotPassword,
#formCreditCard,
#formChangePassword {
  position: relative; }

.loaddingWaiting {
  display: none;
  z-index: 100;
  position: absolute;
  left: 50%; }

.showInfoCopied {
  background: #12191d;
  color: white;
  width: 50px;
  height: 20px;
  position: absolute;
  border-radius: 3px;
  line-height: 20px;
  text-align: center;
  font-size: 12px;
  top: -27px;
  right: -18px;
  font-family: Roboto,sans-serif;
  display: none; }

.mr-10 {
  margin-right: 10px; }

.callback_url,
.answer_url {
  margin-bottom: 0px; }

#tableProjects h4,
#tableApiKey h4 {
  display: flex;
  font-size: 14px; }
  #tableProjects h4 .apiKeyName,
  #tableApiKey h4 .apiKeyName {
    color: #f22233; }
  #tableProjects h4 span.title,
  #tableApiKey h4 span.title {
    color: #76838f;
    width: 110px;
    float: left;
    font-size: 12px;
    font-weight: 400; }
  #tableProjects h4 .wrapUpdateApiKeyName,
  #tableApiKey h4 .wrapUpdateApiKeyName {
    display: flex; }
    #tableProjects h4 .wrapUpdateApiKeyName.hide,
    #tableApiKey h4 .wrapUpdateApiKeyName.hide {
      display: none; }
    #tableProjects h4 .wrapUpdateApiKeyName .form-material,
    #tableApiKey h4 .wrapUpdateApiKeyName .form-material {
      margin-bottom: 0px;
      margin-top: -10px; }
      #tableProjects h4 .wrapUpdateApiKeyName .form-material input,
      #tableApiKey h4 .wrapUpdateApiKeyName .form-material input {
        color: #f33343; }
  #tableProjects h4 .btnEditApiKeyName,
  #tableProjects h4 .btnSaveUpdateApiName,
  #tableProjects h4 .btnCancelUpdateApiName,
  #tableApiKey h4 .btnEditApiKeyName,
  #tableApiKey h4 .btnSaveUpdateApiName,
  #tableApiKey h4 .btnCancelUpdateApiName {
    margin-left: 15px;
    color: #a3afb7;
    cursor: pointer; }
    #tableProjects h4 .btnEditApiKeyName i,
    #tableProjects h4 .btnSaveUpdateApiName i,
    #tableProjects h4 .btnCancelUpdateApiName i,
    #tableApiKey h4 .btnEditApiKeyName i,
    #tableApiKey h4 .btnSaveUpdateApiName i,
    #tableApiKey h4 .btnCancelUpdateApiName i {
      margin-right: 0px; }

#tableProjects h5,
#tableApiKey h5 {
  margin-bottom: 5px;
  color: #21292e; }
  #tableProjects h5 span.title,
  #tableApiKey h5 span.title {
    width: 110px;
    float: left;
    color: #76838f;
    font-size: 13px;
    font-weight: 400; }

#tableProjects small,
#tableApiKey small {
  font-size: 13px;
  color: #21292e; }
  #tableProjects small span.title,
  #tableApiKey small span.title {
    color: #76838f;
    width: 110px;
    float: left;
    font-size: 12px;
    font-weight: 400; }

#tableProjects h5 {
  margin-bottom: 6px;
  display: table; }

#tableProjects .pEventUrl, #tableProjects .pAnswerUrl {
  display: table;
  margin-bottom: 0px; }
  #tableProjects .pEventUrl .title, #tableProjects .pAnswerUrl .title {
    font-weight: 400;
    width: 90px;
    float: left; }
  #tableProjects .pEventUrl .contentUrl, #tableProjects .pAnswerUrl .contentUrl {
    color: #f2a654; }

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  text-shadow: none; }

.pagination li {
  cursor: pointer; }

.pagination .page-item.active .page-link {
  color: #526475;
  border-color: #e4eaec;
  background-color: #e4eaec; }

#formSearchNumber .form-group {
  margin-right: 5px; }
  #formSearchNumber .form-group:last-child {
    margin-right: 0px; }
  #formSearchNumber .form-group #inputDigits {
    width: 150px; }

.alreadyBought {
  color: #a3afb7 !important; }
  .alreadyBought td {
    background: #f3f7f9; }

.mb-5 {
  margin-bottom: 5px; }

.wrapActionUpdateUrl {
  margin-top: 7px; }
  .wrapActionUpdateUrl a {
    cursor: pointer;
    font-weight: 400; }

.btn.disabled:hover {
  cursor: wait; }

#tableMyNumber .numberUrl {
  font-size: 12px;
  word-break: break-all; }
  #tableMyNumber .numberUrl .title {
    float: left;
    width: 75px; }

#formSearchCallReport {
  margin-bottom: 10px; }

#tableCalls .icon-call {
  display: table;
  margin: auto;
  height: 20px; }

#tableCalls {
  /*word-break: break-word;*/
  /*overflow-y: scroll;*/
  /*word-break: break-all;*/
  font-size: 12px; }
  #tableCalls .fromNumber, #tableCalls .toNumber, #tableCalls .projectName {
    font-weight: 400;
    color: #797979; }
  #tableCalls .fromNumber {
    color: #ff687c; }
  #tableCalls .startTime, #tableCalls .answerTime, #tableCalls .stopTime {
    font-size: 11px; }

.roomName {
  font-weight: 400;
  color: #797979; }

#userActiveFlotChart {
  height: 300px;
  width: 100%; }

#headerTab .radio {
  /*		display: inline-block;
		&:first-child{
			margin-right: 100px;
		}*/ }
  #headerTab .radio label {
    cursor: pointer; }

#headerTab.tabPayment {
  text-transform: uppercase; }
  #headerTab.tabPayment .radio-custom {
    display: inline-block;
    margin-right: 5px; }

#formPaymentCreditCard .form-group {
  margin-bottom: 0px; }
  #formPaymentCreditCard .form-group .form-control-label {
    padding-bottom: 0px;
    margin-bottom: 5px;
    text-transform: uppercase; }

#formPaymentCreditCard label {
  margin-bottom: 0px; }

.btnPaymentPaypal {
  width: 100px; }

.imageBlackWhite {
  -webkit-filter: grayscale(100%) opacity(80%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%) opacity(80%); }

form.formBeauty {
  width: 480px;
  margin: 20px; }
  form.formBeauty .group {
    background: white;
    box-shadow: 0 7px 14px 0 rgba(49, 49, 93, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    margin-bottom: 20px; }
  form.formBeauty label {
    position: relative;
    color: #8898AA;
    font-weight: 300;
    height: 40px;
    line-height: 40px;
    margin-left: 20px;
    display: block; }
  form.formBeauty .group label:not(:last-child) {
    border-bottom: 1px solid #F0F5FA; }
  form.formBeauty label > span {
    width: 20%;
    text-align: right;
    float: left; }
  form.formBeauty .field {
    background: transparent;
    font-weight: 300;
    border: 0;
    color: #31325F;
    outline: none;
    padding-right: 10px;
    padding-left: 10px;
    cursor: text;
    width: 70%;
    height: 40px;
    float: right; }
  form.formBeauty .field::-webkit-input-placeholder {
    color: #CFD7E0; }
  form.formBeauty .field::-moz-placeholder {
    color: #CFD7E0; }
  form.formBeauty .field:-ms-input-placeholder {
    color: #CFD7E0; }
  form.formBeauty button {
    float: left;
    display: block;
    background: #46be8a;
    color: white;
    box-shadow: 0 7px 14px 0 rgba(49, 49, 93, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    border: 0;
    margin-top: 20px;
    font-size: 15px;
    font-weight: 400;
    width: 100%;
    height: 40px;
    line-height: 38px;
    outline: none; }
    form.formBeauty button:disabled {
      background: #8dd0b3; }
  form.formBeauty button:focus {
    background: #37b57e; }
  form.formBeauty button:active {
    background: #37ad79; }
  form.formBeauty .outcome {
    float: left;
    width: 100%;
    padding-top: 8px;
    min-height: 24px;
    text-align: center; }
  form.formBeauty .success, form.formBeauty .error {
    display: none;
    font-size: 13px; }
  form.formBeauty .success.visible, form.formBeauty .error.visible {
    display: inline; }
  form.formBeauty .error {
    color: #E4584C; }
  form.formBeauty .success {
    color: #666EE8; }
  form.formBeauty .success .token {
    font-weight: 500;
    font-size: 13px; }

#tablePayment .iconBull {
  font-size: 20px;
  line-height: 12px; }

#tablePayment .wrapAmount {
  text-align: right; }

#tablePayment .detailFee {
  font-size: 12px; }

#tablePayment .bgPaid {
  background: rgba(255, 196, 196, 0.04); }

#amountAddToAccount {
  width: 480px; }
  #amountAddToAccount select {
    margin: 5px;
    font-weight: 400;
    font-size: 18px;
    color: #46be8a; }

.app-work .panel-info {
  float: right;
  padding: 0;
  margin: 0; }
  .app-work .panel-info li {
    list-style: none;
    display: inline-flex; }
    .app-work .panel-info li span {
      line-height: 50px;
      margin-right: 10px;
      font-weight: 400;
      font-size: 18px; }
      .app-work .panel-info li span.sign-dollar {
        font-size: 30px;
        font-weight: 300;
        line-height: 48px; }
    .app-work .panel-info lilast-child {
      margin: 0; }
    .app-work .panel-info li .num {
      font-size: 30px;
      font-weight: 300; }
    .app-work .panel-info li p {
      margin: 0; }

.daterangepicker.dropdown-menu {
  transition: none; }

.site-menubar-body {
  height: calc(100% - 0px) !important; }

.site-menubar-footer > a {
  padding: 10px 0;
  height: auto; }

#tableManagerAccount .role {
  width: 80px;
  float: left; }

#tableManagerAccount .btnSetting,
#tableManagerAccount .btnSave,
#tableManagerAccount .btnCancel {
  cursor: pointer; }

#tableManagerAccount .btnSave,
#tableManagerAccount .btnCancel,
#tableManagerAccount .selectType {
  display: none; }

#tableManagerAccount .btnCancel {
  background: none;
  border: none; }

#tableManagerAccount .selectType {
  width: 90px; }

#tablePortalManager .role {
  width: 80px;
  float: left; }

#tablePortalManager .btnSetting,
#tablePortalManager .btnSave,
#tablePortalManager .btnCancel {
  cursor: pointer; }

#tablePortalManager .btnSave,
#tablePortalManager .btnCancel,
#tablePortalManager .selectType {
  display: none; }

#tablePortalManager .btnCancel {
  background: none;
  border: none; }

#tablePortalManager .selectType {
  width: 90px; }

.nav.navbar-toolbar .wrapInfo {
  padding: 0px;
  height: 67px;
  padding-left: 20px;
  padding-right: 20px; }
  .nav.navbar-toolbar .wrapInfo .infoText {
    float: left; }
    .nav.navbar-toolbar .wrapInfo .infoText .infoName {
      display: block;
      margin-top: 10px;
      color: #f44336;
      font-weight: 400;
      line-height: 30px; }
    .nav.navbar-toolbar .wrapInfo .infoText .infoMail {
      display: block;
      font-size: 13px;
      line-height: 2px;
      color: #0a0a0a; }
  .nav.navbar-toolbar .wrapInfo .infoImage {
    position: relative;
    float: left; }
    .nav.navbar-toolbar .wrapInfo .infoImage img {
      width: 35px;
      border-radius: 30px;
      margin-top: 15px;
      margin-right: 10px;
      border: 1px solid #e2e2e2; }
    .nav.navbar-toolbar .wrapInfo .infoImage i {
      background-color: #46be8a;
      position: absolute;
      right: 11px;
      bottom: 0;
      width: 10px;
      height: 10px;
      border: 2px solid #fff;
      border-radius: 100%; }

#formGeneralSettings input:disabled {
  /*background:#fbfbfb;*/ }

.loader-overlay {
  background: rgba(2, 2, 2, 0.1) !important; }

.countSearch {
  font-size: 40px;
  color: #f96868;
  margin-right: 10px;
  margin-left: 20px; }

.site-menubar-unfold .site-menu-item {
  line-height: 38px; }
  .site-menubar-unfold .site-menu-item:hover i.site-menu-icon img {
    filter: brightness(0.2) invert(1); }
  .site-menubar-unfold .site-menu-item.active i.site-menu-icon img {
    filter: brightness(0.2) invert(1); }

.page-error .linkFailed {
  text-transform: lowercase;
  font-size: 20px;
  margin-bottom: 0px; }

.page-error p {
  margin-bottom: 0px !important; }

.page-error h1 {
  margin-top: 0px; }

#formCreditCard .successPay,
#formCreditCard .successTok {
  color: #01ab61;
  display: none; }
  #formCreditCard .successPay.visible,
  #formCreditCard .successTok.visible {
    display: inline-block; }
  #formCreditCard .successPay span,
  #formCreditCard .successTok span {
    font-weight: 500; }

#contentPaymentMethodPaypal .outcome {
  margin-top: 15px;
  font-size: 14px;
  text-align: center;
  width: 480px;
  color: #01ab61; }
  #contentPaymentMethodPaypal .outcome .handling,
  #contentPaymentMethodPaypal .outcome .successPay {
    display: none; }
    #contentPaymentMethodPaypal .outcome .handling.visible,
    #contentPaymentMethodPaypal .outcome .successPay.visible {
      display: inline-block; }
    #contentPaymentMethodPaypal .outcome .handling span,
    #contentPaymentMethodPaypal .outcome .successPay span {
      font-weight: 500; }

.markAdmin .badge {
  font-size: 8px; }

.markAdmin i {
  /*font-size: 8px;*/
  line-height: 12px; }

#pageStringeeAccountReport .wrapHeaderTab .nav-tabs-line,
#pageStringeeAccountReport .wrapHeaderTab .nav-link.active {
  border-bottom: 2px solid #f22233; }

#formChangePassword .modal-body {
  padding-bottom: 15px; }

#wrapTabHeaderDetailProject .nav-tabs-line,
#wrapTabHeaderDetailProject .nav-link.active,
#wrapTabHeaderDetailProject .nav-tabs-line,
#wrapTabHeaderDetailProject .nav-link.active:focus,
#wrapTabHeaderDetailProject .nav-tabs-line,
#wrapTabHeaderDetailProject .nav-link.active:hover {
  border-bottom: 2px solid #f22233;
  color: #f22233; }

#modalDetailProject .modal-header {
  background: #f22233;
  border-radius: 5px 5px 0px 0px;
  display: block;
  padding-top: 20px;
  padding-bottom: 20px; }
  #modalDetailProject .modal-header h4.modal-title {
    color: #fff;
    margin: unset;
    float: left;
    margin-right: 20px; }
  #modalDetailProject .modal-header #btnEditProjectName {
    float: left;
    margin-top: 5px;
    color: #fff;
    cursor: pointer;
    margin-right: 10px; }
  #modalDetailProject .modal-header #projectCreated {
    color: #f5f5f5;
    font-size: 12px;
    margin-bottom: 0px;
    clear: both; }
  #modalDetailProject .modal-header button.close {
    color: #fff; }
  #modalDetailProject .modal-header .wrapUpdateProjectName {
    display: inline-flex;
    color: white; }
    #modalDetailProject .modal-header .wrapUpdateProjectName .form-material {
      width: 200px; }
      #modalDetailProject .modal-header .wrapUpdateProjectName .form-material label.form-control-label {
        color: white !important;
        font-weight: 300; }
      #modalDetailProject .modal-header .wrapUpdateProjectName .form-material input {
        font-size: 22px;
        color: #fff; }
    #modalDetailProject .modal-header .wrapUpdateProjectName #btnSaveUpdateProjectName,
    #modalDetailProject .modal-header .wrapUpdateProjectName #btnCancelUpdateProjectName {
      cursor: pointer;
      margin-top: 5px;
      margin-right: 20px;
      display: table; }

#modalDetailProject .modal-body {
  padding: 0px; }
  #modalDetailProject .modal-body .panel-body #wrapHeaderApiKey {
    display: inline-flex;
    width: 100%; }
    #modalDetailProject .modal-body .panel-body #wrapHeaderApiKey #wrapBtnCreateApiKey {
      width: 8%; }
    #modalDetailProject .modal-body .panel-body #wrapHeaderApiKey #wrapAlertApiKey {
      width: 92%; }
      #modalDetailProject .modal-body .panel-body #wrapHeaderApiKey #wrapAlertApiKey .alert {
        margin-bottom: 0px;
        margin-top: 5px; }

#modalDeleteProject {
  z-index: 10000; }

#modalSettingURL .modal-header {
  background: #f22233;
  border-radius: 5px 5px 0px 0px;
  display: block;
  padding-top: 20px;
  padding-bottom: 20px; }
  #modalSettingURL .modal-header h4.modal-title {
    color: #fff;
    margin: unset;
    float: left;
    margin-right: 20px; }
  #modalSettingURL .modal-header button.close {
    color: #fff; }

#modalConfirmBuyNumber .modal-header,
#modalCreateProject .modal-header,
#modalCreateSipTrunk .modal-header,
#modalUpdateSipTrunk .modal-header,
#modalChangePassword .modal-header,
#modalProjectCreated .modal-header,
#modalNoMoney .modal-header {
  background: #f22233;
  border-radius: 5px 5px 0px 0px;
  display: block;
  padding-top: 20px;
  padding-bottom: 20px; }
  #modalConfirmBuyNumber .modal-header h4.modal-title,
  #modalCreateProject .modal-header h4.modal-title,
  #modalCreateSipTrunk .modal-header h4.modal-title,
  #modalUpdateSipTrunk .modal-header h4.modal-title,
  #modalChangePassword .modal-header h4.modal-title,
  #modalProjectCreated .modal-header h4.modal-title,
  #modalNoMoney .modal-header h4.modal-title {
    color: #fff;
    margin: unset;
    margin-right: 20px; }
  #modalConfirmBuyNumber .modal-header button.close,
  #modalCreateProject .modal-header button.close,
  #modalCreateSipTrunk .modal-header button.close,
  #modalUpdateSipTrunk .modal-header button.close,
  #modalChangePassword .modal-header button.close,
  #modalProjectCreated .modal-header button.close,
  #modalNoMoney .modal-header button.close {
    color: #fff; }

#wrapPanelSetting .panel-heading {
  background: #f22233;
  border-radius: 5px 5px 0px 0px;
  display: block; }
  #wrapPanelSetting .panel-heading h3.panel-title {
    color: #fff;
    margin: unset;
    margin-right: 20px; }

#toggleMenubar {
  display: none; }

#tableProjects .iconCopy,
#tableApiKey .iconCopy {
  margin-left: 5px;
  color: #bdbdbd; }

#tabDocHeader .nav-link.active {
  background: #f3f7f9; }

#modalDocUpdate .md-control-fullscreen {
  display: none; }

#modalDocUpdateSuccess {
  z-index: 10000; }

#formCreateDoc #docTitle,
#modalDocUpdate #docTitle {
  font-size: 20px;
  font-weight: 300; }

.form-material .form-control, .form-material .form-control.focus, .form-material .form-control:focus {
  background-image: linear-gradient(#f33f4e, #f4ba7b), linear-gradient(#e4eaec, #e4eaec); }

#tablePaymentSuccess,
#tablePaypalSuccess {
  text-align: left; }
  #tablePaymentSuccess tr td,
  #tablePaypalSuccess tr td {
    padding: 3px 13px; }
    #tablePaymentSuccess tr td.titleTd,
    #tablePaypalSuccess tr td.titleTd {
      background: #fbfbfb;
      font-weight: 400; }

#btnOpenModalCreateProject i,
#btnCreateNewApiKey i,
#btnOpenModalCreateSipTrunk i {
  top: -3px; }

#tabDocHeader .nav-link {
  font-weight: 500; }
  #tabDocHeader .nav-link.active {
    border-bottom: 2px solid #46be8a;
    color: #46be8a;
    background: #fff; }

#wrapUpload {
  /*	.progress {
		position: relative;
		width: 400px;
		border: 0.5px solid #ddd;
		padding: 1px;
		border-radius: 3px;
		color: #fff;
		
	}
	.bar {
		background-color: #5cb85c;
		width: 0%;
		height: 11px;
		border-radius: 3px;
	}
	.percent {
		position: absolute;
		display: inline-block;
		top: -3px;
		left: 48%;
	}*/ }
  #wrapUpload input[type='file'] {
    background: #fbfbfb;
    width: 100%; }

#wrapTableFile .fileName {
  float: left;
  color: #f2a654;
  font-weight: 400; }

#wrapTableFile .wrapUpdateFileName {
  display: flex; }
  #wrapTableFile .wrapUpdateFileName.hide {
    display: none; }
  #wrapTableFile .wrapUpdateFileName .form-material {
    margin: 0px; }
    #wrapTableFile .wrapUpdateFileName .form-material input {
      height: auto; }
  #wrapTableFile .wrapUpdateFileName .btnSaveUpdateFileName,
  #wrapTableFile .wrapUpdateFileName .btnCancelUpdateFileName {
    margin-top: 5px;
    cursor: pointer; }

#wrapTableFile .btnEditFileName {
  cursor: pointer; }

#wrapTableFile .fileSrc {
  display: inline-block;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
  float: left; }

#wrapTableFile .btnEditStatus {
  display: inline; }

#wrapTableFile .wrapUpdateStatus {
  display: flex;
  float: left; }
  #wrapTableFile .wrapUpdateStatus.hide {
    display: none; }
  #wrapTableFile .wrapUpdateStatus .wrapStatus {
    margin-top: 5px; }
    #wrapTableFile .wrapUpdateStatus .wrapStatus select {
      border: 1px solid #E4EAEE;
      border-radius: 3px;
      color: #76838f;
      font-size: 12px;
      padding: 3px; }
  #wrapTableFile .wrapUpdateStatus .btnSaveUpdateStatus,
  #wrapTableFile .wrapUpdateStatus .btnCancelUpdateStatus {
    margin-top: 5px; }

#pAccountSid {
  margin-bottom: 0px; }
  #pAccountSid .titleAccountSid {
    font-weight: 400;
    margin-right: 20px; }
  #pAccountSid .contentAccountSid {
    font-family: monospace;
    font-weight: 200;
    font-size: 16px; }

.spanEmpty {
  color: #bfbfbf; }

#wrapTotal {
  float: right;
  position: relative;
  margin-left: 30px;
  display: flex; }
  #wrapTotal p {
    margin-top: 5px; }
  #wrapTotal:before {
    content: '';
    background: #e4eaec;
    width: 1px;
    height: 70px;
    top: -12px;
    left: -12px;
    position: absolute; }
  #wrapTotal img {
    margin-bottom: 5px;
    width: auto;
    height: 35px; }

#tabCategoryContentNew .col-6 {
  float: left; }

#wrapUpdateCat {
  background: #f1f4f5;
  padding-top: 20px; }
  #wrapUpdateCat #closeUpdateCat {
    position: absolute;
    right: 11%;
    font-weight: 400;
    font-size: 15px;
    color: red;
    top: 28px;
    cursor: pointer; }

#wrapDetailPayment #closePaymentDetail {
  position: absolute;
  right: 15px;
  font-weight: 400;
  font-size: 15px;
  color: red;
  top: 28px;
  cursor: pointer; }

#wrapDetailPayment span.paymentId {
  color: #f22233; }

#wrapDetailPayment .titleTd {
  font-weight: 400;
  background: #fafafa;
  width: 200px; }

.setNoHover:hover {
  background: none !important; }

#wrapToken {
  border: 1px solid #ced7db;
  background: #fcfcfc;
  font-size: 12px;
  padding: 15px;
  padding-right: 40px;
  font-weight: 400;
  position: relative; }
  #wrapToken h4 {
    color: #95a4ab;
    font-size: 14px;
    margin-bottom: 5px; }
  #wrapToken #showToken {
    overflow-wrap: break-word;
    color: #5a5a5a; }
  #wrapToken .iconCopy {
    position: absolute;
    right: 15px;
    top: 40px; }

#modalSettingURL .modal-body {
  padding: 0px; }

.wrapBtnProject .btnEditProject, .wrapBtnProject .btnDeleteProject {
  cursor: pointer; }

.wrapActionUpdateProject {
  margin-top: 7px;
  font-weight: 400; }

.projectNumbers .number {
  display: table;
  font-weight: 500; }

.paymentMethod .textSMSLogPayment {
  font-weight: 400;
  font-size: 14px;
  color: #76838f; }

#formAddNumber .form-control-label {
  font-weight: 400;
  color: #5d5d5d;
  padding: 0px; }

/*
* Snippet CSS checkbox
*/
/* Customize the label (the container) */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer; }

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee; }

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc; }

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #46be8a; }

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none; }

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block; }

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 6px;
  width: 8px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg); }

.labelCheckbox {
  font-size: 17px;
  color: #76838f; }

.btnRightCorner {
  position: absolute;
  right: 30px;
  top: 15px;
  display: flex; }
  .btnRightCorner .btn {
    display: inline-table; }

li.resp-tab-item span .pic.disabled {
  cursor: no-drop; }

.wrapOrderBy {
  display: flex;
  line-height: 30px; }
  .wrapOrderBy .btnCancel {
    background: none;
    border: none;
    display: none;
    cursor: pointer; }
  .wrapOrderBy .btnSave {
    display: none;
    cursor: pointer; }
  .wrapOrderBy .textOrderBy {
    font-weight: 500;
    margin-right: 10px; }
  .wrapOrderBy .btnSetting {
    cursor: pointer; }
  .wrapOrderBy .inputOrderBy {
    font-weight: 500;
    padding: 4px 8px;
    display: none;
    margin-right: 10px; }

.onloadAjax .success {
  background: #fff;
  opacity: .7; }

#noteConfirmDeleteProject span.number {
  display: flex;
  border: 1px dashed #cccccc;
  margin-bottom: 5px;
  padding-left: 10px;
  color: #003c6f;
  font-weight: 500; }

.list-group {
  margin: 0;
  padding-right: 15px; }

.list-group .avatar {
  width: 62px; }

.list-group .card {
  margin-bottom: 15px; }

.list-group .card-block {
  -webkit-transition: border .2s linear, color .2s linear, width .2s linear, background-color .2s linear;
  -o-transition: border .2s linear, color .2s linear, width .2s linear, background-color .2s linear;
  transition: border .2s linear, color .2s linear, width .2s linear, background-color .2s linear; }

.list-group .card-block:hover {
  cursor: pointer;
  background-color: #eee; }

.card-shadow {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.008), 0px -1px 1px rgba(0, 0, 0, 0.05); }

.box-shadow-1 {
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.05), 0 2px 3px 0 rgba(0, 0, 0, 0.019) !important; }

.wrap_project h5 {
  color: #242f35; }

.wrap_project .app-item {
  display: flex; }
  .wrap_project .app-item span {
    margin-right: 4px; }
  .wrap_project .app-item .app-name {
    margin-top: 2px; }

.wrap_project a:hover {
  text-decoration: none; }

.wrap_project .list-group-item .card-block:hover {
  background-color: #f5f5f5; }

.wrap-header-app {
  display: flex; }
  .wrap-header-app .app-logo {
    margin-right: 15px;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.12); }
    .wrap-header-app .app-logo span {
      color: #00bfa5;
      font-weight: 500; }
  .wrap-header-app .app-text .app-name {
    font-weight: 500;
    color: rgba(0, 0, 0, 0.87);
    max-width: 160px;
    text-overflow: ellipsis;
    overflow: hidden; }
  .wrap-header-app .app-text .app-sub-name {
    font-size: 90%;
    color: #76838f;
    max-width: 160px;
    text-overflow: ellipsis;
    overflow: hidden; }

.position-relative {
  position: relative; }

.no-shadow {
  box-shadow: none; }

.wrapOption {
  position: absolute;
  right: 15px; }

.panel-list-app {
  display: flex; }
  .panel-list-app .left-aside {
    top: 0;
    bottom: 0;
    width: 260px;
    overflow-y: hidden;
    background: #fff;
    border-right: 1px solid #e4eaec;
    -webkit-transition: visibility .1s ease,top .3s ease,left .5s ease,right .5s ease;
    -o-transition: visibility .1s ease,top .3s ease,left .5s ease,right .5s ease;
    transition: visibility .1s ease,top .3s ease,left .5s ease,right .5s ease; }
    .panel-list-app .left-aside .list-group {
      margin-bottom: 0px;
      padding-right: 0px; }
  .panel-list-app .page-aside-title {
    color: rgba(0, 0, 0, 0.54);
    margin-bottom: 0px;
    padding: 10px 20px; }
  .panel-list-app .page-aside-section:first-child {
    padding-top: 0px; }
  .panel-list-app .page-aside-section:after {
    margin: 10px 0px; }
  .panel-list-app .list-group-item.active {
    border-radius: 0px; }
    .panel-list-app .list-group-item.active .wrap-header-app .app-logo {
      border: 1px solid #fff; }
      .panel-list-app .list-group-item.active .wrap-header-app .app-logo span {
        color: #fff; }
    .panel-list-app .list-group-item.active .wrap-header-app .app-text .app-name {
      color: #fff; }
    .panel-list-app .list-group-item.active .wrap-header-app .app-text .app-sub-name {
      color: #fff; }
  .panel-list-app .list-group-item:hover {
    background-color: #f3f7f9; }
  .panel-list-app .detail-app .form-group {
    margin-bottom: 0px; }
    .panel-list-app .detail-app .form-group .title-app {
      display: block;
      padding: 10px 0px;
      margin-bottom: 0px; }
    .panel-list-app .detail-app .form-group .value-app {
      display: flex;
      font-weight: 400;
      color: #000;
      font-size: 16px;
      word-break: break-all;
      width: 600px; }
  .panel-list-app .wrapEdit {
    display: none; }
    .panel-list-app .wrapEdit input {
      width: 220px;
      margin-right: 10px; }
  .panel-list-app .wrapFlex {
    display: flex; }
    .panel-list-app .wrapFlex a {
      display: flex;
      padding-top: 5px;
      margin-right: 10px; }
      .panel-list-app .wrapFlex a img {
        margin-top: 4px;
        margin-right: 3px; }

#modalUploadAPN .form-group {
  margin-bottom: 5px; }
  #modalUploadAPN .form-group .form-control-label {
    padding-left: 0px;
    color: rgba(0, 0, 0, 0.54);
    font-weight: 400; }

/********INPUT FILE********/
.inputfile-box {
  position: relative;
  background-color: #eeeeee;
  padding: 10px 10px 5px 10px; }
  .inputfile-box .inputfile {
    display: none; }
  .inputfile-box .wrap-input {
    display: flex; }
    .inputfile-box .wrap-input #file-name {
      width: 80%;
      line-height: 36px;
      color: rgba(0, 0, 0, 0.38);
      font-size: 16px;
      font-weight: 400;
      white-space: nowrap;
      text-overflow: ellipsis; }
      .inputfile-box .wrap-input #file-name.selected {
        color: rgba(0, 0, 0, 0.87); }
      .inputfile-box .wrap-input #file-name .icon {
        color: rgba(0, 0, 0, 0.54);
        margin-right: 8px; }
    .inputfile-box .wrap-input .file-button {
      width: 20%;
      color: #039be5;
      border: none;
      font-weight: 500;
      text-transform: uppercase;
      line-height: 24px; }
      .inputfile-box .wrap-input .file-button:hover {
        background: rgba(3, 155, 229, 0.122); }

#modalUploadAPN .form-group.has-danger {
  margin-bottom: -25px; }

.box-shadow-2 {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); }

/********INPUT FILE********/
#tableRatingTable td {
  word-break: break-all; }

.formInsideSmallMargin .form-control-label {
  padding-bottom: 0px;
  font-weight: 400; }

.formInsideSmallMargin .form-group {
  margin-bottom: 3px; }
  .formInsideSmallMargin .form-group.has-danger {
    margin-bottom: -18px; }
    .formInsideSmallMargin .form-group.has-danger .form-control-label.text-danger {
      margin-top: -5px; }

#tableTopup tr td:first-child {
  font-weight: 400;
  background: #fafafa;
  width: 50%; }

.wrapTopup .form-group:first-child {
  width: calc(50% - 20px); }
  .wrapTopup .form-group:first-child button {
    width: 100%; }

.wrapTopup .form-group:last-child {
  width: 50%; }
  .wrapTopup .form-group:last-child input {
    width: 100%; }

.wrapFlex {
  display: flex; }

.wrapDir .wrapFlex label {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 400;
  color: #a3afb7; }
  .wrapDir .wrapFlex label i {
    color: #e0e0e0; }

.wrapDir .wrapFlex input {
  font-size: 16px;
  border-top: none;
  border-left: none;
  border-right: none; }

.list-style-none {
  list-style: none; }

.word-break-all {
  word-break: break-all; }

.site-menu-arrow {
  right: 20px; }

#formUpload .form-group.has-danger {
  margin-bottom: -25px !important; }

.select2-container--default {
  width: 100% !important; }

.fw-400 {
  font-weight: 400; }

.wrapTools .panel-title {
  font-size: 20px !important; }
  .wrapTools .panel-title:after, .wrapTools .panel-title:before {
    content: ''; }
  .wrapTools .panel-title a {
    text-decoration: none; }

.wrapTools .linkReference {
  color: #000;
  text-decoration: none; }
  .wrapTools .linkReference img {
    float: right; }

.wrapTools .linkDownloadPrice {
  color: #34bcd6;
  text-decoration: none; }
  .wrapTools .linkDownloadPrice img {
    float: right; }

.wrapTools .panel-body {
  border: 1px solid #e4eaec; }

.wrapSelectBrandname {
  display: flex; }
  .wrapSelectBrandname .radio-custom {
    margin-right: 20px; }

.display-none {
  display: none; }

.wrapSmsWithParam {
  display: flex; }
  .wrapSmsWithParam input {
    width: 100px;
    margin-left: 10px;
    margin-right: 10px;
    border-left: none;
    border-right: none;
    border-top: none;
    padding-left: 2px;
    padding-right: 2px;
    height: 25px; }

.p_expired {
  position: absolute;
  top: 12px;
  color: #263238;
  padding: 10px 20px;
  margin-left: 15px;
  background: #FFEB3B;
  font-weight: 400; }
  .p_expired a {
    color: #f22233; }

.close_expired {
  position: absolute;
  right: -10px;
  top: -8px;
  cursor: pointer; }

.display-flex {
  display: flex; }

.info_free {
  background: #009688;
  color: white;
  padding: 10px;
  font-weight: 500;
  margin-bottom: 10px; }
  .info_free a {
    color: #FFEB3B; }

.item-left-trial a {
  color: #3e3e3e !important; }
  .item-left-trial a:hover {
    background: #fff !important;
    cursor: initial !important; }

.wrap_package {
  /* CSS-only ribbon styles    */ }
  .wrap_package .panel {
    text-align: center; }
  .wrap_package .panel:hover {
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px 5px rgba(130, 130, 130, 0.35); }
  .wrap_package .panel-body {
    padding: 0px;
    text-align: center; }
  .wrap_package .the-price {
    background-color: rgba(220, 220, 220, 0.17);
    box-shadow: 0 1px 0 #dcdcdc, inset 0 1px 0 #fff;
    padding: 20px;
    margin: 0; }
  .wrap_package .the-price h1 {
    line-height: 1em;
    padding: 0;
    margin: 0; }
  .wrap_package .subscript {
    font-size: 25px; }
  .wrap_package .cnrflash {
    /*Position correctly within container*/
    position: absolute;
    top: -9px;
    right: 4px;
    z-index: 1;
    /*Set overflow to hidden, to mask inner square*/
    overflow: hidden;
    /*Set size and add subtle rounding  		to soften edges*/
    width: 100px;
    height: 100px;
    border-radius: 3px 5px 3px 0; }
  .wrap_package .cnrflash-inner {
    /*Set position, make larger then 			container and rotate 45 degrees*/
    position: absolute;
    bottom: 0;
    right: 0;
    width: 145px;
    height: 145px;
    -ms-transform: rotate(45deg);
    /* IE 9 */
    -o-transform: rotate(45deg);
    /* Opera */
    -moz-transform: rotate(45deg);
    /* Firefox */
    -webkit-transform: rotate(45deg);
    /* Safari and Chrome */
    -webkit-transform-origin: 100% 100%;
    /*Purely decorative effects to add texture and stuff*/
    /* Safari and Chrome */
    -ms-transform-origin: 100% 100%;
    /* IE 9 */
    -o-transform-origin: 100% 100%;
    /* Opera */
    -moz-transform-origin: 100% 100%;
    /* Firefox */
    background-image: linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.1) 50%), linear-gradient(0deg, transparent 0%, rgba(1, 1, 1, 0.2) 50%);
    background-size: 4px,auto, auto,auto;
    background-color: #aa0101;
    box-shadow: 0 3px 3px 0 rgba(1, 1, 1, 0.5), 0 1px 0 0 rgba(1, 1, 1, 0.5), inset 0 -1px 8px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 0 rgba(255, 255, 255, 0.2); }
  .wrap_package .cnrflash-inner:before, .wrap_package .cnrflash-inner:after {
    /*Use the border triangle trick to make  				it look like the ribbon wraps round it's 				container*/
    content: " ";
    display: block;
    position: absolute;
    bottom: -16px;
    width: 0;
    height: 0;
    border: 8px solid #800000; }
  .wrap_package .cnrflash-inner:before {
    left: 1px;
    border-bottom-color: transparent;
    border-right-color: transparent; }
  .wrap_package .cnrflash-inner:after {
    right: 0;
    border-bottom-color: transparent;
    border-left-color: transparent; }
  .wrap_package .cnrflash-label {
    /*Make the label look nice*/
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    padding-bottom: 5px;
    color: #fff;
    text-shadow: 0 1px 1px rgba(1, 1, 1, 0.8);
    font-size: 0.95em;
    font-weight: bold;
    text-align: center; }

.tableplan ul {
  padding-left: 0px; }

.tableplan li {
  list-style: none; }

.tableplan {
  width: 100%;
  background: #FFF; }

.tableplan-block {
  position: relative;
  width: 100%;
  background: #FFF;
  border-radius: 5px;
  top: 10px;
  z-index: 9; }

.tableplan-bg {
  position: relative;
  float: left;
  width: 100%;
  /* background: #FFF; */
  border-radius: 5px; }

/*.tableplan-blockin{ float: left; width: calc(100% - 50px); padding:45px 0 0 50px;}*/
.tableplan-blockin {
  width: 90%;
  margin: auto; }

.plan-tab {
  float: left;
  width: 100%;
  height: 40px;
  background: #f3f3f3;
  border-radius: 20px;
  margin-bottom: 30px; }

.plan-tab li {
  float: left;
  width: 25%;
  font-size: 16px;
  color: #010101;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  border-radius: 20px; }

.plan-tab li .sale {
  font-size: 12px;
  color: #ff6600; }

.plan-tab li.active {
  background: #263238;
  color: #FFF; }

.plan-tab li.active .sale {
  color: #FFF; }

.planitem {
  float: left;
  width: calc((100% - 60px) / 3);
  margin-right: 30px;
  background: #FFF;
  padding-bottom: 30px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15); }

.planitem:nth-child(3) {
  margin-right: 0; }

.plan-head, .plan-head-un {
  float: left;
  width: 100%;
  background: #288feb;
  text-align: center;
  padding: 20px 0;
  color: #FFF; }

.free .plan-head, .free .plan-head-un {
  background: #f5f5f5;
  color: #555; }

.free .plan-head-un {
  background: #f1f1f1; }

.free .plan-head .price-number {
  font-weight: 400; }

.free .plan-head .plan-name {
  color: #555;
  border-color: #555; }

.plan-head .plan-name {
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  color: #FFF;
  border-bottom: 1px #FFF solid;
  padding-bottom: 4px;
  text-transform: uppercase; }

.plan-head .price-number {
  display: block;
  font-size: 50px;
  font-weight: 700;
  padding-top: 10px; }

.plan-head-un {
  background: #53a5ef;
  font-size: 18px;
  font-weight: 700;
  padding: 15px 0; }

.plan-feature li {
  float: left;
  width: 100%;
  border-bottom: 1px #f1f1f1 solid;
  padding: 15px 0;
  color: #1e1e1e;
  text-align: center; }

.plan-feature li:last-child {
  border-bottom: 0; }

.custom-plan {
  float: left;
  width: 100%;
  margin-top: 40px;
  text-align: center; }

.custom-plan .arrow-right {
  font-size: 16px; }

.plan-question {
  width: 100%;
  padding: 40px 0;
  background: #f8f9fa; }

.question-column {
  float: left;
  width: calc((100% - 50px) / 2);
  margin: 30px 50px 0 0; }

.question-column.right {
  margin-right: 0; }

.question-column li {
  position: relative;
  float: left;
  width: 100%;
  padding: 10px 0 20px 0; }

.question-column .qs-title {
  float: left;
  width: 100%;
  border-bottom: 1px #dbdbdb solid;
  padding-bottom: 18px;
  color: #333;
  font-size: 18px;
  cursor: pointer; }

.question-column .qs-title.less {
  border-color: #288feb;
  color: #288feb; }

.question-column .qs-details {
  position: relative;
  float: left;
  width: calc(100% - 30px);
  padding-left: 15px;
  color: #1e1e1e;
  font-size: 16px;
  line-height: 24px;
  margin-top: 12px;
  display: none; }

.plan-compare {
  width: 100%;
  background: #FFF;
  padding: 0 0 50px 0;
  display: none; }

.table-compare {
  width: 100%;
  border: 0;
  padding: 0;
  margin: 0; }

.table-compare td, .table-compare th {
  padding: 14px 15px;
  font-size: 14px;
  color: #4e4e4e;
  border-bottom: 1px #dfdfdf solid;
  text-align: left; }

.table-compare td .tick {
  color: #67b001;
  font-size: 16px; }

.table-compare thead th {
  background: #f5f5f5;
  font-size: 18px;
  font-weight: 700; }

.table-compare thead th.name {
  width: 20%;
  background: #1890FF;
  text-transform: uppercase;
  color: #FFF;
  font-weight: 700;
  text-align: center;
  border-left: 1px #FFF solid; }

.table-compare thead th.name.free {
  background: #b6dcff;
  color: #555;
  font-weight: 400; }

.table-compare td.title {
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 700; }

.table-compare td.name {
  width: 20%;
  text-align: center; }

.table-compare td.name.free {
  background: #F9F9F9; }

#open-details {
  font-size: 20px; }

.plan-content {
  clear: both; }
  .plan-content .pricing-table {
    width: 100%; }
    .plan-content .pricing-table .pricing-price {
      font-size: 25px; }
    .plan-content .pricing-table .pricing-currency {
      margin-right: 0px;
      font-size: 12px;
      margin-top: 8px; }
    .plan-content .pricing-table .pricing-amount {
      font-size: 25px; }

.trial-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  padding-top: 35px;
  /*padding-right: 120px;*/
  padding-bottom: 25px;
  padding-left: 120px;
  background: white;
  /*  -webkit-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);*/
  z-index: 100; 
  overflow: hidden}

.trial-container .trial--top-label {
  position: relative;
  top: -2px;
  height: 20px;
  margin-bottom: -2px;
  font-size: 14px;
  line-height: 20px; }

.trial-container .trial--top-label strong {
  font-weight: bold; }

.trial-container .trial--top-label .description {
  color: #7F7F7F; }

.trial-container .trial--title {
  padding-right: 15px;
  color: #5D5D5D;
  font-size: 32px;
  font-weight: bold; }

.trial-container .trial--bar-container {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  width: 100%;
  padding-right: 160px; }

.trial-container .trial--bar-container .trial--bar {
  position: relative;
  min-width: 100px;
  height: 9px;
  margin-top: 25px;
  margin-bottom: 18px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
  font-size: 11px; }

.trial-container .trial--bar-container .trial--bar .trial--bar--content {
  -webkit-transition: width 0.3s ease-in-out;
  transition: width 0.3s ease-in-out;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 0%;
  border-radius: 100px; }

.trial-container .trial--bar--timecircle {
  display: block;
  position: absolute;
  top: -15px;
  left: -18px;
  /*width: 38px;*/
  height: 38px;
  /*border-radius: 50%;*/
  padding-left: 5px;
  padding-right: 5px;
  background: #FFFFFF;
  color: #5D5D5D;
  text-align: center; }

.trial-container .trial--bar--timecircle strong {
  display: block;
  position: relative;
  top: 1px;
  font-size: 14px; }

.trial-container .trial--bar--timecircle span {
  position: relative;
  top: -10px;
  font-size: 9px; }

.trial-container .trial--bar--label {
  color: #BABABA;
  font-size: 14px; }

.trial-container .trial--bar--label--max {
  position: relative;
  left: -10px;
  float: left; }

.trial-container .trial--bar--label--min {
  position: relative;
  right: -10px;
  float: right; }

.trial-container .trial-upgrade-button {
  display: block;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  min-width: 135px;
  height: 30px;
  margin-left: 10px;
  padding: 10px;
  border: 0;
  border-radius: 3px;
  outline: none;
  background-color: #4AC420;
  color: white;
  font-family: 'Mark';
  font-size: 10px;
  font-weight: 700;
  line-height: 13px;
  text-transform: uppercase;
  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  cursor: pointer; }

.trial-container .trial--bar-time-left-high .trial--top-label .highlighted {
  color: #4AC420; }

.trial-container .trial--bar-time-left-high .trial--bar--content {
  background-color: #4AC420; }

.trial-container .trial--bar-time-left-high .trial--bar--timecircle {
  border: 4px solid #4AC420; }

.trial-container .trial--bar-time-left-medium .trial--top-label .highlighted {
  color: #FF8403; }

.trial-container .trial--bar-time-left-medium .trial--bar--content {
  background-color: #FF8403; }

.trial-container .trial--bar-time-left-medium .trial--bar--timecircle {
  border: 4px solid #FF8403; }

.trial-container .trial--bar-time-left-low .trial--top-label .highlighted {
  color: #FF5624; }

.trial-container .trial--bar-time-left-low .trial--bar--content {
  background-color: #FF5624; }

.trial-container .trial--bar-time-left-low .trial--bar--timecircle {
  border: 4px solid #FF5624; }

.month_left_expired {
  font-size: 25px;
  float: right;
  font-style: italic; }
  .month_left_expired .text_month {
    font-size: 14px;
    color: #c0bcba; }

.price-style {
  font-size: 17px;
  font-weight: 500;
  color: #ff8100; }

#modalCart .xcomponent-outlet {
  width: 100% !important; }

#modalCart #btnBankCharge {
  background: #2C2E2F !important;
  font-weight: 500; }
  #modalCart #btnBankCharge:hover {
    background: #526069 !important; }

.bill_next_date {
  font-size: 16px; }

/*BLOG*/
.app-media .media-list.is-list .media-item {
  border-bottom: 1px solid #e4eaec;
  overflow: hidden; }
  .app-media .media-list.is-list .media-item:after {
    display: none !important; }

.app-media .media-list.is-list .info-wrap {
  vertical-align: initial; }

.app-media .media-list.is-list .image-wrap:before {
  display: initial !important; }

.app-notebook .page-aside .form-control {
  padding-right: 20px !important; }

.modal-xlg {
  width: 1100px;
  max-width: 1100px; }

.app-media .media-list .media-item {
  cursor: initial !important; }

.app-media .media-list .media-item-actions {
  display: block !important; }

@media (min-width: 768px) {
  /*#modalAddNumber{*/
  .modal-xl {
    width: 90%;
    max-width: 1200px; }
  /*}*/
  #modalChangePassword .modal-sm {
    max-width: 360px;
    width: 360px !important; } }






    
.fa-spin {
  -webkit-animation: fa-spin 2s linear infinite;
  animation: fa-spin 2s linear infinite;
}

.wrap-filter{
  background: #f9f9f9;
  padding: 15px;
  border: 1px solid #e4e4e4;
  border-radius: 5px;
}
.wrap-filter .form-inline{
  margin-bottom: 10px;
}

.wrap-filter .filter-label {
  width: 140px;
  font-weight: 500!important;
  font-size: 12px;
  text-align: left;
  -webkit-box-pack: left;
  -ms-flex-pack: left;
  justify-content: left;
}
.wrap-filter .filter-label.small{
  width:120px;
}

.wrap-filter .filter-content {
  width: 170px
}
.wrap-filter .filter-content .el-select,
.wrap-filter .filter-content .el-input,
.wrap-filter .filter-content .el-date-editor
{
  width: 100%;
}

.el-pagination{
  font-weight: 400 !important;
}

.wrap-table thead tr th{
  background: #f1f4f5;
  color: #656565;
  font-weight: 500 !important;
}

#stripe-form #card-element{
    padding: 10px;
    border: 1px solid #dcdfe6;
    border-radius: 3px;
}

#stripe-form #card-errors{
  color: #ff3838;
  font-size: 14px;
  padding: 5px;
}


.stringee-el-loading-parent--relative {
  position: relative!important;
}
.stringee-el-loading-mask {
  position: absolute;
  z-index: 2000;
  background-color: rgba(255,255,255,.93);
  margin: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}

.stringee-el-loading-spinner {
  top: 50%;
  margin-top: -21px;
  width: 100%;
  text-align: center;
  position: absolute;
}

.ds-btn-primary {
  outline: none;
  color: #fff;
  background-color: #009AFF;
  border-color: #009AFF;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.ds-btn-primary:disabled {
  background: #f0f0f0;
  border-color: #f0f0f0;
  color: #76838f
}
.modal { overflow: auto !important; }

.wrap-form-vertical{
  margin-top: 10px;
}
.wrap-form-vertical .form-group{
  margin-bottom: 5px;
}
.wrap-form-vertical label{
  font-weight: 500;
}
.wrap-form-vertical .value{
  font-weight: 400
}
.el-loading-mask{
  z-index: 1 !important;
}
[v-cloak] {display: none}

.page-sms .el-table__footer-wrapper{
  font-weight: bold;
}
.page-sms .el-table__footer-wrapper  .el-table_1_column_1 .cell{
  font-weight: 300;
}
.page-sms .cell{
  text-align: right;
}
.page-sms .el-table_1_column_1 .cell,
.page-sms .el-table_2_column_8 .cell {
  text-align: left;
}
.page-sms .el-table__footer-wrapper .cell{
  color: #ea9c28;
  font-weight: bold;
}
#viewasrole{
  position: absolute;
  z-index: 1000000;
  width: 50%;
  margin-bottom: 0px;
  font-weight: bold;
  padding-right: 15px;
  left: 30px;
}