/* ---------------------------------------------- */
/* ----------------General styles---------------- */
/* ---------------------------------------------- */
* {
    padding: 0;
    margin: 0;
    outline: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}
*:before,
*:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
main {
    display: block
}
template {
    display: none
}
ol,
ul {
    padding-left: unset
}
a:hover {
    color: inherit
}
.cursorPointer {
    cursor: pointer
}
html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    tap-highlight-color: rgba(0, 0, 0, 0);
    display: flex;
    font-size: 10px
}
body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
    flex: 1;
    min-width: 320px;
    overflow: hidden;
    background-color: #fcfcfc;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #000
}
img,
iframe,
video,
audio,
object {
    max-width: 100%
}
img,
iframe {
    border: 0 none
}
img {
    height: auto;
    display: inline-block;
    vertical-align: middle
}
b,
strong {
    font-weight: bold
}
address {
    font-style: normal
}
svg:not(:root) {
    overflow: hidden
}
a,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
input[type="file"],
input[type="image"],
label[for] {
    cursor: pointer
}
a[href^="tel"],
button[disabled],
input[disabled],
textarea[disabled],
select[disabled] {
    cursor: default
}
button::-moz-focus-inner,
input::-moz-focus-inner {
    padding: 0;
    border: 0
}
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="color"],
textarea,
a[href^="tel"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none
}
textarea {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch
}
button,
input,
optgroup,
select,
textarea {
    font-family: "Roboto", sans-serif;
    font-size: inherit;
    color: inherit;
}
button,
select {
    text-transform: none
}
table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0
}
nav ul,
nav ol {
    list-style: none outside none
}
input::-webkit-input-placeholder {
    color: inherit;
    opacity: 1
}
input::-moz-placeholder {
    color: inherit;
    opacity: 1
}
input:-ms-input-placeholder {
    color: inherit;
    opacity: 1
}
input::-ms-input-placeholder {
    color: inherit;
    opacity: 1
}
input::placeholder {
    color: inherit;
    opacity: 1
}
input.adminInput {
    border-radius: 5px;
    background-color: #fcfcfc;
    padding: 10px 15px;
    font-size: 14px;
    border: none;
    height: 33px;
}
textarea::-webkit-input-placeholder {
    color: inherit;
    opacity: 1
}
textarea::-moz-placeholder {
    color: inherit;
    opacity: 1
}
textarea:-ms-input-placeholder {
    color: inherit;
    opacity: 1
}
textarea::-ms-input-placeholder {
    color: inherit;
    opacity: 1
}
textarea::placeholder {
    color: inherit;
    opacity: 1
}
input:-webkit-autofill {
    -webkit-text-fill-color: inherit;
    -webkit-box-shadow: 0 0 0 1000px #fff inset
}
input[type=text],
input[type=button],
input[type=tel],
input[type=email],
input[type=submit],
input[type=date],
input[type=search],
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}
a {
    color: inherit;
    text-decoration: underline
}
a:hover {
    text-decoration: none
}
a[href^="tel"] {
    text-decoration: none
}
.h1,
h1 {
    font-size: 3rem
}
.h2,
h2 {
    font-size: 2.6rem
}
.h3,
h3 {
    font-size: 1.9rem
}
.h4,
h4 {
    font-size: 1.4rem
}
.h5,
h5 {
    margin-bottom: .2rem;
    font-size: 1.2rem;
    font-weight: 700
}
.h6,
h6 {
    font-size: 1.1rem;
    font-weight: 700
}
.h7,
h7 {
    font-size: 1.1rem;
    font-weight: 500;
}
p,
ul,
ol,
dl,
hr,
table,
blockquote {
    margin-bottom: 1.2em
}
h1[class],
h2[class],
h3[class],
h4[class],
h5[class],
h6[class],
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
p:last-child,
ul:last-child,
ol:last-child,
dl:last-child,
table:last-child,
blockquote:last-child {
    margin-bottom: 0
}
.clear:after {
    content: '';
    line-height: 0;
    display: table;
    clear: both
}
.font-weight-bold {
    font-weight: bold
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0
}
.notext {
    white-space: nowrap;
    text-indent: 100%;
    text-shadow: none;
    overflow: hidden
}
.notext-old {
    font-size: 0;
    line-height: 0;
    text-indent: -4000px
}
[hidden],
.hidden {
    display: none
}
[disabled],
.disabled {
    cursor: default
}
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
    display: none !important
}
.whiteHR {
    background: #fff;
    height: 6px
}
.hr-light {
    border: 1px solid #b5b5b5;
    height: 0 !important
}
.xs {
    font-size: .7em !important
}
.small,
small {
    font-size: .875em !important
}
input::placeholder {
    color: #999;
    opacity: 1
}
input:-ms-input-placeholder {
    color: #999
}
input::-ms-input-placeholder {
    color: #999
}
.disabled {
    color: #cdcdcd
}
.mobileShow {
    display: none !important
}
.widget-message {
    padding: 2rem
}
.chat {
    min-width: 100%
}
.show {
    opacity: 1
}
.adminShow,
.groupShow {
    opacity: .5 !important
}
.errorMessage,
.errormessage {
    color: red
}
.errorMessage .alert{
    opacity: 0;
}
.successMessage {
    color: green !important
}
.text-black-25 {
    color: rgba(0, 0, 0, .25) !important
}
.text-black-0 {
    color: transparent !important;
}
.text-gray {
    color: #CACACA !important;
}
.border-muted {
    border-color: #d7d7d7!important;
}
/* ---------------------------------------------- */
/* ----------------General styles---------------- */
/* ---------------------------------------------- */



/* ---------------------------------------------- */
/* UPDATE AND REMOVE AND RULES BEGGINING WITH IDS */
/* ---------------------------------------------- */

#addressBookAlphabet {
    margin: -9px 10px 0;
}

#loadAnimation span:after {
    border: 3px solid #ffcb1e
}

#catchline {
    background-image: url("../images/birdie-loginbg.jpg")
}

#popover-phoneGroup-number .popover__body,
#popover-phone-number .popover__body {
    /* height: 85px; */
    max-height: 85px;
    min-height: 36px;
}

#popover-phoneGroup-number .phonesGroups .phones-list {
    max-height: 85px;
}

#accountInfo,
#adminDetails {
    justify-content: top
}

#addressBookContainer .no-results.no-results-addressBook {
    position: relative
}

    .triangle {
        line-height: 1;
        width:  2rem;
        height: 2rem;
        border-top-right-radius: 75%;
        background-color: #202538;
        text-align: left;
        display: inline-block;
        margin: 1rem;
        position: absolute;
        top: -25px;
    }
        .r-3 {
            right: 3px;
        }
        .r-12 {
            right: 12px;
        }

    .triangle:before,
    .triangle:after {
        content: '';
        position: absolute;
        background-color: inherit;
        width:  100%;
        height: 100%;
        border-top-right-radius: 75%;
    }
      
    .triangle.up { transform: rotate(60deg) skewX(-30deg) scale(1,.866); transform-origin: 30% 90%; }
    .triangle.up:before { transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%); }
    .triangle.up:after  { transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%); }

#addressBook_firsttime {
    top:0; 
    left: 0; 
    bottom: 0; 
    background-color: rgb(0,0,0, .55);
}

#addGroup .no-results span {
    background-size: 81px;
    margin-bottom: 0
}

#addGroup .no-results {
    margin-top: 0px;
}

#add_group .no-results {
    position: static;
    height: auto;
    max-height: 117px
}

#add_group .no-results span {
    background-size: 90px;
    width: 162px;
    margin-bottom: 10px
}

#add_group .no-results div {
    font-size: 12px;
    padding-bottom: 18px
}

#pswd_info {
    display: none;
    float: left;
    background-color: #CCC;
    font-family: "Roboto", sans-serif;
    color: #000;
    padding: 13px 10px;
    width: 350px;
    font-size: 12px;
    position: absolute;
    margin: -3px 0 0 10px;
    height: 115px;
    padding-left: 35px;
    -webkit-box-shadow: 0 0 8px -2px #616161;
    box-shadow: 0 0 8px -2px #616161;
    border-radius: 5px;
    left:65px;
}

#pswd_info ul {
    padding-left:11px;
}

#pswd_info h4 {
    padding-left:5px;
}

#pswd_info li {
    list-style-position: inside;
}

#pswd_info li.invalid {
    padding-left: 5px;
    line-height: 24px;
    color: #ec3f41
}

#pswd_info li.valid {
    padding-left: 5px;
    line-height: 24px;
    color: #3a7d34
}

#UploadAddress {
    margin-left: -25%;
    padding-left: 18px;
    margin-bottom: -35px
}

#popover-reload,
#popover-plan {
    background-color: #eee;
    -webkit-box-shadow: 3px 3px 0 1px rgba(0, 0, 0, 0.08);
    box-shadow: 3px 3px 0 1px rgba(0, 0, 0, 0.08);
    border: 0
}

#popover-reload,
#popover-plan {
    max-width: fit-content;
    width: auto
}

#popover-reload .popover__poiter,
#popover-plan .popover__poiter {
    border-color: #eee
}

#addressBook {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 30px;
    justify-content: space-between;
    overflow: visible !important;
    padding-bottom: 25px;
}

#addressBookHeader,
#adminDetailsHeader {
    grid-template-columns: repeat(2, minmax(650px, 1fr)) !important
}

#addUser {
    background: url(../images/adduser.svg) no-repeat left center;
    background-size: 15px;
}

#importUsers {
    background: url(../images/import.svg) no-repeat left center;
    background-size: 15px;
}

#downloadTemplate {
    background: url(../images/csvdownload.svg) no-repeat left -2px center;
    background-size: 20px
}

#editUser {
    background: url(../images/edit.svg) no-repeat left center;
    background-size: 15px
}

#deleteUser {
    background: url(../images/delete.svg) no-repeat left center;
    background-size: 15px
}

#messageUser {
    background: url(../images/message.svg) no-repeat left center;
    background-size: 15px
}

#addUserToGroup {
    background: url(../images/addgroup.svg) no-repeat left center;
    background-size: 15px
}

#addressBookAlphabet_mobile {
    display: none
}

#redirectBilling,
#redirectPhone {
    text-decoration: underline;
    cursor: pointer;
    color: blue
}

#popover-delete-phone.top .popover__poiter {
    transform: rotate(-136deg);
    top: 145px
}

#contactInfo,
#groupInfo {
    width: 0;
    transform: translateX(280px);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

#contactInfo.open,
#groupInfo.open {
    width: 20vw;
    transform: translateX(0);
}

#contactContainer {
    padding-top: 5.7rem !important;
    opacity: 0
}

#contactContainer input {
    height: 32px;
    background: transparent
}

#continueSession {
    width: 50%;
}

#timeoutClock {
    display: inline-flex;
    height: 40px;
    width: 40px;
    background-image: url(../images/clock.svg);
    background-size: contain;
    background-repeat: no-repeat
}

#groupPhone {
    margin-left: 4rem !important
}

#groupInfoContainer .list-message {
    height: 235px;
    overflow: auto
}

#groupInfoContainer select {
    cursor: pointer;
}

#groupInfoContainer select ~ label.remove{
    display: none;
    padding: 5px;
    top: 3px;
    left: 0;
    text-align: center;
    color: #999;
    cursor: pointer;
    font-weight: 700;
    margin-right: 2px;
    font-size: 20px;
}

#groupInfoContainer select:valid ~ label.remove{
    display: inline-block;
}

#userFName.error,
#userLName.error,
#userPhone.error {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-decoration-color: red !important;
    border: 0 !important;
    color: rgba(154, 154, 154, 1) !important
}

.groupError {
   color :red;
   font-size: 14px !important;
}

#addressBook .groupNameList {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /*text-overflow: ellipsis;*/
    overflow-y: auto;
    line-height: 20px
}

#popover-delete-contact button.close,
#popover-delete-account button.close,
#popover-delete-groupContact button.close{
    font-size: 1.2rem;
    min-height: 28px;
    line-height: 28px;
    padding: 0 3.4rem;
    border-radius: .35rem;
    margin-left: 34px
}

#popover-delete-contact p,
#popover-delete-account p,
#popover-delete-groupContact p {
    font-size: 1.2rem
}

#billingSettingsContainer .wrapper {
    display: contents;
}

#billingSettingsContainer h {
    font-size: .9em;
    padding: 10px;
    color: #1f1f1f;
    text-transform: uppercase
}

#groups .search-icon {
    left: 8%
}

#pswd_info {
    z-index: 9999
}

#messages .widget-message__body h5 {
    max-width: calc(100% - 100px);
}

#messages #most-recent,
#groups #most-recent {
    width: 8.5rem
}
#groups .widget__body {
    min-height: calc(100vh - 180px);
}

#groups .widget__body .no-results {
    margin-top: calc((100vh - 180px)/2 - 180px);
}

#contactDeleteConfirmation {
    top: 0;
    left: 0;
    background: #fff;
    width: 100%;
    height: 100%;
    opacity: .95;
    border-radius: 5px;
    padding: 30px
}

#contactDeleteConfirmation .btn-delete {
    margin-left: 0px;
}

#contactDeleteConfirmation .closeBtn {
    position: absolute;
    right: 30px;
}

#loadAnimation span:after {
    border: 3px solid #f2b94d
}

#groups .select:after,
#messages .select:after {
    top: 8px !important
}
/* ---------------------------------------------- */
/* UPDATE AND REMOVE AND RULES BEGGINING WITH IDS */
/* ---------------------------------------------- */



/* ---------------------------------------------- */
/* ------------------STRUCTURE------------------- */
/* ---------------------------------------------- */
.dropdown-menu.show:not(.message__info-inner) {
    background: linear-gradient(283.39deg, #202638 33.13%, #39415f 148.28%);
    padding: 25px 15px;
    border-radius: 10px
}
.dropdown-menu.show span {
    color: #fff;
    font-size: 14px;
    padding: 0 25px
}
.dropdown-toggle.noicon:after {
    display: none !important
}
.dropdownHR {
    background-color: #9a9a9a
}
.flextable {
    font-size: 14px
}
.main.main--alt {
    flex: 1
}
.sidebar,
.content {
    position: relative
}
.sidebar {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 34.4rem;
    flex: 0 0 34.4rem;
    background-color: #fff;
    width: 100%;
    -webkit-transition: flex .3s ease-in-out;
    -moz-transition: flex .3s ease-in-out;
    -o-transition: flex .3s ease-in-out;
    transition: flex .3s ease-in-out;
}
.sidebar .widget__head {
    padding-top: 6rem;
    min-height: inherit;
}
.sidebar.closedSidebar {
    flex: 0
}
/* ---------------------------------------------- */
/* ------------------STRUCTURE------------------- */
/* ---------------------------------------------- */



/* ---------------------------------------------- */
/* ------------------UTILITIES------------------- */
/* ---------------------------------------------- */
.info {
    content: '';
    background: url(../images/info_icon.svg) no-repeat center;
    background-size: 10px;
    height: 10px;
    width: 10px
}
.no-results {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0
}
.no-results span {
    padding-bottom: 60px;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #000;
    padding: 0;
    margin-bottom: 30px
}
.no-results.no-results-settings {
    height: auto
}
.no-results.no-results-settings,
.sidebar .no-results {
    position: static
}
.no-results .no-user #importUsers,
.no-results .no-user #addUser {
    background-size: 27px;
    padding-left: 37px
}
.no-results.no-results-addressBook .no-user {
    padding-right: 0
}
.no-results .no-user {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding-right: 10%
}
.no-user a {
    color: #212529 !important;
    padding-left: 30px;
    border: 0
}
.content .no-results.no-results-settings span,
.sidebar .no-results span,
.sidebar .no-results span.noMessages {
    background: url(../images/noresults_sidebar.svg) no-repeat center 55%;
    height: 172px;
    width: 172px
}
.content .no-results span,
#groupInfoContainer .no-results span {
    background: url(../images/noresults_content.svg) no-repeat center 55%;
    height: 261px;
    width: 261px
}
.sidebar .no-results span.noMessages {
    background: url(../images/noresults_content.svg) no-repeat center 55%;
    background-size: contain
}
.content .no-results:not(.no-results-settings) div {
    font-size: 24px
}
.errormessage.htmlContent {
    position: relative;
    /* top: 33%; */
    /* left: 4%; */
    color: red
}
.viewIcon {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(../images/iconfinder_eye.svg) center no-repeat;
    background-size: 20px;
    cursor: pointer;
    margin-top: 4px;
    margin-left: 20px
}
.adminRemove.disabled,
#createContactBtn.disabled,
#createGroupBtn.disabled {
    cursor: default;
    color: #cdcdcd
}
#createContactBtn,
#createGroupBtn {
    width: 43px;
    padding: 0px;
}

#createGroupBtn {
    margin-left:-25px;
}

#createGroupName,
#addGroup #search {
    height: 30px;
    border-radius: 8px;
}

.phoneNumber {
    position: relative
}
.phoneNumber a {
    right: -7rem;
    top: 1rem;
    position: absolute;
    width: 10px;
    height: 7px
}
.phoneNumber a:before,
.phoneNumber a:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #000;
    width: 1.4rem
}
.phoneNumber a:before {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg)
}
.phoneNumber a:after {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg)
}
.noOverflow {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}
.cursorPointer {
    cursor: pointer
}
.tick {
    background: url(../images/check.svg) no-repeat center;
    background-position: 288px 5px;
    background-size: 35px;
    background-color: #fff
}
.github-btn {
    position: absolute;
    right: 40px;
    bottom: 50px;
    text-decoration: none;
    padding: 15px 25px;
    border-radius: 4px;
    box-shadow: 0 4px 30px -6px rgba(36, 52, 70, 0.65);
    background: #24292e;
    color: #fff;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 16px;
    text-align: center;
    transition: all .3s ease-in-out
}
.sidebar .no-results {
    margin-top: 126px
}
.logo.aside__logo,
.logo.login,
.chat__btn {
    background-image: url(../images/birdielogo.svg)
}
.nav a:before {
    background-color: #f04d4e
}
.nav a.alert:after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f04d4e;
    display: inline-block;
    margin: 0 10px;
    position: absolute;
    right: 0;
    top: calc(50% - 5px)
}
/* ---------------------------------------------- */
/* ------------------UTILITIES------------------- */
/* ---------------------------------------------- */



/* ---------------------------------------------- */
/* ----------------ALPHABETIZED------------------ */
/* ---------------------------------------------- */
.addressContainer {
    background: rgba(237, 237, 237, 1);
    opacity: 1;
    border: 1px solid rgba(154, 154, 154, 1);
    border-radius: 5px;
    max-height: 232px
}

    /* .addressContainer:last-child {
        margin-bottom: 70px !important;
    } */

.addressContainer input.addGroup,
.addressContainer.new {
    border: 2px dashed rgba(154, 154, 154, .6);
    color: rgba(154, 154, 154, 1)
}

.addressContainer input.addGroup:focus,
.addressContainer.new input:focus {
    color: #000
}

.addressContainer #add_group {
    display: none;
    max-height: 135px;
    position: relative;
    z-index: 1;
    opacity: 1 !important
}

.addressContainer .flextable {
    max-height: 117px
}

    .addressContainer .name {
        width: calc(100% - 38px);
    }
        .addressContainer .name .userFName {
            width: 45px;
        }
        .addressContainer .name .userLName {
            width: inherit;
        }

.addressContainer .selectedGroups {
    top: 12px;
    position: absolute;
    max-height: 50px
}

.addressContainer.new .selectedGroups {
    max-height: 48px
}

.addressContainer .selectedGroups li {
    background-color: #e4e4e4;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: default;
    float: left;
    margin-right: 5px !important;
    margin-top: 5px !important;
    padding: 0 5px !important
}

.addressContainer .selectedGroups li span, .groupMemberDel {
    color: #999;
    cursor: pointer;
    display: inline-block;
    font-weight: 700;
    margin-right: 2px
}


.groupMemberDel {
    position: absolute; 
    right: 0px;
    font-size: 22px;
}

.addressContainer ul {
    list-style-type: none
}

.addressContainer ul li {
    padding: 9px
}

.addressProfileImg {
    min-width: 32px;
    min-height: 32px;
    background: rgba(255, 203, 30, 1);
    border-radius: 50%;
    font-weight: Bold;
    cursor: pointer
}

.addressBookDropdown,
.adminAdd,
.phoneAdd {
    width: 4.8rem;
    height: 4.8rem;
    line-height: 4.8rem;
    background: rgba(255, 203, 30, 1);
    border-radius: 50%;
    color: #000;
    border: 0;
}

.adminAdd strong.h2,
.phoneAdd strong.h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0;
    text-decoration: none;
}

.adminEmail {
    font-size: 12px !important
}

.adminFade {
    z-index: auto !important
}

.alphabet {
    list-style: none
}

.alphabet li {
    font-size: 16px;
    float: left;
    margin: 4px .3vw
}

.alphabet li.active {
    background: rgba(255, 203, 30, 1);
    margin: 0;
    padding: 6px;
    line-height: normal;
    margin-top: -2px;
    margin-bottom: -2px;
}

.alphabet li a {
    cursor: pointer
}

.aside {
    padding: 3rem 0 3.3rem;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.9rem;
    flex: 0 0 8.9rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background-color: #fcfcfc
}

.aside .aside__actions {
    opacity: .3
}

.automatic span:after {
    content: 'Automatic';
    font-size: .8rem;
    text-transform: uppercase;
    color: #78bf5a;
    background: #fff;
    padding: .2rem;
    border-radius: 5px;
    position: absolute;
    top: 0;
    right: -65px
}

.btn {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.btn-add {
    display: inline-block;
    width: 3%;
    height: 18px;
    background: url(../images/plus.svg) no-repeat center;
    cursor: pointer
}

.btn--block {
    display: block;
    padding-left: 0;
    padding-right: 0
}

.btn--gradient {
    border: 0;
    min-height: 54px;
    line-height: 54px;
    color: #fff;
    text-transform: uppercase;
    border-radius: .7rem;
    -webkit-transition: opacity .4s;
    -o-transition: opacity .4s;
    transition: opacity .4s;
    padding: 0 5.1rem;
    font-weight: 700;
    font-size: 1.6rem;
    background: -webkit-gradient(linear, left top, right top, from(#374161), to(#262d43));
    background: -o-linear-gradient(left, #374161 0, #262d43 100%);
    background: linear-gradient(90deg, #374161 0, #262d43 100%);
    -webkit-box-shadow: 3px 3px 0 1px rgba(0, 0, 0, 0.08);
    box-shadow: 3px 3px 0 1px rgba(0, 0, 0, 0.08)
}

.btn--gradient-small {
    font-size: 1.2rem;
    min-height: 28px;
    line-height: 28px;
    padding: 0 4.4rem
}

.btn--gradient:hover {
    color: #ffffff !important;
    opacity: .7
}

.card-form {
    max-width: 570px;
    margin: auto;
    width: 100%
}

.card-form__inner {
    background: #fff;
    box-shadow: 0 30px 60px 0 rgba(90, 116, 148, 0.4);
    border-radius: 10px;
    padding: 35px;
    padding-top: 140px
}

.card-form__row {
    display: flex;
    align-items: flex-start
}

.card-form__col {
    flex: auto;
    margin-right: 35px
}

.card-form__col:last-child {
    margin-right: 0
}

.card-form__col.-cvv {
    max-width: 150px
}

.card-form__group {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap
}

.card-form__group .card-input__input {
    flex: 1;
    margin-right: 15px
}

.card-form__group .card-input__input:last-child {
    margin-right: 0
}

.card-form__button {
    width: 100%;
    height: 55px;
    background: #2364d2;
    border: 0;
    border-radius: 5px;
    font-size: 22px;
    font-weight: 500;
    font-family: "Source Sans Pro", sans-serif;
    box-shadow: 3px 10px 20px 0 rgba(35, 100, 210, 0.3);
    color: #fff;
    margin-top: 20px;
    cursor: pointer
}

.card-item {
    max-width: 430px;
    height: 270px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2;
    width: 100%
}

.card-item.-active .card-item__side.-front {
    transform: perspective(1000px) rotateY(180deg) rotateX(0deg) rotateZ(0deg)
}

.card-item.-active .card-item__side.-back {
    transform: perspective(1000px) rotateY(0) rotateX(0deg) rotateZ(0deg)
}

.card-item__focus {
    position: absolute;
    z-index: 3;
    border-radius: 5px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all .35s cubic-bezier(0.71, 0.03, 0.56, 0.85);
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.65)
}

.card-item__focus:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #08142f;
    height: 100%;
    border-radius: 5px;
    filter: blur(25px);
    opacity: .5
}

.card-item__focus.-active {
    opacity: 1
}

.card-item__side {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 60px 0 rgba(14, 42, 90, 0.55);
    transform: perspective(2000px) rotateY(0deg) rotateX(0deg) rotate(0deg);
    transform-style: preserve-3d;
    transition: all .8s cubic-bezier(0.71, 0.03, 0.56, 0.85);
    backface-visibility: hidden;
    height: 100%
}

.card-item__side.-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: perspective(2000px) rotateY(-180deg) rotateX(0deg) rotate(0deg);
    z-index: 2;
    padding: 0;
    height: 100%
}

.card-item__side.-back .card-item__cover {
    transform: rotateY(-180deg)
}

.card-item__bg {
    max-width: 100%;
    display: block;
    max-height: 100%;
    height: 100%;
    width: 100%;
    object-fit: cover
}

.card-item__cover {
    height: 100%;
    background-color: #1c1d27;
    position: absolute;
    height: 100%;
    background-color: #1c1d27;
    left: 0;
    top: 0;
    width: 100%;
    border-radius: 15px;
    overflow: hidden
}

.card-item__cover:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(6, 2, 29, 0.45)
}

.card-item__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 40px;
    padding: 0 10px
}

.card-item__chip {
    width: 60px
}

.card-item__type {
    height: 45px;
    position: relative;
    display: flex;
    justify-content: flex-end;
    max-width: 100px;
    margin-left: auto;
    width: 100%
}

.card-item__typeImg {
    max-width: 100%;
    object-fit: contain;
    max-height: 100%;
    object-position: top right
}

.card-item__info {
    color: #fff;
    width: 100%;
    max-width: calc(100% - 85px);
    padding: 10px 15px;
    font-weight: 500;
    display: block;
    cursor: pointer
}

.card-item__holder {
    opacity: .7;
    font-size: 13px;
    margin-bottom: 6px
}

.card-item__wrapper {
    font-family: "Source Code Pro", monospace;
    padding: 25px 15px;
    position: relative;
    z-index: 4;
    height: 100%;
    text-shadow: 7px 6px 10px rgba(14, 42, 90, 0.8);
    user-select: none
}

.card-item__name {
    font-size: 18px;
    line-height: 1;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase
}

.card-item__nameItem {
    display: inline-block;
    min-width: 8px;
    position: relative
}

.card-item__number {
    font-weight: 500;
    line-height: 1;
    color: #fff;
    font-size: 27px;
    margin-bottom: 35px;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer
}

.card-item__numberItem {
    width: 16px;
    display: inline-block
}

.card-item__numberItem.-active {
    width: 30px
}

.card-item__content {
    color: #fff;
    display: flex;
    align-items: flex-start
}

.card-item__date {
    flex-wrap: wrap;
    font-size: 18px;
    margin-left: auto;
    padding: 10px;
    display: inline-flex;
    width: 80px;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer
}

.card-item__dateItem {
    position: relative
}

.card-item__dateItem span {
    width: 22px;
    display: inline-block
}

.card-item__dateTitle {
    opacity: .7;
    font-size: 13px;
    padding-bottom: 6px;
    width: 100%
}

.card-item__band {
    background: rgba(0, 0, 19, 0.8);
    width: 100%;
    height: 50px;
    margin-top: 30px;
    position: relative;
    z-index: 2
}

.card-item__cvv {
    text-align: right;
    position: relative;
    z-index: 2;
    padding: 15px
}

.card-item__cvv .card-item__type {
    opacity: .7
}

.card-item__cvvTitle {
    padding-right: 10px;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 5px
}

.card-item__cvvBand {
    height: 45px;
    background: #fff;
    margin-bottom: 30px;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    color: #1a3b5d;
    font-size: 18px;
    border-radius: 4px;
    box-shadow: 0 10px 20px -7px rgba(32, 56, 117, 0.35)
}

.card-list {
    margin-bottom: -130px
}

.card-input {
    margin-bottom: 20px
}

.card-input__label {
    font-size: 14px;
    margin-bottom: 5px;
    font-weight: 500;
    color: #1a3b5d;
    width: 100%;
    display: block;
    user-select: none
}

.card-input__input {
    height: 50px !important;
    border-radius: 5px;
    box-shadow: none;
    border: 1px solid #ced6e0;
    transition: all .3s ease-in-out;
    font-size: 18px;
    padding: 5px 15px;
    background: 0;
    color: #1a3b5d;
    font-family: "Source Sans Pro", sans-serif
}

.card-input__input:hover,
.card-input__input:focus {
    border-color: #3d9cff
}

.card-input__input:focus {
    box-shadow: 0 10px 20px -13px rgba(32, 56, 117, 0.35)
}

.card-input__input.-select {
    -webkit-appearance: none;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUxJREFUeNrM1sEJwkAQBdCsngXPHsQO9O5FS7AAMVYgdqAd2IGCDWgFnryLFQiCZ8EGnJUNimiyM/tnk4HNEAg/8y6ZmMRVqz9eUJvRaSbvutCZ347bXVJy/ZnvTmdJ862Me+hAbZCTs6GHpyUi1tTSvPnqTpoWZPUa7W7ncT3vK4h4zVejy8QzM3WhVUO8ykI6jOxoGA4ig3BLHcNFSCGqGAkig2yqgpEiMsjSfY9LxYQg7L6r0X6wS29YJiYQYecemY+wHrXD1+bklGhpAhBDeu/JfIVGxaAQ9sb8CI+CQSJ+QmJg0Ii/EE2MBiIXooHRQhRCkBhNhBcEhLkwf05ZCG8ICCOpk0MULmvDSY2M8UawIRExLIQIEgHDRoghihgRIgiigBEjgiFATBACAgFgghEwSAAGgoBCBBgYAg5hYKAIFYgHBo6w9RRgAFfy160QuV8NAAAAAElFTkSuQmCC");
    background-size: 12px;
    background-position: 90% center;
    background-repeat: no-repeat;
    padding-right: 30px
}

.chat {
    position: absolute;
    min-height: 100%;
    left: 8.8rem;
    right: 9.5rem;
    top: 5.5rem;
    opacity: 0;
    pointer-events: none
}

.chat h4 {
    margin-bottom: 0
}

.chat__back {
    display: none
}

.chat .chat__head {
    position: fixed;
    top: 0;
    left: 52.1rem;
    right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 6rem 9.5rem 5.5rem 0;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(62%, #f6f6f6), to(rgba(246, 246, 246, 0)));
    background: -o-linear-gradient(top, #f6f6f6 62%, rgba(246, 246, 246, 0) 100%);
    background: linear-gradient(180deg, #f6f6f6 62%, rgba(246, 246, 246, 0) 100%);
    z-index: 5
}

#popover-phoneGroup-number.popover--phone-numbers {
    top: calc(6rem + 20px) !important;

}

#popover-phoneGroup-number.popover--phone-numbers.position-fixed {
    left: inherit !important;
    right: 6.5rem;
}

#popover-phoneGroup-number.popover--phone-numbers.position-fixed.hasSidebar {
    right: calc(20vw + 6.5rem);
}

.chat .chat__head-entry {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.chat .chat__head-entry h4 {
    margin: 0 1.8rem 0 1.8rem
}

.chat .chat__head-entry p,
.chat .chat__head-entry .totalMessage {
    font-size: .8rem;
    margin-bottom: 0;
    color: #cacaca
}

.chat .chat__head-entry .totalMessage { 
    margin-left: 1.8rem;
}

.chat .chat__head-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: .8rem;
    margin-bottom: 0;
    color: #cacaca
}

.chat .chat__head-actions a {
    text-decoration: none;
    display: inline-block
}

.chat .chat__head-actions .editPhone {
    position: relative;
    display: inline-block;
    top: .2rem
}

.chat .chat__head-actions a~a {
    margin-left: 3.5rem
}

.chat .chat__body {
    padding: 55px 0 175px;
    width: 100%;
    height: fit-content;
}

    .chat .chat__body .noMsgContainer {
        height: 100%;
    }

.chat .chat__foot {
    position: fixed;
    bottom: 0;
    right: 2rem;
    padding-right: 7.8rem;
    left: 52.1rem;
    padding-top: 6rem !important;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(62%, #f6f6f6), to(rgba(246, 246, 246, 0)));
    background: -o-linear-gradient(bottom, #f6f6f6 62%, rgba(246, 246, 246, 0) 100%);
    background: linear-gradient(0deg, #f6f6f6 62%, rgba(246, 246, 246, 0) 100%);
    z-index: 6
}

.chat .chat__foot-inner {
    position: relative;
    border-top: solid 5px #fff;
}

.chat .chat__head,
.chat .chat__foot {
    right: 0;
    -webkit-transition: right 300ms ease-in-out;
    -moz-transition: right 300ms ease-in-out;
    -o-transition: right 300ms ease-in-out;
    transition: right 300ms ease-in-out;
}

.chat .chat__head.open,
.chat .chat__foot.open {
    right: 20vw;
}

.chat .chat__btn {
    position: absolute;
    top: 2.9rem;
    right: .6rem;
    display: inline-block;
    width: 2.9rem !important;
    height: 2.9rem !important;
    background-size: contain;
    background-position: center center
}

.chat.is-active {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    opacity: 1;
    pointer-events: all;
    /* display: flex; */
}

.js-popover[href="#sendFromNumber"] {
    position: absolute;
    top: 5px;
    right: .6rem;
    display: inline-block;
    width: 11px;
    height: 11px;
    margin: 0 !important;
    padding: 0 !important;
}

.contactInfo-icon {
    width: 32px;
    height: 32px
}

.contactInfo-icon img {
    height: 20px
}

.contactAddress {
    flex: 1
}

#contactAddress input {
    text-overflow: ellipsis;
}

.contactHR {
    background-color: rgba(154, 154, 154, 0.6)
}

.contactPanelBtn {
    cursor: pointer;
    border-radius: 8px;
    height: 48px;
    width: 135px;
    border: 2px solid #ffcb1e;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Roboto", sans-serif;
    max-width: 49%;
}

.contactPanelBtn.filled {
    background-color: #ffcb1e
}

.btn-delete:not(.js-delete-phone) {
    padding: 0 2rem;
    width: 85px;
    height: 28px;
    margin-left: 7px;
    display: inline-block;
}

.contactPanelBtn.closeBtn {
    background-color: gray;
    border: gray;
    display: inline-block;
    margin-left: 54px;
    width: 85px;
    height: 28px;
}

.content {
    position: relative;
    height: 100vh;
    z-index: 2;
    background-color: transparent;
    padding: 6rem 9.5rem 0rem 8.8rem;
    -webkit-box-flex: 1;
    -ms-flex: 1 1;
    flex: 1 1;
    background-color: #f6f6f6;
    overflow: auto
}

.content--settings {
    padding: 8.7rem 13.5rem 3rem 27.4rem
}

.content--authentication {
    padding: 0
}

.content--authentication .content__image,
.content--authentication .content__image img {
    width: 100%;
    height: 100%
}

.content--authentication .content__image img {
    -o-object-fit: cover;
    object-fit: cover
}

.content--authentication .content__title {
    font-size: 7.504rem;
    font-weight: 300;
    color: #f3f3f3;
    text-shadow: 0 4px 5px #8e0101;
    text-align: center;
    width: 80%;
    position: absolute;
    top: 48%;
    left: 46%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.content--small .content__title {
    font-size: 1.9rem;
    margin-bottom: 11.5rem
}

.content--small .content__entry {
    font-size: 1.3rem;
    font-weight: 500;
    margin-bottom: 2.1rem
}

.content--small .content__entry strong {
    font-weight: 800
}

.content--table .content__title {
    position: relative;
    display: inline-block;
    margin-bottom: 5.3rem
}

.content--table .content__title a {
    position: absolute;
    top: .6rem;
    right: -5.2rem;
    width: 10px;
    height: 7px
}

.content--table .content__title a:before,
.content--table .content__title a:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #000;
    width: 1.4rem
}

.content--table .content__title a:before {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg)
}

.content--table .content__title a:after {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.default p {
    position: relative;
    display: inline-block
}

.default div {
    font-size: .8rem;
    text-transform: uppercase;
    color: #9b9b9b;
    background: #eee;
    padding: .2rem;
    border-radius: 5px;
    cursor: pointer
}

.default.active div {
    color: #78bf5a;
    background: #fff
}

.field {
    border: 0;
    border-radius: 7px;
    background-color: #fff;
    height: 6.4rem;
    padding: 0 3.5rem;
    width: 100%;
    color: #000;
    font-size: 1.6rem;
    font-weight: 500
}

.field::-webkit-input-placeholder {
    color: #bcbcbc
}

.field::-moz-placeholder {
    color: #bcbcbc
}

.field:-ms-input-placeholder {
    color: #bcbcbc
}

.field::-ms-input-placeholder {
    color: #bcbcbc
}

.field::placeholder {
    color: #bcbcbc
}

.field:-ms-input-placeholder {
    color: #bcbcbc
}

.field::-ms-input-placeholder {
    color: #bcbcbc
}

.field--small {
    font-size: 1.4rem;
    padding: 0 2.5rem;
    height: 4.7rem;
    background: #fcfcfc
}

.field--textarea {
    width: 100%;
    height: 12.7rem;
    padding: 2.9rem 3.4rem 1rem;
    border: 0;
    color: #000;
    font-size: 1.6rem !important;
    background-color: transparent;
    resize: none
}

.field--textarea::-webkit-input-placeholder {
    color: #c7c7c7
}

.field--textarea::-moz-placeholder {
    color: #c7c7c7
}

.field--textarea:-ms-input-placeholder {
    color: #c7c7c7
}

.field--textarea::-ms-input-placeholder {
    color: #c7c7c7
}

.field--textarea::placeholder {
    color: #c7c7c7
}

.form .form__label {
    display: block;
    font-weight: 500;
    font-size: 1.1rem;
    line-height: 2.18;
    color: #c6c6c6;
    margin: 0 3.8rem;
    min-height: 2.3rem
}

.form .form__row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    max-width: 74.5rem
}

.form .form__row .form__controls {
    max-width: 50%;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%
}

.form .form__row .form__controls+.form__controls {
    padding-left: 2rem
}

.form .form__line {
    display: block;
    background-color: #fff;
    height: .6rem;
    width: 100%;
    margin: 2rem 0;
    max-width: 74.5rem
}

.form .form__actions {
    margin-top: 7.7rem
}

.form .form__title h3 {
    margin-bottom: 8rem
}

.form .form__title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.form .form__title img {
    height: 2rem;
    max-width: 1rem;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 1rem;
    flex: 0 0 1rem;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    display: none
}

.form--authentication .form__group+.form__group {
    margin-top: 3.1rem
}

.form--authentication .form__row {
    width: 100%
}

.form--authentication .form__row+.form__row {
    margin-top: .5rem
}

.form--authentication .form__col {
    width: 100%
}

.form--authentication .form__col--1of2 {
    width: 50%
}

.form--authentication .form__row .form__controls {
    max-width: 100%
}

.form--authentication .form__actions {
    margin-top: 3.1rem
}

.form--authentication .form__btn {
    min-height: 31px;
    line-height: 31px;
    width: 100%
}

.grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap
}

.grid .grid__col {
    max-width: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1 1;
    flex: 1 1
}

.grid .grid__col--1of2 {
    max-width: 50%;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%
}

.group,
#sendFromNumber .phone-number {
    font-size: 1.1rem;
    font-weight: 700;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.group p,
#sendFromNumber .phone-number p {
    margin: 0
}

.group p a,
#sendFromNumber .phone-number p a {
    text-decoration: none
}

#sendFromNumber .phone-number p a {
    display: flex;
    align-items: center;
}

.groupCustomSelect {
    position: relative
}

.groupInformation a:after {
    top: 65px;
}

.nonExgroup:after,
.groupCustomSelect a:after,
.reload-select a:after,
.js-popover[href="#sendFromNumber"]:after {
    content: '';
    position: absolute;
    border: 1px solid;
    padding: .3rem;
    border-color: transparent #676c67 #676c67 transparent;
    -webkit-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg)
}

.nonExgroup:after {
    margin-top: -5px;
}

.groupInformation {
    cursor: pointer;
    width: 12px;
    background-position: 2px 0;
    /*margin-right:-22px;*/
    right: 248px;
    position: absolute;
}

.groupInformation.exclusiveGroup {
    right: 272px;
}

.groups ul,
#sendFromNumber ul {
    list-style: none
}

.groups li,
#sendFromNumber li {
    padding: 1.2rem 1.1rem 1.2rem 1.7rem;
    border-radius: 6px
}

.groups li+li,
#sendFromNumber li+li {
    margin-top: .7rem
}

.groups .is-current,
#sendFromNumber .is-current {
    -webkit-box-shadow: 0 0 8px -2px #616161;
    box-shadow: 0 0 8px -2px #616161;
    background: #fff
}

.g-recaptcha {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.ico {
    width: 100%;
    height: 100%
}

.ico--plus {
    width: 1rem;
    height: 1rem
}

.ico--done {
    width: 1rem;
    height: 1rem
}

[class*="ico-"] {
    display: inline-block;
    vertical-align: middle;
    font-size: 0
}

[class*="ico-"] svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    -webkit-transition: fill .3s ease;
    -o-transition: fill .3s ease;
    transition: fill .3s ease
}

[class*="ico-"] g,
[class*="ico-"] path {
    stroke: inherit;
    fill: inherit
}

.initials {
    position: relative;
    display: inline-block;
    width: 3.8rem;
    height: 3.8rem;
    line-height: 3.8rem;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    background-color: #ffcb1e;
    font-weight: 500;
    font-size: 1.8rem;
    text-shadow: 2px 1px 1px rgb(0 0 0 / 20%) !important
}

.initials:before {
    opacity: 1;
    content: '';
    position: absolute;
    display: inline-block;
    height: 1.1rem;
    width: 1.1rem;
    top: 0;
    right: 0;
    border-radius: 50%;
    background-color: #fff;
    transition: background-color 1s;
    -webkit-transition: background-color 1s;
}

.initials:after {
    opacity: 1;
    content: '';
    position: absolute;
    top: 3.4px;
    right: 2.9px;
    height: .5rem;
    width: .5rem;
    border-radius: 50%;
    background-color: #ff5538;
    transition: background-color 1s;
    -webkit-transition: background-color 1s;
}

.initials.addcontact {
    content: '';
    background-image: url("../images/addcontact.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 17px
}

.initials.contact__initials {
    background-color: #000 !important;
    text-shadow: none !important
}

.initials.readMessage::after,
.initials.readMessage::before {
    background-color: transparent !important;
    transition: background-color 1s;
    -webkit-transition: background-color 1s;
}

.initials.unreadMessage::after {
    background-color: #f04d4e !important;
    transition: background-color 1s;
    -webkit-transition: background-color 1s;
}

.messageContenteditable {
    max-width: 73rem;
}

.statusDot {
    height: 6px;
    width: 6px;
    border-radius: 50%;
    display: inline-block;
}
.icon-Sent {
    background-color: #28a745
}
.icon-Delivered {
    background-color: #262d43
}
.icon-Queued {
    background-color: grey
}
.icon-Delivery.Failed,
.icon-Error {
    background-color: red
}

.item-status {
    display: block;
    float: right;
    width: 32px;
    height: 9px;
    position: relative
}

.item-status.green {
    background: url(../images/status_green.png) no-repeat left center
}

.item-status.red {
    background: url(../images/status_red.png) no-repeat left center
}

.js-popover {
    text-decoration: none;
}

.list-settings .d-flex {
    border-radius: 5px;
    background-color: #eee;
    width: 85%;
    margin: auto;
    cursor: pointer;
    font-size: 16px;
    padding: 25px
}

.list-settings .d-flex.active {
    background-color: #f2b94d;
    color: #fff
}

.list-settings .d-flex:hover:not(.active) {
    background-color: #fbdfaa
}

.list-settings .widget-message--active {
    background-color: #fff !important
}

.logo {
    display: block;
    width: 2.6rem;
    height: 2.8rem;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0 auto
}

.logo.aside__logo,
.logo.login,
.chat__btn {
    background-image: url(../images/birdielogo.svg)
}

.logo.aside__logo {
    display: block;
    width: 3.6rem;
    height: 3.6rem
}

.logo.timeout {
    display: block;
    width: 5rem;
    height: 5rem
}

.main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.message {
    position: relative;
    max-width: max-content;
    margin: 0 0 0 auto;
    text-align: right
}

.message:not(.message--user .message__text) {
    padding: 1.4rem 0 1.6rem 5.5rem !important
}

.message p {
    margin-bottom: 0
}

.message .message__initials {
    position: absolute;
    bottom: 0;
    left: -55px;
    height: 3.6rem;
    width: 3.6rem;
    line-height: 3.6rem
}

.message .message__initials:before,
.message .message__initials:after {
    display: none
}

.message .message__text {
    display: inline-block;
    padding: 1.4rem 3rem 1.6rem 5.5rem;
    font-weight: 500;
    font-size: 1.4rem !important;
    line-height: 1.52;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 46px;
    border-top-right-radius: 13px;
    border-bottom-right-radius: 10px;
    letter-spacing: -.015em
}

.message .message__text-holder~.message__text-holder {
    margin-top: 1.1rem
}

.message .message__info {
    position: relative;
    padding: .4rem 1rem;
    text-align: right;
    width: 100%;
    white-space: nowrap;
}

.message .message__info a {
    color: #cacaca;
    font-size: .8rem;
    text-decoration: none
}

.message .message__info-inner.deliverFaild .msg-Sent,
.notinlistmsg {
    display: none
}

.message--admin .message__text {
    background: -webkit-gradient(linear, left top, right top, from(#374161), to(#262d43));
    background: -o-linear-gradient(left, #374161 0, #262d43 100%);
    background: linear-gradient(90deg, #374161 0, #262d43 100%);
    color: #fff;
    position: relative;
    width: 100%;
    max-width: 455px
}

.message--admin .message__text.waiting {
    background: unset;
    color: #bfbfbf;
    animation-duration: 1.8s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f3f3f3;
    background: linear-gradient(to right, #f4f4f4 26%, #eaeaea 38%, #f4f4f4 50%);
    background-size: auto;
    background-size: 1000px 640px;
    position: relative
}

.message .message__text.msgerror,
.message .message__text.testmode {
    background: grey
}

.message .message__text.msgerror:after {
    content: '';
    position: absolute;
    background-image: url("../images/error.svg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 15px;
    height: 15px;
    left: -30px;
    top: calc(50% - 9px)
}

.message .message__text.testmode:after {
    content: '';
    position: absolute;
    background-image: url(../images/testing_icon.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    left: -30px;
    top: calc(50% - 12px)
}

.message .message__toggle {
    position: relative
}

.message .message__toggle:before {
    content: '';
    position: absolute;
    top: .2rem;
    left: -1.5rem;
    width: .4rem;
    height: .4rem;
    border: 1px solid #000;
    border-top: 0;
    border-left: 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    -o-transition: transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease, -webkit-transform .3s ease
}

.message .message__toggle.is-active:before {
    top: .4rem;
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg)
}

.message .message__info span {
    display: inline-block;
    margin-left: 2.1rem;
    color: #000;
    font-size: 1rem;
    font-weight: 700
}

.message .message__info-inner {
    position: absolute;
    right: 0 !important;
    transform: unset !important;
    top: unset !important;
    left: unset !important;
    z-index: 4;
    /* padding: .7rem 2.5rem .7rem 3.1rem; */
    border-radius: 6px;
    background-color: #fff;
    -webkit-box-shadow: 5px 0 2px 0 #e5e5e5;
    box-shadow: 5px 0 2px 0 #e5e5e5;
    /* pointer-events: none; */
    opacity: 0;
    -webkit-transition: opacity .3s ease;
    -o-transition: opacity .3s ease;
    transition: opacity .3s ease;
    -webkit-box-shadow: 3px 3px 1px 0 #e5e5e5 !important;
    box-shadow: 3px 3px 1px 0 #e5e5e5 !important;
    border: 0;
    max-width: 550px;
    z-index: 1000 !important;
    max-height: 170px;
}

.message .message__info-inner.show {
    opacity: 1 !important
}

.message .message__info-inner ul {
    list-style-type: none;
    max-height: 162px;
    padding: .8rem 2.5rem .1rem 2.5rem;
}

.message .message__info-inner li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 1.3rem 0
}

.message .message__info-inner li:not(.d-none)~li {
    border-top: 2px solid #eaeaea
}

.message .message__info-inner span {
    margin: 0;
    text-align: left;
    font-size: .9rem;
    color: #9a9a9a;
    padding: .3rem 0;
    white-space: nowrap
}

.message .message__info-inner a {
    color: #000;
    display: inline-block;
    margin-left: .2rem
}

.message .message__info-inner span~span {
    text-align: right
}

.message .message__info-inner.is-active {
    opacity: 1;
    pointer-events: all
}

.message .message__toggle:before {
    position: initial !important;
    margin-right: 10px;
    width: .5rem !important;
    height: .5rem !important;
    margin-top: -2px
}

.message~.message {
    margin-top: 3.7rem
}

.message--user {
    margin: 0 auto 0 0;
    padding: 0 0 0 5.6rem;
    text-align: left
}

.message--user .message__text {
    padding: 1.9rem 3.8rem 1.8rem 3rem;
    border-top-right-radius: 46px;
    border-bottom-right-radius: 16px;
    border-top-left-radius: 13px;
    border-bottom-left-radius: 10px;
    background: #fff;
    color: #000;
}

.message--user .message__info {
    text-align: left
}

.message--user .message__info span {
    color: #cacaca;
    font-size: .8rem;
    margin-left: 2.2rem
}

.message--user .message__info span.contact_name {
    color: #000;
    font-size: 1rem;
    font-weight: 700;
}

.hoverMessage {
    font-size: 1.0rem;
}

.message .message__info-inner.contact-message-logs {
    right: auto !important;
    min-width: 200px;
}
.message .message__info-inner.contact-message-logs ul {
    margin-bottom: 0;
    padding-top: .1rem;
}

.messageUserSelect {
    height: 0;
    overflow: hidden; 
    background: #ededed; 
    border-bottom-left-radius: 8px; 
    border-bottom-right-radius: 8px; 
    margin-top: 0px;
    -webkit-transition: height 700ms, margin-top 100ms;
    -o-transition: height 700ms, margin-top 100ms;
    transition: height 700ms, margin-top 100ms;
}

    .messageUserSelect.open {
        height: 130px;
        margin-top: -5px;
    }

    .messageUserSelect div:hover,
    .groupselectmembers:hover {
        background-color: rgb(255, 203, 30, .55);
    }
    
    .groupselectmembers {
        border-radius: 8px;
    }

.modal-dialog.modal-lg {
    display: flex;
    height: 100% !important;
    width: 100% !important;
    justify-content: center;
    align-items: center;
    margin: auto
}

.msg-note {
    position: absolute;
    font-size: 9px;
    opacity: 0;
}

    .msg-note.first {
        top: 14%;
        right: 30px;
    }
        .msg-note.first.sent {
            animation: noteLeft 700ms 1 linear;
        }
    .msg-note.second {
        top: 14%;
        right: 24px;
    }
        .msg-note.second.sent {
            animation: noteCenter 700ms 1 linear;
        }
    .msg-note.third {
        top: 17%;
        right: 12px;
    }
        .msg-note.third.sent {
            animation: noteRight 700ms 1 linear;
        }

.nav {
    width: 100%
}

.nav li~li {
    margin-top: 2.2rem
}

.nav li.is-active a:before {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%)
}

.nav a {
    display: block;
    padding: 2rem .4rem;
    text-align: center;
    position: relative
}

.nav a:hover:before {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%)
}

.nav a:before {
    content: '';
    position: absolute;
    top: 0;
    left: -.7rem;
    bottom: 0;
    width: 1.1rem;
    border-radius: 2rem;
    background-color: #ff5538;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    -o-transition: transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease, -webkit-transform .3s ease
}

.nav a.alert:after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff5538;
    display: inline-block;
    margin: 0 25px;
    position: absolute;
    right: 0;
    top: calc(40% - 5px)
}

.nav--margin-top {
    margin-top: -88px
}

.phone {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.phone .phone__number {
    min-width: 82px
}

.phone .phone__price {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0
}

.phoneError {
    height: 48px;
    color: red;
}

.phonesGroups ul,
.phones ul {
    list-style: none
}
.phonesGroups .phones-list ul {
    margin-right: 7px;
    /* min-height: 40px; */
}

.phonesGroups li+li,
.phones li+li {
    margin-top: .9rem
}

.phone__meta {
    content: '';
    background-image: url("../images/plus.svg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 15px;
    height: 15px;
}

    input:checked ~ label .phone__meta {
        background-image: url("../images/yellow_checkmark.svg");
    }

.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 26.8rem;
    background: #fff;
    -webkit-box-shadow: 0 0 8px -2px #616161;
    box-shadow: 0 0 8px -2px #616161;
    border-radius: 10px;
    padding: 1.3rem 0 1.1rem;
    opacity: 0;
    pointer-events: none
}

.popover .popover__poiter {
    position: absolute;
    top: -6px;
    left: 20rem;
    border: solid;
    border-color: #fff transparent transparent transparent;
    border-width: 2rem 2rem 0 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

#popover-groupExclusive .popover__poiter{
    left:18rem;
}

#popover-plan .popover__poiter {
    left: 6rem;
}

.popover .popover__inner {
    padding: 0 2rem
}

.popover .popover__head {
    margin-bottom: 1.6rem
}

.popover .popover__body {
    margin-bottom: 1.9rem
}

.popover .popover__action {
    padding: 0 1rem
}

.popover .popover__action a {
    padding: 0;
    min-width: 100%
}

.popover-tooltip {
    display: none
}

.popover-tooltip.active {
    display: inline-flex;
    background: #fff;
    height: 200px;
    width: 200px;
    position: absolute;
    top: 20px;
    right: 0
}

.popover--is-visible {
    opacity: 1;
    pointer-events: auto
}

.popover--phone-numbers {
    padding: 2.5rem;
    margin-top: 20px;
    width: auto;
    max-width: 350px !important
}
#popover-phoneGroup-number.popover--phone-numbers {
    min-width: 300px;
}

.popover--phone-numbers .popover__poiter {
    /*left: inherit;*/
    /*right: 5.8rem;*/
    border-radius: 40%;
    top: -8px
}
.popover--phone-numbers.position-fixed .popover__poiter {
    left: inherit;
    right: 5.8rem;
}

.popover--delete-phone {
    top: 70%;
    left: 50%;
    padding: 2.3rem 0 .9rem
}

.popover--delete-phone .popover__head {
    margin-bottom: 1rem
}

.popover--delete-phone .popover__notice {
    font-size: 1.3rem;
    line-height: 1.61;
    color: #f04d4e;
    max-width: 13.9rem
}

.popover--delete-phone .popover__body {
    margin-bottom: 2.7rem
}

.popover--delete-phone .popover__entry {
    font-size: 1.1rem;
    font-weight: 700
}

.popover--group {
    top: 30%;
    left: 50%;
    background: #f0f0f0;
    padding: 1.3rem .8rem 1.1rem .8rem;
    max-height: 200px;
    overflow: auto
}

.popover--group .popover__poiter {
    border-color: #f0f0f0 transparent transparent transparent
}

.position-relative .primaryBtn {
    position: absolute;
    top: 0
}

.position-relative .primaryBtn:hover {
    position: absolute;
    top: 3px;
    left: 3px;
    -webkit-box-shadow: none !important;
    box-shadow: none !important
}

#sendFromNumber {
    background: #f0f0f0;
    padding: 1.3rem .8rem 1.1rem .8rem;
    max-width: 22rem;
}
#sendFromNumber .is-default {
    color: #78bf5a;
    font-size: .8rem;
    text-transform: uppercase;
    padding-left: 9px;
    border-radius: 5px;
}

.primaryBtn {
    border: 0;
    width: auto;
    min-height: 31px;
    color: #fff;
    text-transform: uppercase;
    border-radius: .7rem;
    -webkit-transition: opacity .4s;
    -o-transition: opacity .4s;
    transition: opacity .4s;
    padding: 0 5.1rem;
    font-weight: 700;
    font-size: 1.6rem;
    background: #ffcb1e;
    -webkit-box-shadow: 3px 3px 0 1px rgba(0, 0, 0, 0.08);
    box-shadow: 3px 3px 0 1px rgba(0, 0, 0, 0.08)
}

.reloadList,
.planList {
    height: 40px
}

.reloadList span,
.planList span {
    height: 36px;
    width: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
}

.planList span.plan-item {
    width: auto;
    min-width: 110px;
}

.reloadList .selected,
#reloadInput.selected,
.planList .selected {
    background-color: #fff;
    border-radius: 5px;
    background-image: url(../images/check.png);
    background-repeat: no-repeat;
    background-position: right 10px center;
    z-index: 1;
    background-size: 10px
}

.reload-select a:after {
    top: 6px
}

.search {
    font-size: 1.1rem;
    font-weight: 700;
    color: #d2d2d2
}

.search form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.search label {
    width: 100%
}

.search .search__field {
    position: relative;
    border-image-source: linear-gradient(#262d43, #262d43);
    border-width: 0 0 2px;
    border-image-slice: 1;
    color: #000;
    background-color: transparent;
    width: 10.5rem
}

.search-bar img {
    right: 7.5rem;
    top: 4.5rem
}

.search-bar.position-relative img {
    right: 1.5rem;
    top: 1.8rem;
}

.search-bar input {
    margin-top: 20px;
    background: #ededed;
    border-radius: 8px;
    height: 48px !important
}

#newuserMessage {
    margin-bottom: 20px;
}
#newuserMessage .search-bar input {
    margin-top: 0px;
}

.select-alt {
    max-width: 74.5rem;
    position: relative
}

.select-alt:after {
    content: '';
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 3rem;
    background-image: url("../images/icon-arrow-down.png");
    background-size: cover;
    background-position: center;
    height: .4rem;
    width: .8rem;
    pointer-events: none
}

.select-alt select::-ms-expand {
    display: none
}

.select-alt select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    border-radius: 7px;
    background-color: #fff;
    height: 6.4rem;
    padding: 0 3.5rem;
    width: 100%;
    color: #bcbcbc;
    font-size: 1.6rem;
    font-weight: 500
}

.select {
    border: 0;
    text-align: right;
    margin: 0 3.6rem 1.3rem;
    position: relative
}

.select:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.3rem !important;
    background-color: #fff;
    pointer-events: none
}

.select:after {
    content: '';
    position: absolute;
    top: 47%;
    right: 1.2rem;
    width: .5rem;
    height: .5rem;
    -webkit-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
    border: 1px solid #000;
    border-left: 0;
    border-top: 0;
    pointer-events: none
}

.select select {
    color: #adadad;
    font-size: 1rem;
    border: 0;
    background: transparent
}

.select select::-ms-expand {
    display: none
}

.settingscontext {
    padding: .5vh 4vw;
    max-width: calc(1440px+8vw)
}

.shell {
    max-width: calc(1140px+15px * 2);
    padding-left: 15px;
    padding-right: 15px;
    margin: auto;
    width: 100%
}

.shell--fluid {
    max-width: none
}

.slide-fade-up-enter-active {
    transition: all .25s ease-in-out;
    transition-delay: .1s;
    position: relative
}

.slide-fade-up-leave-active {
    transition: all .25s ease-in-out;
    position: absolute
}

.slide-fade-up-enter {
    opacity: 0;
    transform: translateY(15px);
    pointer-events: none
}

.slide-fade-up-leave-to {
    opacity: 0;
    transform: translateY(-15px);
    pointer-events: none
}

.slide-fade-right-enter-active {
    transition: all .25s ease-in-out;
    transition-delay: .1s;
    position: relative
}

.slide-fade-right-leave-active {
    transition: all .25s ease-in-out;
    position: absolute
}

.slide-fade-right-enter {
    opacity: 0;
    transform: translateX(10px) rotate(45deg);
    pointer-events: none
}

.slide-fade-right-leave-to {
    opacity: 0;
    transform: translateX(-10px) rotate(45deg);
    pointer-events: none
}

.slider--authentication {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 34.4rem;
    flex: 0 0 34.4rem
}

.status {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    vertical-align: middle;
    margin: 0 1.7rem 0 .7rem
}

.status--active {
    background: #78bf5a
}

.status--inactive {
    background: #f04d4e
}

.table {
    max-width: 81.1rem
}

.table table {
    table-layout: fixed;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .4rem
}

.table .cell-1 {
    width: 33%;
    min-width: 20.6rem
}

.table .cell-2 {
    width: 32%;
    min-width: 20rem
}

.table .cell-3 {
    width: 29%
}

.table .cell-4 {
    text-align: center
}

.table th {
    border-bottom: .6rem solid #fff;
    font-size: 1.1rem;
    text-align: left;
    color: #c6c6c6
}

.table th:first-child {
    padding-left: 3rem
}

.table tr {
    height: 6.6rem
}

.table tr:first-child {
    height: 3.1rem
}

.table td {
    border-bottom: .4rem solid #fff;
    font-size: 1.6rem;
    font-weight: 700
}

.table td:nth-child(2) {
    position: relative;
    font-size: 1.6rem;
    font-weight: 500
}

.table td:nth-child(2) p {
    position: relative;
    display: inline-block
}

.table td:nth-child(2) p a {
    position: absolute;
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: -3.9rem
}

.table td:nth-child(2) p a:after {
    content: '';
    position: absolute;
    border: 1px solid;
    padding: .3rem;
    border-color: transparent #676c67 #676c67 transparent;
    -webkit-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg)
}

.table td:nth-child(3) {
    font-size: 1.1rem;
    font-weight: 400
}

.table td:nth-child(4) a {
    top: -0.4rem;
    left: .9rem
}

.times {
    position: relative;
    text-decoration: none;
    display: inline-block
}

.times:before,
.times:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #676c67;
    width: 1.3rem
}

.times:before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.times:after {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.toggleContainer,
.adminButton {
    display: flex;
    justify-content: center
}

.toggleContainer input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    z-index: -1
}

.toggleContainer .check-trail {
    display: flex;
    align-items: center;
    margin: 0;
    width: 100%;
    max-width: 50px;
    height: 25px;
    background: gray;
    border-radius: 2.5em;
    transition: all .5s ease;
    cursor: pointer
}

.toggleContainer .check-handler {
    display: flex;
    margin-left: .2em;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    background: gray;
    border-radius: 50%;
    transition: all .5s ease;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3)
}

.toggleContainer .check-handler:before {
    content: "\00D7";
    color: #fff;
    font-weight: bold
}

.toggleContainer input[type="checkbox"]:checked+.check-trail {
    background: #16a085
}

.toggleContainer input[type="checkbox"]:checked+.check-trail .check-handler {
    margin-left: 63%;
    background: #1abc9c
}

.toggleContainer input[type="checkbox"]:checked+.check-trail .check-handler::before {
    content: "\2714"
}

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

.widget-message {
    position: relative;
    margin-bottom: 1.4rem;
    padding: 2rem;
    font-size: .9rem;
    line-height: 2.11;
    min-height: 48px;
    margin: 0 20px
}

.widget-message a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-decoration: none
}

.widget-message p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word
}

.widget-message .widget-message__time {
    color: #ddd;
    font-size: .8rem;
    font-weight: 700
}

.widget-message .widget-message__head {
    padding: .2rem 0 0
}

.widget-message .widget-message__body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1;
    flex: 1 1;
    padding: 0rem 1.7rem
}

.widget-message--active {
    background-color: #f6f6f6
}

.widget-message.group-item.has-new .widget-message__body {
    position: relative;
}
.widget-message.group-item.has-new .widget-message__body:before {
    opacity: 1;
    content: '';
    position: absolute;
    top: 3px;
    left: -9px;
    height: .5rem;
    width: .5rem;
    border-radius: 50%;
    background-color: #ff5538;
    transition: background-color 1s;
    -webkit-transition: background-color 1s;
}

.statusLoad {
    width: 208px;
    height: 60px;
}
.chat__body.chat__group .statusLoad {
    height: 48px;
}

.widget-message__body .bg-secondary,
.message__text.bg-secondary {
    background: unset;
    background: linear-gradient(270deg, #6c757d, #bfbfbf, #6c757d);
    background-size: 600% 600%;
    -webkit-animation: loadingMsg 4s ease infinite;
    -moz-animation: loadingMsg 4s ease infinite;
    animation: loadingMsg 4s ease infinite
}

.widget {
    overflow: auto;
    height: 100vh;
    scrollbar-color: #ccc #e0e0e0;
    scrollbar-width: thin;
    padding: 6.4rem 0 6.4rem
}

.widget .widget__title {
    font-size: 1.9rem
}

.widget__head {
    position: relative;
    padding: 0 20px;
    /*margin-bottom: 4.3rem;*/
    margin-bottom:20px;
}

.widget__head.has_plus_button {
    margin-top: -7px;
}

.widget__head img {
    position: absolute
}

.widget--settings {
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: hidden
}

.widget__head .widget__title {
    font-size: 2.6rem;
    margin: 0 !important;
    float: left
}

.widget--settings .widget__body ul {
    padding: 0 2.1rem 0 1.8rem
}

.widget--settings .widget__body li {
    list-style: none;
    background-color: #f7f7f7;
    border-radius: 8px
}

.widget--settings .widget__body li a {
    display: block;
    padding: 2.3rem 3.6rem
}

.widget--settings .widget__body li svg {
    display: none
}

.widget--settings .widget__body li+li {
    margin-top: .9rem
}

.widget--settings .widget__body a {
    font-size: 1.6rem;
    font-weight: 500;
    text-decoration: none
}

.widget--settings .widget__body .is-active {
    background-color: #e5ffef
}

.widget--settings .widget__body .is-active svg path {
    fill: #fff
}

.widget--settings .widget__footer {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end
}

.widget--settings .widget__footer a {
    font-size: 1.6rem;
    font-weight: 500;
    text-decoration: none;
    margin-left: 9rem
}

.widget__head .widget__logo {
    display: none;
    max-width: 24px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 24px;
    flex: 0 0 24px;
    height: 24px
}

.widget__logo img {
    position: relative;
    top: auto;
    right: auto
}

.widget--authentication {
    padding: 23.5rem 0 4.5rem
}

.widget--authentication .widget__head {
    padding: 0 4rem;
    margin-bottom: 7.9rem
}

.widget--authentication .widget__head .widget__logo {
    display: block;
    max-width: 27px;
    margin-bottom: 1.9rem
}

.widget--authentication .widget__title {
    font-size: 1.8rem;
    font-weight: 500;
    text-align: center;
    margin: 0
}

.widget--authentication .widget__body-inner {
    max-width: 23.7rem;
    margin: 0 auto
}

.widget--authentication .widget__footer {
    padding-right: 1.3rem
}

.widget--authentication .widget__footer a {
    font-size: 1.4rem;
    text-decoration: underline;
    margin-left: 9.8rem
}

.widget--small .widget__head {
    margin-bottom: 4rem
}

.widget--small .widget__footer {
    padding: 0 2.1rem 0 1.8rem
}

.widget--small .widget__footer a {
    font-size: 1.6rem;
    padding: 1.5rem 3.6rem;
    text-align: left;
    width: 100%;
    margin: 0;
    border-radius: 8px
}
.widget--small .widget__footer a.is-active {
    background-color: #e5ffef
}
.widgets {
    height: 100%;
    overflow: hidden;
    list-style-type: none
}
.wrapper {
    position: relative;
    flex: 1
}

#accountInformation #timezone {
    padding-left:16px;
}

.addressContainer .dropdown-menu-right.show[x-placement="top-end"] .triangle {
    top:162px !important;
    transform: rotate(360deg) skewX(-30deg) scale(1,.866) !important;
}

/* ---------------------------------------------- */
/* ----------------ALPHABETIZED------------------ */
/* ---------------------------------------------- */

#billingTools .toolbar {
    white-space: nowrap;
}

#billingTools .toolbar option {
    justify-content: end;
}

#billingTools .in-outbound-price {
    position: absolute;
    right: 0;
    top: -30px;
}

#addGroup {
    background: #ededed;
    border-radius: 8px;
}

.phoneNumberHeader {
    /*bottom: 45px;*/
    position: relative;
}

.phoneNoResults {
    position: relative;
    top: -51px;
}

/* ---------------------------------------------- */
/* ----------------MEDIA QUERIES----------------- */
/* ---------------------------------------------- */
@media(prefers-reduced-motion:no-preference) {
    :root {
        scroll-behavior: smooth
    }
}
@media(max-width:360px) {
    .card-item__cvvBand {
        margin-bottom: 15px
    }
    .card-item__cvv {
        padding: 10px 15px
    }
    .card-item__band {
        height: 40px;
        margin-top: 10px
    }
    .card-item__numberItem {
        width: 12px
    }
    .card-item__numberItem.-active {
        width: 8px
    }
    .card-item__number {
        font-size: 19px;
        margin-bottom: 10px;
        padding: 10px 10px
    }
}
@media(max-width:374px) {
    .field,
    .select-alt select {
        font-size: 1.3rem
    }
    .popover {
        width: 16.8rem
    }
    .popover .popover__poiter {
        left: 14.0rem
    }
}
@media(max-width:480px) {
    .card-list {
        margin-bottom: -120px
    }
    .card-item__cvvBand {
        height: 40px;
        margin-bottom: 20px
    }
    .card-item__band {
        margin-top: 20px
    }
    .card-item__dateTitle {
        font-size: 12px;
        padding-bottom: 5px
    }
    .card-item__date {
        font-size: 16px
    }
    .card-item__numberItem {
        width: 13px
    }
    .card-item__numberItem.-active {
        width: 16px
    }
    .card-item__number {
        font-size: 21px;
        margin-bottom: 10px;
        padding: 10px 10px
    }
    .card-item__name {
        font-size: 16px
    }
    .card-item__wrapper {
        padding: 20px 10px
    }
    .card-item__holder {
        font-size: 12px;
        margin-bottom: 5px
    }
    .card-item__info {
        padding: 10px
    }
    .chat__body.chat__group .message__info {
        flex-direction: column !important;
        align-items: end !important;
    }
    .chat__body.chat__group .msg-group-status {
        margin-right: 0 !important;
        margin-bottom: 3px;
    }
}
@media(min-width:500px) {
    .github-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 17px 20px -6px rgba(36, 52, 70, 0.36)
    }
    #mainArea {
        height: 100vh !important;
    }
}
@media(max-width:575px) {
    .form .form__actions button {
        width: 100%
    }
    #billingTools {
        flex-direction: column;
        align-items: baseline !important
    }
        #billingTools .toolbar {
            width: 100%;
            margin-bottom: 10px;
        }
        #billingTools .toolbar option {
            justify-content: start;
        }
    #addressBook_firsttime {
        background-color: #FFFFFF;
    }
}
@media(max-width:700px) {
    .github-btn {
        position: relative;
        bottom: auto;
        right: auto;
        margin-top: 20px
    }
    .github-btn:active {
        transform: scale(1.1);
        box-shadow: 0 17px 20px -6px rgba(36, 52, 70, 0.36)
    }
}
@media(max-width:810px){
    .addressBookDropdown,
    .adminAdd {
        width: 4rem;
        height: 4rem;
        line-height: 4rem;
    }
    .addressContainer.new input {
        height: auto !important;
    }
    .aside--alt .aside__logo {
        display: none
    }
    .aside {
        width: 100vw;
        z-index: 3;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        padding: 1rem 3rem
    }
    .chat {
        left: .5rem;
        right: .5rem
    }
    .chat__back {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        margin-left: .4rem;
        margin-bottom: 1rem;
        -webkit-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
        transform: rotate(135deg);
        font-size: 1.5rem;
        text-decoration: none;
        border: 2px solid #000;
        border-top: 0;
        border-left: 0
    }
    .chat .chat__head {
        left: 0 !important;
        right: .5rem;
        display: flex !important;
        background: #f7f7f7 !important;
        padding: 3rem 1.5rem !important;
    }
    .chat .chat__head-entry {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
    .chat .chat__head-actions {
        padding-top: 1rem;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
    .chat .chat__body {
        padding: 6rem 0 0
    }
    .chat .chat__foot {
        left: 0 !important;
        padding: 0 !important;
        padding-right: 1rem !important;
        background: #f7f7f7 !important;
        height: 80px;
        width: 100%;
    }
    .chat.is-active {
        pointer-events: none
    }
    .content {
        z-index: 3;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        pointer-events: none;
        -webkit-transition: opacity .4s ease-out;
        -o-transition: opacity .4s ease-out;
        transition: opacity .4s ease-out
    }
    .content.is-active {
        opacity: 1;
        pointer-events: all;
        background-color: #fff;
        padding: 6rem 1.5rem 3rem
    }
    .content.is-active .chat.is-active {
        pointer-events: all
    }
    .content--settings {
        padding: 8.5rem 2.5rem 3rem 4rem
    }
    .content--small {
        padding: 6.7rem 3.8rem;
        pointer-events: auto
    }
    .content--small {
        position: static;
        opacity: 1
    }
    .content--small .content__title {
        margin-bottom: 5rem
    }
    .field {
        height: 6rem;
        padding: 0 2.3rem
    }
    .field--textarea {
        padding: 3rem 3.5rem 0 1.4rem !important;
        height: 100%;
        border-top: 0
    }
    .form {
        height: 100%
    }
    .form .form__label {
        margin: 0
    }
    .form .form__line {
        display: none
    }
    .form .form__select {
        margin-top: 4rem
    }
    .form .form__title h3 {
        margin-left: 2.7rem;
        margin-bottom: 6.5rem
    }
    .form .form__title img {
        display: block
    }
    .form form {
        height: 100%
    }
    .form .form__inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        height: 100%
    }
    .form .form__actions {
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }
    .form .form__actions button {
        width: 100%
    }
    .logo {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 2.6rem;
        flex: 0 0 2.6rem;
        max-width: 2.6rem
    }
    .main {
        display: block
    }
    .main--alt {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }
    .main--mobile-large {
        height: 100vh
    }
    .message {
        max-width: 90%
    }
    .message .message__info-inner {
        max-width: 95vw
    }
    .nav {
        -webkit-box-flex: 1;
        -ms-flex: 1 1;
        flex: 1 1;
        width: auto
    }
    .nav ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }
    .nav li~li {
        margin-top: 0;
        margin-left: 1.5rem
    }
    .nav a:before {
        display: none
    }
    .nav .is-active a:after {
        content: '';
        position: absolute;
        left: -20px;
        bottom: -3.2rem;
        height: 20px;
        width: 16vw;
        border-radius: 2rem;
        background-color: #ff5538;
    }
    .nav--alt ul {
        -ms-flex-pack: distribute;
        justify-content: space-between
    }
    .popover--delete-phone .popover__poiter {
        left: .6rem
    }
    .popover--group .popover__poiter {
        left: .6rem
    }
    .select-alt:after {
        right: 2.3rem
    }
    .select-alt select {
        padding: 0 3.7rem
    }
    .status {
        margin: 0 .7rem 0 .7rem
    }
    .widget {
        padding: 3rem .5rem;
        height: calc(100vh - 8rem)
    }
    .widget__head {
        margin-bottom: 0
    }
    .widget--settings {
        padding: 4.8rem 0 1rem;
        background-color: #f7f7f7
    }
    .widget--settings .widget__title {
        -webkit-box-flex: 1;
        -ms-flex: 1 1;
        flex: 1 1;
        margin: 0 3rem
    }
    .widget--settings .widget__head {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 0 3.8rem;
        width: 100%;
        margin: 0 auto !important;
        padding: 0 !important
    }
    .widget--settings .widget__body ul {
        padding: 0 3.8rem
    }
    .widget--settings .widget__body li {
        background-color: #fff;
        padding: 3.2rem 4.5rem;
        position: relative
    }
    .widget--settings .widget__body li svg {
        display: block;
        height: 1.8rem;
        width: 1.4rem;
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        right: 3rem
    }
    .widget--settings .widget__body li+li {
        margin-top: 1.4rem
    }
    .widget--settings .widget__body .is-active {
        background-color: #7bc988;
        color: #fff
    }
    .widget--settings .widget__body .list-settings {
        justify-content: space-around !important;
    }
    .widget--settings .widget__footer {
        display: none
    }
    .widget__head .widget__logo {
        display: inline-block
    }
    .widget--authentication {
        height: 100vh
    }
    .widget--authentication .widget__head {
        display: block
    }
    .widget--authentication .widget__footer {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }
    #contactInfo.open,
    #groupInfo.open {
        width: 100vw;
        transform: translateX(-100vw);
        z-index: 9999;
        background-color: white;
    }
    .chat .chat__head.open,
    .chat .chat__foot.open {
        transform: unset;
    }
    #contactContainer,
    #groupContainer {
        height: 100vh;
        justify-content: space-between;
    }
    .groupselectmembers label {
        width: 100%;
    }
        .groupselectmembers label input {
            width: 10px !important;
            height: 10px !important;
            margin-right: 5px;
        }
    #addGroup .col-2 {
        padding: 0;
    }
    #createGroupName, 
    #addGroup #search {
        height: 33px !important;
    }
    #createGroupBtn {
        margin-left: 0;
    }
    #addressBook {
        margin-right: 40px;
    }
    #billingSettingsMobile {
        width: 100%;
        margin-top: 15px;
    }
}
@media(max-width:970px) {
    #addressBookAlphabet_mobile {
        display: grid
    }
    #addressBookAlphabet {
        display: none !important
    }
    .alphabet {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        justify-content: space-between;
    }
    ul.alphabet li {
        margin: .4vh .3vh;
        max-height: 1.8vh
    }
    .popover {
        border: 0;
        box-shadow: none;
        background-color: #f0f0f0;
    }
        .popover .popover__poiter {
            display: none;
        }
    .popover--phone-numbers {
        bottom: -280px;
        top: unset !important;
        left: 0 !important;
        right: 0;
        max-width: 100% !important;
        background-color: #f0f0f0;
        border-radius: 0;
        -webkit-transition: bottom 300ms ease-in-out;
        -moz-transition: bottom 300ms ease-in-out;
        -o-transition: bottom 300ms ease-in-out;
        transition: bottom 300ms ease-in-out;
    }
        .popover--phone-numbers.active {
            bottom: 0;
        }
        .popover--delete-phone, 
        .popover--group {
            top: calc(50% - 77px) !important;
            left: calc(50vw - 134px) !important;
        }
    .popover__body {
        max-height: 30vh !important;
    }
    .phoneError {
        position: absolute;
        bottom: -50px;
        padding: 0 !important;
        text-align: left !important;
        margin: 0 !important;
    }
    .phoneNoResults {
        top: 0;
    }
    #newAdminAdd {
        flex-direction: column !important;
    }
}
@media(max-width:1023px) {
    .aside {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 4.5rem;
        flex: 0 0 4.5rem
    }
    .chat {
        left: 2rem;
        right: 2rem
    }
    .chat .chat__head {
        left: 28.5rem;
        padding: 5.5rem .1rem 5.5rem 0
    }
    .chat .chat__foot {
        left: 28.5rem;
        padding-right: .1rem
    }
    /* .content {
        padding: 5.5rem 2rem 0rem
    } */
    .content--table .content__title {
        display: block
    }
    .content--table .content__title a {
        right: 0
    }
    .field {
        padding: 0 1.5rem
    }
    .form .form__row .form__controls--alt {
        max-width: 100%;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%
    }
    .form .form__row .form__controls+.form__controls {
        padding-left: 1rem
    }
    .initials {
        width: 3rem;
        height: 3rem;
        line-height: 3rem;
        font-size: 1.4rem
    }
    .initials:before {
        height: .8rem;
        width: .8rem;
        top: .1rem;
        right: .1rem
    }
    .initials:after {
        top: 3.4px;
        right: 3px;
        height: .4rem;
        width: .4rem
    }
    .message {
        max-width: 80%
    }
    .message .message__text {
        padding: 1.4rem 2rem 1.6rem 3.5rem
    }
    .message--user .message__text {
        padding: 1.9rem 2.8rem 1.8rem 2rem
    }
    .select-alt select {
        padding: 0 1.5rem
    }
    .sidebar {
        flex: 1
    }
    .table table,
    .table thead,
    .table tbody,
    .table th,
    .table td,
    .table tr {
        display: block
    }
    .table tr {
        height: auto;
        border-top: 1px solid #999
    }
    .table tr:first-child {
        display: none
    }
    .table td {
        padding: 1rem 0;
        border: 0
    }
    .table td:before {
        content: attr(data-text);
        display: block;
        font-size: .85rem;
        color: #c6c6c6;
        margin-bottom: .5rem
    }
    .table td:nth-child(4) a {
        left: 0
    }
    .widget-message .widget-message__body {
        padding: 0rem 1rem;
        padding-right: 0
    }
    .widget--small {
        height: 100%
    }
}
@media(max-width:1199px) {
    .chat {
        left: 3rem;
        right: 3rem
    }
    .chat .chat__head {
        left: 41.8rem;
        padding: 5.5rem 1rem 5.5rem 0
    }
    .chat .chat__foot {
        left: 41.8rem;
        padding-right: 1rem
    }
    /* .content {
        padding: 5.5rem 3rem 0rem 3rem
    } */
    .table td:nth-child(2) p a {
        right: -1.9rem
    }
    .widget-message {
        padding: .5rem 1.8rem 2rem
    }
}
@media(max-width:1399px) {
    .chat {
        left: 5rem;
        right: 5rem
    }
    .chat .chat__head {
        left: 48.3rem;
        padding: 3.95rem 3.3rem 5.5rem 0
    }
    .chat .chat__foot {
        padding-right: 3.3rem;
        left: 48.3rem
    }
    /* .content {
        padding: 5.5rem 5rem 0rem 5rem
    } */
    .content--settings {
        padding: 9rem 9rem 3rem
    }

    #popover-phoneGroup-number.popover--phone-numbers {
        top: calc(3.95rem + 20px) !important;
    }
    #popover-phoneGroup-number.popover--phone-numbers.position-fixed {
        right: .5rem;
    }
    #popover-phoneGroup-number.popover--phone-numbers.position-fixed.hasSidebar {
        right: calc(20vw + .5rem);
    }
}
@media(max-width:1500px) {
    .content--table {
        padding: 8.7rem 3rem
    }
}
@media(max-width:1799px) {
    #addressBookHeader,
    #adminDetailsHeader {
        grid-template-columns: repeat(2, minmax(250px, 1fr)) !important
    }
}
@media(max-width:810px){
    #addressBookHeader,
    #adminDetailsHeader {
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)) !important
    }
    .main {
        flex-direction: column-reverse
    }
    .sidebar,
    .content.is-active {
        height: calc(100% - 80px);
        overflow-x: hidden
    }
    /* #accountInfo,
    adminDetails {
        justify-content: space-between
    } */
    .widget-message--active {
        background-color: transparent !important
    }
    .widget__head .widget__logo {
        max-width: 28px !important;
        /* height: 40px !important; */
        width: 100%;
        margin-top: 2px;
        /* line-height: 40px */
    }
    /* .widget--settings .widget__title {
        flex: unset !important
    } */
    .message .initials {
        display: none
    }
    .message:not(.message--user .message__text) {
        padding-left: 0 !important
    }
    .message--user .message__text {
        background-color: #fcfcfc
    }
    .chat .chat__head-entry {
        flex: 1
    }
    .chat__head-actions {
        flex: 1;
        justify-content: end !important;
        padding-top: 0 !important
    }
    .message--user .message__text {
        background: #f7f7f7 !important
    }
    .mobileWrap {
        flex-wrap: wrap
    }
    .mobileShow {
        display: flex !important
    }
    .mobileHide {
        display: none !important
    }
    .widget-message {
        margin: 0 !important
    }
    #mobileSort option {
        background-color: #fff;
        border-radius: 20px;
        cursor: pointer;
        width: 30%;
        height: 4vh;
        display: flex;
        justify-content: center;
        align-items: center
    }
    #mobileSort option.selected {
        background-color: #ffcb1e
    }
    #LOGIN {
        width: 100vw
    }
    #loginLeft {
        min-width: 100% !important
    }
    html,
    body,
    .wrapper {
        position: fixed;
        height: 100%
    }
    /* input,
    select {
        height: 60px !important;
        width: 100% !important
    } */
    div[data-template="accountAdd"] {
        flex-direction: column !important
    }
    .logo.login {
        min-height: 75px;
        min-width: 50px;
        background-size: contain;
        background-position: center;
        margin-top: 50px;
        margin-bottom: -75px !important
    }
    #loginUserName,
    #registerContainer .h1 {
        text-align: center
    }
    #forgotlogin-link a {
        font-size: 1.2rem
    }
    .logo.aside__logo {
        display: none !important
    }
    .widgets.active {
        margin: 0 !important;
        flex: 1
    }
    .sidebar {
        background-color: #f7f7f7 !important;
        overflow: hidden;
        padding-top: 0
    }
    /* .widget__head:not(.d-flex) {
        display: block !important;
        padding: .5rem 1.8rem 0 !important
    } */
    .widget__head:not(.flexone) {
        display: block;
        padding: .5rem 1.8rem 0 !important;
    }
    .widget__head:not(.flexone).p-0 {
        padding: 0 !important;
    }
    #billingTools .in-outbound-price {
        padding-right: 1.8rem !important;
    }
    .logo.widget__logo {
        float: left !important
    }
    .widget__title {
        padding: 0 2rem !important
    }
    .widget__head .search-bar {
        display: inline-flex;
        width: 100%;
    }
    .widget__head .search-bar .search {
        margin-top: 20px !important;
    }
    .widget__head .search-bar .search {
        margin-top: 20px !important;
    }
    .search-bar img {
        top: 53% !important;
    }
    .chat__back {
        margin-right: 20px;
        margin-top: 5px
    }
    #loadAnimation.mobileLoader {
        display: block;
        height: 32px;
        width: 32px;
        -webkit-animation: loader-2-1 3s linear infinite;
        animation: loader-2-1 3s linear infinite
    }
    .list-settings .d-flex {
        margin: 0.5rem 1.8rem 0 !important;
        width: unset;
    }
    
}
@media(max-width:360px) {
    .card-form__inner {
        padding: 15px;
        padding-top: 165px
    }
    .card-item {
        height: 180px
    }
    .card-item__top {
        margin-bottom: 15px
    }
    .card-item__chip {
        width: 40px
    }
    .card-item__type {
        height: 30px
    }
}
@media(max-width:480px) {
    .card-form__inner {
        padding: 25px;
        padding-top: 140px
    }
    .card-form__row {
        flex-wrap: wrap
    }
    .card-form__col {
        margin-right: 0;
        flex: unset;
        width: 100%;
        margin-bottom: 20px
    }
    .card-form__col:last-child {
        margin-bottom: 0
    }
    .card-form__col.-cvv {
        max-width: initial
    }
    .card-form__button {
        margin-top: 10px
    }
    .card-input__input{
        width: 100%;
    }
    .card-item {
        max-width: 310px;
        height: 180px;
        width: 90%
    }
    .card-item__top {
        margin-bottom: 0
    }
    .card-item__chip {
        width: 50px
    }
    .card-item__type {
        height: 40px;
        max-width: 90px
    }
}
@media(max-width:576px) {
    #timeoutModal .modal-content {
        height: 100%
    }
    #timeoutModal .btn {
        font-size: 18px
    }
    #addressBookContainer {
        width: 90%
    }
    #addressBookAlphabet_mobile {
        position: fixed;
        right: 2px;
        margin-top: -6px
    }
    .adminRemove {
        margin-top: 20px !important
    }
    .card-form {
        margin: 0 auto
    }
    .list-settings .widget-message--active {
        background: unset !important
    }
}
@media(min-width:767.02px) and (max-width:1023px) {
    .hidden-sm {
        display: none !important
    }
    .visible-sm-block {
        display: block !important
    }
    .visible-sm-inline {
        display: inline !important
    }
    .visible-sm-inline-block {
        display: inline-block !important
    }
}
@media(min-width:1023.02px) and (max-width:1199px) {
    .hidden-md {
        display: none !important
    }
    .visible-md-block {
        display: block !important
    }
    .visible-md-inline {
        display: inline !important
    }
    .visible-md-inline-block {
        display: inline-block !important
    }
    .content {
        padding: 6rem 2rem 0rem;
    }
}
@media(min-width:1199.02px) {
    .hidden-lg {
        display: none !important
    }
    .visible-lg-block {
        display: block !important
    }
    .visible-lg-inline {
        display: inline !important
    }
    .visible-lg-inline-block {
        display: inline-block !important
    }
}





/* iPhone 6, 7, 8 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
    .logo.login {
        margin: 0 !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
    .logo.login {
        margin: 0 !important;
    }
}

/* iPhone 6+, 7+, 8+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
    .logo.login {
        margin: 0 !important;
    }
}
/* ---------------------------------------------- */
/* ----------------MEDIA QUERIES----------------- */
/* ---------------------------------------------- */




/* ---------------------------------------------- */
/* ------------------KEYFRAMES------------------- */
/* ---------------------------------------------- */
@keyframes placeHolderShimmer {
    0% {
        background-position: -468px 0
    }
    100% {
        background-position: 468px 0
    }
}
@-webkit-keyframes loadingMsg {
    0% {
        background-position: 0 50%
    }
    50% {
        background-position: 100% 51%
    }
    100% {
        background-position: 0 50%
    }
}
@-moz-keyframes loadingMsg {
    0% {
        background-position: 0 50%
    }
    50% {
        background-position: 100% 51%
    }
    100% {
        background-position: 0 50%
    }
}
@keyframes loadingMsg {
    0% {
        background-position: 0 50%
    }
    50% {
        background-position: 100% 51%
    }
    100% {
        background-position: 0 50%
    }
}
@keyframes noteRight {
    0% {
      transform: scale(1) translate(0, 0);
      opacity: 0;
    }
    50% {
      opacity: 1;
      transform: scale(1.5) translate(50%, -50%);
    }
    80% {
      opacity: 0;
      transform: scale(1.5) translate(100%, -100%);
    }
    100% {
      transform: scale(1.5) translate(100%, -100%);
      opacity: 0;
    }
}
@keyframes noteCenter {
    0% {
      transform: scale(1) translate(0, 0);
      opacity: 0;
    }
    50% {
      opacity: 1;
      transform: scale(1.5) translate(0%, -50%);
    }
    80% {
      opacity: 0;
      transform: scale(1.5) translate(0%, -100%);
    }
    100% {
      transform: scale(1.5) translate(0%, -100%);
      opacity: 0;
    }
}
@keyframes noteLeft {
    0% {
      transform: scale(1) translate(0, 0);
      opacity: 0;
    }
    50% {
      opacity: 1;
      transform: scale(1.5) translate(-50%, -50%);
    }
    80% {
      opacity: 0;
      transform: scale(1.5) translate(-100%, -100%);
    }
    100% {
      transform: scale(1.5) translate(-100%, -100%);
      opacity: 0;
    }
}
/* ---------------------------------------------- */
/* ------------------KEYFRAMES------------------- */
/* ---------------------------------------------- */

.swal2-popup {
    font-size: inherit !important;
}

.groups .no-data {
    background: url(../images/noresults_sidebar.svg) no-repeat center 55%;
    height: 80px;
    text-align: center;
    font-weight: bold;
    background-size: contain;
}
.is-deleted-contact img.contactEdit {
    display: none !important;
}


/* Works on Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #ddd #eee;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 12px;
}

*::-webkit-scrollbar-track {
    background: #eee;
}

*::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 20px;
    border: 4px solid #eee;
}