@font-face {
    font-family: 'ExpletusSans';
    src: url('fonts/ExpletusSans.woff2') format('woff2'), url('fonts/ExpletusSans.woff') format('woff');
}

@font-face {
    font-family: 'OpenSans';
    src: url('fonts/OpenSansRegular.woff2') format('woff2'), url('fonts/OpenSansRegular.woff') format('woff');
}

@font-face {
    font-family: 'AmaranthRegular';
    src: url('fonts/amaranthRegular.woff2') format('woff2'), url('fonts/amaranthRegular.woff') format('woff');
}
@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter.woff2') format('woff2'), url('fonts/Inter.woff') format('woff');
}
.MainFont {
    font-family: 'Inter' !important;
}

.OpenSansFont {
    font-family: OpenSans;
}

body {
    font-family: Inter !important;
    font-size: 16px;
}
footer {
    /*background: #0d67b7;
    color: #ffffff;*/
}

.NavigationTop {
    /*background-color: #a1aeb0;*/
    /*-webkit-box-shadow: 0px 4px 8px 0px rgba(207,207,207,1);
    -moz-box-shadow: 0px 4px 8px 0px rgba(207,207,207,1);
    box-shadow: 0px 4px 8px 0px rgba(207,207,207,1);*/
    background-color: #ffffff;
    min-height: 80px;
    color: #b8adc1;
    /*border-bottom: solid 1px #e3e3e3;*/
}
.BorderLeft {
    border-left: solid 1px #e3e3e3;
}
.BorderRight {
    border-right: solid 1px #e3e3e3;
}
.NavTopFullHeight {
    min-height: 80px;
}
.TopNavLogo {
    max-height: 26px;
    margin: 4px 0px 8px 0px !important;
}
.Content {
    /*height: calc(100% - 480px) !important;*/
}

.MediumText {
    font-size: 18px;
}

h1, .uk-h1, h2, .uk-h2, h3, .uk-h3, h4, .uk-h4, h5, .uk-h5, h6, .uk-h6 {
    font-family: 'Inter' !important;
}
h3 {
    font-size: 20px;
    font-weight: bold;
}
h4 {
    font-size: 18px;
    font-weight: bold;
}

.DialPopup input[type=text] {
    height: 64px !important;
    padding: 0px 32px !important;
}
.DialPopup input[type=text].w75 {
    width: 82%!important;
}
.DialPopup select {
    height: 64px !important;
    padding: 0px 16px !important;
}
.DialPopup textarea {
    max-width: 87%;
}

#MainNavigationMenu {
    /*overflow-y: auto;
    height: calc(100% - 250px) !important;*/
    overflow-y: hidden;
}

.BlueBackground {
    background: #5484e6;
}
/*.MenuLevel1, .LightGreenBackground {
    background: #a1aeb0;
}*/
.MenuLevel1 {
    /*-webkit-box-shadow: 0px 8px 4px 2px rgba(207,207,207,1);
    -moz-box-shadow: 0px 8px 4px 2px rgba(207,207,207,1);
    box-shadow: 0px 8px 4px 2px rgba(207,207,207,1);*/
    /*background: #eeedf2;*/
    background: #ffffff;
    margin-top: -85px;
    height: 110%;
}
.NavItemName {
    /*color: #b1aeb5 !important;*/
    color: #151515 !important;
}
.BlueBackgroundChecked {
    background: #42a3f4;
}
.GreenBackground {
    background: #9fbb76;
}

.RoundedBorders {
    border-radius: 32px;
}
.RoundedBordersSmaller {
    border-radius: 16px;
}

/*.scroll::-webkit-scrollbar, .scroll html::-webkit-scrollbar {
    width: 4px;
}

.scroll::-webkit-scrollbar-track, .scroll html::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 8px;
}

.scroll::-webkit-scrollbar-thumb, .scroll html::-webkit-scrollbar-thumb {
    border-radius: 8px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}*/
::-webkit-scrollbar, iframe::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track, iframe::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb, iframe::-webkit-scrollbar-thumb {
    border-radius: 8px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

.MenuLevel1 a {
    color: #ffffff !important;
    font-size: 18px;
}
.MenuLevel1 li {
    padding: 10px 15px;
    margin-top: 0px !important;
}
.MenuLevel1 li.uk-active, .MenuLevel1 li.uk-active a span {
    /*background: #034179 url('/images/cms/menulevel1highlight.png') no-repeat right center;*/
    /*background: #cecece;*/
    color: #541aac !important;
}
.MenuLevel2 {
    background: #ffffff;
    /*border-right: solid 2px #cecece;*/
    -webkit-box-shadow: 4px 0px 8px 0px rgba(207,207,207,1);
    -moz-box-shadow: 4px 0px 8px 0px rgba(207,207,207,1);
    box-shadow: 4px 0px 8px 0px rgba(207,207,207,1);
}
.MenuLevel2 a {
     color: #808080 !important;
     font-size: 18px;
     text-decoration: none;
}

.Button, .Button:hover {
    /*background-color: #808080;*/
    background-color: #6730bb;
    padding: 14px 25px;
    min-width: 160px;
    color: #ffffff;
    border: none;
    font-size: 17px;
    cursor: pointer;
    text-decoration: none;
    border-radius: 8px;
    margin: 8px 16px;
}
.ButtonTransparent, .ButtonTransparent:hover {
    background-color: transparent;
    padding: 14px 25px;
    min-width: 160px;
    color: #541aac;
    border: 1px solid #541aac;
    font-size: 17px;
    cursor: pointer;
    text-decoration: none;
    border-radius: 8px;
    margin: 8px 16px;
}
.PurpleButton, .PurpleButton:hover {
    background-color: #ffffff;
    padding: 4px 16px !important;
    color: #541aac !important;
    border: solid 2px #541aac;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    border-radius: 8px;
}
.SecondaryButton {
    background-color: #3e688e;
}

.BlueC, .BlueC:hover {
    color: #541aac;
}
.GreyC, .GreyC:hover {
    color: #7b7b7b;
}
.YellowC, .YellowC:hover {
    color: #ffac00;
}
.WhiteC, .WhiteC:hover {
    color: #ffffff;
}
.TurquoiseC, .TurquoiseC:hover {
    color: #9eeffc;
}
/*.LightPurpleC, .LightPurpleC:hover {
    color: #b8adc1;
}*/
.PurpleC, .PurpleC:hover {
    color: #541aac;
}
.PurpleCImp, .PurpleCImp:hover {
    color: #541aac !important;
}
.LightPurpleC, .LightPurpleC:hover {
    color: #c597ff;
}
.BlackC, .BlackC:hover {
    color: #000000;
}
.FieldLabel {
    color: #808080;
    display: block;
}

.GreenC, .GreenC:hover {
    color: #4a932d;
}
.RedC, .RedC:hover{
    color: #c15656;
}
.LightGreenCImp, .LightGreenCImp:hover {
    color: #a1aeb0 !important;
}

.YellowBackground {
    background-color: #fff9e7;
}
.VeryLightGreyBackground {
    background-color: #f1f1f1;
}
.LightPurpleBackground {
    background-color: #f3ecff;
}


.SmallFont {
    font-size: 15px;
}

.MarkHighlight {
    background: #ed93a6 !important;
}

#SubmissionFormDiv {
    width: 63%;
}

.SearchBox {
    background: url(/images/cms/searchlense.png) no-repeat 16px center;
    padding-left: 48px !important;
}

.SendingPanel input[type=radio] {
    /*visibility: hidden;*/
    display: none;
    color: #c597ff;
    cursor: pointer;
}
.SendingPanel input[type=radio]:checked {
    /*visibility: hidden;*/
    display:none;
    color: #541aac;
}
.SendingPanel label {
    margin-right: 48px;
    padding-bottom: 18px;
}
.SendingPanel label.PurpleCImp {
    border-bottom: 4px solid #541aac;
}
.SendingPanel input[type=text] {
    border: none !important;
    border-radius: 8px !important;
    padding: 16px 16px !important;
    width: 90% !important;
    font-size: 16px !important;
    color: #808080 !important;
    background-color: #ffffff !important;
}

.BorderLineBottom {
    border-bottom: solid 1px #e3e3e3;
    padding-bottom: 16px;
}
.BorderLineBottom a,.BorderLineBottom a:hover {
    text-decoration: none;
    padding-bottom: 16px;
}
.BorderLineBottom a.PurpleC {
    border-bottom: solid 4px #541aac;
}
.SearchTextbox input[type=text] {
    border: solid 1px #e3e3e3 !important;
    border-radius: 8px !important;
    padding: 2px 16px;
    width: 90% !important;
    font-size: 16px !important;
    color: #808080 !important;
    background-color: #ffffff !important;
}

.InitialsCircle {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-size: 24px;
    color: #ffffff;
    /*background-color: #808080;*/
    display: inline-block;
    margin-right: 8px;
}
.OutgoingAvatar {
    /*float: right;*/
    margin-right: 0px;
    margin-left: 8px;
}
.LightYellowBackground {
    background-color: #fff9e7 !important;
}
.LightYellowBackground:not(:hover) {
    background-color: #fff9e7 !important;
}
/*.LightGreenBackground:not(:hover) {*/
    /*background-color: #82ce79 !important;*/
    /*background-color: #b6d589 !important;*/
    /*border-left: solid 8px #b6d589 !important;
}
.LightGreyBackground:not(:hover) {*/
    /*background-color: #cccccc !important;*/
    /*border-left: solid 8px #541aac !important;
}
.LightRedBackground:not(:hover) {*/
    /*background-color: #f7c9c9 !important;*/
    /*border-left: solid 8px #e76162 !important;
}
.LightBlueBackground:not(:hover) {*/
    /*background-color: #758ec1 !important;*/
    /*border-left: solid 8px #541aac !important;
    background-color: #dfdfdf !important;*/
    /*color: #ffffff;*/
/*}*/


.LightGreenBackground {
    border-left: solid 8px #b6d589 !important;
}
.LightPurpleBackground {
    border-left: solid 8px #c597ff !important;
}
.LightGreyBackground {
    border-left: solid 8px #b1adb5 !important;
}

.LightRedBackground {
    border-left: solid 8px #e76162 !important;
}

.LightBlueBackground {
    border-left: solid 8px #541aac !important;
    background-color: #dfdfdf !important;
}

.uk-badge {
    background: #758ec1;
}
.uk-background-muted {
    background-color: #f8f8f8 !important;
}

.uk-table-hover > tr:hover, .uk-table-hover tbody tr:hover {
    background: #f3ecff;
}

.uk-radio:checked, .uk-checkbox:checked, .uk-checkbox:indeterminate {
    background-color: #541aac !important;
}

.uk-tooltip.uk-active {
    background-color: #ffffff !important;
    color: #541aac !important;
    border: #541aac solid 1px;
    border-radius: 8px;
}

#ConversationContactsWrapper tr {
    border-bottom: solid 1px #efefef;
}

input[type=text], input[type=password], input[type=email], input[type=range], input[type=number], input[type=date], select, textarea {
    /*border: solid 1px #758ec1;
    border-radius: 16px;
    background-color: #e4eaf0 !important;
    min-height: 43px;
    font-size: 17px;
    padding: 0 8px;
    width: calc(100% - 20px);*/
    border: solid 1px #e3e3e3 !important;
    border-radius: 8px !important;
    padding: 16px 16px;
    width: 90% !important;
    font-size: 16px !important;
    color: #808080 !important;
    background-color: #ffffff !important;
}
.TextInputUsername {
    /*background: #f4f5f6 url('/images/cms/textemail.jpg') no-repeat left center;*/
    background: #ffffff url('/images/cms/new/usernameicongrey.png') no-repeat 8px center;
    padding-left: 48px !important;
    /*width: calc(100% - 58px) !important;*/
}
.TextInputPassword {
    /*background: #f4f5f6 url('/images/cms/textpassword.jpg') no-repeat left center;*/
    background: #ffffff url('/images/cms/new/passwordicongrey.png') no-repeat 8px center;
    padding-left: 48px !important;
    /*width: calc(100% - 58px) !important;*/
}

input.uk-disabled{
    color: #afafaf;
}
input[type=submit].uk-disabled {
    color: #afafaf;
    background-color: #808080;
}


.EditForm input[type=text], .EditForm input[type=number], .EditForm textarea, .EditForm select {
    width: 96% !important;
}

.CursorPointer {
    cursor: pointer;
}

.Marginbottom-20px{
    margin-bottom: -20px;
}

.AccordionBorderBottom{
    border-bottom: solid 1px #cecece;
}

.SignInPage {
    background: url('/images/cms/new/loginpagebg.png') no-repeat 120% top;
}

.ShowOn1720px {
    display: none;
}
.ShowOnLarger1320px {
    display: inline;
}

@media screen and (max-width: 1720px) {
    .ShowOn1720px{
        display: block;
    }
}
@media screen and (max-width: 1660px) {
    .SignInPage {
        background: url('/images/cms/new/loginpagebg.png') no-repeat 175% top;
    }
}
@media screen and (max-width: 1480px) {
    .SignInPage {
        background: url('/images/cms/new/loginpagebg.png') no-repeat 235% top;
    }
}
@media screen and (max-width: 1385px) {
    .SignInPage {
        background: url('/images/cms/new/loginpagebg.png') no-repeat 312% top;
    }
}
@media screen and (max-width: 1320px) {
    .ShowOnLarger1320px {
        display: none;
    }
    .SignInPage {
        background: url('/images/cms/new/loginpagebg.png') no-repeat 430% top;
    }
}
@media screen and (max-width: 1280px) {
    .SignInPage {
        background: url('/images/cms/new/loginpagebg.png') no-repeat 580% top;
    }
}
@media screen and (max-width: 1250px) {
    .SignInPage {
        background: url('/images/cms/new/loginpagebg.png') no-repeat 780% top;
    }
}
@media screen and (max-width: 1230px) {
    .SignInPage {
        background: url('/images/cms/new/loginpagebg.png') no-repeat 980% top;
    }
}
@media screen and (max-width: 1210px) {
    .SignInPage {
        background: url('/images/cms/new/loginpagebg.png') no-repeat 1480% top;
    }
}
@media screen and (max-width: 1200px) {
    input [type=text], input[type=password], input[type=email], input[type=range], input[type=date], select, textarea {
        width: calc(100% - 30px);
    }

    select {
        width: calc(100% - 2px);
    }
    #SubmissionFormDiv {
        width: 80%;
    }

    .SignInPage {
        background: none;
    }
    .SignInPageBottom {
        background: url('/images/cms/new/loginpagebg.png') no-repeat 0 0;
    }
}

select.Languages {
    background: transparent;
    padding-left: 0px;
    width: auto !important;
    border: none;
    min-height: inherit !important;
}


.MarginLeft0 {
    margin-left: 0;
}

.MarginLeft30px {
    margin-left: 30px;
}
.MarginLeft40px {
    margin-left: 40px;
}

.MarginLeft52px {
    margin-left: 52px;
}
.MarginTop80px {
    margin-left: 80px;
}

.MarginTop150px {
    margin-top: 150px;
}

.MarginTop-10px {
    margin-top: -10px;
}
.MarginTop5px{
    margin-top: 5px;
}


#overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}

.datepicker--time-sliders input[type=range] {
    border: none !important;
}



/* Custom CSS for Bicycle Polo example */

.bicycle-polo-text {
    background-color: rgba(255,255,255,0.75);
}

@media (min-width: 768px) {
    .bicycle-polo-text {
        margin-right: 5%;
        width: 40%;
    }
}

.answer-button, .call-support-button {
    width: 48%;
    float: left;
}

.hangup-button {
    width: 48%;
    float: right;
}



.Balloon {
    border-radius: 12px;
    border-bottom-right-radius: 0px;
    height: auto;
    padding: 12px;
    font-size: 16px;
    color: #000000 !important;
}
.Incoming {
    border-radius: 12px;
    border-bottom-left-radius: 0px;
    background-color: transparent !important;
    border: solid 1px #cecece;
}

.Balloon small, .Balloon br {
    display: block !important;
}


.Balloon:hover {
    /*color: #464f83;*/
    color: #000000;
}

.Balloon * {
    /*color: #464f83;*/
    color: #000000;
}

.Balloon *:hover {
    /*color: #464f83;*/
    color: #000000;
}
.message-container {
    margin: 16px 0 8px 0px;
    /*color: #c0c0c0;*/
    color: #000000;
}

.message-container .username {
    display: inline-block;
    margin-right: 5px;
    font-weight: bold;
    /*color: #2185f1;*/
    color: #000000;
}

.me, .username.me, .me *, .me *:hover {
    /*font-weight: bold;*/
    /*color: #464f83 !important;*/
    color: #000000 !important;
}

.message-container .username.me {
    display: inline-block;
    margin-right: 5px;
}

.uk-table-striped tr td {
    /*text-align: center;*/
    vertical-align: middle;
}
.uk-table-striped tr /*:nth-of-type(odd), .uk-table-striped tbody tr:nth-of-type(odd)*/ {
    background: #ffffff !important;
    border: 16px solid #f8f8f8 !important;
    border-radius: 8px !important;
    /*border-bottom: 4px solid #f8f8f8 !important;*/
    /* margin-bottom: 8px !important; */
}
.uk-table-striped tr:hover /*:nth-of-type(odd), .uk-table-striped tbody tr:nth-of-type(odd)*/ {
    background: #f3ecff !important;
    border: 16px solid #f8f8f8 !important;
    border-radius: 8px !important;
    /*border-bottom: 4px solid #f8f8f8 !important;*/
    /* margin-bottom: 8px !important; */
}



/* Auto Complete: ********************************************************/
.autocomplete-suggestions {
    border: 1px solid #999;
    background: #FFF;
    overflow: auto;
}

.autocomplete-suggestion {
    padding: 2px 5px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

.autocomplete-selected {
    background: #F0F0F0;
}

.autocomplete-suggestions strong {
    font-weight: normal;
    color: #3399FF;
}

.autocomplete-group {
    padding: 2px 5px;
}

    .autocomplete-group strong {
        display: block;
        border-bottom: 1px solid #000;
    }
/* Auto Complete ********************************************************/