/*perview*/
.bg-perview {
    background-color: #3f4547;
    border-radius: 40px;
    border: 4px double #8c8c8c;
    padding: .6rem;
    max-width: 350px;
    min-width: 300px;
    max-height: 90%;
    height: 630px;
    margin: 0 auto;
    box-sizing: border-box;
    box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.15);
    transition: .2s ease-in-out;
    animation: fadeInRight .3s ease 0s 1 normal both;
}

.dataTables_processing
{
    padding: 7px 0px 0px 0px !important;
}

.checkout-notification-new
{
    top: 6px !important;
    right: 13px !important;
    position: absolute !important;
}
.preview-content {
    background-color: #fff;
    border-radius: 28px;
    border: 1px solid #ccc;
    height: 100%;
    position: relative;
}

.c-message-preview__sensors {
    margin-top: -5px;
    text-align: center;
    height: 21px;
}

.c-message-preview__top {
    display: block;
    border-bottom: 1px solid #dbe1e5;
    text-align: center;
    padding: 0 .5rem;
    font-size: .9rem;
    font-weight: 600;
    height: 31px;
    line-height: 31px;
}

.preview-output-main {
    padding: 1rem;
    width: 100%;
    height: calc(100% - 21px - 31px - 5px);
    overflow: auto;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
}

.c-message-preview__content-item {
    font-size: 1rem;
    line-height: 1.5rem;
    color: #404040;
    position: relative;
    margin-bottom: 10px;
    word-break: break-word;
    word-wrap: break-word;
    width: 83%;
    box-sizing: border-box;
    white-space: pre-line;
    clear: both;
    background-color: #e7edf4;
    padding: 1rem;
    border-radius: .5rem;
    animation: fadeInLeft .3s ease 0s 1 normal both;
}

.c-message-preview__content-item::after {
    content: '';
    right: 100%;
    top: 24px;
    border: solid transparent;
    position: absolute;
    pointer-events: none;
    border-width: 8px;
    margin-top: -8px;
    border-right-color: #e7edf4;
}
/*radio-button*/

.s-radio {
    position: absolute;
    opacity: 0;
}

.s-radio--color-darker:checked+.s-label::before {
    border-color: #008ad4;
}

.s-radio:checked+label::before,
.s-radio:checked+.s-label::before {
    background-color: #fff;
    border: 2px solid #008ad4;
}

.s-radio--color-darker:checked+.s-label::after {
    background-color: #008ad4;
}

.s-radio:checked+label::after,
.s-radio:checked+.s-label::after {
    transform: scale(1) !important;
    opacity: 1 !important;
}

.s-radio-small+label::before,
.s-radio-small+.s-label::before {
    width: .75rem;
    height: .75rem;
    margin-right: .5rem;
}

.s-radio-small+label::after,
.s-radio-small+.s-label::after {
    width: .75rem;
    height: .75rem;
}

.s-radio-small+label,
.s-radio-small+.s-label {
    line-height: 15px;
}

.s-radio+label,
.s-radio+.s-label {
    position: relative;
    padding-left: 2rem;
    margin: 0;
    line-height: 22px;
}

.sending-recurring .recurring-setting-control {
    position: relative;
}

.s-radio+label::before,
.s-radio+.s-label::before {
    content: '';
    background: #fff;
    border-radius: 100%;
    border: 2px solid #b3b2b2;
    display: inline-block;
    width: 1.23rem;
    height: 1.23rem;
    position: absolute;
    margin-right: .5rem;
    cursor: pointer;
    transition: .3s;
    top: 0;
    left: 0;
}

.s-radio+label::after,
.s-radio+.s-label::after {
    content: '';
    display: block;
    position: absolute;
    width: 1rem;
    height: 1rem;
    left: 2px;
    top: 2px;
    border-radius: 100%;
    background-color: #008ad4;
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
    transition: .3s;
    box-sizing: border-box;
    border: 2px solid #fff;
}

/*checkbox-button*/

.s-checkbox+.s-label {
    display: inline-block;
    position: relative;
    cursor: pointer;
    margin: 0;
    line-height: 1rem;
    font-size: 15px;
    text-transform: capitalize;
}

.s-checkbox {
    position: absolute;
    opacity: 0;
}

.s-checkbox:checked+.s-label::before {
    background-color: #008ad4;
    border-color: #0079bb;
}

.s-checkbox+.s-label::before {
    position: relative;
    margin-right: .5rem;
    display: inline-block;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #b3b2b2;
    transition: .3s;
}

.s-checkbox+.s-label::before,
.s-checkbox+.s-label::after {
    content: '';
    width: 1rem;
    height: 1rem;
    -ms-flex: 0 0 1rem;
    flex: 0 0 1rem;
    left: 0;
    top: 2px;
    border-radius: 2px;
}

.s-checkbox:checked+.s-label::after {
    opacity: 1;
    -ms-transform: scale(1);
    transform: scale(1);
}

.s-checkbox+.s-label::after {
    position: absolute;
    font-family: FontAwesome;
    content: "\f00c";
    -ms-transform: scale(0);
    transform: scale(0);
    color: #fff;
    opacity: 0;
    transition: .3s;
    font-size: 12px;
    padding-left: 2px;
    font-weight: 300;
}
/*popover-model-css*/
.popover-close {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    z-index: 1400;
}

.popover-close::before {
    content: '×';
    color: #8c8c8c;
    font-size: 30px;
    transition-property: color;
    transition-duration: .3s;
    font-style: normal;
}

.popover-close:hover {
    background-color: #fff !important;
    font-weight: 500 !important;
    color: #333 !important;
}
.popover-close {
    background-color: #fff !important;
    font-weight: 500 !important;
    color: #333 !important;
}

.msg-send-close {
    color: #333;
    background-color: #fff;
}

.msg-send-close:hover {
    color: #333 !important;
    background-color: #fff !important;
}

.close.msg-send-close:hover {
    color: #333 !important;
}
/*image-upload*/
.upload-drop {
    display: table;
    width: 100%;
    max-width: 680px;
    border-radius: 4px;
    border: 1px dashed #008ad4;
    text-align: center;
    background-color: rgba(102, 110, 232, 0.05);
    position: relative;
    box-sizing: border-box;
    margin: 0 auto;
}

.upload-drop__icon {
    margin: 10px 0;
    font-size: 3rem;
    color: #008ad4;
}

.upload-drop__text {
    color: #404040;
    font-size: 14px;
    margin-bottom: 0.25rem;
    padding-top: 1rem;
}

.upload-drop__notice {
    color: rgba(73, 89, 103, 0.7);
    font-size: 12px;
    margin-bottom: 0;
}

.upload-drop__upload {
    display: block;
    margin: 20px auto 0;
    background-color: #008ad4;
    font-weight: 600;
    color: #FFF;
    font-size: 1rem;
    line-height: 36px;
    width: 128px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 10px;
}

.upload-drop__file {
    position: absolute;
    z-index: 1;
    height: 0;
    width: 0;
    top: 50%;
    left: 50%;
    overflow: hidden;
}

/*text-marketing-message*/
.trank-text {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 0;
    margin-top: 10px;
}

.context-text {
    font-size: 14px;
}

@media (min-width: 576px) {
    .mycustmodal-textmarketing,
    .img-dilog-textmarketing {
        max-width: 800px !important;
        margin: 1.75rem auto !important;
    }
}
.notfound-text {
    text-align: center;
    font-weight: 600;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    padding: 9px;
    border-radius: 3px;
}

.all-catagories {
    border: 1px solid #d4d4d4;
    display: block;
    border-radius: 3px;
    min-height: 30px;
    position: relative;
    background-color: #fff;
    cursor: pointer;
    height: 40px;
    margin-bottom: 10px;
    width: 350px;
    transition: border .3s;
}

.all-catagories select {
    width: 100%;
    height: 100%;
    padding-left: 1rem;
    padding-right: 4rem;
    font-weight: 400;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    font-size: 12px;
    outline: none;
    color: #D4D4D4;
    cursor: pointer;
    position: relative;
    transition: color .3s;
    z-index: 1;
}

/*model-table*/

.body-data .main-data:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.03);
}

.body-data .main-data {
    border-bottom: 1px solid #e1e1e1;
    padding: 5px;
}

.body-data .main-data td:nth-child(1) {
    width: 135px;
    padding-left: 11px;
}

.final-reminder,
.tbl-title {
    font-size: 13px;
}

.tbl-heading tr th {
    padding: 7px;
}

.rows-page select {
    width: 80px;
    margin-left: 10px;
}

.rows-page {
    display: flex;
    justify-content: flex-end;
}

.template-name input {
    width: 466px;
    margin: 10px 0 0 25px;
}

.quotation {
    font-style: italic;
    font-size: 12px;
    line-height: 23px;
    width: 466px;
    margin-bottom: 20px;
    margin: 10px 0 0 25px;
}

.done-btn {
    margin: 10px 0 0 25px;
}

.main-text-market .sending-spa-message {
    font-size: 18px;
    font-weight: 600;
}

.main-text-market {
    margin-bottom: 20px;
}

.main-text-market .msg-tag {
    width: 100%;
    height: 40px;
    padding: 0px 10px;
    border-radius: 5px;
    font-size: 15px;
    border: 1px solid #cccccc;
}

.main-text-market .bootstrap-tagsinput {
    width: 100%;
    height: 40px;
    color: #000;
    padding: 8px 6px;
    box-shadow: unset;
}

.main-text-market .bootstrap-tagsinput .tag {
    background-color: #167fc924;
    border: 1px solid #1581ca;
    padding: 0px 5px;
    border-radius: 5px;
    color: #1583ca;
}

/*.card {
    height: auto !important;
}*/

.msg-main-container {
    border: 1px solid #ccc;
    border-radius: 3px;
}

.msg-container {
    height: 42px;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid #ddd;
    margin: 1px 0px;
    padding: 4px 15px;
    width: 100%;
}

.msg-field {
    min-height: 125px;
    resize: none;
    width: 100%;
    border-top: 0px;
    margin: 0px;
    padding: 12px 15px;
    border-left: none;
    border-right: none;
    border-bottom: 0px;
}

/*message-toolbar*/

.toolbar-icon {
    border-top: 1px solid #ccc;
    line-height: 50px;
    margin-top: -6px;
    display: flex;
}

.toolbar-icon .toolbar-content {
    padding: 7px 12px;
    font-size: 18px;
    border-radius: 5px;
    color: #aaa;
    margin-left: 5px;
}

.toolbar-icon .toolbar-content:hover {
    background-color: #eee;
}

.toolbar.left {
    width: 50%;
    z-index: 0;
}

.toolbar.right {
    width: 50%;
    text-align: right;
}

.sms-num {
    margin-right: 5px;
}

.sms-text {
    border-radius: 3px !important;
    margin-right: 10px;
    background-color: #f2f2f2;
    padding: 2px 10px 5px !important;
    cursor: pointer;
    font-size: 14px !important;
}

.toolbar.right {
    width: 50%;
    text-align: right;
    font-size: 12px;
}

.personalization li.token-item {
    list-style: none;
    padding: 10px 0px 10px 10px;
    font-size: 14px;
}
.personalization ul.token-list {
    display: flex;
    margin: 0px;
    padding: 0px;
    align-items: center;
}
.personalization {
    border-top: 1px solid #ccc;
    display: flex;
    align-items: center;
}
.personalization-token {
    font-size: 14px;
    padding-left: 10px;
}
.hide-picker {
    display: none;
}

.preview-section-main {
    padding: 50px 0px;
}

/*select-option*/

.sending-recurring .recurring-setting h4 {
    font-size: 16px;
    line-height: 22px;
    color: #616161;
    margin: 0 0 15px;
    font-weight: normal;
}

.sending-recurring .recurring-setting {
    padding: 5px 0 15px;
    border-bottom: 1px solid #f2f2f2;
}

.sending-recurring .recurring-select {
    height: 42px;
    border-radius: 3px;
    border: 1px solid rgba(199, 199, 199, 0.51);
    background-color: #fff;
    position: relative;
}

.sending-recurring .recurring-select::before {
    font-family: FontAwesome;
    content: "\f078";
    position: absolute;
    font-size: 9px;
    top: 10px;
    right: 7px;
    height: 20px;
    line-height: 20px;
    color: #505050;
    z-index: 0;
}

.sending-recurring .recurring-select-with-lable::before {
    left: 25%;
}

.sending-recurring .recurring-select-origin {
    position: relative;
    z-index: 0;
    background: transparent;
    border: 0;
    width: 100%;
    height: 100%;
    color: #505050;
    font-size: 14px;
    outline: none;
    margin: 0;
    padding: 0 20px 0 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.recurring-select.recurring-select-with-lable {
    width: 110px;
    box-sizing: border-box;
}

.sending-recurring .recurring-select-label {
    float: right;
    border-left: 1px solid rgba(199, 199, 199, 0.51);
    line-height: 40px;
    width: 55%;
    text-align: center;
    color: #707070;
    font-size: 13px;
    font-weight: 400;
    background-color: #ebebeb;
    margin: 0;
    height: 100%;
    box-sizing: border-box;
    text-transform: capitalize;
    letter-spacing: 0px;
}

.recurring-select-origin.recurring-select-origin-with-lable {
    width: 45%;
    box-sizing: border-box;
}

.sending-recurring .recurring-setting-line {
    margin: 15px 0 10px;
}

.sending-recurring .recurring-setting-subline label {
    display: inline-block;
    margin-right: 10px;
    color: #7e7e7e;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0px;
}

span.recurring-setting-subline-span {
    font-size: 12px;
    color: #7e7e7e;
    font-weight: 600;
}

.sending-recurring .recurring-setting-input-small {
    border: 1px solid #d1d1d1;
    width: 40px;
    height: 26px;
    border-radius: 2px;
    text-align: center;
    font-size: 12px;
    margin-right: 10px;
}

.sending-recurring .recurring-setting-footer {
    border-top: 1px solid #f2f2f2;
    padding: 20px 0 0;
}

.sending-recurring .recurring-setting-footer-message {
    color: #505050;
    font-size: 12px;
    line-height: 17px;
    text-align: center;
    background-color: rgba(22, 177, 206, 0.16);
    border-radius: 3px;
    padding: 8px;
    margin: 0;
    display: block;
}

.recurring-setting-control-flex {
    display: flex;
    justify-content: space-between;
}

.recurring-select-origin.recurring-select-origin-with-lable.recurring-select-origin-with-lable-line {
    width: 100%;
}

.recurring-select.recurring-select-inline {
    display: inline-block;
    height: 26px;
    line-height: 24px;
}

.recurring-select.recurring-select-inline.recurring-select-inline-icon:before {
    top: 3px;
}
.s-radio-smaller+label::before,
.s-radio-smaller+.s-label::before {
    width: 15px;
    height: 15px;
}

.s-radio-smaller+label::after,
.s-radio-smaller+.s-label::after {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.s-radio-smaller+label,
.s-radio-smaller+.s-label {
    line-height: 13px;
}

.sms-block h5 {
    font-weight: 600;
    font-size: 15px;
    line-height: 13px;
}

.sms-block p {
    font-size: 12px;
    line-height: 20px;
}

.c-popover__footer.ng-star-inserted {
    text-align: center;
    border-top: 1px solid #ddd;
    padding: 15px 0px 0px;
}

.c-popover__footer.ng-star-inserted input.btn.btn-text {
    background-color: #fff;
    font-size: 12px;
    color: #008ad4;
    font-weight: 600;
}

.sms-img-block {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.sms-img-block img {
    width: 100px;
}

.sms-content {
    padding-left: 20px;
}

.s-radio-sms+label::before,
.s-radio-sms+.s-label::before {
    top: 30px;
}

.s-radio-sms+label::after,
.s-radio-sms+.s-label::after {
    top: 32px;
}

.picker-date input {
    border-radius: 5px;
    width: 32%;
    height: 42px;
    padding: 14px;
    border: 1px solid #ccc;
    color: #8a8a8a;
}

.recurring-setting-subline .custom-picker {
    border-radius: 3px;
    border: 1px solid #ccc;
    padding: 0px 10px;
    font-size: 12px;
    color: #8a8a8a;
}

/* Tooltip Styles */

.toolbar-icon [data-tooltip] {
    position: relative;
    z-index: 2;
    cursor: pointer;
}
.toolbar-icon [data-tooltip]:before,
.toolbar-icon [data-tooltip]:after {
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    pointer-events: none;
}
.toolbar-icon [data-tooltip]:before {
    position: absolute;
    bottom: 150%;
    left: 100%;
    margin-bottom: 5px;
    margin-left: -63px;
    padding: 7px;
    width: 80px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 7px;
    background-color: #000;
    color: #fff;
    content: attr(data-tooltip);
    text-align: center;
    font-size: 12px;
    line-height: 1.2;
}
.toolbar-icon [data-tooltip]:after {
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-left: -5px;
    width: 0;
    border-top: 5px solid #000;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    content: " ";
    font-size: 0;
    line-height: 0;
}
.toolbar-icon [data-tooltip]:hover:before,
.toolbar-icon [data-tooltip]:hover:after {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}

/*template*/

.table-data table.sending-message-starter-templates-table .btn-template {
    color: #fff;
    background-color: #008ad4;
}

.table-data table.sending-message-starter-templates-table .btn-template:hover {
    color: #fff;
    background-color: #008ad4;
}

.table-data table.template-section td.temp-title {
    font-size: 15px;
    font-weight: 400;
}

.table-data table.template-section td.final-reminder {
    font-size: 12px;
    font-weight: 400;
    padding: 6px;
}

.table-data ul.pg-item a.page-link {
    color: #008ad4;
}

.table-data ul.pg-item .page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #008ad4;
    border-color: #008ad4;
}

.rows-page label.pages-count {
    font-size: 16px;
    font-weight: 400;
}

.table-data table.template-section tr.main-data:hover {
    background-color: #eee;
}

.sending-recurring__check label.temp-lable {
    font-size: 15px;
    font-weight: 400;
}

.template-name input.temp-input::placeholder {
    color: #adadad;
}

.done-btn a.temp-done-btn {
    background-color: #008ad4;
    color: #fff;
}

.done-btn a.temp-done-btn:hover {
    background-color: #008ad4;
    color: #fff;
}

.page-item .page-link {
    color: #008ad4;
}

.page-item.active .page-link {
    z-index: 1;
    background-color: #008ad4 !important;
    border-color: #008ad4 !important;
}

.tab-pane .done-btn {
    margin: 10px 0 0 25px;
    color: #fff;
}

.page-link {
    padding: 0.5rem 0.6rem !important;
}

.send-border {
    padding: 10px 0px;
    border-bottom: 1px solid #ddd;
}

/** contact-page-css **/

.search-btn .input-group {
    margin-bottom: 1rem;
    width: 90%;
    margin: 30px 0px 30px;
}

.search-btn span.input-group-text {
    border: none;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    background-color: #f3f5f9;
}

.search-btn input.input-contact {
    border: none;
    background: #f3f5f9;
    /*border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
    height: 45px;*/
}

.search-btn span.input-group-text i {
    color: #5a7088 !important;
    padding: 0px 10px;
    font-size: 16px;
}

.search-btn input.input-contact {
    color: #333;
    font-weight: 400;
    font-size: 18px;
    padding: 0px;
}

.ez-down-arw-solid:before {
    content: "\f0dd";
    font-family: FontAwesome;
}

.input-group-prepend span.drop-search {
    border-top-right-radius: 30px !important;
    border-bottom-right-radius: 30px !important;
}

.search-btn span.drop-search i {
    color: #888 !important;
    padding: 0px 10px;
    cursor: pointer;
}

.s-no-data.ng-star-inserted {
    text-align: center;
    display: flex;
    justify-content: center;
    height: 400px;
    align-items: center;
}

.ng-star-inserted p.emphasize {
    font-size: 22px;
    font-weight: 500;
    color: #000;
}

.ng-star-inserted p.help-text {
    color: #000;
    font-weight: 500;
}

.search-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

.search-btn a.filter-item__button {
    border: 1px solid #fff;
    border-radius: 40px;
}

.search-btn span.is-tablet-hidden {
    font-size: 20px;
}

.search-btn .filter-item__button:hover {
    border: 1px solid #d4d4d4;
    background: #fff;
    color: #28D094 !important;
    border-radius: 40px;
}

.ez-sort:before {
    content: "\f0ca";
    font-family: FontAwesome;
}

.group-contact {
    display: flex;
    justify-content: flex-end;
}

.model-group-add label.s-label.s-label--strong {
    font-size: 16px;
    font-weight: 600;
}

.model-group-add .s-input {
    width: 100%;
    border: 1px solid #ddd;
    line-height: 40px;
    padding: 0px 15px;
    border-radius: 5px;
    margin: 5px 0px;
}

.model-group-add .s-textarea {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 5px 0px;
}

/* tabs*/

.new-group {
    font-size: 12px;
    letter-spacing: 0.6px;
}

.action-bar .new-group {
    color: #000 !important;
    font-weight: 600;
    font-size: 14px;
}

.notes-text {
    font-size: 12px;
    line-height: 17px;
    margin-top: 15px;
    color: #000;
}

.data-table th.table-cell {
    width: 65px;
    text-align: center;
}

.data-table th.main-cell {
    font-weight: 400;
    font-size: 18px;
}

.data-table td.table-cell-icon {
    text-align: center;
    cursor: pointer;
    color: #28D094;
}

.data-table th.is-sortable.asc {
    color: #222;
}

.data-table th.is-sortable {
    white-space: nowrap;
    cursor: pointer;
}

.s-link {
    color: #333 !important;
    cursor: pointer;
    font-weight: 500;
    font-size: 16px;
}

.s-link:hover .s-link:focus {
    color: #333 !important;
}
.custom-filter {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.filter-row {
    display: flex;
    align-items: center;
}

.filter-row .header {
    display: none;
}

.filter-row--border {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.075);
    border: 1px solid #ccc;
}

.filter-row .filter-item {
    display: flex;
    justify-content: center;
    margin: 10px 10px 0px;
    align-items: center;

}

.filter-row .clear-filter {
    -ms-flex-positive: 1;
    flex-grow: 1;
    justify-self: flex-end;
    text-align: right;
}

.filter-item select.label-select {
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 10px 5px;
    color: #424242;
    font-size: 14px;
}

.filter-item__label {
    font-size: 14px;
}

.ezt-btn--link {
    background-color: transparent;
    color: #28D094 !important;
}


/*add-contact-tabs*/

.contact-forms .s-form--add-contact .s-input {
    padding: .5rem 1rem;
    border: 1px solid #d4d4d4;
    border-radius: 3px;
    color: #5e5e5e;
    font-size: 1rem;
    margin: 0;
    min-height: 48px;
    box-sizing: border-box;
    width: 100%;
}

.contact-forms .s-control-group.groups__list {
    display: flex;
    flex-wrap: wrap;
}

.contact-forms .s-checkbox__container {
    width: 180px;
}

.contact-forms .s-label.s-label--justified label {
    line-height: 20px;
    font-size: 1rem;
    color: #000 !important;
    letter-spacing: 0px;
    text-transform: capitalize;
}

.contact-forms .s-control-group.s-control-group--btn-only {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.s-upsell--icon {
    min-height: 148px;
    min-width: 148px;
    line-height: 148px;
    color: #28D094;
    font-size: 6rem;
    text-align: center;
}

.s-content--well {
    background-color: rgba(0, 138, 212, 0.05);
    border-radius: 4px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-right: 3rem;
    padding-left: 3rem;
    margin: 0 auto;
}

.fw-semiBold {
    font-weight: 600;
    color: #333;
    margin-bottom: 0px;
}

.s-textarea {
    width: 100% !important;
    height: 270px;
    padding: 23px;
    box-sizing: border-box;
    border: 1px solid transparent;
    color: #8c8c8c;
    font-size: 12px;
    line-height: 17px;
    border-radius: 4px;
    resize: none;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

.contact-textarea .s-textarea {
    border: 1px solid #ccc;
}

.contact-textarea textarea {
    height: 100%;
    min-height: 300px;
    margin: 20px 0px;
}

/****recurring-message****/

.recurring-msg {
    padding: 40px 20px 30px;
}

.recurring-msg-no-data {
    text-align: center;
    font-weight: 600;
    margin: 30px 0px 30px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    padding: 9px;
    border-radius: 3px;
    color: #454545;
}

.recurring-bold-text {
    color: #454545;
    font-weight: 600;
}

/***inbox-page***/

.main-sectionPadding {
    padding: 40px 20px 30px;
}

.inbox-table {
    background-color: #F7F7F7;
    border-bottom: 1px solid #DDD;
    border-top: 1px solid #DDD;
    padding: 7px 7px 0;
}

.inbox-table .inbox-btn {
    border: 1px solid #ddd !important;
    background: transparent;
    border-radius: 5px;
    color: #454545;
}

.inbox-table .inbox-btn:hover {
    color: #454545;
}

.inbox-table .inbox-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.inbox-table .inbox-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.inbox-right .inbox-Sbtn-group {
    width: 180px !important;
}

.inbox-group-append span {
    background: transparent;
}

.inbox-btn-group .inbox-icon {
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    border-right: 0px;
    font-size: 12px;
    margin-right: -1px;
}

.inbox-table .inbox-btn-right {
    border-radius: 0px !important;
}

.inbox-msg {
    display: flex;
    align-items: center;
}

.inbox-model-header {
    padding: 18px 24px 19px !important;
}

.inbox-modal-body {
    height: auto;
    min-height: 60px;
    padding: 15px 24px;
    font-size: 16px;
    line-height: normal;
}

.inbox-new-modal-footer {
    border-top: 0;
    padding: 20px 30px;
    text-align: right;
}

.inbox-title {
    color: #fff;
    font-size: 20px;
    line-height: normal;
    font-weight: 600;
}

.inbox-new-modal-content {
    height: auto;
    min-height: 50px;
    font-size: 16px;
    line-height: normal;
    font-weight: 400;
}

.inbox-model-header .inbox-close {
    background-color: inherit !important;
    color: #fff !important;
}

.inbox-new-modal-footer button {
    border-radius: 0px;
}

.inboxTab-label {
    margin-bottom: .5rem;
    display: block;
    font-size: .875rem;
    line-height: 22px;
    text-transform: capitalize;
    letter-spacing: 0px;
}

.inboxTab-input {
    display: block;
    font-size: .875rem;
    border-radius: 3px;
    border: 1px solid #d4d4d4;
    padding: .5rem 1rem;
    box-sizing: border-box;
    color: #454545;
    background: #fff;
    max-width: 100%;
    height: 42px;
    width: 400px;
}

.inbox-paragraph {
    color: #454545;
    font-weight: 400;
    letter-spacing: 0px;
    font-size: 16px;
}

.inbox-modal-fa i {
    font-size: 11px;
    margin-right: 8px;
}

/*dropdown*/

.inbox-section .dropdown-submenu {
    position: relative;
}

.inbox-section .dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.inbox-section .dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.inbox-section .dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.inbox-section .dropdown-submenu:hover>a:after {
    border-left-color: #000;
}

.inbox-section .dropdown-submenu.pull-left {
    float: none;
}

.inbox-section .dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

.inbox-section .dropdown-menu > li > a {
    padding: 0px 20px 0px 10px;
    line-height: 20px;
}

.inbox-section .dropdown-item {
    padding: 3px 10px;
}

/*poll&vote*/

.poll-vote-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.recurring-bold-text {
    color: #454545;
    font-weight: 600;
}

.poll-vote-group .poll-btn-group-select {
    border: 0;
    background: transparent;
    border: 1px solid #ddd;
    padding: 7px 5px;
    border-radius: 5px;
    color: #333;
    font-size: 16px;
    width: 145px;
}

.poll-vote-keyword-selection-action {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
}

.poll-vote-keyword-selection-action .poll-vote-or {
    padding: 0px 10px;
}

.poll-select-container {
    border: 1px solid #d4d4d4;
    display: block;
    border-radius: 3px;
    height: 42px;
    width: 400px;
    max-width: 100%;
    position: relative;
    background-color: #fff;
    cursor: pointer;
    box-sizing: border-box;
}

.poll-select-container .poll-select {
    border: 0;
    height: 40px;
    width: 100%;
    max-width: 100%;
    cursor: pointer;
    padding: .5rem 1.7rem .5rem 1rem;
    outline: none;
    color: #5b5b5b;
    position: relative;
    margin-bottom: 0;
}

.poll-create .poll-create-input {
    display: block;
    border-radius: 3px;
    border: 1px solid #d4d4d4;
    padding: .5rem 1rem;
    color: #5e5e5e;
    background: #fff;
    max-width: 100%;
    width: 400px;
    margin-bottom: 15px;
}

.poll-create-control-group {
    margin-bottom: 20px;
    line-height: normal;
    position: relative;
}

.poll-create .poll-textarea {
    border-radius: 3px;
    border: 1px solid #d4d4d4;
    padding: 11px 14px;
    width: 400px;
    max-width: 100%;
}

.poll-create-form .poll-help-text {
    font-size: 14px;
    line-height: 15px;
}

/*model*/

.card-block.pollModal-card-block {
    padding: 40px 60px 20px;
    text-align: center;
}

.pollModal-title {
    font-weight: 500;
    color: #454545;
    font-size: 24px;
    line-height: 33px;
    padding-bottom: 11px;
}

.pollModal-subtitle {
    font-size: 17px;
    color: #454545;
    font-weight: 400;
    padding: 0px 40px 10px;
    line-height: 28px;
}

.pollModal-modal-body {
    padding: 30px 70px;
    /*height: 400px;*/
}

.pollModal-title.pollModal-title-modelbody {
    font-size: 18px;
    text-align: center;
}

.pollModal-note {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    margin-right: 24%;
}

.pollModal-form-inner .pollModal-input {
    width: 100%;
    line-height: 32px;
    border: 1px solid #d4d4d4;
    border-radius: 3px;
    padding: 2px 16px;
    margin-right: 5px;
}

.pollModal-form-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.pollModal-bg-img {
    background: #fff url("https://www.216area.com/admin/img/waves.svg") center bottom repeat-x;
}

.pollModal-main-modal {
    overflow: hidden;
}

/*drip-campaigns*/

.drap-campaigns-main {
    width: 100%;
    text-align: center;
    margin-top: 50px;
}

.Cheader-title {
    display: inline-block;
    color: #404040;
    font-size: 36px;
    line-height: 49px;
    padding: 0 90px 24px;
    border-bottom: 1px solid #ded8d8;
    margin-bottom: 45px;
}

.csubtitle p {
    display: inline-block;
    position: relative;
    color: #8c8c8c;
    font-size: 24px;
    line-height: normal;
    margin-bottom: 60px;
    max-width: 900px;
    font-weight: 400;
}

.c-msg_main {
    margin-bottom: 72px
}

.cmp_container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
}

.left-cmp {
    padding: 0 50px 25px 0;
    border-right: 1px solid #d4d4d4;
    text-align: left;
}

.right-cmp {
    padding: 0 0 25px 50px;
    text-align: left;
}

.s-container__title {
    text-transform: uppercase;
    color: #008ad4;
    margin-bottom: 5px;
    padding-left: 30px;
}

.s-container__text,
.leftcmp_text,
.rightcmp_text {
    color: #8c8c8c;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.13px;
    line-height: 24px;
    margin-bottom: 5px;
    padding-left: 30px;
}

.leftcmp_title,
.rightcmp_title {
    text-transform: uppercase;
    color: #008ad4;
    margin-bottom: 5px;
    padding-left: 30px;
}

.grt-strt-btn {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-right: 2rem;
    padding-left: 2rem;
    font-size: 1rem;
}

.m-drip-campaigns__info-text {
    margin-bottom: 15px;
}

.m-drip-campaigns__empty-groups-info strong {
    font-weight: 600;
}

.dcmp-btn:hover {
    cursor: not-allowed;
}

.s-control-group .cmpform {
    width: 400px;
}

.create-cmpbtn {
    font-size: 1rem;
    width: 150px;
    padding: .875em;
}
.s-control-group__add-to-groups-scroll {
    display: flex;
    align-items: center;
}
/*reminders*/

.reminders-section {
    padding-top: 100px;
    padding-bottom: 60px;
}

.reminders-section .reminders-empty-space {
    width: 80%;
    max-width: 750px;
    margin: 0 auto;
}

.reminders-section .reminders-empty-space .reminders-title {
    font-weight: 300;
    font-size: 36px;
    text-align: center;
    margin-bottom: 15px;
}

.reminders-section .reminders-empty-space .reminders_text {
    margin-bottom: 40px;
    color: #404040;
    font-size: 16px;
    line-height: 28px;
    text-align: left;
}

.reminders-section .reminders-empty-space .reminder_btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*svg_icon*/

.reminders-section .reminders-empty-space .reminder_svg {
    width: 360px;
    height: 340px;
    margin: 0 auto 10px;
    padding-top: 100px;
    position: relative;
}

.reminders-section .reminders-empty-space .rem_svg_assets {
    width: 374px;
    height: 370px;
    background: url(https://www.216area.com/admin/img/reminders-icon.svg) no-repeat;
    position: absolute;
    top: 0;
}

.reminders-section .reminders-empty-space .rem_svg {
    width: 380px;
    height: 355px;
    background: url(https://www.216area.com/admin/img/reminders-icon-assets.svg) no-repeat;
    position: absolute;
    top: -10px;
}

.reminders-section .reminders-empty-space .rem_svg_circle {
    width: 400px;
    height: 318px;
    background: url(https://www.216area.com/admin/img/reminders-circle-group.svg) no-repeat;
    position: absolute;
    top: 35px;
    left: -30px;
}

/*new-page-reminders*/

.new-reminders-block {
    padding: 50px 20px 30px;
}

.newReminders-message {
    font-size: 1.25rem;
    color: #454545;
    font-weight: 600;
    padding: 30px 30px 0px 30px;
}

.new-reminders-block .reminders-caller-block {
    background-color: #F6F6F6;
    padding: 30px;
    border-radius: 4px;
    border: 1px solid #D1D1D1;
    margin-bottom: 30px;
    box-sizing: border-box;
}

.new-reminders-block .reminders-block-title {
    font-size: 18px;
    color: #404040;
    margin-bottom: 14px;
    line-height: 40px;
}

.new-reminders-block .reminders-block-text {
    color: #404040;
    margin-bottom: 30px;
    font-size: 14px;
    line-height: 20px;
}

.new-reminders-block .reminders-block-number {
    position: relative;
    background-color: #fff;
    max-width: 360px;
    border: 1px solid #d4d4d4;
    border-radius: 3px;
    padding: 20px;
}

.new-reminders-block .reminder-number-select {
    font-size: 14px;
    font-weight: bold;
    color: #5e5e5e;
    margin: 0;
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    position: relative;
    -webkit-appearance: none;
}

.new-reminders-block .reminders-block-number::before {
    content: 'use a different number';
    display: inline-block;
    position: absolute;
    right: 20px;
    color: #008ad4;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold;
    top: 50%;
    width: 44%;
    text-align: right;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.new-reminders-block .reminders-block-input {
    display: block;
    font-size: .875rem;
    border-radius: 3px;
    border: 1px solid #d4d4d4;
    padding: .5rem 1rem;
    box-sizing: border-box;
    color: #5e5e5e;
    background: #fff;
    max-width: 100%;
    height: 42px;
    width: 400px;
    box-shadow: none;
    margin-bottom: 0;
    transition: .3s;
}

.new-reminders-block .reminders-preview {
    padding: 20px;
    font-size: 13px;
    line-height: normal;
    max-width: 460px;
    color: #404040;
    background-color: #E6E6E6;
    border: 1px solid #D1D1D1;
    border-radius: 3px;
}

.new-reminders-block .reminders-label {
    color: #5e5e5e;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 400;
}

.new-reminders-block .reminders-block-group {
    margin-bottom: 15px;
}

.reminders-select-container .reminders-block-select {
    display: block;
    font-size: .875rem;
    border: 0;
    box-sizing: border-box;
    background-color: transparent;
    height: 40px;
    width: 100%;
    max-width: 100%;
    border-radius: 3px;
    cursor: pointer;
    padding: .5rem 1.7rem .5rem 1rem;
    transition: color .3s;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    color: #5b5b5b;
    position: relative;
    margin-bottom: 0;
    z-index: 0;
}

.reminders-select-container {
    border: 1px solid #d4d4d4;
    display: block;
    border-radius: 3px;
    height: 42px;
    width: 400px;
    max-width: 100%;
    position: relative;
    background-color: #fff;
    cursor: pointer;
    box-sizing: border-box;
}

.reminder-select-container-auto {
    width: auto;
    display: inline-block;
    margin-right: 10px;
}

.reminders-select-container::after {
    font-family: 'FontAwesome';
    content: "\f107";
    position: absolute;
    top: 0;
    right: 15px;
    line-height: 42px;
    font-size: 14px;
    color: #d4d4d4;
    z-index: 0;
    pointer-events: none;
    transition: color .3s;
}

.reminders-time-container {
    display: inline-block;
}

.reminders-time-container .reminder-select-container-inline {
    width: 75px;
    margin-right: 0px;
    display: inline-block;
}

.new-reminders-block .reminders-select-value {
    font-size: 14px;
    line-height: 20px;
    color: #5e5e5e;
    margin: 0 8px;
}

.reminders-popover-container {
    display: inline-block;
    position: relative;
}

.reminders-popover-container .reminders-popover-icon {
    text-align: center;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    display: inline-block;
    border-radius: 100%;
    background-color: #fff;
    border: 1px solid #d4d4d4;
    color: #8c8c8c;
    font-size: 8px;
    line-height: 14px;
}

.reminder-select-container-inline {
    display: inline-block;
    width: auto;
}

.reminders-recurring-daily {
    margin: 15px 0px;
}

.newReminders-search {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.newReminders-search .reminders-search-for-numbers-input {
    font-size: 18px;
    padding: 4px 8px;
    min-height: 30px;
    line-height: 30px;
    margin-right: 10px;
    margin-bottom: 10px;
    -ms-flex: 1 1 300px;
    flex: 1 1 300px;
    width: 85%;
    background-color: #FFF;
    border: 1px solid #CCC;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    transition: border linear .2s, box-shadow linear .2s;
    color: #555;
    border-radius: 4px;
    vertical-align: middle;
}

.reminders-search-for-numbers .reminders-search-for-numbers-button {
    margin-top: 6px;
    padding: 7px;
}

.reminders-search-for-numbers {
    margin-bottom: 30px;
}

.newReminders-search .reminders-search-suggestions-buttons {
    display: flex;
    justify-content: space-evenly;
}

.newReminders-search .reminders-search-suggestions .reminders-suggestion-button {
    width: 31%;
    background: #F6F6F6;
    border-radius: 4px;
    border: 1px solid #ddd;
    padding: 40px 0;
    text-align: center;
    color: #515251;
    text-decoration: none;
    transition: .5s ease;
}

.newReminders-search .reminders-search-suggestions .reminders-suggestion-button .fa {
    font-size: 80px;
    display: block;
    color: #999;
    margin-bottom: 10px;
}

.newReminders-search .reminders-search-suggestions .reminders-suggestion-button:hover {
    background-color: #fff;
    cursor: pointer;
    color: #10a254;
    border-color: #10a254;
}

.newReminders-search .reminders-search-suggestions .reminders-suggestion-button:hover .fa {
    color: inherit;
}

.newReminders-search .reminders-search-suggestions .reminders-close-by-suggestions {
    margin: 40px 0;
    text-align: center;
}

.newReminders-search .reminders-search-suggestions .reminders-close-by-suggestions a.reminders-close-number {
    cursor: pointer;
    margin-right: 5px;
    color: #008ad4;
}

/*message-template*/

.s-table {
    border-top: 1px solid #EEE;
    width: 100%;
    table-layout: fixed;
    margin-bottom: 30px;
}

.s-table .s-cell {
    font-size: 1rem;
    height: 50px;
    border-bottom: 1px solid #EEE;
    vertical-align: middle;
    text-align: left;
    padding: 0 .5rem;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.s-table th {
    font-weight: 400;
    color: #888;
}

.s-table--striped tbody tr:nth-child(odd) td {
    background-color: rgba(246, 246, 246, 0.6);
}

.s-table .s-cell--default {
    text-align: center;
    width: 65px;
}

.s-label {
    font-size: 16px;
    margin-bottom: 10px;
    line-height: 20px;
    text-transform: capitalize;
    letter-spacing: 0px;
}

.s-select-container {
    border: 1px solid #d4d4d4;
    display: block;
    border-radius: 3px;
    height: 42px;
    width: 400px;
    max-width: 100%;
    position: relative;
    background-color: #fff;
    cursor: pointer;
    box-sizing: border-box;
}

.s-select-container .s-select {
    display: block;
    font-size: .875rem;
    border: 0;
    box-sizing: border-box;
    background-color: transparent;
    height: 40px;
    width: 100%;
    max-width: 100%;
    border-radius: 3px;
    cursor: pointer;
    padding: .5rem 1.7rem .5rem 1rem;
    transition: color .3s;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    color: #5b5b5b;
    position: relative;
    margin-bottom: 0;
    z-index: 0;
}

.s-select-container::after {
    font-family: 'FontAwesome';
    content: "\f107";
    position: absolute;
    top: 0;
    right: 15px;
    line-height: 42px;
    font-size: 14px;
    color: #d4d4d4;
    z-index: 0;
    pointer-events: none;
    transition: color .3s;
}
.tooltip-container {
    display: inline-block;
    position: relative;
    margin-left: 5px;
}

.msg-control-group .s-textarea {
    height: 175px !important;
    border-radius: 3px;
    border: 1px solid #d4d4d4;
    box-sizing: border-box;
    padding: 11px 14px;
    width: 400px !important;
    max-width: 100%;
    outline: none;
    margin-bottom: 0;
    resize: vertical;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

.cust-text {
    width: 100%;
    max-width: 400px;
}

.remaining-characters {
    font-size: 11.9px;
    font-style: italic;
    line-height: 17px;
    margin-top: 10px;
}

.preview-sec .bg-perview {
    margin: unset;
}

.preview-sec .preview-section-main {
    padding: 0;
}

.amount-container select {
    padding: .5rem 1.5rem .5rem .5rem;
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 100%;
    border: 0;
    background-color: #f3f5f9;
    outline: none;
    cursor: pointer;
    margin-bottom: 0;
    font-weight: 600;
}

.per-amount .amount-container::before {
    content: "\f107";
    font-family: 'FontAwesome';
    position: absolute;
    font-size: .75rem;
    color: #b3b2b2;
    right: 5px;
}

.per-amount .amount-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-right: .5rem;
    box-sizing: border-box;
    background-color: #f3f5f9;
    position: relative;
    border-radius: 6px;
}

/*conversations*/

.conversations--no-did-view {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    line-height: 1.5rem;
}

.conversations--no-did-view .image-holder {
    max-width: 600px;
    padding: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    background-image: url(../../img/bg-icons.png);
}

.text-bubble {
    display: block;
    text-align: left;
    position: relative;
    color: #333;
    font-size: 16px;
    max-width: 60%;
    padding: 8px 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    background: #f2f8ff;
    box-shadow: 4px 4px 0 0 #bec2f7;
    clear: both;
}

.text-bubble--left::before {
    border-right-color: #f2f8ff;
    left: -16px;
    bottom: 24%;
}

.text-bubble::before {
    content: "";
    border: 8px solid transparent;
    position: absolute;
}

.text-bubble--right {
    background: #666EE8;
    float: right;
    color: #fff;
}

.text-bubble--right::before {
    border-left-color: #666ee8;
    right: -16px;
    top: 24%;
}

.conversations--no-did-view .conversations__header {
    font-weight: 600;
    margin-bottom: .5rem;
}

.conversations__header {
    height: 72px;
    border-bottom: 1px solid #EEE;
}

.conversations--no-did-view .conversations__subheader {
    max-width: 700px;
    color: #333;
    margin-bottom: 2rem;
}

.cont-get-acess {
    font-weight: 600;
    color: #666EE8 !important;
    padding: 8px 12px;
}

.conversations--no-did-view .popover-trigger {
    position: relative;
    text-decoration: underline;
    -webkit-text-decoration-style: dotted;
    text-decoration-style: dotted;
    color: #008ad4;
}

.conversations--no-did-view .popover-trigger .popover-description {
    position: absolute;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #dedede;
    bottom: 100%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    left: 50%;
    width: 150%;
    font-size: .875rem;
    visibility: hidden;
    text-align: left;
    color: #333;
    box-shadow: 0 3px 6px 0 #b3b2b2;
    padding: 1rem;
}

.conversations--no-did-view .contact-us {
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background: #f2f2f2;
    color: #333;
    padding: 1rem 1rem 1rem 2rem;
    margin-bottom: 1rem;
}

/*tools*/

.tools-slider-img {
    padding: 3rem 4rem;
    height: 250px;
    border-radius: .5rem
}

.tools-main,
.all-tools-main {
    max-width: 1200px;
    margin: auto;
}

.tools-main .carousel-caption {
    position: absolute;
    right: 15% !important;
    left: 4% !important;
    top: 15% !important;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #FFFFFF;
    text-align: left !important;
    bottom: unset !important;
}

.tools-main .carousel-caption h3 {
    color: #ffffff;
}

.tools-main .carousel-caption h5 {
    font-size: 14px;
    text-transform: uppercase;
    color: #e4f1fc;
    margin: 0 0 .5rem;
    font-weight: 600;
}

.new {
    color: #ff8686 !important;
    font-size: 14px;
    text-transform: uppercase;
    color: #e4f1fc;
    margin: 0 0 .5rem;
    font-weight: 600;
}

.carousel-nav.ng-star-inserted {
    display: flex;
    justify-content: center;
    padding: 15px 0px;
}

.control-access-prev,
.control-access-next {
    padding: .5rem 2.4rem;
    color: #A8ADB3;
    text-transform: uppercase;
}

.tools-main .carousel-indicators .active {
    background-color: #FFFFFF !important;
}

.tools-main .carousel-indicators li {
    width: 10px !important;
    height: 10px !important;
    border-radius: 45px !important;
    background-color: #D1D1D1 !important;
}

.tools-main .carousel-indicators {
    bottom: 13px !important;
    z-index: 0;
}

.tools-titles h5 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.tools__card-list {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
}

.tools__card-item:hover {
    background: #e8eff9;
    box-shadow: 4px 4px 0 0 #d5e3f8;
}

.tools__card-item {
    margin: 8px;
    -ms-flex: 1 1 20%;
    flex: 1 1 20%;
    min-width: 160px;
    background-color: #f3f5f9;
    border-radius: 8px;
    box-shadow: 4px 4px 0 0 rgba(213, 227, 248, 0);
    list-style: none;
}

.card-info {
    color: #333;
    padding: 2.5rem 2rem;
    text-decoration: none;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
    padding: 1.5rem;
}

.card-info__title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .5rem;
}

.card-info__subtitle {
    font-size: 12px;
    color: #8c8c8c;
    line-height: 18px;
}

.tools__card-item i {
    font-size: 1.5rem;
    height: 3.5rem;
    width: 3.5rem;
    line-height: 3rem;
    align-self: center;
    border-radius: 3rem;
    padding: .3rem;
    margin-bottom: 1rem;
    color: #ffffff;
}

.modal-header.modal-header-border {
    border-bottom: 0px;
}

/**/

.data-table .table_header_color {
    color: #008ad4;
    font-size: 18px;
    font-weight: 400;
}

.data-table .table_header a {
    color: #333;
    font-size: 18px;
    font-weight: 400;
}

.data-table .table_header_color i {
    color: #333;
}

.data-table .sfp-linkHover:hover {
    color: #008ad4;
}


/*KeywordNumber*/

.keywordbtn-text {
    font-size: 18px;
    line-height: 30px;
    margin-right: 5%;
}

.keywordbtn-top {
    display: flex;
    align-items: center;
}

.keywordModal .keywordModal-header {
    margin: 0 auto;
    font-size: 20px;
    font-weight: 400;
    padding: 10pa;
}

.keywordModal-title {
    font-weight: 500;
    font-size: 18px;
}

.keywordModal-paragraph {
    font-weight: 400;
    font-size: 16px;
}

.keywordheadertitle .keywordModal-header-text {
    padding: 15px 60px;
}

.keywordheadertitle {
    text-align: center;
}

.keywordModalinputSer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.keywordModal-demo {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.keyModalSpan-text {
    color: #bbb;
}

.keywordModalADD {
    cursor: pointer;
}

.keywordListIcon i {
    float: right;
    font-size: 24px;
    color: #bbb;
}

.keywordModalADD .keyAddicon {
    font-size: 20px;
    font-weight: 100;
    position: relative;
    top: -4px;
}

.data-table .keywordplusIcon {
    font-size: 20px;
    font-weight: 100;
    color: #bbb;
    padding: 0px;
}

.keywordGroup {
    display: flex;
    justify-content: space-between;
    padding: 20px 0px;
    border-bottom: 1px solid #eee;
}

.keywordNumber_header {
    display: flex;
}

.keywordNumber_icon {
    font-size: 28px;
    color: #1099F1;
}

.keywordNumber_icongray {
    font-size: 28px;
    color: #ccc;
}

.keywordNumber_title {
    font-size: 22px;
    color: #333;
    font-weight: 500;
}

.keywordNumber_edit {
    color: #1099F1;
    cursor: pointer;
}

.keywordgroupimage {
    width: 350px;
    margin: 0 auto;
}

.keywordgroupimage img {
    margin: 0 auto;
    display: flex;
}

.keywordNumbertable .keywordselectGroup .custom-control.custom-checkbox .custom-control-label {
    margin-bottom: 0px !important;
}

.keywordNumber_text {
    font-size: 18px;
}

.keyModalTable {
    display: flex;
    justify-content: space-between;
}

.keywordNumbertable i {
    font-size: 13px;
}

.keywordContacts i {
    font-size: 10px;
    padding-right: 5px;
}

.keywordContacts {
    cursor: pointer;
}

.keywordContacts:hover i {
    transform: scale(1.2);
}

.keyConnectToGroup .sending-spa-footer {
    border-top: 1px solid #ddd;
}

.keyCreateMessage a.personalization-token:before {
    left: 10%;
}

.keyAlternate {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
}

.keyword-reply-block-icon {
    display: flex;
    align-items: center;
}

.keyword-reply-block__header-icon i {
    color: #eee;
    font-size: 20px;
}

.keyReplyMsg {
    width: 100%;
}

.keyword-reply-block {
    width: 380px;
}

.keyword-reply-block__header-title {
    font-weight: 600;
    color: #333;
}

.keyreplyArrow i {
    color: #1E9FF2 !important;
    cursor: pointer;
    font-size: 15px;
}

.KeyForward-section {
    border-bottom: 1px solid;
}

.key-instruction-header {
    font-size: 18px;
    font-weight: 500;
}

/***outbox-css***/

.outBoxCard {
    display: flex;
}

.outbox-voice-msg .outbox-view-msg {
    float: right;
    margin: 30px;
    font-size: 14px;
    text-transform: uppercase;
    color: #008ad4 !important;
}

.outbox-filters-title {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: bolder;
    color: #454545;
}

.outbox-input {
    width: 100%;
    max-width: 350px;
    border: 1px solid #ddd;
    border-radius: 3px;
    line-height: 30px;
    padding: 0px 15px;
    font-size: 14px;
}

.outbox-left {
    display: flex;
    flex-wrap: wrap;
}

.outbox-filters-block {
    width: 350px;
}

.outbox-input.outbox-inputs-container {
    width: 100px;
}

.outbox-chk-content {
    display: flex;
    align-items: center;
}

.outbox-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.outbox-button-container {
    margin-left: auto;
    margin-top: 12px;
}

.outbox-exportBtn {
    display: flex;
    justify-content: flex-end;
}

/*outbox-table*/

.outbox-cell {
    font-weight: 400;
    font-size: 18px;
}

.outboxResend i {
    color: #1e9ff2;
    cursor: pointer
}

.outboxText {
    font-size: 17px;
}

.outboxCongrats a {
    color: #1e9ff2;
}

.outboxCenter {
    text-align: center;
}

.outboxCongrats i {
    font-size: 12px;
}

/*out-boxperview*/

.s-left {
    height: 254px;
    margin: 0 48px 0 30px;
    overflow: hidden;
    position: relative;
}

.outbox-perview-header {
    max-height: 400px !important;
    height: unset;
    float: none;
    width: 100%;
    margin: 0px;
}

.s-message-details {
    border-radius: 4px;
    padding-top: 25px;
    background: linear-gradient(92deg, #6a839e 0%, #6a84a0 40.37%, #485a6d 100%);
    margin-bottom: 32px;
    position: relative;
    display: flex;
    flex-wrap: wrap-reverse;
}

.s-message-details .s-right {
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 30px 20px;
    flex: 1 0 260px;
}

.s-message-details .s-right .s-sender {
    color: #cfeaf1;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 4px;
}

.s-message-details .s-right .s-time {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    line-height: 33px;
    padding-bottom: 17px;
    border-bottom: 1px solid rgba(249, 249, 249, 0.13);
}

.s-message-details .s-right .s-text {
    color: #f9f9f9;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    padding-left: 4px;
}

.outbox-report-block-title {
    font-size: 24px;
    color: #454545;
}

.counter {
    display: table-cell;
    font-weight: 600;
    font-size: 50px;
    width: 300px;
    padding: 50px 0px 0px;
    vertical-align: middle;
}

.outboxCounterdata {
    border: 1px solid #f2f2f2;
    background-color: #f9f9f9;
    margin-right: 20px;
    padding: 0px 30px;
}

.outboxCounter {
    display: flex;
    align-items: center;
}

.counterCicon:after {
    content: "\f0d1";
    font-family: FontAwesome;
    font-size: 40px;
    color: #e6e6e6;
    margin-top: 10px;
    float: right;
}

.counterAicon:after {
    content: "\f1d8";
    font-family: FontAwesome;
    font-size: 40px;
    color: #e6e6e6;
    margin-top: 10px;
    float: right;
}

.counterBicon:after {
    content: "\f140";
    font-family: FontAwesome;
    font-size: 40px;
    color: #e6e6e6;
    margin-top: 10px;
    float: right;
}

.outbox-item-status {
    padding: 10px 0px 50px;
    font-size: 20px;
    font-weight: 400;
}

.outboxCounterdata:hover {
    cursor: pointer;
    background-color: #f1f1f1;
}

.outBox-title {
    font-size: 24px;
    font-weight: 400;
    color: #454545;
}

.outBox-text {
    font-weight: 400;
    letter-spacing: 0px;
}

.outBox-sub-title {
    font-weight: 600;
    color: #454545;
    padding: 15px 0px 0px;
}

.outBox-container {
    width: 650px;
    position: relative;
    background: #5faedd url("../../img/bg-icons.png");
}

.outBoxmainFlex {
    display: flex;
}

.outBox-container i {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    justify-content: center;
    transform: translate(-50%, -50%);
    font-size: 140px;
    color: #fff;
}

.outBox-container-content a {
    font-size: 18px;
    font-weight: 600;
    padding-bottom: 20px;
}

.outBoxModalchk {
    display: grid;
    padding-bottom: 15px;
}

.outBox-container-content {
    padding: 40px;
}

.outBoxModalchk-content {
    padding: 5px 0px;
    font-weight: 400;
}

.s-left .outBox-show-more {
    position: absolute;
    bottom: 0;
    left: 15px;
    right: 15px;
    z-index: 1;
    color: #16b1ce;
    background-color: #fafafa;
    font-size: 14px;
    font-weight: 600;
    padding-left: 35px;
    line-height: 50px;
}

.s-left .outBox-show-more::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to bottom, rgba(250, 250, 250, 0) 0%, #fafafa 100%);
}

.outBox-show-more .outBox-show-more-item {
    cursor: pointer;
}

.outBoxDetails-title {
    font-size: 18px;
}

.outBoxDetails .outBoxselect-container {
    border-color: #f2f2f2;
    height: 53px;
    margin-bottom: 29px;
    width: 100%;
}

.outBoxDetails .outBoxselect-container select {
    color: #5e5e5e;
    font-size: 16px;
    line-height: 30px;
    padding-left: 26px;
    height: 51px;
}

.outBoxselect-container::after {
    font-family: 'FontAwesome';
    content: "\f107";
    position: absolute;
    top: 0;
    right: 15px;
    line-height: 42px;
    font-size: 14px;
    color: #d4d4d4;
    z-index: 0;
}

.outBoxselect-container {
    border: 1px solid #d4d4d4;
    display: block;
    border-radius: 3px;
    height: 42px;
    width: 550px;
    max-width: 100%;
    position: relative;
    background-color: #fff;
    cursor: pointer;
    box-sizing: border-box;
}

.outBoxselect-container .outBoxDetails-select {
    display: block;
    font-size: .875rem;
    border: 0;
    box-sizing: border-box;
    background-color: transparent;
    height: 40px;
    width: 100%;
    max-width: 100%;
    border-radius: 3px;
    cursor: pointer;
    padding: .5rem 1.7rem .5rem 1rem;
    transition: color .3s;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    color: #5b5b5b;
    position: relative;
    margin-bottom: 0;
    z-index: 0;
}

.outBoxDetails-left .modal-footer {
    border: 0px;
    padding: 0px;
}

.outBoxDetails-left {
    width: 550px;
    height: 100%;
    margin: 0px;
}

.outBoxDetails {
    display: flex;
}

.outBoxDetails-right {
    width: 200px;
    flex: 0 0 284px;
    min-height: 531px;
    border: 1px solid #f2f2f2;
    border-radius: 2px;
    background-color: #f9f9f9;
    padding: 19px 25px;
    box-sizing: border-box;
    position: relative;
}

.outBox-right-value {
    color: #5e5e5e;
    font-size: 48px;
    font-weight: 600;
    line-height: 65px;
}

.outBox-right-title {
    color: #404040;
    line-height: 22px;
    margin-bottom: 24px;
}

.outBox-right-text {
    color: #8c8c8c;
    font-size: 14px;
    line-height: 25px;
    margin-bottom: 39px;
}

.outBoxDetails-right:after {
    content: '';
    position: absolute;
    bottom: 30px;
    right: 20px;
    width: 128px;
    height: 94px;
    background: url("https://www.216area.com/admin/img/bounced.svg") no-repeat center/contain;
    opacity: .05;
}

.outBox-table-no-items {
    margin: 15px 0;
    text-align: center;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    padding: 9px;
    font-size: 13px;
    font-weight: 600;
}

.outBox-link {
    color: #ddd;
    font-size: 13px;
}

/*Reports-Charts*/

.btn-drop {
    font-size: 18px;
    color: #404040;
    padding: 10px 12px;
    display: inline-block;
    position: relative;
    border-radius: 3px;
    cursor: pointer;
    transition: .3s;
    background-color: unset;
    border: unset;
}

.btn-drop:after {
    border: unset;
}

.report-icon {
    font-size: 15px;
    color: #6f6f6f;
}

.chartDrop {
    display: flex;
    justify-content: space-between;
}

.reportChart {
    height: 400px;
}

.reportChartpanel {
    display: flex;
    justify-content: space-between;
    background-color: #eee;
    padding: 20px;
    border: 1px solid #ddd;
}

.reportExportFilter {
    display: flex;
    align-items: center;
}

.reportChartpanel-Show {
    border: 1px solid #bbb;
    color: #7F7F7F;
    font-size: 13px;
}

.reportChartpanelSearch {
    border: 1px solid #ddd !important;
    background-color: #fff;
    color: #7F7F7F;
    border-right: 0px;
    padding: 5px 10px !important;
    z-index: 0 !important;
}

.reportChartpanelInput::placeholder {
    font-size: 12px;
}

.reportChartpanelInput {
    padding: 0px 0px 5px 5px !important;
}

.reportrecords {
    font-size: 12px;
    line-height: 50px;
    text-align: center;
    border-bottom: 1px solid #EEE;
    background-color: rgba(246, 246, 246, 0.6);
}

.data-table .table_header {
    font-weight: 500;
}

.report-range {
    display: flex;
    width: 500px;
    font-size: 12px;
}

.report-rangeDate {
    font-size: 12px;
}

.reportdatepickerInput {
    font-size: 12px;
}

.reportfilterBtn-drop {
    display: flex;
    padding: 15px 20px 10px;
    width: 200px;
}

.reportfiltergroup h5 {
    font-size: 16px;
    font-weight: 600;
    margin-left: 12px;
    margin: 0px;
    padding: 10px 0px;
}

.reportApplybtn {
    margin: 0 auto;
    display: flex !important;
    padding: 0px !important;
    margin-bottom: 5px !important;
}

/**Files-css**/
.filesFilter .filterBtn {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
.filesFilter .filterSelect {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    -webkit-appearance: none;
    padding: 0px 30px;
}

/**Link-Shortener**/
.linkshortenerInput {
    display: flex;
    justify-content: center;
}
.linkshortener_title{
  font-size: 18px;
}

/**Widgets-css**/
.widgets-header {
    font-size: 18px;
    font-weight: 500;
    padding: 10px 0px;
}
.widgetList {
    display: flex;
    align-items: center;
    padding: 0px;
}
.widgetList li {
    list-style-type: none;
    padding: 0px 10px;
    cursor: pointer;
}
.widgets-link {
    border-bottom: 1px solid;
    color: #454545;
    font-size: 14px;
}
.widget-type-options__notification {
    padding: 20px 25px;
    background-color: #e8f1f6;
}

/**Integration-css**/
.integration-section {
    display: flex;
    align-items: center;
}
.integration-main {
    width: 30%;
  }
.integration-description-links li {
    color: #666EE8;
    font-size: 14px;
    line-height: 20px;
}
.bs-docs-example {
    position: relative;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.text-separator {
    border-color: #eee !important;
}
.instruction-header {
    font-size: 18px;
}
.aweber-status-disconnected p {
    font-size: 14px;
    line-height: 20px;
}
.intConnection_header{
  font-size: 16px;
  font-weight: 500;
}

/**upload-file-tab**/
.uploadfiletab .uploadfileTextarea {
    height: 200px !important;
}

/**fwd-css**/
.fwdborder {
    border-bottom: 1px solid #454545;
}

.s-control-group {
    margin-bottom: 20px;
}
/*facebook-api*/
  .facebookApiImg{
    background-image: url('../../img/ez-fb-widget.png');
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 300px;
    width: 280px;
    margin: 40px auto;
  }
  .facebookApi-header {
    font-weight: 500;
    font-size: 24px;
    padding: 20px 0px;
    color: #454545;
}
.facebookApi_btn {
    margin: 30px 0px;
    display: flex;
    justify-content: center;
}

/*keywordclosebtn*/
.custom_modal_css .close:hover {
    background-color: #fff;
    color: #333 !important;
}


.textcontactForm {
    width: 85%;
}

/*new-css-add*/
.custom_apply_keywords {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    margin: 10px 10px 0px;
}


@media only screen and (min-width: 320px) and (max-width: 575px) {
    .toolbar-icon .toolbar-content {
        padding: 3px 7px 4px;
        font-size: 16px;
        margin-left: 0px;
    }
    .preview-section-main {
        display: none;
    }
    .picker-date input {
        width: 50%;
    }
    .template-name input {
        width: 100%;
        margin: 0px;
    }
    .quotation {
        margin: 10px 0px;
        width: 100%;
    }
    .done-btn {
        margin: 0px;
    }
    .rows-page .page-item-hide {
        display: none;
    }
    .foot-modal .pagination-content-number {
        margin: 0px -40px 0px 0px;
    }
    .all-catagories {
        width: 100%;
    }
    .group-contact {
        margin-bottom: 30px;
        display: flex;
        justify-content: space-around;
    }
    span.is-tablet-hidden.is-mobile-hidden {
        display: none;
    }
    .search-btn span.input-group-text i {
        font-size: 15px;
        padding: 5px 0px 0px 10px;
    }
    .search-btn input.form-control.input-contact::placeholder {
        font-size: 16px;
    }
    .search-btn .input-group {
        width: 100%;
        margin: 10px 0px 0px;
    }
    .filter-row {
        flex-wrap: wrap;
    }
    .filter-row--border {
        box-shadow: unset;
        border: unset;
        margin-top: 20px;
    }
    .filter-item select.label-select {
        width: 100%;
        min-width: 195px;
    }
    .filter-item__label {
        width: auto;
        font-size: 12px !important;
        letter-spacing: 0 !important;
    }
    .filter-row .clear-filter {
        text-align: center;
        margin-top: 20px;
    }
    .s-upsell {
        display: none;
    }
    .foot-modal label.pages-count {
        display: none;
    }
    .tab-section {
        margin-top: 10px;
    }
    .inbox-right {
        justify-content: unset !important;
        flex-wrap: wrap;
    }
    .poll-vote-group {
        margin-bottom: 10px;
    }
    .poll-vote-keyword-selection-action .poll-vote-or {
        padding: 0px 7px;
    }
    .cmp_container {
        flex-wrap: wrap;
    }
    .left-cmp {
        padding: 0 10px 20px;
        border: unset;
    }
    .right-cmp {
        padding: 0 10px 20px;
        margin-top: 20px;
    }
    .s-control-group .cmpform {
        width: 100%;
    }
    .reminders-section .reminders-empty-space .reminders-title {
        font-size: 24px;
    }
    .reminders-section .reminders-empty-space .reminder_svg {
        width: 100%;
        height: 300px;
        top: 0px;
        left: 0;
        background-size: contain;
    }
    .reminders-section .reminders-empty-space .rem_svg_assets {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-size: contain;
    }
    .reminders-section .reminders-empty-space .rem_svg {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-size: contain;
    }
    .reminders-section .reminders-empty-space .rem_svg_circle {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-size: contain;
    }
    .newReminders-search .reminders-search-for-numbers-input {
        width: 100%;
    }
    .newReminders-search .reminders-search-suggestions .reminders-suggestion-button .fa {
        font-size: 55px;
    }
    .newReminders-search .reminders-search-suggestions .reminders-suggestion-button {
        font-size: 14px;
        padding: 20px 10px;
        box-sizing: border-box;
        line-height: 16px;
    }
    .new-reminders-block .reminders-caller-block {
        padding: 15px;
    }
    .new-reminders-block .reminders-block-number::before {
        width: 50%;
    }
    .new-reminders-block {
        padding: 50px 10px 30px;
    }
    .reminders-time-container {
        display: inline-block;
        margin-top: 10px;
    }
    .conversations--no-did-view .contact-us {
        justify-content: center;
    }
    .tools-main .carousel-caption {
        padding-top: 0px;
        padding-bottom: 0px;
        line-height: 16px;
    }
    .left-cmp {
        padding: 0px 10px;
    }

   .keyword-formInput {
        max-width: 100% !important;
    }
    .keywordbtn-top {
        flex-wrap: wrap;
    }
    .pollModal-subtitle {
        padding: 0px;
    }
    .card-block.pollModal-card-block {
        padding: 20px;
    }
    .keywordNumber_header {
        flex-wrap: wrap !important;
    }
    .keyword-reply-block {
        width: 230px !important;
    }
    .keywordNumber_title {
        font-size: 16px;
    }
    .keywordgroupimage {
        width: 100%;
    }
    .outbox-exportBtn {
        justify-content: flex-start;
    }
    .outbox-voice-msg .outbox-view-msg {
        justify-content: flex-end;
        display: flex;
        margin: 10px 10px 0px;
        font-size: 14px;
    }
    .outboxCounterdata {
        margin-right: 0px;
    }
    .outboxCounter {
        flex-wrap: wrap;
    }
    .s-left .outBox-show-more {
        left: 25px;
        right: 25px;
    }
    .s-message-details .s-left {
        padding: 0px 10px;
        margin: 0px;
    }
    .outBoxDetails-left {
        margin-right: 0px !important;
        margin-left: 0px !important;
    }
    .outBox-container.outboxExportImghide {
        display: none;
    }
    .outBoxmainFlex {
        display: inline-block;
    }
    .outBoxDetails {
        display: flex;
        flex-wrap: wrap;
    }
    .report-icon {
        padding: 5px 5px 5px!important;
        font-size: 12px;
        color: #6f6f6f;
    }
    .chartDrop {
        flex-wrap: wrap;
    }
    .chartDrop button {
        text-align: left;
        margin: 10px 0px;
    }
    .report-range {
        width: 100%;
        flex-wrap: wrap;
    }
    .reportChartpanel {
        flex-wrap: wrap;
    }
    .reportExport button {
        margin: 5px 0px !important;
    }
    .reportExportFilter {
        flex-wrap: wrap;
    }
    .reportExportFilter .dropdown {
        margin: 5px 0px 10px 0px;
    }
    .recurring-msg.files-section {
        padding: 40px 10px !important;
    }
    .filesFilter .filterBtn {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        font-size: 15px;
        padding: 7px 20px !important;
    }
    .filesFilter .filterSelect{
        padding: 4px;
        margin-right: 20px;
    }
    .linkshortenerInput {
      display: block;
    }
    .linkInput{
        max-width: 100% !important;
        margin-bottom: 10px;
    }
    .widgetList{
        flex-wrap: wrap;
    }
    .integration-section{
      flex-wrap: wrap;
    }
    .integration-main {
        width: 100%;
    }
    .Cheader-title {
	    font-size: 24px;
	    line-height: 20px;
	    padding: 0 50px 24px;
	    margin-bottom: 22px;
	}
	.csubtitle p{
		font-size: 18px;
		margin-bottom: 30px;
	}
    .leftcmp_image img {
        width: 250px;
    }
    .rightcmp_image img {
        width: 250px;
    }
     .bg-perview{
        min-width: 270px;
    }
    .filesFilter {
        float: unset !important;
    }
    .textcontactForm {
        width: 50%;
    }
    .custom-filter 
    {
        flex-wrap: wrap;
    }
    .filter-row .filter-item 
    {
        display: flex;
        align-items: center;
        margin: 10px 0px 10px;
    }
   /* #filter_serching {
        width: 100%;
    }*/
    .search-btn a.filter-item__button {
        padding: 5px 10px 5px 15px!important;
        margin-top: 10px;
    }

}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .toolbar-icon .toolbar-content {
        padding: 3px 7px 4px;
        font-size: 16px;
        margin-left: 0px;
    }
    .preview-section-main {
        display: none;
    }
    .picker-date input {
        width: 50%;
    }
    .template-name input {
        width: 100%;
        margin: 0px;
    }
    .quotation {
        margin: 10px 0px;
        width: 100%;
    }
    .done-btn {
        margin: 0px;
    }
    .rows-page .page-item-hide {
        display: none;
    }
    .foot-modal .pagination-content-number {
        margin: 0px -40px 0px 0px;
    }
    .all-catagories {
        width: 100%;
    }
    .group-contact {
        margin-bottom: 30px;
        display: flex;
        justify-content: space-around;
    }
    span.is-tablet-hidden.is-mobile-hidden {
        display: none;
    }
    .search-btn span.input-group-text i {
        font-size: 15px;
        padding: 5px 0px 0px 10px;
    }
    .search-btn input.form-control.input-contact::placeholder {
        font-size: 16px;
    }
    .search-btn .input-group {
        width: 100%;
        margin: 10px 0px 0px;
    }
    .filter-row {
        flex-wrap: wrap;
    }
    .filter-row--border {
        box-shadow: unset;
        border: unset;
        margin-top: 20px;
    }
    .filter-item select.label-select {
        
        width: 100%;
        min-width: 195px;
    
    }
     .filter-item__label {
        width: auto;
        font-size: 12px !important;
        letter-spacing: 0 !important;
    }
    .filter-row .clear-filter {
        text-align: center;
        margin-top: 20px;
    }
    .s-upsell {
        display: none;
    }
    .foot-modal label.pages-count {
        display: none;
    }
    .tab-section {
        margin-top: 10px;
    }
    .inbox-right {
        justify-content: unset !important;
        flex-wrap: wrap;
    }
    .poll-vote-group {
        margin-bottom: 10px;
    }
    .poll-vote-keyword-selection-action .poll-vote-or {
        padding: 0px 7px;
    }
    .cmp_container {
        flex-wrap: wrap;
    }
    .left-cmp {
        padding: 0 10px 20px;
        border: unset;
    }
    .right-cmp {
        padding: 0 10px 20px;
        margin-top: 20px;
    }
    .s-control-group .cmpform {
        width: 100%;
    }
    .reminders-section .reminders-empty-space .reminders-title {
        font-size: 24px;
    }
    .reminders-section .reminders-empty-space .reminder_svg {
        width: 100%;
        height: 300px;
        top: 0;
        left: 0;
        background-size: contain;
    }
    .reminders-section .reminders-empty-space .rem_svg_assets {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-size: contain;
    }
    .reminders-section .reminders-empty-space .rem_svg {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-size: contain;
    }
    .reminders-section .reminders-empty-space .rem_svg_circle {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-size: contain;
    }
    .newReminders-search .reminders-search-for-numbers-input {
        width: 100%;
    }
    .newReminders-search .reminders-search-suggestions .reminders-suggestion-button .fa {
        font-size: 55px;
    }
    .newReminders-search .reminders-search-suggestions .reminders-suggestion-button {
        font-size: 14px;
        padding: 20px 10px;
        box-sizing: border-box;
        line-height: 16px;
    }
    .new-reminders-block .reminders-caller-block {
        padding: 15px;
    }
    .new-reminders-block .reminders-block-number::before {
        width: 50%;
    }
    .new-reminders-block {
        padding: 50px 10px 30px;
    }
    .reminders-time-container {
        display: inline-block;
        margin-top: 10px;
    }
    .conversations--no-did-view .contact-us {
        justify-content: center;
    }
    .tools-main .carousel-caption {
        padding-top: 0px;
        padding-bottom: 0px;
        line-height: 16px;
    }
    .left-cmp {
        padding: 0px 10px;
    }
    .keyword-formInput {
        max-width: 100% !important;
    }
    .keywordbtn-top {
        flex-wrap: wrap;
    }
    .pollModal-subtitle {
        padding: 0px;
    }
    .card-block.pollModal-card-block {
        padding: 20px;
    }
    .keywordNumber_header {
        flex-wrap: wrap !important;
    }
    .keyword-reply-block {
        width: 230px !important;
    }
    .keywordNumber_title {
        font-size: 16px;
    }
    .keywordgroupimage {
        width: 100%;
    }
    .outbox-exportBtn {
        justify-content: flex-start;
    }
    .outbox-voice-msg .outbox-view-msg {
        justify-content: flex-end;
        display: flex;
        margin: 10px 10px 0px;
        font-size: 14px;
    }
    .outboxCounterdata {
        margin-right: 0px;
    }
    .outboxCounter {
        flex-wrap: wrap;
    }
    .s-left .outBox-show-more {
        left: 25px;
        right: 25px;
    }
    .s-message-details .s-left {
        padding: 0px 10px;
        margin: 0px;
    }
    .outBoxDetails-left {
        margin-right: 0px !important;
        margin-left: 0px !important;
    }
    .outBox-container.outboxExportImghide {
        display: none;
    }
    .outBoxmainFlex {
        display: inline-block;
    }
    .outBoxDetails {
        display: flex;
        flex-wrap: wrap;
    }
    .report-icon {
        padding: 5px 5px 5px!important;
        font-size: 12px;
        color: #6f6f6f;
    }
    .chartDrop {
        flex-wrap: wrap;
    }
    .chartDrop button {
        text-align: left;
        margin: 10px 0px;
    }
    .report-range {
        width: 100%;
        flex-wrap: wrap;
    }
    .reportChartpanel {
        flex-wrap: wrap;
    }
    .reportExport button {
        margin: 5px 0px !important;
    }
    .reportExportFilter {
        flex-wrap: wrap;
    }
    .reportExportFilter .dropdown {
        margin: 5px 0px 10px 0px;
    }
    .recurring-msg.files-section {
        padding: 40px 10px !important;
    }
    .filesFilter .filterBtn {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        font-size: 15px;
        padding: 7px 20px !important;
    }
    .filesFilter .filterSelect{
        padding: 4px;
        margin-right: 20px;
    }
    .linkshortenerInput {
      display: block;
    }
    .linkInput{
        max-width: 100% !important;
        margin-bottom: 10px;
    }
    .widgetList{
        flex-wrap: wrap;
    }
    .integration-section{
      flex-wrap: wrap;
    }
    .integration-main {
        width: 100%;
    }
    .Cheader-title {
	    font-size: 24px;
	    line-height: 20px;
	    padding: 0 50px 24px;
	    margin-bottom: 22px;
	}
	.csubtitle p{
		font-size: 18px;
		margin-bottom: 30px;
	}
    .leftcmp_image img {
        width: 250px;
    }
    .rightcmp_image img {
        width: 250px;
    }
    .bg-perview{
        min-width: 270px;
    }
    .filesFilter {
        float: unset !important;
    }
    .textcontactForm {
        width: 50%;
    }
    .custom-filter 
    {
        flex-wrap: wrap;
    }
    .filter-row .filter-item 
    {
        display: flex;
        align-items: center;
        margin: 10px 0px 10px;
    }
    /*#filter_serching {
        width: 100%;
    }*/
    .search-btn a.filter-item__button {
        padding: 5px 10px 5px 15px!important;
        margin-top: 10px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .toolbar-icon .toolbar-content {
        padding: 3px 7px 4px;
        font-size: 16px;
    }
    .preview-section-main {
        padding: 50px 20px;
    }
    .picker-date input {
        width: 50%;
    }
    .template-name input {
        width: 100%;
        margin: 0px;
    }
    .quotation {
        margin: 10px 0px;
        width: 100%;
    }
    .done-btn {
        margin: 0px;
    }
    .rows-page .page-item-hide {
        display: none;
    }
    .foot-modal .pagination-content-number {
        margin: 0px -40px 0px 0px;
    }
    .inbox-right {
        justify-content: unset !important;
        flex-wrap: wrap;
    }
    .left-cmp {
        padding: 0px 10px;
    }
    .right-cmp {
        padding: 0 10px;
    }
    .keyword-formInput {
        max-width: 50% !important;
    }
    .keywordNumber_header {
        flex-wrap: wrap !important;
    }
    .keyword-reply-block {
        width: 230px !important;
    }
    .keywordNumber_title {
        font-size: 16px;
    }
    .keywordgroupimage {
        width: 100%;
    }
    .report-icon {
        padding: 5px 15px 5px!important;
        font-size: 12px;
        color: #6f6f6f;
    }
    .chartDrop {
        flex-wrap: wrap;
    }
    .chartDrop button {
        text-align: left;
        margin: 10px 0px;
    }
    .report-range {
        width: 100%;
        flex-wrap: wrap;
    }
    .reportChartpanel {
        flex-wrap: wrap;
    }
    .reportExport button {
        margin: 5px 0px !important;
    }
    .reportExportFilter {
        flex-wrap: wrap;
    }
    .reportExportFilter .dropdown {
        margin: 5px 0px 10px 0px;
    }
    .widgetList{
        flex-wrap: wrap;
    }
    .integration-section{
      flex-wrap: wrap;
    }
    .textcontactForm {
        width: 80%;
    }
    .custom-filter 
    {
        flex-wrap: wrap;
       justify-content: flex-start;
    }
    .filter-row .filter-item 
    {
        display: flex;
        align-items: center;
        margin: 10px 10px 10px;
    }
   /* #filter_serching {
        width: 100%;
    }*/
    .search-btn a.filter-item__button {
        padding: 5px 10px 5px 15px!important;
        margin-top: 10px;
    }
    .filter-row .clear-filter{
        width: 25%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .preview-section-main {
        padding: 50px 20px;
    }
    .toolbar-icon .toolbar-content {
        padding: 0px;
    }
    .arrow {
        left: 143px !important;
    }
    .picker-date input {
        width: 60%;
    }
    .rows-page .page-item-hide {
        display: none;
    }
    .left-cmp {
        padding: 0px 10px;
    }
    .right-cmp {
        padding: 0 10px;
    }
    .keyCreateMessage a.personalization-token:before {
        left: 20%;
        margin: 5px 0px;
    }
    .keywordgroupimage {
        width: 100%;
    }
    .outBoxDetails {
        flex-wrap: wrap;
    }
    .outboxCounter {
        flex-wrap: wrap;
    }
    .widgetList{
        flex-wrap: wrap;
    }
    .keyword-reply-block {
        width: 100%;
    }
    .inbox-table .inbox-right {
        flex-wrap: wrap;
    }
    .textcontactForm {
        width: 75%;
    }
     .custom-filter 
    {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .filter-row .clear-filter{
        width: 30%;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .custom-filter{
        justify-content: flex-start;
        flex-wrap: wrap;
    } 
    .textcontactForm {
        width: 80%;
    }
    .filter-row .clear-filter{
        width: 30%;
    }

}




/*referral-page*/

.new_referral_bg_img {
    background-image: url('../../img/system_home_img.jpg');
    background-size: cover;
    background-position: center center;
    height: 100vh;
    background-repeat: no-repeat;
}

.new_referral_main_section {
    position: relative;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    padding: 100px;
}

.new_referral_header {
    font-size: 34px;
    color: #fff;
}

.new_referral_title {
    font-size: 64px;
    padding: 30px 0px 10px 0px;
    color: #fff;
}

.new_referral_text {
    font-size: 24px;
}

.new_referral_login_section {
    padding: 20px;
}

.new_referral_card {
    background-image: url('../../img/100GCRef.png');
    background-size: 100% 100%;
    background-position: center center;
    height: 250px;
    margin: 30px 0px;
}

.new_referral_login_title {
    font-size: 44px;
    line-height: 50px;
    text-align: center;
    font-weight: 700;
    padding: 0px 30px;
    color: #00CC99;
}

.new_referral_login_text {
    font-size: 18px;
    font-weight: 400;
    color: #868686;
    line-height: 28px;
    text-align: center;
}

.new_referral_Sbtn {
    width: 22%;
    border: 1px solid #ddd;
    line-height: 53px;
    padding: 0px 10px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    margin: -5px;
    cursor: pointer;
    color: #fff;
    font-weight: 700;
    background-color: #00CC99;
    font-size: 18px;
    letter-spacing: 1px;
}

.new_referral_input {
    width: 78%;
    border: 1px solid #ddd;
    line-height: 51px;
    padding: 0px 10px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    outline: none;
}

.new_referral_copyText {
    display: flex;
    justify-content: space-between;
    border: 1px dashed #c7c7c7;
    padding: 20px;
    border-radius: 41px;
}

.new_referral_copyText {
    font-size: 15px;
    font-weight: 700;
    color: #454545;
}

.new_referral_link {
    cursor: pointer;
    color: #0c9;
}

.new_referral_socialBtn {
    margin: 30px 0px;
    display: flex;
    justify-content: space-evenly;
}

.new_referral_fbtn {
    border: none;
    color: #fff;
    padding: 15px 40px;
    border-radius: 40px;
    letter-spacing: 1px;
    background-color: #314884;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.new_referral_tbtn {
    border: none;
    color: #fff;
    padding: 15px 40px;
    border-radius: 40px;
    letter-spacing: 1px;
    background-color: #76D3F6;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}
.search-btn input.input-contact:focus {
    border-color: unset !important;
    box-shadow: none;
}

table.custom_all_group_datatable th:nth-child(5) {
    width: 60px !important;
}
table.custom_all_group_datatable th:nth-child(4) {
    width: 60px !important;
}
table.custom_all_group_datatable th:nth-child(3) {
    width: 60px !important;
}

@media (min-width: 576px)
{
  .custom_modal_css .modal-dialog {
    max-width: 750px !important;
    margin: 1.75rem auto;
  }
}
.custom_modal_css .modal-title
{
    font-weight: 500;
    color: #454545;
    font-size: 24px;
    line-height: 33px;
    padding-bottom: 11px;
}
.custom_modal_css .modal-header
{
  flex-direction: row-reverse;
}
.custom_modal_css form label
{ 
  color: #454545;
  font-size: 0.75rem;
  text-transform: capitalize;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0;
}
.custom_modal_css .modal-content 
{
    background: #fff url(https://www.216area.com/admin/img/waves.svg) center bottom repeat-x;
}
.custom_modal_css .txtKeyFormSaveBtn
{
    background-color: #2ac374 !important;
    color: #FFFFFF !important;
    border-color: #2ac374 !important;
}
.custom_check_box_css
{
    margin: 0px !important;
    padding: 0px !important;
}


@media only screen and (min-width: 320px) and (max-width: 575px) {
    .new_referral_bg_img {
        background-position: 50%;
        height: 350px;
    }
    .new_referral_title {
        font-size: 24px;
        padding: 0px;
    }
    .new_referral_main_section {
        top: 15%;
        padding: 10px;
    }
    .new_referral_header {
        font-size: 16px;
        font-weight: 500;
    }
    .new_referral_text {
        display: none;
    }
    .new_referral_login_title {
        font-size: 34px;
        line-height: 40px
    }
    .new_referral_login_text {
        font-size: 14px;
        line-height: 24px;
    }
    .new_referral_login {
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    .new_referral_fbtn {
        padding: 15px 25px;
    }
    .new_referral_tbtn {
        padding: 15px 25px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .new_referral_bg_img {
        background-position: 50%;
        height: 350px;
    }
    .new_referral_title {
        font-size: 24px;
        padding: 0px;
    }
    .new_referral_main_section {
        top: 15%;
        padding: 10px;
    }
    .new_referral_header {
        font-size: 16px;
        font-weight: 500;
    }
    .new_referral_text {
        display: none;
    }
    .new_referral_login_title {
        font-size: 34px;
        line-height: 40px
    }
    .new_referral_login_text {
        font-size: 14px;
        line-height: 24px;
    }
    .new_referral_login {
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    .new_referral_fbtn {
        padding: 15px 25px;
    }
    .new_referral_tbtn {
        padding: 15px 25px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .new_referral_bg_img {
        background-position: 50%;
        height: 350px;
    }
    .new_referral_title {
        font-size: 24px;
        padding: 0px;
    }
    .new_referral_main_section {
        top: 15%;
        padding: 10px;
    }
    .new_referral_header {
        font-size: 16px;
        font-weight: 500;
    }
    .new_referral_text {
        display: none;
    }
    .new_referral_login_title {
        font-size: 34px;
        line-height: 40px
    }
    .new_referral_login_text {
        font-size: 14px;
        line-height: 24px;
    }
    .new_referral_login {
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    .new_referral_fbtn {
        padding: 15px 25px;
    }
    .new_referral_tbtn {
        padding: 15px 25px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .new_referral_bg_img {
        background-position: 50%;
        height: 400px;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    .new_referral_title {
        font-size: 24px;
        padding: 0px;
    }
    .new_referral_main_section {
        top: 15%;
        padding: 10px;
    }
    .new_referral_header {
        font-size: 16px;
        font-weight: 500;
    }
    .new_referral_text {
        display: none;
    }
    .new_referral_login_title {
        font-size: 34px;
        line-height: 40px
    }
    .new_referral_login_text {
        font-size: 14px;
        line-height: 24px;
    }
    .new_referral_login {
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    .new_referral_fbtn {
        padding: 15px 25px;
    }
    .new_referral_tbtn {
        padding: 15px 25px;
    }
}