@font-face{
    font-family:Proxima Nova;
    src:local('ProximaNova-Regular'),
        url("fonts/ProximaNova-Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
        url("fonts/ProximaNova-Regular.otf") format("opentype"),/* Open Type Font */
        url("fonts/ProximaNova-Regular.svg") format("svg"),/* Legacy iOS */
        url("fonts/ProximaNova-Regular.ttf") format("truetype"),/* Safari, Android, iOS */
        url("fonts/ProximaNova-Regular.woff") format("woff"),/* Modern Browsers */
        url("fonts/ProximaNova-Regular.woff2") format("woff2");/* Modern Browsers */
    font-weight:400;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:Proxima Nova;
    src:local('ProximaNova-Semibold'),
        url("fonts/ProximaNova-Semibold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
        url("fonts/ProximaNova-Semibold.otf") format("opentype"),/* Open Type Font */
        url("fonts/ProximaNova-Semibold.svg") format("svg"),/* Legacy iOS */
        url("fonts/ProximaNova-Semibold.ttf") format("truetype"),/* Safari, Android, iOS */
        url("fonts/ProximaNova-Semibold.woff") format("woff"),/* Modern Browsers */
        url("fonts/ProximaNova-Semibold.woff2") format("woff2");/* Modern Browsers */
    font-weight:600;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:Proxima Nova;
    src:local('ProximaNova-Bold'),
        url("fonts/ProximaNova-Bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
        url("fonts/ProximaNova-Bold.otf") format("opentype"),/* Open Type Font */
        url("fonts/ProximaNova-Bold.svg") format("svg"),/* Legacy iOS */
        url("fonts/ProximaNova-Bold.ttf") format("truetype"),/* Safari, Android, iOS */
        url("fonts/ProximaNova-Bold.woff") format("woff"),/* Modern Browsers */
        url("fonts/ProximaNova-Bold.woff2") format("woff2");/* Modern Browsers */
    font-weight:700;
    font-style:normal;
    font-display:swap;
}


html{
    -webkit-font-smoothing:antialiased;
    scroll-behavior:smooth;
}

body{
    margin:0;
    padding:0;
    font-family:Proxima Nova;
    line-height:1.208333;
    background:#EEF1F7;
    font-size:1.500em;
    color:#636363;
}

*:focus{
    outline:none
}

*::-moz-focus-inner{
    outline:none;
    border:0
}

*{
    box-sizing:border-box;
    outline:none;
}

a{
    color:#0068a3
}

a:hover{
    text-decoration:none;
    color:#ff6f20
}

p:first-child{
    margin-top:0
}

strong{
    font-weight:700
}

.container{
    width:100%;
    max-width:1110px;
    position:relative;
    box-sizing:border-box;
    word-wrap:break-word;
    padding-right:15px;
    padding-left:15px;
    margin-right:auto;
    margin-left:auto;
    z-index:1;
}



.abrChatBoxArea{
    max-width:1610px;
    margin:50px auto;
    position:relative;
    padding:0 15px;
}

.abrHed{
    color:#FFF;
    font-size:16px;
    font-weight:700;
    font-family:"Proxima Nova";
    border-radius:4px 4px 0 0;
    line-height:normal;
    background:#313949;
    padding:22px;
}

.abrChatBoxIn{
    background:#fff;
    padding:30px 12px 10px;
    position:relative;
    border-radius:4px;
}

.abrChatHed{
    display:flex;
    position:relative;
    align-items:center;
    justify-content:space-between;
    background:linear-gradient(90deg, #025483 1.28%, #1277B0 100%);
    box-shadow:0px 4px 4px #C9E3F2;
    border-radius:4px 4px 0 0;
    padding:6px 20px;
    z-index:99;
}

.abrChatHedLeft{
    display:flex;
    align-items:center;
    gap:24px;
}

.abrTextTit{
    color:#FFF;
    font-size:14px;
    font-weight:700;
}

.abrChaCall{
    display:flex;
    padding:10px 14px;
    box-shadow:0px 0px 10px 0px #024D78;
    border-radius:4px;
    background:#FFF;
}

.abrUsr p{
    color:#FFF;
    font-size:14px;
    line-height:1.35;
    margin:0;
}

.abrUsr p strong{display:block;}
/*===Select Box Start ===*/
.cstSeltBox{
    position:relative;
    z-index:9;
}
.cstSeltBox .cstSelArea{
    border:none;
    color:#313949;
    font-size:14px;
    border-radius:4px;
    line-height:1.285;
    padding:8px 10px 6px 24px;
    position:relative;
    background:#fff;
    font-weight:600;
    text-align:left;
    cursor:pointer;
    width:230px;
}

.cstSeltBox .cstSelArea strong{
    font-weight:700;
    display:block;
}

.cstSeltBox .cstSelArea p{
    margin:0;
    font-weight:400;
}

.cstSeltBox .cstSelArea br:nth-child(1),
.cstSeltBox .cstSelArea br:nth-child(3){
    display:none
}
.cstSeltBox .cstSelArea:after{
    top:45%;
    height:7px;
    content:"";
    position:absolute;
    border-bottom:2px solid #025483;
    -webkit-transform:translateY(-50%) rotate(45deg);
    transform:translateY(-50%) rotate(45deg);
    border-right:2px solid #025483;
    transition:0.1s ease;
    margin-top:0px;
    right:15px;
    width:7px;
}

.cstSeltBox .cstSelArea.toggle:after{
    -webkit-transform:translateY(-50%) rotate(-135deg);
    transform:translateY(-50%) rotate(-135deg);
    margin-top:4px;
}

.cstSeltBox .cstSelIts{
    top:100%;
    z-index:1;
    overflow:hidden;
    position:absolute;
    transform:scale(1, 0);
    transform-origin:top center;
    -webkit-transform:scale(1, 0);
    -webkit-transform-origin:top center;
    box-shadow:0px 0px 10px 0px #025483;
    border-radius:0 0 4px 4px;
    transition:0.2s ease;
    visibility:hidden;
    margin:18px 0 0;
    background:#FFF;
    width:250px;
    padding:0;
}

.cstSeltBox .cstSelIt{
    padding:0 24px;
    position:relative;
    cursor:pointer;
}

.cstSeltBox .cstSelIt:hover,
.cstSeltBox .cstSelIt.active{
    background:linear-gradient(90deg, #025483 0%, #1277B0 100%);
}

.cstSelIt:last-child .abrUsrId,
.cstSelIt:hover .abrUsrId,
.cstSelIt.active .abrUsrId{
    border-bottom:1px solid transparent;
}

.abrUsrId{
    border-bottom:1px solid #D7D7D7;
    padding:10px 0;
}


.cstSelIt strong{
    display:block;
    margin-bottom:5px;
    font-size:16px;
    color:#313949;
}

.cstSelIt p{
    font-size:14px;
    font-weight:400;
    color:#909090;
    margin:0;
}

.cstSelIt.active strong,
.cstSelIt:hover strong,
.cstSelIt.active p,
.cstSelIt:hover p{
    color:#fff;
}

.cstSeltBox .cstSelIts.toggle{
    visibility:visible;
    transform:scale(1, 1);
}
/*===Select Box End ===*/
/*=== ChatBox Box Start ===*/
.abrChatBox{
    overflow-y:auto;
    min-height:440px;
    box-sizing:border-box;
	background:#ebf6fd url(images/widget-bg.png) repeat left top;
    padding:42px 20px 20px;
    flex-direction:column;
    display:flex;
}

.abrChatBox .sender:nth-child(1){margin-top:40px}

.sender .abrMsgBox,
.receiver .abrMsgBox{
    max-width:640px;
    display:inline-block;
}

.receiver{
    display:flex;
    justify-content:flex-end;
    margin-top:60px;
}

.sender .abrMsgName{
    margin-bottom:5px;
    position:relative;
    margin-top:-40px;
}
.sender + .sender .abrMsgName{
    margin-top:0;
}
.sender + .sender{
    margin-top:15px;
}

.receiver + .receiver{
    margin-top:15px;
}

.receiver .abrMsgName{
    justify-content:flex-end;
    margin-top:10px;
    width:100%;
}

.abrMsgName strong{
    color:#313949;
    font-size:14px;
    font-weight:700;
}

.abrMsgName{
    display:flex;
    align-items:center;
    gap:0 20px;
}

.abrMsgName span{
    color:#313949;
    font-size:14px;
    font-weight:400;
    line-height:normal;
}
.sender .abrMsgName span{color:#909090}
.abrMsgcont,
.abrMsgFile{
    line-height:1;
    font-size:16px;
    background:#fff;
    display:inline-block;
    padding:17px 45px 17px 30px;
    box-shadow:0px 0px 10px #4898C6;
    border-radius:0 100px 100px;
    font-weight:700;
    color:#313949;
}

.abrMsgFile{
    padding:10px 10px 10px 16px;
}

.abrMsgFile{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}

.abrMsgFilItm,
.abrMsgImg{
    border-radius:50%;
}
.abrMsgFilItm{
    width:86px;
    height:86px;
}
.abrMsgImg{
    width:102px;
    height:102px;
}

.receiver .abrMsgBox{
    display:flex;
    justify-content:flex-end;
    flex-wrap:wrap;
}

.receiver .abrMsgcont,
.abrMsgError{
    color:#FFF;
    font-size:16px;
    background:#025483;
    padding:16px 30px 16px 22px;
    box-shadow:0px 0px 10px #4898C6;
    border-radius:100px 100px 0;
    display:inline-block;
    text-align:right;
    font-weight:700;
    line-height:1;
}
.receiver .abrMsgcont{color:#DFF1FC;}

.abrMsgcont span{
    font-weight:400;
    margin-bottom:10px;
    display:block;
}

.abrMsgError{
    background:#FDDDAE;
    padding:16px 18px 16px 30px;
    align-items:center;
    display:flex;
}

.abrMsgError svg{margin-left:24px;}

.abrInputMsg{
    display:flex;
    padding:20px 30px;
    justify-content:space-between;
    background:linear-gradient(90deg, #1277B0 1.28%, #025483 99.88%);
    border-radius:0 0 5px 5px;
    align-items:center;
}

.abrAttFil{
    width:68px;
    height:68px;
    border:none;
    background:#FFF;
    border-radius:4px;
    box-shadow:0px 0px 10px 0px #024D78;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    display:flex;
}
.abrInBox{
    border:none;
    height:72px;
    flex-shrink:0;
    border-radius:5px;
    width:calc(100% - 300px);
    padding:2px 30px 2px 15px;
    background-image:url(images/fileBtn.svg);
    background-position:right 27px top 50%;
    background-repeat:no-repeat;
    font-family:inherit;
    font-weight:700;
    font-size:18px;
    color:#000;
}

.abrSendBtn{
    width:187px;
    height:68px;
    font-size:24px;
    border-radius:4px;
    font-family:'Proxima Nova';
    background:linear-gradient(262deg, #EE5906 0%, #FF9700 100%);
    box-shadow:0px 4px 4px 0px #01476F;
    font-weight:700;
    cursor:pointer;
    border:none;
    color:#FFF;
}
.abrSendBtn:hover{background:linear-gradient(90deg, #025483 0%, #1277B0 100%);}

/*=====Pop Box Start ======*/

.crtPopArea{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    z-index:99;
}
.crtPopArea::after{
    top:0;
    left:0;
    height:100%;
    background:#000;
    position:absolute;
    border-radius:4px;
    opacity:0.2;
    content:"";
    width:100%;
}
.aDdRemove .crtPopArea{
    display:none;
}

.crtTmpBox{
    top:18%;
    width:412px;
    position:relative;
    box-shadow:0px 0px 10px 0px #025483;
    transform:translate(-50%);
    border-radius:4px;
    background:#FFF;
    z-index:99;
    left:50%;
}

.crtTmpHed{
    color:#FFF;
    display:block;
    font-size:16px;
    text-align:center;
    background:linear-gradient(90deg, #025483 0%, #1277B0 100%);
    border-radius:4px 4px 0 0;
    font-weight:700;
    padding:12px 0;
}

.crtInputs{padding:22px;}
.crtInput{margin-bottom:10px;}
.crtInput label{
    color:#313949;
    font-size:16px;
    font-weight:700;
    line-height:1;
}

.crtInput input,
.crtInput textarea{
    border-radius:4px;
    background:#FDFDFD;
    border:1px solid #CFC8C7;
    font-family:inherit;
    padding:10px 15px;
    font-size:14px;
    width:100%;
}

.crtInput textarea{resize:none;}

.crtInput input:focus,
.crtInput textarea:focus{
    border-radius:4px;
    border:1px solid #025483;
}

.maxtext{
    color:#909090;
    font-size:14px;
    font-weight:400;
    display:block;
    line-height:1;
}

.crtBtnGp{
    display:flex;
    margin-top:16px;
    gap:5px;
}

.crtInputsDrop .cstSeltBox .cstSelArea{
    padding:8px 10px 6px 0;
    border-bottom:1px solid #D7D7D7;
    border-radius:0;
    width:100%;
}

.crtInputsDrop .cstSeltBox .cstSelIts{
    width:100%;
    box-shadow:none;
    border-radius:0;
    position:absolute;
    overflow:hidden;
    margin:8px 0 0;
}

.crtInputsDrop .cstSeltBox .cstSelIts.toggle{
    visibility:visible;
    transform:scale(1, 1);
    position:relative;
}

.crtInputsDrop .cstSeltBox .cstSelIt{
    margin-bottom:8px;
    position:relative;
}

.crtInputsDrop .cstSeltBox .cstSelIt::after{
    left:0;
    width:100%;
    height:1px;
    position:absolute;
    background:#D7D7D7;
    bottom:-8px;
    content:"";
}

.crtInputsDrop .crtBtnGp{
    margin-top:8px;
    border-top:1px solid #D7D7D7;
    padding-top:10px;
}

.crtBtnGp .abrSendBtn{
    width:auto;
    box-shadow:none;
    padding:15px 30px;
    font-size:16px;
    height:auto;
}

.crtBtnGp .abrSendBtn:first-child{background:linear-gradient(90deg, #025483 0%, #1277B0 100%);}
/*=====Pop Box Start ======*/
/*=== ChatBox Box End ===*/

@media screen and (max-width:1279px){
    .sender .abrMsgName,
    .abrChatBox .sender:nth-child(1){
        margin-top:0;
    }
    .sender,
    .receiver{margin-top:30px;}
}

@media screen and (max-width:1023px){
    .abrMsgcont,
    .abrMsgFile{
        padding:8px 10px 8px 16px;
    }

    .receiver .abrMsgcont,
    .abrMsgError{
        font-size:14px;
        padding:8px 25px 8px 18px;
        border-radius:40px 40px 0;
    }

    .abrMsgName span,
    .abrMsgName strong{
        font-size:12px;
    }

    .abrInputMsg .abrInBox{
        height:52px;
        font-size:18px;
        width:calc(100% - 170px);
        background-position:right 15px top 50%;
    }

    .abrSendBtn{
        width:100px;
        font-size:18px;
        height:50px;
    }
}

@media screen and (max-width:767px){
    .abrChatBoxIn{padding:15px 10px;}
    .abrChatHed{
        flex-wrap:wrap;
        padding:10px 15px
    }
    .abrChatHedLeft{
        gap:5px;
        flex-wrap:wrap;
    }
    .cstSeltBox .cstSelIts{width:100%}
    
    .abrTextTit{width:100%;}

    .abrUsr{width:75%;}

    .cstSeltBox{margin-top:10px;}

    .abrUsrDropBox{width:100%;}

    .receiver .abrMsgName{text-align:right;}

    .abrMsgName{flex-wrap:wrap;}

    .abrInputMsg{padding:8px 10px;}

    .abrInBox{font-size:14px;}

    .abrAttFil{
        width:30px;
        height:40px;
    }

    .abrAttFil svg{
        width:14px;
        height:auto;
    }
    .abrMsgFilItm{
        width:60px;
        height:60px;
    }
    .abrMsgImg{
        width:80px;
        height:80px;
    }
    .abrInputMsg .abrInBox{
        height:40px;
        width:calc(100% - 100px);
        background-position:right 10px top 50%;
        background-size:10px;
        font-size:14px;
    }

    .abrSendBtn{
        width:60px;
        font-size:14px;
        height:40px;
    }

    .crtTmpBox{
        width:300px;
        top:28%;
    }
}