/* show spinner upon submit */
.submit_spinner {
    display: none;
}

.selectize-dropdown-content .country-item {
    padding: 5px;
}

@media (max-width: 400px) {
    .profiling-steps {
        width: 360px;
        margin: auto !important;
    }
}
@media (min-width: 401px) {
    .profiling-steps {
        width: 580px;
        margin: auto !important;
    }
}
@media (max-width: 767px) {
    .profiling-steps {
        width: 360px;
        margin: auto !important;
        margin-top: 50px !important;
    }
}

.profiling-wrapper {
    min-height: 756px;
    margin-left: 0px !important;
    z-index: 840;
    padding-top: 50px;
    background-color: #ecf0f5;
    transition: transform .3s ease-in-out,margin .3s ease-in-out;
}

.profiling-wrapper #profiling-step4 .form-group {
    /* under profiling steps 4, Q&A session, we changed form's format, therefore we need to custom the form */
    margin-left: 15px !important;
    margin-right: 15px !important;
}

.profiling-wrapper .form-horizontal .checkbox {
    margin-right: 0px !important;
}

.form-sub-group {
    margin-left: 20px;
}

.form-sub-group label {
    font-weight: normal !important;
}

/* .form-sub-group.required .control-label:before {
    content: " *";
    color: red;
} */

.logo-lg {
	box-sizing: content-box !important;
	-webkit-box-sizing: content-box !important;
	white-space: nowrap;
	font-size: 16pt;
	font-family: 'Poppins' !important;
}

.main-header .logo {
	padding: 0px;
}

.invalid-feedback {
	color: indianred;
}

.skin-blue .main-header .logo {
	background-color: unset;
}

.skin-blue .wrapper, .skin-blue .main-sidebar, .skin-blue .left-side {
    background-color: #1b1c1d;
}

.btn-primary {
    background-color: rgb(95, 96, 97);
    border-color: rgb(95, 96, 97);
}

.btn-primary:hover, .btn-primary:active, .btn-primary.hover {
    background-color: #ed2525;
    border-color: #ed2525;
}

.btn-primary.focus, .btn-primary:focus {
    background-color: #ed2525;
    border-color: #ed2525;
}

.skin-blue .sidebar-menu>li:hover>a, .skin-blue .sidebar-menu>li.active>a, .skin-blue .sidebar-menu>li.menu-open>a {
    color: #fff;
    background-color: unset !important;
    /*background-color: #ffffff0f; */
}

.skin-blue .sidebar-menu>li>.treeview-menu {
    margin: 0 1px;
    background: #1b1c1d;
    margin-left: 21px;
}


/* 201011 for toast msg */
.close {
    margin-left: 12px;
    margin-top: -2px;
}

.custom_toast {
    position: fixed;
    right: 50px;
    margin-left: 1rem;
    z-index: 1090;
}

.toast {
    box-shadow: 0 2px 6px rgba(0,0,0,0.47);
    padding: 10px 15px !important;
    margin-bottom: 15px !important;
    max-width: 520px;
    float: right;
    clear: right;
}

.alert-white {
    background-color: white;
}

.model-content {
    box-shadow: 0 2px 6px rgba(0,0,0,0.47);
}

/* 201011 end for toast msg */

.form-horizontal .control-label.text-left{
    text-align: left !important;
}
/*
.form-horizontal .control-label.text-left{
AND
.form-horizontal .control-label .text-left{
Both are different!!!!!
*/

.form-horizontal .checkbox, .form-horizontal .radio {
    /* 220330 commented following due to default checkbox class behaviour overridden */
    /* display:inline-block; */
    margin-right: 10px;
}

.fix-width-textarea {
    resize: vertical;
}

.skin-blue .sidebar-menu .header {
    color: #fff;
    background: #1b1c1d;
    font-size: 13px;
}

.skin-blue .sidebar-menu .treeview-menu>li>a {
    color: rgba(255,255,255,.5);
}

.skin-blue .sidebar a {
    color: #d2d2d2;
}

.skin-blue .sidebar-menu .treeview-menu>li.active>a, .skin-blue .sidebar-menu .treeview-menu>li>a:hover {
    background: #313131;
}

.create_company_modal .modal-dialog,
.create_contactgroup_modal .modal-dialog,
.create_contactlist_modal .modal-dialog,
.add_ip_modal .modal-dialog,
.edit_ip_modal .modal-dialog,
.showPreapprovedList_modal .modal-dialog,
#dataModal .modal-dialog {
    width: 70%;
    margin: auto;
    margin-top: 30px;
}



/*
To make normal msg form submittion spinner stay in the middle of the screen
https://stackoverflow.com/questions/18422223/bootstrap-3-modal-vertical-position-center
*/
#spinner_gif .modal {
  text-align: center;
}

@media screen and (min-width: 768px) {
    #spinner_gif .modal:before {
        display: inline-block;
        vertical-align: middle;
        content: " ";
        height: 100%;
    }
}

#spinner_gif_modal .modal-dialog {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    width: auto;    /* dynamic width */
}




.media_preview_modal .modal-dialog {
    width: 50%;
    margin: auto;
}

.login-box .modal-dialog {
    margin: auto;
}

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    outline: 0;
}

.modal {
    background: unset;
}

.text-md-right {
    text-align: right;
}

.form-group.required .control-label:after {
  content:" *";
  color:red;
}

.box-header.with-border {
    border-top: 1px solid #f4f4f4;
}

a.disabled {
  pointer-events: none;
  cursor: default;
  color:grey;
}

.timeline>li>.timeline-item>.timeline-header {
    font-size: 18px;
}

.timeline>li>.fa, .timeline>li>.glyphicon, .timeline>li>.ion {
    width: 35px;
    height: 35px;
    font-size: 18px;
    line-height: 35px;
    position: absolute;
    color: #666;
    background: #d2d6de;
    border-radius: 50%;
    text-align: center;
    left: 15px;
    top: 2px;
}

.modal-danger a {
    color: white;
    text-decoration: underline;
}

.skin-blue .main-header .navbar, .guest-page .main-header .navbar{
    background-color: rgb(27, 28, 29);
}

.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    opacity: unset;
    color: rgba(255,255,255,.5);
}

.main-header .logo .logo-lg {
    display: block;
    background-color: rgb(27, 28, 29)
}

.guest-page {
    height: auto;
    background: #d2d6de;
}

.navbar-nav {
    margin-right: 20px;
}


#importModal {
    width: 900px;
    margin: 30px auto;
}

#dvMsg td, #dvExcel td {
    max-width: 500px;       /* If excel file content contains long text without space, design will gone, this is the fix */
    word-wrap: break-word;
}

.skin-blue .sidebar-menu>li.active>a {
    border-left-color: red;
}

.info-box-text2 {
    display: block;
    font-weight: bold;
    font-size: 18px;
    text-transform: uppercase;
}

.info-box-number2 {
    display: block;
    /*font-weight: bold;*/
    font-size: 16px;
}

#profiling-box, #sms-box {
    cursor: pointer;
}

.skin-blue .main-header .navbar .sidebar-toggle:hover {
    background-color: #631515;
}

.skin-blue .main-header .logo:hover {
    background-color: #631515;
}

.bg-yellow, .callout.callout-warning, .alert-warning, .label-warning, .modal-warning .modal-body {
    background-color: #de9116e3 !important;
}

.bg-aqua, .callout.callout-info, .alert-info, .label-info, .modal-info .modal-body {
    background-color: #00c0efd9 !important;
}

.bg-green, .callout.callout-success, .alert-success, .label-success, .modal-success .modal-body {
    background-color: #00a65ae0 !important;
}

.bg-red, .callout.callout-danger, .alert-danger, .alert-error, .label-danger, .modal-danger .modal-body {
    background-color: #dd4b39e8 !important;
}

aside.note {
    background: #e1f5fe;
    color: #01579b;
    display: block;
    font-size: 14px;
    margin: 5px 0px 16px 0px;
    padding: 12px 20px 12px 20px;
}

aside.danger_note {
    background: #f9f2f4;
    color: #c7254e;
    display: block;
    font-size: 14px;
    margin: 5px 0px 16px 0px;
    padding: 12px 20px 12px 20px;
}

aside.note_gray {
    background: #ececec;
    color: #01579b;
    display: block;
    font-size: 16px;
    font-style: italic;
    overflow-wrap: break-word;
    margin: 5px 0px 16px 0px;
    padding: 12px 20px 12px 20px;
}

/* Developer Center Updated date */
.box-header .pull-right {
    color: #999;
}

.documents-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

/* MK241202 Not sure why we change this, developer page, pricing, support page title not same as other page; because we want to make it bigger than the title in box title?  */
/* .developer h1 {
    font-size:30px;
} */

.developer h3 {
    /*margin-bottom:20px;*/
}

.developer .box-title {
    font-size:24px;
}

.developer, .developer p {
    font-size:16px;
}

.developer p {
    margin-bottom: 18px;
}

.developer .content-segment{
    margin-bottom: 50px;
}

.developer .copyToClipboard {
    float: right;
}

.developer .codeBlock {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.developer, .developer p {
    font-size: 17px;
}

.developer aside {
    font-size: 16px;
}

.anchor_spot {
    padding-top: -60px;
    margin-top: 60px;
}

/*html {
  scroll-behavior: smooth;
}*/

/*code-red*/
.cred {
    color:red;
}

/*code-green*/
.cgreen {
    color:green;
}

.cyellow {
    color:yellow;
}

.cblue {
    color:blue;
}

.cblack {
    color:black;
}

.corange {
    color:orange;
}

.cpink {
    color: #ff00af;
}

nav .note {
    color:red;
    margin-left:10px;
}

nav.developer-nav{
  position: fixed;right: 0;top: 11.2rem;
  z-index: 1;
  /* width: 30% !important; */
  ul{
    margin:200px;
    padding:0;
    list-style:none;
    position:relative;
    display:table;
    margin:0 auto;
    li{
      display:table-cell;
      a{
        padding:10px 20px;
        display:block;
        color:white;
        text-decoration:none;
        transition:all 0.3s ease-in-out;
        &:hover{
          color:#F38A8A;
        }
       }


    }

  }
}

nav.developer-nav div.active{
    color:#F38A8A;
    border-color:#8fb5ca;
}

.dropdown-menu>li>a {
    /* color: #4a4a4a; */
    font-size: 14px ;
}

.info-box-text {
    display: unset;
}

/*.my_configurations>checkbox {
    margin-top:100px;
}*/

.btn-floating {
    /* If you change color here, you need to change under js/jquery-fab-button.js */
    background-color: #ed2525;
}
.btn-floating:hover {
    /* If you change color here, you need to change under js/jquery-fab-button.js */
    background-color: #5f6061;
}

.fixed-action-btn>ul {
    list-style-type: none;
    padding-left: 0px;
}

.horizontal>.fab-label {
    position: relative;
    top: 32px;
    right: 33px;
    background-color: gray;
    padding: 2px 5px;
}

.fab-label {
    text-align: right;
    position: relative;
    top: -36px;
    right: 118px;
    /*background-color: gray;*/
    padding: 2px 5px;
    width: 120px;
    height:65px;
    opacity: 0;
}

.fixed-action-btn ul li {
    height: 50px;
}

.label-text-content {
    /*background-color: green;*/
    display: inline-block;
    /* Let the div length same as content length */
    /*padding: 5px;*/
}

.dropdown-menu .btn {
    margin-left: unset;
    margin-right: unset;
}

.developer nav {
    box-shadow: unset;
}

img {
    max-width: 100%;
    max-height: 100%;
}

.user-img {
    width: 100%;
    max-width: 40px;
    height: auto;
}

.material-icons.md-12 { font-size: 12px; }
.material-icons.md-14 { font-size: 14px; }
.material-icons.md-16 { font-size: 16px; margin-left: -2px; margin-right:6px;}
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

.grecaptcha-badge{
    visibility: collapse !important;
}

.lead {
    margin-bottom: 5px !important;
    font-size: 21px !important;
}

hr {
  -moz-border-bottom-colors: none;
  -moz-border-image: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: #EEEEEE;
  border-style: solid none;
  border-width: 0.5px 0;
  margin: 18px 0;
}

.lockscreen-name {
    text-align: center;
    font-weight: 600;
}

.verify_mobile_modal .box-title {
    font-size: 28px;
}



.inbox-default-wrapper {
    max-width: 400px;
    margin: 0 auto;
    margin-top: 15%;
}

.inbox-default-text {
    color: #444;
    font-size: 35px;
    text-align: center;
    margin-bottom: 25px;
    font-weight: 300;
}

@media screen and (max-width: 992px) {
    .developer-nav {
        visibility: hidden;
    }
}

@media (max-width: 767px) {
    /* Add vertical space between div when in smaller screen */
    .sm-vertical-space {
        margin-bottom:10px;
    }

    .verify_mobile_modal {
        width: 70%;
        margin: auto;
        margin-top: 100px;
    }

    .crypto_pay_modal .modal-dialog,
    .crypto_pay_input_wallet_add_modal .modal-dialog{
        width: 70%;
        margin: auto;
        margin-top: 30px;
    }

    .login-default-wrapper {
        max-width: 400px;
        margin: 0 auto;
        margin-top: 200px;
    }

    .custom_toast {
        top: 12rem;
    }
}

@media (min-width: 768px) {
    .verify_mobile_modal .modal-dialog{
        width: 50%;
        margin: auto;
        margin-top: 100px;
    }

    .crypto_pay_modal .modal-dialog,
    .crypto_pay_input_wallet_add_modal .modal-dialog{
        width: 500px;
        margin: auto;
        margin-top: 30px;
    }

    .login-default-wrapper {
        max-width: 400px;
        margin: 0 auto;
        margin-top: 50%;
    }

    .custom_toast {
        top: 7rem;
    }
}

.login-box, .register-box {
    margin: 2% auto !important;
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    vertical-align: middle;
}

.direct-chat-text {
    max-width: 450px;
    display: inline-block;
    margin: 0px 0 0 10px;
}

.right .direct-chat-text {
    float: right;
    max-width: 450px;
    margin-right: 10px;
    margin-top: 0px;
}

.direct-chat-timestamp {
    margin: 0 5px;
}

.direct-chat-record {
    display: flex;
}

.direct-chat-record-right {
    display: flex;
    justify-content: flex-end;
}

.direct-chat-messages {
    height: 380px;
}

#compose_new_msg {
    margin-bottom: 10px;
}

.guest-page .main-header .navbar .nav>li>a {
    background: rgba(0,0,0,0.1);
    color: #fff;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    color: unset;
    background: #d2d6de !important;
}

.nav-pills>li.active>a>i, .nav-pills>li.active>a:focus>i, .nav-pills>li.active>a:hover>i {
    /*color: #fff;*/
}

.nav-stacked>li.active>a, .nav-stacked>li.active>a:hover {
    border-left-color: rgb(95, 96, 97);
}

.no-italics {
    font-style: normal !important;
}

.navigation_nav nav {
    box-shadow: unset;
}

.whatsapp_mo_1_img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 200px;
    height: 200px;
    border-radius: 5px;
    cursor: pointer;
}

.direct-chat-text {
    padding: 4px 4px;
}

.rate-col {
    min-width:110px;
    text-align:right;
}

.wallet_add {
  -ms-word-break: break-all;
  word-break: break-all;

  /* Non standard for webkit */
  word-break: break-word;
}

.slider.slider-horizontal{
    width:90%; /* sample value - set it as you like*/
}

.gray_box {
    padding: 9px;
    border-radius: 3px;
    /* min-height: 20px;  MK231214 this line affecting slideUp animation and causing it not smooth, the slideUp animation stop at min-height and then gone missing immediately */ 
    padding: 19px;
    /* margin-bottom: 20px;  MK231214 this line affecting slideUp animation and causing it not smooth, the slideUp animation stop at min-height and then gone missing immediately */ 
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

.center-page {
    -ms-flex-align: center;
    align-items: center;
    background-color: #e9ecef;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100vh;
    -ms-flex-pack: center;
    justify-content: center;
}

.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 0 solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
}

/* Hide the icon in web view */
.print-only {
display: none;
}


/* The content that should be printed when the 'Print' button is clicked */
@media print {
    /* we want to hide print button in print paper  */
    .hide-in-print {
      display: none;
    }

    .print-only {
        display: block; /* or any other appropriate display property */
    }

}

/* MK250424 For drag and drop overlay effect */
.dragndrop-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* semi-transparent background */
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    z-index: 9999; /* ensures it is above other elements */
}