#eCompany,#gCompany{ display: flex; flex-direction: column;}

.flexHolder{ display: flex; flex-grow: 1;}
.ContactDetailsCtrlHolder{ flex-grow: 1; display: flex; flex-basis:0; position:relative; }
.ContactListView { flex-grow: 1; overflow: hidden;flex-basis: 0; transition: .2s all; opacity: 1;}
.ContactListView.hiddenContact{ flex-grow: 0;  opacity: 0; flex-basis:0; max-height:0;}


.CreateNewHolder {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    min-height: -moz-min-content;
    min-height: -webkit-min-content;
    min-height: min-content;
}

.CreateNewContact {
    flex-shrink: 1;
    flex-basis: 0;
    overflow: hidden;
    flex-grow: 0;
    transition: .2s all;
    opacity: 0;
    display: flex;
    flex-direction: column;
    max-height: 0;
    justify-content: safe center;
    align-items: center;
    min-height: -moz-min-content;
    min-height: -webkit-min-content;
    min-height: min-content;
}
.CreateNewContact.visibleContact { flex-grow: 1;  opacity: 1; flex-basis: auto; overflow-y: auto; max-height:100%;}
.CreateNewContact > h5{ position: relative!important; overflow: hidden!important; width: 100%!important; text-align: left; font-size: 1.2em;}

.ContactListView{ background-color: transparent;}
    .ContactListView h1:before { font-family: 'Font Awesome 5 Pro'; content: '\f234';position:absolute ; top: -40px; left: 0; text-align: center; width: 100%; font-size: 30px;  }
.ContactListView h1{ text-align: center; margin-top: 20%; position: relative; overflow: visible !important;}
.ContactListView h1:after{ content: 'Please add a new point of contact'; position: absolute; bottom: -20px; left: 0; width: 100%; font-size: .7em;}


.ContactDetailsHolder{ flex-grow: 1; display: flex; flex-direction: column;  }
.ContactListView{ overflow: auto; border:none;}

.addNewNote{ position: absolute; right: 5px; font-size: 15px; line-height: 1em; cursor: pointer;}

.addNewContact,.addNewAddress{ position: relative; text-align:center; font-size: 1.2em; line-height: 1.2em; cursor: pointer;}

.ContactPreview {
    position: relative;
    float: left;
    overflow: hidden;
    width: calc(100% - 22px);
    height: auto;
    display: flex;
    margin: 5px;
    border: 1px solid #bbb;
    background-color: #eee;
    cursor: pointer;
    padding:5px;
    border-radius:5px;
    }
    .ContactPreview:hover { background-color: #ddd; }
.ContactPreview .DetailHolder{ flex-grow: 1; padding: 5px;}

.ContactPreview .DetailHolder .ContactName{ font-size: 1.2em; color: #333; padding: 5px;}
    .ContactPreview .DetailHolder .Telephone, .ContactPreview .DetailHolder .Mobile, .ContactPreview .DetailHolder .Email, .ContactPreview .DetailHolder .TimeAtAdress, .ContactPreview .DetailHolder .DateMovedIn {
        padding: 2px 5px;
        font-size: 1.1em;
        display: flex;
        margin: 5px;
    }
    .ContactPreview .DetailHolder .Address { padding: 2px 5px; font-size: .9em; }
    .ContactPreview .DetailHolder .Telephone i, .ContactPreview .DetailHolder .Mobile i, .ContactPreview .DetailHolder .Email i,.ContactPreview .DetailHolder .Address i,.ContactPreview .DetailHolder .TimeAtAdress i,.ContactPreview .DetailHolder .DateMovedIn i { font-size: 20px; width: 30px;position: relative; float: left; text-align: center; color: #777; border-right: 1px solid #777; margin-right: 5px; }


    
.CancelNew {font-size: 1.2em; margin: 10px 0 }
.CreateNewAddressBtn { flex-grow: 1;}
.CreateNewContactBtn, .CreateNewAddressBtn {
    flex-grow: 1;
    font-size: 1.6em;
    margin: 10px 0
}

.FlexConfirmButtons{ display: flex;}

.ContactPreview .ContactMarkers {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    padding: 5px;
    font-size: 1.2em;
    min-height: -moz-min-content;
    min-height: -webkit-min-content;
    min-height: min-content;
}
.ContactPreview .ContactMarkers .Director { font-weight: bold;padding:5px; height: 30px; line-height: 30px; width: 30px; text-align: center; color: #333; margin: 2px; border-radius: 200px; display: none; border:1px solid #bbb}
.ContactPreview .ContactMarkers .Primary { font-weight: bold;padding:5px; height: 30px; line-height: 30px; width: 30px; text-align: center; color: #fff; background-color: green; margin: 2px; border-radius: 200px; display: none;}
.ContactPreview .ContactMarkers .CurrentAddress { font-weight: bold;padding:5px; height: 30px; line-height: 30px; width: 30px; text-align: center; color: #fff; background-color: green; margin: 2px; border-radius: 200px; display: none;}
.ContactPreview .ContactMarkers .Primary.Show,.ContactPreview .ContactMarkers .Director.Show,.ContactPreview .ContactMarkers .CurrentAddress.Show{ display: inline-block;}




.ContactPreview .ContactControls {
    display: flex;
    flex-basis: 0;
    flex-grow: 0;
    flex-shrink: 1;
    padding: 0;
    overflow: hidden;
    transition: .2s all;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    font-size: 1.2em;
    background-color: #cccccc;
    color: #777;
    min-height: -moz-min-content;
    min-height: -webkit-min-content;
    min-height: min-content;
}
.ContactPreview .ContactControls.Show{flex-basis: auto;  flex-shrink: 0; padding: 5px; margin:-5px; margin-left:5px;}
.ContactPreview .ContactControls:hover{ color: #333}
    .ContactPreview .ContactControls i {
        justify-content: center;
        align-content: center;
        min-height: -moz-min-content;
        min-height: -webkit-min-content;
        min-height: min-content;
    }


.ContactRadioHolder{ display: flex; flex-direction: row; width: 100%;}
.ContactRadioHolder label{ flex-grow: 1; width: auto!important;flex-shrink: 1; flex-basis: auto;}

.ContactCheckBoxHolder input[type=checkbox],.ContactRadioHolder input[type=radio] {
    display:none; 
    margin:10px;
}
.unArchive i { opacity: 1;}

.ConFillWidth span.k-invalid-msg{ position: absolute; right: 5px; top: 50%; margin-top: -10px; color: #FF7373!important; text-shadow: none !important; font-size: 20px; }
.ConFillWidth span.k-invalid-msg i{content: '\f321' !important;}

.ConRow{ display: flex; width: 100%; position: relative; float: left; flex-direction: row;}
.ConCol {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    justify-content: safe center;
    align-items: center;
    min-height: -moz-min-content;
    min-height: -webkit-min-content;
    min-height: min-content;
}
    .ConCol label { width: 150px; line-height: 30px}
.ConCol .ConAutoWidth{ flex-grow: 0; flex-basis: auto; width: auto; margin: 2px;}
    .ConCol .ConFillWidth {
        flex-grow: 1; margin: 2px;position: relative; 
        display:flex;
    }

.ContactCheckBoxHolder label{ width: auto;padding: 0; margin: 0;}
.ContactCheckBoxHolder label input[type=checkbox] + span,.ContactRadioHolder label input[type=radio] + span {
    display:inline-block;
    margin:0;
    background-color: #e7e7e7;
    text-align: center;
    transition: .5s all;
    cursor: pointer;
}

.ContactCheckBoxHolder label span {
    display:inline-block;
    margin:0;
    padding: 0;
    line-height: 30px;
    background-color: #e7e7e7;
    border:1px solid #bbb;
    text-align: center;
    width: 30px;
    transition: .5s all;
    cursor: pointer;
    border-radius: 0px;
    font-size: 1.5em;
    color: #999;

}

.ContactRadioHolder label span {
    display:inline-block;
    margin:0;
    padding: 0;
    line-height: 40px;
    background-color: #e7e7e7;
    border:1px solid #bbb;
    text-align: center;
    width: 100%;
    transition: .5s all;
    cursor: pointer;
    border-radius: 0px;
    font-size: 1em!important;
    color: #999;

}

.ContactCheckBoxHolder label span i:before { content: '\f057'!important;}
.ContactCheckBoxHolder input[type=checkbox]:checked + span{ 
    background-image: none;
    background-color:#00B259;
    border-color:#00B259;
    color: #fff!important;
    font-weight: bold;
    box-shadow:  0 0 10px #bbb;
}

.ContactRadioHolder input[type=radio]:checked + span { 
    background-image: none;
    background-color:#333;
    border-color:#00B259;
    color: #fff!important;
    box-shadow:  0 0 10px #bbb;
}
    .ContactCheckBoxHolder input[type=checkbox]:checked + span i:before { content: '\f058'!important;
    }

.FlexAddressHolder,.FlexNotesHolder{ flex-grow: 1;   overflow: hidden; transition: .5s all; }
.FlexNotesHolder.contactTabSectionVisible,.FlexAddressHolder.contactTabSectionVisible{ flex-grow: 1; flex-basis: fit-content; min-height: 240px; flex-basis:auto; }
.FlexAddressHolder{ display: flex; flex-direction: column; flex-basis:0;}

FlexConfirmButtons{}
.CreateNewContact h4{  position: relative; flex-shrink: 0;}
.FlexNotesHolder{ display: flex; flex-direction: column;}

.FlexAddNoteHolder,.FlexAddAddressHolder{ flex-grow: 1; flex-basis: fit-content; display: flex}
.ContactNotesHistory,.ContactNewNoteHistory,.ContactAddressHistory,.ContactNewAddressHistory{ flex-grow: 0;  flex-basis: 0; overflow: hidden; transition: .5s all; display: flex; flex-direction: column; }
.ContactNotesHistory.contactTabSectionVisible,.ContactNewNoteHistory.contactTabSectionVisible,.ContactAddressHistory.contactTabSectionVisible,.ContactNewAddressHistory.contactTabSectionVisible{ flex-grow: 1; flex-basis: fit-content; }
.ContactNewNote{ flex-grow: 1;}
.ContactNewNoteHistory h5{ width: 100%;text-align: left; min-width: 320px}
.ContactNewNote,.AddressListHolder{ flex-grow: 1; position: relative;}
.ContactNewNoteHistory h5,.ContactNewAddressHistory h5{ width: 100%;text-align: left; min-width: 320px}

.CancelNewNote,.CreateNewNote{ flex-grow: 1;}


.CancelNew, .CancelNewAddress{ background-color: #777; color: #fff;}


.FlexConfirmContactButtons{overflow: hidden; transition: .5s all; display: flex; flex-basis: auto; flex-direction: row;}
.FlexConfirmContactButtons.ConfirmBtnsHidden{ flex-grow: 0;  flex-basis: 0 }

.AddressHolder{ flex-grow: 1; overflow: auto;}
.AddressHolder h5{ width: 100%;position: relative; float: left; text-align: left; color: #333;}
.ContactNewAddressHistory{  }
.ContactNewAddressHistory .FlexConfirmButtons{ flex-shrink: 0;}
.ContactNewAddressHistory  .ConRow{ margin: 2px 0; flex-basis: auto; flex-shrink: 0;}
    .ContactNewAddressHistory .ConRow .ConCol { padding: 0px 5px; }
.ContactNewAddressHistory  .ConRow label{ line-height: 15px;}

.ContactNewAddressHistory .ContactCheckBoxHolder  label{ margin-right: 5px!important;}
.ContactNewAddressHistory .ContactCheckBoxHolder  label span { height: 30px; width: 30px; line-height: 30px; margin-right: 5px;}

.FlexNewAddressHolder {
    flex-grow: 1;
}

.AddressHolder{ background-color: transparent; position: absolute; width: 100%; height: 100%; min-width: 320px; border:none;}

.ConRow label {
    width: 150px;
    line-height: 30px;
    padding: 0;
    margin: 0;
    display: flex;
}
    .ConRow label span {
        flex-grow: 1;
        line-height: 40px;
    }
.HomeAddressHeader{ transition: .5s all; font-size: 1.2em;}
.LongerRequired .validationSpan{color: red !important; 
    }


.RequiredAddressHistory{ font-size: 12px;}

.CreateNewAddress{ flex-grow: 1; }

.ContactPreviewHolder {
    position: relative; float: left; width: 100%; height: auto; overflow-x: hidden;
}
.ContactPreview{ margin-left: 100%; transition: .5s; opacity: 0;}
.ContactPreview.ContactLoaded{ margin-left: 5px; opacity: 1;}

.unArchive {
    position: absolute; top: 0;left: 0; height: 100%; width: 100%;
    background-color: rgba(238, 238, 238, .8); z-index: 100; color: #777; font-size: 2em;line-height: 2.5em; text-align: center;
    transition: .5s all;
}

.unArchive:hover{ background-color: transparent;}
    .unArchive i { transition: .5s all;text-shadow: 0 0 2px #555; }
.unArchive:hover i{ color: #333; text-shadow: 0 0 5px #ccc; background-color: rgba(245,245,245,1); padding: 10px; border-radius: 100px; box-shadow: 0 0 20px #bbb;}
    .unArchive i:after {  opacity: 0; transition: .5s all; z-index: 0; color: #777; position: absolute; top: 50%; left: 0; width: 100%; font-family: 'Avenir LT W01_55 Roman1475520', sans-serif; font-size: 15px; }

.unArchive:hover i:after{ opacity: 1; top: 20px;}

.ContactPreview.ContactLoaded.ArchivedC{ opacity: 1!important; border: 1px dotted #999; box-shadow: inset 0 0 5px #777;}

.nCHolder{  display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; flex-basis: auto; transition: .5s all; flex-direction:column!important; }
    .nCHolder.hiddenSectionContact { flex-grow: 0; opacity: 1;max-height: 0; }

.InvalidAddressLength{ background-color: #FF4D4D; color: #fff;
}
.InvalidAddressLength .DetailHolder i { color: #fff!important; 
    border-right: 1px solid #fff !important;}

.InvalidAddressLength .DetailHolder div { color: #fff!important;}

.InvalidAddressLength:hover{  color: #333!important;
}
.InvalidAddressLength:hover .DetailHolder i { color: #333!important; 
    border-right: 1px solid #333 !important;}

.InvalidAddressLength:hover .DetailHolder div { color: #333!important;}

.ContactValidationError{ position: relative; min-height: 0; overflow: hidden; transition: .5s all; opacity: 0; color: #ff4d4d; max-height: 0; line-height: 30px; text-align: center; font-weight: bold; font-size: 15px }
    .ContactValidationError.FoundError { max-height: 50px;  min-height: 30px; opacity: 1; }
.ContactValidationError.FoundError:before,.ContactValidationError.FoundError:after{ content: '\f321'; font-family: 'Font Awesome 5 Pro'; margin-right: 10px; margin-left: 10px;  font-size: 30px;}

#eSole,#eProprietor{ display: flex; flex-direction: column!important; flex-grow: 1!important;}

.ContactNotesBox{ overflow-y: auto; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
}

.ContactNotesHistory{ position: relative;}
.cSSelectorCheck{ pointer-events: none; border-radius: 50px 0 0 50px !important;  }
label.cSSelectorCheck { line-height: unset!important; }



@media (min-width: 320px) And (max-width:420px) And (orientation: portrait) {
    .ConCol{flex-direction:column;}
        .ConCol .ConFillWidth {width:90%;}
        .ConCol label {
            width: 90%!important;
            text-align:center;
            display:inline-block;
        }
    .ConAutoWidth {
        flex-grow: 1 !important;
        width: 90% !important;
    }

    .CreateNewContactBtn, .CreateNewAddressBtn{
        font-size:1em;
    }
    .CreateNewContact h4 {
        text-align: center;
    }
}



@media (min-width: 721px) And (max-width:960px) And (orientation: landscape), (max-width: 991.98px) And (orientation: landscape) {
    .CreateNewContactBtn, .CreateNewAddressBtn {
        font-size: 1em;
    }
    .CreateNewContact h4 {
       text-align:center;
    }
}

@media (max-width: 991.98px) And (orientation: portrait) {
}

@media (max-width: 1199.98px) And (orientation: portrait) {
}