html, body{
    font-family: 'Roboto', sans-serif;
}

space_boxmain > .container {
    padding: 70px 15px 20px;
}

.footer {
    background-color: #f5f5f5;
    font-size: .9em;
    height: 30px;
}

.footer > .container {
    padding-right: 15px;
    padding-left: 15px;
}

.not-set {
    
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    content: '';
    left: 3px;
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    margin: 4px 4px 2px 4px;
    background: transparent;
}

a.asc:after {
    border-bottom: solid 7px #212529;
    border-top-width: 0;
}

a.desc:after {
    border-top: solid 7px #212529;
    border-bottom-width: 0;
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    padding-top: 7px;
    color: rgba(255, 255, 255, 0.5);
}
.worktable_nav_item{
    border-left: 2px solid lightgray;
    color: lightskyblue;
    font-size: 30px;
    padding-left: 0.5em;
    text-align: center;
    transition: color 0.3s ease-out; 
}
.worktable_nav_item:hover{
    color: whitesmoke;
  transition: color 0.5s ease-out; 
}

.worktable_top_item{
    cursor: pointer;
    color: lightskyblue;
    transition: color 0.3s ease-out; 
    text-decoration: none;
}
.worktable_top_item:hover{
  color: whitesmoke;
  transition: color 0.5s ease-out;
  text-decoration: none;
}

.crm-fit-content{
    width: fit-content;
    min-width: 100%;
}
.crm_nav_stiky{
    position: sticky;
    top: 0;
    z-index: 1000;
}

@media(max-width:970px) {
    .nav li > form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 0;
    }
    
    .hide-block-sm{
        display: none;
        height: 0;
        overflow: hidden;
    }
    
    .messages_pbx_container{
   margin-left: auto;
   margin-right: 1em;
}

  .task-log-helpblock{
   display: block !important;;
   background-color: lightcyan !important;
   margin: 0em !important;
   padding: 0em !important;
}
.task-log-helpblock span{
display: block !important;  
padding: 1em; 
}
.task-log-helpblock p{
line-height: 1.5em;
font-size: 0.8em;
margin-bottom: 0.3em;
padding-left: 0.8em;
border-left: 3px solid  #ffc107;
}

}

@media(max-width:1660px){
    
     .hide-block-md{
        display: none;
        height: 0;
        overflow: hidden;
    } 
    

}
    
.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.75);
}

.nav > li > form > button.logout:focus {
    outline: none;
}

.space_box{
    border: 1px;
    background-color: #abdde5;
}

.grayscaleimg{
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);

}

.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: #17a2b8; /* цвет стрелочки (по умолчанию #000)*/
}
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: #17a2b8; /* цвет стрелочки (по умолчанию #000)*/
}
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: #17a2b8; /* цвет стрелочки (по умолчанию #000) */
}
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
    border-left-color: #17a2b8; /* цвет стрелочки (по умолчанию #000) */
}
.tooltip-inner {
    white-space: pre-wrap;
    max-width: 250px; /* максимальная ширина подсказки (по умолчанию 200px) */
    color: #fff; /* цвет шрифта */
    background-color: #17a2b8; /* цвет фона (по умолчанию #000) */
    border-radius: 0.25rem; /* радиус скругдения углов */
}
.btn-order-ready{
    position: absolute;
    right: 0px;
    top: 0px;
    right: 5px;
    top: -5px;
}
.lead_add_button{
    position: relative;
height: 30px;
width: 30px;
display: block;
top: 50px;
right: 0px;
background-color: #34ce57;
    
}

input[type=file] {
 display: none;
 background-color: #34ce57;
}

.bar_icon{
position: relative;
width: 7px;
height: 20px;
display: inline-block;
float: left;
background-color: lightgray;
margin-left: 2px;
}
._black{
background-color: black;    
}
._red{
background-color: red;    
}
._yellow{
background-color: yellow;    
}
._green{
background-color: lightgreen;    
}
._blink {
  border: none;
  display:inline-block;
  animation: blink 2s ease-in infinite;
}

@keyframes blink {
  from, to { opacity: 1 }
  50% { opacity: 0 }
}
.crmtable{
    min-height: 100%;
background: rgb(123,163,210);
background: -moz-linear-gradient(270deg, rgba(123,163,210,1) 0%, rgba(4,44,66,1) 100%);
background: -webkit-linear-gradient(270deg, rgba(123,163,210,1) 0%, rgba(4,44,66,1) 100%);
background: linear-gradient(270deg, rgba(123,163,210,1) 0%, rgba(4,44,66,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7ba3d2",endColorstr="#042c42",GradientType=1);
}
.workertable{
    min-height: 100%;
    background-color: whitesmoke;
    color: black;
}

   .container_crm{   
      color: white;
      padding-bottom: 5em;
    }

.lead_row{
   margin-top:20px;
}
.leadplate{
    background-color: #f5f5f5;
    border-radius: 10px;
    min-height: 60px;
    margin-right: 1px;
    color: grey;
    font-size: 0.7em; 
}
.leadplate_firstblok{
    background-color: #dddddd;
}

.newlead_modal-content{
    color: black;
}
.whide-modal-dialog{
    min-width: 80%;
}
  .fa-times-thin:before {
	content: '\00d8';
}
.bg-lightskyblue{
    background-color: lightskyblue;
}
.color-lightskyblue{
    color: lightskyblue;
}


.tooltip-inner {
    background-color: #ffff00;
    color: #666600;
    max-width: 150px;
}
.tooltip.bs-tooltip-top .arrow:before {
    border-top-color: #ffff00;
}
.tooltip.bs-tooltip-bottom .arrow:before {
    border-bottom-color: #ffff00;
}
.tooltip.bs-tooltip-right .arrow:before {
    border-right-color: #ffff00;
}
.tooltip.bs-tooltip-left .arrow:before {
    border-left-color: #ffff00;
}
.breadcrumbcrm_panel{
    position: relative;
    display: flex;
    margin-left: 0;
    padding: 10px;
    background-color: #555555;
    top: -20px;
    border-radius: 15px;
}
.breadcrumbcrm{
    position: relative;
    display: flex;
    margin-right: 0.3em;
    padding-left: 10px;
    padding-right: 10px;
}
.breadcrumbcrm a{
    color: white;
    text-decoration: none;
    font-size: 0.9em;
}

/* Letter attachments group */
.crm_attach-list_container {

}
.crm_attach-list-item{
 min-height: 100px;
 min-width: 100px;
 cursor: pointer; 
 background-size: contain;
}

.crm_attach-list_item_title{
 font-size: 0.8em;
  line-height: 5em;
 position: absolute;
 width: 100%;
 height: 3em;
 bottom: -1px;
 left: 0px;
 background-color: lightgray;
 color: black;
text-align: center;
background: transparent;
background: linear-gradient(to top, rgba(240, 240, 240, 1) 10%, rgba(0, 0, 0, 0) 100%);

}
.crm_orderattach_thumb{
display: inline-block;
border: 2px solid #007bff ;
border-bottom: 10px solid #007bff;
}
/* manadging letter badges */
.crm_attach-list_item_lt_badge{
 position: absolute;
 left: 4px;
 top: 4px;
}
.crm_attach-list_item_mt_badge{
 color: #dddddd;
 position: absolute;
 left: 30%;
 top: 2px;
}

.crm_attach-list_item_rt_badge{

}


.crm_attach-list-item .crm_attach-list_item_lt_badge{
   color: transparent; 
   transition: color 0.2s;
}
.crm_attach-list-item:hover .crm_attach-list_item_lt_badge{
   color: red; 
}

/* Leads panel (on WorkTable )*/
.lead_container{
padding: 0.5em;
padding-left:  1em;
border-bottom: 1px solid #a7cefb;

}
.crm-bottom-border{
    border-bottom: 2px solid yellow;
}
.lead_statement-item{
    color: gray;
    min-height: 6em;
    
}
.lead_statement-item:hover .lead_chain_footer{
   box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.2);
   transition: box-shadow, 0.5s;
}

.hover_nontransparent:hover{
   transition: opacity, 1.5s;
   background-color: white;
   opacity: 1;
}


.form-error-class{
    color: red;
    font-size: 0.8em;
    text-align: center;
}
.lead_start_statement-item{
 min-width: 220px;  
}
.lead_chain_header{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: black;
    background-color: yellow;
}
.lead_chain_header span{
    margin-left: 2em;
}
.lead_chain_avatar{
    width: 5em;
    height: 5em;
    left: 0;
    margin: 0;
    opacity: 0.3;
}
.lead_chain_body{
    position: absolute;
    overflow: hidden;
    max-height: 95%;
    right: 0;
    top: 0;
    margin: 1em;;
   text-align: right;   
}
.removesign{
    top: 0;
    right: 3px;
    display: inline-block;
    position: absolute;
    opacity: 0.3;
    color: gray;
}
.removesign:hover{
   opacity: 1;
   color: red;
   transition: opacity 1s;
   transition: color 1s;
}

.lead_chain_footer{
    display: flex;
    position: relative;
    min-width: 100%;
    bottom: 0;
    left: 0;
    margin: -0.5em;
    padding-left: 0.6em; 
    padding-right: 0.6em;
    background-color: white; 
    font-size: 1.2em;
}

.lead_statement-item{
    padding: 0.6em;
}
.hover_nontransparent{
    opacity: 0;
    background-color: transparent; 
}
.lead_chain_footer ul{
  margin-left: 0.5em;  
}
.lead_chain_footer i{
  margin: 0.2em; 
}
.lead_chain_footer i:hover{
 
}

/* custom crm Colors */
.crmcolor-white {
    color: white;
}
.crmcolor-green {
    color: #33ff00;
}
.crmcolor-yellow {
    color: #ffff00;
}
.crmcolor-darkyellow {
    color: #636209;
}
.crmcolor-orange {
    color: #ff9933;
}
.crmcolor-red {
    color: #ff3333;
}
.crmcolor-gray {
    color: #999;
}
.crmcolor-skyblue {
    color: skyblue;
}
.crm-bg-darkpurple{
background-color: #4b0963;
}
.crm-bg-darkseablue{
    background-color: #0b8fa3;
}
.crm-bg-middleyellow{
    background-color: #b3b30c;
}
.crm-bg-darkgreenishyellow{
    background-color: #79a10b;
}
.crm-bg-darkgreen{
background-color: #0ba11f;
}


.crm-bg-darkyellow{
    background-color: #636209;
}
.crm-bg-lightgolden{
    background-color: lightgoldenrodyellow;
}
.crm-bg-yellow{
    background-color: #ffff00;
}
.crm-bg-coldblue{
background: rgb(46,141,255);
background: -moz-linear-gradient(0deg, rgba(46,141,255,1) 95%, rgba(52,202,255,1) 95%);
background: -webkit-linear-gradient(0deg, rgba(46,141,255,1) 95%, rgba(52,202,255,1) 95%);
background: linear-gradient(0deg, rgba(46,141,255,1) 95%, rgba(52,202,255,1) 95%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2e8dff",endColorstr="#34caff",GradientType=1);
}
.crm-bg-darkblue{
    background-color: #064ca2;
}
.crmbggray_1{
background: rgb(67,93,124);
background: -moz-linear-gradient(90deg, rgba(67,93,124,1) 0%, rgba(167,206,251,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(67,93,124,1) 0%, rgba(167,206,251,1) 100%);
background: linear-gradient(90deg, rgba(67,93,124,1) 0%, rgba(167,206,251,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#435d7c",endColorstr="#a7cefb",GradientType=1);
}
.crmbggray_2{
    background-color: #666666; 
}

.crmcolor-twinkle {
    animation: blink 0.5s  infinite; /* Параметры анимации */
   }
   .crmcolor-twinkle:hover{
  animation: blink 0.5s ease-out; /* Параметры анимации */    
   }
   @keyframes crmcolor-twinkle {
    from { opacity: 1; /* Непрозрачный текст */ }
    to { opacity: 0; /* Прозрачный текст */ }
   }

   .text-crmcolor-green{
       color: #33ff00;
   }  
      .text-crmcolor-blue{
          color: #0068ff;
   }  
        .text-crmcolor-yellow{
          color: #ffff00;
   }  
   
.bg-crmcolor-green {
    color: #fff;
    background-color: #33ff00;
}
.bg-crmcolor-yellow {
    color: #666600;
    background-color: #ffff00;
}
.bg-crmcolor-orange {
    color: #666600;
    background-color: #ff9933;
}
.bg-crmcolor-golden{
     background-color: lightgoldenrodyellow;
}

.crmform_blue input{
    font-size: 1.2em;
    color: #0066ff;
}
.crmform_blue select{
    font-size: 1.2em;
    color: #0066ff;
}
.crmform_blue textarea{
    background: #f9f7bb;
    font-style: italic;
    font-size: 1.2em;
    color: #0066ff;
}


/* Commerce block */
.commerce-chart-body{
position: relative;
text-align: center;
display: flex;
width: 100%;
max-height: 20%;
height: 200px; 
background: rgb(203,244,255);
background: linear-gradient(0deg, rgba(203,244,255,1) 0%, rgba(228,248,254,1) 26%, rgba(23,200,254,1) 100%);
font-size: 0.7em;
}

.commerce-chart{
align-self: flex-end; /* At the bottom of the parent */
float: left;
padding: 0;
max-width: 120px;
margin-left: 1em;
background: #f5f5f5;
color: gray;
font-size: 0.9em;
min-height: 15%;
border-top: 2px solid #fff;
}
.commerce-chart-box{
 position: absolute;
 bottom: 40%;
 width: 100%;
 font-size: 0.8em;
 align-content: center;
}
.commerce-chart_header{
 position: absolute;
top: -15px;
width: 100%;
align-items: center;
 min-height: 20px;
 display: block;
}
.commerce-chart_footer{
 position: absolute;
bottom: 0;
width: 100%;
align-content: center;
 display: block;   
color: black;
}
.commerce-chart_header_indicator{
display: block;
top: 100px;
align-self:flex-end;
background-color: #34ce57;
height: 2px;
font-size: 0.3em;
}
.datetimepicker_input{
  text-align: center;
    width: 100%;
}

input[type="date"]::-webkit-calendar-picker-indicator {
font-size: 1.5em;

 -webkit-text-fill-color: red;
 position: relative;
}

.blue_input input, textarea, select{
     -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    border-bottom: 2px solid #e8e8e8;
    padding: 4px 0;
    font-size: 1.2em;
    background-color: transparent;
    border-radius: 0;
    outline: none;
}

.blue_input select{
box-shadow: none;
border: none;
border-bottom: 2px solid #e8e8e8;
}

.blue_input select:focus{
box-shadow: none;
border-bottom: 2px solid #0066ff;  
}

.blue_input textarea{
    resize: none;
}
.blue_input .form-group{
    margin-bottom: 0.3em;
}
.blue_input input:focus{
box-shadow: none;
border-bottom: 2px solid #0066ff;  
}
.blue_input textarea:focus{
 box-shadow: none;
 border-bottom:  2px solid #0066ff; 
 outline: none;
}
.blue_input label{
    margin-right: 1em;
    margin-bottom: 1em;
    font-size: 0.8em;
}
.blue_input .bottomlabel{
    color: #007bff;
    font-size: 12px;
    position: relative;
    top: -1em;
}
.blue_input .toplabel{
    color: #007bff;
    font-size: 12px;
    position: relative;
    top: 2em;
}
.blue_input .toplabel_area{
    position: relative;
    color: #007bff;
    top: 0.5em; 
    
}
.blue_input form-group{
    margin-right: 0;
    padding-right: 0;
}
.blue_input input::placeholder{
    font-size: 18px;
    color: #cccccc;
    font-style: italic;
}
/* Help box in tasklog */
.task-log-helpblock{
   display: flex;
   background-color: lightgoldenrodyellow;
   margin-left: 4em;
   margin-right: 4em;
   margin-top: 2em;
   margin-bottom: 2em;
   padding-left: 2em;
     padding-right: 2em;
}
.task-log-helpblock span{
display: flex;  
padding: 1em; 
}
.task-log-helpblock p{
line-height: 1.5em;
font-size: 0.8em;
margin-bottom: 0.3em;
padding-left: 0.8em;
border-left: 3px solid  #ffc107;
}

.overmodal-content{
    z-index: 101;
    position: absolute;
    margin: 0.7em;
    width: 98%;
    height: 93%;
    display: block;
    display: flex;
    flex-direction:column;
    background-color: white;
}
.middle_modal_content{
 margin: 2em;
 box-shadow: #0066ff 4em 4em;
}
/* SELECT2 overchange CSS */
.select2-container--krajee-bs4 .select2-search--dropdown .select2-search__field {
    box-shadow: none !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #555 !important;
}
.select2-container--krajee-bs4 .select2-selection--single .select2-selection__arrow {
    height: 0% !important;
    visibility: hidden !important;
}
.select2-container--krajee-bs4 li.select2-results__option {
    
}
.select2-results__option select2-results__message{
display: none !important;   
}
.select2-container--krajee-bs4 .select2-selection {
    box-shadow: none !important;
     border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 2px solid #e8e8e8 !important;
    border-radius: 0 !important;
}
.select2-container--krajee-bs4 .select2-selection:hover{
  box-shadow: none !important;
border-bottom: 2px solid #0066ff !important;
}
.select2-container--krajee-bs4 .select2-results__option--highlighted[aria-selected] {
    background-color: #0d6efd !important;
    color: #fff;
}
.edit_button_container{
   width: 100%; 
  height: 100%;
 position: absolute;  
  background-color: #dddddd; 
  z-index: 2; 
  display: none;
}

/* CRMSELECT */
.crmselect_holder{
    position: relative;
}
.crmselect_dropdown{
    position: absolute;
    overflow: hidden;
    z-index: 1;
    width: 100%;
    margin-top: -1em;
    max-height: 0; 
    border-radius: 0 0 5px 5px;
}
.crmselect_dropdown_open{
    max-height: 500px;
    overflow: hidden;
    overflow-y: scroll;
    transition: max-height 1s ease-out; 
}
.crmselect_option{
    font-size: 1em;
}
.blue-whenhover:hover{
    background-color: #007bff  !important;
    color: white  !important;
    cursor: pointer;
}
.blue-whenhover:hover i{
   
    color: white  !important;
    transition: color 1.5s ease-out;
}
.blue-whenhover:hover i:hover{
   
color: lightgray;

}

.file-upload-progress-bar{

}
.muted-box{
    opacity: 0.6;
    transition: opacity 1.5s ease-out;
}
.small_text{
  font-size: 0.9em;
line-height: 1.1em;  
}
.smaller_text{
  font-size: 0.7em;
line-height: 1em;  
}

.muted-box:hover{
    opacity: 1;
    transition: opacity 0.2s ease-in;
}
.muted-leadchain{
    opacity: 0.3;
    transition: opacity 0.3s ease-out;  
}
.unmuted-leadschain{
    opacity: 1;
    transition: opacity 0.3s ease-out;  
}
.messages_pbx_container{
   z-index: 1035;
}
.UserMessageBox{
    width: 25rem;
    height: 2.1em;
    background-color: lightgray;
}
.PbxSettingsBox{
 
    width: 25rem;
    height: 2.5em;
}
.UserBalanceBox{
    margin-top: 1em;
    z-index: 1035;
    color: lightskyblue;
}
.UserMessageInformer{
 display: block;
 height: 100%;
}
.messagesDropContainer{
    display: flex;
    position: relative;
    background-color: whitesmoke;
    overflow: hidden;
    overflow-y: scroll;
    height: auto;
    max-height: 88vh;
    margin-top: 3px;
}

/* close messagesDropContainer*/
.mdc-close{
 height:0; 
 background-color: red;
 transition: height 1s;   
}

/* Slider */
/* Link PAger */
.crm-link-pager{
margin: 1em;   
}
.crm-link-pager li{
 background-color: white;
 padding: 5px;
 padding-left: 12px;
 padding-right: 12px;
 margin: 2px;
}
.crm-link-pager .active-page{
    background-color: lightskyblue;
}
.crm-link-pager .first{
    background-color: lightskyblue;
    color: white;
}
.crm-link-pager .first a{
    color: white;
}
.crm-link-pager li a{
font-size: 1.25rem; 
color: gray;
font-weight: 500;
line-height: 1.2;
}
.crm-link-pager .active-page a{
color: white;
}

/*audio */
.popover{
    background-color: skyblue;
    padding: 5px;
} 
.bs-popover-right .arrow:after {
  border-right-color: skyblue;
}
.popover-header{
    background-color: skyblue;
}
.popover audio{
    display: flex;
    width: 100%;
    background-color: skyblue;
}
/* scroll list*/
.scroll-list{
    display: flex;
    position: relative;
    background-color: whitesmoke;
    overflow: hidden;
    overflow-y: scroll;
    height: auto;
    max-height: 20vh;
    margin-top: 3px;
}
/* Added for Analyse Section */
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
    color: black;
    background-color: gold;
    border-color: #999900;
    
}
/* Briefs */
.brief-selector label{
    font-size: 1em;
    margin-right: 2em;
}
.brief-selector textarea{
    width: 100%;
}

/* control sticker */
.control_lead_stiker{
    position: absolute;
    top: -1em;
    right: 2em;
    background-color: transparent;
    width: 0px;
}
.crm-text-shadow{
    text-shadow: 0 0.3rem 0.5rem rgb(0 0 0 / 35%) !important;
}