.contactsTable {
 display: grid;
 align-items: center;
 grid-template-columns: 50px minmax(200px, 2fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr) 140px;
 height: 70px;
 border-bottom: 1px solid #ececec;
}

.groupsTable {
 display: grid;
 align-items: center;
 grid-template-columns: minmax(200px, 2fr) minmax(200px, 1fr) 160px;
 height: 70px;
 border-bottom: 1px solid #ececec;
}

.contactsTable .options button,
.groupsTable .options button {
 min-width: 60px;
}

.contactsTable .heading,
.groupsTable .heading,
.editGroupTable .heading {
 font-weight: 600;
 cursor: pointer;
 user-select: none;
}

.contactsTable .item,
.groupsTable .item,
.editGroupTable .item {
 text-overflow: ellipsis;
 display: block;
 overflow: hidden;
 white-space: nowrap;
 padding-right: 10px;
}

.icon {
 color: #aaaaaa;
}

.selectedIcon {
 color: #2196f3 !important;
}

.rotateIcon {
 transform: rotate(180deg);
}

.checkbox {
 margin: 0 !important;
}

md-checkbox .md-icon {
 border-radius: 5px;
}

.counterContainer {
 height: 45px;
 display: flex;
 align-items: center;
}

.counterContainer .counter {
 color: #2196f3;
 margin-right: 10px;
 font-size: 1.1em;
 font-weight: 500;
}

.totalCount {
 font-size: 1.1em;
 font-weight: 500;
}

.md-select-menu-container {
 z-index: 9999;
 max-width: 300px;
}

.selectGroup {
 width: 70%;
}

.addToGroupsControls {
 padding-top: 10px;
 border-top: 1px solid #ececec;
}

.addContactsModal .modal-dialog {
 width: 500px;
}

.conflictingContactsModal .modal-dialog {
 width: 740;
}

.importContactsExternalModal .modal-dialog,
.editGroupModal .modal-dialog {
 width: 900px;
}

.contactImportSuccessModal .modal-dialog {
 width: 700px;
}

.conflictConfirmationModal .modal-dialog {
 width: 330px;
}

.contactsImportSuccess button {
 width: 100px;
 height: 40px;
 font-size: 16px;
}

.conflictConfirmation md-icon {
 height: 3rem;
 font-size: 3rem;
 color: #d72638;
}

.conflictConfirmationActions {
 display: flex;
 width: 100%;
 justify-content: space-between;
}

.conflictConfirmationActions button {
 width: 140px;
}

.conflictingContactsModal .modal-dialog .modal-content {
 padding: 0;
}
.importContactsModal .modal-dialog {
 width: 640px;
}

.importLoaderModal .modal-dialog {
 width: 480px;
}

.editGroupModal .modal-dialog .modal-content,
.importContactsModal .modal-dialog .modal-content,
.conflictingContactsModal .modal-dialog .modal-content {
 padding: 5px;
}

.importModalHeader {
 padding: 0 100px 20px 100px;
 border-bottom: 1px solid #ececec;
}

.importInfo {
 margin-top: 20px;
 padding: 0 20px 10px 20px;
 display: flex;
}

.importInfo .highlight {
 color: #000;
 font-weight: 600;
 margin-bottom: 10px;
}

.importInfo ol {
 padding-left: 25px;
 font-size: 14px;
}

.importInfo ol li {
 line-height: 28px;
}

.importSample {
 padding-left: 15px;
 border-left: 1px solid #ececec;
}

.importSample .dowloadButton {
 border: 1px solid #0e9c63;
 color: #0e9c63;
 box-shadow: none;
}

.importSampleHeader {
 color: #aaaaaa;
 font-weight: 500;
 margin: 30px 0;
}

.importSampleFile {
 font-weight: 600;
 padding-right: 15px;
}

.importUpload {
 padding: 10px 0;
 border-top: 1px solid #ececec;
}

.importActions {
 border-top: 1px solid #ececec;
}

.importSelectedFile {
 width: 300px;
 display: flex;
}

.importSelectedFile .fileName {
 max-width: 80%;
 font-weight: bold;
 user-select: none;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
}

.importSelectedFile .action {
 font-weight: 500;
 color: #2196f3;
 cursor: pointer;
 margin-left: auto;
}

.importCreateGroup .md-label {
 font-weight: 600;
}

.groupNameInput {
 border: 1px solid #2196f3;
 padding: 10px;
 border-radius: 10px;
 width: 240px;
}

.conflictHeader {
 padding: 10px 120px 10px 120px;
 text-align: center;
}

.conflictTitle {
 font-weight: 600;
 display: flex;
 border-top: 1px solid #ececec;
 padding: 15px 0;
}

.conflictTitle .title {
 flex: 1;
 padding-left: 45px;
}

.conflictOptions {
 border-top: 1px solid #ececec;
}

.conflictOptions .options,
.conflictContact .contact {
 display: flex;
}

.conflictContact {
 border-bottom: 1px solid #ececec;
}

.conflictOptions .options .radio-btn,
.conflictContact .contact .radio-btn {
 flex: 1;
}

.conflictOptions .options .radio-btn,
.conflictContact .contact .radio-btn {
 padding: 10px 15px;
}

.conflictContact .contact-info {
 max-width: 290px;
}

.warningLight {
 background: rgba(215, 38, 56, 0.071);
}

.conflictError,
.conflictError md-icon {
 color: #d72638;
}

.conflictError {
 font-weight: 500;
}

.selectedLight {
 background-color: #f0f9ff;
}

.selectedLightGray {
 background: #fafaff;
}

.selectedDark {
 color: #ffffff;
 background-color: #2196f3;
}
.selectedDark .md-off {
 border-color: white !important;
}
.selectedDark .md-on {
 background: white !important;
}

/* with space between border top and broder bottom
remove these classes from styling above to apply styling
.conflictContact .contact .radio-btn {
  margin: 10px 0;
  padding-left: 15px;
} */

.conflictOptions .options .bordered,
.conflictContact .contact .bordered {
 border-left: 1px solid #ececec;
}

.conflictOptions .options .radio-btn .explainer {
 font-size: 13px;
 font-weight: 400;
}

.conflictOptions md-radio-button,
.conflictContact md-radio-button {
 margin-bottom: 0;
}

.conflictOptions md-radio-button {
 font-weight: 600;
}

.conflictList {
 height: 400px;
 overflow: overlay;
 border-top: 1px solid #ececec;
}

.conflictButtons {
 padding: 15px 10px 10px 15px;
 border-top: 1px solid #ececec;
 display: flex;
 justify-content: space-between;
}

.searchContainer {
 background-color: #efeff4;
 margin: 2em 0;
 display: flex;
 justify-content: start;
 align-items: center;
 height: 40px;
 width: 300px;
 border-radius: 10px;
}
.searchContainer .searchInput {
 width: 100%;
 flex: 1;
 border: none;
 background-color: inherit;
 padding-right: 10px;
}

.searchContainer .searchIcon {
 margin: 0 5px;
 flex: 0;
}

.contactInputContainer {
 padding: 0 5px 0;
 margin: 0;
 height: 30px;
 width: 100%;
}

.options > span {
 cursor: pointer;
}

.options .confirm {
 color: #2196f3;
}

.disabledContact {
 color: lightgray;
 user-select: none;
}

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

.editGroupTitle {
 font-weight: 600;
 font-size: 1.3em;
 padding: 10px 1em;
 border-bottom: 1px solid #ececec;
}

.editGroupGrid {
 margin-top: 10px;
 display: grid;
 grid-template-columns: 250px auto;
 grid-template-rows: 50px 50px 400px;
 grid-template-areas:
  'contactsTop groupsTop'
  'contactsSearch groupsHeading'
  'contactList groupsList';
}

/* Hack for dropdown to be visible */
.md-open-menu-container {
 z-index: 3000;
}
/* And to be able to close in modal */
md-backdrop.md-menu-backdrop {
 z-index: 2999;
}

md-backdrop.md-select-backdrop {
 z-index: 2500 !important;
}

.md-autocomplete-suggestions-container {
 z-index: 2500 !important;
}

.editGroupGrid .title {
 font-weight: 1.1em;
 font-weight: 600;
}

.contactsTop {
 grid-area: contactsTop;
}

.contactsSearch {
 grid-area: contactsSearch;
 display: flex;
 align-items: center;
}

.contactsSearch .searchContainer {
 margin: 0;
 max-width: 80%;
 height: 35px;
}

.contactList {
 grid-area: contactList;
 overflow: auto;
}

.external-contact-list {
 height: 400px;
 overflow: auto;
}

.groupsTop {
 grid-area: groupsTop;
}

.editGroupGrid .editGroupTable {
 display: grid;
 align-items: center;
 grid-template-columns: minmax(150px, 2fr) minmax(130px, 1fr) minmax(130px, 1fr) minmax(160px, 1fr) 40px;
}

.groupsHeading {
 grid-area: groupsHeading;
 height: 100%;
}

.groupsList {
 grid-area: groupsList;
 overflow: auto;
}

.groupsTop,
.groupsHeading,
.groupsList {
 padding-left: 15px;
}

.contactsTop,
.contactsSearch,
.contactList {
 border-right: 1px solid #ececec;
}

.contactsSearch,
.groupsHeading,
.contactList,
.groupsList {
 border-bottom: 1px solid #ececec;
}

.contactsTop,
.groupsTop {
 display: flex;
 align-items: center;
}

.circular-checkbox .md-container .md-icon {
 border-radius: 50%;
}

.groupsList .contactItem {
 height: 50px;
 align-items: center;
 border-bottom: 1px solid #ececec;
}

.selectContact {
 display: flex;
 align-items: center;
 padding: 1em;
 border-bottom: 1px solid #ececec;
 cursor: default;
}

.selectContact md-checkbox {
 margin: 0;
}

.selectContact md-checkbox.md-checked .md-icon:after {
 left: 4.1;
 top: -0.77778px;
}

.selectContact .information {
 padding-left: 1em;
 width: calc(100% - 1em - 5px);
}

.selectContact .checkbox .md-icon {
 width: 18px;
 height: 18px;
}

.createContact {
 background-color: #2196f3;
 padding: 5px;
}

.createContact .md-input,
.createContact md-input-container.md-input-invalid .md-input {
 border-color: white !important;
}

.createContact md-input-container .md-input-invalid label,
.createContact md-input-container label,
.createContact md-input-container .md-input,
.createContact md-input-container .md-input::placeholder {
 color: white !important;
}

.createContact .buttons button {
 width: 44%;
}

.createContact .personalInfo {
 display: flex;
 flex-direction: column;
}

.createContact .contactInputContainer {
 padding: 5px;
 margin: 10px 0;
}

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

.customInput .inputContainer {
 width: 80%;
 position: relative;
}

.customInput .inputContainer input {
 padding-right: 25px;
}

.customInput .error-icon {
 color: #dd2c00;
}

.error-tooltip {
 background: #dd2c00 !important;
}

.customInput .error {
 position: absolute;
 right: 0;
 top: 0;
}

@media (min-width: 1200px) {
 .importContactsExternalModal .modal-dialog,
 .editGroupModal .modal-dialog {
  width: 1200px;
 }

 .editGroupGrid {
  grid-template-columns: 350px auto;
 }

 .createContact .personalInfo {
  flex-direction: row;
 }

 .createContact .buttons button {
  width: 45%;
 }

 .editGroupGrid .contactsTop,
 .editGroupGrid .contactsSearch {
  padding-left: 10px;
 }
}