/*colorpicker*/
.colorpicker {
    width: 356px;
    height: 176px;
    overflow: hidden;
    position: absolute;
    background: url(../img/cpicker/colorpicker_background.png);
    font-family: Arial, Helvetica, sans-serif;
    display: none;
}
.colorpicker_color {
    width: 150px;
    height: 150px;
    left: 14px;
    top: 13px;
    position: absolute;
    background: #f00;
    overflow: hidden;
    cursor: crosshair;
}
.colorpicker_color div {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
    background: url(../img/cpicker/colorpicker_overlay.png);
}
.colorpicker_color div div {
    position: absolute;
    top: 0;
    left: 0;
    width: 11px;
    height: 11px;
    overflow: hidden;
    background: url(../img/cpicker/colorpicker_select.gif);
    margin: -5px 0 0 -5px;
}
.colorpicker_hue {
    position: absolute;
    top: 13px;
    left: 171px;
    width: 35px;
    height: 150px;
    cursor: n-resize;
}
.colorpicker_hue div {
    position: absolute;
    width: 35px;
    height: 9px;
    overflow: hidden;
    background: url(../img/cpicker/colorpicker_indic.gif) left top;
    margin: -4px 0 0 0;
    left: 0px;
}
.colorpicker_new_color {
    position: absolute;
    width: 60px;
    height: 30px;
    left: 213px;
    top: 13px;
    background: #f00;
}
.colorpicker_current_color {
    position: absolute;
    width: 60px;
    height: 30px;
    left: 283px;
    top: 13px;
    background: #f00;
}
.colorpicker input {
    background-color: transparent;
    border: 1px solid transparent;
    position: absolute;
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    color: #898989;
    top: 4px;
    right: 11px;
    text-align: right;
    margin: 0;
    padding: 0;
    height: 11px;
}
.colorpicker_hex {
    position: absolute;
    width: 72px;
    height: 22px;
    background: url(../img/cpicker/colorpicker_hex.png) top;
    left: 212px;
    top: 142px;
}
.colorpicker_hex input {
    right: 6px;
}
.colorpicker_field {
    height: 22px;
    width: 62px;
    background-position: top;
    position: absolute;
}
.colorpicker_field span {
    position: absolute;
    width: 12px;
    height: 22px;
    overflow: hidden;
    top: 0;
    right: 0;
    cursor: n-resize;
}
.colorpicker_rgb_r {
    background-image: url(../img/cpicker/colorpicker_rgb_r.png);
    top: 52px;
    left: 212px;
}
.colorpicker_rgb_g {
    background-image: url(../img/cpicker/colorpicker_rgb_g.png);
    top: 82px;
    left: 212px;
}
.colorpicker_rgb_b {
    background-image: url(../img/cpicker/colorpicker_rgb_b.png);
    top: 112px;
    left: 212px;
}
.colorpicker_hsb_h {
    background-image: url(../img/cpicker/colorpicker_hsb_h.png);
    top: 52px;
    left: 282px;
}
.colorpicker_hsb_s {
    background-image: url(../img/cpicker/colorpicker_hsb_s.png);
    top: 82px;
    left: 282px;
}
.colorpicker_hsb_b {
    background-image: url(../img/cpicker/colorpicker_hsb_b.png);
    top: 112px;
    left: 282px;
}
.colorpicker_submit {
    position: absolute;
    width: 22px;
    height: 22px;
    background: url(../img/cpicker/colorpicker_submit.png) top;
    left: 322px;
    top: 142px;
    overflow: hidden;
}
.colorpicker_focus {
    background-position: center;
}
.colorpicker_hex.colorpicker_focus {
    background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
    background-position: bottom;
}
.colorpicker_slider {
    background-position: bottom;
}

/*colorpicker*/

/*fonts init*/
@font-face {
    font-family: 'Roboto';
    src: url('../webfonts/Roboto-LightItalic.eot');
    src: local('Roboto Light Italic'), local('Roboto-LightItalic'),
    url('../webfonts/Roboto-LightItalic.eot?#iefix') format('embedded-opentype'),
    url('../webfonts/Roboto-LightItalic.woff2') format('woff2'),
    url('../webfonts/Roboto-LightItalic.woff') format('woff'),
    url('../webfonts/Roboto-LightItalic.ttf') format('truetype'),
    url('../webfonts/Roboto-LightItalic.svg#Roboto-LightItalic') format('svg');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../webfonts/Roboto-BlackItalic.eot');
    src: local('Roboto Black Italic'), local('Roboto-BlackItalic'),
    url('../webfonts/Roboto-BlackItalic.eot?#iefix') format('embedded-opentype'),
    url('../webfonts/Roboto-BlackItalic.woff2') format('woff2'),
    url('../webfonts/Roboto-BlackItalic.woff') format('woff'),
    url('../webfonts/Roboto-BlackItalic.ttf') format('truetype'),
    url('../webfonts/Roboto-BlackItalic.svg#Roboto-BlackItalic') format('svg');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../webfonts/Roboto-Medium.eot');
    src: local('Roboto Medium'), local('Roboto-Medium'),
    url('../webfonts/Roboto-Medium.eot?#iefix') format('embedded-opentype'),
    url('../webfonts/Roboto-Medium.woff2') format('woff2'),
    url('../webfonts/Roboto-Medium.woff') format('woff'),
    url('../webfonts/Roboto-Medium.ttf') format('truetype'),
    url('../webfonts/Roboto-Medium.svg#Roboto-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../webfonts/Roboto-MediumItalic.eot');
    src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
    url('../webfonts/Roboto-MediumItalic.eot?#iefix') format('embedded-opentype'),
    url('../webfonts/Roboto-MediumItalic.woff2') format('woff2'),
    url('../webfonts/Roboto-MediumItalic.woff') format('woff'),
    url('../webfonts/Roboto-MediumItalic.ttf') format('truetype'),
    url('../webfonts/Roboto-MediumItalic.svg#Roboto-MediumItalic') format('svg');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../webfonts/Roboto-ThinItalic.eot');
    src: local('Roboto Thin Italic'), local('Roboto-ThinItalic'),
    url('../webfonts/Roboto-ThinItalic.eot?#iefix') format('embedded-opentype'),
    url('../webfonts/Roboto-ThinItalic.woff2') format('woff2'),
    url('../webfonts/Roboto-ThinItalic.woff') format('woff'),
    url('../webfonts/Roboto-ThinItalic.ttf') format('truetype'),
    url('../webfonts/Roboto-ThinItalic.svg#Roboto-ThinItalic') format('svg');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../webfonts/Roboto-Italic.eot');
    src: local('Roboto Italic'), local('Roboto-Italic'),
    url('../webfonts/Roboto-Italic.eot?#iefix') format('embedded-opentype'),
    url('../webfonts/Roboto-Italic.woff2') format('woff2'),
    url('../webfonts/Roboto-Italic.woff') format('woff'),
    url('../webfonts/Roboto-Italic.ttf') format('truetype'),
    url('../webfonts/Roboto-Italic.svg#Roboto-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../webfonts/Roboto-Black.eot');
    src: local('Roboto Black'), local('Roboto-Black'),
    url('../webfonts/Roboto-Black.eot?#iefix') format('embedded-opentype'),
    url('../webfonts/Roboto-Black.woff2') format('woff2'),
    url('../webfonts/Roboto-Black.woff') format('woff'),
    url('../webfonts/Roboto-Black.ttf') format('truetype'),
    url('../webfonts/Roboto-Black.svg#Roboto-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../webfonts/Roboto-Thin.eot');
    src: local('Roboto Thin'), local('Roboto-Thin'),
    url('../webfonts/Roboto-Thin.eot?#iefix') format('embedded-opentype'),
    url('../webfonts/Roboto-Thin.woff2') format('woff2'),
    url('../webfonts/Roboto-Thin.woff') format('woff'),
    url('../webfonts/Roboto-Thin.ttf') format('truetype'),
    url('../webfonts/Roboto-Thin.svg#Roboto-Thin') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../webfonts/Roboto-Light.eot');
    src: local('Roboto Light'), local('Roboto-Light'),
    url('../webfonts/Roboto-Light.eot?#iefix') format('embedded-opentype'),
    url('../webfonts/Roboto-Light.woff2') format('woff2'),
    url('../webfonts/Roboto-Light.woff') format('woff'),
    url('../webfonts/Roboto-Light.ttf') format('truetype'),
    url('../webfonts/Roboto-Light.svg#Roboto-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../webfonts/Roboto-BoldItalic.eot');
    src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
    url('../webfonts/Roboto-BoldItalic.eot?#iefix') format('embedded-opentype'),
    url('../webfonts/Roboto-BoldItalic.woff2') format('woff2'),
    url('../webfonts/Roboto-BoldItalic.woff') format('woff'),
    url('../webfonts/Roboto-BoldItalic.ttf') format('truetype'),
    url('../webfonts/Roboto-BoldItalic.svg#Roboto-BoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../webfonts/Roboto-Regular.eot');
    src: local('Roboto Regular'), local('Roboto-Regular'),
    url('../webfonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
    url('../webfonts/Roboto-Regular.woff2') format('woff2'),
    url('../webfonts/Roboto-Regular.woff') format('woff'),
    url('../webfonts/Roboto-Regular.ttf') format('truetype'),
    url('../webfonts/Roboto-Regular.svg#Roboto-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../webfonts/Roboto-Bold.eot');
    src: local('Roboto Bold'), local('Roboto-Bold'),
    url('../webfonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
    url('../webfonts/Roboto-Bold.woff2') format('woff2'),
    url('../webfonts/Roboto-Bold.woff') format('woff'),
    url('../webfonts/Roboto-Bold.ttf') format('truetype'),
    url('../webfonts/Roboto-Bold.svg#Roboto-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Font Awesome 5 Pro';
    src: local('Font Awesome 5 Pro Regular'), local('FontAwesome5ProRegular'),
    url('../webfonts/FontAwesome5ProRegular.woff2') format('woff2'),
    url('../webfonts/FontAwesome5ProRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Font Awesome 5 Brands';
    src: local('Font Awesome 5 Brands Regular'), local('FontAwesome5BrandsRegular'),
    url('../webfonts/FontAwesome5BrandsRegular.woff2') format('woff2'),
    url('../webfonts/FontAwesome5BrandsRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*design custom colors sizes, etc*/
:root{
    --header-bg-color: #333333;
    --header-bg-height: 71px;
    --header-fg-color: #F4F4F4;
    --body-bg-color: #F9FAFB;
    --grey-color: #7C7C7C;
    --green-color: #7DC84D;
    --blue-color: #249FD2;
    --container-gap: 266px;
    --container-width: 1368px;
    --custom-scroll-width: 5px;
}

/*css pseudo fonts*/
span.participants:before,
span.date:before,
span.time:before,
span.personal:before,
span.envelope:before,
button.envelope:before,
span.gsm:before,
span.search:before,
span.status:before,
span.status:before,
span.edit:before,
button.edit:before,
button.add-register:before,
span.bars:before,
span.upload:before,
span.tint:before,
a.webinar-preview:before
{
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
}

span.participants:before{
    content: '\f007';
    margin-right: 5px;
}
span.date:before{
    content: '\f133';
    margin-right: 5px;
}
span.time:before{
    content: '\f017';
    margin-right: 5px;
}
span.personal:before{
    content: '\f007';
    margin-right: 5px;
}
span.envelope:before,
button.envelope:before{
    content: '\f0e0';
    margin-right: 5px;
}
span.gsm:before{
    content: '\f10b';
    margin-right: 5px;
}
span.search:before{
    content: '\f002';
    margin-right: 5px;
}

span.status:before{
    content: '\f111';
    margin-right: 5px;
}
span.edit:before,
button.edit:before {
    content: '\f044';
    margin-right: 5px;
}

button.add-register:before{
    content: '\f067';
    margin-right: 5px;
}

span.bars:before{
    content: '\f0c9';
    margin-right: 5px;
}

span.upload:before{
    content: '\f093';
    /*margin-right: 5px;*/
}

span.tint:before{
    content: '\f043';
}

a.webinar-preview:before{
    content: '\f03d';
    margin-right: 5px;
}



#questions{
    overflow: unset;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    padding: 10px;
    min-height: 525px;
    border-radius: 4px;
}

#questions .question-item{
    background: #fff;
    transition: all .3s ease;
    cursor: pointer;
    position: relative;
}

#questions .question-item:after{
    content: ' ';
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 1px;
    width: 100%;
    background: rgba(0, 0, 0, 0.035);
}

#questions .question-item:hover{
    background: #e2f3fa;
}

#questions::-webkit-scrollbar-track,
.conversation-wrapper .messages-wrapper::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
    background-color: #F5F5F5;
}


#questions::-webkit-scrollbar,
.conversation-wrapper .messages-wrapper::-webkit-scrollbar {
    width: 5px;
    background-color: #F5F5F5;
}


#questions::-webkit-scrollbar-thumb,
.conversation-wrapper .messages-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.25);
    border: 2px solid rgba(0,0,0,0.05);
}


#questions #qa-panel .search-container {
    max-height: 60px;
    height: 60px;
}

#questions .search-container .search-side {
    position: relative;
    width: 80%;
}

#questions .search-container .search-side input {
    padding: 10px;
    width: 100%;
    outline: 0;
    border: 0;
    color: #6f6f6f;
}

#questions .search-container .search-side .icon {
    position: absolute;
    left: 65px;
    top: 9px;
    transition: opacity .25s ease, left .2s ease-in;
}

#questions .search-container .search-side .icon:after {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    content: '\f002';
    position: absolute;
    left: 0;
    color: #7C7C7C;
}

#questions .search-container .search-side input:focus + .icon,
#questions .search-container .search-side input[value]:not([value=""]) + .icon {
    left: 0;
    opacity: 0;
}

#questions .search-container button[rel="settings-qa"]:after{
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    content: '\f013';
    color: #7C7C7C;
    transition: all .3s ease;
}

.conversation-wrapper{
    background: #fff;
    border-radius: 4px;
}

.conversation-wrapper button[rel="settings-redirect"]{
    padding: 0;
    background: transparent;
}

.conversation-wrapper button[rel="settings-redirect"]:after{
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    content: '\f509';
}

.conversation-wrapper .redirected{
    padding: 3px;
    font-style: italic;
    color: #7C7C7C;
    background: #F4F4F4;
    border-radius: 5px;
}

.conversation-wrapper .redirected a{
    color: #7C7C7C;
    background: #F4F4F4;
    transition: all .3s ease;
}

.conversation-wrapper .redirected a:hover{
    color: #636363;
    text-decoration: none;
}

.conversation-wrapper .messages-wrapper{
    overflow-y: auto;
    padding-right: 10px;
    justify-content: flex-start;
}

.conversation-wrapper .actions button[rel="msg-bars"]:after {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    content: '\f0c9';
    color: #7C7C7C;
    transition: all .3s ease;
}

.conversation-wrapper .actions button[rel="msg-upload"]:after {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    content: '\f093';
    color: #7C7C7C;
    transition: all .3s ease;
}

textarea.message-box{
    resize: none;
    max-height: 90px;
    border: 1px solid #cecece;
    background: #F4F4F4;
    border-radius: 4px;
    outline: 0;
}

textarea.message-box:focus{
    border: 1px solid #e1e1e1;
    background: #F4F4F4;
    box-shadow: 0 0 0 0.2rem rgba(206, 206, 206, 0.25);
}

.conversation-footer{
    top: 12px;
}

.search-container:after{
    content: ' ';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgb(0,0,0);
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0) 100%);
}

.conversation-wrapper .receiver-info:after{
    content: ' ';
    left: -15px;
    bottom: 0;
    height: 1px;
    width: calc(100% + 30px);
    background: rgba(0, 0, 0, 0.09);
    position: absolute;
}


/* settings */

.settings-wrapper .nav-pills .nav-link{
    border-radius: 0;
}

.settings-wrapper a.nav-link {
    display: block;
    padding: 15px 19px;
    font-size: 16px;
    background: #fff;
    color: var(--grey-color);
    transition: all .3s ease-in;
}

.settings-wrapper a.nav-link:first-child{
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}

.settings-wrapper a.nav-link:last-child{
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

.settings-wrapper a.nav-link.active{
    background-color: var(--blue-color) !important;
    color: #fff;
}

.settings-wrapper a.nav-link.active:hover{
    background:var(--blue-color);
}

.settings-wrapper a.nav-link:hover{
    background: #f7fcfe;
}

.settings-config{
    padding: 20px 15px;
    background: #fff;
    min-height: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    border-radius: 4px;
}

.settings-wrapper{
    min-height: 600px;
    /* max-height: 600px; */
}

/* settings -> general settings tab */

.editable-text {
    margin-right: 25px;
    transition: all .2s ease-in;
    color: var(--grey-color);
    padding: 0 4px;
}

.editable-text.active{
    border-color: transparent;
}

.editable-text:focus{
    outline: 0;
    border:1px solid #e3e3e3;
    border-radius: 3px;
}

.editable-text + .edit{
    cursor: pointer;
    color: #249FD2;
}

.date-form-element{
    position: relative;
}

.date-form-element span.date{
    position: absolute;
    bottom: 12.5px;
    right: 12.5px;
}

.form-group{
    display: flex;
    flex-direction: column;
}

.form-group label{
    color: var(--grey-color);
    font-size: 14px;
    margin-bottom: 10px;
}

.form-group input:not([type="file"]),
.form-group select,
.form-group textarea{
    background: var(--header-fg-color);
    border: 1px solid #EAEAEA;
    padding: 11px 15px;
    outline: 0;
    border-radius: 4px;
    color: #000;
    height: unset;
}

.form-control:focus {
    color: var(--grey-color);
    background-color:  var(--header-fg-color);
    border-color: #d4d4d4;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(222, 222, 222, 0.25);
}

.form-group button{
    outline: 0;
    border: 0;
}

.form-group select{
    min-width: 50px;
}

.form-group button.submit{
    background: #249FD2;
    color: #fff;
    text-transform: uppercase;
    padding: 13px 30px;
    transition: all .3s ease-in;
}

.form-group button.submit:hover{
    background: #1d7ea7;
}

.form-control.trigger-edit:not([disabled]){
    background: unset;
    padding: 0;
}

.form-control.trigger-edit[disabled]{
    background: #fff;
    border: 1px solid #ededed;
    opacity: .5;
    padding: 0;
}

.form-control.trigger-edit{
    padding: 2px;
    margin-right: 10px;
}

.line{
    position: relative;
}

.line:after{
    content: ' ';
    position: absolute;
    left: -15px;
    width: calc(100% + 30px);
    height: 1px;
    background: #D9D9D9;
}

input[type="radio"],
input[type="checkbox"] {
    width: 20px;
    height: 20px;
}

.form-check-input{
    margin-top: .15rem;
}

.form-check.after-line:after{
    content: ' ';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    height: 1px;
    background: #e6e6e6;
}

.cursor-pointer{
    cursor: pointer;
}

.draggable-content .draggable-item {
    background: #F4F4F4;
    border: 1px solid #EAEAEA;
    border-radius: 4px;
}

.draggable-content .draggable-item .checkmark {
    top: -10px;
}

.draggable-content .draggable-item .field-name {
    justify-self: flex-start;
    flex: auto;
}

span.blank:after,
span.blank:before {
    content: unset;
}

.email-settings-wrapper .draggable-lead div.status-title {
    width: 112px;
}

.email-settings-wrapper .draggable-item .field-name {
    margin-left: 85px;
}

.email-settings-wrapper .draggable-item .sent-name {
    width: 250px;
}

.email-settings-wrapper .draggable-lead div.mail-title,
.email-settings-wrapper .draggable-item .field-name {
    width: 245px;
}

.email-settings-wrapper .draggable-lead div.sent-name {
    width: 360px;
}

/*view settings*/


.preview-box{
    width: 192px;
    height: 136px;
    background: #F4F4F4;
    color: #7C7C7C;
}

.preview-box + .form-group > input::-webkit-file-upload-button,
input.form-control-file::-webkit-file-upload-button
{
    font-weight: 700;
    font-size: 14px;
    line-height: 17px;
    text-align: center;
    text-transform: uppercase;
    color: #7C7C7C;
    background-color: #F4F4F4;
    border: 1px solid #EAEAEA;
    display: inline-block;
    padding: 11px 13px;
    border-radius: 3px;
    transition: all .3s ease;
    cursor: pointer;
    outline: 0;
}


.preview-box + .form-group > input::-webkit-file-upload-button:hover,
input.form-control-file::-webkit-file-upload-button:hover,

.preview-box + .form-group input.form-control-file:focus + span,
input.form-control-file:focus + span,

.preview-box + .form-group input.form-control-file + span:hover,
input.form-control-file + span:hover {
    background-color: #EAEAEA;
}

.preview-box + .form-group input.form-control-file,
input.form-control-file {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
    transition: all .3s ease;
}

.preview-box + .form-group input.form-control-file + span,
input.form-control-file + span
{
    background: #F4F4F4;
    font-family: Roboto, sans-serif;
    transition: all .3s ease;
    cursor: pointer;
}

.preview-box + .form-group input.form-control-file + span:before,
input.form-control-file + span:before {
    right: 10px;
    position: absolute;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
}

span.tint::before{
    position: absolute;
    right: 15px;
    top: calc(50% + 5px);
}

button.submit{
    border-radius: 4px;
}

button.submit::before{
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    content: '\f0c7';
    margin-right: 10px;
}

.player-wrapper {
    position: fixed;
    left: 25px;
    bottom: 25px;
    width: 25%;
    height: 250px;
    z-index: 5050;
}

ul.nav a.name:before,
ul.nav a.log-out:before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

ul.nav a.name:after,
ul.nav a.log-out:after {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 400;
  content: '\f013';
  position: relative;
  left: 8px;
}

ul.nav a.log-out:after {
    content: '\f2f5';
}

ul.nav a{
    color: #F4F4F4;
    transition: color .25s ease-in;
}

ul.nav a:hover {
    color: #b4b4b4;
}

.search-side input.form-control{
    padding: 10px;
    outline: 0;
    border: 0;
    color: #6f6f6f;
    background: #fff;
}

.search-side .icon {
    position: absolute;
    left: 65px;
    top: 12px;
    opacity: 1;
    transition: opacity .25s ease, left .2s ease-in;
}

.search-side input.form-control:focus + .icon,
.search-side input.form-control[value]:not([value=""]) + .icon {
    left: 0;
    opacity: 0;
}

.search-side input.form-control:focus{
    border: 0;
    outline: 0;
}

.search-side .icon:after {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    content: '\f002';
    position: absolute;
    left: 0;
    color: #7C7C7C;
}

/* side field */

#side-field{
    position: absolute;
    top: 0;
    right: -50%;
    width: 50%;
    height: 100vh;
    z-index: 10000;
    transition: all .3s ease;
}

#side-field div[id*="sf-"]{
    max-height: 100%;
    overflow-y: scroll;
    height: 100%;
}

#side-field.show{
    right: 0;
}

#side-field + .overlay{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    transition: all .3s ease-in;
    background: transparent;
    z-index: -1;
}

#side-field + .overlay.show {
    z-index: 9999;
    background: rgba(0, 0, 0, 0.53);
}


.subscriber-items span:empty{
    display: inline-flex;
    width: 14px;
    height: 14px;
}

.repeater input.form-control-file + span{
    padding: 11px!important;
}

.repeater button[type="button"]{
    padding: 9px 14px!important;
}


#questions .question-item.unread{
    background: #249FD2;
    color: #fff!important;
}
#questions .question-item.unread .block-info{
    color: rgba(255, 255, 255, 0.64) !important;
}

.messages-wrapper{
    scroll-behavior: smooth;
}

.message-download-wrapper a{
    opacity: .6;
    transition: all .3s ease;
}

.message-download-wrapper a:hover{
    opacity: .9;
}

.message-download-wrapper{
    left: -10px;
    width: calc(100% + 20px);
    background: #1e85b0;
    min-height: 25px;
    padding: 0 10px;
    margin-top: 5px;
    border-top: 1px solid #05719e;
}

button[rel="msg-upload"] > span{
    padding: 1px 5px!important;
}

.send-message-loader{
    right: 25px;
    top: 45%;

}

body.overflow-y-hidden{
    overflow-y: hidden;
}